Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/ Struktura WWW stránky října 2012VY_32_INOVACE_160312_STRUKTURA_WWW_STRANKY_DUM

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás WWW dokument v základním tvaru hlavička stránky Titulek stránky obsah stránky 2

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Webová stránka v jazyce HTML 4.01 hlavička stránky Titulek stránky obsah stránky 3

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Webová stránka v jazyce HTML5 HTML 5 Kdo vyvíjí HTML5? Na vývoji se podílejí tři skupiny – Web Hypertext Application Technology Working Group, World Wide Web Consortium, IETF (Internet EngineeringTaskForce). 4

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás !DOCTYPE – typ dokumentu HTML HTML 4.01 rozlišuje tři základní definice: striktní, přechodová, přechodová s rámci. 5

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Striktní specifikace HTML 4.01 Dokument musí obsahovat pouze elementy definované uvedenou verzí HTML. Nesmí obsahovat zastaralé, nestandardní či nedoporučované prvky. 6

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Přechodová HTML 4.01 Dokument může obsahovat i elementy ze starších verzí HTML. 7

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Přechodová s rámci HTML 4.01 Totožná s předchozí, ale navíc definuje rámce. Měla by být uvedena tehdy, když jsou namísto tagů body tagy frameset. 8

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás !DOCTYPE – typ dokumentu XHTML Striktní Přechodová Přechodová s rámci 9

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás !DOCTYPE pro HTML5 Nová verze jazyka HTML zavádí mnohem jednodušší zápis – stačí uvést pouze: 10

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás XML prolog Prolog by se měl objevovat u XML(XHTML) dokumentů jako úplně první řádek, kterým stránka začíná. V žádném případě nenahrazuje metatagy definující jazykové prostředí. Řada autorů jej považuje za zbytečný. Příklady: 11

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Tag, Uvozuje a zakončuje celou stránku. Párová značka na počátku a na konci dokumentu. hlavička stránky Titulek stránky obsah stránky 12

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Tag, Tag, Vymezuje hlavičku dokumentu, která obsahuje informace o stránce. Může obsahovat další značky: title, link, meta, style, script a některé další. An application with a long head 13

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Tag Tag Propojuje HTML stránku s jiným souborem. Používá se zejména pro načtení externího stylu CSS: 14

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Tag Tag Informace o dokumentu, metadata. (Metadata – informace o stránce, které nemění vzhled stránky, pouze upřesňují obecné parametry, např. jazyk, klíčová slova pro vyhledávače, jméno autora.) Jazyk dokumentu, kódování Pomocí značky meta zajistíte správné zobrazení českých znaků, nastavíte s její pomocí jazyk dokumentu a kódování. Typické nastavení: 15

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklady kódování pro češtinu ISO (ISO-Latin 2) – mezinárodní kódovací norma pro středoevropské jazyky Windows 1250(CP1250) – kódování firmy Microsoft pro středoevropské jazyky UTF-8 – standardní mezinárodní kódování (unicode) obsahující všechny dnes používané znaky MAC (Macintosh) – kódování používané na počítačích Apple Macintosh CP852 (PC Latin 2) starší kódování z DOSu 16

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Znovunahrání a přesměrování Automatická aktualizace po 10 vteřinách. Přesměrování po 10 vteřinách na Google. 17

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Informace pro vyhledávače meta name="keywords" content="meta,tag,kódování,lang, cs,čeština,description,http- equiv" /> 18

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Informace o stránce Můžete zapsat jakékoli informace, které stránku nijak neovlivní. Z obsahu řádků vyplývá jméno autora a program, ve kterém byla stránka vytvořena (Notepad). 19

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Ukončení platnosti stránky Pokud je stránka prošlá, prohlížeč by měl zakázat nové nahrávání z cache paměti. 20

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Tag, Připojí ke stránce externí script. Obvykle JavaScript. 21

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Tag, Označuje tělo stránky, do něj se zapisuje veškerý obsah HTML stránky. Obsahuje další značky, které strukturují informace – odstavce, nadpisy, hypertextové odkazy, řádkové, blokové elementy,… 22

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Příklady základních značek v těle stránky Strukturu osnovy dokumentu vytváříme prostřednictvím různých úrovní nadpisů (h1 až h6) obsažených ve stránce. Například: Nadpis první úrovně … Nadpis druhé úrovně … Nadpis třetí úrovně … Nadpis druhé úrovně Pokud chceme vytvořit odstavec, používá se párová značka,. Nepárová značka umožňuje ukončení řádku. 23

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zápis poznámek Jsou situace, kdy je nutné okomentovat kód stránky. Poznámky se nezpracovávají. Příklad poznámky: 24

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Způsob zápisu značek HTML Výhodou specifikace HTML je poměrná volnost při zápisu značek. Ta ale není úplně přípustná při použití specifikace XHTML. Následující příklady kódů v poslední specifikaci HTML5 jsou zcela platné: class=“bl5“ class=bl5 CLASS=“bl5“ 25

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Způsob zápisu značek XHTML5 HTML5 rovněž vedlo k vytvoření XHTML5 – nástroje pro práci S XML mohou generovat platný kód HTML5. Syntax XHTML je mnohem přísnější. Ve výše uvedených příkladech na předešlém snímku by byla přípustná pouze první varianta zápisu třídy. Pro tvůrce webového obsahu je vhodné dodržovat základní zásady použití značek: Tagy píšeme malými písmeny – s ohledem na normu XHTML. Dodržujeme „párovost“ v zápise značek – a. Uzavíráme i nepárové značky –. 26

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Nové elementy HTML5 – sekce HTML5 definuje řadu nových elementů. Jedním z typů obsahu jsou sekce. Použití sekcí zjednodušuje návrh struktury HTML stránky a omezuje používání identifikátorů div. header Obsah záhlaví stránky nebo sekce stránky. footer Obsah zápatí stránky nebo sekce stránky. section Sekce webové stránky aside Související obsah anebo citace. nav Navigace. 27

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Kaskádové styly Kaskádový styl (v anglickém originále Cascading Style Sheets zkratka CSS) označuje jazyk pro popis způsobu zobrazení stránek napsaných v HTML, XHTML nebo XML. Poslední verzí je CSS3. Vlastnosti CSS: Oddělení obsahu stránky a nastavení formátu vzhledu. Rozsáhlejší možnosti formátování ve srovnání s použitím „čistých“ značek HTML. CSS se dají ukládat do mezipaměti – zrychlí se načítání webových stránek. Jednodušší údržba webové prezentace. Je možné vytvořit styly pro různé výstupy – tiskárna, PDA, různé verze prohlížečů… CSS vlastnosti se dají měnit pomocí JavaScriptu. Kaskádové styly se dají použít na formátování HTML, XHTML a XML dokumentů. Nevýhodou je problematická podpora v některých prohlížečích. 28

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 1 Kvíz 2 29

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Použité zdroje HTML5 Edition for Web Developers. BEN SCHWARZ. [online] [cit ]. Dostupné z: HTML5. W3C. [online] [cit ]. Dostupné z: syntax.html Cascading Style Sheets (CSS) Snapshot W3c [online] [cit ]. Dostupné z: 30

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdrojové kódy pro ukázky byly převzaty: Tatra 11. Tatra klub [online] [cit ]. Dostupné z: club.com/model/tatra Specifikace XML pro internetové obchody. Zboží.cz [online] [cit ]. Dostupné z: xml.html 31