1 / 88

Jazyk XHTML

Jazyk XHTML. základní pojmy. Zdroje informací na webu. www.jakpsatweb.cz www.jaknaweb.com www.kosek.cz www.webtip.cz www.dobryweb.cz www.interval.cz. Odkud „stáhnout“ vhodný SW?. www.stahuj.cz www.slunecnice.cz www.studna.cz. Architektura klient - server.

aminia
Télécharger la présentation

Jazyk XHTML

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. 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ň <sup>...</sup>horní index <sub>...</sub> 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

More Related