Naše první stránka

Z předchozího již víme, že webové stránky neboli HTML dokumenty jsou obyčejné textové soubory. Textový soubor pak obsahuje koktejl namíchaný jednak ze samotného textu a druhak ze speciálních značek, které všemu dávají tu správnou chuť a barvu – určují význam jednotlivých částí textu.

Pro vytvoření naší první stránky proto budeme potřebovat jednoduchý textový editor. V prostředí Windows nám pro tyto účely bohatě poslouží např. program Poznámkový blok (Notepad). Spustíme jej a napíšeme v něm následující text:

<title>Můj první HTML dokument</title>
<h1>Nadpis první úrovně</h1>
<p>První odstavec vás vítá do světa HTML a WWW.
<p>Druhý odstavec následuje ihned za prvním.

Tip

Pokud jste ve Windows a používáte českou klávesnici, máte možná problémy s napsáním znaků menšítko (<) a většítko (>). Na české klávesnici je lze velice pohodlně získat stiskem Pravý-Alt+< respektive Pravý-Alt+>.

Obrázek 4. Vytváření stránky v Notepadu

Vytváření stránky v Notepadu

Abychom si napsaný text mohli prohlédnout v prohlížeči, musíme jej nejprve uložit do souboru. V Poznámkovém bloku tedy vybereme z menu příkaz SouborUložit jako…. Jako jméno souboru můžeme uvést v podstatě cokoliv, přípona souboru by však měla být .html. My naši pokusnou stránku uložíme do souboru pokus.html.

Nyní je správný čas pro spuštění prohlížeče. Spustíme tedy náš oblíbený prohlížeč, ať už je to Firefox, Chrome, Internet Explorer, Opera, Safari nebo nějaký jiný. V menu zvolíme příkaz SouborOtevřít a vybereme dříve uložený soubor pokus.html a výběr potvrdíme. Ve většině operačních systémů místo toho stačit kliknout na jméno souboru s HTML stránkou v nějakém správci souborů (např. v Průzkumníku) – stránka se automaticky otevře v prohlížeči. Také můžeme soubor se stránkou přetáhnout do okna prohlížeče myší.

Náš první smělý pokus by se měl v prohlížeči zobrazit podobně jako na obrázku 5 – „Zobrazení naší první stránky v Internet Exploreru“.

Obrázek 5. Zobrazení naší první stránky v Internet Exploreru

Zobrazení naší první stránky v Internet Exploreru

V případě, že zobrazení je nesprávné, musíme zkontrolovat zápis naší první stránky v Poznámkovém bloku. Opravíme případné překlepy, soubor znovu uložíme a v prohlížeči stiskneme tlačítko pro znovunačtení stránky – většinou je označeno nápisem Obnovit, nebo Aktualizovat, případně je možné překreslení vyvolat stiskem klávesy F5. Pokud jsme vše opravili správně, stránka by měla být v pořádku.

Poznámka

Pokud jsou v prohlížeči špatně zobrazeny znaky s diakritikou je náprava většinou snadná. Při ukládání souboru stačí v dialogovém okně nastavit kódování na UTF-8. Pokud ani to nepomůže, podívejte se na ???.

Nyní se podívejme na význam jednotlivých značek, které jsme použili při zápisu naší první stránky. Vžitý termín pro tyto značky je tag. Tagy určují význam textu, který je mezi ně uzavřen:

  • tag <title> a odpovídající ukončovací tag </title> vymezují text názvu celého dokumentu;

  • mezi tagy <h1></h1> je nadpis stránky;

  • tag <p> od sebe odděluje jednotlivé odstavce textu.

Jak vidíme, každý tag se skládá ze znaku `<' (symbol menší než), svého jména a znaku `>' (symbol větší než). Obvykle se tagy vyskytují v párech – příslušný ukončovací tag má před svým jménem ještě znak `/' (lomítko). V našem příkladě <h1> sdělilo prohlížeči, že následující text je nadpis, a </h1> vyznačilo konec tohoto nadpisu.

Celému textu mezi počátečním a ukončovacím tagem včetně těchto tagů se říká element. Někdy budeme o elementu hovořit i ve smyslu tagu, který se obecně používá k nějakému účelu (např. element h1 slouží k vyznačení nadpisu první úrovně). Text uzavřený mezi tagy je pak obsah elementu.

Obrázek 6. Rozdíl mezi elementem a tagem

Rozdíl mezi elementem a tagem

Z ukázky je rovněž patrné, že některé tagy se nemusí vyskytovat v párech – např. <p>. Jedná se o tagy, kde si místo správného výskytu ukončovacího tagu umí prohlížeč domyslet sám. Dojde mu tedy, že když v textu odstavce narazí na tag pro začátek odstavce, musí nejprve ten předchozí odstavec ukončit.

Tip

HTML v názvech tagů nerozlišuje mezi malými a velkými písmeny. Význam následujících čtyř tagů je tedy zcela stejný: <TITLE>, <title>, <TiTle>, <tItLE>. V budoucnosti oceníte, když budete neustále používat pouze jeden z těchto způsobů zápisu. Osobně jsem dlouhou dobu preferoval první způsob zápisu, protože tagy zapsané velkými písmeny lze velmi snadno rozlišit od okolního textu. Nyní je však zvykem používat druhý způsob se všemi písmeny malými. Pokud se navíc rozhodnete používat XHTML, tak tam je zápis malými písmeny jediný přípustný.

Většina moderních textových editorů umí v HTML kódu barevně odlišit názvy tagů od okolního textu, orientace v dokumentu je tak celkem snadná.

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus