HTML - Úvod
Zpracoval: Petr Lasák
Je značkovací jazyk, popisující obsah HTML stránek ◦ Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX
Nejedná se o programovací ale značkovací jazyk ◦ Dynamičnost dodávají jiné jazyky – Javascript, PHP
Jedná se o množinu značek, kterými lze prokládat text Slouží k popisu webových stránek
Soubor s příponou .htm nebo .html ◦ Je to jedno, která – první je jenom z historického hlediska ◦ Pro psaní čistého HTML nepotřebujeme ani server, ani browser ani nějaký HTML Editor
Zvláštní postavení index.html nebo index.php ◦ Pokud máme začleněn kód v stránce, tak je nutné zde mít index První se hledá .php až pak .html
Lze nastavit i jiné řešení
Pro označení textu slouží HTML značky ◦ Jsou uzavřeny do tagů - < a > ◦ Párové tagy
Otevírací a zavírací (mají před jménem znak /)
◦ Nepárové tagy
Mají před koncovou > znaménko /
HTML dokument s tagy = HTML stránka ◦ Je zobrazena v Prohlížeči
Ten rozumí jazyku HTML a provede příslušnou úpravu – tagy nejsou zobrazeny, význam ANO! Mozilla, Firefox, Opera, Chrome, Internet Explorer
HTML elementy – vše co je zavřeno v tagu ◦ Od začínajícího tagu po uzavírací tag
Obsah elementu – vše bez ohraničujících tagů ◦ Některé elementy mají prázdný obsah – nepárové
Elementy se mohou do sebe vnořovat ◦ Vnoření musí být dobře uspořádané ◦ Proto je skoro nutné psát uzavírací tagy!!!
Je dobré psát malými písmeny názvy tagů
Skoro všechny elementy mohou mít atributy ◦ Jsou příslušný danému elementu – mají omezenou působnost na daný element
Dodávají doplňující informace danému atributu ◦ Jsou zapsány vždy v otevíracím tagu ◦ Mají tvar jmeno=“hodnota“ Vždy jméno malým písmenem a hodnotu uzavřít do uvozovek
Různé vývojové verze dovolují různé možnosti ◦ Aby prohlížeč věděl, co jak a co má zobrazit je potřeba určit standard
Strict, Transitional, Frameset ◦ Od nejpřísnějšího až po nejméně přísný ◦ Strict – nedovolí stylování textu Oddělení obsahu a vzhledu
◦ Transitional – dovolí míchání stylů a textu Existuje kvůli zpětné kompatibilitě
◦ Frameset – kvůli povolení rámců
HTML vs XHTML ◦ XHTML je přísnější na definici a dobré uzavření ◦ Obsahuje i atribut značky html, který určuje jakou verzi použít
Oba standardy jsou ve verzi Strict, Transitional a Frameset XHTML 1.1 navíc dokáže ještě loadovat moduly
◦ Před prvním tagem ve stránce ◦ http://www.w3schools.com/tags/tag_doctype.asp
a ◦ Vymezují rozsah HTML stránky Atribut xmlns="http://www.w3.org/1999/xhtml"
◦ Ta je rozdělena vnitřně na hlavičku a tělo
a ◦ Vymezují hlavičku ◦ Obsahuje především popis obsahu stránek Klíčové slova, kódování stránky, refresh interval, styly…
a ◦ Vymezují tělo stránky ◦ Samotný obsah stránek Text, obrázky, odkazy, javascripty
a ◦ Titulek dané stránky
<meta /> ◦ Určuje meta informace o stránce ◦ http-equiv – typ meta informace Spolu s dalším upřesněním hodnoty
<style> a ◦ Styl definovaný přímo v hlavičce
<script> a ◦ Definice JavaScriptu přímo v hlavičce
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> ◦ Určuje typ obsahu a kódování stránky
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> ◦ Určuje popisek stránek, které indexují některé vyhledávače
<meta name="keywords" content="HTML, CSS, XML" /> ◦ Určuje klíčové slova, podle kterých indexují některé vyhledávače
<meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT"> ◦ Nastaví hodnotu, kdy vyprší platnost stránek a lze jí uchovat v cache
Nebo jiné – nastavení cachování nebo reloadu stránky
a
◦ Slouží na označení logického celku obsahu ◦ Dělí obsah na bloky
a
◦ Slouží na označení odstavce ◦ Mohou být vnořeny do div tagu, né naopak
<span> a ◦ Slouží k označení části textu v odstavci ◦ Mohou být vnořeny do p tagu, né naopak
Slouží ke strukturování textů Vyhledávače podle nadpisů indexují obsah Mají hierarchii a jsou všechny párové ◦ ◦ ◦ ◦
a a a a
Čáry také oddělují text -
Jelikož některé znaky mají v HTML speciální význam, musí se nahradit Mají tvar &hodnota;
◦ http://www.w3schools.com/HTML/html_entities.as p
Hlavní
◦ < > & ◦ Jelikož & má zvláštní význam v URL tak je potřeba ho nahradit v URL
- pevná mezera
◦ HTML totiž ignorují vícenásobné bílé znaky
Podobně jako <span> existují i párové tagy, které vymezený kus textu i formátují
- použije telegrafický formát ◦ Proporcionální písmo
- italica, - bold <sub> - dolní index <sup> - horní index <pre> - zobrazí přesně tak, jak je napsáno v zdrojové stránce - zvětšení písma <small> - zmenšení http://www.w3schools.com/html/html_forma tting.asp
K vkládání obrázku do stránky je tag ![]()
◦ Nejdůležitější atribut je src – zdroj obrázku Povinný atribut Zdroj může být adresa na serveru nebo samotný obrázek
◦ Další povinné atributy: alt – alternativní text, pokud jsou vypnuté obrázky
◦ Další zajímavé atributy: title – text zobrazení po najeti myší border – rámeček okolo obrázku width, height – rozměry obrázku
Jsou vázány na nějaký obsahu ◦ Obalují nějaký viditelný kus stránky pomocí párového tagu
Nejsou povinné atributy, ale důležitý atribut je href – cíl odkazu ◦ URL – buď absolutní nebo relativní vůči serveru ◦ Sekce na dané stránce Lze kombinovat s URL
Definování sekce ◦ Pomocí ◦ Odkaz pomocí
Přehledné rozdělení tagů s popisem ◦ http://www.jakpsatweb.cz
Tutoriál HTML, CSS a W3C krok po kroku ◦ http://www.w3schools.com/
Popis standardů ◦ http://www.w3.org/TR/
Validace stránky, zda odpovídá zvolenému DOCTYPE ◦ http://validator.w3.org/
