Jazyk XHTML

1. Jazyk XHTML základní pojmy

2. Zdroje informací na webu • www.jakpsatweb.cz • www.jaknaweb.com • www.kosek.cz • www.webtip.cz • www.dobryweb.cz • www.interval.cz

3. Odkud „stáhnout“ vhodný SW? • www.stahuj.cz • www.slunecnice.cz • www.studna.cz

4. Architektura klient - server • WWW-klient (prohlížeč, browser) je program , který komunikuje s uživatelem a na základě jeho pokynů se obrací na jednotlivé www-servery, získává od nich data a zobrazuje je. (MS Internet Explorer, Mozilla, Opera, Netscape Navigator,...) • WWW-server je bezobslužný program, který přijímá a obsluhuje požadavky klientů. (Apache, MS Internet Information Server, Zope)

5. Standardy pro web HyperText Transfer Protocol (HTTP) • definuje pravidla síťové komunikace mezi klientem a serverem • je postaven na modeludotaz-odpověď: klient pošle serveru požadavek na získání dokumentu s uvedeným URL a ten na něj odpoví zasláním požadovaných informací (např. www-stránky).

6. Standardy pro web HyperText Markup Language (HTML) • je jazyk, kterým se zapisují WWW-stránky • interpretaci jazyka zajišťuje klient (prohlížeč) a na jeho vlastnostech záleží, jak bude výsledná stránka vypadat • popisuje logickou strukturu textu, nikoli jeho fyzický vzhled (tj. určíme, která část textu bude nadpis, odstavec, odkaz, seznam,...) • první definice jazyka vytvořil v roce 1991 Tim Berners-Lee

7. Standardy pro web eXtensible Hypertext Markup Language (XHTML) • vývoj jazyka HTML skončil v roce 1999 • XHTML je nástupcem HTML přizpůsobený pravidlům XML • XML je jazyk pro definici jazyků, který se prosazuje jako univerzální nástroj pro výměnu strukturovaných informací

8. Standardy pro web Cascading Style Sheets (CSS) • kaskádové styly jsou souhrnem metod pro úpravu vzhledu stránek • kaskádové styly popisují, jak mají vypadat jednotlivé (X)HTML prvky

9. Standardy pro web O rozvoj standardů pro web se stará World Wide Web Consorcium (www.w3c.org), které sdružuje akademické i komerční organizace zabývající se WWW, Internetem a souvisejícími technologiemi.

10. Nejrozšířenější prohlížeče Při návrhu webu je třeba počítat s tím, že • stejná stránka se v různých prohlížečích může zobrazit odlišně. Své stránky bychom měli přizpůsobit alespoň těmto prohlížečům: • MS Internet Explorer 6 • Firefox • Opera

11. Nejrozšířenější prohlížeče • MS Internet Explorer 5, 5.5 a 6 75 % všech www-uživatelů • Mozilla, (FireFox a další klony)20% www-uživatelů • Opera 7 a 85% www-uživatelů • Konqueror 30% www-uživatelů pracujících pod OS Linux • Safari asi 90% uživatelů Mac • Lynx starší textový prohlížeč pro Linux • Prohlížeče mobilních zařízenívelmi různá podpora HTML

12. Webhosting • pronájem diskového prostoru na serveru poskytovatele (provider).

13. Freehosting • hosting, za který provider nevyžaduje od uživatele přímou platbu (bezplatný hosting) • zpravidla jsou tyto hostingy provozovány ze zisků z reklamy, kterou poskytovatel freehostingu do stránek vkládá • seznam freehostingů naleznete na http://free.hostingy.cz

14. Softwarové nástroje Konvertory z jiných datových formátů Dnes řada programů přímo obsahuje export do (X)HTML (Word, Power Point, Zoner Context,...). Existují i samostatné konvertory. Kvalita výstupu bývá problematická. Není vhodnépoužívat aplikace, které nejsou zaměřené na tvorbu HTML kódu (např. Microsoft Word a jeho HTML export) jako standardní prostředek pro vytváření stránek (HTML kód je nekvalitní, objemný, často se zobrazuje chybně).

15. Softwarové nástroje (X)HTML editory WYSIWYG editory • WYSIWYG = What You See Is What You Get • zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a html-kód generují automaticky, žádná znalost jazyka není potřeba • WYSIWYG princip je pouze orientační- výsledný vzhled stránky závisí na klientovi • jsou přímo součástí některých WWW klientů (Netscape Composer, Mozilla), dále pak např. Dreamweaver, FrontPage

16. Softwarové nástroje (X)HTML editory strukturní editory • strukturními editory upravujeme přímo html-kód • jedná se o běžné textové editory rozšířené o funkce usnadňující zadávání html-značek • obvykle je html-kód barevně odlišen od ostatního textu • mezi tyto editory například patří HomeSite, PSPad, EasyPad, Poznámkový blok, HTML-Kit, AceHTML

17. Jazyk XHTML stručný popis značek jazyka

18. Co je to www-stránka • www-stránka je textový soubor s příponou htm nebo html • obsahuje publikovaný text doplněný o značky jazyka XHTML, které přiřazují textu určitý význam

19. Co je XHTML? XHTML je nástupce HTML založený na XML. Rozlišujeme 3 druhy XHTML: • XHTML 1.0 Strict (přísné) čistě strukturální značkování, neobsahuje žádné značky spojené s formátováním vzhledu • XHTML 1.0 Transitional (přechodové)povoluje atributy pro formátování textu a odkazů v elementu body a některé další atributy • XHTML 1.0 Frameset (s podporou rámců)používá se při použití rámců pro rozdělení okna prohlížeče na dvě nebo více částí

20. Pravidla XHTML • Před samotným dokumentem se nachází deklarace XML. <?xml version="1.0" encoding="iso-8859-2"?> • Povinná je deklarace typu dokumentu (DTD) • XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

21. Pravidla XHTML • Kořenový element html obsahuje atribut xmlns, který určuje jmenný prostor dokumentu (namespace) a jazyk, který je v dokumentu použit.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> • Element html vždy obsahuje dva elementy, head (hlavičku) a body (tělo dokumentu). Hlavička musí obsahovat element title a měla by obsahovat i metatag pro kódování (kvůli starším prohlížečům) • Všechny tagy i atributy musí být malými písmeny, XHTML je case-sensitive. • Všechny hodnoty atributů musí být v XHTML v uvozovkách.

22. Pravidla XHTML • Všechny XHTML tagy musí být párové. Při použití prázdného tagu se musí tag ukončit lomítkem, např. <img /> • Tagy se nesmí nikdy křížit. • Striktní XHTML neobsahuje žádné atributy sloužící k formátování. Oproti HTML jsou z XHTML vypuštěny některé formátovací tagy (jako např. font,...). • Vkládané skripty na straně klienta (např. javascript) by měly být vloženy do sekce CDATA. Starší prohlížeče ale CDATA nepodporují.<script><![CDATA[ zde bude kód skriptu ]]></script> • Znak & musí být převeden na html-entitu i pokud je součástí URL.

23. Značky jazyka (X)HTML • V XHTML se používají speciální značky – tagy. • Tagy jsou tvořeny znaky „<” a „>” mezi nimiž je název tagu (<tag>). • Tagy určují, jaký má text význam (např. nadpis, tabulka, hypertextovýodkaz,...). • V XHTML jsou všechny tagy párové, to znamená, že ke každémupočátečnímu tagu musí existovat tag ukončovací, ten se liší od počátečního tím, že před názvem tagu obsahuje lomítko („/”). <tag>Text zobrazovaný na stránce.</tag> <p>Toto je odstavec </p> • Pokud použijeme tag, který neobsahuje žádný text, který by bylonutno obklopit počátečním a koncovým tagem, použijeme zápis: <tag /> <img src="obrazek.gif“ />

24. Značky jazyka (X)HTML Jeden tag může být uvnitř druhého tagu, ale tagy se nikdy nesmí křížit! • špatně <tag1>Text <tag2>zobrazovaný</tag1> na stránce.</tag2> • správně <tag1>Text <tag2>zobrazovaný</tag2> na stránce.</tag1> příklad: <p><em>Toto je tučně zvýrazněný odstavec</em></p>

25. Prvky (elementy) • Prvkem nazýváme celou sekvenci počínaje počátečním tagem a konče tagem ukončovacím • Existují tři základní druhy prvků - blokové, řádkové (inline) a nahrazované. • Podle významu, který textu přiřazují je můžeme rozdělit dále na prvky: • pro strukturování dokumentu • textové prvky • prvky pro tvorbu odkazů, tabulek a seznamů,...

26. Blokové prvky Blokové prvky jsou prvky formátují text dokumentu do logických bloků různého druhu. Po takovém prvku je text dokumentu zalomen a odřádkován. Blokovými prvky jsou: • odstavec • nadpisy • citace • předformátovaný text • seznamy • popisy termínů

27. Řádkové prvky • Řádkovými (inline) prvky jsou ty, které se nachází uvnitř textu, nedochází po nich k zalomení. • Obvykle plní funkci zvýraznění nějaké části textu. • Řádkovými prvky jsou např.: • hypertextový odkaz • prvek <span>...</span> • prvky <b>...</b>, <i>...</i>,...

28. Nahrazované prvky • tyto prvky jsou nahrazeny nějakým obsahem • pro začlenění do dokumentu jsou důležité jejich rozměry. • například vložení obrázku na stránku: <img src=“obrazek.jpg” />

29. Parametry Prvky mohou mít své parametry: • parametry přiřazují danému prvku nějaké vlastnosti • zapisují se do počátečního tagu • může jich být více, oddělují se mezerou • prvek nemusí obsahovat žádný parametr • každý parametr má svoji hodnotu • hodnota musí být zapsána v uvozovkách

30. Struktura stránky <?xml version="1.0" encoding="windows-1250"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN„ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"><head> <meta http-equiv="Content-Type" content="text/html;charset=windows-1250" /><title>Titulek stránky</title> </head><body><p>Odstavec textu.</p> </body></html>

31. Struktura stránky • <html>označuje, že se bude jednat o HTML dokument, obsahuje head a body • <head>hlavička, obsahuje title, metatagy (např. kódování), odkazy na externí dokumenty definice stylu, skripty, apod. • <title>titulek stránky, to co se objeví jako název okna • <body>tělo dokumentu, tady se bude nacházet celý obsah stránky • <p>označení odstavce

32. Bílé znaky www-klient (prohlížeč) ignoruje tzv. bílé znaky: • nadbytečné mezery • tabulátory • konce řádků

33. Bílé znaky <p> Takto zformátovaný text se v prohlížeči zobrazí úplně jinak. </p> Zobrazení v prohlížeči Zdrojový kód Takto zformátovaný text se v prohlížeči zobrazí úplně jinak.

34. Zalomení řádku přechod na nový řádek lze provést značkou<br /> Zobrazení v prohlížeči Zdrojový kód Kometa <br /> J. Nohavica <br /><br /> Viděl jsem kometu, <br /> oblohou letěla, <br /> chtěl jsem jí zazpívat, <br /> ona mi zmizela, <br /> ..... Kometa J. Nohavica Viděl jsem kometu, oblohou letěla, chtěl jsem jí zazpívat, ona mi zmizela, .....

35. Komentář • rozsáhlý zdrojový kód je někdy vhodné pro lepší přehlednost okomentovat • komentář je prohlížečem ignorován <!-- komentář --> Kometa <br /> J. Nohavica <br /> <br /> <!- - hudba i text - -> Viděl jsem kometu, <br /> oblohou letěla, <br /> chtěl jsem jí zazpívat, <br /> ona mi zmizela, <br /> ..... Kometa J. Nohavica Viděl jsem kometu, oblohou letěla, chtěl jsem jí zazpívat, ona mi zmizela, .....

36. Písmo (vizuální značky) • tyto značky určují vzhled písma <b> ..... </b> tučné písmo <i> ..... </i>kurzíva Zobrazení v prohlížeči Zdrojový kód <b>Kometa </b><br /> <i>J. Nohavica </i><br /><br /> Viděl jsem kometu, <br /> oblohou letěla, <br /> chtěl jsem jí zazpívat, <br /> ona mi zmizela, <br /> ..... Kometa J. Nohavica Viděl jsem kometu, oblohou letěla, chtěl jsem jí zazpívat, ona mi zmizela, .....

37. Písmo (tématické značky) • doporučuje se dávat přednost těmto značkám • vyznačují význam, nikoli vzhled <em>...</em> zvýrazněný text <strong>...</strong> silně zdůrazněný text <dfn>...</dfn> definovaný termín <code>...</code>neproporcionální písmo <small>...</small> zmenšení písma o 1 stupeň <big>...</big> zvětšení písma o 1 stupeň ^...horní index _... dolní index <q>...</q> citace v rámci odstavce <span>...</span> formátování a popis části odstavce

38. Písmo - procvičení vysázejte následující text: H2SO4 a2+b2=c2 A=(a1, ... , a2)

39. Vodorovná čára • slouží pro výraznější oddělení celků textu <hr /> parametry: size tloušťka čáry v pixelech widthdélka čáry v pixelech nebo v % šířky okna příklad: <hr size=“2” width=“100%” />

40. Délkové jednotky v XHTML pixely • obrazovkové body • základní délková jednotka v XHTML • je-li někde uveden rozměr (bez znaku %), tak je chápán vždy jako počet pixelů procenta • se v XHTML zapisují jako hodnota a znak % (bez mezery) • jako 100% se chápe šířka nebo výška nadřazeného prvku (např. tabulka (table), buňka tabulky (td), oddíl (div),...) • nadřazeným elementem je často celý dokument. Pro něj platí: • šířka se počítá z šířky dokumentu, což je často šířka okna, ale může to být i víc, pokud nějaký prvek přesahuje doprava • procentuální základ pro výšku se ale u dokumentu chápe jako výška okna.

41. HTML-příkazy • se zobrazením některých znaků může mít prohlížeč problém (např. zobrazení znaků „<“,”>”, znaky národních abeced,...) • vkládají se pomocí příkazu jazyka html ve tvaru: &příkaz; například: &nbsp; pevná mezera&gt;> &lt;< &amp;&

42. Nadpisy • existuje 6 úrovní nadpisů, označují se tagy h1, h2, h3, h4, h5ah6 • úroveň 1 je nejvyšší • úrovně se liší velikostí písma, všechny nadpisy jsou implicitně zarovnávány vlevo • Příklad:<h1>Nadpis 1. úrovně</h1><h2>Nadpis 2. úrovně</h2> <h3>Nadpis 3. úrovně</h3> <h4>Nadpis 4. úrovně</h4> <h5>Nadpis 5. úrovně</h5> <h6>Nadpis 6. úrovně</h6>

43. Nadpisy (zobrazení v prohlížeči)

44. Další blokové prvky • <p>odstavec</p> • <blockquote>citace</blockquote> • <div>část dokumentu s jednotným formátováním </div> • <pre>neformátovaný text napsaný neproporcionálním písmem</pre> • <address>informace o autorovi </address>

45. Příklad použití blokových prvků <h1>1 Pokyny pro pořádání kursů</h1> <h2>1.1 Úroveň absolventů</h2> <p>Předpokládám, že spektrum absolventů kursu bude velmi široké a do značné míry se bude lišit i jejich vstupní úroveň znalostí dané problematiky. Myslím, že kurs lze pořádat zhruba na třech úrovních:</p> <blockquote><b>Začátečníci:</b> Tato úroveň bude určena především učitelům neinformatických předmětů, kteří nemají s vytvářením WWW stránek a prezentací žádné vlastní zkušenosti.</blockquote>

46. Neuspořádaný seznam • neuspořádaný neboli nečíslovaný seznam se značí tagem ul (unordered list) • položka seznamu je li (list item) • položka může obsahovat i více odstavců • před každou položkou se standardně vytváří odrážka Zobrazení v prohlížeči Zdrojový kód • <ul> • <li>žirafa</li> • <li>slon</li> • <li>velbloud</li> • </ul>

47. Uspořádaný seznam • uspořádaný neboli číslovaný seznam se značí tagem ol (ordered list). • položka seznamu je opět li • před položku se automaticky vypisuje její pořadové číslo Zobrazení v prohlížeči Zdrojový kód • <ol> • <li>žirafa</li> • <li>slon</li> • <li>velbloud</li> • </ol>

48. Seznam definic • definiční seznam se používá obvykle v případě, kdy potřebujeme např. vypsat nějaké termíny a k nim jejich definice nebo popisy • je pro něj tag dl (definition list) • definovaný termín se označuje tagem dt (term) • definice termínu tagem dd (definition). Zdrojový kód Zobrazení v prohlížeči <dl><dt>žirafa</dt> <dd>zvíře s dlouhým krkem</dd> <dt>slon</dt> <dd>zvíře s chobotem</dd><dt>velbloud</dt><dd>zvíře s jedním nebo dvěma hrby </dd></dl>

49. Seznamy - procvičení Vytvořte stránku s číslovaným seznamem žáků ve vaší třídě. Uveďte označení třídy, zaměření a jméno třídního učitele.

50. Odkazy • odkaz je prvek na stránce, pro který je definována vazbana jiný dokument • prvek (text, obrázek,..), který je odkazem je graficky zvýrazněn <a href=“URL adresa cíle” > … </a> parametry: title doplňkový text k danému odkazu