section DOCTYPE html h 1rove 1h 1 html

  • Slides: 31
Download presentation
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> 14. října 2012 <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> VY_32_INOVACE_160312_STRUKTURA_WWW_STRANKY_DUM Struktura WWW stránky 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/34. 0809. 1

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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> 2

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Webová stránka v jazyce HTML 4. 01 <!DOCTYPE HTML PUBLIC “-//W 3 C//DTD HTML 4. 01 Transitional//EN“ “http: //www. w 3. org/TR/html 4/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> 3

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Webová stránka v jazyce HTML 5 <!DOCTYPE html> <html lang="en"> <head> <title>HTML 5</title> </head> <body> <h 1>Kdo vyvíjí HTML 5? </h 1> <p>Na vývoji se podílejí tři skupiny – Web Hypertext Application Technology Working Group, World Wide Web Consortium, IETF (Internet Engineering. Task. Force). </p> </body> </html> 4

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> !DOCTYPE – typ dokumentu HTML 4. 01 rozlišuje tři základní definice: • striktní, • přechodová s rámci. 5

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Striktní specifikace HTML 4. 01 <!DOCTYPE HTML PUBLIC “//W 3 C//DTD HTML 4. 01//EN“ “http: //www. w 3. org/TR/html 4/stric t. dtd“> Dokument musí obsahovat pouze elementy definované uvedenou verzí HTML. Nesmí obsahovat zastaralé, nestandardní či nedoporučované prvky. 6

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Přechodová HTML 4. 01 <!DOCTYPE HTML PUBLIC “//W 3 C//DTD HTML 4. 01 Transitional//EN“ “http: //www. w 3. org/TR/html 4/loose. dtd“> Dokument může obsahovat i elementy ze starších verzí HTML. 7

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Přechodová s rámci HTML 4. 01 <!DOCTYPE HTML PUBLIC “//W 3 C//DTD HTML 4. 01 Frameset//EN“ “http: //www. w 3. org/TR/html 4/frame set. 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 tagy frameset. 8

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> !DOCTYPE – typ dokumentu XHTML Striktní <!DOCTYPE html PUBLIC“-//W 3 C//DTD XHTML 1. 0 Strict//EN“ “http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 strict. dtd“> Přechodová <!DOCTYPE html PUBLIC“-//W 3 C//DTD XHTML 1. 0 Transitional//EN“ “http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd“> Přechodová s rámci <!DOCTYPE html PUBLIC“-//W 3 C//DTD XHTML 1. 0 Frameset//EN“ “http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 frameset. dtd“> 9

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> !DOCTYPE pro HTML 5 Nová verze jazyka HTML zavádí mnohem jednodušší zápis – stačí uvést pouze: <!DOCTYPE html> 10

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> XML prolog <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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: <? xml version="1. 0" encoding="iso-8859 -2"? > <? xml version="1. 0" encoding="windows 1250"? > <? xml version="1. 0" encoding="UTF-8"? > 11

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Tag <html>, </html> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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> 12

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Tag <head>, </head> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <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> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http: //www. example. com/"> <TITLE>An application with a long head</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="Long headed application"> </HEAD> </BODY> </HTML> 13

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Tag < link> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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" /> 14

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Tag <meta> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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" /> 15

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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(CP 1250) – 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 • CP 852 (PC Latin 2) starší kódování z DOSu 16

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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" /> 17

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Informace pro vyhledávače meta name="keywords" content="meta, tag, kódování, lang, c s, č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" /> 18

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Informace o stránce <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> <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). 19

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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. 20

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Tag <skript>, </skript> Připojí ke stránce externí script. Obvykle Java. Script. <script language="Java. Script" type="text/javascript> 21

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Tag <body>, </body> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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ů (h 1 až h 6) obsažených ve stránce. Například: <h 1>Nadpis první úrovně </h 1> … <h 2> Nadpis druhé úrovně</h 2> … <h 3> Nadpis třetí úrovně</h 3> … <h 2> Nadpis druhé úrovně</h 3> Pokud chceme vytvořit odstavec, používá se párová značka <p>, </p>. Nepárová značka umožňuje ukončení řádku. 23

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Zápis poznámek <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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 --> 24

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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 HTML 5 jsou zcela platné: class=“bl 5“ class=bl 5 CLASS=“bl 5“ 25

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Způsob zápisu značek XHTML 5 rovněž vedlo k vytvoření XHTML 5 – nástroje pro práci S XML mohou generovat platný kód HTML 5. 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 />. 26

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Nové elementy HTML 5 – sekce HTML 5 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Kaskádové styly <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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 CSS 3. 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í Java. Scriptu. • 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> • Své znalosti si zopakujte v zde. • Kvíz 1 • Kvíz 2 29

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> Použité zdroje <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> • HTML 5 Edition for Web Developers. BEN SCHWARZ. http: //developers. whatwg. org/ [online]. 2012 -02 -03 [cit. 2012 -10 -14]. Dostupné z: http: //developers. whatwg. org/ • HTML 5. W 3 C. http: //www. w 3 c. com [online]. 2011 -05 -25 [cit. 2012 -10 -14]. Dostupné z: http: //www. w 3. org/TR/html 5/the-xhtmlsyntax. html • Cascading Style Sheets (CSS) Snapshot 2010. . W 3 c [online]. 2011 -05 -12 [cit. 2012 -10 -14]. Dostupné z: http: //www. w 3. org/TR/CSS/ 30

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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. tatraclub. 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/specifikacexml. html 31