1 част
Изображенията могат да се групират в 2 категории:
- малоцветни - изображения съдържащи малко на брой цветове ( напр. 256 цвята). Използват се за лого, фон, заглавия със специален шрифт и др. Най-често са в фoрмат .gif и .png, което им позволява да поддържат прозрачност и анимации.
- пълноцветни - изображения съдържащи голям брой цветове (напр. снимки, лого с оттенъци и др. ) . Най-често са в формат .jpg , .jpeg , .png и др.
Изображенията в HTML се добавят чрез единичния маркер
<img src="име на файл или URL" alt="поясняващ текст" />
Където :
- src(от source) - указва мястото, от което да се зареди изображението. Ако изображението е в същата папка, където се намира html страницата ви, като стойност на src се записва "името на изображението.разширение". Например -<img src="logo.png" alt="primer" />
Ако изображението е от друго място просто указвате целия път до него, но малко повечко за URL ще научим в следващия урок. - alt (от alternative) - показва алтернативен текст, който ще се извежда ако изображението липсва. Атрибута не е задължителен, но се препоръчва употребата му, защото има и браузери, които не показват изображения, а само текст.
Други атрибути, които може да вмъкнете в маркера <img src="" /> са:
- title="стойност" - извежда съобщение, при задържане на курсора върху изображението.
- border="стойност" - указва рамка на изображението (стойността започва от 0).
- width="стойност" - указва широчината на изображението. Стойността може да бъде както в пиксели, така и в проценти от страницата.
- height="стойност" - указва височината на изображението. Стойността може да бъде както в пиксели, така и в проценти от страницата.
За да подравним изображението трябва да използваме маркера <div>...</div> с атрибута align, чийто стойности бяха left, right, center . Например :
<div align="center">
<img src="primer.jpg" alt="primer" />
</div>
<img src="primer.jpg" alt="primer" />
</div>
Ще изглежда така :
Източник:
http://diysite.gymnasium-lom.com/uroci/urok7.html
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. Фон на страницата - сив.
