УРОК 7 : Изображения - 1 част

Изображенията могат да се групират в 2 категории:

  • малоцветни - изображения съдържащи малко на брой цветове ( напр. 256 цвята). Използват се за лого, фон, заглавия със специален шрифт и др. Най-често са в фoрмат .gif и .png, което им позволява да поддържат прозрачност и анимации.

  • пълноцветни - изображения съдържащи голям брой цветове (напр. снимки, лого с оттенъци и др.  ) . Най-често са в формат .jpg , .jpeg , .png и др.

Изображенията в HTML се добавят чрез единичния маркер

<img src="име на файл или URL" alt="поясняващ текст" />

Където :

  • src(от source) - указва мястото, от което да се зареди изображението. Ако изображението е в същата папка, където се намира html страницата ви, като стойност на src се записва "името на изображението.разширение". Например - <img src="logo.png" alt="primer" />

    Ако изображението е от друго място просто указвате целия път до него, но малко повечко за URL ще научите в 9 урок .

  • alt (от alternative) - пуказва алтернативен текст, който ще се извежда ако изображението липсва. Атрибута не е задължителен, но се препоръчва употребата му, защото има и браузери, които не пуказват изображения, а само текст. 

Други атрибути, които може да вмъкнете в маркера <img src="" /> са:

  • title="стойност" - извежда съобщение, при задържане на курсора върху изображението.

  • border="стойност" - указва рамка на изображението (стойността започва от 0).

  • width="стойност" - указва широчината на изображението. Стойността може да бъде както в пиксели, така и в проценти от страницата. 

  • height="стойност" - указва височината на изображението. Стойността може да бъде както в пиксели, така и в проценти от страницата. 

За да подравним изображението трябва да използваме маркера <div>...</div> с атрибута align, чийто стойности бяха left, right, center .  Например :

<div align="center">

<img src="primer.jpg" alt="primer" />

</div>

Ще изглежда така :

primer

Премини към  УРОК 8 : Изображения - 2 част =>

Нагоре