NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov AUTOR: Ivana Mačková NÁZEV: VY_32_INOVACE_SADA5_INF.9.12 TÉMA: HTML – vkládání obrázků ČÍSLO PROJEKTU: CZ.1.07/1.4.00/21.2609
Anotace Materiál HTML – vkládání obrázků Vzdělávací obor Informatika Tematický okruh HTML – tvorba www stránek Anotace Výukový materiál slouží k vysvětlení příkazu pro vkládání obrázků do textu v html dokumentech. Očekávaný výstup Žák se seznámí s příkazem <img> pro vkládání obrázků a získané poznatky aplikuje při vytváření html dokumentů. Druh učebního materiálu Prezentace Stupeň a typ vzdělávání Základní vzdělávání – druhý stupeň, 9. ročník
HTML - OBRÁZKY Na www stránky vkládáme obrázky typu jpg nebo gif. K tomu používáme tag <img> s těmito atributy: src – určíme cestu, kde je obrázek uložen (odkud se načte) alt – zástupný text , který se zobrazí na stránce v oblasti nenačteného obrázku title – po najetí kurzoru na obrázek se objeví v rámečku zadaný popis obrázku border – tloušťka rámečku kolem obrázku height – výška obrázku v pixelech Např.: <img src="nemovcak.jpg" alt="Německý ovčák" title="Toto je německý ovčák" border="1" height="250">
HTML dokument
Zobrazení v prohlížeči
ZAROVNÁNÍ OBRÁZKU align=„top“ Provádí se v tagu <img> atributem align. align=„top“ Horní hrana obrázku je zarovnána na horní řádek textu. Obrázek není obtékán.
align=„bottom“ Spodní hrana obrázku je zarovnána na spodní řádek textu. Obrázek není obtékán.
align=„middle“ Střed obrázku je zarovnán podle textu. Obrázek není obtékán.
align=„left“ Obrázek je zarovnán na levý okraj stránky. Obrázek je obtékán.
align=„right“ Obrázek je zarovnán na pravý okraj stránky. Obrázek je obtékán. ÚKOL: Vytvořte html dokument o svých zálibách; vkládejte obrázky a provádějte různé způsoby jejich zarovnání.
Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora www.office.microsoft.com Zdroje: http://www2.openphoto.net/thumbs/volumes/TALUDA/20080603/openphotonet_Dog%20s%20life3.JPG www.office.microsoft.com