Tvorba webových stránek

Tvorba webových stránek
Tvorba webových stránek Praktická úloha – řešení 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

Formátování textu – zadání
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

Formátování textu – řešení č. 1.
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" " <html> <head> </head> <body> </body> </html> Uvedený typ dokumentu v prvním řádku je pro verzi jazyka HTML Č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" " nebo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Tvorba webových stránek

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. 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. 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í
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

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

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

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

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

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

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

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

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

Řešení celé úlohy Řešení celé úlohy z pohledu prohlížeče Tvorba webových stránek

Řešení celé úlohy Řešení celé úlohy z pohledu zdrojových kódů Tvorba webových stránek

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

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

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

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

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

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

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

Seznamy – řešení č. 1. První bod úlohy je jednoduchý. Definujeme pomocí tagů <ul> a <li> seznam. Tvorba webových stránek

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

Seznamy – řešení č. 2. U letních měsíců jsme použili typ square. Tvorba webových stránek

Seznamy – řešení č. 2. U měsíců podzimních je použit implicitní vzhled tagu <ol>. Tvorba webových stránek

Seznamy – řešení č. 2. U měsíců zimních je použit typ A tagu <ol>. Tvorba webových stránek

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

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

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

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

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

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

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

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

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í
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

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

Rámy – řešení č. 1. Do souboru menu.htm přidáme odkazy na webové stránky z internetu. Tvorba webových stránek

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

Rámy – řešení č. 1. Tvorba webových stránek

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

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

CSS – řešení č. 2. Takto vypadá text.htm s použitím formátování souborem styly.css. Tvorba webových stránek

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

CSS – řešení č. 2. Dále přepíšeme informaci o barvě odkazu hover. Tvorba webových stránek

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

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

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

top: -10px; Tvorba webových stránek

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

Tvorba webových stránek

Podobné prezentace

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

Podobné prezentace

O projektu

Kontaktní formulář

Přihlásit se

Přihlásit se přes sociální síť:

Tvorba webových stránek

Podobné prezentace

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

Podobné prezentace

O projektu

Kontaktní formulář