Návrh a tvorba WWW Cvičení 1 HTML 5. Pracovní prostředí Vývojové prostředí NetBeans (www.netbeans.org) Webový server Apache (http://httpd.apache.org/)

Prezentace na téma: "Návrh a tvorba WWW Cvičení 1 HTML 5. Pracovní prostředí Vývojové prostředí NetBeans (www.netbeans.org) Webový server Apache (http://httpd.apache.org/)"— Transkript prezentace:

1 Návrh a tvorba WWW Cvičení 1 HTML 5

2 Pracovní prostředí Vývojové prostředí NetBeans (www.netbeans.org) Webový server Apache (http://httpd.apache.org/) Databázový server Oracle Database Express Edition (http://www.oracle.com) MySQL (http://www.mysql.com) Webový prohlížeč FireFox (http://firefox.mozilla.cz/) FireBug (http://getfirebug.com/) FireFTP (http://fireftp.mozdev.org/)

3 Hostingová služba Fakultní hosting Dostupný na adrese http://fei-hosting.upceucebny.cz –Apache 2.2.20 –PHP 5.3 –MySQL 5.5.15 Databázový server Dostupný na adrese http://sql101.upceucebny.cz. Více informací k serveru poskytnou vyučující databázových systémů (Žák, Macháček, Rulicová) –Oracle 11g Free hosting Např. http://php5.cz, http://ic.cz, http://www.webzdarma.cz, …

4 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/)

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

6 Sémantika HTML Není značka (tag) jako značka. Sémantika nám říká, jaký je význam jednotlivých značek. příklad: správně špatně Nadpis

7 Syntaxe HTML Nemůžeme psát všechno všude. Syntaxe nám ukládá pravidla pro zápis html stránky. příklad: správně špatně

8 První webová stránka zdrojový kód: blok_1/c01.html

9 Projekt cvičení Cílem cvičení je vytvořit hlavní stránku rezervační aplikace. –osvojení si základních syntaktických pravidel –porozumět základní konstrukci www stránky –osvojit si význam základních tagů html jazyka

10 Rozložení stránky Header –Navigation Featured Body Footer –Copyright

11 Header zdrojový kód: blok_1/c02.htm

12 Featured zdrojový kód: blok_1/c03.htm

13 Body I zdrojový kód: blok_1/c04.htm

14 Body II zdrojový kód: blok_1/c05.htm

15 Footer zdrojový kód: blok_1/c06.htm

16 Opakování tagů Struktura : obecný dokument, část aplikace : hlavička sekce : patička sekce : hlavní navigace : samostatný a nezávislý obsah na zbytku stránky : obsah spojen s hlavním obsahem stránky nebo článku : doplňkový obsah, který je možno vyjmout bez ovlivnění významu obsahu TextSeznam : nadpis x-té úrovně : odrážkový seznam : odstavec : položka seznamu : hypertextový odkaz Obrázek : obrázek

17 Validace stránky http://validator.w3.org/- http://relaxed.vse.cz/relaxed/ Validátory –http://validator.w3.org/- http://relaxed.vse.cz/relaxed/ –https://addons.mozilla.org/cs/firefox/addon/html-validator/ Analyzátory a rychlostní reporty –http://code.google.com/intl/cs/speed/page- speed/download.html#extension-rel-ff –https://addons.mozilla.org/en-US/firefox/addon/yslow/

18 Sekční elementy

19 Seskupující elementy

20 Textové elementy

21 Editační elementy

22 Tabulkové elementy

23 Rich Picture původ je v metodologii měkkých systémů (1981) slouží ke komplexnímu pochopení situace/problému tvoří se jako obrázek (skica) pro tvorbu nejsou definována striktní pravidla Rich picture by měl vyjadřovat: –účastníky projektu a jejich interakce se systémem –základní prvky a funkce systému (stávající i nově vyvíjené) –klíčová slova systému –požadavky, pokyny, konverzace

24 Rich Picture - ukázka

25 Kontrolní otázky 1.Co je to hosting? 2.Jak poznám, v jaké verzi HTML jazyka je stránka vytvořena? 3.Jaký je rozdíl mezi sémantikou a syntaxí jazyka? 4.Jak vypadá základní kostra HTML stránky?