Učebnice a metodika výuky HTML na základní škole

Mendlova univerzita v Brně Institut celoživotního vzdělávání Učebnice a metodika výuky HTML na základní škole Závěrečná práce Vedoucí práce: doc. Ing. Dr. Jiří Rybička Vypracoval: Mgr. Stanislav Novotný Brno 2010

Dovoluji si touto cestou poděkovat vedoucímu práce za příkladné odborné vedení a mnoho cenných rad a připomínek při tvorbě závěrečné práce.

Prohlašuji, že jsme tuto závěrečnou práci Učebnice a metodika výuky HTML na základní škole vypracoval samostatně, a to za použití literatury, která je v práci uvedena. V Jihlavě dne 1. července 2010

Abstract Jandová, M., Rybička, J. The document template for bachelor/diploma thesis. Bachelor thesis. Brno: MUAF, 2009. Example of document template for bachelor/diploma thesis is presented here. An abstract is in (British) English. Keywords Thesis, template, document, thesis example. Here are key words in (British) English. Abstrakt Novotný S. Učebnice a metodika výuky HTML na základní škole. Závěrečná práce. Brno: Mendlova univerzita v Brně, 2010. Předmětem závěrečné práce je vytvoření učebnice pro žáky a metodické příručky pro výuku jazyka HTML na základní škole. Učebnice by měla pomoci žákům zvládnout základní principy a příkazy jazyku HTML. Metodická příručka určena pro vyučující by jim měla pomoci při plánování obsahu vyučovacích hodin zaměřených na výuku základů jazyka HTML. Klíčová slova Závěrečná práce, HTML, základní škola, učebnice, metodika.

Obsah 5 Obsah 1 Úvod a cíl práce 10 1.1 Úvod... 10 1.2 Cíl práce... 10 2 Začínáme vytvářet www stránky 11 2.1 Úvod... 11 2.2 Co je to jazyk HTML?... 12 2.3 Základní pravidla jazyku HTML... 13 2.4 Základní struktura HTML kódu... 16 2.5 Vytvoření nového souboru HTML... 18 2.6 Otevření existujícího souboru HTML... 21 2.7 Zobrazení zdrojového kódu stránky umístěné na internetu... 22 2.8 Zobrazení souboru HTML v internetovém prohlížeči... 22 2.9 Běžný text v souboru HTML... 24 2.10 Rozdělení textu do odstavců... 24 2.11 Zalomení řádků... 25 2.12 Předformátovaný text... 26 2.13 Formáty písma... 26 2.14 Definování barvy... 27 2.15 Velikost a barva písma... 28 2.16 Definování barvy pozadí stránky... 28 2.17 Vložení vodorovné čáry... 29 2.18 Vytváření nadpisu... 30 2.19 Nečíslované seznamy v jazyku HTML... 31 2.20 Číslované seznamy v jazyku HTML... 32 2.21 Grafika v jazyku HTML... 33

6 Obsah 2.22 Obrázek na pozadí stránky... 34 2.23 Hypertextové odkazy v jazyku HTML... 34 2.24 Hypertextové odkaz na jiné soubory... 35 2.25 Hypertextové odkaz na E-mail... 36 2.26 Tabulky v jazyku HTML... 36 3 Metodická příručka k učebnici 40 3.1 1. lekce Co je to jazyk HTML?... 40 3.2 2. lekce Základní pravidla jazyka HTML... 41 3.3 3. lekce Základní struktura HTML kódu.... 43 3.4 4. lekce Práce se soubory HTML.... 43 3.5 5. lekce Běžný text v souboru HTML.... 46 3.6 6. lekce Rozdělení textu odstavec, zalomení a přeformátovaný text.47 3.7 7. lekce Formáty písma.... 49 3.8 8. lekce Definování barev.... 50 3.9 9. lekce Velikost a barva písma.... 51 3.10 10. lekce Barva pozadí stránky.... 52 3.11 11. lekce Vodorovná čára.... 53 3.12 12. lekce Nadpis.... 54 3.13 14. lekce Nečíslované seznamy.... 56 3.14 15. lekce Číslované seznamy.... 57 3.15 16. lekce Grafika v HTML... 58 3.16 17. lekce Hypertextové odkazy.... 61 3.17 18. lekce Tabulky.... 63 4 Analýza možnosti využití HTML na základní škole 66 4.1 Žáci... 66 4.2 Učitelé... 67 5 Závěr 69

Obsah 7 6 Literatura 70

8 Seznam obrázků Seznam obrázků Obr. 1 Zdrojový kód v Poznámkovém bloku 12 Obr. 2 Zobrazení v internetovém prohlížeči 13 Obr. 3 Základní struktura HTML dokumentu 17 Obr. 4 Uložení souboru s příponou html 20 Obr. 5 Uložení souboru pod novým jménem Uložit jako 20 Obr. 6 Otevření souboru html v Poznámkovém bloku 21

Seznam tabulek 9 Seznam tabulek Tab. 1 Základní barvy 27 Tab. 2 RGB barvy na webu 28

10 Úvod a cíl práce 1 Úvod a cíl práce 1.1 Úvod Při zpracování závěrečné práce jsem vycházel z několikaleté zkušenosti při výuce jazyku HTML na základní škole. Při výuce jazyka HTML jsem narazil na problém výběru vhodného výukového materiálů, který by vhodně podpořil mojí výuku. Většina materiálů dostupných na knižním trhu nesplňuje z mého pohledu vhodně obsahové ani metodické předpoklady pro využití v mé výuce. Vhodnost výběru ztěžují dnes i poměrně vysoké pořizovací náklady na zakoupení sady knih pro celou skupinu žáků. Při výběru vhodné učebnice nesmíme opomenout i faktor velmi rychlého stárnutí aktuálnosti obsahu materiálu, bez možnosti jejich aktualizace. Velkou nevýhodou těchto standardních materiálů je i nemožnost jejich zpřístupnění žákům, z důvodů platnosti autorských zákonů, v elektronické podobě na webových stránkách či jiných pro žáky dostupných e- lerningových aplikacích např. typu Moodle. Navíc u většiny těchto materiálů chybí většinou vhodné procvičovací úkoly a cvičení. 1.2 Cíl práce Cílem této práce je vytvoření jednoduché přehledné učebnice jazyku HTML určené pro žáky běžné základní školy. Učebnice bude doplněna vhodnými procvičovacími úkoly a cvičeními. Učebnici bude možno využívat, jak v tištěné, tak v elektronické podobě. Dostupná elektronická verze materiálu velmi snadno umožní vyučujícímu zaktualizovat či upravit obsah materiálu tak, aby splňoval aktuálních potřeby výuky. Rozdělením materiálu na jednotlivé kapitoly a jejich převedení do univerzálního formátu PDF, pak snadno umožní vyučujícímu materiál umístit na webové stránky či použít jako studijní materiál do e- lerningového prostředí Moodle.

Začínáme vytvářet www stránky 11 2 Začínáme vytvářet www stránky 2.1 Úvod Dnes má téměř každý uživatel internetu, možnost umístit na veřejně přístupné internetové stránky své dokumenty. Z tohoto důvodu dnes značně stoupá potřeba osvojení, alespoň základních postupů potřebných k vytváření vlastních internetových stránek. Tedy zvládnout základy některého z jazyku, které slouží k formátování a vytváření internetových dokumentů. Mezi základní a nejjednodušší jazyky, sloužící k formátování internetových stránek, patří jazyk HTML. Podstatou tohoto jazyku, je sada základních formátovacích příkazů. Příkazy určují internetovému prohlížeči, jak má být text na internetové stránce rozmístěn a zformátován. Jazyk HTML je nahrazován novější verzí označovanou jako XHTML. Základem této verze jsou základní příkazy jazyku HTML. XHTML naproti standardní verzi HTML, ale velmi důsledně předepisuje způsob zápisu a použití jednotlivých příkazů ve zdrojovém kódu stránky. Správně vytvořená stránka v jazyku XHTML, by měla projít přes tzv. validator, který zkontroluje čistotu a správnost zdrojového kódu. Jazyk XHTML by měl zaručit univerzálnost zobrazení na různých internetových prohlížečích, operačních systémech i různých zařízeních (PC, mobil ). Vytvářet složitější internetové projekty jen pomocí Poznámkového bloku, by bylo velmi složité a časově náročné. Z tohoto důvodu se dnes používají vizuální HTML editory. Těchto editorů existuje celá řada. Zaměříme se na jednoho zástupce, který je dostupný pro každého uživatele. Jedná se o editor, který je součástí alternativního internetového prohlížeče Mozilla (SeaMonkey). Poslední část, pak seznámí uživatel se základními postupy potřebnými k umístění vytvořených internetových stránek, na některý internetový server. Tedy přenesení souborů z lokálního počítače pomocí některého z FTP klientů na internetový server. Tento manuál je určen pro začátečníky. Klade si za cíl seznámit uživatele s nejzákladnějšími a nejdůležitějšími základy potřebnými pro vytvoření jednoduché internetové stránky. Uživatel by si měl pomocí tohoto manuálu vytvořit základ, pro další studium vytváření internetových stránek pomocí složitějších metod.

12 Začínáme vytvářet www stránky 2.2 Co je to jazyk HTML? Zkratka HTML znamená HyperText Markup Language. Jedná se o jazyk pro tvorbu internetových dokumentů. Pomocí HTML definujeme vzhled dokumentu v internetovém prohlížeči (velikost nadpisů, použité fonty písma, okraje ). Jazyk HTML byl speciálně vyvinut za účelem publikování dokumentů ve světové počítačové síti Internet. Tento jazyk se neustále vyvíjí a zdokonaluje, nejrozšířenější verzí v současnosti je HTML 4.0. Ale i ta je již nahrazována novou verzí XHTML (jazyk HTML + formát XML). Jak je již z názvu patrné, původně byl jazyk HTML vytvořen pro zobrazování prostých textových dokumentů. Avšak během relativně krátké doby byla jeho původní funkce doplněna o další multimediální prvky umožňující zobrazování grafiky, animací, zvuku, videa Mimo jazyka HTML, dnes lze využívat pro psaní internetových aplikací celou řadu dalších programovacích jazyků např. PHP, Java, JavaScript, C++ Tyto jazyky, jsou ale složitější a překračují rámec této učebnice. Je ale nutné zde podotknout, že stránky napsané pomocí těchto složitějších jazyků, používají jako základ potřebný pro zobrazení stránky v internetovém prohlížeči základní příkazy jazyka HTML. Obr. 1 Zdrojový kód v Poznámkovém bloku

Začínáme vytvářet www stránky 13 Obr. 2 Zobrazení v internetovém prohlížeči 2.3 Základní pravidla jazyku HTML Podobně jako jakýkoliv cizí jazyk má svá pravopisná a mluvnická pravidla, tak i HTML, má svá stanovená pravidla. I když standardní verze HTML, je velmi benevolentní k způsobu zápisu jednotlivých příkazů, je vhodné si od začátku zvyknout na některá pravidla. Dodržování těchto pravidel, může často předejít vzniku chyb při zobrazení stránek na internetu. Dodržování pravidel zároveň zvyšuje přehlednost a čitelnost zdrojového kódu stránky. Osvojení těchto pravidel navíc usnadní uživateli přechod na novou verzi XHTML, která vyžaduje po uživateli daleko přísnější dodržování způsobu zápisu zdrojového kódu stránky. Pravidlo 1. Zdrojový kód dokumentu psaný v jazyce HTML je prostý text, psaný v ASCII formátu, který lze prohlížet a upravovat v jakémkoliv jednoduchém textovém editoru (např. T602, Poznámkový blok nebo WordPad, které jsou součástí Windows atd.). Vhodné jsou i freewarové aplikace vyvinuté pro tento účel např. PSPad (lze stáhnout např. z www.slunecnice.cz). Pro tvorbu HTML dokumentu, se nehodí složitější textové editory, jako je MS Word. Pravidlo 2. Jazyk HTML je jazykem typografickým, což znamená, že výslednou internetovou stránku pouze popisuje pomocí příkazů, ale její zobrazení je přenecháno na internetovém prohlížeči. Pravidlo 3. Jazyk HTML je tvořen příkazy (tagy), které jsou uzavřeny do ostrých závorek < a > (např. <a>, <html> ). Tyto znaky vytvoříme na české klávesnici stiskem a držením levé tlačítka Alt a na číselné klávesnici na-

14 Začínáme vytvářet www stránky psaného čísla 60 pro znak < a čísla 62 pro znak >. Lze použít i přepnutí na anglickou klávesnici Alt + Shift. Pravidlo 4. Příkazy ohraničují části textů. Na začátku textu umísťujeme počáteční příkaz a na konci příkaz koncový. Koncový příkaz se liší pouze přidáním znaku / (např. </a>, </html> ). Některé příkazy tento koncový příkaz nemají (např. čára <hr>, obrázek <img> ). Příklad: <h1> text </h1> Pravidlo 5. Neuzavřený příkaz je platný i na další části textu např. obarvíme-li příkazem nadpis červeně a neuzavřeme jej koncovým příkazem, bude tento příkaz platit i na další text tedy celá stránka bude napsána červeně. Pravidlo 6. Příkazy pišme malými písmeny. Jedná se pouze o doporučení z důvodu lepší orientace v napsaném zdrojovém kódu. Velikost písma příkazu nemá vliv na zobrazení textu v prohlížeči. Pravidlo 7. Při vytváření jmen souborů (obrázky, html soubory ) používejte krátké a jednoznačné názvy. Toto pravidlo usnadní uživateli orientaci ve vytvořeném zdrojovém kódu stránky. Příklad: špatně: Naše škola.html obrázek našeho psa.jpg správně: nase_skola.html pes_1.jpg nebo nas_pes.jpg Pravidlo 8. V názvech souborů zásadně nepoužíváme háčky, čárky a prázdné mezery mezi slovy. Nedodržování těchto pravidel, často způsobuje vznik chyb při zobrazení stránek umístěných na internetovém serveru. Pravidlo 9. Pozor na velikost písmen v názvu souborů a odkazů na ně použitých v kódu. Internetové servery často rozlišují velká a malá písmena např. Obrazek.jpg a obrazek.jpg, považuje systém serveru za dva odlišné soubory. Pravidlo 10. Prohlížeč čte napsaný zdrojový text po řádcích. Je vhodné psát jednotlivé příkazy z důvodu přehlednosti kódu na samostatné řádky. Jak se mají postupně zobrazovat na stránce. Programátoři doporučují odsazení některých částí (bloků) zdrojového kódu z důvodu zpřehlednění. Nemá vliv na zobrazení v prohlížeči.

Začínáme vytvářet www stránky 15 Příklad: <body> <p> <h1> text text text </h1> </p> </body> Pravidlo 11. Příkazy je třeba psát přesně. Nepřesně použitý (napsaný) příkaz způsobí nefunkčnost příkazu a tedy změnu vzhledu stránky v prohlížeči. Často se internetová stránka zobrazuje jinak na lokálním počítači a jinak po uložení na internetovém serveru. Chyba je často způsobena nedodržením některého z předešlých pravidel. Pravidlo 12. Většinu příkazu lze rozšířit o různé atributy. Atributy jsou psány za počáteční hlavní příkaz do ostré závorky. Hodnoty jsou atributům přiřazovány pomocí znaku rovná se =. Atributy jsou součástí příkazu, nemohou být samostatně uzavřeny mezi závorkami < a > bez hlavního příkazu. Příklad: < img src=obrazek.jpg > < h1 align=center > atributy Pravidlo 13. Jednotlivé příkazy HTML lze libovolně kombinovat. Na jeden text můžeme použít několik za sebou umístěných příkazu např., chceme-li, aby text byl velkými písmeny a zároveň potržený použijeme následující vzor: <h1> <u> nadpis </u> </h1>. Pravidlo 14. Text ve zdrojovém kódu, který není uzavřen mezi znaky < a >, se zobrazí na internetové stránce. Jestliže např. zapomeneme u některého příkazu uzavřít závorku, zobrazí se příkaz na stránce jako běžný text. Prohlížeč jej nepovažuje za příkaz! Příklad: Zdrojový kód: Zobrazí se v prohlížeči: <h1> JAZYK HTML </h1> JAZYK HTML <h1 JAZYK HTML </h1> <h1 JAZYK HTML <h1 JAZYK HTML </h1 <h1 JAZYK HTML </h1

16 Začínáme vytvářet www stránky Pravidlo 15. Prohlížeč ignoruje všechny prázdné mezery v textu zdrojového kódu prohlížeč zobrazí automaticky jednu mezeru mezi slovy. Je tedy z hlediska zobrazení v prohlížeči jedno, zda napíšeme text u sebe: text_1 text_2 anebo s prázdnou mezerou takto: text_1 text_2. V prohlížeči se oba případy zobrazí stejně: text_1 text_2 tedy bez velké mezery. Pravidlo 16. Vložení prázdné mezery pro vložení pevné prázdné mezery, kterou nebude prohlížeč ignorovat, musíme vložit místo mezery kombinaci těchto znaků Tyto znaky musíme psát malými písmeny. Za každou prázdnou mezeru musíme použít celou sadu těchto znaků Příklad: Zdrojový kód: Zobrazí se v prohlížeči: TEXT TEXT TEXT TEXT Toto řešení můžeme využít nejen u mezer mezi slovy v text, ale i mezer mezi vloženými obrázky či v buňkách tabulky Další možností vytvoření internetové stránky je použití speciálních HTML editorů. Ze začátku se zde nebudeme prozatím zabývat vytvářením WWW stránek pomocí těchto specializovaných editorů jako je např. FrontPage Express (Microsoft), HomeSite, Macromedia Dreamweaver nebo i poslední verze textových editorů (např. Microsoft Word 97, 2000, XP, 2003) pod Windows, které rovněž umí již pracovat se soubory ve formátu HTML (vytvářet i upravovat). Obsluha těchto nástrojů je téměř shodná s obsluhou běžného textového editoru. Tyto editory ale obsahují obrovské množství různých nastavení a ovládacích prvků, které vyžadují většinou rozsáhlé znalosti ovládání daného programu. I při použití těch nejmodernějších WYSIWYG editorů (What-You-See-Is-What-You-Get = co vidíš, to dostaneš), se ale většinou nikdy stoprocentně nevyhneme přímé práci v textové formě jazyku HTML. Je vhodné tedy nejdříve proniknout do základních příkazů jazyka HTML a pak teprve při řešení složitějších a rozsáhlejších stránek využít možností některého z HTML editorů. 2.4 Základní struktura HTML kódu Některé příkazy zdrojového kódu jsou povinné a tvoří základní strukturu (kostru) každého HTML dokumentu.

Začínáme vytvářet www stránky 17 Celý dokument, to znamená všechny příkazy a texty, musí být vždy uzavřeny mezi dva základní příkazy <html> a </html>. Tyto příkazy uvozují každou internetovou stránku. Dalším příkazem je zavedení hlavičky nadpisu stránky <head> a </head>. Do této části se mohou vkládat další příkazy definující různé vlastnosti stránky. Hlavička může pro off-line používané stránky zůstat prázdná. Texty internetové stránky a formátovací příkazy textu, tedy vše co se má zobrazit na internetové stránce, se vkládá do oblasti ohraničené příkazy <body> a </body>. Žádné příkazy ani texty, by se neměli vkládat za příkaz </html>. Pozor často se stane, že příkazy a texty vložené za </html> se na zobrazené internetové stránce otevřené na lokálním počítači objeví bez chyb. Chyba se často projeví, až po uložení stránek na internetový server. Zde je povinná, nejjednodušší struktura HTML stránky. Obr. 3 Základní struktura HTML dokumentu

18 Začínáme vytvářet www stránky Příkazy: <html> <head> </head> <body> obsah www stránky </body> </html> 2.5 Vytvoření nového souboru HTML K vytvoření dokumentu HTML je potřeba nejdříve otevřít některý z jednoduchých textových editorů. V editoru, pak vytvoříme pomocí základních příkazů HTML strukturu nové internetové stránky. Aby textový dokument vytvořený v Poznámkovém bloku, bylo možno zobrazit v internetovém prohlížeči ve tvaru internetové stránky, musíme vzniklý dokument uložit s příponou html nebo htm. Postup: 1. Otevřeme Poznámkový blok Start Programy Příslušenství Poznámkový blok 2. Vytvoříme pomocí příkazů HTML strukturu stránky 3. Uložíme soubor s příponou html nebo htm a to následovně. Klepneme v nabídce na položku Soubor. Objeví se menu, ve kterém zvolíme položku Uložit jako. 4. Objeví se panel (typický pro jakékoliv ukládání v systému Windows). Zde nejdříve nastavíme místo (adresář nebo disk), kam chceme soubor uložit. Toto provedeme klepnutím v okénku Uložit do: na šipku na konci tohoto okénka a v něm vybereme potřebný adresář. Příklad: strana.html index.html jan.html skola.html 5. Po zadání adresáře klepneme ve spodní části tabulky levým tlačítkem myši do okénka Název souboru. Zde zadáme jméno dokumentu, připíšeme tečku a příponu html 6. Potvrdíme stiskem tlačítka Uložit.

Začínáme vytvářet www stránky 19 Poznámka: Při ukládání souborů dodržujte několik základních pravidel: soubory ukládejte s krátkými, výstižnými názvy používejte výhradně malá písmena nepoužívejte háčky a čárky nepoužívejte prázdné mezery mezi slovy

20 Začínáme vytvářet www stránky Obr. 4 Uložení souboru s příponou html Obr. 5 Uložení souboru pod novým jménem Uložit jako

Začínáme vytvářet www stránky 21 2.6 Otevření existujícího souboru HTML Máme-li již vytvořeny dokumenty HTML, můžeme je samozřejmě znovu otevřít a měnit jejich obsah. Takto lze otevřít jakýkoliv soubor s příponou html nebo htm. Takto lze měnit html soubory získané např. z internetu. Postup při otvírání html souboru v Poznámkovém bloku je následující: Postup: 1. Otevřeme Poznámkový blok. 2. Klepneme myší na nabídku Soubor. Zde vybereme možnost Otevřít. 3. V zobrazeném panelu v políčku Oblast hledání: v horní části vyhledáme disk, kde je soubor uložen. V hlavním okně, pak otevřeme klepnutím požadovaný adresář se soborem. 4. Jelikož je ve spodní části tabulky automaticky nastavena v položce Soubor typu volba Textové dokumenty. HTML soubor se proto automaticky neobjeví. Klepneme proto na šipku v políčku Soubor typu a vybereme možnost Všechny soubory (*. *). Soubor HTML by se pak měl objevit. Soubory ve formátu HTML mají standardně ikonu ve tvaru listu papíru s modrým e. 5. Vybereme myší soubor HTML a zvolíme možnost Otevřít. Obr. 6 Otevření souboru html v Poznámkovém bloku

22 Začínáme vytvářet www stránky Poznámka: Jestliže v otevřeném dokumentu provedeme jakoukoliv změnu, musíme dokument nejdříve opět uložit, aby se změny projevily v zobrazené internetové stránce. Bez uložení souboru se provedené změny neprojeví. Pro uložení změn stačí použít již pouze Soubor Uložit. 2.7 Zobrazení zdrojového kódu stránky umístěné na internetu Pro začínajícího tvůrce internetových stránek je internet obrovskou zásobárnou řešených příkladů internetových stránek. Na internetu, ale vidíme pouze výsledek zdrojového textu zobrazeného v internetovém prohlížeči. Pro rozebrání postupu při řešení stránky, ale potřebujeme zobrazit zdrojový kód tedy jednotlivé příkazy HTML. Takto získaný zdrojový kód, pak můžeme libovolně upravovat, ukládat a pozorovat zobrazené změny. Postup: 1. Otevřeme požadovanou stránku v prohlížeči internetu. 2. Klepneme do libovolného místa stránky pravým tlačítkem myši (mimo obrázek či odkaz). 3. V zobrazeném panelu zvolíme možnost Zobrazit zdrojový kód. 4. Otevře se nám Poznámkový blok s příkazy zdrojového kódu zvolené stránky. 5. S takto získaným zdrojovým kódem můžeme libovolně pracovat. Tento postup můžeme použít na libovolný soubor ve formátu internetové stránky (html) zobrazený v internetovém prohlížeči. Poznámka: Tímto způsobem zobrazíme a uložíme do lokálního počítače pouze zdrojový text internetové stránky. Do počítače, ale tímto způsobem neuložíme zobrazené obrázky ani použité scripty či css soubory. Jestliže uživatel následně zobrazí uloženou stránku, nemusí tato stránka obsahovat obrázky, popřípadě nebude text správně zformátován bude chybět formátovací css soubor. 2.8 Zobrazení souboru HTML v internetovém prohlížeči Máme-li vytvořený a uložený dokument ve formátu HTML, můžeme jej zobrazit již jako internetovou stránku v prohlížeči např. v Internetu Exploreru. Při

Začínáme vytvářet www stránky 23 zobrazování internetových stránek z lokálního disku (uložených na počítači) můžeme postupovat takto: Postup 1: 1. Otevřeme internetový prohlížeč. 2. V horní části prohlížeče zvolí položku Soubor. 3. V panelu, který se objeví, zvolíme Otevřít. 4. Objeví se panel, kde zvolíme tlačítko Procházet. 5. Objeví se nám již známá tabulka sloužící k otevření souboru. Opět nejdříve nalezneme náš soubor pomocí položky Oblast hledání (stejné jako u Poznámkového bloku). Po nalezení souboru klepneme levým tlačítkem myši na požadovaný soubor. Soubor se označí modrým rámečkem a současně se vypíše do kolonky Název souboru. 6. Stiskneme tlačítko Otevřít. 7. Vrátíme se na první panel, kde tentokráte zvolíme OK. Stránka se nám pak zobrazí v prohlížeči. Soubor lze otevřít v hlavním prohlížeči internetu pomocí funkce Windows, která umožňuje automaticky otevírat soubory v daném programu na základě jejich koncovky. Tedy soubory html jsou automaticky otevřeny v prohlížeči internetu. Tento postup nelze použít, je-li v systému více typů prohlížečů internetu Internet Explorer, Mozilla, FireFox. Postup 2: 1. Otevřeme ikonu na ploše Tento počítač. 2. Vyhledáme postupně požadovanou disk a složku. 3. Klepneme na vyhledaný soubor. 4. Soubor se nám otevře v hlavním prohlížeči internetu. Poznámka: Provedeme-li nějaké změny, ve zdrojovém kódu stránky zobrazené v prohlížeči musíme tento soubor nejdříve uložit a pak znovu zobrazit, aby se projevily změny. K obnovení zobrazení můžeme využít tlačítka prohlížeče Aktualizovat. Při tvorbě stránky je proto vždy výhodné nechat otevřené okno prohlížeče se stránkou a zároveň Poznámkový blok se zdrojovým kódem a pouze ukládat změny do stejného souboru v Poznámkovém bloku (Soubor Uložit) a pak pouze přepnout do prohlížeče a zaktualizovat stránku tlačítkem Aktualizovat.

24 Začínáme vytvářet www stránky 2.9 Běžný text v souboru HTML Základním stavebním kamenem jakékoliv stránky je text. Při vkládání textu do kódu stránky musíme vědět: běžný text vložíme do stránky umístěním tohoto textu mezi příkazy <body> a </body> text se neohraničuje ostrými závorkami < a > na internetové stránce bude takto vložený text zobrazen standardní velikostí mezi slovy se budou automaticky vkládat jednoduché mezery prohlížeč nebude brát v úvahu formátování textu ve zdrojovém kódu velikost, barvu, formát písma, mezery, odstavce prohlížeč nebude brát v úvahu vložení konce řádku pomocí Enteru ve zdrojovém kódu. Text se bude formátovat podle momentální velikosti okna prohlížeče. Ukázka: <html> <head> </head> <body> Toto je neformátovaný text vložený do mé první internetové stránky. </body> </html> 2.10 Rozdělení textu do odstavců Základním formátováním běžného textu na stránce je rozdělení delšího textu do odstavců. Většině uživatelů se čte text zobrazený na monitoru daleko hůře než text vytištěný na papíře. Proto je vhodné delší texty rozdělit na menší části odstavce. Rozdělením textu na odstavce zpřehledníme zobrazený text a zajistíme lepší čitelnost celého textu. Prohlížeč oddělí jednotlivé odstavce prázdným řádkem. Počet řádků v odstavci není opět nastaven pevně, ale mění se v závislosti na velikosti okna prohlížeče. Odstavec vytvoříme vložením příkazů <p> na začátek textu odstavce a </p> na konec textu odstavce. Další odstavce vytváříme stejným způsobem. Ve zdrojovém kódu nemusí být odstavce od sebe odděleny mezerou.

Začínáme vytvářet www stránky 25 Ukázka: <html> <head> </head> <body> <p> Toto je text vložený do prvního odstavce mé první internetové stránky. A toto je druhá věta prvního odstavce mé první internetové stránky </p> <p> Toto je text vložený do druhého odstavce mé první internetové stránky. </p> </body> </html> Doplněním hlavního příkazu <p> o atribut align lze zarovnat řádky odstavce napravo, nalevo, na střed a do bloků. Zápis příkazu vypadá následovně: Příkaz: <p align = left, center, right, justify> text odstavce </p> align = center řádky budou vycentrované uprostřed right řádky se zarovnají s pravým okrajem justify řádky budou zarovnány s oběma okraji left řádky se zarovnají s levým okrajem 2.11 Zalomení řádků Internetový prohlížeč nerespektuje pevné rozdělení textu použitím klávesy Enteru na konci řádku ve zdrojovém kódu. Pro pevné ukončeni řádku (zalomení řádku), musíme vložit do zdrojového kódu příkaz <br>. Příkaz lze použít vždy, kdy chceme mít zaručeno, aby další prvek stránky (text, obrázek atd.) byl umístěn na novém řádku. Příkaz se umisťuje na konec řádku či konec předešlého příkazu, nemá koncový příkaz.

26 Začínáme vytvářet www stránky Ukázka: s použitím <br> : text text text <br> zobrazí se text text text text text <br> text text bez použití <br> : text text text zobrazí se text text text text text text text 2.12 Předformátovaný text Internetový prohlížeč nerespektuje formátování zdrojového kódu v Poznámkovém bloku. V některých zvláštních případech by bylo velmi výhodné, aby text zdrojového kódu odpovídal přesně svým rozložením textu na internetu. V těchto případech lze využít příkaz <pre>. Text ohraničený tímto příkazem zobrazí text, tak jak byl vytvořen, tj. včetně mezer mezi slovy, řádky. Klasickým případem použití příkazu <pre> je výpis zdrojového kódu programu nebo báseň. Ukázka: Při použití <pre>: Bez použití <pre>: <body> <body> <pre> ahoj ahoj ahoj ahoj ahoj ahoj ahoj ahoj </pre> <body> </body> Zobrazí se v prohlížeči: Zobrazí se v prohlížeči: ahoj ahoj ahoj ahoj ahoj ahoj ahoj ahoj 2.13 Formáty písma Pomocí příkazu lze písmu na internetové stránce různě formátovat např. použít kurzívu, tučné a potržené písmo, horní a dolní indexy atd. Příkazy lze navzájem kombinovat a vytvářet různé kombinace např. tučná kurzíva, podtržená kurzíva atd. Formát se vždy stahuje pouze na text ohraničené počátečním a koncovým příkazem.

Začínáme vytvářet www stránky 27 Příkaz: <i> TEXT </i> kurzíva TEXT <b> TEXT </b> tučné písmo TEXT <s> TEXT </s> přeškrtnuté písmo TEXT <u> TEXT </u> podtržené písmo TEXT ^TEXT horní index TEXT _TEXT dolní index TEXT <tt> TEXT </tt> neproporciální písmo T E X T Ukázka: tučná kurzíva <b><i> TEXT </b></i> TEXT tučné potržené <b><u> TEXT </b></u> TEXT horní index m ³ m 3 2.14 Definování barvy V jazyce HTML lze požívat barvy. Lze obarvit pozadí stránky nebo písmo. Pro zápis barvy v jazyce HTML se používají dva způsoby: první způsob je zápis pomocí anglického názvu barvy. HTML bezpečně zobrazí základní barvy jako je: Česky Anglicky černá black zelená green modrá blue červená red žlutá yellow bílá white Tab. 1 Základní barvy druhý způsob je zápis pomocí tak zvaného hexadecimálního zápisu čísla. Jakýkoliv odstín barvy se dá namíchat ze tří základních barev červené, zelené a modré. Podle poměru jednotlivých barev vznikne výsledný odstín barvy. Zápis se provádí následovně: #RRGGBB RR je červená složka GG je zelená složka BB je modrá složka

28 Začínáme vytvářet www stránky Místo symbolů v obecném zápisu doplňujeme čísla (0 až 9) nebo písmena (A až F). Takto lze vytvořit téměř libovolný odstínů barev. Znak # lze psát klávesou Alt + 35. Barva černá #000000 bílá červená zelená modrá Hexadecimální zápis #FFFFFF #FF0000 #00FF00 #0000FF čokoládová #D2691E tmavě šedá #A9A9A9 Tab. 2 RGB barvy na webu Poznámka: Pro určení hexadecimálního zápisu libovolného odstínu barvy lze využít na stránce www.pixy.cz, velmi jednoduchý prográmek. 2.15 Velikost a barva písma Pomocí příkazu font lze měnit velikost a barvu textu. Změna se vztahuje vždy na text uzavřený mezi počáteční a koncový příkaz. Do příkazu lze uzavřít jeden znak, celý odstavec nebo kompletní text na stránce. Ukázka: <font size=+5 color=red> TEXT </font> TEXT (velký červený text) Příkaz: <font size=velikost color=barva> TEXT </font> size = udává číslem velikost písma od -7 do -1 malá písma, od +1 do +7 velká písma color = udává barvu textu (zadává se anglickými názvy nebo pomocí hexadecimálních čísel) 2.16 Definování barvy pozadí stránky Pozadí internetové stránky lze obarvit libovolným odstínem barvy. Pozadí stránky obarvíme přidáním nepovinného atributu bgcolor=barva do základní-

Začínáme vytvářet www stránky 29 ho příkazu <body>. Barva pozadí se může zadávat jako anglický název barvy nebo v hexadecimálním kódu. Ukázka: <body bgcolor=red > pozadí stránky bude červené <body bgcolor=#ff0000 > pozadí stránky bude opět červené 2.17 Vložení vodorovné čáry Pro oddělení částí textu od sebe lze využít vodorovnou čáru. Vodorovnou čáru vložíme do stránky příkazem <hr>. Tento příkaz nemá koncový příkaz je tedy složen jen z počátečního příkazu. Vloženou čáru lze využít jako variantu rozdělení delších textu do odstavců. Ukázka: Zdrojový kód: <hr> Text Text Text Text <hr> Text Text Text Text <hr> Zobrazí se v prohlížeči: Text Text Text Text Text Text Text Text Příkaz <hr> můžeme použít v jednoduché formě čára bude po celé šířce stránky nebo lze příkaz rozšířit o nepovinné atributy width délka čáry, align zarovnání čáry a color barvu čáry. Jednotlivé atributy lze použít samostatně nebo je vzájemně kombinovat. Příkaz: <hr width=délka_čáry align=left,center,right color=barva> width = zadáním pevného rozměru v bodech nebo v procentech nastavíme délku čáry. Pevný rozměr zajistí, že čára se bude zobrazovat na všech monitorech stejně. Při zadání hodnoty ve tvaru procent, se bude měnit délka čáry podle momentální velikosti okna prohlížeče. Ukázka: <hr width=50%> zobrazí se čára, která bude mít vždy poloviční délku šířky okna prohlížeče. <hr width=200> zobrazí se vždy čára s pevnou délkou 200 bodů. align = jestliže nemá čára nastavenou délku, stejnou jako je šířka okna, můžeme pomocí atributu align zarovnat čáru na levou, pravou nebo střed stránky. left zarovná se na levý okraj stránky

30 Začínáme vytvářet www stránky right zarovná se k pravému okraji stránky center zarovná se na střed stránky Ukázka: <hr width=50% align=center> zobrazí se čára, která bude mít poloviční délku šířky okna prohlížeče a bude zároveň zarovnána na střed stránky. color = atribut nastaví čáře zvolený odstín barvy. Barva se opět může zadávat anglickým názvem nebo hexadecimálním zápisem. Ukázka: <hr width=50% color=red> zobrazí se čára, která bude mít poloviční délku šířky okna prohlížeče a bude mít červenou barvu. 2.18 Vytváření nadpisu Jazyk HTML poskytuje šest velikostí nadpisů. Příkazy pro nadpisy jsou definovány příkazy <h1> až <h6>, přičemž <h1> je největší nadpis a <h6> je nejmenší. Text nadpisu je vždy na novém řádku řádek je vždy zalomen. Ukázka: Zdrojový kód: <body> Zobrazí se v prohlížeči: <h1>velikost 1</h1> Velikost 1 <h2>velikost 2</h2> Velikost 2 <h3>velikost 3</h3> Velikost 3 <h4>velikost 4</h4> Velikost 4 <h5>velikost 5</h5> Velikost 5 <h6>velikost 6</h6> Velikost 6 </body> Příkaz pro tvorbu nadpisů se dá rozšířit o některé parametry, které se zapíší do závorky přímo za počáteční příkaz nejčastější je parametr align. Příkaz: <h1 align=left, center, right> text nadpisu </h1> left - text se zarovná k levému okraji stránky (automatické) center - text se zarovná na střed stránky right - text se zarovná k pravému okraji stránky

Začínáme vytvářet www stránky 31 Ukázka: zarovnání textu pomocí atributu align: TEXT (left) TEXT (center) TEXT (right) 2.19 Nečíslované seznamy v jazyku HTML Pomocí jazyku HTML lze vytvářet na internetové stránce nečíslované seznamy položek. Při použití se automaticky k dané položce přiřadí odrážka tečka, kroužek, čtvereček Položky se automaticky odsazují. Nečíslované seznamy se uvozují příkazem <ul> a uzavírají příkazem </ul>. Jednotlivé položky seznamu se uzavírají mezi příkazy <li> a </li>. Příkaz: <ul type=typ_odražky align=typ_zarovnani> <li> první položka seznamu </li> <li> druhá položka seznamu </li> </ul> type= udává vzhled grafických symbolů před položkou disk plná tečka circle prázdné kolečko square čtvereček align= způsob horizontálního uspořádání seznamu left zarovnání k levému okraji right zarovnání k pravému okraji center vycentrování doprostřed Ukázka: Zdrojový kód: Zobrazí se v prohlížeči: <body> <ul> <li type=disk>kapitola 1</li> kapitola 1 <li type=circle>kapitola 2</li> kapitola 2 <li type=square>kapitola 3</li> kapitola 3 </ul> </body>

32 Začínáme vytvářet www stránky 2.20 Číslované seznamy v jazyku HTML Pomocí jazyku HTML lze vytvářet na internetové stránce číslované seznamy položek. Při použití se automaticky k dané položce přiřadí číselné odrážka ve tvaru arabských a římských číslic. Položky se automaticky odsazují. Číslované seznamy jsou definovány podobně jako nečíslované. Jediným rozdílem je použití příkazu <ol> místo <ul>. Příkaz <li> se používá stejně, jako u seznamů nečíslovaných. Příkaz: <ol type=typ_cislovani align=typ_zarovnani> <li> první položka seznamu </li> <li> druhá položka seznamu </li> </ol> type= zde zvolíme typ symbolu před položkou a malá písmena abecedy A velká písmena abecedy i římskými číslicemi (malá písmenka) I římskými číslicemi (velká písmenka) 1 arabskými číslicemi align= způsob horizontálního uspořádání seznamu left zarovnání k levému okraji right zarovnání k pravému okraji center vycentrování doprostřed Ukázka: Zdrojový kód: Zobrazí se v prohlížeči: <body> <ol> <li type=a> kapitola 1 </li> a. kapitola 1 <li type=a> kapitola 2 </li> B. kapitola 2 <li type=i> kapitola 3 </li> iii. kapitola 3 <li type=i> kapitola 4 </li> IV. kapitola 4 <li type=1> kapitola 5 </li> 5. kapitola 5 </ol> </body>

Začínáme vytvářet www stránky 33 2.21 Grafika v jazyku HTML Internetové stránky se neobejdou bez různých grafických prvků. Jazyk HTML proto umožňuje, vkládaní obrázků do internetových stránek. Na www stránkách lze používat pouze obrázky s příponou: jpg statické obrázky fotky s velkým počtem barev gif animace nebo obrázky s menším počtem barev, možnost nastavit průhledné pozadí Jiné formáty obrázku nejsou jazykem HTML a prohlížečem podporovány. Při navrhování stránky berme vždy ohled na celkovou velikost stránky. Čím větší a složitější stránka (více grafiky), tím se bude stránka na internetu déle načítat. Proto se snažíme nastavit u obrázků co nejmenší velikost, ale zároveň při dostačující kvalitě zobrazení na monitoru. Při použití grafiky, mějme vždy na paměti pravidlo: Méně někdy znamená více Obrázky nejsou součástí zdrojového textu v jazyku HTML, ale jsou uloženy zvlášť jako samostatné soubory. Do příkazu, pak zadáváme cestu k místu uložení obrázku a přesný název obrázku. Název obrázku musí vždy obsahovat také příponu formátu souboru. Ukázka: fotka1.jpg animace2.gif skola.png pes.jpg V případě, že obrázek je v jiném adresáři, než je soubor HTML s odkazem na tento obrázek, musí příkaz pro vložení obrázku obsahovat přesnou cestu k tomuto obrázku. Ukázka: Leží-li obrázek chata.jpg v podadresáři Obrázky v adresáři Dokumenty a soubor HTML v kořenovém adresáři Dokumenty, mohl by příkaz vypadat následovně: <img src=../obrazky/chata.jpg> Poznámka: Při tvorbě jednoduchých stránek, je výhodné vždy ukládat obrázky, použité na stránce do stejného adresáře, do kterého ukládáme i HTML soubory.

34 Začínáme vytvářet www stránky Příkaz: <img src=nazev_obrazku width=100 height=100> src= zde zadáme název obrázku a použité přípony width= zde zadáváme šířku obrázku počtem bodů height= zde zadáváme výšku obrázku v počtu bodů Poznámka: Pro umístění obrázků na samostatné řádky se za příkaz pro vložení obrázku umístí příkaz pro zalomení řádků <br>. Takto lze jednoduše nastavit rozložení obrázků na stránce. Bez tohoto příkazu se obrázky budou řadit na jeden řádek a jejich počet na řádku bude záviset na velikosti okna prohlížeče. Později si ukážeme rozložení obrázků pomocí tabulek. 2.22 Obrázek na pozadí stránky Jazyk HTML umožňuje vložit do pozadí stránky libovolný obrázek. K vložení obrázku do pozadí stránky musíme přidat k základnímu příkazu <body> parametr background=jmeno_obrazku např. background=foto.jpg Ukázka: <body background="obraz1.jpg"> 2.23 Hypertextové odkazy v jazyku HTML Hypertextové odkazy tvoří základní kámen jazyka HTML. Díky těmto odkazům je možné skákat na jiná místa v rámci jednoho dokumentu nebo otevírat libovolné dokumenty, které jsou uloženy, na jakékoliv WWW serveru. Hypertextové odkazy jsou definované příkazem <a>. Příkaz: <a href = jmeno_dokumentu > text zobrazeny na stránce </a> Pomocí atributu href je možno přeskočit na jiný dokument HTML nebo přímo na jinou internetovou adresu. Zadáváme-li skok na jiný dokument, použijeme jeho jméno s příponou html.

Začínáme vytvářet www stránky 35 Ukázka: Varianta 1.: odkaz na jiný dokument ze stejného adresáře <a href = strana1.html > strana 1 </a> Varianta 2.: odkaz na jiný server umístěný na internetu <a href=http://www.seznam.cz > strana 1</a> Varianta 3.: odkaz na dokument v jiném adresáři <a href = dokumenty/strana1.html > strana 1 </a> Varianta 4.: odkaz při použití odkazu ve tvaru obrázku <a href=strana1.html > < img src=obr1.jpg> </a> 2.24 Hypertextové odkaz na jiné soubory Hypertextový odkaz lze využít k otevření jiného objektu než jenom dokumentů formátu html. Lze jej použít k otevření obrázku, otevření dokumentu napsanému přímo ve Wordu či Excelu, otevření PDF souboru apod. Podmínkou otevření zvoleného formátu je přítomnost programu, ve kterém se formát může otevřít např. Word pro otevření dokumentu napsanému ve Wordu atd. Ukázka: Odkaz na dokument ve Wordu dokument z Wordu uložíme do složky a odkaz bude směřován přímo na tento dokument. <a href= dokument.doc > Dokument ve Wordu </a> Ukázka: Odkaz na obrázek použití u fotogalerii na stránce jsou pouze zmenšeniny obrázku po klepnutí se objeví obrázek v celé velikosti. <a href= obr.jpg > <img src= miniobr.jpg> </a> Poznámka: Jestliže použijeme jako odkaz obrázek, vytvoří se automaticky kolem obrázku barevný rámeček. Tento rámeček, ale velmi často působí rušivě na vzhled stránky. Odstranění tohoto rámečku je, ale velmi snadné. V příkazu pro vložení obrázku <img>, musíme umístit atribut pro rámeček border a nastavit na hodnotu 0. <a href=dok.html> <img src=obr.jpg border=0> </a>

36 Začínáme vytvářet www stránky 2.25 Hypertextové odkaz na E-mail Na internetových stránkách se často setkáme s odkazem, který nám umožní napsání e-mailovou zprávu pro tvůrce stránky. Tento odkaz otevře okno poštovního klienta nejčastěji Microsoft Outlook nebo Outlook Express. Jestliže uživatel nemá, tohoto klienta na počítači nakonfigurovaného, nemůže odeslat e-mail tímto odkazem. Tento odkaz se provádí následovně: Ukázka: <a href=mailto:jan.novak@volny.cz> <img src=obr1.jpg> </a> 2.26 Tabulky v jazyku HTML Tabulky jsou v jazyce HTML velmi mocným nástrojem. Jejich použitím lze nejen tisknout přehledné sloupce různých hodnot, ale i vytvořit profesionálně vyhlížející stránku použitím různých tabulkových "triků", které budou popsány v rámci této kapitoly. Definice tabulky je dána návěstím <table> a </table>. Atribut border této značky umožňuje zviditelnění tabulky. Dalšími příkazy, které umožňují specifikovat konečný vzhled celé tabulky je návěští <tr> definuje řádek tabulky, který obsahuje návěští (většinou několik) <td> představující sloupce dat. Důležitou úlohu zastávají tabulky při umisťování obrázků a textů do libovolného místa stránky. Bez použití tabulky nelze umístit obrázek a text na jeden společný řádek, nelze umístit dva obrázky na jeden řádek tak, aby mezi nimi byla mezera a podobně. Ukázka: definování řádků tabulky <tr align=left valign=top> posloupnost tabulkových polí </tr> align = určuje způsob zarovnání textu valign = určuje způsob vertikálního zarovnání obsahu buňky pro ten to řádek top zarovnání k hornímu okraji buňky middle zarovnání doprostřed buňky bottom zarovnání k dolnímu okraji buňky

Začínáme vytvářet www stránky 37 Ukázka: <table width=600 align=left border =10> posloupnost prvků tabulky </table> width = specifikuje šířku tabulky (implicitně v pixelech), použitím přípony "%" je možno hodnoty zadávat i relativně vzhledem k šířce okna prohlížeče (např. widht=50% - poloviční šířka prohlížeče." align = ovlivňuje umístění objektu vůči okolí v tabulce border = zde lze nastavit šířku rámečku tabulky, hodnota nula nezobrazí se rámeček. Ukázka: definování sloupců na řádku: <td align=left valign=top bgcolor=red width=10> obsah pole </td> align = specifikuje způsob zarovnání textu valign = určuje způsob vertikálního zarovnání obsahu buňky pro tento řádek top zarovnání k hornímu okraji buňky middle zarovnání doprostřed buňky bottom zarovnání k dolnímu okraji buňky bgcolor = určuje barvu jedné buňky, barva je zadána ang. názvem nebo pomocí hexadecimálních čísel width = specifikuje šířku buňky

38 Začínáme vytvářet www stránky Ukázka: jednoduchá tabulka vyplněná textem. <body> <table border=5> <tr> <td>text1</td><td>text2</td><td>text3</td> </tr> <tr> <td>text4</td><td>text5</td><td>text6</td> </tr> </table> </body> V prohlížeči se zobrazí tabulka takto: text1 text2 text3 text4 text5 text6 Ukázka: jednoduchá tabulka vyplněná textem a obrázkem <body> <table border=2> <tr> <td>text1</td><td><img src=obr1.jpg></td><td>text3</td> </tr> <tr> <td>text4</td><td>text5</td><td>text6</td> </tr> </table> </body> V prohlížeči se zobrazí tabulka takto: text1 text4 text5 text3 text6

Začínáme vytvářet www stránky 39 Poznámka: Hlavním posláním tabulek při konstrukci stránky je možnost rozmístění jednotlivých prvků (obrázky, text, animace, tabulky atd.) do libovolné pozice na stránce. Bez použití tabulky se nám nepodaří rozmístit prvky libovolně. Pro tento účel potřebujeme, aby tabulka nebyla na stránce viditelná. Tohoto dosáhneme nastavením atributu border=0 Poznámka: I když jsou tabulky, z hlediska konstrukce stránky důležité je poměrně složité ručně vytvořit zdrojový kód složitější tabulky jen pomocí Poznámkového bloku. Problém je hlavně v poměrně velkém počtu příkazu, takže velmi rychle můžeme ztratit orientaci v již vytvořeném zdrojovém kódu. V tomto případě lze opět využít celou řadu programů umožňující vizuální (grafickou) konstrukci tabulky. Program pak podle našeho návrhu vytvoří zdrojový kód, který nakopírujeme do naší stránky.

40 Metodická příručka k učebnici 3 Metodická příručka k učebnici 3.1 1. lekce Co je to jazyk HTML? Hlavní body: Jazyk HTML/XHTML Konsorcium W3C Zdrojový kód Proč se zobrazí stránky z internetu Poznámky k výkladu a metodice: Jazyk HTML (název vznikl jako zkratka HyperText Markup Language). Nejpoužívanější verze 4. Nejnovější verze 5 (2010). Jazyk je tvořen příkazy, které definují jak má obsah (text) vypadat na webové stránce. Do jazyku lze přidávat další prvky, které dále rozšiřují možnosti webových stránek JavaScript (ukázat např. při zápisu na google se nabídnou možnosti), Flash (ukázat např. hry na www.1000her.cz). Konsorcium W3C strukturu jednotlivých příkazů, jejich způsob zápisu atd. vytvořilo sdružení lidí, kteří se podíleli v ústavu CERN (Evropská organizace pro jaderný výzkum) na prvních krůčcích fenoménu jménem WWW. Za zakladatele je považován Tim Berners-Lee, který v roce 1990 oživil myšlenku hypertextového odkazu a vytvořil první www server. Zdrojový kód základem stránky je zdrojový kód, který obsahuje jednotlivé příkazy a obsah stránky. Po zobrazení v prohlížeči je zobrazen pouze obsah příkazy se nezobrazí. Podstata stránek vše co vidíme, na internetové stránce, musí být uloženo na počítačovém serveru, který je přímo připojený na internet. Na serveru musí být uloženy nejen soubory se zdrojovým kódem, ale i obrázky, videa, zvuky Při zadání webové stránky do prohlížeče, si prohlížeč se serveru postupně, stáhne potřebné soubory a zobrazí je v prohlížeči. Zápis: Jazyk HTML (HyperText Markup Language). Tvořen strukturou příkazů, které formátují obsah stránky. Konsorcium W3C vytváří pravidla použití jazyku HTML. Zdrojový kód obsahuje obsah jednotlivé příkazy a textový obsah stránky. Vše co se na webové stránce zobrazí, musí být uloženo na webovém serveru.

Metodická příručka k učebnici 41 Úkoly: 1. Vyhledejte na internetu stránky 5 různých stránek, obsahují informace o tvorbě webových stránek pomocí jazyku HTML. Adresy si poznamenejte do sešitu. 2. Vyhledejte stránky Konsorcia W3C. Adresu zapište do sešitu. 3.2 2. lekce Základní pravidla jazyka HTML Hlavní body: Přehled pravidel jazyku HTML Editory WYSIWYG Poznámky k výkladu a metodice: Proč dodržovat pravidla? Dodržování pravidel značně eliminuje vznik chyb a problémů při zobrazování www stránek. Dodržení pravidel zpřehlední i zdrojový kód stránky. Pravidlo 1. vždy používat jednoduché textové editory. Nikdy pokročilé editory typu MS Word. Vhodné ukázat vytvoření jednoduché stránky pomocí Poznámkového bloku a Wordu. Pravidlo 2. jazyk HTML netvoří obsah stránky, ale pouze určuje prohlížeči, jak má být text na stránce zobrazen formátován. Pravidlo 3. příkazy (tagy) se zapisují do těchto závorek < >, ukázat různé způsoby zápisu těchto závorek (přepnutí do ang. klávesnice, zápis přes Alt). Pravidlo 4. příkazy vždy ohraničují text z obou stran začátek platnosti <h1> a konec platnosti </h1>. Některé příkazy mají pouze začátek <br> Pravidlo 5. bez ukončení platnosti příkazu </h1> platí příkaz stále! Pravidlo 6. domluva z důvodu přehlednosti příkazy psát malými písmeny. Pravidlo 7., 8. a 9. domluva názvy externích souborů psát malými písmeny, bez háčků, čárek a prázdných mezer. Volit vždy krátké, jednoduché názvy. Pozor na velká písmena na začátku názvů internetové servery často rozlišují velká a malá písmena. Nedodržení těchto pravidel je nejčastější chybou nefunkčnosti stránek po nahrání stránek na internetové servery. Pravidlo 10. prohlížeč čte příkazy po řádkách a v tomto pořadí jej i zobrazuje.

42 Metodická příručka k učebnici Pravidlo 11. pozor na překlepy. Pravidlo 12. - velmi často se stává, že stránky se budou zobrazovat na lokálním počítači jinak, než později po nahrání na internetový server. Lokální počítač bývá značně benevolentní k chybám než internetový server. Pravidlo 13. a 14. příkazy mají celou řadu atributů, které doplňují chování základního příkazu. Jednotlivé příkazy lze vzájemně kombinovat, výsledkem je pak, vzhled obsahující všechny požadované formátovací efekty. Pravidlo 15. příkazy uzavřené v závorkách < a > se nezobrazují. Příkaz, který není správně uzavřen, se považuje za text a zobrazí se na stránce. Pravidlo 16. prohlížeč ignoruje prázdné mezery v textu. Zobrazí vždy jako jednu mezeru. Vložení větší mezery, lze pouze zápisem znaků za každou prázdnou mezeru. Webové stránky lze vytvářet i pomocí editorů, které automaticky vytvářejí strukturu HTML jazyka bez přímého zásahu uživatele. Tyto editory označujeme jako WYSIWYG editory (What-You-See-Is-What-You-Get = co vidíš, to dostaneš). V této části je vhodné ukázat tyto editory, ale zároveň ukázat, že výsledkem je opět zdrojový kód v jazyku HTML. Zápis: Dodržujte pravidla, vyhnete se chybám! Pravidlo 1. vždy používat jednoduchý textový editor! Pravidlo 2. jazyk HTML, říká prohlížeči, jak text má vypadat na webové stránce! Pravidlo 3. příkazy jsou ohraničeny závorkami < (Alt +60) a > (Alt+62)! Pravidlo 4. začátek příkazu <h1> a konec příkazu </h1>! Pravidlo 5. bez ukončení příkazu </h1> platí příkaz stále! Pravidlo 6. příkazy píšeme malými písmeny! Pravidlo 7. názvy souborů píšeme malými písmeny! Pravidlo 8. v názvu souborů nepoužíváme háčky, čárky a prázdné mezery! Pravidlo 9. názvy souboru volíme krátké a jednoduché! Pravidlo 10. prohlížeč čte zdrojový kód po řádcích a ve stejném pořadí jej zobrazí! Pravidlo 11. pozor na překlepy! Pravidlo 12. zobrazení na lokálním počítači se může lišit od zobrazení na internetu! Pravidlo 13. základní příkazy lze rozšířit o atributy (doplňky)! Pravidlo 14. příkazy lze kombinovat! Pravidlo 15. zobrazuje se pouze text, který není ohraničen závorkami < a >! Pravidlo 16. prohlížeč zobrazí pouze jednu prázdnou mezeru (prázdná mezera )!

Metodická příručka k učebnici 43 3.3 3. lekce Základní struktura HTML kódu. Hlavní cíle: Základní příkazy Struktura stránky Poznámky k výkladu a metodice: <html> a </html> základní příkazy ohraničující zdrojový kód. <head> a </head> hlavička dokumentu, obsahuje specifikace stránky. Při tvorbě jednoduché stránky lze nechat prázdné. <body> a </body> tělo stránky, obsahuje textový obsah stránky a všechny formátovací příkazy. nakreslit tělíčko člověka a k němu přiřadit jednotlivé části odpovídající zdrojovému kódu. Zápis: Základní struktura webové stránky: <html> <head> </head> <body> textový obsah a formátovací příkazy </body> </html> Úkoly: 1. V Poznámkovém bloku napište základní strukturu internetové stránky. Uložte si pod názvem vzor do své složky. 3.4 4. lekce Práce se soubory HTML. Hlavní cíle: Vytvoření nového souboru HTML Otevření existujícího souboru HTML Otevření vytvořeného souboru v prohlížeči Otevření zdrojového kódu internetové stránky

44 Metodická příručka k učebnici Poznámky k výkladu a metodice: Postup ukládání je stejný jako v jakémkoliv jiném programu (Soubor Uložit nebo Uložit jako Zadat místo uložení, název souboru + příponu html. Soubor se ukládá, vždy s příponou html nebo htm. Tuto příponu v Poznámkovém bloku musíme zapsat ručně. Je vhodné zde vždy připomenout rozdíl mezi ukládáním pomocí příkazu Uložit a Uložit jako! Otevírání exitujícího souboru ukázat rozdíl mezi klepnutím na vytvořený soubor html (otevře se automaticky v prohlížeči) a otevření přes program Poznámkový blok (Soubor Otevřít). Upozornit na nutnost přepnutí položky Soubory typu na možnost Všechny soubory (*. *), jinak soubor s příponou html nebude v nabídce vidět! Otevření v prohlížeči ukázat možnost přímé zobrazení (klepneme na ikonu souboru myší) a možnost přes nabídku Soubor Otevřít v prohlížeči (možnost otevřít soubor v alternativním prohlížeči, který není nastaven v systému jako výchozí). Zobrazení zdrojového kódu u jakékoliv internetové stránky (off-line i online) lze zobrazit zdrojový kód (klepneme myší pravým tlačítkem na plochu stránky v nabídce Zobrazit zdrojový kód). Zápis: Uložení souboru postup: Soubor Uložit nebo Uložit jako Zadat umístění, název souboru + příponu html. Otevření souboru vždy nejdříve otevřít program Poznámkový blok. Postup: Soubor Otevřít Změnit Soubor typu na Všechny soubory (*. *) Vybrat soubor. Otevřít v hlavním prohlížeči klepneme na ikonu souboru. Otevření v alternativním prohlížeči otevřeme nejdříve prohlížeč a pomocí nabídek Soubor Otevřít vyhledáme a otevřeme soubor. Zobrazení zdrojového kódu klepneme pravým tlačítkem myši na plochu stránky a v nabídce vybereme Zobrazit zdrojový kód. Úkoly: 1. V Poznámkovém bloku napište základní strukturu internetové stránky. Stránku uložte jako pokus1.html do své složky. 2. V Poznámkovém bloku napište základní strukturu internetové stránky. Uložte tento soubor do své složky. Při ukládání zvolte vhodný název souboru, když víte že: