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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Před prvním tagem ve stránce http://www.w3schools.com/tags/tag_doctype.asp
<html> a </html> 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 <head> a </head> Vymezují hlavičku Obsahuje především popis obsahu stránek Klíčové slova, kódování stránky, refresh interval, styly <body> a </body> Vymezují tělo stránky Samotný obsah stránek Text, obrázky, odkazy, javascripty
<title> a </title> 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 </style> Styl definovaný přímo v hlavičce <script> a </script> 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
<div> a </div> Slouží na označení logického celku obsahu Dělí obsah na bloky <p> a </p> Slouží na označení odstavce Mohou být vnořeny do div tagu, né naopak <span> a </span> 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é <h1> a </h1> <h2> a </h2> <h3> a </h3> <h4> a </h4> Čáry také oddělují text - <hr />
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í <tt> - použije telegrafický formát Proporcionální písmo <i> - italica, <b> - bold <sub> - dolní index <sup> - horní index <pre> - zobrazí přesně tak, jak je napsáno v zdrojové stránce <big> - 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 <img /> 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 <a> 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í <a name= jmeno > Odkaz pomocí <a href= #jmeno >
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/