Teď, když máte úplné základy tvorby za sebou, můžeme se vrhnout na další tagy, které jsou důležité pro tvorbu webových stránek. Jeden ze začátačníky nejčastěji používaných je určitě <table> a k němu patřící <tr> a <td>. Pomocí těchto tagů jednoduše vytvořit tabulku a tím i celou strukturu stránky. I když se toto řešení, tvz. tabulkový layout, dnes již nedoporučuje, kvůli pomalému vykreslování takto vytvořené stránky, pro menši weby a hlavně začátečníkům bez znalostí CSS, vyhovuje.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tabulkový layout</title>
</head>
<body>
<table border="1" width="100%">
<tr height="100">
<td colspan="2">Hlavička</td>
</tr>
<tr height="500">
<td valign="top">Menu</td><td valign="top" width="80%">Obsah</td>
</tr>
</table>
</body>
</html>A nyní vysvětlení jednostlivých tagů. <table> označuje začátek tabulky. Atribut tohoto tagu border určuje šířku okrajů tabulky. Pokud nechcete okraj žádný, napíšete místo jedničky nulu, tedy border="0". Já jsem okraje použi, aby jste tabulku přesně viděli. Až budete takovouto stránku publikovat, doporučuji rámeček vypnout, nevypadá dobře. Atribut width se v kódu vyskytuje vícekrát a pokaždé má stejný účel, určit šířku. Hodnoty můžete zadávat v procentech (width="100%") neco v pixelech (width="800"). Dalším tagem je <tr>, ten určuje řádek tabulky a <td>, určující buňku tabulky. Jejich atributy height - výška prvku, možné hodnoty stéjné jako u width. Pomocí atributu colspan můžete slučovat buňky. Hodnota tohoto atributu udává, kolik sousedních buněk se sloučí. Můžete slučovat i buňky přes řádky. Hodnota opět udává kolik sousedních buněk se sloučí. Poslední atribut, který jsem použil je valign - tento atribut zarovnává obsah prvku. Já jsem použil hodnotu top, čímž jsem obsah prvku zarovnal k hornímu okraji. Další možné hodnoty jsou middle (uporostřed), bottom (dole) a baseline (zarovnání textu k jiným textům v řádku).
Tak tohle by byl tabulkový layout sránky. Dnes se již doporučuje používat takzvaný divový layout, ale bez znalosti CSS ho nevytvoříte, proto o něm budu psát v jiné sekci. Do takto připravené stránky již můžete vkládat obsah - nadpisy <h1>, <h2> ... <h6>, obrázky <img>, odkazy <a>, odrážky <ul>,<ol> a podobně. Tyto tagy si rozebereme příště, nyní k formátování textu na stránce, tedy k tagům <font>, <b>, <u> a <i>.
Formátování textu je poměrně jednoduchá záležitost. Pokud chcete tučný text, uzavřete jej to tagu <b>, podtržený s tagem <u> a kurzíva tagem <i>. Obarvení textu provdete uzavřením do tagu <font> s atributem color. Hodnotou tohoto atributu je barva zapsána hexadecimálně, desítkově nebo slovně. Nejjednoduchší je slovní zápis, ale všechny barvy nemají název. Některé názvy barev: bílá – white, černá – black, modrá – blue, a podobně. Desítkový zápis barev má tuto syntaxi: rgb(rrr,ggg,bbb), kde rrr je třímístné číslo udávající odstín červené barvy, ggg zelené barvy a bbb modré barvy. Hexadecimální zápis je asi nejčastěji používaný. Jeho syntaxe je #RRGGBB, kde RR je hexadecimalní číslo udávající odstín červené, GG zelené a BB modré. Pro vygenerování barev existuje spousta programů. PSPad, který jsem Vám v předchozím díle doporučoval, taky generátor barev má.
To je pro tentokrát vše, přeji hodně štěstí a trpělivosti začátečníkům.
Hodnocení tutoriálu: 1.9 (hodnotilo 21 uživatelů)