Návrh a tvorba WWW Přednáška 2 HTML. Standardy HTML 1991 HTML2000 XHTML 1 1994 HTML 22002 Tableless Web Design 1996 CSS 1 + JavaScript2005 AJAX 1997 HTML.

Prezentace na téma: "Návrh a tvorba WWW Přednáška 2 HTML. Standardy HTML 1991 HTML2000 XHTML 1 1994 HTML 22002 Tableless Web Design 1996 CSS 1 + JavaScript2005 AJAX 1997 HTML."— Transkript prezentace:

1 Návrh a tvorba WWW Přednáška 2 HTML

2 Standardy HTML 1991 HTML2000 XHTML 1 1994 HTML 22002 Tableless Web Design 1996 CSS 1 + JavaScript2005 AJAX 1997 HTML 42009 HTML 5 (draft) 1998 CSS 2 Cvičení budou zaměřeny na. (http://www.w3.org/TR/html5/)

3 HTML 5 ~= HTML + CSS + JS Offline / Storage Graphics / Multimedia Realtime / Communication CSS3 File / Hardware Access Nuts & Bolts Semantics & Markup Multimedia

4 Syntaxe a sémantika HTML Sémantika Není značka (tag) jako značka. Sémantika nám říká, jaký je význam jednotlivých značek. správně špatně Syntaxe Nemůžeme psát všechno všude. Syntaxe nám ukládá pravidla pro zápis html stránky. správně špatně Nadpis

5 Prvky HTML •Elementy, tagy –označují pomocí elementů. Každý element se skládá z počátečního tagu, obsahu elementu a ukončovacího tagu. –některé elementy (například a ) nemusí mít ukončovací tag •Atributy –Elementy se obvykle používají pro vyznačení struktury dokumentu. Pokud potřebujeme nějak podrobněji vymezit význam elementu, použijeme k tomu atribut. Atribut se zapisuje za počáteční tag. –Atribut má vždy nějakou hodnotu, která se mu přiřazuje. Pokud hodnota obsahuje pouze písmena, číslice, pomlčku a tečku, nemusí se hodnota atributu uzavírat do uvozovek. V opačném případě musíme hodnotu atributu uzavřít do uvozovek nebo do apostrofů. U jednoho tagu můžeme samozřejmě použít více atributů. –Atributy se mohou používat pouze u počátečních tagů, nikoliv u ukončovacích. •Znakové entity –V HTML mají znaky ' ' speciální význam. Pokud je potřebujeme zapsat do stránky, musíme použít tzv. znakovou entitu. Znaková entita má tvar &název_entity;.

6 DOCTYPE HTML vychází z SGML Pomocí jazyka SGML můžeme vytvářet definice libovolných značkovacích jazyků, kterým říkáme DTD (Document Type Definition). Značka určuje jakému DTD daný dokument odpovídá a říká se jí prolog. Pomocí značky pak můžeme určit, kterou verzi HTML v dokumentu používáme. Za slovem DOCTYPE následuje název použitého značkovacího jazyka pro dokument. Další část prologu jednoznačně identifikuje použitou verzi DTD pomoc veřejného identifikátoru PUBLIC nebo pomocí odkazu na soubor obsahující DTD pomocí klíčového slova SYSTEM následovaného URL adresou.

7 DTD v HTML HTML 4.01 Transitional –DTD obsahuje všechny elementy a atributy HTML kromě těch, které se používají pro rozdělení okna prohlížeče na rámy. –Veřejný identifikátor je: -//W3C//DTD HTML 4.01 Transitional//EN. Strict –DTD je již striktnější než Transitional. Neobsahuje žádné elementy a atributy, které slouží pro definici vizuálního vzhledu dokumentu (např. elementy font, center a atributy jako align a color). –Veřejný identifikátor je -//W3C//DTD HTML 4.01 Strict//EN. Frameset –DTD se používá na stránkách, které rozdělují okno prohlížeče do několik rámů pomocí elementu frameset. –Veřejný identifikátor je: -//W3C//DTD HTML 4.01 Frameset//EN. HTML 5 Pouze jedno DTD deklarované jako

8 Základní kostra HTML stránky První HTML stránka Tělo první HTML stránky.

9 Typ obsahu

10 Metadata

11 Sekční elementy

12 Seskupující elementy

13 Textové elementy

14 Editační elementy

15 Tabulkové elementy

16 Embedded elementy

17 Validátory –HTML, XHTML - http://validator.w3.org –HTML, XHTML - http://relaxed.vse.cz/relaxed/ –CSS - http://jigsaw.w3.org/css-validator/ –ATOM a RSS - http://validator.w3.org/feed/ –XML - http://www.stg.brown.edu/service/xmlvalid/ –XML Schema - http://www.w3.org/2001/03/webdata/xsv –… Analyzátory stránek a Rychlostní reporty –http://watson.addy.com/ –http://www.websiteoptimization.com/services/analyze/index.html –http://www.vertain.com/?sst –http://www.websitegoodies.com/tools/speed-test.php –…

18 Kódování češtiny v současné době používané kódování češtiny na 8bitech: –KOI-8 –Kameníci –x-mac-ce – Apple –CP852 – IBM na PC (DOS čeština) –CP1250 – Microsoft (Windows čeština) –ISO-8859-2 – mezinárodní standard (UNIX čeština) požadavek na jedinou globální abecedu –Východisko v 16 bitovém kódování –Unicode consorcium (1991) www.unicode.org

19 Unicode Unicode vychází z ASCII (prvních 127 znaků má shodný kód, ale na 16bitech). Verze 2.0 standardu obsahuje 38885 znaků světových abeced (včetně 20902 znaků Han písma – průmyslový standard Číny, Koreje, Japonska a Taiwanu) problémy: –větší (dvojnásobná) délka textů –256x větší znaková sada ve fontech (u Microsoftu mají Unicode fonty jen podmnožinu znaků, ale lze si pořídit i “plné” fonty) (Arial 140KB, Times New Roman 185 KB, Lucida Sans Unicode 298 KB) –nekompatibilní s 8bitovým prostředím – nelze současně používat Unicode a libovolné 8bitové kódování (již vyřešeno v rámci jednotlivých aplikací – Java, Word) –pro prosazení Unicode je třeba nalézt způsob, jak mohou stávající sw systémy založené na ASCII používat 16bitové znaky (částečně řešeno UTF-8)

20 Konverze Unicode na UTF-8 znak Unicodemax. významových bitůkódování UTF-8 0000–007F70xxx xxxx 0080–07FF11110x xxxx 10xx xxxx 0800–FFFF161110 xxxx 10xx xxxx 10xx xxxx

21 Literatura Sams Teach Yourself HTML5 in 10 Minutes (5th Edition), Steven Holzner, Sams, December 24, 2010, ISBN: 978-0672333330 HTML5: Up and Running,Mark Pilgrim,O'Reilly Media, August 24, 2010, ISBN: 978-0596806026 Introducing HTML5 (2nd Edition), Bruce Lawson, Remy Sharp, New Riders Press, September 25, 2011, ISBN: 978-0321784421 HTML5 For Dummies Quick Reference, Andy Harris, For Dummies, May 3, 2011, ISBN: 978-1118012529