Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky III. Co se všechno.

Prezentace na téma: "Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky III. Co se všechno."— Transkript prezentace:

1 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky III. Co se všechno naučíme??? Číslovaný a nečíslovaný seznam Vodorovná čára

2 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Co už umíme? Struktura webové stránky Párový tag pro nadpisy. Čím větší číslo, tím menší nadpis (nadpis nižší úrovně) 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

3 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Nové pojmy Párový tag pro nečíslovaný seznam Párový tag pro číslovaný seznam Položka seznamu Příklad nečíslovaného seznamu Text1 Text 2 Příklad číslovaného seznamu Text1 Text 2 Nečíslovaný seznam s puntíkem (výchozí hodnota – nepíše se) Nečíslovaný seznam s kolečkem Nečíslovaný seznam se čtverečkem Číslovaný seznam 1, 2, 3, …(výchozí hodnota – nepíše se) Číslovaný seznam a, b, c, … Číslovaný seznam A, B, C, D, … Vodorovná čára

4 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – nečíslovaný seznam: Spustíme editor HTML Vytvoříme Titulek (title) a velké záhlaví (H1) s textem Seznam internetových vyhledávačů Vytvoříme menší nadpis (H2) s textem Seznam českých vyhledávačů Vytvoříme nečíslovaný seznam (odrážky) Vložíme párový tag Mezi tento tag vložíme jednotlivé texty pomocí párového tagu Změna odrážky - čtvereček Do tagu UL doplníme parametr TYPE=„square“ Změňte odrážku na kolečko HTML jazyk umí pouze 3 typy odrážek: puntík (disc – nepíše se), čtvereček (square) a kolečko (circle)

5 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – číslovaný seznam: Vytvoříme číslovaný seznam (odrážky) Přidáme další titulek (H2) a napíšeme Seznam zahraničních vyhledávačů Vytvoříme číslovaný seznam Vložíme párový tag Mezi tento tag vložíme jednotlivé texty pomocí párového tagu Změna typu číslování – typ a,b,c,… Do tagu OL doplníme parametr TYPE=„a“ Změňte typ číslování na A, B, C, …

6 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Postup práce – HTML – něco navíc: Vodorovná čára mezi jednotlivými seznamy Pro lepší vzhled jednotlivých seznamů umístíme mezi ně čáru Postavíme se na konec prvního seznamu ( ) a stiskneme klávesu ENTER Vložíme nový nepárový tag Úprava vodorovné čáry Do tagu přidáme parametr COLOR (Navy – tmavě modrá) Čáru zkrátíme (výchozí délka je přes celé okno prohlížeče) parametrem WIDTH Změna šířky – SIZE

7 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií TypType Číslovaný seznamNumbered list OdrážkyIndents ŠířkaWidth Vodorovná čáraHorizintal line

8 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Vytvořte internetovou stránku, kterou pojmenujete usa.html Stránka bude obsahovat: Titulek-Spojené státy americké Vytvořte nečíslovaný seznam, který bude obsahovat: Alespoň 10 států USA Dále vytvořte číslovaný seznam, který bude obsahovat: 6 nejlidnatějších měst USA (seřazených podle největšího počtu) Jednotlivé seznamy: Vhodně označte nadpisem Oddělte vodorovnou čarou TIP: veškeré informace naleznete na internetu

9 Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Použité zdroje: http://office.microsoft.com/cs-cz/images/?CTT=6&ver=14&app=powerpnt.exe Jak psát web, návod na HTML stránky. Jak psát web [online]. 2012 [cit. 2013-02- 11]. Dostupné z: http://www.jakpsatweb.cz/