Škola: Šablona: Název projektu: Číslo projektu: Autor: Tematická oblast: Název DUMu: Kód: Datum: Cílová skupina: Klíčová slova: Anotace:
Gymnázium, Brno, Slovanské náměstí 7 III/2 – Inovace a zkvalitnění výuky prostřednictvím ICT Inovace výuky na GSN prostřednictvím ICT CZ.1.07/1.5.00/34.0940 Lenka Šálková Digitální zpracování dat Úvod do tvorby webových stránek VY_32_INOVACE_IN.1.14 8. 1. 2013 Žáci středních škol Webová stránka, browser, jazyk HTML, XHTML 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
XML
• HTML
PHP
• Java
JavaScript
• Python
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.
Jazyk (X)HTML - značkovací jazyk - 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é) •
• Všechny atributy musí mít hodnotu • type="text/javascript"
• Hodnota atributu v uvozovkách
Příklad syntaxe
Pokus Ukázka
Nejjednodušší web na světě!
Hlavička V horní části souboru je nutné uvést deklaraci DTD (definice typu dokumentu)
Informace kdo to napsal, jak se stránka jmenuje, jestli jsou použity styly …
Tělo Představuje obsah stránky Zde napíšeme vše, co chceme, aby se na stránce zobrazovalo
Příklad:
Ukázka
Tento text se zobrazí
tučně a tento
kurzívou . A tento text bude normální.
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
