Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace U Balvanu 16, 466 34 Jablonec nad Nisou Mgr. Pavel Červinka Číslo šablony: Název materiálu: Předmět: Cílová skupina: III_2_7_04 Html obrázky Informatika 3. ročník a septima Datum vytvoření: 16. 07. 2012 Téma: Cíl prezentace: Časová dotace: Anotace: Vkládání obrázků do stránky Výklad a procvičení, jak přidat obrázky do webové stránky 1 vyučovací hodina Studenti se v této lekci seznámí s možnostmi použití obrázků. Vyzkouší si vkládání obrázků na pozadí stránky, vytvoří jednoduchý vzhled indexu pomocí dlaždicových obrázků a také umístí obrázky do stránky tak, aby je text obtékal. Tento výukový materiál vznikl v rámci Operačního programu Vzdělávání pro konkurenceschopnost
Obrázky Obrázky na webové stránce mohou doplňovat obsah, případně tvořit layout (to, jak stránka vypadá). Při umísťování obrázků na web musíme dávat pozor na jejich velikost. Nejen fyzickou velikost, tzn. rozlišení, udávané v pixelech px, ale hlavně datovou velikost v B, KB, MB. Když umístíme na web obrázek o velikosti 230KB, stránka se načte celkem rychle. Jestliže ale bude na stránce deset obrázků této velikosti, jsme rázem na 2.3 MB a tato stránka se bude načítat podstatně déle. Proto je potřeba veškeré obrázky upravit ještě před jejich umístěním na web. Pro web jsou nejvhodnější formáty jpg, gif nebo png. Jsou částečně komprimované a redukují počet barev v tzv. barevné hloubce, ale naše oko to nepostřehne. Jpg je pro fotografie (bitmapy), gif pro animace a png pro kreslené obrázky v grafickém programu (vektory). K prohlížení obrázků (i souborů jiných typů) a pro práci s nimi doporučuji Irfan View. Pro změnu velikosti obrázku klikněte na Image Resize / Obrázek změnit velikost (zkratka Ctrl+R). Další možnost, jak nechat datově zhubnout obrázek je, že jej přeuložíme. Klikněte na File Save as / Soubor uložit jako (zkratka Ctrl+S). V řádku Uložit jako typ (v dolní části) nechte nastaven JPG/JPEG Format. V pravé tabulce nastavte kvalitu obrázku ze 100% na 70% (Save quality: 70). Obrázek ještě tuto ztrátu kvality snese a datově se zmenší. Klikněte na Save / Uložit. O dalších možnostech Irfanu se dozvíte v některé z dalších lekcí. Vložení obrázku na stránku Obrázek vkládáme do html tagem <img src >, který určuje cestu k fotografii. Nezapomeňte, že fotku musíte nahrát na web. Stává se, že nahrajete zdrojový kód stránky, ale zapomenete fotku, tudíž prohlížeč nenajde požadovaný jpg na webu. Obrázek vložený do stránky může vypadat takto: <img src = "obrazek.jpg" > Všimněte si, že obrázek je psaný bez diakritiky (bez háčků a čárek) a malým písmem. Tím se vyvarujete možnosti, že se obrázek na webu nezobrazí. Místo obrázku se pak zobrazí jen křížek. Mezery nahrazujte podtržítkem, např. <img src = "prvni_obrazek.jpg" > Pokud trváte na mezeře, je nutné uzavřít jej do uvozovek <img src = "prvni obrazek.jpg" >. Již jsme se naučili obrázek zmenšit. V html máte možnost zmenšit zobrazované rozlišení pomocí parametrů width a height. Znamená to sice, že obrázek se zmenší, ale datově zůstává stále stejně veliký. Jestliže použijete pouze jeden z parametrů, zachováte poměr stran, protože prohlížeč druhý parametr dopočítá. Máte-li obrázek v rozlišení 640x480px a zadáte hodnotu parametru width=320, dopočítá se výška obrázku na 240px automaticky. <img src = "obrazek.jpg" width=320 > Ještě zbývá dodat dva parametry obrázku, align a alt. Align určuje zarovnání obrázku do textu. Např. align=left znamená, že obrázek se zarovná k levému okraji a text jej bude volně obtékat. Parametr alt se spíše uvádí kvůli vyhledávačům a můžete do něj skrýt název obrázku. 2
Výsledný nepárový tag <img> může vypadat takto: <img src = "obrazek.jpg" width=320 alt="můj první obrázek" align=right> Obrázek na pozadí Nejjednodušší variantou, jak vylepšit vzhled svých stránek je, že přidáte obrázek na pozadí. Pokud máte menší obrázek než je rozlišení obrazovky, bude se automaticky opakovat po celé stránce. Této možnosti se využívá proto, že určíte obrázek např. o velikosti 20x20px (datově třeba 2KB), který se načte velmi rychle a zároveň nám vyplní celou plochu prohlížeče. Někdy bývá takový obrázek označován jako dlaždice. Stejně, jako jsme určovali parametry obrázku, i u ostatních tagů se zapisují do špičatých závorek. Ukážeme si dvě vlastnosti pro definování pozadí. Background=obrázek na pozadí, bgcolor=barva pozadí. Parametr background vyplňujeme stejně jako tag <img>, parametr bgcolor může obsahovat buď anglické názvy barev, nebo šestnáctkový kód. Nemusíte si jej pamatovat, zde máte jejich přehled. <body background=obrazek_na_pozadi.jpg bgcolor=lightblue> <body background= obrazek_na_pozadi.jpg bgcolor=#add8e6> Samozřejmě máte možnost nadefinovat pozadí ve stránce pro jednotlivé tagy zvlášť například pro <body> a <p> samostatně (vkládá se do css) pomocí vlastnosti background-image. Máte tyto možnosti: background-repeat: no-repeat - obrázek na pozadí se neopakuje background-repeat: repeat-x - opakování podle osy x - vodorovně background-repeat: repeat-y - opakování podle osy y svisle background-attachment: fixed - obrázek neroluje s textem, zůstává zafixovaný background-attachment: scroll - obrázek roluje s textem background-position: center - obrázek se vycentruje doprostřed stránky Vytvořený styl css může vypadat takto: body { color: black; background-color: #ffff00; background-image: url(obrazek_na_pozadi.jpg); background-position: center; background-repeat: no-repeat; } Tělo má černý text a na pozadí obrazek_na_pozadi.jpg, který je vycentrovaný a neopakuje se. Jestliže tento obrázek nevyplní celou plochu prohlížeče (nebo se nezobrazí vůbec) zobrazí se text na žlutém pozadí. 3
Úkoly: Na pozadí stránky hadanky.html dejte libovolný obrázek tak, aby se neopakoval, neroloval a byl vycentrovaný. Stáhněte si malý obrázek o velikosti do 50px a použijte jej na pozadí indexu jako dlaždici. Vytvořte stránku zajmy.html. Napište nebo stáhněte krátkou charakteristiku Vašich zájmů a vložte alespoň dva obrázky do textu stránky. Jeden bude zarovnaný vpravo a druhý vlevo. 4
Zdroje: http://www.jakpsatweb.cz/html/ http://www.kosek.cz/html/html-tvorba-dokonalych-www-stranek.pdf http://www.zshorakhk.cz/tvorba/ucitele/www/index.php?lekce=4 http://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html 5