Изображения - 2 част
В тази част ще ви обясня как да подравните изображение спрямо текст.
Първо за целта ни е нужен атрибута align. Стойността му може да бъде :
Първо за целта ни е нужен атрибута align. Стойността му може да бъде :
- top - подравнява първия ред от текста спрямо горния край на изображението, а останалата част от текста стои под него.Например :
- <img src="primer.jpg" align="top" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).
Ще се изглежда така:
Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) . - middle - подравнява първия ред от текста спрямо средата на изображението, а останалата част от текста стои под него. Например :
- <img src="primer.jpg" align="middle" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).
Ще се визуализира:Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) . - bottom - подравнява първия ред от текста спрямо долния край на изображението. Например :
- <img src="primer.jpg" align="bottom" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).
Ще се визуализира:Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) . - left - изображението стои от ляво като текста го "обтича" изцяло. Например:
- <img src="primer.jpg" align="left" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).
Ще изглежда така:Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) . - right - ефекта е подобен като приleft , само че изображението стои от дясно. Например:
- <img src="primer.jpg" align="right" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).
<br clear="all" /> Някакъв друг текст.................
Ще се изглежда така :Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) .
Някакъв друг текст.................
NB! В последния случай е вмъкнат още един също много важен маркер - <br /> с атрибута clear="all" . С негова помощ спирате "обтичането" на текста около изображението!
Може да добавим повече свободно пространство около изображението ако използваме атрибутите hspace="стойност" и vspace="стойност" като стойността е някакво число в пиксели. За да ви стане по-ясно разгледайте схемата :
Табличка с почти всички цветови комбинации може да намерите тук:
Източник: http://diysite.gymnasium-lom.com/uroci/urok8.html
ЗАДАЧА УПРАЖНЕНИЕ ЗА ИЗОБРАЖЕНИЯ
Направете web страница, съдържаща:
3 картинки от различни държави.
1. Всяка картинка да има:
заглавие;
текст към нея(по три реда);
еднакви широчина и височина;
рамка;
подравняване - център.
2. Заглавие на сайта: по ваш избор.
заглавие;
текст към нея(по три реда);
еднакви широчина и височина;
рамка;
подравняване - център.
2. Заглавие на сайта: по ваш избор.
3. Текста - шрифт Arial:
заглавията - цвят зелен, стил получер и подчертан, подравняване - център;
текст - описание да е цвят син, стил курсив.
4. Фон на страницата - сив.
