Struktura kódu stránky (1)

Struktura stránky
a) doctype
b) head (hlavička)
c) body (tělo stránky)

Teorie je nuda, takže si to zkusíme. A abych nezapomněla - budeme důsledně oddělovat obsah (texty, obrázky) a formu (velikost a barvu písma, pozadí, grafiku atd.). Takže logicky začneme obsahem - o tom bude několik dalších kapitol. Formátovat budeme později. Pokud si projdete následující příklady, zatím se příliš nestarejte o to, jak to vypadá. Protože formu zatím nebudeme nijak definovat, zobrazí se naše příklady třeba u každého jinak, protože se použije výchozí nastavení prohlížeče. Když si kromě Exploreru neboli IE stáhnete třeba Firefox neboli FF (což je mimochodem dobrá cesta k tomu, abyste ho začali standardně používat ;-) ), a příklad si zobrazíte v IE i ve FF, bude možná použito jiné písmo, jiné mezery apod.

Základní součásti kódu stránky

Kód velmi jednoduché stránky vypadá např. takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta name="description" content="Něco o mně - moje stránky" />
<title>Toto je moje stránka</title>
</head>
<body>
<h1>Úvod</h1>
<p>Na těchto stránkách najdete všechno, co o mně chcete vědět.</p>
</body>
</html>

Modře je označeno doctype, zeleně hlavička (head), vínově tělo (body).

Tak to zkuste: okopírujte tento kód do editoru, uložte jej pod nějakým chytrým názvem (třeba stranka.htm) a otevřete v prohlížeči.

Pokud se všechno povedlo, měli byste vidět něco jako tohle: 1. příklad.

Jak se podívat na kód stránky, zobrazené v prohlížeči?

Samozřejmě záleží na tom, jaký prohlížeč používáte, ale ta volba bude všude podobná. Takže klikněte pravým tlačítkem někde na stránce, nebo najděte nahoře v menu položku Zobrazit - a tam hledejte Zdrojový kód. Pokud se Vám to povede na zobrazeném příkladu, uvidíte stejný HTML kód, jako je výše.

Malá finta: Rozladilo vás, že jste kliknuli na odkaz na příklad, a ten se vám otevřel ve stejném okně, takže tahle stránka zmizela? Vím o tom. Současným trendem je nechat na uživateli, aby se rozhodnul, jestli chce odkaz otevřít ve stejném nebo jiném okně. Takže všechny odkazy děláme standardně do stejného okna a uživatel může sám zařídit, aby to bylo do nového okna: při kliknutí na odkaz podržte Shift nebo na odkaz klikněte pravým tlačítkem a zvolte "Otevřít v novém okně".


Firefox: Prohlížeč, kterému můžete věřit
píše -dis- bb(zavináč)choltice.eu