6. HTML - vkládání obrázků
22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace
Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.
| Projekt MŠMT ČR | EU PENÍZE ŠKOLÁM |
|---|---|
| Číslo projektu | CZ.1.07/1.4.00/21.2732 |
| Název projektu školy | EU Peníze školám |
| Klíčová aktivita III/2 | Inovace a zkvalitnění výuky prostřednictvím ICT |
Sada č. 1
Identifikátor DUM: VY_32_INOVACE_1ICT9roč_06
Vzdělávací oblast: Informační a komunikační technologie
Vzdělávací obor: Informatika
Název: HTML - vkládání obrázků
Autor: Mgr. Ondřej Hajduch
Stručná anotace: Vkládání obrázků pomocí jazyka HTML.
Klíčová slova: obrázek, img, vodorovné zarovnání.
Metodické zhodnocení: Žáci se naučí vkládat obrázky pomocí jazyka HTML.
Ověřeno: 7. 2. 2013 (IX.A)
Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch
6.1 HTML - vkládání obrázků (studijní text)
- obrázky se vkládání do HTML souboru pomocí nepárové značky <IMG>
- značka má velké množství atributů, avšak používá se jich jen několik
<IMG>
SRC
- povinný atribut určující cestu k obrázku (musí být definován pokaždé)
- cesta může být relativní nebo absolutní (např. webová adresa)
- značka <IMG> podporuje typy obrázků s příponami *.jpg, *.gif, *.png
<img src="obrazek.gif">
Příklad ukazuje vložení obrázku, který je umístěný ve stejné složce, jako je upravovaný HTML soubor.
<img src="img/obrazek.jpg">
Příklad ukazuje vložení obrázku, který je umístěný ve složce "img", která je umístěna spolu s upravovaným HTML souborem.
<img src="http://www.seznam.cz/logo.png">
Příklad ukazuje vložení obrázku, který je umístěn na serveru www.seznam.cz (vždy se musí uvést protokol http://).
ALT
- povinný atribut, který definuje alternativní popisek obrázku
- definuje se proto, aby v případě chybného načtení obrázku (špatná cesta, obrázek vymazán), se zobrazil alespoň popisek
- tento atribut též využívají čtečky textu a obrázků pro slabozraké
<img src="obrazek.gif" alt="jakýkoliv text">
TITLE
- nepovinný atribut definuje titulek obrázku (zobrazí se ve žluté bublině po najetí na obrázek
- není povinný, ale doporučuje se pro přehlednost používat
<img src="obrazek.gif" alt="jakýkoliv text" title="jakýkoliv text">
WIDTH, HEIGHT
- atributy definující šířku (width) a výšku (height) obrázku
- šířku a výšku lze definovat i pomocí CSS, ale není chybou, pokud použijete atribut v HTML
- hodnota se udává číslovkou vyjadřující příslušný rozměr v pixelech
- pokud chcete zachovat poměr mezi šířkou a výškou obrázku, zadejte pouze jeden rozměr (druhý rozměr se automaticky přizpůsobí)
<img src="obrazek.gif" width="200" alt="jakýkoliv text" title="jakýkoliv text"> <img src="obrazek.jpg" height="100" alt="jakýkoliv text" title="jakýkoliv text">
6.2 HTML - vkládání obrázků (cvičení)
Úkol č. 1
- Ve složce WWW si vytvořte složku CV06.
- Dále si vytvořte podsložku IMG (pozor na velká písmena).
- Do této složky si stáhněte a rozbalte soubor cv06.zip. (1-6)
- Ze složky CV05 si zkopírujte soubor index.html.
Úkol č. 2
- Vložte obrázky do souboru index.html následujícím způsobem:
- Obrázek Sněžky vložte před nadpis "Vodstvo",
- Obrázek soutoku Labe a Vltavy vložte před nadpis "Podnebí",
- Obrázek Prahy vložte před nadpis "Hustota zalidnění",
- Obrázek Brna vložte před nadpis "Národnostní složení",
- Obrázek Ostravy vložte před nadpis "Náboženské složení",
- Obrázek Plzně vložte před nadpis "Seznam deseti...",
- Pod každý obrázek vložte popis obrázku pomocí odstavce s textem: Obrázek: ....
- Všem obrázkům nastavte šířku na 500 pixelů.
- K obrázků nezapomeňte doplnit atributy ALT a TITLE.
- Zkontrolujte na případné chyby a uložte.