1 / 31

Struktura WWW stránky

14. října 2012. VY_32_INOVACE_160312_STRUKTURA_WWW_STRANKY_DUM. Struktura WWW stránky. WWW dokument v základním tvaru. < html > < head > hlavička stránky < title >Titulek stránky</ title > </ head > <body> obsah stránky </body> </ html >. Webová stránka v jazyce HTML 4.01.

linore
Download Presentation

Struktura WWW stránky

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 14. října 2012 VY_32_INOVACE_160312_STRUKTURA_WWW_STRANKY_DUM Struktura WWW stránky

  2. WWW dokument v základním tvaru <html> <head> hlavička stránky <title>Titulek stránky</title> </head> <body> obsah stránky </body> </html>

  3. Webová stránka v jazyce HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“ “http://www.w3.org/TR/html4/loose.dtd“> <html> <head> hlavička stránky <meta http-equiv="Content-language" content="cs" /> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>Titulek stránky</title> </head> <body> obsah stránky </body> </html>

  4. Webová stránka v jazyce HTML5 <!DOCTYPE html> <htmllang="en"> <head> <title>HTML 5</title> </head> <body> <h1>Kdo vyvíjí HTML5?</h1> <p>Na vývoji se podílejí tři skupiny – Web Hypertext Application Technology WorkingGroup, WorldWide Web Consortium, IETF (Internet EngineeringTaskForce).</p> </body> </html>

  5. !DOCTYPE – typ dokumentu HTML HTML 4.01 rozlišuje tři základní definice: • striktní, • přechodová, • přechodová s rámci.

  6. Striktní specifikace HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN“ “http://www.w3.org/TR/html4/strict.dtd“> Dokument musí obsahovat pouze elementy definované uvedenou verzí HTML. Nesmí obsahovat zastaralé, nestandardní či nedoporučované prvky.

  7. Přechodová HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“ “http://www.w3.org/TR/html4/loose.dtd“> Dokument může obsahovat i elementy ze starších verzí HTML.

  8. Přechodová s rámci HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN“ “http://www.w3.org/TR/html4/frameset.dtd“> Totožná s předchozí, ale navíc definuje rámce. Měla by být uvedena tehdy, když jsou namísto tagů body tagyframeset.

  9. !DOCTYPE – typ dokumentu XHTML Striktní <!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Strict//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> Přechodová <!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> Přechodová s rámci <!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Frameset//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

  10. !DOCTYPE pro HTML5 Nová verze jazyka HTML zavádí mnohem jednodušší zápis – stačí uvést pouze: <!DOCTYPE html>

  11. 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: <?xmlversion="1.0" encoding="iso-8859-2"?> <?xmlversion="1.0" encoding="windows-1250"?> <?xmlversion="1.0" encoding="UTF-8"?>

  12. Tag <html>, </html> Uvozuje a zakončuje celou stránku. Párová značka <html> na počátku a </html> na konci dokumentu. <html> <head> hlavička stránky <title>Titulek stránky</title> </head> <body> obsah stránky </body> </html>

  13. Tag <head>, </head> 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ší. <!DOCTYPE HTML> <HTML> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http://www.example.com/"> <TITLE>Anapplicationwith a longhead</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Longheadedapplication"> </HEAD> </BODY> </HTML>

  14. Tag < link> Propojuje HTML stránku s jiným souborem. Používá se zejména pro načtení externího stylu CSS: <link rel="stylesheet" type="text/css" href="styl.css" />

  15. Tag <meta> 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í: <meta http-equiv="Content-language" content="cs" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  16. Příklady kódování pro češtinu • ISO-8859-2 (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

  17. Znovunahrání a přesměrování Automatická aktualizace po 10 vteřinách. <meta http-equiv="Refresh" content="10" /> Přesměrování po 10 vteřinách na Google. <meta http-equiv="Refresh" content="10;URL=http://www.google.com" />

  18. Informace pro vyhledávače meta name="keywords" content="meta,tag,kódování,lang,cs,čeština,description,http-equiv" /><meta name="description" content="Meta tagy, zajištění češtiny, popis stránky, klíčová slova" /><meta name="robots" content="all,follow" />

  19. Informace o stránce <meta name="author" content=“Karel Frodo" /><meta name="generator" content="Notepad" /> 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).

  20. Ukončení platnosti stránky <meta http-equiv="expires" content="Mon 17 Nov 2010 11:29:59" /> Pokud je stránka prošlá, prohlížeč by měl zakázat nové nahrávání z cache paměti.

  21. Tag <skript>,</skript> Připojí ke stránce externí script. Obvykle JavaScript. <scriptlanguage="JavaScript" type="text/javascript>

  22. Tag <body>, </body> 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,…

  23. 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: <h1>Nadpis první úrovně </h1> … <h2> Nadpis druhé úrovně</h2> … <h3> Nadpis třetí úrovně</h3> … <h2> Nadpis druhé úrovně</h3> Pokud chceme vytvořit odstavec, používá se párová značka <p>, </p>. Nepárová značka <br /> umožňuje ukončení řádku.

  24. Zápis poznámek Jsou situace, kdy je nutné okomentovat kód stránky. Poznámky se nezpracovávají. Příklad poznámky: <!—To je poznámka v (X)HTML -->

  25. 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“

  26. 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 – <p> a </p>. • Uzavíráme i nepárové značky – <br />.

  27. 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.

  28. 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.

  29. Své znalosti si zopakujte v zde. • Kvíz 1 • Kvíz 2

  30. Použité zdroje • HTML5 Editionfor Web Developers. BEN SCHWARZ. http://developers.whatwg.org/ [online]. 2012-02-03 [cit. 2012-10-14]. Dostupné z: http://developers.whatwg.org/ • HTML5. W3C. http://www.w3c.com [online]. 2011-05-25 [cit. 2012-10-14]. Dostupné z: http://www.w3.org/TR/html5/the-xhtml-syntax.html • Cascading Style Sheets (CSS) Snapshot 2010. . W3c [online]. 2011-05-12 [cit. 2012-10-14]. Dostupné z: http://www.w3.org/TR/CSS/

  31. Zdrojové kódy pro ukázky byly převzaty: • Tatra 11. Tatra klub [online]. 2012-08-06 [cit. 2012-10-14]. Dostupné z: http://www.tatra-club.com/model/tatra-11-23 • Specifikace XML pro internetové obchody. Zboží.cz [online]. 2012 [cit. 2012-10-14]. Dostupné z: http://napoveda.seznam.cz/cz/specifikace-xml.html

More Related