Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky II. Co se všechno naučíme??? Používání nadpisů Vkládání a zarovnání odstavců Typ a barva písma Barva webové stránky Hypertextové odkazy

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Co už umíme? HTML - speciální jazyk (kódy, tagy), pomocí kterých vytváříme internetovou stránku Vkládání titulku webové stránky Párový tag Struktura webové stránky Odřádkování Nepárový tag Tučné písmo Párový tag Nakloněné písmo Párový tag Párový tag pro odlišení textu Př: “ – červená barva

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Nové pojmy Párový tag pro nadpisy. Čím větší číslo, tím menší nadpis (nadpis nižší úrovně) Párový tag pro nový odstavec Navíc s atributem STYLE možnost zarovnání Př: Možností zarovnání: Left – vlevo (nepíše se) Right – vpravo Center – na střed Justify – do bloku Nastavení pro celou stránku Rozšíření tabu atributem STYLE Př: Používání atributu STYLE STYLE="color: Blue“ – nastavení barvy textu STYLE=“background-color: Yellow“ – barva pozadí stránky STYLE=“font-family: Arial, Verdana“ – typ písma Hypertextový odkaz – odkazy na jiné místo, stránky Párový tag s atributem href Př: Toto je odkaz na nejrozšířenější internetový vyhledávač

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML: Spustíme program Golden HTML editor a nastavíme stránku podle vzoru Zobrazíme větší text pomocí tagu pro nadpisy Klikneme myší za tag a stiskneme ENTER Vložíme text Nadpis na mé stránce Tento text vložíme do párového tagu Zkontrolujeme stránku pomocí náhledu Velikost nadpisu je dána číslem od 1 do 6 Vyzkoušejte postupně všechny typy velikosti nadpisů,,…, POZOR! Nezapomeňte tag ukončovat stejným párem (např. ) Vložíme další větu podle vzoru (Tato třetí věta používá tag odstavec), kterou umístíme do párového tagu Pomocí atributu ALIGN zarovnáme větu na střed Do tagu pro odstavec doplníme: Tag slouží pro vložení nového odstavce, pomocí atributu STYLE vkládáme další možnosti

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML - pokračování: Nastavení typu a barvy písma, barvy stránky Nastavíme typ písma pro celou stránku rozšířením tagu STYLE="color: Blue" - modré písmo na celé stránce STYLE=“background-color: Yellow“ – žlutá stránka STYLE=„font-family: Arial, Verdana“ - typ písma (jestli prohlížeč nenajde první typ písma, použije druhý typ) Kombinace dvou a více stylů (STYLE) provedeme tak, že další atributy oddělíme středníkem (;) Nastavte různé typy písma, barvu písma a barvu stránky

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML – něco navíc: Hypertextové odkazy Vkládání hypertextových odkazů Za poslední větu vložíme další text: Stránky naší školy (text vložíme na další odstavec - ) Kliknutím na text se zobrazí webové stránky naší školy – použijeme párový tag s parametrem href Stránky naší školy POZOR! Jednotlivé párové tagy se nesmějí křížit! Př: text - špatně text - dobře POZOR! Jednotlivé párové tagy se nesmějí křížit! Př: text - špatně text - dobře Na dalších řádcích vytvořte text s odkazem na stránky: … (zvolte si sami)

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií ZarovnatAlign Barva pozadíBackground color HlavaHeader ObsahContent TučnýBold

Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Vytvořte internetovou stránku, kterou pojmenujete telefony.html Stránka bude obsahovat: Titulek-Smartphones aneb Chytré telefony Na internetu vyhledejte alespoň 5 typů mobilních telefonů, které se označují jako chytré telefony Každá značka telefonu bude začínat nadpisem Popište jednotlivé telefony (operační systém, funkce, a další informace, které pro vás budou zajímavé) U každého telefonu napište hypertextový odkaz na stránky, ze kterých jste čerpali informace Nastavte pro celou webovou stránku: Typ písma: Arial, Verdana Barvu písma: zvolte si sami Barvu stránky: zvolte si sami

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: