Nyní si ukážeme postup vytvoření naší první www stránky. Netrapte se, pokud nebudete zápisu zatím rozumět. Vše je vysvětleno v následujících kapitolách.
1. Otevřeme si PSPad. Pokud ho ještě nemáte, můžete si ho stáhnout.
Vidíme, že prostředí PSPadu je poměrně přátelské a intuitivní.
2. V horní liště vybereme Soubor – Nový a ze seznamu vybereme HTML. Otevře se nám nový list a my vidíme toto:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>
<meta http-equiv=“content-type“ content=“text/html; charset=windows-1250″>
<meta name=“generator“ content=“PSPad editor, www.pspad.com“>
<title></title>
</head>
<body>
</body>
</html>
Jedná se o kostru www stránky.
3. Na řádek mezi značky <body> a </body> napíšeme <p>Toto je moje www stránka.</p>. Dostaneme tedy následujícící:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>
<meta http-equiv=“content-type“ content=“text/html; charset=windows-1250″>
<meta name=“generator“ content=“PSPad editor, www.pspad.com“>
<title></title>
</head>
<body>
<p>Toto je moje www stránka.</p>
</body>
</html>
4. V PSPadu dáme Soubor – Uložit jako a soubor pojmenujeme například stranka.html. Příponu psát nemusíme, doplní se sama. Soubor poté uložíme.
Názvy stránek (HTML souborů) budeme psát bez diakritiky, bez mezer a malými písmeny. Pokud bude název stránky víceslovný, oddělíme slova pomlčkou, nikoli mezereou. Nepoužíváme ani podtržítko. I když to s diakritikou a mezerami většinou funguje, nemusí však vždy.
5. Uložený soubor si nyní otevřeme v prohlížeči (dvojklikem). To je krása, co?
Zároveň ho také otevřeme opět v PSPadu.
6. Nyní zkusíme místo v našem souboru v PSPadu místo textu Toto je moje www stránka napsat něco jiného. Dáme Soubor – Uložit (Ctrl + S).
Nyní mrkneme na prohlížeč a stránku aktualizujeme. Hop, to je panečku kouzlo.
7. Tak co, chápeme podstatu? Věřím, že ano. V HTML editoru prostě upravujeme zdrojový kód a v prohlížeči si poté zobrazujeme výslednou podobu.
Přestože už umíme www stránku vytvořit, sami jistě vidíte, že stránka zatím není nic moc. Abychom porozuměli všem těm značkám v našem HTML souboru a mohli tak tvořit propracovanější stránky, podíváme se na kapitolu