Tvorba webových stránek

Prezentace na téma: "Tvorba webových stránek"— Transkript prezentace:

1 Tvorba webových stránek
Tvorba webových stránek Praktická úloha - zadání Tvorba webových stránek

2 Tvorba webových stránek
Struktura dokumentu, nadpisy, odstavce, formátování textu Hypertextové odkazy Obrázky Seznamy Tabulky a formuláře Rámy, CSS, pozicování Tvorba webových stránek

3 Tvorba webových stránek
Formátování textu Vytvořte webovou stránku prvni.htm s obsahem přesně takovým, jaký vidíte na obrázku, který následuje na dalším snímku. Všimněte si titulku stránky, nadpisů, členění na odstavce a formátování textu. Nezapomeňte definovat znakovou sadu a typ dokumentu. Tvorba webových stránek

4 Tvorba webových stránek
Tvorba webových stránek

5 Tvorba webových stránek
Hypertextové odkazy Na konec webové stránky prvni.htm z předchozí úlohy přidejte tři odkazy na známé webové servery z internetu. Použijete absolutní adresu. Vytvořte dvě další vlastní webové stránky s názvem stranka1.htm a stranka2.htm. Soubor stranka1.htm uložte do stejné složky jako je již existující prvni.htm a soubor stranka2.htm uložte do podsložky soubory, kterou vytvoříte v adresářové struktuře na stejné úrovní jako soubor prvni.htm. Z webové stránky prvni.htm vytvořte relativní odkazy na stranka1.htm a stranka2.htm. Do stranka1.htm přidejte relativní odkazy na stranka2.htm a prvni.htm. Do stranka2.htm přidejte relativní odkazy na stranka1.htm a prvni.htm. Na konec dokumentu prvni.htm přidejte rolovací odkaz na 1. nadpis v dokumentu dokumentu prvni.htm. Do stranka2.htm přidejte rolovací odkaz na 1. nadpis v dokumentu prvni.htm. Tvorba webových stránek

6 Tvorba webových stránek
Obrázky Vytvořte webovou stránku obrazky.htm, na které bude v nějakém textu (libovolném) umístěn přiložený obrázek slona (slon.jpg) obtékaný textem zprava a obrázek papouška (ara.jpg) obtékaný zleva. Obrázky vložte na stránku s šířkou 200 px a výškou 150 px. Z obrázku slona vytvořte odkaz tak, aby při klinutí na obrázek slona došlo ke zobrazení slona samostatně na stránce internetovým prohlížečem. V obrázku papouška ara vytvořte klikací mapu typu kružnice tak, aby při kliknutí na hlavičku papouška byla zobrazen nějaký webový server z internetu s obsahem týkajícím se přírody. Inspirovat se můžete obrázkem na následujícím snímku. Tvorba webových stránek

7 Tvorba webových stránek
Tvorba webových stránek

8 Tvorba webových stránek
Seznamy Vytvořte webovou stránku rocniobd.htm, na které bude jednoduchý seznam o čtyřech položkách: Jaro, Léto, Podzim, Zima. Tvorba webových stránek

9 Tvorba webových stránek
Seznamy Vytvořte webovou stránku mesice.htm, na které bude seznam měsíců v roce tak, jako na obrázku. Tvorba webových stránek

10 Tvorba webových stránek
Tabulky Vytvořte webovou stránku tabulka.htm, které bude obsahovat jednoduchou tabulku šířky 600px s rámečkem šířky 2 dle obrázku. Tvorba webových stránek

11 Tvorba webových stránek
Tabulky Tabulku z předchozí úlohy modifikujte tak, aby vypadala jako tabulka na následujícím snímku. Obrázky naleznete mezi vstupními daty a vložte je do tabulky ve velikosti 200px na 150px. Hotovu stránku s tabulkou uložte do souboru tab2.htm. Tvorba webových stránek

12 Tvorba webových stránek
Tvorba webových stránek

13 Tvorba webových stránek
Formuláře Nalezněte někde na přístupných webových stránkách nějaký formulář a podívejte se na jeho zdrojový kód. Zkuste rozpoznat značky (tagy), které tvoří formulář. Tvorba webových stránek

14 Tvorba webových stránek
Rámy, CSS, pozicování Ve vstupních datech pro 6. úlohu naleznete soubory ramy.htm, menu.htm a uvod.htm. Váš úkol bude, přidat do menu na levé straně dva odkazy na existující webové stránky na internetu tak, aby se jejich obsah zobrazil v pravém rámu. Ve vstupních datech pro 6. úlohu naleznete soubory text.htm a styly.css. Naformátujte text.htm souborem styly.css. Změňte barvu nadpisu úrovně 1 na modrou (blue), změňte velikost textu na 12pt a změňte barvu odkazu při přejetí myší (hover) na žlutou (yellow). Pomocí absolutního pozicování změňte pozici druhého nadpisu v textu na left: 200px a top: 300px. Pomocí relativního pozicování posuňte první nadpis v textu o 10px nahoru. Tvorba webových stránek

15 Tvorba webových stránek
(červenec 2010) Tvorba webových stránek