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.

Slides:



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

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.
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.
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..
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.
<. 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 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,
HyperText Markup Language
Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektu CZ.1.07/1.5.00/ Číslo sady29Číslo DUM14.
Programování HTML stránek
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.
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.
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.
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.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Blokový model v CSS Obr. 1.
Prezentace v Powerpointu
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
CSS – rámečky Mgr. Lenka Švancarová.
XHTML – tabulky 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: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Kaskádové styly - CSS.
SIPVZ – úvodní modul P Počítačová grafika a prezentace metodické poznámky (4 h)
CSS – vlastnosti textu text-align (vodorovné zarovnání)
Čí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é.
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.
Textový procesor (MS Word)
Tvorba webu Jazyk HTML, úvod
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
GRAFIKA.
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á,
3.Definování rozměrů zobrazených předmětů.
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ý.
Párová a nepárová značka, atributy a jejich hodnoty
Orbis pictus 21. století Tato prezentace byla vytvořena v rámci projektu.
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ákladní škola a Mateřská škola, Šumná, okres Znojmo OP VK Tematický celek: Informatika Název a číslo učebního materiálu VY _32_INOVACE_04_19.
TVORBA VÝUKOVÉ PREZENTACE I.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
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>
IrfanView (5). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně postižené,
Elektronické učební materiály - II. stupeň Informatika 7 – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Grafika - základy Co se všechno naučíme???
CorelDRAW – vizitka (20). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická škola pro tělesně.
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.
Chování blokových prvků v rámci HTML dokumentu
Tvorba WEBOVÝCH stránek – obrázky
GRAFIKA.
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.
Transkript prezentace:

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. (podstatně se zvyšuje objem přenášených dat)

Rastrové formáty BMP - plnohodnotný rastrový obrázek velice rozsáhlý, naprosto nevhodný pro použití na Internetu. GIF - menší objem dat, 256 barev 8bitová barevná hloubka obrázku, tj. Vhodné pro kreslené obrázky s ostrými přechody barev a velkými stejnobarevnými plochami. JPEG - pro plnobarevné obrázky typu fotografií Komprimace dat na úkor kvality obrázku. Kompromis mezi kvalitou a stupněm komprimace lze nastavit.

Zařazení obrázku Obrázky do dokumentu zařazujeme nepárovou značkou Možné parametry src="URL"... URL požadovaného obrázku alt="text"... alternativní text vypíše se po ukázání myší na obrázek nebo v textovém režimu zobrazení stránky

Zarovnání obrázku: align=... zarovnání zobrazení obrázku top - horní okraj middle - střed absmiddle - absolutní střed bottom - spodní okraj absbottom - absolutní spodní okraj baseline - účaří textu left – vlevo right - vpravo

Rozměry obrázku: width... šířka v obrazových bodech. height... výška v obrazových bodech. border... šířka rámečku Hodnota 0 (nula) znamená, že obrázek bude bez rámečku. hspace... horizontální mezera, vzdálenost od jiných objektů vodorovně vspace... vertikální mezera, vzdálenost od jiných objektů svisle

Poznámky nastavovat skutečnou velikost u width a height může dojít k deformaci obrázku prohlížeč si rovnou zobrazí stránku v konečném formátu Změnou rozměrů obrázku na stránce se nezmění množství přenášených dat Chceme-li na stránku umístit velký obrázek, umístíme nejprve na stránku jeho zmenšeninu - náhled (thumbnails).

Příklad zápisu: Prohlížeč zobrazí obrázek ze souboru "obrazek.gif", který najde ve stejném adresáři, jako je soubor zobrazované stránky, obrázek bude uprostřed řádku a s tenkým rámečkem, bude mít výšku 42 a šířku 38 obrazových bodů. Jako alternativní text se bude zobrazovat hláška "můj obrázek".