Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Výstupový indikátor 06.43.19

Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty

Motivační název:

Tvorba webu I

Autor:

Petr Hepner, DiS.

Vzdělávací oblast:

Informační a komunikační technologie

Vzdělávací obory:

Základy informatiky, Přírodopis

Ročník:

8. ročník

Časový rozsah:

10 vyučovacích hodin

Pomůcky:

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:

Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.

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): obsah prvku

( start tag ) ( end tag )

Prvky bez obsahu (nepárové značky): Napišme či nakopírujme do okna Poznámkového bloku první jednoduchý html kód. První příklad zdrojového textu HTML dokumentu Sovy 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ý Sovy naší fauny: Sova pálená Výr velký Kalous ušatý Kulíšek nejmenší Puštík obecný

Sýček obecný Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.

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ů Sovy <style> body {background-color: yellow; color: darkblue; font-family: serif} 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ý 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 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:
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ý

Sovy naší fauny:

Sova pálená
Výr velký
Kalous ušatý
Puštík obecný
Sýček obecný



Prvky s obsahem a bez obsahu Prvky s obsahem (párové značky – tagy) obsah prvku … … … <style>… …

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

…
… … …

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
nebo párem
…

Prvky bez obsahu (nepárové značky)

nový řádek

Poznámka 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
: …

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ý.
Typičtí představitelé severských sov:
Sovice sněžná
Kalous pustovka
Puštík bělavý
Puštík vousatý (také „bradatý“ – na obrázku)

Sovy naší fauny:
Co je ještě dobré znát 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ů: {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 selektor .třída


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, …) A potom v těle


Podobně ve stylech třeba .podnadpis {color: green; font-family: tahoma} A potom v těle
a
Sovy naší fauny:


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

(<style>…)

Doplnění zdrojového textu o možnost kontroly normy XHTML Na začátek zdrojového kódu (před ) můžeme doplnit řádku, která informuje prohlížeč při kontrole kódu na normu xml, že jde o dokument obsahující české znaky. … Řádka s obsahem 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 a ), 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.



Sovice sněžná
Kalous pustovka
Puštík bělavý

Sovy naší fauny:

Sova pálená (na obrázku)
Výr velký
Kalous ušatý
Puštík obecný
Sýček obecný


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.



Sovice sněžná
Kalous pustovka
Puštík bělavý

Sovy naší fauny:

Sova pálená
….



Lépe je ale použít vlastnost float v oddíle stylů Sovy <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}


……

……

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“). Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.

Zopakování Párové značky nejvyšší úrovně ; a

celý html dokument; rozdělení na hlavičku a tělo

Párové značky v hlavičce <style><br /> <br /> titulek (do titulkového pruhu okna prohlížeče) deklarace stylů<br /> <br /> Párové značky v těle <p><br /> <br /> odstavec<br /> <br /> <h1> až <h6><br /> <br /> nadpis<br /> <br /> <i><br /> <br /> kurzíva<br /> <br /> <b><br /> <br /> tučné písmo<br /> <br /> <a><br /> <br /> odkaz<br /> <br /> Nepárové značky <br /><br /> <br /> nový řádek<br /> <br /> <hr /><br /> <br /> horizontální čára<br /> <br /> <img … /><br /> <br /> obrázek<br /> <br /> Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.<br /> <br /> Odkazy V těle stránky: <body> …… <a href="S3.jpg" rel="nofollow"> 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“).<br /> <br /> Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.<br /> <br /> 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.<br /> <br /> 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<br /> <br /> {float: left; border-color: red; border-style: solid; margin: 20; padding: 10} {float: right; border-color: red; border-style: double; margin: 20; padding: 5}<br /> <br /> Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.<br /> <br /> 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 .<br /> <br /> Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.<br /> <br /> 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> <li>První položka</li> <li>Druhá položka</li> </ol> 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 <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} Tento materiál byl zpracován v rámci projektu „Integrovaný vzdělávací systém města Jáchymov (Mosty)“, reg.č. CZ.1.07/1.2.11/01.0003.





Sovice sněžná

Kalous pustovka

Puštík bělavý


Sovy naší fauny:

Sova pálená (na obrázku)

Výr velký

Kalous ušatý

Puštík obecný

Sýček obecný


Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

Recommend Documents

Sovy žijící v Evropě

Sovy žijící na severu Evropy:

Sovy naší fauny:

…

…

: …

Sovy žijící na severu Evropy:

Sovy naší fauny:

Sovy žijící v Evropě

Sovy žijící na severu Evropy:

Sovy naší fauny:

Sovy žijící v Evropě

Sovy žijící na severu Evropy:

Sovy naší fauny:

Sovy žijící v Evropě

Sovy žijící na severu Evropy:

Sovy naší fauny:

Sovy žijící v Evropě

Sovy žijící na severu Evropy:

Sovy žijící v Evropě

Sovy žijící na severu Evropy:

Sovy naší fauny: