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 Na Brněnce 1, Ivančice, okres Brno-venkov www.zstgmivancice.cz zstgmasaryka@seznam.cz Šablona: III/2 č. 4 Ověření ve výuce (dne): 11. 9. 2012 Pořadové číslo hodiny: 3 Třída: 9. A, 9. B, 9. C 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
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.
Další pojmy k webu master 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.
Čá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?
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?
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, 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.
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.
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 Potvrdíme tlačítko Check (zkontrolovat). do řádku adresa vepíšeme adresu webu, u něhož chceme zkontrolovat validitu, tedy správnost zdrojového kódu
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í.
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.