Tvorba webových stránek 22.2.2019 Tvorba webových stránek Praktická úloha - zadání Tvorba webových stránek
Tvorba webových stránek 22.2.2019 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
Tvorba webových stránek Formátování textu 22.2.2019 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
Tvorba webových stránek 22.2.2019 Tvorba webových stránek
Tvorba webových stránek Hypertextové odkazy 22.2.2019 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
Tvorba webových stránek Obrázky 22.2.2019 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
Tvorba webových stránek 22.2.2019 Tvorba webových stránek
Tvorba webových stránek Seznamy 22.2.2019 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
Tvorba webových stránek Seznamy 22.2.2019 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
Tvorba webových stránek Tabulky 22.2.2019 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
Tvorba webových stránek Tabulky 22.2.2019 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
Tvorba webových stránek 22.2.2019 Tvorba webových stránek
Tvorba webových stránek Formuláře 22.2.2019 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
Tvorba webových stránek Rámy, CSS, pozicování 22.2.2019 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
Tvorba webových stránek 22.2.2019 http://cs.wikipedia.org (červenec 2010) Tvorba webových stránek