Tvorba webových stránek

Slides:



Advertisements
Podobné prezentace
Technologie pro publikování na webu 1
Advertisements

Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Styly, záhlaví a zápatí, oddíly
Tvorba webových stránek
Microsoft 4. Windows Live Messenger. Co je to Messenger ? Nástroj pro komunikaci s přáteli Textová komunikace formou chatu Videokomunikace přes.
WWW stránky.
Technologie pro publikování na webu 1 Cvičení 3 Nadpisy a základní formátovací elementy.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
Tvorba stránek  komu jsou stránky určeny  grafická úprava stránek  obsah  motivy vzhledu stránky
HyperText Markup Language
ÚVOD DO HTML Jak vytvořit stránky. Jak vytvořit www-stránky 1) Vytvořit soubor *.htm, nebo *.html 2) Nahrát soubor na server =>dát na internet.
TNPW1 Cvičení
Úvod do html kódu. Roman Hendrich
Obrázek v prostředí MS-WORD
TVORBA WEBOVÝCH STRÁNEK
Tvorba webových stránek II. Odkazy, obrázky, seznamy.
Jazyk HTML.
Třídy, generické třídy, pseudotřídy
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
Zadání samostatné práce SP1 Základy HTML. CÍL Ověřit znalosti použití základních HTML construkcí –Základní kostra –Kódování češtiny –Nastavení pozadí.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_257 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
VY_32_INOVACE_4.3.IVT1.12/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
TNPW1 Cvičení
TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
CSS Cascading Style Sheets Kaskádové styly
DHTML Jan Felger. Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Úvod Tato prezentace zobrazuje pouze zcela základní minimum znalostí, které.
XHTML – odkazy Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.
XHTML – obrázky Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.
CSS – float a clear Mgr. Lenka Švancarová. CSS – float Vlastnost určuje obtékání prvku. Hodnoty:  right – prvek bude zarovnán vpravo, okolní obsah stránky.
WWW stránky – Úvod Mgr. Lenka Švancarová.
Nové modulové výukové a inovativní programy - zvýšení kvality ve vzdělávání Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem.
Počítačová grafika Cvičení.
URL v HTML URL - Unique Resource Locator Příklad:
Vytvoření hypertextového odkazu
Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),
2. změňte logo na pozadí předlohy snímku ze zelené bubliny na usměvavé sluníčko Procvičování prezentace 1. Klepnutím a přepisem vložte libovolný nadpis.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný.
VY_32_INOVACE_4.3.IVT1.13/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
HYPERTEXTOVÉ ODKAZY V PowerPointu 2010.
VY_32_INOVACE_4.3.IVT1.06/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS pozicování.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
VY_32_INOVACE_4.3.IVT1.07/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS formátování.
Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat.
Cvičení 2 - Řešení příkladu
Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_029.ICT.34 Tvorba webových stránek – fotogalerie ZPS.
Inf Webová stránka, princip HTML a CSS. Výukový materiál Číslo projektu: CZ.1.07/1.5.00/ Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím.
Tvorba WEBOVÝCH stránek – kostra dokumentu Šablona 32 VY_32_INOVACE_12_10_Tvorba webových stránek-kostra dokumentu.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky II. Co se všechno.
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
Základy tvorby www stránky v HTML kódu. © Mgr. Petr Loskot, leden Časopis PPK Časopis PC World.
Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_034.ICT.34 Tvorba webových stránek – PHP technologie.
NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír.
Tvorba webových stránek - tabulka
ADOBE DREAMWEAVER CS6 CSS - Formátování textu
HTML (II) (3).
Tvorba WEBOVÝCH stránek – obrázky
Ruční programování frézky - podprogramy
Číslo projektu školy CZ.1.07/1.5.00/
Přizpůsobení webu Microsoft SharePointu Online
Tvorba webových stránek na google – Sites (4.)
Tvorba webových stránek
Transkript prezentace:

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