HTMLЧаст 16 (Изображения)

CSS и HTML » HTML

fix3d   трудност:    видян: 18771

Изображения

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



ФОРМАТИ НА ФАЙЛОВЕ ЗА ИЗОБРАЖЕНИЯ

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

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

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

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

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


2. jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии.

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

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



СВАЛЯНЕ НА ИЗОБРАЖЕНИЯ ОТ WEB, МОДИФИЦИРАНЕ И СЪЗДАВАНЕ НА ИЗОБРАЖЕНИЯ

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

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

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

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

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


ПОКАЗВАНЕ НА ИЗОБРАЖЕНИЯ В WEB СТРАНИЦАТА

Най-простия код с който може да покажете изображение на страницата си е следния:

<img title="óðîöè îò uroci.com" src="Име на изображение, например Example.gif" />

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

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

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

<img title="óðîöè îò uroci.com" src="Example.gif" />

Ето едно просто изображение с размери ширина 200 пиксела и височина 90 пиксела, направено на Photoshop, което ще използваме в примерите:

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

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

<div align="center">
<img title="óðîöè îò uroci.com" src="Example.gif" />
</div>

(!ВНИМАНИЕ: Имайте предвид, че атрибута align на тага div не се поддържа от XHTML 1.0 Strict DTD)