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.

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ř.
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
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.
Tvorba www stránek Obrázky, animace a transparentnost, grafická menu a klikací oblasti obrázku (1.část) Ing. Miroslav Vachůn, Ph.D.
14SIAP – SÍTĚ A PROTOKOLY Hodina 3..
Výukový modul projektu: Nové formy výuky ve školách kraje Vysočina Projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
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
1 Provázání stránek Vytvořte dvě www stránky, jednu růžovou a druhou modrou – viz. zdrojové kódy RŮŽOVÁ STRÁNKA Růžová stránka Odkaz na modrou stránku.
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.
TNPW1 Cvičení
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 II. Odkazy, obrázky, seznamy.
Jazyk HTML.
Úvod do HTML a tvorby webových stránek
Odkazy v obrázcích.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Blokový model v CSS Obr. 1.
Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.
CSS – rámečky Mgr. Lenka Švancarová.
VY_32_INOVACE_55_MS_Word_IV. Autor : Trýzna Stanislav Školní rok : 2011/2012 Určeno pro : šestý ročník Předmět: informatika Téma : základní orientace.
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Grafika a digitální fotografie Volitelný modul úrovně P díl č. 3.
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.
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 – 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.
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.
Tomáš Veselý, Lukáš Ratkovský, Luboš Rauer.
Čí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í.
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
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:
Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.
BMP – bitová mapa bez komprese Dnes se už nepoužívá TIFF – bezztrátový formát Používá se, když je potřeba uložit celý obrázek v maximální velikosti (publikace)
WORD Vkládání obrázků. Pokud potřebujete doplnit své dokumenty o obrázky, není to pro Word žádný problém. Tyto obrázky můžete libovolně vkládat do dokumentu.
Vytvoření dokumentu bylo financováno ze zdrojů Evropského sociálního fondu a státního rozpočtu ČR. Registrační číslo projektu: CZ.1.07/1.1.32/ Rastrová.
Programujeme v kódu HTML (Hyper Text Markup Language)
HTML - vložení obrázku značka pro vložení obrázku : <img>
Formátování dokumentu
Tvorba www stránok.
Ivo Peterka FHS Grafické formáty pro WWW ● Pro vkládání obrázků do prezentací se používají následující formáty – Graphics Interchange Format.
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.
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.
Rastrová grafika Základní termíny – Formáty rastrové grafiky.
Grafika – opakování Číslo projektu CZ.1.07/1.5.00/
Chování blokových prvků v rámci HTML dokumentu
Tvorba WEBOVÝCH stránek – obrázky
Inf Formáty grafických souborů
Tabulky a prostředí tabular
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.
Typy tagů stylové (formátovací) - tučné , šikmé , styl , písmo  ... strukturální- odstavce , nadpisy , seznamy , tabulky  ...
Transkript prezentace:

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 déle než celá stránka Musíme vybrat vhodnou velikost a typ obrázku

David Klíma- 2 - Formáty obrázků GIF Zabudovaná bezeztrátová komprese Podporuje animované sekvence Ostré hrany atd... Větší velikost Pro ikonky, prekoresby, animované sekvence JPG Ztrátová komprese Velký kompresní poměr Vhodné pro fotografie

David Klíma- 3 - Značka Pro vkládání obrázků Jedná se o nepárovou značku Několik parametrů Src=“obrázek.jpg” lowsrc=“obrázek.jpg” – obrázek s malým rozlišením, který se načítá jako první před tím v src Alt=“alternativní text”

David Klíma- 4 - Zarovnání obrázku Již používáme ale u grafiky má nejvíce hodnot Top – horní okraj gr. na horní okraj řádku Middle – střed grafiky na účaří řádku Bottom – dolní okraj gr. na dolní okr. řádky Left - ne levý okraj s obtékáním zprava Right Texttop – horní okraj gr. na horní okr řádku Absmiddle – střed grafiky na střed řádku Baseline – dolní okraj grafiky na dolní okraj řádku Absbottom – dolní okraj grafiky na dolní okraj řádku

David Klíma- 5 - Další parametry Width, height natvrdo rozměry Nehledí se pak na skutečnou velikost obrázku Hspace, vspace Kolik místa se vynechá vedle obrázku Border Velikost rámečku okolo (implicitně 0)

David Klíma- 6 - Co dál použít u obrázku Samozřejmě odkaz Href Alt – alternativní text

David Klíma- 7 - Příklad

David Klíma- 8 - Aktivní mapy Definice ohraničená Mezi tím několik které definují citlivé oblasti Parametr shape tvar oblasti Circle, rect, polygon Coords – parametr pro vládání souřadnic

David Klíma- 9 - Příklad - mapy <area href=“strana1.htm” alt=“popisek” shape=rect coords=100,1,200,50> <area href=“seznamy.htm” alt=“seznamy” shape=rect coords=300,1,400,50> <img src=“obrazek.jpg” alt=“mapy” usemap”#mapa”>