Tabulky a obrázky
Takže, začneme tabulkamy. Jejich tvorba je složitější, hlavně proto, že jejich struktura kódu je poměrně složitá. Ale když víte, jak psát správně kód, je to mnohem lepší.
Za začátku tedy ukázka kódu, jeho výsledek a samozřejmě také popsání. Tak tady je tedy kód jednoduché tabulky:
<table>
<tr>
<td>První řádek, první položka</td><td>První řádek, druhá položka</td>
</tr>
<tr>
<td>Druhý řádek, první položka</td><td>Druhý řádek, druhá položka</td>
</tr>
</table>
A v prohlížeči se zobrazí následovně:
| První řádek, první položka | První řádek, druhá položka |
| Druhý řádek, první položka | Druhý řádek, druhá položka |
A co z toho plyne? Celá tabulka je obalena mezi <table> a </table>. Dále má tabulka řádky, ty jsou obaleny tagy <tr> a </tr> a buňky mezi <td> a </td>, přičemž na každém řádku musí být opět tagy pro buňky.
Dále jsou tu rozšířené řádky/sloupce do dalších řádků/sloupců. Pro splynutí sloupce musíte k buňce (<td>) přidat atribut rowspan a jeho hodnotu podle toho, kolik chcete sloupců spojit. Dále místo, kam se má buňka rozšířit nechte prázdné, viz kód.
Příklad:
| Levý sloupec | Pravý horní |
| Pravý spodní |
A kód:
<table>
<tr>
<td rowspan="2">Levý sloupec</td><td>Pravý horní</td>
</tr>
<tr>
<!--Prázdné místo (normálně by tu byla buňka)--> <td>Pravý spodní</td>
</tr>
</table>
V kódu jsem použil komentář. Ten slouží k zapsání poznámky autora kódu, aby se v něm lépe orientoval. Na funkci kódu to nebude mít vliv. Zapisuje se mezi <!-- a -->.
U spojení buňek je to velmi podobné. Na řádek, který chcete rozšířit dáte jenom jednu buňku a k ní atribut colspan s hodnotou, rovnající se počtu prolnutých buňek.
Příklad:
| Vrchní, uprostřed, jediná | ||
| Levá dole | Porstřední dole | Pravá dole |
A jeho zápis:
<table>
<tr>
<td colspan="3">Vrchní, uprostřed, jediná</td>
</tr>
<tr>
<td>Levá dole</td><td>Porstřední dole</td><td>Pravá dole</td>
</tr>
</table>
A rozšířená buňka nemusí vždy zabýrat celou tabulku. Jako např.:
| Vrchní vlevo do dvou buňek | Vrchní prchní, teda pravá | |
| Levá dole | Porstřední dole | Pravá dole |
Upozornění rejpalům:V příkladech jsem použil u tabulek pro lepší znázornění rámeček. Ten samozřejmě ve validním XHTML, kde je oddělen obsah stránek od jejich vzhledu, nesmí být.
A držte si klobouky, pokračujem. Následují obrázky. Je jich plný internet a proto je musíte taky samozřejmě umět dát do své stránky.
Tagem je <img>. Je nepárový a tudíž musí končit mezerou, lomítkem a hranatou závorkou ( />).
Nejdůležitějším atributem je src, cesta k obrázku. Ta může být buď relativní nebo absolutní. Nyní k té relativní. Nachází-li se obrázek ve stejné složce/adresáři, jako stránka je zápis cesty jednoduchý: src="obrazek.gif". Koncovka samozřejmě může být jakákoliv, dokud to bude obrázek. Ovšem představte si situaci, kdy máte složku, v ní soubor s Vaší stránkou a v tom samém adresáři vložený další adresář pojmenovaný např. obrazky a v něm obrázek, který chcete zobrazit. Cesta tedy bude vypadat takto: src="obrazky/obrazek.gif". Cesta je tedy: "slozka_ve_ktere_je_obrazek/obrazek.format". Když je ale obrázek ve složce, která je ještě v další složce, tak se od toho odvíjí cesta, takže např. "slozka/dalsi_slozka/obrazek.gif".
A další situace. Máte složku, v ní obrázek a další složku, ve které se nachází stránka. Tak bude cesta např. "../obrazek.gif", "../" tedy znamenají pohyb o jednu složku výše ve stromu adresáře. Tak snad jste to pochopili a jdeme dál.
Když budete mít stránku již na internetu, můžete si pomoci i absolutní cestou, kdy uvedete celou adresu obrázku, tedy např. "http://www.eroxia.net/images/head.jpg" je cesta k banneru na eroxii.
Pozor: budete-li mít stránku již na internetu, musíte také odkazovat na obrázek, který je umístěn také na internetu, takže na cesty typu: "C:Documents and SettingsDomoDokumentyObrázkyjá.jpg" zapomeňte. A ještě jedna věc. Názvy obrázku a obecně všech souborů i složek nesmí obsahovat českou diakritiku, tedy háčky, čárky a také mezeru, velké písmena a různé znaky. Z souborů typu "Já na dovolené (v Chorvatsku).jpg" přejmenujte na "ja_v_chorvatsku.jpg". Doporučuji používat podtržítko (Shift + pomlčka).
A zpátky k tagu img. Jeho dalšími atributy jsou width a height, tedy šířka a výška, uváděné v px (obrázkových bodech). Jejich hodnoty by měli být rovny velikosti obrázku, chcete-li jej zobrazit s jinými rozměry, jde to, ale zmenší to jeho kvalitu. Tyto atributy jsou dobré hlavně proto, že když je v textu obrázek, tak se normálně nejprve zobrazí text a poté se teprve načítá obrázek, který když je větší, tak odsune text, který právě možná čtete, dolů. Jsou-li tedy uvedeny width a height nejprve se vymezí místo pro obrázek a teprve potom se do tohoto místa načítá.
Dále je tu alernativní popis obrázku, který se zobrazí, když se nezobrazí obrázek. Atribut je alt a zápis: alt="Popis". Ještě také popisek, většinou stejný, jako alt a zobrazující se v bublině, při najetí myši. Atribut je title. A zápis stejný, jako u alternativního textu. A jeden z nich čte nevidoucím čtečka, teď ale nevím který. Asi alt.
Tolik k obrázkům. A nakonec tedy správný zápis obrázku:
<img src="ja_na_dovolene.jpg" width="460px" height="400px"
alt="Foto autora stránky, který právě plave v Jadranském moři. O nic jste nepřišli." title="Já, jak plavu" />
Uf to jsem si dal. Psal jsem to cca tři hodiny. Samotný text má 844 slov a 5 194 zanků. Dopsal jsem jej 2.6.2006 - 18:12:49 a má 6 983 B.
That´s all folks.
Jinak skvela prace ja uz to sice umel ale pro zacatecnika vynikajici 
které jsou nastylované přes CSS
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
<img style="margin:0;padding:0;">
a v .html v <body> mám třeba
<a href=hlavni.html><img src="normal/menu_01.png" border="0"></a>
<br>
<a href=obrazky.html><img src="normal/menu_02.png" border="0"></a>
<br>
<a href=lol.html><img src="normal/menu_03.png" border="0"></a>
<br>
<a href=music.html><img src="normal/menu_04.png" border="0"></a>
atd.
</body>
