Po nastudování této kapitoly dokážeme vytvořit kostru HTML dokumentu a dokument následně uložit ve správném formátu. Budeme umět zobrazit HTML dokument v prohlížeči. Budeme znát tagy pro nadpisy, odstavce, kurzívu a tučné písmo a dovedeme je použít.
Jak jsme se už dozvěděli v 1. lekci, pro přehlednost kódu bude dobré používat nějaký lepší textový editor.
Otevřeme si tedy PSPad (pokud jej ještě nemáš – stáhni zde), v záložce Soubor zvolíme Nový a vybereme HTML, potvrdíme.
Otevřel se nám nový dokument, který obsahuje kostru našeho budoucího webu.
Zkusme si do této části kódu napsat nějaký text, pomyslně rozdělený do nadpisu a dvou řádků.
V prohlížeči jej zobrazíme tak, že dokument uložíme, jako HTML, např. takto.
* v PSPadu pomocí tlačítka F10 nebo ikony zeměkoule otevřeme rychlý náhled
Náš text se zobrazí, na jednom řádku (nebo zalomený podle šířky okna prohlížeče) a vše vypadá jednolitě. Aby tomu tak nebylo a text měl požadovaný formát, doplníme jej o několik tagů pro jeho změnu.
Existuje 6 druhů nadpisů značených párovými tagy h1 – h6 (podle důležitosti).
<h1> Nadpis prvního řádu</h1> - je unikátní, měl by být pouze jeden na celé stránce – např. „Web Matouše Mutiny“
Nadpisů 2. až 6. řádu může být neomezeně.
* špičaté závorky napíšeme stisknutím kombinace pravého Alt + , (čárka), pravý Alt + . (tečka)
<h2>Nadpis druhého řádu – méně důležitý</h2>
<h3>Nadpis třetího řádu – ještě méně důležitý</h3>Odstavec se značí párovým tagem <p>, který zajistí, aby text začínal na novém řádku.
<p>Jeden řádek textu</p>
<p>Druhý řádek textu</p>Párový tag <em>, který způsobí naklonění textu.
<em>Tento text je nakloněný</em>Párový tag <strong>.
<strong>Tento text je tučný</strong>* zkombinováním tagů vytvoříme různě formátovaný text
<p>Tento odstavec začíná na novém řádku, tučné písmo je
<strong>zde</strong> a tučná kurzíva <strong><em>zde</em></strong></p>| Tag | Význam | Náhled |
|---|---|---|
| <em></em> | Obsah tagu kurzívou | Důležitý text |
| <strong></strong> | Obsah tagu tučně | Důležitější text |
| <cite></cite> | Obsah tagu kurzívou (pro citace) | Citát z jiného zdroje |
| <dfn></dfn> | Označuje právě definovaný termín | Definovaný termín |
| <code></code> | Označuje výpis zdrojového kódu nebo HTML | Strojové písmo |
| <big></big> | Velké písmo | Velké písmo |
| <small></small> | Malé písmo | Malé písmo |
* Všimněme si, jak se v prohlížeči zobrazí text formátovaný pomocí tagu <em> pro kurzívu a tagu <cite> pro citaci. Ano, vypadají stejně. Měli bychom se však držet sémantiky kódu a používat vhodné tagy tam, kde se používat mají.
Rozdíl mezi těmito tagy je klíčový pro Internetové vyhledávače , které mají pro každou skupinu tagů nastavenou určitou váhu a vlastnost, se kterou můžou pracovat. Díky tomu jsou i tito Internetoví roboti schopni zorientovat se ve struktuře stránky.
Kromě vyhledávačů zde poznají rozdíl, také zrakově postižení, kteří při prohlížení webu používají speciální čtečky. Ty jim „přečtou“ text určité části webu a na stránce se orientují právě pomocí tagů. Pokud tedy budeme mít na svém webu citaci, pro kterou namísto tagu <cite> použijeme tag <em>, protože podle nás vypadají stejně, znepříjemníme tak zrakově postiženým orientaci na stránce.
Naučili jsme se vytvořit a uložit HTML dokument ve srpávném formátu a následně jej zobrazit v prohlížeči. Umíme vytvořit nadpis, odstavec, text psaný tučně a kurzívou. Známe rozdíl mezi tagy pro kurzívu a citaci, které vypadají na pohled stejně.
Poznali jsme tyto párové tagy: <h1> - <h6>, <p>, <em>, <strong>, <cite>, <dfn>, <em>, <code>, <big>, <small>
Napiš několik informací o sobě. Text bude začínat jedním hlavním nadpisem (tvé jméno), jedním podnadpisem 2. řádu a dvěma podnadpisy 3. řádu, a bude strukturovaný do několika odstavců. V textu se musí objevit alespoň jedno číslo, které bude psáno kurzívou a alespoň jedna informace, která bude psána tučně.