Употреба на ознаката HTML IMG за слики и објекти
HTML IMG ознаката го уредува вметнувањето на слики и други статични графички објекти во рамките на веб-страница. Оваа обична ознака поддржува неколку задолжителни и опционални атрибути кои додаваат богатство на вашата способност да дизајнираат веб-страница фокусирана на слики.
Пример за целосно формирана HTML IMG таг изгледа вака:
Потребни атрибути за ознаки на
SRC. Единствениот атрибут што треба да добиете слика за прикажување на веб-страница е атрибутот SRC. Овој атрибут го идентификува името и локацијата на сликата за прикажување.
ALT. За да напишете валидни XHTML и HTML4, атрибутот ALT е исто така потребен. Овој атрибут се користи за да обезбеди nonvisual прелистувачи со текст кој ја опишува сликата. Прелистувачите го прикажуваат алтернативниот текст на различни начини. Некои го прикажуваат како скокачки прозорец кога го ставате глувчето над сликата, други го прикажуваат во својства кога ќе кликнете со десното копче на сликата, а некои воопшто не го прикажуваат.
Користете го алт текстот за да дадете дополнителни детали за сликата што не се релевантни или важни за текстот на веб-страницата. Но запомнете дека во читачи на екрани и други прелистувачи само за текст, текстот ќе биде прочитан во линија со останатиот текст на страницата. За да се избегне забуна, користете описен алт текст кој вели (на пример), "За веб дизајн и HTML", наместо само "лого".
Во HTML5, атрибутот ALT не е секогаш потребен, бидејќи можете да користите насловот за да додадете повеќе опис на него. Можете исто така да го користите атрибутот ARIA-DESCRIBEDBY за да наведете ИД кој содржи целосен опис.
Alt текстот исто така не е потребен ако сликата е чисто декоративна, како што е графиката на врвот на веб-страница или икони. Но, ако не сте сигурни, вклучете го алт текстот за секој случај.
Препорачани атрибути на IMG
Ширина и височина . Треба да влезете во навика секогаш да ги користите WIDTH и HEIGHT атрибутите. И секогаш треба да ја користите вистинската големина и да не ги менувате големината на сликите со прелистувачот.
Овие атрибути ја забрзуваат рендерирањето на страницата бидејќи прелистувачот може да одвои простор во дизајнот за сликата, а потоа да продолжи со преземање на остатокот од содржината, наместо да ја чека целата слика да се преземе.
Други корисни атрибути на IMG
НАСЛОВ . Атрибутот е глобален атрибут кој може да се примени на секој HTML елемент . Покрај тоа, атрибутот TITLE ви овозможува да додадете дополнителни информации за сликата.
Повеќето пребарувачи го поддржуваат атрибутот TITLE, но тоа го прават на различни начини. Некои го прикажуваат текстот како скокачки прозорец, додека други го прикажуваат на информативни екрани кога корисникот кликне на сликата. Можете да го користите атрибутот TITLE за да напишете дополнителни информации за сликата, но не сметајте на оваа информација да биде или скриена или видлива. Вие дефинитивно треба да го користите ова за да скриете клучни зборови за пребарувачите. Оваа практика сега е казнета од повеќето пребарувачи.
USEMAP и ISMAP . Овие два атрибути ги поставуваат мапите на сликите од страниците на клиент () и од страна на серверот (ISMAP) на вашите слики.
LONGDESC . Атрибутот поддржува адреси до подолг опис на сликата. Оваа функција ги прави вашите слики подостапни.
Заостанати и застарени IMG атрибути
Неколку атрибути сега се застарени во HTML5 или заостанато во HTML4. За најдобар HTML, треба да пронајдете други решенија, наместо да ги користите овие атрибути.
ГРАНИЧНИ . Атрибутот ја дефинира ширината во пиксели на која било граница околу сликата. Тоа е застарено во корист на CSS во HTML4 и е застарено во HTML5.
ALIGN . Овој атрибут ви овозможува да поставите слика во текстот и да го проследат текстот околу неа. Можете да ја порамните сликата на десно или лево. Тоа е застарено во корист на float CSS сопственост во HTML4 и е застарено во HTML5.
HSPACE и VSPACE . HSPACE и атрибутите VSPACE додаваат хоризонтален хоризонтален простор (HSPACE) и вертикално (VSPACE). Белата површина ќе биде додадена на двете страни на графиката (горната и долната или левата и десната), па ако ви треба само простор од една страна, треба да го користите CSS. Овие атрибути се застарени во HTML4 во корист на маргина CSS сопственост, и тие се застарени во HTML5.
LOWSRC . Атрибутот LOWSRC обезбедува алтернативна слика кога изворот на сликата е толку голем што го презема крајно бавно. На пример, може да имате слика од 500KB што сакате да ја прикажете на вашата веб-страница, но за 500KB ќе треба да поминат многу време. Значи, вие создавате многу помала копија од сликата, можеби во црно-бело или едноставно екстремно оптимизирана, и ставете ја во атрибутот LOWSRC. Помалата слика ќе се преземе и ќе се прикаже прво, а потоа кога ќе се појави поголема слика, тој ќе го замени нискиот извор.
Атрибутот LOWSRC беше додаден на Netscape Navigator 2.0 до ознаката IMG. Таа беше дел од нивото на DOM 1, но потоа беше отстранета од нивото на DOM 2. Поддршката на прелистувачот беше скептична за овој атрибут, иако многу сајтови тврдат дека тоа е поддржано од сите современи прелистувачи. Тоа не е застарено во HTML4 или застарено во HTML5 бидејќи никогаш не било официјален дел од ниту спецификацијата.
Избегнувајте да го користите овој атрибут и наместо да ги оптимизирате вашите слики, така што ќе се вчитаат брзо. Брзината на вчитување на страница е критичен дел од добар веб-дизајн, а големи слики бавно страници надолу енормно - дури и ако го користите атрибутот LOWSRC.