HTML Урок Изображения

В HTML се използват два основни формата на файлове, съдържащи изображения:

* gif формат, който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки.

Файловете с разширение gif имат две важни предимства пред другия основен формат:

- могат да съдържат "прозрачен" елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще "пасва" на страници с различно оцветен фон.

- gif файловете могат да бъде анимирани - да съдържат движеща се картинка.

* jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии. Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.

Съществува и още един файлов формат, който в момента се използава много рядко, защото са малко браузърите, които го поддържат. Това е png формата, който съдържа в себе си най-доброто от gif и jpg форматите. Въпреки качествата на png файловете използването им не е препоръчително.

Търсене и сваляне на изображения от Web, модифициране на изображения, създаване на изображения

В интернет могат да се намерят милиони изображения. Някои от тях са безплатни, други не.
Много търсачки имат специална настройка за търсене на изображения. Безплатни изображения може да намерите и като търсите по ключови думи, например free images, free animated gifs, free pictures, free graphics и т.н.

Можете да прехвърлите от интернет на личния си компютър почти всяко изображение по следния начин: отидете с мишката върху изображението, щракнете с десния бутон и от появилото се меню изберете "Save Picture As". Ще се появи прозорец в който трябва да напишете избрано от вас име на изображението и да натиснете бутона "Save".
Преди да вземете някое изображение и да го използвате в страницата си е нужно да се уверите, че то не е обект на авторското право и че е безплатно. Имайте предвид, че в някои сайтове се предлагат безплатно изображения само ако те се използват за некомерсиални цели.

Съществуват и огромно количество програми за създаване на изображения и за обработка на съществуващи изображения. Една от най-популярните е PhotoShop, но тя не е безплатна. Може да потърсите безплатни програми за обработка на изображения с коя да е от популярните търсачки.
За безплатна online обработка на gif файлове отидете на адрес www.gifworks.com

В мрежата има и голямо количество графики специално предназначени за HTML-страници: бутони, стрелки, линии, анимирани надписи, интерфейси, фонови графики и т.н. Повечето от тях се предлагат безплатно. Потърсете такива графики чрез ключови думи като free graphics, free clip art, free buttons, free backgrounds, free interfaces и т.н.

В интернет ще намерите и безплатни програми, чрез които можете online да създадете собствени бутони и лого (надпис) за страницата си. За да изпробвате една от най-популярните подобни програми отидете на адрес www.cooltext.com
Най-простия код с който може да покажете изображение на страницата си е следния:



Тъй като тага за изображение няма затварящ таг, в края му се поставя затваряща наклонена черта, според изискванията на XHTML.

По-долу виждате изображение, което е направено с една от многобройните графични програми, за да ни послужи като пример:


Отидете върху изображението и кликнете върху него с десния бутон на мишката. Ще се появи контролен панел, от който изберете "Properties". Когато направите това ще се появи панел, на който ще видите характеристиките на изображението - точния му адрес (URL) в интернет, неговите размери - ширина 163 пиксела и височина 73 пиксела, и неговата "тежест" - 1891 байта.

Името на изображението е Example.gif Ако то се намира в същата папка, в която се намира и HTML-страницата, тогава за да го покажем трябва да напишем:

<img src="Example.gif" />

По подразбиране изображението се появява в лявата част на страницата. Ако желаем да разположим изоброжението вдясно или в средата на страницата трябва да използваме тага <div> и атрибута му align със съответните стойности - left (което е и по подразбиране), right и center.

Например за да центрираме изображение ще напишем:

<div align="center">
<img src="Example.gif" />
</div>

Ще получим следния резултат

Атрибути на тага за изображение

Атрибутите на тага за изображение не са абсолютно задължителни - и да не ги използвате изображението ви ще се вижда на екрана. Но за някои от атрибутите е препоръчително да бъдат въвеждани, тъй като това ще подобри качеството на вашия HTML-документ.

* Атрибутите width и height задават съответно ширина и височина на изображението в пиксели. В нашия пример width="163" height="73".

Въвеждането на тези атрибути указва на браузъра точно колко място да отдели за изображението, вследствие на което страницата се зарежда по-бързо, а бързината на зареждане на един HTML-документ е от голямо значение за посетителите на страницата. Препоръчително е винаги да задавате ширина и височина на изображенията си.

* Атрибута alt задава алтернативно название на изображението.

Понякога, въпреки, че страницата е заредена, изображенията не се появяват. Освен това някои потребители настройват браузърите си да не изтеглят изображенията, за да зареждат по-бързо страниците. В тези случаи на мястото, където трябва да е вашето изображение, ще се появи празно рамкирано пространство. За да разберат посетителите на страницата какво съдържа изображението се използва атрибута alt="Произволно описание на изображението". Това, което напишете между кавичките, ще се появи на мястото на изображението ви, ако то не се зареди. Така посетителите ще научат какво представлява изображението, макар че няма да го видят. Препоръчително е винаги да използвате този атрибут и по още една причина - търсачките индексират текста, въведен като обяснение на графиките с атрибута alt, така че това е още един начин за рекламиране и популяризиране на страницата ви.

Ако комбинираме горните атрибути, ще получим следния код:

<img src="Example.gif" width="163" height="73" alt="Image Example" />

В случай, че ползвате Internet Explorer, ще можете да видите алтернативния си текст дори и изображението да се е заредило - отидете с мишката върху него и я оставете неподвижна за няколко секунди - алтернативния текст ще се появи в малък отделен прозорец.

* Атрибута border задава рамка около изображението в пиксели.

Ако не използвате този атрибут, около вашето изображение по подразбиране няма да се появи никаква рамка. Но това се отнася само за изображения, които не са хипервръзки! Ако едно изображение е използвано като връзка, тогава около него автоматично се появява рамка с цвета, който сте задали на хипервръзките (по подразбиране е син). В такъв случай, за да премахнете тази рамка, трябва да въведете атрибута border със стойност 0: border="0".

Ако желаете да зададете рамка на изображението си например 8 пиксела трябва да напишете:

<img src="Example.gif" border="8" />

Ефекта в прозореца на браузъра ще е следния: