Tak jak jsme o tom mluvili v minulé kapitole - vezměte text, který má být obsahem první stránky, vložte jej mezi značky <body> a </body> a doplňte významové XHTML značky neboli tagy tak, aby jste každému textu přiřadili jeho význam.
Moje kočky
Bydlím na vesnici a mám osm koček. Proč jich je tolik?
Hlavní důvody:
- se mi tak nashromáždily
- a mám kočky ráda
A kdyby náhodou ubyly, zase si pořídím další.
Tohle je text, který chci převést do XHTML, jinými slovy přidat do něj značky, které u textu označí jeho význam tak, aby prohlížeč věděl, o co jde:
<h1>Moje kočky</h1> <p>Bydlím na vesnici a mám osm koček. Proč jich je <strong>tolik?</strong></p> <h2>Hlavní důvody:</h2> <ul> <li>se mi tak nashromáždily</li> <li>a mám kočky ráda</li> </ul> <p>A kdyby <em>náhodou</em> ubyly, zase si pořídím další.</p>
Pokud výše uvedený kód vložím mezi značky <body> a </body> do kostry stránky z předminulé kapitoly, vznikne stránka, na kterou se můžete podívat. Ačkoli jsme nepoužili žádné formátovací značky, text je zobrazen rozdílně podle toho, jakým tagem je označen. Tohle zobrazení může být v každém prohlížeči jiné, ale bude odpovídat hierarchii, resp. použitým značkám.
Kromě textu budete asi chtít do stránky dát i nějaký ten obrázek - teď nemyslím ten dekorační, ale ten "nosný", tj. obrázek toho, o čem píšete.
Ne každému začátečníkovi je tak úplně jasné, jak to udělat. Zvyklý z wordu nechápe, že obrázek není součástí webové stránky; je tam jenom napsáno, kde je soubor s obrázkem a jak se má na stránce zobrazit. Z toho vyplývá, že ten obrázek musí být rovněž na webovém serveru, nikoli jen u Vás doma na disku.
O obrázcích a problémy s nimi už bylo ledasco napsáno:
Vkládání obrázků
Proč se obrázky nezobrazují?
FAQ Webzdarma.cz: Nezobrazují se mi obrázky
Abychom měli o výsledku nějakou představu, vložila jsem jeden obrázek i do naší ukázkové stránky; její kód je tady, a také se můžete na tuhle stránku přímo podívat.
<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-language" content="cs" />
<meta http-equiv="content-type" content="text/html;
charset=windows-1250" />
<meta name="author" content="dis" />
<title>
Kočky
</title>
</head>
<body>
<h1>Moje kočky</h1>
<p>
Bydlím na vesnici a mám osm koček.
Proč jich je <strong>tolik?</strong>
</p>
<h2>Hlavní důvody:</h2>
<ul>
<li>se mi tak nashromáždily</li>
<li>a mám kočky ráda</li>
</ul>
<p>A kdyby <em>náhodou</em> ubyly, zase si pořídím další.</p>
<img src="../obrazek.jpg" width="143" height="130"
alt="moje kočka Vendula" />
</body>
</html>
Obrázek může být i odkazem; nejdřív by to chtělo ale pochopit textové odkazy, ty obrázkové pak budou hračka. Takže obsah máme, uděláme si menu.