Registrační číslo projektu: CZ.1.07/1.4.00/21.3712 Škola – adresa: Základní škola T. G. Masaryka Ivančice, Na Brněnce 1, okres Brno-venkov, příspěvková organizace www.zstgmivancice.cz
[email protected] Na Brněnce 1, Ivančice, okres Brno-venkov Šablona: III/2 č. 4 Ověření ve výuce (dne): 11. 9. 2012 Třída: 9. A, 9. B, 9. C
Pořadové číslo hodiny: 3 Předmět: Tvorba webových stránek Název:
Základní struktura www stránky
Anotace: Materiál seznamuje žáka s jednotlivými cestami, kterými se lze při tvorbě webu vydat a z čeho se web nejčastěji skládá. Výklad je doplněn příklady a ukázkami webů vytvořených různými způsoby. Prezentace je součástí výuky tvorby webových stránek bez znalosti HTML jazyka. Zápis s dalšími úkoly je k dispozici na www.zstgmivancice.cz/studium/info9/kap02.html. Autor: Mgr. Otmar Němec Jazyk: čeština Očekávaný výstup: Uvědomuje si všechny cesty, kterými lze web vytvořit. Klíčová slova: web, www stránka, validátor, webmaster Rozvíjené klíčové kompetence: KU, KŘP Druh učebního materiálu: prezentace Druh interaktivity: kombinované Cílová skupina: žák Stupeň a typ vzdělávání: základní vzdělávání – druhý Ročník: devátý Celková velikost: 1 MB
Základní struktura www stránky Web Co je to web? slovem web se často označuje celosvětová síť dokumentů slovem web se také označují jednotlivé dokumenty na tomtéž webovém serveru nebo internetové stránce v každém případě celý Internet je složen z různých webů, které mají různý obsah webové stránky mohou všichni uživatelé prohlížet pomocí webových prohlížečů (internetových prohlížečů) pro přenos dokumentů mezi webovým serverem a PC uživatele se používá protokol HTTP
Samostatná práce v hodině: zjisti, kdo je autorem webu (zakladatelem). Autorem webu je Tim Berners-Lee.
Základní struktura www stránky Web Další pojmy k webu Webmaster vytváří a publikuje obsah Internetu (tvůrce webových stránek) osoba, která spravuje internetové stránky, stará se o jejich správnou funkčnost, aktuální obsah Hypertext informace na webu jsou prezentovány v podobě hypertextu (text, který je protkán řadou odkazů), který je vytvořen použitím značek HTML nebo XHTML HTML nebo XHTML značkovací jazyky pro tvorbu hypertextových dokumentů Samostatná práce v hodině: zjisti, k čemu budeš používat v dalších hodinách protokol FTP.
Základní struktura www stránky Web Části webové stránky webová stránka má svůj obsah, nese určitou informaci informace mohou být podány různými způsoby: - text - zformátovaný text - multimediální data (obrázky, grafické prvky, videa, zvuky) - tabulky - seznamy - odkazy
Samostatná práce v hodině: které způsoby podání informací určitě najdeš na školním webu?
Základní struktura www stránky Web Jak na tvorbu webové stránky 1. Bez znalosti HTML jazyka – neprofesionálně: - vytvořit dokument v některé aplikaci určené pro Windows, např. Microsoft Office (Word, Excel, Powerpoint) a v této aplikaci dokument uložit jako HTML (bohužel ne vždy tento export dopadne dobře), výhodou je jednoduchost vytvoření, nevýhody jsou velikost zdrojového souboru, velká nepřehlednost zdrojového kódu, do kterého je zpětně již velmi obtížné zasahovat. 2. Bez znalosti HTML jazyka – profesionálně: - bezplatnou možností, jak jednoduše vytvořit a publikovat vlastní internetové stránky, je např. server www.webnode.cz. Samostatná práce v hodině: zkoušel jsi některou z možností publikace?
Základní struktura www stránky Web Jak na tvorbu webové stránky 3. S částečnou znalostí HTML jazyka – WYSIWYG editory: - umožňují rychlejší tvorbu webových stránek bez hlubší znalosti jazyka HTML. Nevýhodou tvorby webových stránek přes tento druh editorů je zdrojový kód plný nevhodně rozmístěných značek a svojí velikostí až dvacetkrát větší, než by mohl být (jedná se např. o tyto programy: Microsoft Expression Web, Adobe Dreamweaver...). 4. Se znalostí HTML jazyka: - určené pro přímou práci s kódem (např. Poznámkový blok, Golden HTML editor). Samostatná práce v hodině: zjisti, co znamená zkratka WISIWYG.
Základní struktura www stránky Web Jak hledat chyby ve zdrojovém kódu stránky? k tomuto účelu slouží tzv. validátory validátor HTML a XHTML je bezplatná služba ověřující validitu webových dokumentů (správnost zdrojového kódu) nevalidní stránka spoléhá na opravy svých chyb v prohlížečích různé prohlížeče (Internet Explorer, Mozilla Firefox, Opera) mohou opravovat chybný kód různě a na výsledek se tak nelze spoléhat důsledkem chybného zdrojového kódu může dojít k jinému zobrazení stránky v Internet Exploreru a k jinému např. v Mozille Firefoxu Samostatná práce v hodině: najdi na internetu adresu validátoru.
Základní struktura www stránky Web Práce s validátorem: v internetovém prohlížeči zadáme adresu http://validator.w3.org zobrazí se stránka s následujícím oknem:
www.zstgmivancice.cz
do řádku adresa vepíšeme adresu webu, u něhož chceme zkontrolovat validitu, tedy správnost zdrojového kódu
Potvrdíme tlačítko „Check“ (zkontrolovat).
Základní struktura www stránky Web Zjištění chyb ve zdrojovém kódu po kontrole webu dojde k zobrazení hlášení o chybách v kódu
pod zobrazeným oknem lze na webu validátoru ještě vyčíst kompletní přehled chyb a upozornění ne vždy jsou vypsané chyby ale skutečnými chybami Samostatná práce v hodině: najdi web s největším množstvím chyb a alespoň 2 weby, které budou validní.
Základní struktura www stránky Zdroj
Použité obrázky validátoru jsou vlastní tvorbou autora. Další obrázky jsou dostupné pod licencí Microsoft Office verze 2010 na http://office.microsoft.com.