Internet cvičení (X)HTML Jakub Klímek XML and Web Engineering Research Group Faculty of Mathematics and Physics Charles University, Prague Czech Republic
Agenda Požadavky na zápočet jsou na webu Deadline na témata: 30.11.2011 23:59 Deadline: 13.1.2012 23:59 Nechte si rezervu, úkol se vám nemusím uznat a můžete odevzdávat vícekrát Každé odevzdání snižuje možnou známku o 1, kontrolujte zda máte vše co se po vás chce Informace: http://www.ksi.mff.cuni.cz/~klimek/teaching/#internet Internet (X)HTML 2
XHTML co to je? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup Language Jazyk pro tvorbu WWW stránek XHTML extensible HyperText Markup Language "kombinace" Je to jazyk HTML přizpůsobený pravidlům XML Dnes už převážně XHTML Vzhledem k více méně kosmetickým rozdílům budeme používat jen XHTML Internet (X)HTML 3
XML jak to vypadá - Tag Řetězec uzavřený v ostrých závorkách <můj_tag> Mají 3 typy Start-tag: <můj_tag> End-tag: </můj_tag> Empty-element tag: <můj_tag/> Internet (X)HTML 4
XML jak to vypadá - Element 2 typy Dvojice Start-tag, end-tag se stejným názvem <můj_tag>...</můj_tag>... se nazývají obsah elementu. To může být jak text, tak další elementy Empty-element tag říká že element nemá žádný obsah <můj_tag/> Stejné jako <můj_tag></můj_tag> Internet (X)HTML 5
XML jak to vypadá - Obsah Obsah elementu 4 typy Prázdný - <můj_tag/> Textový - <můj_tag>můj text</můj_tag> Elementový <můj_tag><další_tag/><jiný_tag/></můj_tag> Smíšený <můj_tag>t<jiný_tag>text</jiný_tag></můj_tag> Internet (X)HTML 6
XML jak to vypadá Atributy Dvojice název/hodnota uvnitř Start-tagu nebo Empty-element tagu Například number="3" Název number Hodnota 3 Příklady <položka id="123">toto je položka</položka> <značka id="456"/> Internet (X)HTML 7
XML - pravidla Záleží na velkých a malých písmenech Nelze: <Můj_tag></můj_tag> Správné uzávorkování Nelze: <Tag1><Tag2></Tag1></Tag2> Pouze jeden kořenový element Celý XML dokument má tvar stromu První řádek dokumentu obsahuje hlavičku <?xml version="1.0" encoding="utf-8"?> Encoding je použité kódování znaků Nejlépe Unicode UTF-8 Lze i ISO8859-2 nebo Windows-1250 Internet (X)HTML 8
XML - Příklad <?xml version="1.0" encoding='utf-8'?> <záznam> <img src="fotka.jpg" alt="moje fotka"/> <popis> Tohle je moje fotka ze dne: <datum> <den>2</den>.<měsíc>12</měsíc>. <rok>2009</rok> </datum> </popis> </záznam> Internet (X)HTML 9
HTML jak to vypadá Je to sada tagů, atributů a pravidel, jak tyto tagy a atributy mohou být umístěny Tagy: html, body, head, h1, h2, div, span,... Atributy: id, src, ref,... Pravidla "Tag head musí být jen v tagu html a to právě jednou" "Tag img musí mít atribut src"... Internet (X)HTML 10
HTML vs. XHTML HTML není XML, XHTML je XML V HTML je možné mít třeba start-tag a ne endtag <p>, <br> Aby to bylo XML a tedy XHTML, musí to být správně uzávorkované <p/>, <br/> nebo <p></p>, <br></br> Další rozdíly, v podstatě vychází z HTML 4.01 Internet (X)HTML 11
(X)HTML hlavička dokumentu HTML i XHTML dokument má hlavičku říkající podle které verze W3C doporučení je dokument napsán HTML: 4.01 XHTML: 1.0 Strict, 1.0 Transitional, 1.0 Frameset, 1.1 XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Internet (X)HTML 12
XHTML struktura dokumentu Kořenový element <html> 2 podelementy <head> a <body> <head> obsahuje informace o stránce, které se nezobrazují Výjimka: element <title> obsahuje text, který se zobrazí v titulku prohlížeče <body> je vlastní obshah stránky <p> - odstavec <h1> - <h6> - Nadpisy dle váhy, <h1> nejvyšší Internet (X)HTML 13
XML - namespaces Různé dokumenty mohou používat stejné názvy elementů v různých významech Aby se předešlo zmatkům, zavádí se prostory jmen namespace Identifikátor namespace je URI http://www.w3.org/1999/xhtml Pro namespace se v dokumentu zavede jméno Jako atribut xmlns elementu, uvnitř kterého budu namespace používat <e xmlns:n="http://www.w3.org/1999/xhtml" /> Poté se elementy z namespace N značí <N:e/> Lze zavést výchozí namespace bez označení Internet (X)HTML 14
XHTML základní příklad <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs"> <head> <title>moje první stránka</title> </head> <body> <h1>můj první nadpis</h1> <p>test</p> </body> </html> Internet (X)HTML 15
XML - entity Entita kód pro text Pro web nejzajímavější: & & < < > > " " Obecně lze v XML definovat vlastní, tady na to zapomeňte Příklad: H&M se v XHTML píše: H&M Internet (X)HTML 16
XHTML jak na to? Když nevím jak udělat to co chci (užitečné odkazy) Použiji Google Seznam tagů: http://www.w3schools.com/tags/default.asp XHTML 1.1 vychází z XHTML 1.0 Strict používejte tedy jen tagy označené jako "S" Jestliže to najdu jinde, podívám se na zdrojový kód stránky jestli to nejde opsat Internet (X)HTML 17
XHTML zajímavé tagy - seznamy Seznamy <ol> - Číslovaný seznam (Ordered list) <ul> - Nečíslovaný seznam (Unordered list) <li> - Položka seznamu (List Item) Příklad: <ul> <li>první</li> <li>druhá</li> </ul> Internet (X)HTML 18
XHTML zajímavé tagy - tabulky <table> - Tabulka <tr> - Řádek tabulky (Table Row) <td> - Záznam uvnitř řádku (Table Data) Příklad: <table> <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr> <tr><td>2-1</td><td>2-2</td></tr> </table> Tabulka nemusí mít v každém řádku stejný počet buněk (sloupečků) Internet (X)HTML 19
XHTML zajímavé tagy - odkazy <a> - Kotva (Anchor) Hlavní použití jako odkaz <a href="http://www.google.com">google</a> Atribut href udává URL kam odkaz vede Obsah elementu <a> je to, na co budu klikat V našem případě je to text Google, ale může to být cokoliv jiného» I složitého jako tabulka, obrázek, odstavec, seznam, Další použití jako cíl odkazu v rámci stránky (Bookmark) <a id="odstavec2"> </a> Atribut id udává identifikátor, na který se pak dá odkázat Pomocí <a href="#odstavec2"> </a> Nebo z jiné stránky pomocí <a href="http://www.google.com#odstavec2"> </a> Internet (X)HTML 20
XHTML zajímavé tagy - obrázky <img> - Obrázek (Image) Slouží pro vkládání obrázků <img src="obrazek.jpeg" alt="obrázek slona" usemap="#mojemapa" width="10" height="20"/> Atribut src udává URL souboru s obrázkem Atribut alt udává textový popis obrázku Objeví se když jsou obrázky vypnuté, když nelze obrázek načíst Atribut usemap udává id klikací mapy Atributy width a height mohou udávat rozměry Povinné atributy: src a alt Internet (X)HTML 21
XHTML klikací mapa <map> Atribut id udává id mapy, na které se dá odkazovat třeba z <img> Podelementy <area> - klikací oblasti Atribut href kam vede odkaz Atribut alt náhradní text Atributy shape a coords tvar a rozměr oblasti shape="rect" coords="x1,y1,x2,y2" krajní body obdélníka shape="circle" coords="x,y,r" střed a poloměr kružnice shape="poly" coords="x1,y1,x2,y2,,xn,yn" body polygonu Internet (X)HTML 22
XHTML klikací mapa - příklad <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap"/> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun"/> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury"/> <area shape="circle" coords="124,58,8" href="venus.htm" alt="venus"/> </map> Proč používám atribut name? Mapa je různě definována v HTML, XHTML 1.0 a XHTML 1.1 Navíc každý prohlížeč podporuje něco jiného XHTML 1.1: atribut usemap elementu img nesmí obsahovat #. Element map musí mít atribut id, nesmí mít atribut name. Tedy: <img usemap="planetmap"/> <map id="planetmap"/> XHTML 1.0 Strict: atribut usemap elementu img tvaru #planetmap. Element map musí mít atribut id. Tedy: <img usemap="#planetmap"/> <map id="planetmap"/> Takto to ale umí jen IE a Opera Neumí: Firefox, Safari, Google Chrome Oprava: přidat i atribut name se stejnou hodnotou, který v XHTML 1.0 být může viz příklad nahoře Takto to ale žádný prohlížeč nepodporuje HTML 4.01: atribut usemap elementu img tvaru #planetmap. Element map musí mít atribut name, nesmí mít atribut id. <img usemap="#planetmap"> <map name="planetmap"> Takto to funguje všude, ale není to XHTML Internet (X)HTML 23
XHTML další tagy <code> - pro zdrojové kódy použije písmo se stejnou šířkou všech znaků <address> - označuje kontakt na majitele XHTML dokumentu <dl> - Seznam definic, obsahuje: <dd> - Definition description <dt> - Term Tagy pro formuláře ještě dnes Tagy pro formátování (<div>, <span>) bude příště <b> - tučný text, <i> - kurzíva, <hr/> vodorovná čára <!-- --> - XML komentář Internet (X)HTML 24
XHTML - poznámka Až budete nahrávat svůj web na internet, hlavní stránka se jmenuje index.<přípona> Přípona je.html,.htm, (později.php) dle potřeby Tzn. http://www.ksi.mff.cuni.cz/~klimek ve skutečnosti ukazuje na http://www.ksi.mff.cuni.cz/~klimek/index.php Internet (X)HTML 25
XHTML poznámka - adresy Adresy na webu mohou být absolutní nebo relativní Absolutní: vždy plná cesta. Např. http://www.ksi.mff.cuni.cz/~klimek Relativní: jen rozdílná část Jsem-li tedy na stránce http://www.ksi.mff.cuni.cz/~klimek a chci odkaz na stránku http://www.ksi.mff.cuni.cz/~klimek/teaching stačí mi napsat <a href="teaching">blabla</a> Internet (X)HTML 26
XHTML - Formuláře Pro sběr dat od uživatele Element <form> atribut method hodnota post nebo get post data se předávají vůči uživateli neviditelně get data se předávají v adrese stránky lze ukládat odkazy atribut action URL stránky, kam se data posílají Podelementy <select> Podelementy <input> atribut name udává jméno, pod kterým se vstup bude dále zpracovávat atribut type rozhoduje o funkci/vzhledu text, password, radio, checkbox, file, button, reset, submit, image, hidden Internet (X)HTML 27
XHTML Elementy <input> 1 text pro vložení jedné řádky textu atribut maxlength maximální délka textu password to samé, ale místo textu se zobrazují zástupné znaky (není vhodné používat s metodou GET) radio volba, u všech položek ve skupině musí být name stejné atribut value jaká hodnota se předá pro zpracování atribut checked="checked" výchozí hodnota: zvoleno checkbox vícenásobná volba, jinak stejné jako radio Pro následné zpracování ve formě pole je nutné atribut name ukončit [] Jinak může mít každá volba jiné jméno Internet (X)HTML 28
XHTML Elementy <input> 2 submit tlačítko pro odeslání, atribut value obsahuje text reset tlačítko pro vyčistění formuláře, atribut value obsahuje text hidden skrytý element, používá se pro výchozí hodnoty a nebo pro změny JavaScriptem image udává obrázek místo tlačítka pro odeslání file pole pro odeslání souboru button tlačítko které nic nedělá (využití JavaScriptem), atribut value obsahuje text Internet (X)HTML 29
XHTML - <select> Element <select> se používá pro seznam, ze kterého se dá vybírat Podelementy <option> atribut value předaná hodnota textový obsah elementu text volby atribut selected="selected" výchozí hodnota atribut multiple="multiple" možnost více voleb Pro následné zpracování ve formě pole je nutné atribut name ukončit [] atribut size="5" počet přímo zobrazených voleb Internet (X)HTML 30
XHTML: Příklad formuláře <form method="post" action="http://www.ksi.mff.cuni.cz/~klimek/send.php"> <div> Jméno: <input type="text" name="name"/><br/> Tajná zpráva: <input type="password" name="secret"/> <h2>pohlaví</h2> <input type="radio" name="sex" value="muž"/> Muž<br/> <input type="radio" name="sex" value="žena"/> Žena <h2>majetek</h2> <input type="checkbox" name="property[]" value="kolo"/> Kolo<br/> <input type="checkbox" name="property[]" value="auto"/> Auto<br/> <input type="checkbox" name="property[]" value="letadlo"/> Letadlo <h2>rodinný stav</h2> <select name="status"> <option value="svobodný(á)">svobodný(á)</option> <option value="ženatý/vdaná">ženatý/vdaná</option> <option value="rozvedený(á)" selected="selected">rozvedený(á)</option> </select> <br/><br/> <input type="reset"/><input type="submit" value="odeslat"/> </div> </form> Internet (X)HTML 31
XHTML - validace Jak zjistit jestli je stránka validní? Tj. jestli vyhovuje např. XHTML 1.1 standardu? Tj. jestli už splňuje podmínku validity na zápočet? http://validator.w3.org/ Validuje přes odkaz Validuje přes nahrání HTML souboru Validuje přes zadání textu přímo do validátoru Internet (X)HTML 32
Formátování - CSS Formátování vzhledu již není součástí XHTML Používají se k tomu styly CSS CSS Cascading Style Sheets XHTML obsahuje data k zobrazení CSS říká jak je zobrazovat Bude příště Internet (X)HTML 33