УРОК 1 : ВЪВЕДЕНИЕ

УРОК 2 :
Уеб редактори

УРОК 3 :
Форматиране на текст - 1 част

УРОК 4 :
Форматиране на текст - 2 част

УРОК 5 : Шрифтове

УРОК 6 : Цветове

УРОК 7 :
Изображения - 1 част

УРОК 8 :
Изображения - 2 част

УРОК 9 : Какво е URL?

УРОК 10 :
Препратки - 1 част

УРОК 11 :
Препратки - 2 част

УРОК 12 : Списъци

УРОК 13 :
Таблици - 1 част

УРОК 14 :
Таблици - 2 част

УРОК 15 :
Frames (рамки)

УРОК 16 :
Формуляри - 1 част

УРОК 17 :
Формуляри - 2 част

УРОК 18 :
Вмъкване на музика и видео

УРОК 19 :
По-специфични маркери

УРОК 20 : ОБОБЩЕНИЕ

УРОК 8 : Изображения - 2 част

В тази част ще ви обясня как да подравните изображение спрямо текст.
Първо за целта ни е нужен атрибута align. Стойността му може да бъде :

  • top - подравнява първия ред от текста спрямо горния край на изображението, а останалата част от текста стои под него.Например :

  • <img src="primer.jpg" align="top" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).

    Ще се изглежда така:

    primerМедузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) .

  • middle - подравнява първия ред от текста спрямо средата на изображението, а останалата част от текста стои под него. Например :

  • <img src="primer.jpg" align="middle" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).

    Ще се визуализира:

    primerМедузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) .

  • bottom - подравнява първия ред от текста спрямо долния край на изображението. Например :

  • <img src="primer.jpg" align="bottom" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).

    Ще се визуализира:

    primerМедузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) .

  • left - изображението стои от ляво като текста го "обтича" изцяло. Например:

  • <img src="primer.jpg" align="left" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).

    Ще изглежда така:

    primerМедузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) .

  • right - ефекта е подобен като приleft , само че изображението стои от дясно. Например:

  • <img src="primer.jpg" align="right" height="120" width="160" /> Медузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води(източник wikipedia.org).
    <br clear="all" /> Някакъв друг текст.................

    Ще се изглежда така :

    primerМедузите са безгръбначни животни от тип мешести, обитаващи солените, или много по-рядко, сладките води (източник wikipedia.org) .
    Някакъв друг текст.................

NB! В последния случай е вмъкнат още един също много важен маркер - <br /> с атрибута clear="all" . С негова помощ спирате "обтичането" на текста около изображението!

Може да добавим повече свободно пространство около изображението ако използваме атрибутите hspace="стойност" и vspace="стойност" като стойността е някакво число в пиксели. За да ви стане по-ясно разгледайте схемата :

h/vspace

Преминете към УРОК 9 : Какво е URL ? =>

Нагоре