Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:

Prezentace na téma: "Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:"— Transkript prezentace:

1 Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a: Mgr. Jana Presová Ověřil/a: Mgr. Jana Presová

2 Název výukového materiálu: Vyváříme www stránky Vzdělávací obor: výpočetní technika Tematický okruh: tvorba jednoduché webové stránky Téma: VIII. Vkládáme obrázky na webovou stránku Stručná anotace: Prezentace shrnující zásady při vkládání obrázků na webovou stránku (vlastní obrázek z nějaké složky či z internetu), ukazuje jejich různé nastavení – zarovnání, změnu velikosti, rámeček kolem obrázku, ….

3 Na co pozor? na www stránku můžeme vložit obrázek ve formátu GIF, JPG nebo PNG (s ostatními jsou problémy!!!) v názvu obrázku by neměli být české znaky a mezery ke vložení obrázku na www stránku slouží nepárový tag … nemá ukončovací značku!!

4 Jak vložit obrázek? a)obrázek je ve stejné složce jako webový soubor, na kterou jej vkládáme: b)obrázek je v nějaké složce, která je ve složce s webovým souborem: jméno obrázku jméno složky, ve které je obrázek uložený

5 Jak vložit obrázek? c)obrázek je na nějaké www stránce: adresa www stránky, na které je obrázek zveřejněný a složky, ve které je (po najetí myší nad obrázek se ve stavovém řádku objeví tato adresa i se jménem obrázku) jméno obrázku

6 Vlastnosti - zarovnání tag má řadu upřesňujících parametrů, nejdůležitějším z nich je zarovnání obrázku vzhledem k okolnímu textu, k tomu slouží parametr align: "left" obrázek je umístěn na levý okraj okna a text jej obtéká bezprostředně zprava "right" obrázek je umístěn na pravý okraj okna a text jej obtéká bezprostředně zleva "top" zarovná horní okraj obrázku s nejvyšším písmenem v řádu, zbytek textu je pak ale pod obrázkem v daném řádku "middle" zarovná střed obrázku zároveň s prvním řádkem textu, zbytek textu je pak ale pod obrázkem v daném řádku

7

8 Vlastnosti – výška a šířka: width … šířka obrázku hight … výška obrázku udává se v pixelech např.:

9 Vlastnosti – rámeček: border … nakreslí rámeček okolo obrázku zadává se: border="n" … n je číslo, které zadá šířku rámečku v pixelech barva rámečku je vždy černá kromě případu, kdy je obrázek současně odkazem, tehdy je barva rámečku modrá (pokud není ve stylu zadán jiný formát odkazů např.:

10 Vlastnosti – odsazení textu: hspace a vspace jsou parametry určující volný prostor okolo obrázků nejsou-li uvedeny, je okolní text přilepený těsně k obrázku, což působí nehezky. hspace="n" volný prostor vlevo a vpravo vspace="n" volný prostor nad a pod obrázkem

11 příklad zadání obrázku: <img  src="obrazky/obr1.gif"  align="right"  width="100"  height="60"  border="15"  hspace="10"  vspace="10" >

12 Odsazení textu jinak: tagy hspace a vspace sice fungují, ale jsou již zastaralé, místo jich se používá margin margin je okraj od rámečku ven (udělá větší mezeru mezi textem a daným objektem může se zadávat jednou hodnotou najednou pro všechny čtyři strany, nebo se vypíše více hodnot pro různé strany (ty se napíšou za sebe a navzájem se oddělí mezerou, strany se zapisují po směru hodinových ručiček – horní, pravý, dolní, levý; pokud nějakou nenapíšeme, vezme se hodnota z protější strany)