Расмҳо

Ин барои чӣ лозим аст

Саҳифа танҳо аз матн дилгиркунанда аст. Акси мол, аватар, логотип, нақша — ҳамаи инҳо расм мебошанд. Дар HTML расм ба дохили файл «гузошта намешавад»: дар саҳифа танҳо суроға навишта мешавад, браузер тасвирро алоҳида зеркашӣ мекунад ва дар ҷои лозимӣ нишон медиҳад.

Теги <img>

<img> — теги танҳо (пӯшанда надорад). Ҳама чиз бо атрибутҳо дода мешавад:

<img src="logo.png" alt="Логотипи CodeWithMe">

• src (source, манбаъ) — суроғаи расм;
• alt (alternative) — тавсифи матнӣ.

Натиҷа: расми logo.png. Агар файл набошад — ба ҷояш нишонаи расми «шикаста» ва матни «Логотипи CodeWithMe».

Расм аз куҷо гирифта мешавад

src мисли href-и истинодҳо кор мекунад:

<img src="cat.jpg" alt="Гурба">                <!-- файл дар назди саҳифа -->
<img src="images/dog.png" alt="Саг">           <!-- дар ҷузвдони images -->
<img src="https://example.com/a.png" alt="…">  <!-- аз сайти дигар -->

Форматҳо: .jpg — аксҳо, .png — расмҳо бо шаффофият, .svg — нишонаҳо ва логотипҳо (ҳангоми калон кардан сифатро гум намекунанд), .webp — формати муосир, ҳаҷмаш камтар.

Дар муҳаррири тарафи рост файли cat.jpg нест, бинобар ин нишонаи расми шикаста ва матни alt-ро мебинӣ. Ин муқаррарӣ аст — санҷиш ба атрибутҳо нигоҳ мекунад.

alt барои чӣ лозим аст

alt — расмият нест:

• одамони нобино саҳифаҳоро тавассути барномаи хониши экран гӯш мекунанд — он alt-ро бо овоз мехонад;
• агар расм бор нашуда бошад (интернети суст), матни alt намоён мешавад;
• системаҳои ҷустуҷӯ аз рӯи alt мефаҳманд, ки дар расм чист.

alt-и хуб моҳиятро тавсиф мекунад: «Гурбаи малла дар диван хобидааст», на «расм» ё «IMG_2031». Агар расм танҳо ороишӣ бошад (нақш, ҷудокунанда), alt=""-и холӣ навис — барнома онро мегузарад.

Андозаҳо

Атрибутҳои width ва height андозаро бо пиксел медиҳанд:

<img src="cat.jpg" alt="Гурба" width="200">

Натиҷа: расм бо бари 200 пиксел; баландӣ худаш мутобиқ мешавад, таносуб нигоҳ дошта мешавад.

Агар ҳарду тарафро бо таносуби дигар диҳӣ, расм кашида мешавад. Одатан ҳардуро нишон медиҳанд — андозаҳои ҳақиқии файл: он гоҳ браузер барои расм пешакӣ ҷой мегузорад ва матн ҳангоми боркунӣ «намеҷаҳад». Андозаи намоишро бошад дар CSS иваз мекунанд.

Имзо: <figure> ва <figcaption>

Расмро бо имзо ба <figure> мепечонанд, имзоро дар <figcaption> менависанд:

<figure>
  <img src="chart.png" alt="Афзоиши фурӯш дар як сол" width="400">
  <figcaption>Расми 1. Фурӯш ду баробар афзуд</figcaption>
</figure>

Натиҷа: расм бо фосила, дар зераш — сатри имзо.

Расм-истинод

Истинод метавонад расмро печонад — ҳамин тавр логотиперо месозанд, ки ба саҳифаи асосӣ мебарад, ё пешнамоеро, ки акси калонро мекушояд:

<a href="/">
  <img src="logo.svg" alt="Ба саҳифаи асосӣ" width="120">
</a>

Натиҷа: логотипи пахшшаванда. Дар ин ҷо alt тавсиф мекунад, ки истинод ба куҷо мебарад.

Дар дохил чӣ тавр кор мекунад

<img> — унсури сатрӣ: он мисли ҳарфи калон дар сатр меистад. Бинобар ин ду расм пайи ҳам дар паҳлӯи ҳам меистанд, на зери ҳамдигар. То расм бор шавад, браузер аллакай боқимондаи саҳифаро мекашад. Агар андозаҳо дода нашуда бошанд, онҳоро танҳо баъди боркунӣ мефаҳмад — ва матн ҷойи худро иваз мекунад.

Хатоҳои маъмул

1. alt нест. Саҳифа барои нобиноён дастнорас мешавад. Ҳамеша alt навис.
2. </img>-и пӯшанда. Чунин тег нест — <img> танҳо аст.
3. Хатҳои моили баръакс дар роҳ. src="images\cat.jpg" (мисли Windows) — нодуруст. Дар веб танҳо /.
4. Ҳарфҳои калон ва хурд дар номи файл. Дар сервер Cat.JPG ва cat.jpg — файлҳои гуногунанд. Номҳоро бо ҳарфҳои хурд навис.
5. Акси бузург барои расми хурд. Файли 5 МБ бо width="100" ҳамоно пурра зеркашӣ мешавад. Файлро пешакӣ хурд кун.

Ёддошт

Код	Чӣ кор мекунад
<img src="…" alt="…">	расм бо тавсиф
width="200" / height="100"	андозаҳо бо пиксел
alt=""	расми ороишӣ
<figure> + <figcaption>	расм бо имзо
<a href="…"><img …></a>	расм-истинод