Úvod > Názorně
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
Chronologický přehled novinek na tomto webu
Prohlédněte si strukturu webu pro snažší orientaci.
Stáhnout celý web (V budoucnu)
Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)
Jak můžete podpořit tento web
Poslední aktualizace webu proběhla
24. 3. 2010.
…