HTML Изображения
Публикувана от smilev на January 17 2011 14:52:24
Разширена новина
Изображения
Изображенията - картинки, фотографии и др., анимирани или статични, са важна част от почти всеки сайт в мрежата. Добре подбрани и разположени, те могат да "освежат" 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, което ще използваме в примерите:
[img]http://lesson2me.com/images/news/AGI.gif[/img]
По подразбиране изображението се появява в лявата част на страницата. Ако желаем да разположим изоброжението вдясно или в средата на страницата можем да използваме тага <div> и атрибута му align със съответните стойности - left (което е и по подразбиране - отляво), right (помества изображението вдясно) и center (центрира изображението).
Например за да центрираме изображение ще напишем:
<div align="center">
<img title="óðîöè îò uroci.com" src="Example.gif" />
</div>
(!ВНИМАНИЕ: Имайте предвид, че атрибута align на тага div не се поддържа от XHTML 1.0 Strict DTD)