Досега дефиницията на изображението ви трябваше да изглежда приблизително така:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Във img-Елемента обаче могат да бъдат назначени (и трябва) някои атрибути. Първият е alt. Текстът, дефиниран тук, се показва от браузъра, ако изображението - от каквито и да е причини - не може да бъде заредено.
За съжаление, връзката с атрибута alt често води до неразбирателства. В действителност, атрибутът alt служи изключително за случая, когато изображението не се показва. Все пак, някои браузъри показват стойността на атрибута alt в прозорец с подсказка, когато поставите мишката върху изображението.
Този подход е грешен. За подобни подсказки се използва по-скоро атрибутът title. Съответният дефиниция би изглеждала по следния начин:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Логото на PSD-Tutorials.de" />
В този случай стойността на title преобладава над тази на alt.
Размерни ангажименти
В HTML вече много неща се решават чрез CSS, но дефинирането на размерите не е едно от тях. Височината и широчината се дефинират без промяна с помощта на двата атрибута width и height. Повторно един пример:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Логото на PSD-Tutorials.de" width="200" height="150" />
Ако не посочите мерна единица за width или height, числовите стойности ще бъдат интерпретирани като пиксели от браузъра. Така в предходния пример изображението е с ширина 200 пиксела и височина 150 пиксела. Възможно е също така да се посочи процентно измерване.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Логото на PSD-Tutorials.de" width="20%" height="15%" />
Процентните стойности се отнасят до наличното пространство за показване. Ако не посочите размерни ангажименти, браузърите ще покажат графиките в оригиналния им размер.
Изображения и абзаци с текст
Когато поставяте изображения в комбинация с плаващ текст, внимавайте.
<p><img src="logo.png" alt="" width="180" height="150" /> Този текст се показва до изображението.</p>
При img става въпрос за така наречения Inline-елемент. Графиките могат да бъдат поставени директно в текста. Ако графиката е по-висока от височината на реда, текстът се подравнява от браузъра в рамките на реда. По подразбиране текстът се подравнява отдолу надясно спрямо графиката.
Подравняването можеше да бъде контролирано в по-старите версии на HTML посредством атрибута align. Моля, не го използвайте повече, защото е премахнат от HTML5 стандарта. Вместо това използвайте възможностите, които ви предлага CSS. Така можете например да обгръщате графиката с текст.
Дълго описание
HTML ви дава възможност да добавите подробно описание към изображение. Това е винаги удобно, когато за дадено изображение действително се налагат пояснения. Можете да запазите допълнителната информация на различни места и да препращате към тях.
Допълнителната информация може да се намира на различни места.
<img src="bild1.png" alt="Диаграма 1" title="Диаграма 1" longdesc="#diagram" />
Тук се предполага, че на страницата има зона с ID diagram.
Най-вероятно най-полезната възможност е, когато информацията се съхранява във външен файл.
<img src="bild1.png" alt="Диаграма 1" longdesc="diagram1.htm" />
Въпреки това все още липсва поддръжка от браузърите. Освен това този атрибут изглежда оказва предизвикателство на производителите на браузъри как да го осъществят безпроблемно.
Всъщност не е особено красиво и интуитивно, за да се използва например във Firefox. Ако елементът longdesc има изображение, нормалните потребители на страницата не го забелязват отначало. Те по-скоро трябва да кликнат върху изображението с десния бутон на мишката.
След това в контекстното меню се вижда опцията Показване на описанието. Ако я изберете, ще се покаже допълнителната информация, посочена в longdesc. Както вече казах, това работи по този начин във Firefox, но определено не е елегантно.
Opera го решава това по подобен начин. Когато кликнете върху изображението в този браузър с десния бутон на мишката, ще видите записа Дълго описание.
Това ви довежда до посочената допълнителна информация.
W3C допълнително предлага да се предостави дългото описание чрез Data-URL.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />
Ако все още нямате опит с тези Data-URL, ще намерите подробна информация на http://de.wikipedia.org/wiki/Data-URL.
Дефиниране на описанията на изображения
Досега в HTML не беше възможно да се дефинират надписи и групи изображения. Точно този аспект се промени с HTML5. Тук бяха въведени двата нови елемента figure и figcaption.
За да предвидим: figure не е само за използване в комбинация с графики. Фактически, елементът може да бъде използван за всякакви елементи, които допълват документа. Това могат да бъдат освен изображения и диаграми, например кодови примери и видеоклипове.
Освен figure, има също figcaption. Чрез този елемент могат да се предоставят алтернативни описания за съдържание, което не е четимо за определени групи потребители.
Ето един пример за използването на двата елемента figure и figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Това е нашият нов лого.</figcaption> </figure>
Поглед в браузъра от вас ще донесе следния резултат:
Както браузърите работят с двете елементи, зависи изцяло от тях. В общи линии обаче можете да влияете на изобразяването чрез CSS.
В рамките на един елемент figure могат да бъдат включени много изображения или други елементи. Въпреки това в един елемент figure може да бъде включен само един елемент figcaption. Отново един пример:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" /> <figcaption>Това е нашият нов лого.</figcaption> </figure>
По този начин можете също да включите няколко изображения в един елемент figure.
В HTML5 има много нововъведения, особено по отношение на логическата структура на уебсайтове или съдържание. Тези нововъведения ще бъдат подробно запознати през този пореден урок.
