УРОК 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 ? =>

Нагоре