Návrh a tvorba WWW stránek 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 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 dokumenntu <style type="text/css" media="print"> </style>
Návrh a tvorba WWW stránek 2/10 Metadata o stránkách nejsou povinná, užitečné pro vyhledávače e a prohlížeče základní atributy name (pro vyhledávače) e) a http-equiv (pro prohlížeče) e) <meta name=" ="author" content="stanislav Machalík" /> <meta name=" ="robots" content="index, ="index,follow" /> <meta name=" ="keywords" content="xhtml, CSS, test" /> <meta http-equiv=" ="Content-Type" content="text/ ="text/html; charset=utf-8" /> <meta http-equiv equiv=" ="Pragma Pragma" content="no ="no-cache cache" /> <meta http-equiv=" ="refresh" content="5; ="5;url=http://..." />
Návrh a tvorba WWW stránek 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 XHTML řešeno pomocí kaskádových stylů
Návrh a tvorba WWW stránek 3/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 />
Návrh a tvorba WWW stránek 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
Návrh a tvorba WWW stránek 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 µ µ
Návrh a tvorba WWW stránek 7/10 neuspořádané seznamy Seznamy položek (1/3) <ul> <li>první položka</li> <li>druhá položka</li> <li>atd. atd.</li> </ul> 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. atd.</li> </ul>
Návrh a tvorba WWW stránek 8/10 uspořádané seznamy Seznamy položek (2/3) <ol> <li>první položka</li> <li>druhá položka</li> <li>atd. atd.</li> </ol> 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.
Návrh a tvorba WWW stránek 9/10 vnořené seznamy Seznamy položek (3/3) <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!!!
Návrh a tvorba WWW stránek 10/10 nepárová značka <img /> formáty gif x jpg Obrázky <img src="umístění" alt="popis 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>