HTML – HyperText Markup Language je značkovací jazyk pro tvorbu www stránek. Jako například Český jazyk má svá slova, tak i HTML obsahuje slova, neboli tagy (značky), které dávají vlastnímu obsahu stránky význam a také dokument částečně formátují.
Tagy máme párové a nepárové.
Pokud se nám nechce stále přepínat mezi českou a anglickou klávesnicí (Alt + Shift), abychom mohli psát < a > potřebné pro zápis tagů, můžeme tyto znaky psát na české klávesnici pomocí pravého Alt a ? či . Případně v PSPadu zkuste Ctrl + ?.
Jak zapisujeme tagy
1. Párový tag – má začátek a konec:<p>Já jsem krátký odstavec.</p>
<p> — začátek – tag uzavřený do hranatých závorek
</p> — konec – tag uzavřený do hranatých závorek, před tagem je lomítko
Text (obsah) stránky se těmito značkami obaluje. Konkrétně tag p značí odstavec (z anglického paragraph).
Pro hlavní nadpis na stránce pak máme tag h1:
<h1>Já jsem hlavní nadpis Vaší www stránky</h1>
2. Nepárový tag – nemá ukončovací značku:<hr> – horizontální čára na naší stránce
Tyto tagy neobalují text, ale mají svůj vlastní význam.
Tagy budeme psát malými písmeny. Je možno psát i písmena velká, ale vzhledem k XHTML (rozšířená verze HTML) je lepší se držet písmen malých. Aneb, pokud budeme psát vždy malá písmena, neuděláme chybu.
Text můžeme obalit i do vícero tagů. Neměli bychom je však křížit.
<p><strong>Zvýrazněný odstavec</strong></p> – správný zápis
<p><strong>Zvýrazněný odstavec</p></strong> – špatný zápis
Navíc tag strong by měl být vždy uvnitř tagu p, ale o tom později.
Struktura HTML dokumentu
Každý správný HTML dokument má svoji určitou strukturu. My se nyní podíváme, jak by taková struktura měla vypadat.
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>
<html>
<head>
</head>
<body>
</body>
</html>
První řádek nám říká, jaká verze HTML byla použita. Není součástí HTML dokumentu.
Na druhém řádku začíná samotný HTML dokument.
Součástí HTML dokumentu je také hlavička, informace v hlavičce se umísťují mezi <head> </head>. Obsah www stránky je pak mezi <body> </body>. To, co vytvoříme mezi tyto značky, vidíme v prohlížeči. Jedná se o tělo dokumentu.
Jako poslední je potom značka </html> informující o ukončení HTML dokumentu.
Šablona HTML dokumentu jak má být
I když jsme si ukázali, jak má šablona HTMl dokumentu vypadat, je to pouze jakýsi nástin. Několik důležitých údajů v ní zatím chybí. Následujicící šablona je už kompletní, se vším všudy. Doporučuji tedy uložit si ji (jako HTML document). Bude se nám hodit při další tvorbě.
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>
<html lang=“cs“>
<head>
<meta http-equiv=“content-type“ content=“text/html; charset=utf-8″>
<title></title>
<meta name=“description“ content=““>
<meta name=“robots“ content=“all,follow“>
</head>
<body>
</body>
</html>
Na prvním řádku, jak už víme, je informace o použité verzi HTML.
K k tagu html přibyla informace o jazyce, ve kterém obsah stránek budeme psát (cs, nikoli cz!, pro češtinu, en pro angličtinu apod.).
Do hlavičky přibyly důležité informace. Obsahuje tzv. meta tagy a tag title. Meta tagům je potom věnována samostatná kapitola. Zastavíme se však u jednoho meta tagu již nyní.<meta http-equiv="content-type" content="text/html; charset=utf-8">
Tento meta tag bychom měli psát vždy před tag title. V některých případech by se pak stránka nemusela v Internet Exploreru zobrazit (ale nevím, pro jaké verze IE to platí).
Konkrétně pak kódování utf-8 (doporučuji ho používat) dovoluje psát jakékoli znaky, klidně i čínské.
Pokud se chcete o kódování dozvědět více informací, mrkněte na Čeština na webu v HTML.
Pozor, ve stejném kódování musí být dokument také uložen (aby se diaktrika zobrazovala korektně). V PSPadu dáme Formát a vybereme stejné kódování jako máme v meta tagu.
Zvolené kódvání se nám pak zobrazuje v dolní liště programu.
Tag title – titulek (název) stránky. Přestože není mezi <body> </body>, v prohlížeči se zobrazí, a to úplně nahoře, v jeho záhlaví. Zkuste se tam občas mrknout. Pro každou stránku (HTML dokument) by měl být titulek jiný, vyhledávače to mají rády (více o title v přehledu tagů a úvodu do SEO).
Co jsme si zatím neřekli, je, že v HTML se nedá nový řádek udělat stejně jako například ve Wordu. Ve Wordu skočíme na nový řádek pomocí klávesy Enter. Samozřejmě, že to samé se stane i v HTML editoru (PSPadu), ale v prohlížeči se to nevykreslí.
<p>Odstavec o něčem</p>
<p>Odstavec
o něčem</p>
Obojí se vykreslí v prohlížeči stejně, a to: Odstavec o něčem.
Formátování pomocí Enteru v HTML editoru slouží k lepší přehlednosti HTML kódu. Mohli bychom mít celý obsah HTML dokumentu napsán do jednoho řádku, ale jak jistě sami uznáte, na přehlednosti by to rozhodně nepřidalo. HTML také vykreslí jen jednu mezeru. Pokud máme ve zdrojovém kódu více mezer, prohlížeč vykreslí pouze jednu.
A pokud chceme v HTML udělat nový řádek nebo více mezer za sebou, musíme použít příslušné tagy.
Pusťme se do toho
Šablomu máme již uloženou, můžeme tedy začít tvořit. Zatím moc tagů neznáme, ale i to stačí na vytvoření jednoduché www stránky, kterou pak nadále rozšíříme.
Chceme si nappříklad udělat stránku o motýlech. Otevřeme si v PSPadu naši šablonu a vytvoříme následující.
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>
<html lang=“cs“>
<head>
<meta http-equiv=“content-type“ content=“text/html; charset=utf-8″>
<title>Motýli: babočka bílé C</title>
<meta name=“description“ content=“Popis babočky bílé C
(vajíčka, housenky, kukly a motýla), výskyt, potrava, životní cyklus“>
<meta name=“robots“ content=“all,follow“>
</head>
<body>
<h1>Naše babočky</h1>
<hr>
<h2>Babočka bílé C (Polygonia c-album)</h2>
<h3>Popis</h3>
<p>Tady se nachází popis motýla babočka bílé C.</p>
<h3>Výskyt</h3>
<p>Informace o výskytu babočky bílé C.</p>
<h3>Potrava</h3>
<p>Potrava tohoto motýla (jeho housenek).</p>
</body>
</html>
Do title jsme přidali název konkrétní stránky, do description popis toho, co se na dané stránce nachází. H1 je pak hlavní nadpis celého webu a další „háčka“ jsou nadpisy nižší úrovně. Jak poznáme později, je celkem šest úrovní nadpisů (h1–h6) a platí pro ně také jistá pravidla. Přibyl také nový tag i, který vyznačuje kurzívu. Tag pro odstavec a horizontální čáru již známe.
Zobrazíme si teď stránku v prohlížeči, ať vidíme, jak naše dílo vypadá.
Pokud chcete, napište zápis mezi <body> </body> do jednoho řádku a soubor potom zobrazte v prohlížeči. Ano, zobrazí se stejně, ale přehlednost našeho HTML souboru utrpí.
