No title

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:

Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace

Adresa:

U Balvanu 16, 466 34 Jablonec nad Nisou

Autor:

Mgr. Pavel Červinka

Číslo šablony:

III_2_7_04

Název materiálu:

Html – obrázky

Předmět:

Informatika

Cílová skupina:

3. ročník a septima

Datum vytvoření:

16. 07. 2012

Téma:

Vkládání obrázků do stránky

Cíl prezentace:

Výklad a procvičení, jak přidat obrázky do webové stránky

Časová dotace:

1 vyučovací hodina

Anotace:

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

Projekt EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585

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 , 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: 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ř. Pokud trváte na mezeře, je nutné uzavřít jej do uvozovek . 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. 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 může vypadat takto:

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 , 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. Samozřejmě máte možnost nadefinovat pozadí ve stránce pro jednotlivé tagy zvlášť například pro a
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

No title

Recommend Documents