1/10 Hlavička dokumentu mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka <title>vzorová stránka</title> <link> - definuje vztah k jiným XHTML dokumentům, typicky připojení CSS stylů, příp. jejich alternativní verze <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <link rel="alternate" type="application/rss+xml" href="rss.xml" /> <meta> - další informace o dokumentu autor, klíčová slova atd. <script> - zařazení skriptů do XHTML <script type="text/javascript">tělo skriptu</script> <style> - definice stylů pro vzhled dokumentu <style type="text/css" media="print"> </style>
Metadata o stránkách nejsou povinná užitečná pro vyhledávače, prohlížeče a webové služby základní atributy name (pro vyhledávače) nebo http-equiv (pro prohlížeče) <meta name="author" content="stanislav Machalík" /> <meta name="robots" content="index,follow" /> <meta name="keywords" content="html,css,test" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="refresh" content="5;url=http://..." /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta charset="utf-8">
3/10 Tělo dokumentu mezi <body> a </body> obsahuje samotný obsah dokumentu blokové x řádkové značky blokové značky oddělují část dokumentu <h1> <h6>, <p>, <table>, <form>, <div> atd. řádkové značky práce s textem bez oddělení od okolního obsahu <b>, <i>, <u>, <sub>, <sup> komentáře <!-- toto je komentář --> skripty se již do komentáře neumisťují (pokud prohlížeč tag nezná, ignoruje jej) značka <body> má atributy vztahující se k celému dokumentu pozadí, barva odkazů v HTML5 řešeno pomocí kaskádových stylů
4/10 Základní blokové značky vytváří v dokumentu samostatný blok, oddělený prázdným řádkem nadpisy <h1> až <h6> odstavec <p> odstavec <div> - na rozdíl od <p> nevkládá prázdný řádek citace <blockquote> zachování formátování <pre> vodorovná čára <hr /> Příklad: <h1>nadpis velikosti 36pt</h1> <p>odstavec</p> <hr />
5/10 Základní řádkové značky (1/2) především určení velikosti a typu písma formátovací (fyzické) x sémantické (logické) značky formátovací značky nastavení formátu písma (řez písma, indexy) nezávislé na prohlížeči sémantické značky zdůraznění obsahové části textu různá interpretace prohlížeči Formátovací značky: <big> velké písmo <b> tučné písmo <i> kurzíva <u> podtržené písmo <small> malé písmo <s> přeškrtnuté písmo <sup> horní index <sub> dolní index <tt> psací stroj
6/10 Základní řádkové značky (2/2) Sémantické značky: <cite> <code> <em> <strong> <span> citace, prohlížeče interpretují kurzívou neproporcionální písmo důraz, většinou interpretace kurzívou tučné písmo obdoba <div>, pro změnu formátování Speciální znaky znak zápis v XHTML < < > > " " & & mezera µ µ
7/10 neuspořádané seznamy <ul> <li>první položka</li> <li>druhá položka</li> <li>atd.</li> </ul> Seznamy položek (1/3) Značka <ul> má atribut "type" typ odrážky disc, square, circle <ul type="square"> <li>první položka</li> <li>druhá položka</li> <li>atd.</li> </ul> transitional
8/10 uspořádané seznamy <ol> <li>první položka</li> <li>druhá položka</li> <li>atd.</li> </ol> Seznamy položek (2/3) Značka <ol> má atribut "type" typ odrážky: 1 normální číslování A velká písmena a malá písmena I velké římské číslice i malé římské číslice Atribut "type" lze použít i pro <li> - vyšší priorita. Pouze pro variantu transitional!
9/10 Seznamy položek (3/3) vnořené seznamy <ul type="circle"> <li>první položka</li> <li>druhá položka <ol type="a"> <li>třetí položka</li> <li>čtvrtá položka</li> </ol> </li> <li>pátá položka</li> </ul> Pozor na dodržování pravidel XHTML!!!
10/10 nepárová značka <img /> formáty gif x jpg Obrázky <img src="umístění" alt="popis" title="popis" /> povinné atributy src, alt další atributy obrázků se nastavují pomocí CSS Obrázkové mapy <img src="..." alt="mapa" usemap="#o_mapa" /> <map id="o_mapa"> <area shape="rect" coords="0,0,100,100" href="adresa" alt="popis" /> <area shape="circle" coords="150,150,100" href="adresa" alt="popis" /> </map>