VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/34.0501 Tvorba webových.

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Technologie pro publikování na webu 1
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Tagy neboli příkazy Olga Kasafírková Základy HTML.
Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.
TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.
WWW stránky.
Referát č. 22 Tvorba webových stránek (Struktura webu, struktura HTML dokumentu, vytvoření webové stránky exportem z aplikačního programu, provázání.
Tvorba WWW stránek ÚVOD
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
VY_32_INOVACE_4.3.IVT1.15/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 Technologie pro publikování na webu Přednáška č. 4 seznamy seznamy tabulky tabulky jejich sémantika jejich sémantika Ing. Martin Adámek Katedra informačních.
VY_32_INOVACE_4.3.IVT1.19/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.
Základní struktura, metainformace
<. 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:
HTML HyperText Markup Language 4. část Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky.
VY_32_INOVACE_4.3.IV1.02/Ku Html dokument a jeho struktura Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/
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.
VY_32_INOVACE_4.3.IVT1.14/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.
Úvod do html kódu. Roman Hendrich
TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní.
TVORBA WEBOVÝCH STRÁNEK
VY_32_INOVACE_4.3.IVT1.04/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Textové elementy.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.10 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - tagy Typ: DUM - kombinovaný Předmět:
Tematická oblast: Aplikační software pro práci s informacemi II.
Layout stránky Rozvržení stránky (layout stránky) se provádí z těchto důvodů: Určení polohy záhlaví, menu, textů, obrázků... Zachování polohy při změně.
XHTML Tvorba webových stránek. Vývoj značkovacích jazyků HTML – HyperText Markup Language  Značkovací jazyk pro vytváření www stránek. Pomocí značek.
Internetové publikování publikace na serveru, rámce Petr Zámostný místnost: A-72a tel.: Konzultační.
Jazyk HTML.
VY_32_INOVACE_4.3.IVT1.11/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.
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
Číslo šablony: III/2 VY_32_INOVACE_P4_3.13 Tematická oblast: Aplikační software pro práci s informacemi II. CSS - vlastnosti Typ: DUM - kombinovaný Předmět:
VY_32_INOVACE_4.3.IVT1.18/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.
VY_32_INOVACE_4.3.IVT1.10/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ Validita stránek.
Tvorba WWW stránek HTML - XHTML Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Každá.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_258 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
Čí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.
HTML, XHTML a CSS Základy jazyků značek.
CSS – style Mgr. Lenka Švancarová. CSS – značka style (textstyle.html)
Návrh a tvorba WWW Cvičení 4
Čí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.
DTD DTD (Document Type Definition) je jinými slovy návod pro prohlížeč zpracovávající dokument. DTD (Document Type Definition) je jinými slovy návod pro.
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.
Příkaz "echo" Příkaz "echo" Příkaz "echo" se používá pro zobrazení daných informací na monitoru. Příkaz "echo" se používá pro zobrazení daných informací.
Obrázky v HTML dokumentech Druhy a použití. Obrázky + Zvyšují atraktivitu stránek. + Zvyšují vypovídací schopnost stránek. - Zvyšují dobu načítání stránky.
CO NÁS ČEKÁ ve cvičení 5 Oč. - KIT PEF CZU 1. O DKAZY Chceme-li, aby čtenář naší html stránky někam odklepnul..... Oč. - KIT PEF CZU.
VY_32_INOVACE_4.3.IVT1.05/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.
Čí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ý.
Párová a nepárová značka, atributy a jejich hodnoty
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.
Základy HTML 1 Odkazy. 2 a aOdkaz (z angl.anchor). Obsah odkazu Vše, co je mezi značkami a bude sloužit jako odkaz (tzn. bude klikatelné). Např. Hlavní.
Odkazy. Href Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
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.
Základy tvorby www stránky v HTML kódu. © Mgr. Petr Loskot, leden Časopis PPK Časopis PC World.
Kaskádové styly CSS Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
Tvorba webových stránek - tabulka
Značkovací jazyk HTML Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
Co je to webová prezentace?
Tvorba WEBOVÝCH stránek – obrázky
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
Transkript prezentace:

VY_32_INOVACE_4.3.IVT1.17/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 stránek RÁMY NA WEBU

VY_32_INOVACE_4.3.IVT1.17/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 stránek RÁMY NA WEBU Rámy - zobrazení současně více samostatných stránek v prohlížeči - jeden rám může mít menu s odkazy na stránky zobrazované v jiném okně - musí být obdelníkové, mohou být vodorovně (řádky) nebo svisle (sloupce) nebo obojí - počet není omezen Účel, význam, použití Rámy (angl. frames) mohou být součástí webových stránek – dnes se užívají již méně. Rozdělují okno prohlížeče na části (rámy), ve kterých se zobrazuje samostatná stránka (soubor html) řádky sloupce řádky i sloupce

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba – deklarace, popis, obsah rámů na stránce - jiná struktura dokumentu než u běžné webové stránky - musí obsahovat záhlaví (head) a definici rozložení rámů (frameset). Tělo dokumentu (body) se vůbec nepoužívá. Popis rámů - základní značky (elementy), - rozložení rámů, (nahrazuje tag body) Tag se umisťuje za … místo …. atributy: rows, cols - řádky, sloupce – určují, na kolik řádků či sloupců se okno rozdělí, jeden frameset – pouze jeden z těchto atributů Př.: - 2 řádkové rámy, 1. šířky 150 px, 2. zbytek šířky původ. okna (ta *) nebo - 3 sloupcové rámy, px, % pův.okna a 1. zbytek šířky

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Obsah rámů – značky (elementy): - nepárový tag, určuje, co se v daném rámu zobrazí atributy: src - označuje stránku (soubor html), která se načte do daného rámu, odkazem se do něj může načíst i jiná stránka Př.: name - udává název daného rámu, mj. slouží pro určení cílového rámu, do něhož se něco odkáže Př.: Místo tagu může být další (vnořený) pro další (vnořené rámy).

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ STRUKTURA DOKUMENTU - rozložení rámů webové stránky Deklarace rámů Elementy (značky) a soubory popisující uspořádání a obsah rámů. Zdrojový kód (uspořádání rámů): Příklad – 3 rámy na stránce ( např. zelený, oranžový a fialový)

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Zdrojový kód - Soubor Horni_DR17_DUM.html (zelený rám) : Jednotlivé soubory stránek v rámech (obsahy rámů) (Horní, Menu a Obsah) Analogicky zdrojové kódy zbývajících stránek (Menu a Obsah), soubory Menu_DR17_DUM.html a Obsah_DR17_DUM.html (oranžový a fialový rám)

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Výsledek: (3 rámy – Horní, Menu a Obsah) Element FRAME - některé vybrané atributy: Př.: ………. scrolling=“auto“ – posuvník, je-li stránka větší než rám frameborder=“0“ – rámeček mezi rámy ano=1, ne=0 name=“název rámu“ – pro odkazy, viz. dále marginwidth –horizontání okraj rámu (vzdál. od okraje) v px či %. marginheight – vertikální okraj rámu

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Odkazy v rámech - atribut target (cíl) rovný jménu cílového rámu. - kterýkoli odkaz do libovolného rámu Základní cíl (base target) - mnoho odkazů do stejného cílového rámu tagem, který se umístí do hlavičky stránky ( ), ze které jsou odkazy do cílového rámu: vlastní odkaz Bažant zlatý pak směřuje do “Obsahu“. atributu target u odkazu má větší váhu než u elementu base, tím lze odkazy pak načíst do jiných rámů než je dáno u base v hlavičce. Př.: TEXT odkazu Bažant zlatý (obr. B_zlatého se zobrazí v rámu Obsah z odkazu Bažant zlatý v daném rámu, kde je to napsáno)

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Neexistující rám Stránka popisující rozložení rámů je jinak prázdná, proto v prohlí- žeči, jež nepodporuje rámy, se nezobrazí nic. Pro prohlížeče bez podpory rámů je proto třeba alternativa, ná- hrada, upozornění na rámy. základní značky: …text… text se zobrazí jen když se nezobrazují rámy Inline rámy (vnořené rámy) Rám podobný obrázku – obdélnikový prostor, ve němž může být zobrazena jiná stránka. Plovoucí rám vložený do libovolné stránky. základní značky: … Text mezi a se zobrazuje pouze v prohlížečích, které inline rámy nepodporují !! Př.: <iframe src=“název.html" width="50%" height="30“ frameborder="0" align=“left" scrolling="no“ name=“ramecek">..alternativní obsah pro prohlížeče nezobrazující rámy.. Př.: Váš prohlížeč nepodporuje rámy, proto …upozornění na jiné řešení …

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Zdrojový kód (pro soubor popisující obsah): Výsledek (všechny 3 rámy):

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Problémy rámů: - neviditelná adresa – jen základní adresa rámu - problémy při ukládání stránek z rámů - nezobrazují je všechny prohlížeče - delší doba načítání stránky u uživatele (více souborů) - další problematika – viz zdroje Design pomocí tabulek: apod. - rámy omezit a promyslet jejich použití - okna (rámy) pomocí CSS pozicování Atributy tagu : - src - name - width - height - align - frameborder - scrolling - marginheight, marginwidth - další viz zdroje D o p o r u č e n í (vzhledem k problémům) :

VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Zdroje: JANOVSKÝ, Dušan. Jak psat web [online] [cit ]. Dostupné z: BROŽA, Petr. Jak na počítač vytváříme www stránky. Brno: Computer Press, ISBN Flídr, M.: HTML pro začátečníky. Praha: PC WORLD, 2001, roč. 2001, č. 2. Co to je html [online]. [cit ]. Dostupné z: ROUBAL, Pavel. Počítačová grafika pro úplné začátečníky. Computer Press, Tvorba webu [online] [cit ]. Dostupné z: