Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr Hepner, DiS. Informační a komunikační technologie Základy informatiky, Přírodopis 8. ročník 10 vyučovacích hodin Osobní počítače s přístupem na internet Přílohy: Zdroje informací: Buranský,I.: HTML a DHTML hotová řešení, Computer Press 2003 Kosek, J.: HTML tvorba dokonalých WWW stránek podrobný průvodce, Grada Publishing, 1998 http://www.jakpsatweb.cz/ http://www.jakpsatweb.cz/css/ http://www.webtvorba.cz/ Průřezová témata a jejich okruhy: OSV: Rozvoj schopnosti poznávání cvičení smyslového vnímání, pozornosti a soustředění; cvičení dovednosti zapamatování, řešení problémů; dovednosti pro učení a studium. Kreativita cvičení pro rozvoj základních rysů kreativity (pružnost nápadů, originalita). Učivo: Základy informatiky: Webový prohlížeč dokument ve formátu webové stránky prostředky HTML, XHTML, CSS Přírodopis: Ptáci Dílčí výstupy: Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS Realizace:
Tvorba webu Pro tvorbu dokumentu ve formátu webové stránky můžeme použít buď některou z mnoha k tomu určených aplikací, nebo můžeme vytvářet přímo zdrojový kód takového dokumentu (stránky) jako neformátovaný text. Alespoň zběžné seznámení se zdrojovým kódem webové stránky je určitě užitečné i v případě, že se později rozhodneme pro využití jiných možností tvorby webu. V tzv. html kódu lze vytvářet jednoduché a přitom i téměř profesionálně vypadající dokumenty. Než začneme tento kód používat, seznamme se alespoň s několika odbornými pojmy. V uvedeném pořadí poněkud nastiňují také směr, jímž se, jak se zdá, tvorba webu ubírá. HTML HyperText Markup Language jazyk pro tvorbu webu dokumentu ve formátu webové stránky. Tři hlavní druhy informace v takovém dokumentu: formátovaný text, obrázky, odkazy. (Další, tzv. metainformace, např. o znakové sadě, klíčových slovech atd.) XHTML Extensible HTML HTML s omezujícími doporučeními, aby HTML dokument mohl být zpracováván prostředky pro automatizaci. Omezení nezužuje množinu možných výsledných podob, pouze umravňuje tvůrce webu. CSS Cascading Style Sheets kaskádové styly prostředek pro oddělení formy zobrazení dokumentu od jeho obsahu. DHTML Dynamic HTML možnost programování skriptů v programovacích jazycích, např. javascript nebo visual basic for scripting. Jazyk HTML a jeho prvky Pro zápis kódu využijeme aplikaci Poznámkový blok, případně podobný editor pro neformátovaný text. Části kódu se oddělují tzv. značkami. Anglicky se značkám říká tagy a poznáme je podle špičatých závorek. Text uzavřený dvojicí párových značek tvoří tzv. prvek s obsahem, nepárová značka se někdy nazývá prvek bez obsahu:
Prvky s obsahem (párové značky tagy): <Značka atribut= hodnota > ( start tag ) obsah prvku </Značka> ( end tag ) Prvky bez obsahu (nepárové značky): <Značka atribut= hodnota /> Napišme či nakopírujme do okna Poznámkového bloku první jednoduchý html kód. První příklad zdrojového textu HTML dokumentu <html> <head> </head> <title>sovy</title> <body> Sovy žijící v Evropě Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách hlavy. Na našem území žije několik druhů sov. Sovy žijící na severu Evropy: Sovice sněžná Kalous pustovka Puštík bělavý Puštík vousatý </html> </body> Sovy naší fauny: Sova pálená Výr velký Kalous ušatý Kulíšek nejmenší Puštík obecný Sýček obecný
Po uložení do souboru s příponou html a otevření webovým prohlížečem uvidíme značně nevzhledný a nepřehledný výsledek:
Doplnění zdrojového textu o definice stylů <html> <head> <title> Sovy </title> <style> body {background-color: yellow; color: darkblue; font-family: serif} </style> </head> <body> Sovy žijící v Evropě Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách hlavy. Na našem území žije několik druhů sov. Sovy žijící na severu Evropy: Sovice sněžná Kalous pustovka Puštík bělavý Puštík vousatý </body> </html> Sovy naší fauny: Sova pálená Výr velký Kalous ušatý Kulíšek nejmenší Puštík obecný Sýček obecný Mezi značkami <style> a </style> jsme definovali styl. Ten platí v tomto případě pro celý dokument (slovo body před složenou závorkou) a spočívá v určení barvy pozadí (atribut background-color, hodnota yellow) a barvy textu (atribut color, hodnota darkblue). Dále jsme jako součást stylu dokumentu určili font písma.
Odstavce, nadpisy a řez písma, vynucené řádkování Nové řádky i případné řady mezer ve zdrojovém kódu jsou webovým prohlížečem interpretovány jako jedna mezera. Členění na odstavce či řádky docílíme vhodným použitím k tomu určených značek. Do části body doplníme značky, jak je uvedeno na další stánce. Zjistíme, že dokument tím dostává již přehledný a esteticky únosný tvar: <body> <h1> Sovy žijící v Evropě </h1> <p> Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách hlavy. Na našem území žije několik druhů sov. <h2> Sovy žijící na severu Evropy: </h2> <p> Sovice sněžná <br /> Kalous pustovka <br /> Puštík bělavý <br /> Puštík vousatý <h2> Sovy naší fauny: </h2> <p> Sova pálená <br /> Výr velký <br /> Kalous ušatý <br /> Puštík obecný <br /> Sýček obecný </body>
Prvky s obsahem a bez obsahu Prvky s obsahem (párové značky tagy) <Značka atribut= hodnota > obsah prvku </Značka> <html> </html> <head> </head> <title> </title> <style> </style> <body> </body> <h1> </h1> <h2> </h2> <p> <p> <b> </b> <i> </i> <u> </u> Poslední tři párové značky nejsou blokové. To znamená, že před ani za jimi vymezeným obsahem nebude odřádkováno, pokud to nezařídíme nepárovou značkou <br /> nebo párem <p> dokument ve formátu webové stránky hlavička dokumentu titulek (text do titulkového pruhu oddíl stylů (popisuje formát dokumentu) tělo dokumentu (zde je vlastní obsah webové stránky) nadpis nejvyšší úrovně nadpis druhé úrovně (většinou lze takto rozlišit nadpisy šesti úrovní) odstavec tučný řez kurzíva podtržení není dobré je používat Prvky bez obsahu (nepárové značky) <Značka atribut= hodnota /> <br /> Poznámka nový řádek Ve zdrojovém textu je dobré používat pro zvýšení přehlednosti řady mezer na začátcích řádků. Jde o neformátovaný text, jinak by takové použití mezer zajisté nebylo vhodné.
Použití značek pro řez písma Zkusíme do dokumentu doplnit odstavec souvislého textu o severských sovách a za ní nadpis třetí úrovně vytvořit použitím kurzívy (nikoli značky <h3>: Co je ještě dobré znát <h2> Sovy žijící na severu Evropy: </h2> <p> Na našem území mohou v ojedinělých případech zahnízdit i některé severské druhy sov. Na kroměřížsku tak učinil v devadesátých letech minulého století kalous pustovka a v poslední době se na Šumavě vzácně vyskytuje puštík bělavý. <br /> <i> Typičtí představitelé severských sov: </i> <br /> Sovice sněžná<br /> Kalous pustovka<br /> Puštík bělavý<br /> Puštík vousatý (také bradatý na obrázku) <br /> <h2> Sovy naší fauny: </h2> Při definici barev můžeme kromě anglických názvů barev použít funkci rgb a namíchat vlastní barvu pomocí číselně zadaných intenzit červné, zelené a modré složky. Rozpětí hodnot je 0 až 255. Styly V hlavičce dokumentu v oddílu stylů umisťujeme deklarace v jednom ze tří tvarů: selektor.třída {vlastnost: hodnota; } selektory: body, p, h1 {vlastnost: hodnota; } třídy: s tečkou na začátku, volí je autor dokumentu selektor.třída {vlastnost: hodnota; } např. h1.kapitoly: platí pro třídu kapitoly, ale pouze v případě, že je tato třída použita pro selektor h1
Například <style> body {background-color: rgb(220,250,200); color: rgb(120,60,0); font-family: serif} (times, verdana, tahoma, ).nadpis {color: darkblue; font-family: arial} (verdana, tahoma, ) </style> A potom v těle <h1 class="nadpis"> Sovy žijící v Evropě </h1> Podobně ve stylech třeba.podnadpis {color: green; font-family: tahoma} A potom v těle <h2 class="podnadpis"> Sovy žijící na severu Evropy: </h2> a <h2 class="podnadpis"> Sovy naší fauny: </h2>
Rozdíl mezi deklarací stylů a použití atributů uvnitř značek: Ve stylech se používá syntaxe vlastnost: hodnota; (dvojtečka s mezerou, při opakování středníky s mezerami) Uvnitř značek je syntaxe atribut= hodnota (rovnítko bez mezer, při opakování mezery bez středníků) K čemu ty styly vlastně jsou? Můžeme důsledně oddělit obsah a formu (<body> </body>) (<style> </style>) Doplnění zdrojového textu o možnost kontroly normy XHTML Na začátek zdrojového kódu (před <html>) můžeme doplnit řádku, která informuje prohlížeč při kontrole kódu na normu xml, že jde o dokument obsahující české znaky. <?xml version="1.0" encoding="windows-1250"?> <html> </html> Řádka s obsahem <?xml version="1.0" encoding="windows-1250"?> není součástí html kódu. Pokud ji zapíšeme na začátek zdrojového textu (před zdrojový kód ohraničený značkami <html> a </html>), můžeme zkontrolovat, zda tento kód splňuje normu XHTML. Stačí soubor uložit s příponou xml a otevřít jej webovým prohlížečem. K čemu je kontrola normy XHTML prostřednictvím xml? Zjistíme tak chyby, se kterými si náš prohlížeč třeba poradí, ale při zpracování jiným softwarem by mohly vadit.
Při úspěšné kontrole se xml soubor zobrazí třeba takto:
Při neúspěšné kontrole se objeví nějaké chybové hlášení:
Obrázky Obrázek umisťujeme na webovou stránku prostřednictvím odkazu na soubor s tímto obrázkem. Odkaz zapisujeme do nepárové značky img jako hodnotu jejího atributu src. <body> <h1 class="nadpis"> Sovy žijící v Evropě </h1> <p> Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách hlavy. Na našem území žije několik druhů sov. <h2 class="podnadpis"> Sovy žijící na severu Evropy: </h2> <img src="s1.jpg" /> <p> Na našem území mohou v ojedinělých případech zahnízdit i některé severské druhy sov. Na kroměřížsku tak učinil v devadesátých letech minulého století kalous pustovka a v poslední době se na Šumavě vzácně vyskytuje puštík bělavý. <br /> <i> Typičtí představitelé severských sov: </i> <br /> Sovice sněžná<br /> Kalous pustovka<br /> Puštík bělavý<br /> Puštík vousatý (také bradatý na obrázku) <br /> <h2 class="podnadpis"> Sovy naší fauny: </h2> <img src="s2.jpg" /> <p> Sova pálená (na obrázku) <br /> Výr velký <br /> Kalous ušatý <br /> Puštík obecný <br /> Sýček obecný </body>
Atributy značky img pro obrázek Obtékání obrázku textem a jeho zarovnání doleva či doprava můžeme dosáhnout použitím atributu align s hodnotou left nebo right. <body> hlavy. </body> <h1 class="nadpis"> Sovy žijící v Evropě </h1> <p> Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách Na našem území žije několik druhů sov. <h2 class="podnadpis"> Sovy žijící na severu Evropy: </h2> <img src="s1.jpg" align="right" /> <p> Na našem území mohou v ojedinělých případech zahnízdit i některé severské druhy sov. Na kroměřížsku tak učinil v devadesátých letech minulého století kalous pustovka a v poslední době se na Šumavě vzácně vyskytuje puštík bělavý. <br /> <i> Typičtí představitelé severských sov: </i> <br /> Sovice sněžná<br /> Kalous pustovka<br /> Puštík bělavý<br /> Puštík vousatý (také bradatý na obrázku) <br /> <h2 class="podnadpis"> Sovy naší fauny: </h2> <img src="s2.jpg" align="left" /> <p> Sova pálená <br />.
Lépe je ale použít vlastnost float v oddíle stylů <?xml version="1.0" encoding="windows-1250"?> <html> <head> <title> Sovy </title> <style> body {background-color: rgb(220,250,200); color: rgb(120,60,0); font-family: serif}.nadpis {color: darkblue; font-family: arial}.podnadpis {clear: both; color: green; font-family: verdana}.obrl {float: left}.obrp {float: right} </style> </head> <body> <h1 class="nadpis" > Sovy žijící v Evropě </h1> <p> Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách hlavy. Na našem území žije několik druhů sov. <h2 class="podnadpis" > Sovy žijící na severu Evropy: </h2> <img class="obrp" src="s1.jpg" /> <img class="obrl" src="s2.jpg" /> </body> </html> Hodnotou atributu src může být název souboru s obrázkem bez cesty. Pak je potřeba, aby byl soubor s obrázkem umístěn ve stejné složce, jako soubor se zdrojovým html kódem. Častěji se používá v src cesta typu Soubory\Obrázek.jpg. Obrázky a další případné soubory jsou sdruženy ve složce Soubory a ta je vnořena do složky, kde je html soubor. Můžeme ale použít i cestu absolutní (začínající od hlavní složky na disku, např. C:\Dokumenty\Obrázky\Obr.jpg ) a nebo webovou adresu (například http://www.abc.cz/obrazky/xyz.jpg ).
Párové značky nejvyšší úrovně Zopakování <html>; <head> a <body> celý html dokument; rozdělení na hlavičku a tělo Párové značky v hlavičce <title> <style> titulek (do titulkového pruhu okna prohlížeče) deklarace stylů Párové značky v těle <p> <h1> až <h6> <i> <b> <a> odstavec nadpis kurzíva tučné písmo odkaz Nepárové značky <br /> <hr /> <img /> nový řádek horizontální čára obrázek
Odkazy V těle stránky: <body> <a href="s3.jpg"> Kalous ušatý </a> <br /> </body> Hodnotou atributu href může být podobně jako v případě s obrázky název souboru bez cesty, včetně cesty a nebo to může být webová adresa (například http://www.abc.cz ).
Styly odkazů V hlavičce dokumentu v oddílu stylů: <style> body {background-color: rgb(220,250,200); color: rgb(120,60,0); font-family: serif}.nadpis {color: darkblue; font-family: arial}.podnadpis {clear: both; color: green; font-family: verdana}.obrl {float: left}.obrp {float: right}.odkaz a:active {color: pink}.odkaz a:hover {color: blue; background-color: yellow} ( pořadí (!) ).odkaz a:link {color: red; text-decoration: none}.odkaz a:visited {color: green; text-decoration: none} </style> V těle dokumentu použijeme třídu odkaz například pro odstavec s odkazy. Orámování obrázků Obrázek (nebo jiný prvek) můžeme orámovat a odsadit od textu či obecně od jeho okolí. Využijeme další atributy v definici stylu pro třídy obrl a obrp v našem html dokumentu:.obrl.obrp {float: left; border-color: red; border-style: solid; margin: 20; padding: 10} {float: right; border-color: red; border-style: double; margin: 20; padding: 5}
Pro vlastnost border-style znamená hodnota solid rámeček tvořený plnou čarou, hodnota double dvojitou plnou čarou a lze použít i další hodnoty. Vlastností margin nastavujeme odsazení od okolí (vně rámečku) a vlastností padding odsazení rámečku od obrázku. V souvislosti s obtékáním obrázku je dobré umět od nějakého prvku obtékání ukončit. K tomu slouží atrribut clear s hodnotou both Clear: both.
Seznamy Seznam je tvořen položkami (krátkými odstavci, třeba i jen jednoslovnými). Položky mohou být opatřeny odrážkami nebo mohou být číslovány. Číslovaný seznam Nejjednodušší číslovaný seznam vytvoříme kdekoli v těle dokumentu pomocí párových značek <ol> </ol>. Uvnitř jsou definovány položky seznamu párovými značkami <li> </li>: <ol> </ol> <li>první položka</li> <li>druhá položka</li> Použijeme-li místo značek <ol> </ol> značky <ul> </ul>, dostaneme nečíslovaný seznam. Pro seznam lze také využít třídu definovanou v oddíle stylů a pomocí ní ovlivnit formu číslování (arabské číslice, římské číslice, latinská písmena, ) nebo tvar odrážek. Náš dokument ve formátu webové stránky může nyní vypadat takto: <html> <head> <title>sovy</title> <style> body {background-color: rgb(220,250,200); color: rgb(120,60,0); font-family: serif}.nadpis {color: darkblue; font-family: arial}.podnadpis {clear: both; color: green; font-family: verdana}.obrl {float: left; border-color: red; border-style: solid; margin: 40; padding: 10}.obrP {float: right; border-color: red; border-style: double; margin: 20; padding: 5}.odkaz a:active {color: pink}.odkaz a:hover {color: blue; background-color: yellow}.odkaz a:link {color: red; text-decoration: none}.odkaz a:visited {color: green; text-decoration: none}
</style> </head> <body class="odkaz"> <h1 class="nadpis" > Sovy žijící v Evropě </h1> <p> Sovy jsou noční draví ptáci. Jsou to jediní naši ptáci, kteří mají oči umístěné vedle sebe a nikoli po stranách hlavy. Na našem území žije několik druhů sov. <h2 class="podnadpis" > Sovy žijící na severu Evropy: </h2> <img src="s1.jpg" class="obrp" /> <p> Na našem území mohou v ojedinělých případech zahnízdit i některé severské druhy sov. Na kroměřížsku tak učinil v devadesátých letech minulého století kalous pustovka a v poslední době se na Šumavě vzácně vyskytuje puštík bělavý. <br /> <i> Typičtí představitelé severských sov: </i> <br /> <ol> <li>sovice sněžná</li> <li>kalous pustovka</li> <li>puštík bělavý</li> <li>puštík vousatý (také bradatý na obrázku)</li> </ol> <h2 class="podnadpis"> Sovy naší fauny: </h2> <img src="s2.jpg" class="obrl" /> <ol> <li>sova pálená (na obrázku)</li> <li>výr velký</li> <li><a href="s3.jpg"> Kalous ušatý </a></li> <li>puštík obecný</li> <li>sýček obecný</li> </ol> </body> </html>