Tvorba webových stránek 21.4.2019 Tvorba webových stránek Praktická úloha – řešení Tvorba webových stránek
Tvorba webových stránek 21.4.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
Formátování textu – zadání 21.4.2019 Formátování textu – zadání 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. Text pro tuto úlohu naleznete ve vstupních datech. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Tvorba webových stránek
Formátování textu – řešení č. 1. 21.4.2019 Formátování textu – řešení č. 1. K řešení použijeme textový editor, ve kterém vytvoříme soubor, který bude obsahovat základní kostru webové stránky. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> </body> </html> Uvedený typ dokumentu v prvním řádku je pro verzi jazyka HTML 4.01. Často se setkáme i s verzemi XHTML 1.0 Strict nebo Transitional. Typ dokumentu může pak být specifikován takto <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> nebo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tvorba webových stránek
Formátování textu – řešení č. 1. 21.4.2019 Formátování textu – řešení č. 1. Do sekce <head></head> přidáme informace o titulku stránky a kódování. Kódování pro čestinu může být nejen windows-1250, ale lze použít třeba i UTF-8. Kódování uvedené v tagu meta však musí být stejné, jako kódování, ve kterém je soubor uložen. Zde je třeba dát pozor, protože některé textové editory umožňují pouze některé druhy kódování. Použijeme-li k práci šikovnější textový editor, pak se nám jednotlivé tagy mohou barevně zvýrazňovat. Tvorba webových stránek
Formátování textu – řešení č. 1. 21.4.2019 Formátování textu – řešení č. 1. Zde vidíte kousek zdrojového kódu stránky, který vám pomůže pochopit, použití značek (tagů) pro formátování textu. slouží pro vložení pevné mezery Tvorba webových stránek
Formátování textu – řešení č. 1. 21.4.2019 Formátování textu – řešení č. 1. Textový soubor se zdrojovým kódem webové stránky uložíme na pevný disk počítače pod názvem prvni.htm. Můžeme použít i příponu .htm. Pak stačí soubor otevřít v prohlížeči a vidíte výsledek, jako na obrázku. Tvorba webových stránek
Hypertextové odkazy – zadání 21.4.2019 Hypertextové odkazy – zadání 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 21.4.2019 Odkazy – řešení č. 1. Takto mohou vypadat odkazy na známé webové servery ve zdrojovém kódu stránky. Takto vypadají při zobrazení Všimněte si, že za odkazy se automaticky nezalamuje řádek Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 2. a 3. Relativní odkazy z prvni.htm mohou vypadat ve výsledku tak, jako na obrázku. Všiměte si rozdílu v hodnotě u atributu href pro odkaz na stranka1.htm a stranka2.htm. Jedná se o relativní adresu, stačí tedy uvést cestu k souboru, jak se jeví z umístění souboru prvni.htm Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 4. Na obrázku vidíte možný vzhled zdrojového kódu souboru stranka1.htm i s odkazy na další dva soubory webových stránek. Další snímek pak ukazuje vzhled v prohlížeči. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 4. Zde vidíte, jak se předchozí zdrojový kód zobrazí v prohlížeči. Odkazy fialovou barvou znamenají, že již bylo na odkazy kliknuto. Jedná se tedy o odkazy již navštívené. Nenavštívené odkazy jsou zbarveny modře, není-li ve zdrojových kódech definováno jinak. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 5. Na obrázku vidíte možný vzhled zdrojového kódu pro odkazy ze souboru stranka2.htm. Protože se oba soubory nacházejí o úroveň výše v adresářové struktuře, relativní adresa začíná ../. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 6. Rolovací odkaz vytvoříme tak, že si nejprve označíme místo v dokumentu, kam má odkaz směřovat pomocí atributu id. Na označené místo v dokumentu pak směrujeme odkaz atributem href. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 6. Po kliknutí na odkaz ze zobrazí označené místo v dokumentu, v našem případě to bude první nadpis na stránce, který jsme si označili. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Odkazy – řešení č. 7. Rolovací odkaz směřující na jinou stránku pak dle zadání úlohy vyřešíme tak, jak ukazuje obrázek. Všimněte si syntaxe hodnoty atributu href. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Řešení celé úlohy Řešení celé úlohy z pohledu prohlížeče Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Řešení celé úlohy Řešení celé úlohy z pohledu zdrojových kódů Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Obrázky – zadání 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 21.4.2019 Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Obrázky – řešení č. 1. a 2. Postup vložení obrázku do textu s obtékáním textu zprava Obrázek má nastavenou velikost (width, height) Alt (popisek obrázku, alternativní text) je povinný atribut Všimněte si, jakým způsobem je z obrázku vytvořen odkaz Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Obrázky – řešení č. 1. a 2. Pokud vkládáme do stránky obrázky, bývá zvykem, že soubory obrázků upravíme na přesnou velikost, v jaké bude na stránce zobrazen. Důvod je ten, že soubory s obrázky jsou často veliké a pomaleji se stahují než text. Prohlížeč také při změně velikosti obrázků převzorkovává jednoduchým algoritmem a vzhled takového zmenšeného či zvětšeného obrázku může utrpět na kráse. Často tedy náhled obrázku je reprezentován dalším souborem viz obrázek kódu. Údaje o šířce a výšce obrázku nemusíme, ale můžeme ponechat. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Obrázky – řešení č. 3. Obrázek papouška vložíme podobně jako obrázek slona. Můžeme, ale nemusíme nachystat si zvlášť náhled obrázku. U obrázku papouška nás bude zajímat klikací mapa. Všiměte si atributu usemap. Znamená, že pro obrázek papouška se použije klikací mapa mapa Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Obrázky – řešení č. 3. Vytvoření obrázku s klikací mapou vidíte na obrázku. Místo atributu name lze použít také atribut id. <map id="mapa“> Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Seznamy – zadání 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 21.4.2019 Seznamy – zadání 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 21.4.2019 Seznamy – řešení č. 1. První bod úlohy je jednoduchý. Definujeme pomocí tagů <ul> a <li> seznam. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Seznamy – řešení č. 2. Druhý bod úlohy si rozebereme podrobněji. Jedná se o vnořený seznam. Implicitní nastavení vzhledu odrážky jsme změnili na typ circle. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Seznamy – řešení č. 2. U letních měsíců jsme použili typ square. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Seznamy – řešení č. 2. U měsíců podzimních je použit implicitní vzhled tagu <ol>. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Seznamy – řešení č. 2. U měsíců zimních je použit typ A tagu <ol>. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Seznamy – řešení č. 2. Nakonec ještě celý kód vnořeného seznamu s více typy odrážek. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Tabulky – zadání 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 21.4.2019 Tabulky – zadání 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 21.4.2019 Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Formuláře – zadání 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 21.4.2019 Tabulky – řešení č. 1. První tabulka není příliš složitá. Je potřeba nadefinovat šířku tabulky a buněk, rámeček, hlavičkovou buňku <th> a sloučení sloupců pomocí colspan a zarovnání textu v buňkách. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Tabulky – řešení č. 2. Druhá tabulka je poněkud složitější. Proto si její tvorbu rozložíme do dvou částí, abychom lépe pochopili princip. Nejprve struktura bez obrázků. Všimněte si hlavně použití colspan a rowspan. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Tabulky – řešení č. 2. Na příštím snímku již uvidíte kompletní možný zdrojový kód. Řešení rozložení velikosti buněk může být různé. Všimněte si vložení obrázků do tabulky. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Formuláře – řešení č. 3. Na stránce s formulářem jednoduše klikneme pravým tlačítkem a otevřeme volbu Zobrazit zdrojový kód. Ve všech prohlížečích je to podobné. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Formuláře – řešení č. 3. Šipky ukazují tagy (značky), které souvisí s tvorbou formuláře. Tvorba webových stránek
Rámy, CSS, pozicování – zadání 21.4.2019 Rámy, CSS, pozicování – zadá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
Tvorba webových stránek 21.4.2019 Rámy – řešení č. 1. Ze souborů ramy.htm a menu.htm vyčteme, jak se jmenuje pravý rám, do kterého budeme zobrazovat a jak se na něj odkážeme (tagy name a target). Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Rámy – řešení č. 1. Do souboru menu.htm přidáme odkazy na webové stránky z internetu. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Rámy – řešení č. 1. V prohlížeči otevřeme soubor ramy.htm a ověříme funkčnost nově přidaných odkazů. Naučili jsme se, že pomocí rámů můžeme vytvořit menu, které může odkazovat na podstránky jak z disku počítače, tak z internetu. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Rámy – řešení č. 1. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Rámy – řešení č. 1. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 CSS – řešení č. 2. Takto vypadá text.htm zatím bez použití formátování v souboru styly.css. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 CSS – řešení č. 2. Do hlavičky souboru text.htm přidáme tento řádek. Tím připojíme ke stránce soubor obsahující informace o formátování styly.css. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 CSS – řešení č. 2. Takto vypadá text.htm s použitím formátování souborem styly.css. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 CSS – řešení č. 2. V souboru styly.css přepíšeme informace o barvě nadpisu h1 a o velikosti textu. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 CSS – řešení č. 2. Dále přepíšeme informaci o barvě odkazu hover. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 CSS – řešení č. 2. Upravený soubor styly.css uložíme a podíváme se na výsledek. Odkaz přejetý myší by měl mít žlutou barvu, nadpisy barvu modrou a text velikost 12pt. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Pozicování – řešení č. 3. Pro vyřešení tohoto úkolu je potřeba označit si druhý nadpis buď pomocí třídy (class) nebo identifikátoru (id), protože jak první, tak druhý nadpis v textu jsou typu h1 a my je potřebujeme od sebe v definici stylu odlišit. My si ukážeme řešení pomocí třídy. Obrázek vlevo ukazuje text.htm a obrázek vpravo styly.css. Výsledek vidíte na dalším snímku. Nadpis se posunul přesně na definovanou pozici. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Tvorba webových stránek
Tvorba webových stránek 21.4.2019 Pozicování – řešení č. 4. Pro vyřešení úkolu 4 vyzkoušíme použít identifikátoru (id). Máme za úkol použít relativní pozicování. Nadpis se posune o 10 pixelů nahoru. Tvorba webových stránek
Tvorba webových stránek 21.4.2019 top: -10px; Tvorba webových stránek
Tvorba webových stránek 21.4.2019 http://cs.wikipedia.org (červenec 2010) Tvorba webových stránek