Co to je HTML
HTML je zkratka pro Hyper Text Markup Language – hypertextový značkovací jazyk.
Na počátku 60-tých let 20-tého století začal Theodor Nelson pracovat na nelineárním spojování dokumentů a přišel s pojmem hypertext. Hypertext je "speciální typ databázového systému, v kterém mohou být objekty spojovány (linkovány) s ostatními. Když vyberete objekt, tak můžete vidět všechny ostatní, které jsou s ním slinkovány".
V roce 1986 vznikl obecný značkovací jazyk SGML - Standard Generalized Markup Language a jako jeho aplikace později vznikl jazyk HTML.
Stručně z historie
- 1991
- první neformální specifikace HTML a textové prohlížeče
- 1993
- návrh HTML 2.0 a první grafický prohlížeč NCSA MOSAIC
- 1994
- založení W3C organizace
- 1995
- oficiální specifikace HTML 2.0 a neoficiální HTML 3.0 (Netscape)
- 1996
- oficiální HTML 3.2, zdarma Internet Explorer 3.0, CSS1
- 1997
- oficiální HTML 4.0, Internet Explorer 4.0, Microsoft DHTML
- 1998
- Internet Explorer 5.0, XML 1.0, CSS2
- 1999
- HTML 4.01
- 2000
- XHTML 1.0
- 2001
- Internet Explorer 6, XHTML 1.1
- 2002
- reformulace XHTML 1.0
Základní zápis HTML kódu
Jazyk HTML je tvořen elementy, což jsou objekty, které říkají něco o svém obsahu. Jméno elementu ohraničené ostrými závorkami < a > označujeme jako tag (značka). Může být párový nebo nepárový (ne v XHTML). Párový element má otevírací tag, např. <p> a uzavírací tag (před jméno elementu je předřazeno lomítko), např. </p>. Příkladem nepárového elementu je například zalomení řádku <br>. Pokud je párový element prázdný (nemá žádný obsah), tak jej můžeme zapsat pomocí jednoho tagu, který na konci doplníme o lomítko, př: <br />.
Každý element může obsahovat určité atributy (parametry, které určují vlastnosti elementu). Atribut se zapisuje do otevíracího tagu vedle jména, ve formátu jméno_atributu="hodnota" (v některých případech se může použít zkrácená verze - pouze jméno atributu), např. <a href="http://www.samuraj-cz.com">..</a>. Hodnota atributu se uzavírá do programátorských uvozovek - " nebo '.
HTML je interpretační jazyk, to znamená, že zdrojový kód se nepřekládá do spustitelného tvaru, ale je prováděn interpreterem (webovým prohlížečem) na klientovi. Výhodou je, že kód je obyčejný textový dokument, který si můžeme prohlédnout a porozumět mu, a je nezávislý na hardwaru i operačním systému.
Dnes se doporučuje používat pouze omezené množství HTML tagů, pro určení obsahu, a formátování provádět pomocí CSS. V HTML 4.01 bylo mnoho tagů odstraněno. Více naleznete v odstavci Oddělení obsahu a formátování.
Pozn.: V HTML nezáleží na velikosti použitých znaků v názvech elementů nebo atributů, ovšem v XHTML se musí používat vše malými písmeny, proto je jednoduší i v HTML používat malá písmena.
Typy Doctype a jejich zápis
Začátek dokumentu by měl obsahovat informace o verzi použitého HTML a typu DTD - Document Type Definition. Nejpoužívanější verze jsou HTML 4.01 a XHTML 1.0. Osobně doporučuji využívat pouze verze Strict, ale uvádím zápis i verze se zpětnou kompatibilitou Transitional nebo s podporou rámů Frameset. Podrobněji se o použití Doctypu zmiňuji v odstavci Správná syntaxe – validní kód.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Struktura dokumentu
HTML kód se standardně ukládá do souboru s příponou htm nebo html. Jak jsem se již zmínil, dokument se skládá z jednotlivých elementů. Tyto elementy mohou být v sobě vnořovány podle určitých pravidel (popsaných ve specifikaci jazyka - DTD). Kořenový element se jmenuje html, ale ještě před ním by se měla nacházet definice DOCTYPE. Kdekoliv uvnitř dokumentu se může nacházet komentář. Uvnitř kořenového elementu se může (a měl by) nacházet pouze element head, který nese základní informace o dokumentu, a element body, kde je vlastní obsah dokumentu.
<!-- toto je komentář; dále je definováno DTD HTML 4.01 Strict --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- kořenový element dokumentu s určením jazyka--> <html lang="cs"> <!-- hlavička --> <head> </head> <!-- tělo dokumentu --> <body> </body> </html>
Elementy, které se při interpretaci dokumentu zobrazí jako jeho obsah, se vkládají do elementu body. Mohou být dvou základních obsahových typů – řádkové (inline) nebo blokové (block; za ním se zalamuje řádek). Elementy se mohou do sebe vnořovat při zachování dvou základních pravidel. Nikdy se nesmí křížit. Do řádkového elementu není možno vnořit element blokový.
Existují však také elementy, které se do výstupu nezobrazují. Některé se mohou nacházet pouze uvnitř elementu head, jako meta, style a link. Některé i uvnitř body, jako script.
Tzv. bíle znaky (znaky, které se nezobrazují), což jsou převážně mezera, tabulátor a konec řádku, se vždy zobrazí jako jedna mezera, nezáleží na tom, kolik za sebou jich následuje. Pozn.: v XHTML je řada bílých znaků zakázána.
Elementy HTML
Základní elementy
K základním elementům patří: nadpisy h1 až h6, odstavec p, obrázek img (má povinný atribut alt), hyperlink (odkaz) a.
Základní formátování textu (v podstatě se, ale nejedná o formátování (ale o určení sémantického významu), neboť to se pomocí HTML nemá provádět) : silný text strong (většinou se zobrazuje tučně) a zvýrazněný text em (emphasized; většinou se zobrazuje kurzívou) – nahradili použití elementů b a i.
Tabulka: table, oblasti thead, tbody, tfoot, řádky tr, buňky th, td, nadpis caption.
Formulář: form, skupina prvků fieldset, vstupní pole input (typu text, checkbox, radio, buton, file, image, hidden, password), textové pole textarea, výběrové pole select s položkami option, tlačítko button, popis label (atribut for určuje příslušnost k jinému elementu podle id).
Seznamy – netříděný ul, tříděný ol, jednotlivé položky li, Seznam definic dl je tvořen dvojicemi - pojem dt a definice dd.
Speciální elementy (logické)
Řádková citace q, bloková citace blockquote, zkratka abbr (s atributem title), akronym acronym, přeformátovaný text pre, zdrojový kód code, definice dfn, příklad samp, dolní index sub, horní index sup, korektury – smazaný text del, vložený text ins.
Sémanticky neutrální elementy
Při použití CSS velice důležité elementy. Řádkový element (in-line) span a blokový element (block) div.
Skripty, linky a meta informace
Pro vkládání skriptů slouží element script s atributem type, který určuje skriptovací jazyk, případně atribut src, který obsahuje odkaz na externí skript. Skripty je vhodné uzavřít do komentářů <!-- -->, aby se zabránilo zpracování u nepodporujících prohlížečů.
Do hlavičky dokumentu můžeme vložit linky link na externí soubory, to se používá převážně pro vložení externího CSS, ikony webu (favicon) nebo alternativního zdroje informací (třeba RSS).
Pomocí elementu meta můžeme vkládat globální informace o dokumentu. Jednou z nejdůležitějších je definice kódování (ta by se měla naházet vždy před elementem title). Dále můžeme vložit klíčová slova, autora stránky, popis dokumentu, atd.
Entity
Některé znaky mají v HTML speciální význam, jako například < a > ohraničují tag. Aby bylo možno tyto znaky zobrazit, máme k dispozici znakové entity. Zápis entity vždy začíná znakem & a končí ;, uvnitř je buď název entity nebo číselný kód (ten začíná znakem #). Nejpoužívanější je třeba < pro <, > pro >, & pro &, © pro ©.
Speciální entitou je nezalamující mezera . Normálně nemůžete zapsat do výstupu více než jednu mezeru v řadě, pomocí nezalamující mezery to jde (ale využívat by se to mělo minimálně). Další vhodné použití je spojení slov, které nechceme, aby se rozdělili na konci řádku (například předložka před slovem).
Poznámka: Nesnažil jsem se zde vyjmenovat všechny elementy HTML, natož je pospat. Elementy jsem rozdělil do pár skupin pro lepší přehlednost, s těmito skupinami určitě nebudou všichni souhlasit.
XHTML
Aby se jazyk HTML více přiblížil popisu obsahu a ne vzhledu, byla vytvořena upravená verze HTML, která se více blíží XML a to XHTML. Hlavním rozdílem oproti HTML je: všechny elementy i atributy se píší malými písmeny, všechny elementy musí být uzavřeny, bylo odstraněno několik tagů pro formátování, není možno používat zkrácené zápisy atributů (jako třeba checked). Ještě se často uvádí, myslím obecná pravidla, že: hodnoty atributů musí být v uvozovkách, tagy se nesmí křížit.
DHTML
Spojením HTML, CSS a JavaScriptu vzniká jazyk popisovaný jako dynamické HTML – DHTML. Za jeho zrodem stojí společnost Microsoft. V podstatě se jedná o to, že díky JavaScriptu můžeme na klientské straně změnit některou vlastnost CSS a tím dosáhnout změnu vzhledu. Hodně se používají např. vlastnosti display a visible, kterými můžeme skrýt objekt.
Závěr
V tomto článku jsem se pokusil stručně nastínit hlavní pravidla psaní HTML dokumentu. Nesnažil jsem se popisovat jednotlivé HTML tagy, neboť na internetu najdete mnoho zdrojů s dobrým popisem. Já bych doporučil:
- české stránky Jak psát web
- anglické stránky W3Schools
Komentáře
[strong][/strong]je to dobra vec ale hlava mi to nebere
,jinak bych to chtel umet
perfektní přehled, akorát u speciálních elementů je chyba, konkrétně u elementu abbr: v závorce je, že se pojí s elementem title, ale není to element ale atribut..