Vítám vás u kurzu, v kterém se naučíme vytvářet jednoduché vebové stránky. Co k tomu budeme potřebovat? Vystačíme si s Poznámkovým blokem (Notepadem) z Windows (nebo libovolným jiným editorem prostého textu). Dalšími nezbytnými předpoklady je chuť učit se a troška času, ale to předpokládám všichni máte (proč byste jinak četli tento článek, že?)
Připadá vám tento nadpis nesrozumitelný? Máte pravdu. Ale hned uvidíte, že nebyl zvolen náhodou. Jazyk HTML, kterým jsou tvořeny webové stránky, totiž dospěl již do své čtvrté verze a konsorcium W3C, které se stará o standartizaci jazyka HTML, zjistilo, že už nám HTML nemá moc co nabídnout. Budoucnost je pravděpodobně v jazyku XML a XHTML, takže se dá přepokládat, že vývoj jazyka HTML je u konce. Ale to samozřejmě nijak nesnižuje jeho využitelnost pro naše jednoduché stránky.
Často se můžeme setkat s tím, že stránky jsou "optimalizovány pro IE 6 při rozlišení 1024x768". Bohužel, ne každý webmaster chápe správně, co toto upozornění znamená. Leckdo je schopný používat tagy, které podporuje opravdu jen některý z prohlížečů (protože nejsou standartem HTML). Takové stránky se pak v jiném prohlížeči chovají nekorektně, v horším případě se nezobrazí vůbec. Optimalizace znamená to, že stránky vyhovují standartům W3C, ale pro některý z prohlížečů obsahují něco navíc, "bonbónek", který však nenarušuje stránku v jiném prohlížeč.
Přes veškerou snahu, i když budeme mít kód přesně podle definice HTML, občas se může stát, že naše stránka dopadne v některém prohlížeči nepěkně. V takovém případě však je chyba na straně prohlížeče a nám nezbývá, než se s tím smířit. Ještě tak můžeme přidat do stránky upozornění, že náš kód je zapsán správně, spolu s odkazem na HTML validátor, např na stránkách konsorcia W3C.
HTML (HyperText Mark up Language) je značkovací jazyk zpracovávaný na straně klienta, tj ve webovém prohlížeči (mezi nejpoužívanější patří Internet Explorer, Netscape Navigator, Mozilla a Opera). Příkazům jazyka HTML říkáme tagy. Tyto tagy jsou webovým serverem odesílány prohlížeči, který na jejich základě zobrazí námi požadovaný dokument.
Jazyku HTML je jedno, jestli píšete tagy velkými písmeny, malými písmeny nebo "napřeskáčku".
<html><HTML><HtMl>Zvykněte si však psát všechny tagy malými písmeny. Není to moje touha něco vám nařizovat. Pokud budete chtít později přejít např. na jazyk XHTML, zjistíte, že všechny tagy MUSÍTE psát malými písmeny. A tak to bude se vším. Tam, kde HTML umožňuje více způsobů zápisu, budu vás učit pouze ten progresivní. Pojďme si nyní ukázat základní strukturu HTML dokumentu:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Vidíme, že obsahuje čtyři dvojice přibližně stejných tagů, jen některé obsahují znak "/". Abychom byli úplně v obraze, potřebujeme vědět ještě maličkost: HTML rozlišuje párové a nepárové tagy. Pokud je tag párový, obsahuje uvozovací tag znak "je menší" následovaný vlastním tagem a znakem "je větší" (<html>). Tag ukončovací obsahuje znak "je menší" následovaný znakem lomeno "/", vlastním tagem a znakem "je větší" (</html>).
Takže teď už jsme schopni si o struktuře něco říct: HTML dokument je uzavřen do párového tagu <html>, následuje definice hlavičky dokumentu (sekce <head> až </head>) a pokračuje vlastním tělem dokumentu (<body> až </body>). Nezapoměli jsme na nic? Aha, párový tag <title>! Tento tag říká, jaký text bude zobrazen v titulku okna vedle názvu prohlížeče (zde je to "Jazyk HTML - základy").
Nyní si v prohlížeči otevřte vaší oblíbenou stránku. Chcete vidět, jakou má strukturu? Této struktuře říkáme zdrojový kód a např. v Internet Exploreru ho vyvoláme příkazem Zdrojový kód v menu Zobrazit.
Jazyku HTML je jedno, zda napíšeme všechny tagy na jeden řádek, nebo napíšeme každý na nový řádek. Jinak řečeno všude tam, kde bychom psali mezeru můžeme napsat i několik mezer, užít tabulátor nebo Enter. Těmto oddělovačům říkáme také bílý znak (ang. whitespace). Díky těmto vlastnostem můžeme kód libovolně formátovat a zpřehlednit ho, aniž to bude mít vliv na vlastní vzhled stránky.
Občas si potřebujeme udělat v kódu poznámku. Tato poznámka musí být ve zdrojovém kódu, ale samozřejmě nesmí být zobrazena ve vlastní stránce. Těmto poznámkám říkáme komentáře. Tyto komentáře jsou uzavřeny mezi sekvenci znaků <!-- a -->. Takže cokoli je mezi těmito znaky, nebude vypsáno do stránky.
<!-- Toto je komentář. Na stránce nebude vidět :-) -->
Pozn.: Pozor, nikdy nevpisujte do komentářů citlivé údaje, jako třeba hesla apod. Kdokoli si může nechat zobrazit zdrojový kód a komentáře si přečíst!
| Následující |Obsah sekce | Titulní stránka |
| © Zdeněk Kodrla, 2004 |