Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky Co se všechno naučíme??? Tvorba webové (internetové) stránky v HTML kódu

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Co už umíme? Požívání internetového prohlížeče MS Internet Explorer Mozilla Firefox Google Chrome Safari (zařízení iPad) Psaní znaku Přepnutí na anglickou klávesnici Nebo se stisknutou klávesou pravý ALT (někdy zobrazeno jako ALT GR) Nový dokument Většina programů má definovanou klávesovou zkratku CTRL + N Ukládání souboru Většina programů má definovanou klávesovou zkratku CTRL + S

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Nové pojmy HTML - speciální jazyk (kódy, tagy), pomocí kterých vytváříme internetovou stránku Příklad:,,,, a mnoho dalších Párové tagy první tag něco začíná, druhý něco končí, mezi ně se píše text Příklad: - začátek a konec webové stránky - titulek stránky - tučné písmo, - nakloněné písmo (kurzíva) Základní struktura HTML stránky Nepárové tagy Tag, který je samotný Příklad: - odřádkování

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML: Spustíme program Golden HTML editor Stiskneme CTRL + N, potom ikonu OK Vytvoříme titulek internetové stránky: Mezi tagy napíšeme text Moje první internetová stránka Zobrazení stránky v internetovém prohlížeči: Stiskneme ikonu Program nás vyzve k uložení stránky – stránku uložte do svých dokumentů pod názvem index.html Spustí se prázdná webová stránka, kde v záhlaví je zobrazen titulek

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML - pokračování: Přepneme se zpět do programu Golden HTML editor Mezi tagy vkládáme vlastní obsah stránky: Napíšeme text podle vzoru Zobrazíme náhled stránky Rozdělení na více řádků: HTML kód nezná odřádkování pomocí klávesy ENTER – musíme použít tag Překontrolujeme stránku v náhledu TIP: nezáleží na velikosti písmen v HTML kódu, slouží pouze pro lepší přehlednost Nastavení tučného písma (slovo první) Klikneme myší před slovo první a vložíme tag - tučné písmo Tag je párový – musíme ho ukončit (jinak by zbytek textu byl tučně) Klikneme za slovo první a vložíme ukončení tagu pro tučné písmo Slovní spojení internetové stránce zobrazte nakloněným písmem pomocí párového tagu

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML – něco navíc: Barva textu Slovní spojení druhá věta zobrazíme červenou barvou Použijeme párový tag s atributem color Klikneme před slovo druhá a napíšeme tag Doplníme červenou barvu - “ Klikneme za slovo věta a ukončíme tagem Překontrolujeme v náhledu Změňte postupně slovní spojení na tyto barvy: Modrá Zelená Žlutá Hnědá Fialová Purpurová TIP: barvu píšeme anglickými výrazy (např. red, blue, yellow, apod.)

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií TěloBody TitulekTitle BarvaColor StylStyle HlavaHead

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Vytvořte internetovou stránku, kterou pojmenujete sporty.html Stránky budou obsahovat: Titulek-Sportovní vybavení jednotlivých sportů Na samostatný řádek napište název sportu a za pomlčku jaký druh sportovního vybavení potřebuje (např: Fotbal – míč, hřiště, brány) Každý sport napište jinou barvou Nejdůležitější vybavení (podle vašeho názoru) napište tučně, méně důležité vybavení napište nakloněným písmem (kurzívou) (např: Fotbal – míč, hřiště, brány) Napište alespoň 5 sportů

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Použité zdroje: Jak psát web, návod na HTML stránky. Jak psát web [online] [cit ]. Dostupné z: