XHTML 1. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek

Transkript

1 XHTML 1 Jazyk HTML značkovací jazyk, speciálně vyvinutý pro popis Internetových dokumentů. HTML umožňuje popis: struktury dokumentu; obsahu dokumentu; způsobu zobrazení obsahu prohlížečem na displeji. Značkovací jazyky (mark-up): Součastí prostředků je systém m značek ek, které v informačním textu dokumentu označují strukturu dokumentu tak, že prohlížeč interpretuje tyto značky jako pokyn pro typografické formátování textu. Umožňuje na označená místa vkládat: barevné efekty, animační efekty, i jiné netextové a multimediální informace jako obrázky, videosekvence, zvuky a také i programové sekvence-aplety. Nejdůležitejším prvkem, který lze do web dokumentu vkládat jsou odkazy na jiné web dokumenty.

2 XHTML 2 Validní dokument musi obsahovat určité prvky. Validace- technický proces, jehož pomocí testujeme shodu s pravidly, což umožňuje nalez chyby a opravit omyly. Deklarace a označování dokumentu Kód deklarujicí typ dokumentu a označujicí verzi jazyka: deklarace DOCTYPE musi být použita v každem dokumentu. Příklad <! DOCTYPE html PUBLIC - //W3C//DTD XHTML 1.0 Transitional//EN > <! - vykřičnik znamena začatek deklarace DOCTYPE - vyjadřuje, že kód deklaruje typ dokumentu html - definuje, že je dokument vytvořen v HTML PUBLIC - jde o veřejný dokument

3 XHTML 3 Syntaxe: - //W3C//DTD XHTML 1.0 Transitional//EN definuje hostitele druhu a verze jazyka documentu (konsorcium W3C) určuje, že je dokument vytvářen podle definice XHTML 1.0 Transitional Document Type Definition (DTD) DTD seznam povolených elementů a atributů pro jazyk (XHTML) a jeho verzi. Kompletní URL pro DTD: Při této deklaraci na začatku documentu budete mocí zkontrolovat dokument Validátorem torem. Validátor- použivá informace uvedené v deklaraci a porovnáva váš dokument s DTD, který jste deklarovali.

4 XHTML 4 Element html html kořenový element (všechny dokumenty mají strom dokumentu) strom dokumentů HTML je důležitý pro nastavování stylů pomocí CSS (cascading style sheets = kaskádové styly). CSS jazyk sloužící k nastavování vzhledu stránky: rozvržení; barev; písem a všeho, co slouži k dekorativném účelům. Příklad. Kořenový element html <html>... </html>

5 XHTML 5 V XHTML, musime přidat do počateční značky ještě jmenný prostor XML pro XHTML. (To je pouze jiný způsob zadání jazyka (XHTML), použivaného v dokumentu) Příklad. Kořenový element html s atributem jmenného prostoru XML a jeho hodnotou. <html xmlns= xml:lang= en lang= en >.... </html> Atribut xmlns znamená XML namespace a jeho hodnotou je URL XHTML je kombinaci HTML a XML

6 XHTML 6 Element head head umístúje všechny věci potřebné pro zobrazení a načitání dokumentu, ale nejsou zobrazovány v okně prohlížeče. Příklad. Přídaní sekce head <! DOCTYPE > < html xmlns= > < head>..... </head> </html> Oblast záhlaví dokumentu Element head nepotřebuje žádné atributy, jen počateční <head> a koncovou </head> značku.

7 Elementy, které lze umístit do záhlaví dokumentu XHTML 7 Element title meta script style K čemu slouži Tento element umožňuje pojmenovat dokument. Název se zobrazuje v záhlaví okna prohlížeče. Tento element je povinný. Tento element se použivá k různým účelům, včetně zadání kličových slov a popisů, kódování znaků a autora dokumentu. Element je nepovinný a jeho použití se bude měnit podle konkretních potřeb. Tento element umožňuje vkládat skripty přímo do dokumentu nebo jako odkaz ze stránky na skript, který chcete použivat. Použivá se podle potřeby. Tento element umožňuje vkládat informace o kaskádových stylech prímo do stránky. Toto je známé jako vnořené styly. Použivá se podle potřeby.

8 XHTML 8 Element title title jediný povinný element záhlaví dokumentu. Zobrazuje v záhlaví okna prohlížeče text,společné s názvem prohlížeče. Příklad. Nadpis s názvem webu a místem pro orientací uživatele. <title> aston.com-computers-hw & SW </title> název webu sekce webu podsekce Element meta Kódování dokumentu: znamená nastavení znakové sady web stránky. UTF-8 (Unicode univerzalní formát). Dokument v angličtině ISO (široký rozsah jazyků) Příklad. Použivání meta pro deklarací kódování v Unicode a ISO <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <meta http-equiv= Content-Type content= text/html; charset=iso /> Element meta může být použit k: - uvedení kličových slov; - popisu webu; - definování autora.

9 XHTML 9 Element body Příklad. Umísténí elementu body. <html> <head> <title> Přislušný nadpis stránky </title> </head> <body>.... </body> </html> Obsah stránky zobrazený v okně prohlížeče Komentáře HTML Komentáře umožňuje: - dočasné skrývat obsah dokumentu; - popisovat sekce dokumentu; - poskytovat direktivy pro jiné lidi. Syntax: <! - - Komentář- - >

10 XHTML 10 Šablona (struktura dokumentu XHTML) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> vas web: misto na webu: nazev tematu </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="vase, klicova, slova" /> <meta name="description" content="popis vasi stranky" /> <meta name="author" content="vase jmeno" /> </head> <body>  </body> </html> Pojmenujte tento kód index.html Validátor: 1) ( sekce upload) 2) zadejte svůj soubor

11 XHTML 11 Přidávání textu a odkazů Šest úrovní nadpisů: od <h1>.. </h1> po <h6>.. </h6> Přidávání odstavců <p>... </p> s textem umístěným mezi značkami Mezi odstavcí prázdný řádek. Zalomenířádku Vynucený přechod na nový řádek ( <br/> ) <p> Text-1 <br/> Text-2 <br/> Text-3 </p> Číslovaný seznam - je seznam položek, které musí být uvedeny v konkretním pořadí. Povinné dva elementy: <ol>...</ol> a <li>... </li> <ol> <li> Krok 1 </li> <li> Krok 2 </li> </ol>

12 XHTML 12 Nečíslovaný seznam - je seznam, v němž nemusí být položky uvedeny v přesném pořadí. Povinné dva elementy: <ul>...</ul> a <li>... </li> <ul>... </ul> Značka umožňuje prohlížeči zobrazovat seznam položek s odzážkami místo čísel. <p> Web obsahuje sekce: </p> <ul> Web obsahuje sekce <li> Knihy </li> Knuhy <li> CD a DVD </li> CD a DVD <li> Elektronika </li> Elektronika </ul> Styl odrážek můžete měnit pomocí CSS Vnořený seznam je seznam v seznamu. Musite vložit seznam mezi počateční a koncovou značku položky seznamu. Při vnořování můžete použivat různé kombinace seznamů: - Nečíslované seznamy uvnitřčíslovaných; - Nečíslované seznamy uvnitř nečíslovaných; -Číslované seznamy uvnitř nečíslovaných; -Číslované seznamy uvnitřčíslovaných;

13 XHTML 13 Vnořený seznam Příklad. Vnořeníčíslovaného seznamu do jiného číslovaného seznamu. <ol> <li> Text </li> <li> Another text: 1. Text <ol> 2. Another text: <li> Čokolada </li> 1. Čokolada <li> Bombony </li> 2. Bombony </ol> 3. Next text </li> <li> Next text </li> </ol> Pomocí CSS můžete měnit styly číslování i odzážek ve vnořených seznamech.

14 XHTML 14 Defiiniční seznamy Definiční seznamy se skládají ze tří elementů: - prvním elementem je definiční seznam <dl> </dl> - následuje element definovaného termínu <dt> </dt> - a element popisu termínu <dd> </dd> Příklad. <dl> <dt> Termín 1 </dt> Termín 1 <dd> Popis termínu 1 </dd> Popis termínu 1 <dt> Termín 2 </dt> Termín 2 <dd> Popis termínu 2 </dd> Popis termínu 2 </dl>

15 XHTML 15 Odkaz Druhy odkazů: 1) Absolutní 2) Relativní V Absolutních odkazech se použivají přesné adresy souborů, na které chcete odkazovat. Absolutní adresa obsahují: - přenosový protokol; - doménu; - podadresáře; - název souboru. Příklad. Relativní odkazy odkazují na soubory spojené se stejným serverem. Na jiný dokument můžete odkazovat zadáním názvu souboru (např. springboard.html), nebo přejít o úroveň výše a pak vstoupit do jiné složky (např.../products/conc.html). Odkazy jsou generovány pomocí elementu <a>..... </a> Atribut href se použivá pro zadání adresy odkazu. Text mezi počáteční a koncovou značkou se objeví jako samotný odkaz.

16 XHTML 16 Odkaz Příklad. Odkaz na absolutní adresu. <a href = > HW a SW</a> Výsledek: HW a SW Atribut title, do néhož se vkladá podrobnější popis odkazu. <a href = title = informace o nové knize popisující HW a SW > Informace o HW a SW </a> Když je kurzor myši nad odkazem, objeví se nápověda s dalšími informacemi. Informace o HW a SW Informace o nové knize popisující HW a SW

17 XHTML 17 Odkazy na ové adresy Odkaz je stejný jako standardní odkaz, avšak místo toho, aby vás přenesl na jinou stránku, otevře se přislušná poštovná aplikace a adresa příjemce se vloží do pole pro příjemce. V href text mailto: následovaný ovou adresou příjemce. <a href = mailto:kris@seznam.cz > napsat zprávu pro Kris </a> Vnitřní odkazy (#) Vnitřní odkazy umožňují vytvořet v dokumentu odkazy na jínou oblast téhož dokumentu. Odkaz s mřižkou (#), následovanou odpovidajicím názvem a definováním místa pomocí elementu <a> s atributem name, obsahujícím temto název.

18 XHTML 18 Vnitřní odkazy <p> <a href = # news > Přejít na novinky </a> </p> <h1> Vítejte </h1> <p> Tento odstavec vás vitá </p> <h2> Další text </h2> <p> Tento odstavec popisuje, kdo jsme </p> <h2> <a name = news > Novinky </a> </h2> <p> Toto je sekce, do níž povede odkaz </p> Přejít na novinky Tento odstavec popisuje, kdo jsme Vítejte Novinky Tento odstavec vás vitá Toto je sekce, do níž povede odkaz

19 XHTML 19 Odkaz na konkretní místo v jiném dokumentu Použivaní odkazu pro přechod na konkretní místo v jiném dokumentu: <p> <a href= #Sparta> Pomocí tohoto odkazu se můžete dozvědět o týmu Sparta</a></p> Nýní zadáte v cílovém dokumentu název místa: <h1> <a name = Sparta > Vše o týmu Sparta</a></h1> První dokument pak obsahuje odkaz na konkretní místo v jiném dokumentu. V XTML1.1 byl atribut name zcela nahrazen atributem id.

20 XHTML 20 Přidávání obsahu do šablony <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> vas web: misto na webu: nazev tematu </title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="vase, klicova, slova" /> <meta name="description" content="popis vasi stranky" /> <meta name="author" content="vase jmeno" /> </head> <body> <h1> Vítejte! </h1> <p> Zde jsou některé věci, které mám rád. </p> <h2> Computerworld </h2> <p> Nejnovější výsledky výzkumu využívání <br/> videokonferencí v podnikové sfére v České republice <br/> poukazují na skutečnost, že videokonference nyní aktivně <br/> praktikuje více než jedna organizace z deseti. </p> <h2> Recept </h2> <p> Tento recept mám rád </p>

21 XHTML 21 Přidávání obsahu do šablony <h3> Šlehaný kávový desert </h3> <ol> <li> List 1 </li> <li> List 2 </li> <li> List 3 : <ul> <li> Another list 1 </li> <li> Another list 2 </li> </ul> </li> <li> List 4 </li> </ol> <h2> Neobvyklé pojmy </h2> <dl> <dt> Fuklid </dt> <dd> Zviřatko, s nimž zachazeli jako s ditětem. </dd> <dt> Letadlo </dt> <dd> Fighter, Jetbox </dd> </dl>

22 XHTML 22 Přidávání obsahu do šablony <h2> Spojení </h2> <p><a href= > zprávu pro Alba</a></p> </body> </html> Vítejte! Zde jsou některé věci, které mám rád. Computerworld Nejnovější výsledky výzkumu využívání videokonferencí v podnikové sfére v České republice poukazují na skutečnost, že videokonference nyní aktivně praktikuje více než jedna organizace z deseti. Recept Tento recept mám rád Šlehaný kávový desert 1. List 1 2. List 2 3. List 3 : Another list 1 Another list 2 4. List 4 Neobvyklé pojmy Fuklid Zviřatko, s nimž zachazeli jako s ditětem. Letadlo Fighter, Jetbox Spojení zprávu pro Alba

23 XHTML 23 Obrázky, multimedia a skripty Grafické formáty: GIF, JPEG GIF pro obrázky s malým počtem barev JPEG pro obrázky s velkým počtem barec (např. fotografie) Multimedia animované obrázky GIF, flashové animace, hudba, video a aplety jazyka Java. Skripty JavaScript, efekty DHTML. Element img img neobsahuje žádný text, nevyžaduje koncovou značku ( <img/> ) Atribut src umístuje název grafického souboru i jeho připonu. <body> <img src = images/photo.jpg /> </body> S obrázky je možně provádet: - pomáhat prohlížečům je lépe zobrazit; - poskytovat informace tém, kdo nebudou mocí obrázky zobrazit; - vytvářet odkazy s obrázky.

24 Zadávání šířkya výšky (atributy width, height) 1) zjístit ---- v prohlížečí šířku a výšku 2) zadat do obrázku (HTML) XHTML 24 <img src= photo.jpg width= 250 height= 188 /> Zadávání alternativního textu (atribut alt) <img src= photo.jpg alt= foto /> Podobně se objeví i při podržení kurzoru myši nad obrázkem. Odkazy s obrázky Provádí se stejným spůsobem jako při vytvaření textových odkazů. <a href= detail.html > <img src= photo.jpg width = 250 height = 188 /> </a>

25 XHTML 25 Odkazy na zvukové soubory nebo na video Uložtě multimediální soubory do nějaké podsložky (např. media). Příklad. Odkazy na hudební a video soubory. <body> <a href= media/audio-sample.mp3 title= Audiozáznam zpěvu >Odkaz na hudební soubor</a> Velikost: 1,300 kb <br/> <a href= media/video-sample.avi title= videozáznam filmu >Odkaz na soubor s videem</a> Velikost: 29,000 kb </body> Je dobré uvést velikost souboru. Popis souboru ---- pomocí atributu title.

26 XHTML 26 Vnoření souborů pomocí elementu Object Jiným spůsobém použití hudebních souborů, video souborů, flashové animace, appletů jazyka Java je jejích přímé vložení do stránky. Vkládání multimediálních souborů použití elementu Object pro přímé vložení souboru: <object data= media/video-sample.avi type= video/avi /> Objeví se aplikace přehrávače a video pak může být přehráno. Vkládání souboru Flash (SWF) <object classid= clsid:d27cdb6e-ae6d-11cf-96b width= 100 height= 100 codebase= flash/cabs/swflash.cab#version=6,0,0,0 > <param name= movie value= media/ava.swf /> <param name= play value= true /> <param name= loop value= true /> <param name= quality value= high /> </object>

27 XHTML 27 V XHTML 2.0 se element Object stavá všudypřitomným (použivá se pro všechny externí soubory). Pro konzistentnost v co nejvíce prohlížečích --- element embed (kombinovat Object a embed) <object classid= clsid:d27cdb6e-ae6d-11cf-96b width= 100 height= 100 codebase= flash/cabs/swflash.cab#version=6,0,0,0 > <param name= movie value= media/ava.swf /> <param name= play value= true /> <param name= loop value= true /> <param name= quality value= high /> <embed src= media/ava.swf width= 100 height= 100 play= true loop= true quality= high > </embed> </object>

28 XHTML 28 Přidávání skriptů (Java Script, DHTML) DHTML kombinace HTML, CSS, Java Script a DOM. DOM (Dokument Object Model) rozhraní v prohlížečích jež umožňuje spojovat skripty s konkretními elementy dokumentu. Vkládání skriptu K vložení Java Scriptu do záhlaví dokumentu se použivá element Script, obsahující kód skriptu. <head> <script type= text/javascript > function newwindow( ) { orlojwindow=window.open( images/orloj.jpg, orlojwin, width=100, hieght=100 ) } </script> </head> Účel skriptu otevření obrázku photo.jpg v novém okně po klepnutí na určitý odkaz. <a href= javascript:newwindow( ) >Orloj</a>

29 XHTML 29 Odkaz na skript Skripty umístěny jako externí soubory Stránka Stránka Stránka odkaz odkaz odkaz Soubor se skripty 1) Umístěte kód skriptu do samostatného souboru, uložte jej s připonou.js (např. popup.js) 2) Umístěte tento soubor do podadresáře s názvem scripts. 3) V HTML použite element script pro jeho připojení k dokumentu. <head> <script src= scripts/popup.js type= text/javascript > </script> </head> 4) Kód pro připojení funkce k odkazu v těle dokumentu ponechte jak je <a href= javascript:newwindow( ) >Orloj</a>

30 DTD List Deklarace a označování dokumentu HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " DTD for the CSS validator. transitional.dtd