Rychlá příručka - HTML - Úvod do HTML

HTML - HyperText Markup Language

Na Wikipedii (otevřené encyklopedii) se o HTML dočtete toto: „HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je hlavním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.“, celý článek na Wikipedii (otevřené encyklopedii), ve kterém se dočtete zajímavé informace o tomto jazyku, otevřete pouhým kliknutím.

Tagy - příkazy jazyka HTML

Příkazy, na které jazyk HTML reaguje, se nazývají tagy. Anglicky znamená tag štítek, podívejte se. Tagy se rozdělují na nepárové a párové. První jmenovanou skupinu, tagy nepárové, tvoří jen velmi málo tagů, protože druhou skupinu, párové tagy, tvoří naprostá většina tagů jazyka HTML. Párové tagy někde musí začít, ale musí také někde, na rozdíl od nepárových tagů, skončit. Tagy se píší do hranatých závorek < >, které se vytvoří na české klávesnici podržením klávesy Alt Gr a stisknutím jedné klávesy někde blízko nad Alt Gr. Tam, kde normálně děláte čárku, se pomocí klávesy Alt Gr udělá levá závorka (<), kterou každý tag začíná. Potom následuje právě ten tag, což je slovo, které obsahuje jedno, dvě, někdy i více písmen. Potom tag ukončíme stisknutím klávesy, kterou děláte tečku, s podržením Alt Gr, tedy pravou závorkou (>). Jako příklad můžeme uvést tag <a> </a>. Vidíte, že nejdříve začíná levou závorkou, potom je právě to znění tagu, příkazu, na který bude HTML reagovat, poté tag končí pravou závorkou. Protože je to ale párový tag, musí být někde ukončen. Ukončení provedeme tak, jako jsme provedli začátek tagu, ale s tím rozdílem, že před nějakým tím slovem bude lomítko. Párový tag platí poté pro všechno, co bude mezi jeho začátkem a ukončením. Nyní si zde můžete vyzkoušet vytvořit tyto hranaté závorky, lomítka, co jen chcete:

Parametry - rozšiřování tagů

Tagy mohou být rozšířené o tzv. parametry. Pro ně můžeme použít i výraz atributy. Některé tagy musí, některé mohou a některé nesmí mít parametry. Tagy, které musí mít parametry, samy o sobě nic nedělají a mají tedy nějaký povinný parametr, bez kterého by byly v HTML kódu téměř zbytečné. Ty tagy, které mohou mít parametry, samy o sobě něco udělají, ale mi toho po nich můžeme chtít pomocí parametrů daleko více. Tagů, které nesmí mít žádné parametry, je velmi málo. Parametr začíná mezerou, po které následuje příkaz parametru, což bývá anglické slovo. Po tomto slovu následuje rovná se a poté uvozovky nahoře, mezi kterými bude další anglické slovo. Jako příklad nám zde poslouží parametr bgcolor u tagu <body>. V HTML kódu to bude tedy vypadat následovně: <body bgcolor=“lightgreen"> </body>. Vidíme tedy, že nám začal tag závorkou, což už bychom měli znát z předchozího článku. Tagem je slovo body, ale chtěli jsme mu něco navíc nastavit, v tomto případě pozadí. Použili jsme tedy parametr bgcolor, za kterým jsme udělali rovná se, poté uvozovky nahoře, mezi kterými je anglické slovo, v tomto případě světle modrá barva. Nakonec jsme ukončili tag pravou závorkou. Jak si můžete všimnout, parametry se píší do závorek spolu s tagem, kterému chceme tento parametr přiřadit. Pomocí parametrů se také nastavuje vzhled tagů z externích souborů jazyka CSS, více zde. Zde si nyní můžete vyzkoušet např. uvozovky nebo rovná se, oboje by měl každý znát:

Základní povinná struktura a první soubor HTML

Nyní tedy známe něco o příkazech, na které HTML reaguje, a o jejich nastavení pomocí parametrů. Nyní tedy můžeme vytvořit náš první soubor. Otevřeme si tedy nějaký webový editor (např. nejjednodušší je Poznámkový blok u OS Windows) a napíšeme svůj první tag, kterým bude <html>, protože ten musí být na začátku každého souboru jazyka HTML. Tento tag je párový, proto také někde skončí. Než ale skončí, uděláme za tag <html> další tag, kterým bude <head>. Tento tag je opět párový a můžeme ho ukončit okamžitě. Po ukončení tagu <head> musí dále následovat tag <body>. Ten je také párový a opět ho můžeme ukončit ihned. Za ukončení tagu <body> ukončíme tag <html> a tím končí základní povinná struktura webové stránky jazyka HTML, která tedy obsahuje 3 tagy, z toho jsou všechny párové. Tag <head> tvoří hlavičku souboru, ve které budou spíše informace o webu a pro web. Je to tedy obsah, který běžný uživatel neuvidí. Mezi tagy <body> </body> je naprostá většina souboru, to už je celá webová stránka od začátku až do konce – všechen text, obrázky, videa, odkazy, tabulky, seznamy, aplikace, prostě všechno. Soubor si nyní uložíme pod názvem index s příponou html, tedy index.html. Je to tak, protože první, úvodní, stránka každého webu jazyka HTML musí být pojmenována index, aby mohl systém rozpoznat, co má uživateli zobrazit, když si zadá vaši URL adresu. Poté si sice můžete pojmenovat každý další soubor podle sebe, ale název nesmí obsahovat mezery, diakritiku a neměl by obsahovat ani číslice. Když si otevřete tento soubor ve webovém prohlížeči, neuvidíte zatím nic, protože základní povinná struktura webové stránky jazyka HTML nevytvoří nic, co by mohl běžný uživatel vidět.

Základní pravidla tvorby webů

Jako základní pravidlo už zde bylo uvedeno to, že první, úvodní, stránka každého webu musí mít název index s příponou html a další stránky pak nesmí mít ve svém názvu žádnou diakritiku, žádné mezery ani pro jistotu žádná čísla. Soubory, stránky webu, byste si měli pojmenovávat jednoduše, protože je budete často používat, nejen v HTML kódu. V názvu by také neměla být žádná speciální znaménka, jako je %, °, ?, !, (, ) apod., ale na to by vás měl např. OS Windows upozornit, protože takto nesmí být pojmenován žádný soubor ve vašem počítači, ať už to je právě web, nebo třeba fotografie. V HTML kódu platí pouze základní pravidla úpravy, což jsou hlavně tagy a parametry. Všechny tyto příkazy mají povinně daná místa, kde mají být uvozovky, kde mezery, závorky, ale ostatní obsah, tedy hlavně ten náš, si můžete upravovat jak chcete. Můžete tedy pracovat tak, že nikde nepoužijete klávesu enter, HTML kód tedy bude stále za sebou. Mnohem přehlednější ale je, když si v HTML kódu uděláte pořádek, přece jen se vám to určitě vyplatí. Zatím posledním pravidlem je to, že i když uděláte nový řádek v HTML kódu, nový řádek na webu se nevytvoří. Při prohlížení této příručky jistě narazíte i na další pravidla, toto jsou totiž jen opravdu ta základní.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com