Web (HTML, XHTML, CSS a HTTP)

Radek Hnilica

Web (HTML, XHTML, CSS a HTTP) Radek Hnilica Working Vydání Vydáno Copyright © 2002, 2003, 2005, 2006, 2008, 2010, 2011 Radek Hnilica Tento dokument je o vytváˇrení web˚u. Zabývám se zde všemi technologiemi jenž se publikování na webu týkají. Jedinou výjimkou je vytváˇrení dynamických web˚u, to popisuji v jiných dokumentech. Hlavní náplní jsou poznámky k protokolu http a jazyk˚um HTML, XHTML, CSS. Poˇcet stran v Postscriptové (web.ps) a PDF (web.pdf) verzi: 50 . Poˇcet stran v Postscriptové a PDF verzi: 50 . Pˇríšernˇe žlut’ouˇcký k˚unˇ úpˇel d’ábelské ódy. Hled’, tot’ pˇrízraˇcný k˚unˇ v mátožné póze šílenˇe úpí.

Toto dílo smíte užívat dle podmínek licence CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/3.0/cz/).

Pˇrehled revizí Revize 0 2002-10-19 Založení Revize 0.1 2005-08-09 Pˇrevedení do nového publikaˇcního systému Revize 2 2011-05-09 Zmˇena licence na CC BY-NC-SA.

ˇ Venování FIXME:napsat vˇenování

Obsah Pˇredmluva.............................................................................................................................................................. vi 1. Úvod .................................................................................................................................................................... 1 1.1. Sekce ....................................................................................................................................................... 1 2. Nezapracované poznámky................................................................................................................................. 2 3. Staré sekce .......................................................................................................................................................... 3 3.1. HTTP metody.......................................................................................................................................... 3 3.2. Cookies.................................................................................................................................................... 4 3.3. Session Management............................................................................................................................... 4 4. Internet................................................................................................................................................................ 5 4.1. Indentifikace zdroj˚u ................................................................................................................................. 5 I. HTML.................................................................................................................................................................. 6 5. Struktura (X)HTML dokumentu ................................................................................................................ 7 6. HTML tagy............................................................................................................................................... 12 7. Dizajn stránky........................................................................................................................................... 21 8. HTML5..................................................................................................................................................... 22 II. Kaskádové styly (CSS).................................................................................................................................... 24 9. Zápis ......................................................................................................................................................... 25 10. Atributy .................................................................................................................................................. 27 11. Menu....................................................................................................................................................... 28 12. Záložky................................................................................................................................................... 29 13. R˚uzné ukázky stylování.......................................................................................................................... 32 14. Vlastnosti................................................................................................................................................ 33 III. Java Script...................................................................................................................................................... 34 15. Krátký popis jazyka................................................................................................................................ 35 16. Menu....................................................................................................................................................... 36 17. Document ............................................................................................................................................... 37 IV. Technologie..................................................................................................................................................... 38 18. RESTfull WEB....................................................................................................................................... 39 19. CSS3 a HTML5 .............................................................................................................................................. 42 V. X........................................................................................................................................................................ 43 20. Xx ........................................................................................................................................................... 44

iv

Seznam tabulek 6-1. možnosti list-style-type................................................................................................................................... 12 6-2. Atributy tagu ................................................................................................................................. 13 6-3. Atributy tagu ........................................................................................................................................ 14 6-4. Atributy tag˚u

a

.......................................................................................................................... 14 6-5. Atributy tagu .................................................................................................................................. 16 6-6. Atributy tagu .................................................................................................................................. 16 6-7. Atributy tagu <SELECT>............................................................................................................................... 19 6-8. Atributy tagu ............................................................................................................................... 19 14-1. background-repeat ........................................................................................................................................ 33 18-1. CRUD ........................................................................................................................................................... 39 v Pˇredmluva FIXME: vi Kapitola 1. Úvod * chapter id="introduction" Odkazy a zdroje: • CDI’s Comprehensive HTML Cross Reference (http://www.willcam.com/cmat/html/home.html) ToDo 1. První úkol. Text kapitoly 1.1. Sekce FIXME: 1 Kapitola 2. Nezapracované poznámky * chapter id="notes" Odkazy a zdroje: • CDI’s Comprehensive HTML Cross Reference (http://www.willcam.com/cmat/html/home.html) Na internetu je velká ˇrada zdroj˚u, vlastnˇe vˇetšinou vycházím z informací nalezených na internetu. A zde uvádím nˇekteré z nich. • Software Engineering for Internet Applications (http://philip.greenspun.com/seia/) by Eve Andersson, Philip Greenspun, and Andrew Grumet 2 Kapitola 3. Staré sekce 3.1. HTTP metody HEAD, GET a POST HTTP metody používá prohlížeˇc k získání a odeslání dat z a na WWW server. 3.1.1. Metoda HEAD Tato metoda slouží k získání informací o dokumentu, nikoliv dokumentu samotného. $ telnet gandalf 80 Trying 192.168.65.1... Connected to 192.168.65.1. Escape character is ’^]’. HEAD / HTTP/1.0 HTTP/1.1 200 OK Date: Sat, 06 Jul 2002 08:04:13 GMT Server: Apache/1.3.24 (Unix) Debian GNU/Linux mod_perl/1.26 Last-Modified: Thu, 19 Jul 2001 13:21:07 GMT ETag: "4725f-ffe-3b56dec3" Accept-Ranges: bytes Content-Length: 4094 Connection: close Content-Type: text/html; charset=iso-8859-1 Connection closed by foreign host. radek@kvark:~$ 3.1.2. Metoda GET Základní (nejjednodušší) metoda pro získání dokumentu. $ telnet telnet gandalf 80 Trying 192.168.65.1... Connected to 192.168.65.1. Escape character is ’^]’. GET /index.html HTTP/1.0 HTTP/1.1 200 OK Date: Sat, 06 Jul 2002 08:08:15 GMT Server: Apache/1.3.24 (Unix) Debian GNU/Linux mod_perl/1.26 Last-Modified: Thu, 19 Jul 2001 13:21:07 GMT ETag: "4725f-ffe-3b56dec3" Accept-Ranges: bytes Content-Length: 4094 Connection: close Content-Type: text/html; charset=iso-8859-1 3 Kapitola 3. Staré sekce <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="GENERATOR" CONTENT="Mozilla/4.05 [en] (X11; I; Linux 2.3.99-pre3 i686) [Netscape]"> <META NAME="Author" CONTENT=" (Johnie Ingram)"> <META NAME="Description" CONTENT="The initial installation of Debian/GNU Apac he."> <TITLE>Welcome to Your New Home Page! ... Parametry se pˇredávají zakódované v URL, a to takovým zp˚usobem, že za url objektu se napíše „?“ (otazník) a za nˇej seznam dvojic klíˇ c=hodnota oddˇelených znakem „&“ (and) V tomto textu se provádˇejí ještˇe nˇekteré transformace. Napˇríklad znak mezera je nahrazen znakem „+“ (plus), a všechny ostatní speciální znaky jsou pˇrekódovány na hexadecimální cˇ ísla ve tvaru „%FF“ 3.1.3. Metoda POST Metoda získání dokumentu umožˇnující odeslat na server veliký soubor parametr˚u. 3.2. Cookies Cookies jsou jednoduché textové ˇretˇezce ve formátu jméno=hodnota které jsou uloženy na stranˇe klienta. Každé cookie je spojeno s URL. Toto URL je klientem použito ke zjištˇení, zda se na daný server má cookie odeslat. 3.3. Session Management FIXME: 4 Kapitola 4. Internet * 4.1. Indentifikace zdroju˚ * Odkazy: • Uniform Resource Locators (URL) (http://www.ietf.org/rfc/rfc1738.txt) • Obecný tvar identifikátoru zdroje má tvar cást schéma:specifická_ˇ 5 I. HTML FIXME:abstract/para. Tato cˇ ást knihy je vˇenována samotnému HTML a XHTML. Odkazy a zdroje: • HTML Station (http://www.december.com/html/) Kapitola 5. Struktura (X)HTML dokumentu Povídání o tom jak html dokument, tedy html stránka vypadá. Html dokument m˚užeme rozdˇelit na nˇekolik cˇ ástí. První cˇ ástí, jenž musí zaˇcínat na prvním ˇrádku je deklarace. Deklarace typu dokumentu, jenž nám ˇríká jakou strukturu dokument má, jaké znaˇcky a jak v nˇem mohou být použity. Stránka sestává z nˇekolika viditelnˇe oddˇelených cˇ ástí. Jedná se postupnˇe o deklarace, záhlaví dokumentu a tˇelo dokumentu. Ve zkratce: • deklarace specifikují typ dokumentu a znaˇckovací jazyk • záhlaví obsahuje metainformace popisující dokument jako jsou titulek, autor, klíˇcová slova, . . . • tˇelo obsahuje vlastní dokument, tedy kód stránky Obrázek 5-1. Struktura stránky/HTML/XHTML +-----------------------------+ | | | | |-----------------------------| | | | | | Záhlaví | | | |-----------------------------| | | | | | | elo | | Tˇ | | | | | | | | +-----------------------------+ 5.1. Deklarace Deklarace je první cˇ ástí dokumentu. Deklarace urˇcuje a jaký dokument se jedná a tím specifikuje v jakém znaˇckovacím cˇ i jiném jazyce bude zbytek, tedy záhlaví a tˇelo. V p˚uvodnˇe autoˇri web˚u, v dobˇe starého HTML 2.0 a podobných verzí deklaraci neuvádˇeli. Ani prohlížeˇce na ní netrvali. Pokud v této dobˇe napíšeme dokument bez deklarace, i tak jej prohlížeˇce nˇejak zobrazí. Deklaraci je ale dobré uvádˇet. Pokud ji uvedeme, m˚uže prohlížeˇc celý dokument interpretovat a vykreslit jinak pro jinou deklaraci. V pˇrípadˇe HTML urˇcuje deklarace kterou verzi používáme. ádek z deklarací pak vypadá následovnˇe: 7 Kapitola 5. Struktura (X)HTML dokumentu Pokud používáme XHTML, použijeme podobný ˇrádek, odkazující se ale na jiný dokument. Tomuto ˇrádku by ale mˇel pˇredcházet v˚ubec první ˇrádek xml dokuemtu a to je specifikace xml jazka a použitého kódování. Ta vypadá takto: 5.1.1. HTML 2.0 5.1.2. HTML 3.2 5.1.3. HTML 4.0 FIXME: 5.1.4. XHTML 1.0 Odkazy: • Normative Definition of XHTML 1.0 (http://w3.webmount.info/TR/xhtml1/normative.html) • XHTML 1.0: Marking up a new dawn (http://www-128.ibm.com/developerworks/library/w-xhtml.html) • HTML DTDs (http://www.redi.uklinux.net/doc/www/doctype.html) • Pˇrecházíme na XHTML (http://tvorbawww.einstein.cz/clanek/prechazime-na-xhtml/) 8 Kapitola 5. Struktura (X)HTML dokumentu Ukázka dokumentu Pˇríklad 5-1. Ukázka XHTML 1.0 dokumentu Podivej se na example.org. Pˇríklad 5-2. Ukázka XHTML 1.0 Transitional dokumentu <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> Pˇríklad 5-3. Ukázka XHTML 1.0 dokumentu v cˇ eštinˇe Toto je XHTML dokument. 5.1.5. XHTML 1.1 9 Kapitola 5. Struktura (X)HTML dokumentu 5.2. Záhlaví dokumentu Záhlaví (X)HTML dokumentu je uzavˇreno v tagu head, a obsahuje informace o dokumentu samotném. Tyto informace se nezobrazují ale jsou použity pro jiné úˇcely jako je indexování vyhledávaˇci, tˇrídˇení a katalogizace. Rovnˇež zde mohou být informace o souvisejících dokuemtech a použitém kódování. <meta http-equiv="Refresh" content="10" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> html { color: #000000; background-color: #ffa; } /* Styl pro tuto stránku, pravidla jenž nesouvisí s tématem záložek */ pre.code { color: #008; background: #fff; margin: 1em 2em; padding: 1ex; border: 1px dotted #800; } span.comment { color: #888; } /* Styl pro záložky */ div.tabs { } div.tabs div.menu { margin: 0; padding: 0; } div.tabs div.menu ul { display: inline; padding: 0 1em; } div.tabs div.menu ul li { list-style: none; display: inline; padding: 0 1ex; } div.tabs div.menu ul li a { text-decoration: none; color: #000; background: #bbb; e margin v tabs/content */ padding: 1px 1ex; /* 1px odpovídá stejné hodnotˇ border: 1px solid #666; } div.tabs div.menu ul li a.current { background: #eee; border-bottom: 1px solid #eee; } div.tabs div.menu ul li a:hover { 29 Kapitola 12. Záložky color: #fff; background: #eee; } div.tabs div.content { color: #333; background: #eee; margin: 1px 0 0 0; padding: 1ex 1em; border: 1px solid #000; clear: both; } /* Konec stylu pro záložky */ Jednoduché, horní záložky Tato stránka popisuje realizaci jednoduchých záložek. Samotná realizace záložek je roz <pre class="code"> text text ⋮ Samotný styl záložek je v základní verzi: <pre class="code">/* Styl pro záložky */ div.tabs { } div.tabs div.menu { margin: 0; padding: 0; } div.tabs div.menu ul { display: inline; padding: 0 1em; } div.tabs div.menu ul li { list-style: none; display: inline; padding: 0 1ex; } div.tabs div.menu ul li a { text-decoration: none; color: #000; background: #bbb; padding: 1px 1ex; /* 1px odpovídá stejné hodnotˇ e margin v tabs/content */ border: 1px solid #666; } div.tabs div.menu ul li a.current { background: #eee; border-bottom: 1px solid #eee; } div.tabs div.menu ul li a:hover { color: #fff; background: #eee; } div.tabs div.content { color: #333; background: #eee; margin: 1px 0 0 0; padding: 1ex 1em; border: 1px solid #000; 30 <spa Kapitola 12. Záložky clear: both; } Takto definovanné záložky se mi správnˇ e zobrazí v prohlížeˇ cích: FF 1.0.4 na Linuxu MSIE 6.0.2800.1106.xpsp1.020828-1920 na WinXP SP1 Oproti ˇ rešení s plovoucími prvky seznamu není možné mít dvˇ e sady záložek jednu standard První Druhá Tˇ retí ˇ Ctvrtá Pátá Toto je obsah právˇ e zvolené záložky. ežného textu až po tabulky. radu element˚ u, od bˇ Záložka m˚ uže obsahovat ˇ (1,1) (1,2) (1,3) (2,1) (2,2) (2,3) (3,1) (3,2) (3,3) Tento text je již mimo záložku. Radek Hnilica Last modified: Mon Aug 15 15:55:04 CEST 2005 Výše uvedený pˇríklad je vložen pomocí tagu imagedata s užitím atributu entityref. 31 Kapitola 13. Ruzné ˚ ukázky stylování V této kapitole uvádím r˚uzné ukázky stylování cˇ ástí html kódu. 13.1. Zobrazení kousku˚ kódu (Code Snippets) Odkazy: • Styling Code Snippets with CSS (http://www.sohtanaka.com/web-design/styling-pre-tags-with-css-codeblock/) • Styling Code blocks with CSS: Using pre HTML Tags (http://www.devarticles.com/c/a/Web-StyleSheets/Styling-Code-Blocks-with-CSS-Using-pre-HTML-Tags/) Ve svých "knihách" cˇ asto uvádím kousky kódu. Tyto jsou v DocBooku (../docbook/index.html) zapisovány tˇreba takem literallayout s nastaveným atributem class. kousek kódu programu další ˇ rádek kódu Po trasformaci do html dostane takový kousek kódu znaˇckování. <pre class="literallayout">kousek kódu programu rádek kódu další ˇ V této a nˇekolika dalších knihách používám pro tento pˇrípad následující stylování. pre.literallayout { background: url(images/lined_paper.gif); margin: 30px 40px; padding: 20px 1em 1em 3em; border: 0px none; border-left: 1px solid #ccc; font-family: monospace; color: #008; font-size: 12px; line-height: 20px; overflow: auto; } Zobrazení je postaveno na obrázku linkovaného papíru z kroužkového bloku. Obrázek je uložen mezi ostatními obrázky v souboru se jménem lined_paper.gif. Pro další je tˇreba vˇedˇet že: • • • Vzdálenost mezi linkami (stˇred—stˇred) je 20 pixel˚u. Obrázek je vysoký 40 pixel˚u. Obsahuje tedy jednu dírku a dvˇe linky. Obrázek je široký 1600 pixel˚u. 32 Kapitola 14. Vlastnosti 14.1. Pozadí (background) Odkazy: • CSS background-repeat Property (http://www.w3schools.com/css/pr_background-repeat.asp) • Nastavení pozadí se provádí bud’to atributem background jenž m˚uže mít uvedeno více hodnot. • • • • • body { background-image:url(’paper.gif’); background-repeat:repeat-y; } Tabulka 14-1. background-repeat hodnota popis repeat Pozadí se bude opakovat jako dlaždice. Opakuje se v obou jak horizontálním tak i vertikálním smˇeru. Tato volba je výchozí. repeat-x Pozadí se opakuje jen ve smˇeru osy x, tedy hotizontálnˇe. repeat-y Pozadí se opakuje jen ve smˇeru osy y, tedy vertikálnˇe. no-repeat Obrázek pozadí se neopakuje. Zobrazí se jen jednou. inherit Nastavení vlastnosti background-repeat se dˇedí z nadˇrazeného prvku. 33 III. Java Script ˇ Cást vˇenovaná javascriptu. Kapitola 15. Krátký popis jazyka * JavaScript je jazyk velmi podobný C a Javˇe. Bˇežnˇe se používá v prohlížeˇci. Pokud prohlížeˇc najde v HTML stránce JavaScriptový program tak jej vykoná. Pokud chceme vložit JavaScriptový program pˇrímo do html stránky, pak v hlaviˇcce nebo v tˇele stránky použijeme tag script <script type="text/javascript"> zde bude JavaScript program Pokud máme JavaScript program v samostatném souboru, naˇcteme jej do stránky takto: Deklarace promˇenné var mojePromena = "janka"; var jinaPromenna = 6; ˇ 15.1. Vetvení if/else/switch var hodnota = "nˇ eco"; switch(hodnota) { case ’cokoliv’: rekl jsete cokoliv’); document.write(’ˇ break; case ’neco’: document.write(’nˇ eco jste ˇ rekl’); break; default: document.write(’nerozumím tomu co jste ˇ rekl’); } 15.2. Cykly while/do/for var x = 1; while (x < 9) { document.write(x + ’cislo’); x++; } for (var i=0; i<10; i++) { } for () { } V cyklech m˚užeme použít pˇríkazy break a continue. Ten první pˇreruší vykonávání cyklu a program pokraˇcuje prvním pˇríkazem za cyklem. Je to takové násilné ukonˇcení cyklu. Druhý pˇríkaz continue skoˇcí na zaˇcátek cyklu. 35 Kapitola 16. Menu Odkazy: • Simple Drop-Down Menu v2.0 (http://javascript-array.com/scripts/simple_drop_down_menu/) • • • 36 Kapitola 17. Document * Odkazy: • DOM nodes and tree (http://www.howtocreate.co.uk/tutorials/javascript/dombasics) • getElementById(id) getElementsByTagName(name) document.getElementsByTagName(’p’)[indexOfParagraph] 37 IV. Technologie Kapitola 18. RESTfull WEB * Odkazy: • Architectural Styles and the Design of Network-based (http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm) Software Architectures • REST znamená REpresentational State Transfer, a jeho základy byly položeny v práci Architectural Styles and the Design of Network-based Software Architectures (http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm) Roye Thomase Fieldinga v roce 2000. REST je zp˚usob jak unifikovat práci s datovými zdroji r˚uznými protokoly. Nejˇcastˇeji se používá pomocí protokolu HTTP a tak se na tuto implementaci budu cˇ asto odkazovat. Základní operace které pˇri pˇrístupu k dat˚um potˇrebujeme jsou pojmenovány zkratkou CRUD. Jsou to: Tabulka 18-1. CRUD pˇríkaz popis SQL CREATE vytvoˇrení záznamu, zápis INSERT READ získání záznamu, cˇ tení SELECT UPDATE aktualizace záznamu, zmˇena UPDATE DELETE odstranˇení záznamu, smazání DELETE Pˇrístup ke zdroji pomocí HTTP(S) protokolu. Použijeme pˇríkaz GET: spojení se serverem example.org GET /Resource HTTP/1.1 Accept: application/formát ... Jako odpovˇed’ dostaneme HTTP/1.1 200 OK ... data odpovˇ edi 18.1. URI * Odkazy: • RESTful CRUD for HTML methods (https://cwiki.apache.org/S2PLUGINS/restful-crud-for-htmlmethods.html) • http://example.com/objednavka/1234 http://example.com/objednavka/ˇ císlo_objednávky http://example.com/objednavka/{ˇ císlo_objednávky } http://example.com/objednavka/{ˇ císlo_objednávky} 39 Kapitola 18. RESTfull WEB Jiný pˇríklad url: http://example.com/objednavka/{rok}/{mesic}/{den} 18.2. Operace * Získání informací o zdroji nebo celé kolekci. Tedy operace READ. V terminologii HTTP se používá pˇríkaz GET. 18.3. REST protokolem HTTP * Pˇríklad POST POST /objednavka HTTP/1.1 Host: restbucks.com Content-Type:application/xml Content-Length: 1234 kde kafe 2 ... 18.3.1. Použití POST místo PUT a DELETE * Proˇc, protože nˇekteˇrí klienti neumí PUT a DELETE. Napˇríklad v prohlížeˇci v HTML formuláˇri m˚užeme použít jen GET a POST. Informaci o metodˇe m˚užeme pˇridat do URL takto: /resource?_method=delete Nebo do tˇela vložíme _method=delete M˚užeme také použít hlaviˇcku X-HTTP-Method-Override: 40 Kapitola 18. RESTfull WEB 18.3.2. Mapování v Rails * GET /resource −→ index GET /resource/new −→ formuláˇr pro nový záznam POST /resource GET /resource/{id} −→ show GET /resource/{id};edit −→ formuláˇr pro editaci záznamu PUT /resource/{id} PUT /resource/{id} −→ DELETE 18.4. Použití Javascriptu * Odkazy: • Day two: Proper HTTP PUT & DELETE with jQuery. (http://becoming.smart.joyent.com/day_two.html) • var request = new XMLHttpRequest(); request.open("DELETE", "http://www.example.com/foo/bar.html", true); 41 Kapitola 19. CSS3 a HTML5 Kousek kódu vystˇrižený ze stránky for a beautiful web (http://forabeautifulweb.com/). <article id="l01" class="hentry"> ... <article id="l01" class="hentry"> I would like to share some very exciting news about