Škola: Gymnázium, Brno, Slovanské náměstí 7 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN prostřednictvím ICT Číslo projektu: CZ.1.07/1.5.00/34.0940 Autor: Lenka Šálková Tematická oblast: Digitální zpracování dat Název DUMu: Úvod do tvorby webových stránek Kód: VY_32_INOVACE_IN.1.14 Datum: 8. 1. 2013 Cílová skupina: Žáci středních škol Klíčová slova: Webová stránka, browser, jazyk HTML, XHTML Anotace: Prezentace k úvodní hodině věnované tvorbě webu. Vhodné prezentaci doplnit praktickou prací s textovým editorem PS pad.
Úvod do tvorby internetových stránek
WWW - World Wide Web Klient (browser, prohlížeč) je program, který komunikuje s uživatelem, na základě pokynů uživatele se obrací na jednotlivé servery, získává od nich data a zobrazuje je. Př. Microsoft Internet Explorer, Netscape Navigator, Mozilla Server je program, který přijímá a obsluhuje požadavky klientů. Př. Apache, Microsoft Internet Information Server, Zope
Užité jazyky Internetové stránky - vytvořené v širokém spektru programovacích jazyků a jejich jednotlivých verzí. jazyky nezávislé na vybavení serveru (je nutné zajistit pouze možnost stahování dat), jsou vyhodnocovány plně na straně klientského počítače (např. HTML). jazyky závislé na serveru interpretace příkazů probíhá buď částečně, nebo zcela na serveru (např. AJAX, PHP).
Příklady jazyků pro tvorbu internetových stránek XHTML HTML Java Python XML PHP JavaScript ASP
WWW - historie První specifikace (0.9) pochází z roku 1991. Zatím poslední schválená verze je 4.01 z roku 1999. V současnosti se pracuje na verzi 5, která by měla přinést především větší podporu multimédií. Za vývoj a specifikace odpovídá konsorcium W3C. http://www.w3.org/markup/ Na návrhy konsorcia W3C se v současné době nahlíží jako na standardy.
Standardy pro Web HTTP HyperText Transport Protocol určuje pravidla komunikace mezi klientem a serverem. HTML HyperText Markup Language je jazyk, kterým se zapisují WWW stránky. Interpretaci stránky zajišťuje klient. XHTML extensible HyperText Markup Language je jazyk, který vznikl přizpůsobením HTML pravidlům XML. CSS Cascading Style Sheets (kaskádové styly) slouží k popisu výsledného vzhledu stránky.
- značkovací jazyk Jazyk (X)HTML - HTML dokument je obyčejný textový soubor - K dokumentu se přidávají značky (tagy), které upravují vzhled dokumentu - Tyto značky umí číst a zpracovat program prohlížeč - Dokument bývá uložen s přípomou HTM nebo HTML
HTML editory V čem vlastně HTML dokument psát? K dispozici jsou dvě základní cesty: WYSIWYG editory; vizuální tvorba, to, co právě píšete či formátujete, reálně vidíte. Příkladem může být FrontPage či OpenOffice Writer s funkcí uložit jako HTML. non WYSIWYG editory; psaní značek, textu a kódu. Nevidíme přímo výsledek, ale máme nad ním plnou kontrolu. PSPad Editor H-Brouczek Roden Web Editor
Proč se učit psát v HTML kódu Plná kontrola nad výsledkem psaní. Možnost snadného odstranění chyb. Znalost struktury kódu, snazší optimalizace nebo možnost používat cizí části kódů Výsledný soubor je zpravidla znatelně menší, než stránky generované WYSIWYG editory - úspory datových přenosů a vyšší rychlost načítání ze serveru.
Jazyk XHTML Je to značkovací jazyk, jednotlivé značky se nazívají tagy v názvech značek, atributů malá písmena Všechny značky musí být uzavřeny (párové) <p> </p> Všechny atributy musí mít hodnotu type="text/javascript" Hodnota atributu v uvozovkách
<html > <head> <title> Pokus </title> </head> <body> <h1> Ukázka</h1> Nejjednodušší web na světě! </body> </html> Příklad syntaxe
Hlavička <head> V horní části souboru je nutné uvést deklaraci DTD (definice typu dokumentu) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd/> <html xmlns="http://www.w3.org/tr/xhtml"> <head> Informace kdo to napsal, jak se stránka jmenuje, jestli jsou použity styly </head>
Tělo <body> Představuje obsah stránky <body> Zde napíšeme vše, co chceme, aby se na stránce zobrazovalo </body> Příklad: <body> <h1> Ukázka</h1> Tento text se zobrazí <b>tučně</b> a tento <I> kurzívou </I>. A tento text bude normální. </body>
Cvičení - Vyhledejte zajímavé stránky věnující se vytváření WWW stránek - Prohlédněte si zdrojový kód - Pokuste se vyhledat některé méně známé www klienty (browser)
Literatura: PÍSEK, Slavoj. HTML: začínáme programovat. 3., aktualiz. vyd. [i.e.] 1. vyd. Praha: Grada. ISBN 978-80-247-3117-9. PROKOP, Marek. CSS pro webdesignery: [kaskádové styly pro webdesignéry]. Vyd. 1. Praha: Mobil Media, 2003, 190 s. ISBN 80-865-9335-5. CASTRO, Elizabeth, Bruce HYSLOP. HTML5 a CSS3. Vyd. 1. Praha: Computer press, 2012, 288 s. ISBN 978-802-5137-338.
Zajímavé stránky: http://www.jakpsatweb.cz/ http://www.owebu.org/cze/html/text.php