Tvorba www stránek Obrázky, animace a transparentnost, grafická menu a klikací oblasti obrázku (1.část) Ing. Miroslav Vachůn, Ph.D.

Slides:



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

Počítačová grafika Nám umožňuje:
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
WWW stránky.
14SIAP – SÍTĚ A PROTOKOLY Hodina 3..
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 www stránek VLOŽENÍ OBRÁZKŮ ICT 4.ročník. Vložení obrázku OBRÁZEK NA WEBOVÝCH STRÁNKÁCH Binární data – ukládáme do samostatných složek (IMAGE,
Programování HTML stránek
III/2 XVII ABC
HTML HyperText Markup Language 3. čá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.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.
Tvorba www stránek SYNTAXE ICT 4.ročník. Obsah TAGY TAGY ATRIBUTY ATRIBUTY KŘÍŽENÍ TAGŮ KŘÍŽENÍ TAGŮ VELIKOST PÍSMEN VELIKOST PÍSMEN MEZERY VE ZDROJOVÉM.
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í.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Tvorba webových stránek II. Odkazy, obrázky, seznamy.
Jazyk HTML.
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
Úvod do HTML a tvorby webových stránek
Odkazy v obrázcích.
Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
Textový procesor (MS Word)
CSS – vlastnosti textu text-align (vodorovné zarovnání)
HTML Text, seznamy, tabulky. Formátování textu Tučné... Kurzíva … Velké … Malé … Dolní index … Horní index … Přeškrtnuté … Podtržené … MOŽNO KOMBINOVAT.
Čí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.
David Klíma- 1 - Obrázky na webu Než dám obrázek na web co musím udělat? Získat ho Upravit Zmenšit na publikovatelnou formu POZOR! někdy se obrázek natahuje.
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é.
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:
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.
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektuCZ.1.07/1.5.00/ Číslo sady29Číslo DUM16.
Tvorba webu Jazyk HTML, úvod
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
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.
Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená,
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.
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 a prezentace
Gymnázium, Žamberk, Nádražní 48 Projekt: CZ.1.07/1.5.00/ Inovace ve vzdělávání na naší škole Název: Grafické formáty Autor: Mgr. Petr Vanický.
Čí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ý.
Klikací mapy v GIMPu Tvorba tzv. klikacích (obrázkových) map s pomocí grafického editoru GIMP Dostupné z Metodického portálu ISSN: ,
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.
HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.
Zadání Podle předlohy si připravte tabulky se kterými budete pracovat.
Základy HTML 1 Vložení obrázku. 2 Grafické formáty První předpoklad pro vložení obrázku do stránky je jeho uložení ve vhodném formátu. Prohlížeče podporují.
Základy HTML 1 Klikací mapa. 2 Klikací mapa je obrázek s navigačními tlačítky. Kliknutím na různé části obrázku vyvoláme různé odkazy. Definice mapy:
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
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.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
Programujeme v kódu HTML (Hyper Text Markup Language)
Kristýna Krejčí, Aneta Smyčková, Tereza Kryzanová, Zuzana Purová 9.B.
Martina Braunerová.  obrázek je složen ze základních geometrických tvarů (body, přímky, křivky, mnohoúhelníky)  je možné libovolné zmenšování či zvětšování.
Tvorba www stránok.
HTML stránka – vložení obrázku Gymnázium a Jazyková škola s právem státní jazykové zkoušky Zlín Tematická oblastTvorba WWW stránky v HTML Datum vytvoření2013.
Grafické formáty Mgr. Petra Toboříková. Barevná hloubka barevné odstíny jsou dány kombinací barev barevná hloubka = určuje kolik bitů je potřeba k popisu.
Základy tvorby www stránky v HTML kódu. © Mgr. Petr Loskot, leden Časopis PPK Časopis PC World.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
Nástroj pro prezentace
Tvorba WEBOVÝCH stránek – tabulky
Tvorba WEBOVÝCH stránek – formátování textu, oddělovací čára
Tvorba WEBOVÝCH stránek – obrázky
Tvorba WEBOVÝCH stránek – hypertextové odkazy
Základy HTML TNPW1 Ing. Jiří Štěpánek.
Tvorba webových stránek
Jazyk HTML (1) Jazyk HTML (Hypertext Markup Language) se používá pro vytváření Web Pages (www stránek) HTML používá text a sadu formátovacích značek, označovaných.
Počítačová grafika.
Typy tagů stylové (formátovací) - tučné , šikmé , styl , písmo  ... strukturální- odstavce , nadpisy , seznamy , tabulky  ...
SVG vektorová grafika Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
Transkript prezentace:

Tvorba www stránek Obrázky, animace a transparentnost, grafická menu a klikací oblasti obrázku (1.část) Ing. Miroslav Vachůn, Ph.D.

Formáty obrázků Formát / Vlastnost GIFJPEGPNG Počet barev1 až 25624bitový TrueColor 1 až 48bitový TrueColor Vhodné proikony, obrázky nakreslené na počítači, pérovky naskenované fotografie jako GIF + obrázky vzniklé ray- tracingem a počítačovou vizualizací vůbec

Obrázky na www stránkách Tag IMG Tag IMG Parametry tagu IMG - zarovnání Parametry tagu IMG - zarovnání ALIGN="LEFT„ ALIGN="LEFT„ ALIGN="RIGHT„ ALIGN="RIGHT„ ALIGN="TOP„ ALIGN="TOP„ ALIGN="MIDDLE„ ALIGN="MIDDLE„ ALIGN="ABSBOTTOM„ ALIGN="ABSBOTTOM„ ALIGN="BASELINE„ ALIGN="BASELINE„ ALIGN="BOTTOM" ALIGN="BOTTOM"

Obrázky na www stránkách Parametry tagu IMG - velikost Parametry tagu IMG - velikost WIDTH="cislo„ WIDTH="cislo„ HEIGHT="cislo„ HEIGHT="cislo„ Parametry tagu IMG – alternativní text Parametry tagu IMG – alternativní text ALT="samotný alternativní text„ ALT="samotný alternativní text„ Parametry tagu IMG – volný prostor u obrázků Parametry tagu IMG – volný prostor u obrázků VSPACE="cislo„ VSPACE="cislo„ HSPACE="cislo" HSPACE="cislo"

Klikací mapy Definice oblastí Definice oblastí a a......

Klikací mapy Vlastní definice: Vlastní definice: HREF - určení URL stránky HREF - určení URL stránky ALT - slouží k zadání textového popisu ALT - slouží k zadání textového popisu SHAPE - tvar hranice aktivní oblasti SHAPE - tvar hranice aktivní oblasti (RECT) - obdélník (RECT) - obdélník (CIRCLE) - kruh (CIRCLE) - kruh (POLY) - mnohoúhelník (POLY) - mnohoúhelník COORDS – čárkami oddělená čísla popisující hranice COORDS – čárkami oddělená čísla popisující hranice USEMAP - URL mapy USEMAP - URL mapy

Barvy HTMLzobrazeno Použití rgb(r,g,b). Použití #rrggbb. Použití pojmenované barvy. Použití rgb(r,g,b). Použití #rrggbb. Použití pojmenované barvy.