Самообучение HTML училище

Кратко ръководство по HTML за начинаещи


Автор: Joe Barta » Превод: Ан.Начев » Последна редакция: LeoS

Деcети урок » (4136 посещения)

Сега ще си поиграем малко ... само няколко неща, за да видим какво ще се случи.

Ето един неномериран списък:
Съставки за ябълков пай

  • Ябълки
  • Брашно
  • Захар
  • Канела

Това разбира се изглежда много добре, но какво ще стане ако искаме да попреместим този текст...

Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

Защо го местим ли? Защото ще искаме да бъде поставен до снимка на...     ябълков пай.

Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

За да направим всичко това ще ни е нужна таблица!
Когато построяваме таблица е препоръчително да "включим" контурите (border=1), за да следим вместването на обектите в нея. След като е готова - ще ги махнем.

Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

Нека сега обясня нещата едно по едно. Наистина е много просто!
Започваме със старият пример за Ed. Той чу за пая и доприпка ...

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>
Ed

Заместваме Ed с неномерирания списък.

<TABLE BORDER=3>
<TR>
<TD>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>
Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

При липса на други инструкции, таблицата ще бъде толкова голяма, колкото да събере картинките и текста поставени в нея. В този случай атрибути не са ни нужни. Ще разширим и таблицата по цялата ширина на активното поле на страницата.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>
Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

Сега вече имаме нужда от втора клетка. Искаме лявата клетка да бъде малко по-малка от дясната.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>
Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

Сега му е времето да поставим картинката в първата клетка.

<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>
Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

Това, което ни остана е, само да изравним картинката към дясната страна на клетката и да "изключим" контура на таблицата.

<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Съставки за ябълков пай
<UL>
<LI>Ябълки
<LI>Брашно
<LI>Захар
<LI>Канела
</UL>
</TD>
</TR>
</TABLE>
Съставки за ябълков пай
  • Ябълки
  • Брашно
  • Захар
  • Канела

Готови сте! Хапнете пай, отдъхнете, но не забравяйте онова линкче в дясно...