Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný.

Prezentace na téma: "Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný."— Transkript prezentace:

1 Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný Předmět: ICT Ročník: 2., 3. r. (6leté), 1. r. (4leté) Zpracováno v rámci projektu EU peníze školám CZ.1.07/1.5.00/34.0296 Zpracovatel: Mgr. René Brauner Gymnázium, Třinec, příspěvková organizace Datum vytvoření: březen 2014

2 Metodický list Prezentace je určena k procvičení učiva v 2., 3. ročníku šestiletého a 1. ročníku čtyřletého studia. Je možné ji zařadit i do plánů seminářů ICT v rámci opakování. Prezentace vede žáka k pochopení problematiky tvorby webových stránek, prezentované učivo se ihned aplikuje do výuky. Žák prokazuje znalost pojmů HTML, CSS. Žák je schopen napsat krátký zdrojový kód. Úkoly řeší žáci samostatně na pracovních stanicích. Mohou používat doporučené učebnice, google nebo wikipedii. Práce a následná kontrola probíhají ve spolupráci s učitelem.

3 Obrázky – tag Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený ze souboru. Atributy Význam Hodnoty src umístění souboru s obrázkem URL alt alternativní popis libovolný text lowsrc náhradní obr. pro malé displeje URL width šířka délka nebo procento height výška délka nebo procento border tloušťka rámečku align zarovnání obrázku left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

4 Použití tagů: obrázek TITUL NADPIS TEXT

5 Odkaz – tag Odkaz (z angl.anchor). Vše, co je mezi značkami a bude sloužit jako odkaz (tzn. bude možno na to kliknout). Např. Hlavní stránka se zobrazí jako nápis Hlavní stránka. Na tento nápis lze kliknout. Href Nejdůležitější atribut, cíl odkazu. Tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL. Příklad: Portál Seznam GYMTRI

6 Použití tagů: odkaz TITUL NADPIS GYMTRI TEXT

7 Obrázek jako odkaz Odkazem může být text, např.: GYMTRI Odkazem může být jiný element (obrázek):

8 Použití tagů: odkaz TITUL NADPIS TEXT

9 Cvičení 1.Zjistěte na internetu, jaké typy tagů se vyskytují nejčastěji ve zdrojových kódech. 2.Klikněte pravým tlačítkem myši na oblíbenou www stránku a zvolte „Zobrazit zdrojový kód“. 3.Které atributy můžete (musíte) použít u tagu IMG?

10 Citace zdrojů Wikipedia. HTML [online]. [cit. 5.3.2014]. Dostupný na WWW: http://cs.wikipedia.org/wiki/Html