HTML - Тага <img> и неговите атрибути

[Sonik_Blast]

В тази тема се предполага,че вече сте прочели първи стъпки в html ако не сте натиснете тук

 

Форматиране на изображения:

 

Освен задължителният атрибут src тагът <img>,притежава и друг важен атрибут alt,които се използва за присвояване на текст към изображение,примерно кратък текст,които описва изображението.

 

примерно:

<img src='kartinka.gif' alt='tazi kartinka e po krasiva ot ostanalite' >

 

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

 

Настройване на размера на изображението:

 

Изображенията имат много добра опция да бъдат оразмерявани,примерно може да направите картинка,която е голяма 140х100 пиксела да се появи в омален или оголемен вариант применро 40х40 пиксела.Това може да бъде постигнато като добавим следните два атрибута width и height,съответно широчина и височина.Прост пример за използването на тези два атрибута може да бъде следния пример:

 

<img src='kartinka.gif' alt='tazi kartinka e po krasiva ot ostanalite' width='40px' height='40px'>

 

По този начин ако приемем,че оригинално картината е 140х100 пиксела сега тя ще се появи в браузъра с размер 40х40 пиксела.

 

Място на изображенията да дишат:

 

Когато поставяте картинки имате възможност да ползвате още два атрибута,с чиято помощ да добавяте пространство м/у картинките за да могат да дишат.Примерно ако имате няколко картинки една до друга ще е по-добре да има малко място м/у тях.Може да постигнете това пространство с атрибутите hspace (пространство по хоризонталата) и vspace (пространство по вертикалата).Сега ще дам пример за изображение,което ще има пространство от 4 пиксела от горе и от доло,от ляво и от дясно:

 

<img src='kartinka.gif' alt='tazi kartinka e po krasiva ot ostanalite width='40px' height='40px' hspace='4' vspace='4'>

 

Изграждане на стени около изображенията:

 

Ако сте пробвали да добавите пространство около изображението,но се съмнявате,че е достатъчно,може да направите и нещо други - да създадете рамка на изображението (за рамките сме говорили в миналия урок).Ето прост пример за добавяне на рамка на картинка:

 

<img src='kartinka.gif' border='4'>

 

Подравняване на изображения:

 

Тагът <img> предоставя атрибута align,които управлява позиционирането на изображение и обтичането на текста около него.Ето и стойностите на атрибута align:

 

left-
right-
top-
texttop-
middle-
absmiddle-
conter-
bottom-
baseline-
absbottom-

 

въпреки,че според мен е по-добре да се ползва таблица и така да се подравнява текста и този начин е подходящ.

 

ЗАКЛЮЧЕНИЕ:

В този урок вие научихте едни от най-важните атрибути на тага <img> както и как да ги ползвате останалото е въпрос на въображение за вграждането им в вашите страници.

 

Автор: Sonik_Blast

Източник: Webleit.com