HTML изображения

Изображения се декларират със следния таг: <img />. Забележете, че <img/> не изисква затварящ таг, понеже носи в себе си символа за край на таг: "/". Ето и един пример за вмъкване на изображение:

<p>Това е центрирано изображение:
<img src="/kuche.jpg" width="200" height="150" alt="калиграфия-куче" align="middle" />
</p>

Резултатът от този код ще бъде:

Това е центрирано изображение:  

Като атрибут на <img /> се задават следните параметри:

• името на изображението-файл. Използва се фразата
  
  src="адрес-на-файла"
  
  където "адрес-на-файла" е пътя до директорията (считан от настоящата директория), където се намира изображението и самото му име. Не забравяйте да укажете точно адреса на изображението, ако то се намира в папка,  различна от настоящата - тази на html документа.
• широчина и височина на изображението. Задават се съответно с
  
  width="широчина" и
  
  height="височина".
  
  На мястото на широчина и височина сложете съответния размер на изображението (в пиксели). Ако укажете стойности, различни от реалните, изображението ще бъде разтегнато или свито съобразно със зададените width и height стойности: опитай сам.
• алтернативно название. Указва се с
  
  alt="алтернативно име".
  
  Това е текстът, който ще се покаже на мястото на изображението ако то по една или друга причина не може да бъде заредено.

  Добра практика е винаги да пишете смислени алтернативни имена: някои ваши посетители може да са с увредено зрение и да ползват услугите на браузър, който им чете текстовете от страниците. Алтернативното име е единствения начин те да разберат какво изображение сте сложили на страницата си.

  Още една причина да не пропускате alt е индексирането му от търсачките: роботите на Google, Yahoo и т.н. не разбират изображения, но чудесно се справят с текст и рейтингът на сайта ви може да се промени за добро ако се грижите alt названията да включват по някоя и друга ключова дума.

• позиция спрямо текста. Използва се
  
  align="позиция"
  
  и една от следните стойности за позиция:
  • bottom: Долният край на изображението се подравнява с текста.
  • middle: Средата на изображението и линията на текста съвпадат.
  • top: Горният край на изображението е на нивото на текста.
  • left: Изображението се изнася в лявата част на екрана.
  • right: Текстът остава вляво, а изображението - плътно вдясно.

Можете да експериментирате с позицията на изображението: опитай сам.

• Рамка на изображението: използвайте
  
  border="рамка",
  
  като на мястото на рамка сложите желаната дебелина на рамката в пиксели: опитай сам

Изображения може да се използват като хипервръзка: достатъчно е да вложите тага за изображение между таговете <a> и </a>  на хипервръзката: опитай сам

Повече за видовете файлове-изображения в интернет можете да прочетете в статията Изображения в уеб страници.

Следва: HTML таблици

начало на страницата