Програмиране в среда Интернет

Меню

Начало
Увод
Съдържание
Въведение в Интернет
HTML
CSS
JavaScript
Perl
Полезни връзки
Речник на термините

 

HTML - ТРЕТА ЧАСТ


Поставяне на изображения във WEB документ.
Поддържани формати и параметри на изображенията.
Мета тагове. Кодиране на страниците

   Това, което прави една страница не само полезна, но и атрактивна за посетителя е графичната информация във вид на изображения. Всеки един браузър поддържа определен набор от формати на изображенията, като той е еднакъв за повечето от тях. Създателят на страницата трябва да се съобразява с тези формати, както и да ги познава. Всеки един от форматите има положителни и отрицателни страни. Най-важните параметри на едно изображение са неговите големина и качество. В повечето случаи се прави компромис между двата параметъра, с цел приемливо качество и малък размер на файла. Форматите, които се използват във WEB са следните GIF,JPEG,PNG (всъщност браузърите поддържат повече формати, но реално те не се използват). За избиране на правилния формат за вашото изображение може да се водите по - следните правила :

 
GIF JPEG или JPG
Използвайте този формат за изображения с малко цветове.  Например:
  • Изображения подобни на анимационните
  • Лого
  • Бутони
  • Изображения, които се трябва да бъдат прозрачни в някоя своя част.

Не използвайте този формат за фотографии, освен ако не са много малки по размер!

Чрез този формат може да правите анимации(например банери).

Този формат поддържа милиони цветове, за разлика от GIF, който поддържа само 256, така че тох е подходящ за :
  • Фотографии
  • Изображения с много цветове.

Не използвайте JPEG за малки по размер изображения. Не се поддържа прозрачност.

   Третият формат (PNG - Portable Networks Graphics) е сцециално създаден за изображеия за публикуване в мрежата. Той има по-добра степен на компресия от GIF при картинки с много цветове и по-малка от JPEG. При него няма загуба на качество (както при JPEG), но пък рамера на файла е по-голям (понякога доста по-голям). Освен това той се поддържа само от новите версии на браузърите.Трябва да се използва само когато е препоръчително високо качество на изображението.
   След като разгледахме основните формати следва да покажем как може едно изображение да се постави в HTML документа. Това става с тага <IMG>. Той има следните атрибути :

src="..." Указва пътя към ресурса. Пътя може да е абсолютен и относителен.
alt="..." Дефинира обяснение на изображението. То ще се покаже на потребители с браузъри неподдържащи картинки и на тези които са изключили показването им. Използването му е препоръчително.
border="..." Установавя дебелина на границата около изображението в пиксели.
align="..." Установавя подравняването на изображението. Възможните стойности са : bottom, left, middle, right, top. Всъщност това не са единствените стойности, но те са стандартните за HTML 4.0 и гарантирано ще работят на всеки браузър.
height="..." Установява височина на изображението. Ако не е дефинирано браузърът автоматично дефинира височина на базата на изображението.
width="..." Установява ширина на изображението. Ако не е дефинирано браузърът автоматично дефинира такава на базата на ширината изображението.
name="..." Дефинира име на изображението. Този атрибут се използва ако изображението ще се използва в скриптове (например създаване на банер с JavaScript).
style="..." Дефинира един или повече каскадни стилове за изображението.
vspace="..." Дефинира големината на празното място между изображението и другите елементи на страницата по вертикала в пиксели.
hspace="..." Дефинира големината на празното място между изображението и другите елементи на страницата по хоризонтала в пиксели.

   Единственият задължителен атрибут на тага <IMG> е SRC="...". Другите за опционални и служат за по-добър контрол върху разположението на изображението. Следващият пример ще демонстрира действието на някои от атрибутите:

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
<IMG SRC="images/02200011.jpg"><BR>
Изображение с големина 300х200 пиксела.<BR>
<IMG SRC="images/02200011.jpg" HEIGHT="500" WIDTH="400"><BR>
Изображение с големина 300х200 пиксела предeфинарано на 500х400 пиксела<BR>
<IMG SRC="images/02200011.jpg" ALIGN="right" HEIGHT="50" WIDTH="45"><BR>
Изображение с големина 300х200 пиксела подравнено вдясно.
И предефинирано на 50х45 пиксела.<BR>
<A HREF="images/arch1024.jpg" TARGET="_blank"><IMG SRC="images/arch1024thumb.jpg" BORDER="10"></A><BR>
Thumbnail с големина 204х153 пиксела(6 324 байта), сочещ към <BR>
картинка с големина 1024х768 пиксела (185 677 байта).
</BODY>
</HTML>

   Това е резултата от този код.
   В горният пример е въведено понятието thumbnail. То се използва за картинка с намален размер спрямо този на оригинала с цел по-бързото й зареждане. Самата картинка е връзка към оригиналнато изображение. По този начин потребителя придобива представа за оригиналното изображение без да има нужда да го сваля от Интернет, като се спестява трафик и време. Например изображението arch1024.jpg е с размер 186kB. На потребител с връзка 56kbit ще е нужно около 26 секунди, за да го свали. Представете си галерия от 10 такива снимки, то за да се свалят ще е необходимо повече от 4 минути. Малко потребители биха изчакали зареждането на тази страница. В случай, че направите умалени копия на изображенията (т.нар. thumbnails), то всяко едно от тях ще е с много по-малка големина (за примера arch1024thumb.jpg е само 6 kB с време за сваляне 1 секунда) и времето необходимо за зареждане ще е само 10 секунди.
   Всяка една HTML страница освен информацията, която се визуализира може да има и служебна информация, указваща различни параметри, като кодировка, описание и автор на страницата например. Тази информация се поставя в заглавната част на страницата с т.нар. мета тагове. Всеки мета таг започва с <META .....>. По-често използваните атрибути са следните :

src="..." Указва пътя към изображението. Пътя може да е абсолютен и относителен.
name="..." Идентификатор на двойката "име/стойност" в META тага. Например това може да е "autor" или "keyword". В един META елемент може да се среща само NAME или HTTP-EQUIV, но не и двете едновременно.
http-equiv="..." Добавя META елемента към HTTP хедъра. Браузърите конвертират HTTP-EQUIV и CONTENT атрибутите в стойности от типа "име :стойност" и ги добавя към HTTP хедъра.
content="..." Това е еквивалентно на стойноста в двойката "име / стойност". Този атрибут може да има множество стойности, които трябва да са разделени със запетаи.

   Следващият пример демонстрира използването на този таг :

<HTML>
<HEAD>
<!-- Дефинира се име на автора на страницата -->
<META NAME="author" CONTENT="Иван Петров">
<!-- Дефинира ключови думи за страницата -->
<!-- Чрез тях някои търсещи машини индексират вашата страница -->
<META NAME="keywords" CONTENT="html,css,програмиране,javascript,perl,ръководство">
<!-- Пренасочва браузъра към ex1.html 5 секунди след като страницата е била заредена -->
<META HTTP-EQUIV="refresh" CONTENT="5;URL=ex1.html">
<!-- Дефинира кодиране на символите в страницата -->
<!-- ВАЖНО : Използвайте винаги този META таг, -->
<!-- при писане на страници с кодировка различна от ISO-8859-1 -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>Тази страница ще ви пренасочи към ex1.html след 5 секунди.
</BODY>
</HTML>

   Това е резултата от този код.
   Както виждате този таг не води до промени във форматирането на страницата, но е много важен за браузъра. Това важи с особенна сила за дефинирането на кодировка. То трябва да се използва винаги и да не пропуска. От тук нататък този META таг ще присъства във всеки един от примерите.

Термини

GIF
JPEG
PNG
Thumbnail