Изображенията - картинки, фотографии и др., анимирани или статични, са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да "освежат" HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна. Освен това използването на прекалено много изображения ще направи страницата "тежка" и трудна за зареждане.
1.ФОРМАТИ НА ФАЙЛОВЕ ЗА ИЗОБРАЖЕНИЯ
В HTML се използват три основни формата на файлове, съдържащи изображения:
1. gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки.
Файловете с разширение gif имат две важни предимства пред другия основен формат:
- могат да съдържат "прозрачен" елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще "пасва" на страници с различно оцветен фон, освен ако на изображението не е зададен ефект "сянка" - тогава фона трябва да е същия, на който е правен ефекта.
- gif файловете могат да бъде анимирани - да съдържат движеща се картинка.
2. jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии.
Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.
Съществува и още един файлов формат, който в момента се използава рядко, защото са малко браузърите, които го поддържат. Това е png формата, който съдържа в себе си най-доброто от gif и jpg форматите. Въпреки качествата на png файловете използването им засега не е препоръчително.
3. png
1.ФОРМАТИ НА ФАЙЛОВЕ ЗА ИЗОБРАЖЕНИЯ
В HTML се използват три основни формата на файлове, съдържащи изображения:
1. gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки.
Файловете с разширение gif имат две важни предимства пред другия основен формат:
- могат да съдържат "прозрачен" елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще "пасва" на страници с различно оцветен фон, освен ако на изображението не е зададен ефект "сянка" - тогава фона трябва да е същия, на който е правен ефекта.
- gif файловете могат да бъде анимирани - да съдържат движеща се картинка.
2. jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии.
Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.
Съществува и още един файлов формат, който в момента се използава рядко, защото са малко браузърите, които го поддържат. Това е png формата, който съдържа в себе си най-доброто от gif и jpg форматите. Въпреки качествата на png файловете използването им засега не е препоръчително.
3. png
Съществува и още един файлов формат, който в момента не поддържат всички браузъри. Това е png формата, който съдържа в себе си най-доброто от gif и jpg форматите.
2.ПОКАЗВАНЕ НА ИЗОБРАЖЕНИЯ В WEB СТРАНИЦАТА
Най-простия код с който може да покажете изображение на страницата си е следния:
<img src="Име на изображение.gif" />
Тъй като тага за изображение няма затварящ таг, в края му се поставя затваряща наклонена черта, според изискванията на XHTML.
Ако изображението се намира в същата папка, в която се намира и HTML-страницата, тогава за да го покажем трябва да напишем кода:
<img src="Example.gif" />
Ето едно просто изображение с размери ширина 200 пиксела и височина 90 пиксела, направено на Photoshop, което ще използваме в примерите:
Най-простия код с който може да покажете изображение на страницата си е следния:
<img src="Име на изображение.gif" />
Тъй като тага за изображение няма затварящ таг, в края му се поставя затваряща наклонена черта, според изискванията на XHTML.
Ако изображението се намира в същата папка, в която се намира и HTML-страницата, тогава за да го покажем трябва да напишем кода:
<img src="Example.gif" />
Ето едно просто изображение с размери ширина 200 пиксела и височина 90 пиксела, направено на Photoshop, което ще използваме в примерите:
По подразбиране изображението се появява в лявата част на страницата. Ако желаем да разположим изображението вдясно или в средата на страницата можем да използваме тага <div> и атрибута му align със съответните стойности - left (което е и по подразбиране - отляво), right (помества изображението вдясно) и center (центрира изображението).
Например за да центрираме изображение ще напишем:
<div align="center"> <div align="right"> <div align="left>
<img src="Example.gif" /> <img src="Example.gif" /> <img src="Example.gif" />
</div> </div> </div>
3.АТРИБУТИ НА ТАГА ЗА ИЗОБРАЖЕНИЕ
Атрибутите на тага за изображение не са абсолютно задължителни - и да не ги използвате изображението ви ще се вижда на екрана. Но за някои от атрибутите е препоръчително да бъдат въвеждани, тъй като това ще подобри качеството на вашия HTML-документ.
1. Атрибутите width и height задават съответно ширина и височина на изображението в пиксели.
Въвеждането на тези атрибути указва на браузъра точно колко място да отдели за изображението, вследствие на което страницата се зарежда по-бързо, а бързината на зареждане на един HTML-документ е от голямо значение за посетителите на страницата. Препоръчително е винаги да задавате ширина и височина на изображенията си.
2. Атрибута alt задава алтернативно название на изображението.
Понякога, въпреки, че страницата е заредена, изображенията не се появяват. В тези случаи на мястото, където трябва да е вашето изображение, ще се появи празно рамкирано пространство. За да разберат посетителите на страницата какво съдържа изображението се използва атрибута alt="Произволно описание на изображението". Това, което напишете между кавичките, ще се появи на мястото на изображението ви, ако то не се зареди. Така посетителите ще научат какво представлява изображението, макар че няма да го видят. Препоръчително е винаги да използвате този атрибут alt и по още една причина - търсачките индексират текста, въведен като обяснение на графиките с атрибута alt, така че това е още един начин за рекламиране и популяризиране на страницата ви.
Ако комбинираме горните атрибути, ще получим следния код:
<img src="Example.gif" width="ширината на изображението в пиксели, примерно 90" height="височината на изображението в пиксели, примерно 200" alt="Описание на изображението" />
В случай, че ползвате Internet Explorer, ще можете да видите алтернативния си текст дори и изображението да се е заредило - отидете с мишката върху него и я оставете неподвижна за няколко секунди - алтернативния текст ще се появи в малък отделен прозорец.
3. Атрибута border задава рамка около изображението в пиксели.
Ако не използвате този атрибут, около вашето изображение по подразбиране няма да се появи никаква рамка. Но това се отнася само за изображения, които не са хипервръзки! Ако едно изображение е използвано като връзка, тогава около него автоматично се появява рамка с цвета, който сте задали на хипервръзките (по подразбиране е син). В такъв случай, за да премахнете тази рамка, трябва да въведете атрибута border със стойност 0: border="0".
Ако желаете да зададете рамка на изображението си например 8 пиксела трябва да напишете:
<img src="Example.gif" border="8" />
В браузера изображението ще изглежда така:
!ВНИМАНИЕ: Атрибута border на тага img е изваден от стадратите на езика и не се поддържа от XHTML 1.0 Strict DTD, макар че браузерите ще продължат да го поддържат. На негово място е препоръчително да се използват стилове (styles). За подробности погледнете CSS справочника.
4.ПОДРАВНЯВАНЕ НА ИЗОБРАЖЕНИЕ СПРЯМО ТЕКСТ
1. Ако вкарате кода за показване на изображение и започнете да пишете текст веднага след него, без да изписвате тага за преминаване на друг ред или какъвто и да е друг таг, тогава на екрана текста ще започне да "тече" от най-долната част на изображението.
Сега ще научите как да правите така, че текста да "обтича" изображението.
Този ефект се постига чрез атрибута align, който трябва да се вкара в тага img и да му се зададе някаква стойност.
- Например ако зададем на атрибута align стойност left, кода заедно с текста ще изглежда така:
<img src="Example.gif" width="200" height="90" alt="Описание на изображението" align="left" />
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Например за да центрираме изображение ще напишем:
<div align="center"> <div align="right"> <div align="left>
<img src="Example.gif" /> <img src="Example.gif" /> <img src="Example.gif" />
</div> </div> </div>
3.АТРИБУТИ НА ТАГА ЗА ИЗОБРАЖЕНИЕ
Атрибутите на тага за изображение не са абсолютно задължителни - и да не ги използвате изображението ви ще се вижда на екрана. Но за някои от атрибутите е препоръчително да бъдат въвеждани, тъй като това ще подобри качеството на вашия HTML-документ.
1. Атрибутите width и height задават съответно ширина и височина на изображението в пиксели.
Въвеждането на тези атрибути указва на браузъра точно колко място да отдели за изображението, вследствие на което страницата се зарежда по-бързо, а бързината на зареждане на един HTML-документ е от голямо значение за посетителите на страницата. Препоръчително е винаги да задавате ширина и височина на изображенията си.
2. Атрибута alt задава алтернативно название на изображението.
Понякога, въпреки, че страницата е заредена, изображенията не се появяват. В тези случаи на мястото, където трябва да е вашето изображение, ще се появи празно рамкирано пространство. За да разберат посетителите на страницата какво съдържа изображението се използва атрибута alt="Произволно описание на изображението". Това, което напишете между кавичките, ще се появи на мястото на изображението ви, ако то не се зареди. Така посетителите ще научат какво представлява изображението, макар че няма да го видят. Препоръчително е винаги да използвате този атрибут alt и по още една причина - търсачките индексират текста, въведен като обяснение на графиките с атрибута alt, така че това е още един начин за рекламиране и популяризиране на страницата ви.
Ако комбинираме горните атрибути, ще получим следния код:
<img src="Example.gif" width="ширината на изображението в пиксели, примерно 90" height="височината на изображението в пиксели, примерно 200" alt="Описание на изображението" />
В случай, че ползвате Internet Explorer, ще можете да видите алтернативния си текст дори и изображението да се е заредило - отидете с мишката върху него и я оставете неподвижна за няколко секунди - алтернативния текст ще се появи в малък отделен прозорец.
3. Атрибута border задава рамка около изображението в пиксели.
Ако не използвате този атрибут, около вашето изображение по подразбиране няма да се появи никаква рамка. Но това се отнася само за изображения, които не са хипервръзки! Ако едно изображение е използвано като връзка, тогава около него автоматично се появява рамка с цвета, който сте задали на хипервръзките (по подразбиране е син). В такъв случай, за да премахнете тази рамка, трябва да въведете атрибута border със стойност 0: border="0".
Ако желаете да зададете рамка на изображението си например 8 пиксела трябва да напишете:
<img src="Example.gif" border="8" />
В браузера изображението ще изглежда така:
!ВНИМАНИЕ: Атрибута border на тага img е изваден от стадратите на езика и не се поддържа от XHTML 1.0 Strict DTD, макар че браузерите ще продължат да го поддържат. На негово място е препоръчително да се използват стилове (styles). За подробности погледнете CSS справочника.
4.ПОДРАВНЯВАНЕ НА ИЗОБРАЖЕНИЕ СПРЯМО ТЕКСТ
1. Ако вкарате кода за показване на изображение и започнете да пишете текст веднага след него, без да изписвате тага за преминаване на друг ред или какъвто и да е друг таг, тогава на екрана текста ще започне да "тече" от най-долната част на изображението.
Сега ще научите как да правите така, че текста да "обтича" изображението.
Този ефект се постига чрез атрибута align, който трябва да се вкара в тага img и да му се зададе някаква стойност.
- Например ако зададем на атрибута align стойност left, кода заедно с текста ще изглежда така:
<img src="Example.gif" width="200" height="90" alt="Описание на изображението" align="left" />
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
В браузера се вижда, че изображението ще е разположено в лявата част на страницата, а текста ще го обтича отдясно:
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
Същия ефект се постига и когато се зададе на align стойност right, само че в този случай изображението е изместено в десния край на екрана, а текста го "обтича" отляво.
- Когато align="top" първия ред от текста се показва подравнен с горната част на изображението, а останалата част от текста - под изображението.
- Когато align="middle" първия ред от текста се показва в средата на изображението, а останалата част от текста - под изображението.
- Когато align="bottom" ефекта е като този по подразбиране - текста започва да тече в долната чат на изображението.
!ВНИМАНИЕ: Атрибута align на тага img е изваден от стадратите на езика и не се поддържа от XHTML, макар че браузерите ще продължат да го поддържат.
2. Ако сте задали на атрибута align стойност left или right, така че текста да "обтича" изображението, може да поискате да оставите по-голямо от подразбиращото се разстояние между изображението и текста. Това се прави с атрибутите за задаване на свободно пространство около изображението. Атрибута hspace задава свободно пространство отляво и отдясно на изображението, а атрибута vspace - отгоре и отдолу. Стойностите на двата атрибута са в пиксели.
Например ако сте задали align="left и искате да добавите 10 пиксела свободно пространство отгоре и отдолу и 80 пиксела отляво и отдясно, трябва да напишете:
<img src="Example.gif" width="200" height="90" alt="Описание на изображението" align="left" vspace="10" hspace="80" />
Ефекта в браузера ще е следния:
текст текст текст теекст текст текст тексттексттексттексттексттексттекстт
тексттексттексттексттексттексттекстт
тексттексттексттексттексттексттекстт
тексттексттексттексттексттексттекстт
тексттексттексттексттексттексттекстт тексттексттексттексттексттексттексттексттексттексттексттексттексттексттекст
!ВНИМАНИЕ: Атрибутите hspace и vspace на тага img са извадени от стадратите на езика и не се поддържат от XHTML, макар че браузерите ще продължат да ги поддържат.
!ВНИМАНИЕ: Атрибутите hspace и vspace на тага img са извадени от стадратите на езика и не се поддържат от XHTML, макар че браузерите ще продължат да ги поддържат.
3. Понякога, докато текста "тече" покрай изображението, може да пожелаете той да се прекъсне и да продължи след края на изображението. Това се постига с атрибута clear, който се вмъква в тага <br>:
Атрибута clear може да приема следните стойности:
- left - указва текста да продължи едва когато е свободно лявото пространство на страницата (когато отляво няма никакво изображение)
- right - указва текста да продължи едва когато е свободно дясното пространство на страницата (когато отдясно няма никакво изображение)
- all - указва текста да продължи едва когато е свободно пространството и отляво и отдясно на страницата (когато и отляво и отдясно няма изображение)
<br clear=”left”>
<br clear=”right”>
<br clear=”all”>
ПРИМЕР:
текст текст текст текст текст текст
ПРИМЕР:
текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст
<br clean="all">
тексттекст текст текст текст текст текст текст текст текст текст
тексттекст текст текст текст текст текст текст текст текст текст
5.ИЗПОЛЗВАНЕ НА ИЗОБРАЖЕНИЕ КАТО ХИПЕРВРЪЗКА
В урока за хипервръзките беше показан кода, чрез който изображенията могат да се използват като хипервръзки. Тук той е представен по-подробно.
Нека да направим нашето изображение връзка към Yahoo. Кода е следния:
<a href="http://www.yahoo.com"><img src="Example.gif" width="200" height="90" alt="Описание на изображението"></a>
Когато правим от изображението хипервръзка около него винаги автоматично се появява рамка:
За да премахнем синята рамка, която се появява около изображението когато то е хиперлинк, трябва в тага img да вкараме атрибута border и да му зададем стойност 0. Ако желаем връзката да се отваря в нов прозорец трябва да добавим към тага a атрибута target и да му зададем стойност _blank:
<a href="http://www.yahoo.com" target="_blank"><img src="Example.gif" width="200" height="90" alt="Описание на изображението" border="0"></a>
В урока за хипервръзките беше показан кода, чрез който изображенията могат да се използват като хипервръзки. Тук той е представен по-подробно.
Нека да направим нашето изображение връзка към Yahoo. Кода е следния:
<a href="http://www.yahoo.com"><img src="Example.gif" width="200" height="90" alt="Описание на изображението"></a>
Когато правим от изображението хипервръзка около него винаги автоматично се появява рамка:
За да премахнем синята рамка, която се появява около изображението когато то е хиперлинк, трябва в тага img да вкараме атрибута border и да му зададем стойност 0. Ако желаем връзката да се отваря в нов прозорец трябва да добавим към тага a атрибута target и да му зададем стойност _blank:
<a href="http://www.yahoo.com" target="_blank"><img src="Example.gif" width="200" height="90" alt="Описание на изображението" border="0"></a>
