(X)HTML-TAGY Mgr. Petr Slívko VOŠ a SŠT Česká Třebová
<br /> Tagy Popis Značka tagu začíná levou ostrou závorkou. Za ní následuje jméno tagu, před kterým nesmí být mezera. Mohou následovat atributy. Před každým musí být alespoň jedna mezera. Za atributem se píše rovnítko a hodnota v uvozovkách. Vše bez mezer. Atributů může být několik. Značka končí pravou ostrou závorkou. Následuje vlastní text, který se zobrazí Element končí ukončovací značkou s lomítkem a bez atributů < <font <font color <font color="blue" Vývoj příkladu <font color="blue" size="6" <font color="blue" size="6"> <font color="blue" size="6">modrý velký text <font color="blue" size="6">modrý velký text</font> 2
Vnořování tagů Obsahem tagu může být cokoliv, klidně i další značky, které text dále ovlivní. Příklad: Normální text <i>kurzíva, <b>tučná kurzíva</b></i> a opět normální text. 3
Zákaz křížení Tag nesmí mít koncovou značku před tím, než ji budou mít všechny vnořené tagy. Příklad: Dobře: <i>kurzíva, <b>tučná kurzíva</b></i>. Špatně: <i>kurzíva, <b>tučná kurzíva</i></b>. 4
Velikost znaků V jazyce HTML nezáleží na velikosti znaků. (Anglicky: non-case-sensitive.) Příklad: <tag> je totéž, co <TAG> 5
Mezery v kódu pravidla x mezer jsou jako jedna mezera konec řádku je chápán jako mezera tabulátor je chápán jako mezera tj., jakkoli velký prázdný prostor v kódu na stránce se zobrazí jako jedna mezera pevná mezera : 6
Uvozovky u atributů <font color=blue blue> je totéž co <font color=" ="blue"> ">, uvozovky nejsou povinné (u HTML). Ale pokud hodnota atributu obsahuje mezeru, tak tam uvozovky být musejí. Invalidní příklad: <font face=times New Roman>!! Prohlížeč by to bez uvozovek chápal jako více atributů! Doporučení = uvozovky všude! 7
XHTML Všechny tagy i atributy musí být malými písmeny, XHTML je casesensitive. Všechny hodnoty atributů musí být v XHTML v uvozovkách nebo apostrofech. V XHTML všechny atributy musí mít hodnotu. U pravdivostních atributů se jako hodnota, přiřazuje jméno atributu například u vypínačů v HTML stačí pro vyznačení zapnuté polohy uvést atribut checked, zatímco v XHTML musí být uveden ve tvaru checked= checked. Všechny XHTML tagy musí být párové. Při použití prázdného tagu se musí tag ukončit lomítkem, např. <img /> Toto je správně v HTML: <br> A toto je správně v XHTML: <br /> Striktní XHTML neobsahuje žádné atributy sloužící k formátování. Oproti HTML jsou z XHTML vypuštěny formátovací tagy. (např. font, b, i). 8
Rozdíly XHTML oproti HTML Některé věci platily už v HTML, XHTML je striktně vyžaduje: Všechny atributy mají hodnoty v uvozovkách. Zákaz křížení tagů. Jaké jsou rozdíly XHTML oproti HTML: Tagy a atributy jsou malými písmeny. Nepárové tagy končí lomítkem (před zavíracím lomítkem má být mezera). Párové tagy jsou párové povinně (např. <p> odstavec, <td> buňka tabulky). Všechny atributy musejí mít hodnotu. Interní javascript a styly se zapisují jiným způsobem. Dokument má mít XML prolog. Dokument požaduje správný doctype. 9
Titulek <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <title>titulek stránky</title> </head> Kde se titulek zobrazí: v titulkovém pruhu prohlížeče (modrý úplně nahoře) většinou v textu oblíbené položky v historii prohlížeče v liště Windows jako název otevřeného okna prohlížeče při přepínání oken přes Alt+Tab ve výsledku vyhledávání jako odkaz HTML pravidla pro titulek uvnitř titulku se nesmějí vyskytovat žádné HTML tagy doporučení = v titulku nezalamovat řádky deklaraci češtiny meta tagem umísťovat ještě před titulek 10
Meta tagy Meta tagy obsahují meta data informace o stránce. Nachází se v hlavičce (head) HTML dokumentu. Meta charset (kódování češtiny) Nejdůležitějším a jediný opravdu nezbytný meta tag. Kódování češtiny je nutné uvést ještě před tagem title. <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> Znakové sady pro češtinu: windows-1250 iso-8859-2 utf-8 11
Meta description (popis stránky) Jeho obsah se objeví jako popisek odkazu ve vyhledávačích. Slova obsažená v tomto meta tagu mívají také pro vyhledávače svoji váhu. <meta name="description" content="meta tagy charset, description a keywords a jejich použití" /> 12
Meta robots (pro roboty vyhledávače) Informace o tom, zda a jakým způsobem mají roboti indexovat stránku. Výchozí nastavení, nemusí se zadávat: <meta name="robots" content="index,follow" /> Znamená to indexovat (index) stránku a následovat (follow) odkazy, které ze stránky vedou. Další možnosti: noindex nofollow + jejich kombinace 13