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

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


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

Шести урок » (4862 посещения)

Надявам се, че сте усвоили всичко до тук и жадни за нови знания, сте се устремили към попълнения на html запаса ви. Може би си мислите, че нямате нужда от таблици в страниците си ? Уверявям ви, че това не е съвсем така. Таблиците умножават многократно възможностите да разполагате конкретни обекти (картинки, текст) на точно определени места така, че да сте независими от моментното "настроение" на различните браузери.
Ще ви успокоя още в началото, че ще е нужно да научите само 3 (три!) основни тага. Всичко останало е комбинация между тях.

<TABLE>
Основният таг, с който започва всяка таблица. Указва "това е таблица". Към него могат да се добавят някои допълнителни атрибути (големина, дебелина, широчина, цвят и т.н.).
<TR>
TableRow дефинира наличие на хоризонтален ред, в който се поставят отделни клетки (cells).
<TD>
Дефинира отделна клетка в хоризонталният ред.
Да обобщим: Всяка таблица е изградена от редове, които са запълнени с отделни клетки.
         
--- това --- --- е --- --- един --- табличен --- ред ---
      клетка  
  клетка     клетка

Е, добре. Това е накратко схемата която ще е добре да усвоите за да сте способни да направите каквато и да е таблица. Сега му е времето да спомена, че ако искате да правите качествени html документи ще трябва да се самообучавате на html. Ако се надявате на така наречените "table wizards" с които направата на страници е лесна - ще имате ограничена гъвкавост. Резултатът може да не е точно това, което сте очаквали.
Вече сте свикнали от първия самоучител да следите материала с натрупване и да пишете примерите в Notepad. За да започнем стартирайте Notepad и с "copy and paste" вмъквайте примерите за да си ги тествате и заучавате.

Следват така добре известните ви задължителни тагове.

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
</BODY> </HTML>

Запаметете това като table1.html в някоя нова директория. Стартирайте си браузера и отворете table1.html като успоредно с това нека Notepad да показва html кода. По този начин всяка промяна в дадения файл е нужно да бъде запаметена (save) чрез Notepad и след това чрез reload от браузера ще можете да видите направените промени. Това е най-простият и основен начин за направа на html документи изобщо.

Зaпочваме с написването на таговете за таблица. Те означават "начало на таблица" и "край на таблица".

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>

Всяка таблица задължително се нуждае от поне един ред.

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>

И естествено всеки ред задължително се нуждае от поне една клетка.

<HTML>
<HEAD>
<TITLE>Joe's a swell guy</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

За да може всичко да е прегледно, в бъдещите примери няма да пишем head, body и title таговете. Но вие си знаете, че те са задължителни и на всяка цена ще трябва да присъстват във вашия документ.

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

Едва сега ще може да поставите нещо в тази клетка. Напишете просто Ed. Текста или картинките винаги се поставят между <TD> таговете.

<TABLE>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

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

Ed    
     

Само се шегувам, разбира се! Това, което направихте е :

Ed

Поемете дълбоко въздух, облегнете се удобно на стола и се радвайте, че направихте първата си таблица!