HTML/Obrázky
Dnes už si neumíme představit webovou stránku bez obrázku, takže tag <IMG> bude jeden z těch, které budete používat častěji.
Tag <IMG>
[editovat | editovat zdroj]Obrázky se tvoří pomocí tagu <IMG> což je zkratka anglického slovíčka IMAGE(obrázek) Jelikož je to nepárový tag, proto neexistuje </img> což je hrubá chyba!
Při použití různých atributů to může vypadat takto:
<img src='nejaky_obrazek.gif' alt='Popis obrázku' width='100' height='100' border='1'>
Atributy
[editovat | editovat zdroj]Jak je řečeno v Lekci 1 některé tagy mají atributy a IMG jich má hned několik které si představíme.
SRC
[editovat | editovat zdroj]Atribut SRC označuje cestu k souboru a to jak absolutní tak i relativní Tento atribut je povinný bez něj prohlížeč nezobrazí obrázek.
<img src="nejaky_obrazek.gif">
ALT
[editovat | editovat zdroj]Nastavuje text který se zobrazí v prohlížeči na kterém jsou vypnuty obrázky. Tento atribut je jeden z nejdůležitějších u obrázku protože Vyhledávače podle něho vyhledávají obrázky nebo počítače pro slepce ho předčítají.
<img src="http://upload.wikimedia.org/wikipedia/meta/2/2a/Nohat-logo-nowords-bgwhite-200px.jpg" alt="Logo wikipedie">
Rozměry
[editovat | editovat zdroj]Pomocí atributů se dá obrázek zvětšit nebo zmenšit jak na šířku tak na výšku.
Zde doporučuji vždy zadávat oba atributy, protože když je nezadáte tak prohlížeč čeká než se obrázek načte protože nezná jeho velikost proto neví kolik míst ana webu si má pro něj rezervovat (toto neplatí pro prohlížeče založené na jádru GECKO )
jednotky jsou pixely a nebo procenta.
Width
[editovat | editovat zdroj]Označuje šířku obrázku.
<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" width="100%">
Height
[editovat | editovat zdroj]Označuje šířku obrázku.
<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" height="100%">
Align
[editovat | editovat zdroj]Určuje umístění obrázku vzhledek k okolním prvkům. Zde přidávám tabulku různých možností.
| Název | Popis |
|---|---|
| left | Obrázek je nalevo a text je vedlo něj zprava |
| right | Obrázek je napravo a text je vedlo něj zpleva |
| top | Obrázek je zarovnán nahoru |
| baseline | Obrázek je zarovnán dolu |
| texttop | Obrázek je zarovnán nahoru ale maximálně na nejvyšši bod textu |
| bottom | Obrázek je zarovnán dolu ale maximálně na nejnižší bod textu |
| middle | Obrázek je zarovnán doprostřed |
| middle | Obrázek je zarovnán doprostřed |
| absmiddle | Obrázek je zarovnán doprostřed řádku |
| absbottom | Obrázek je zarovnán na spodek řádku |
<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" height="100" height="100" align="top">
Border
[editovat | editovat zdroj]Udává šířku rámečku obrázku. Udané číslo je v pixelech.
<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" height="100" height="100" border="10">
Style
[editovat | editovat zdroj]Do atributu style se zadává CSS styl obrázku. Zde není naším úkolem naučit CSS -> Jakmile bude nějakej CSS návod dáme ho sem. Jen pro ukázku
<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" style="width: 100px; height= 100px;">
Map
[editovat | editovat zdroj]Klikací mapa na obrázku. Využití je třeba pro obrázkové menu pokud nechcete rozřezávat na jednotlivé díly.
v TAGu <MAP> je atribut name který přiřazuje jednotlivou mapu k určitému obrázku.
TAG <AREA> je se zapisuje pomocí souřadnic v pixelech oblast na kterou se dá klikat.
Ve tvaru -> (začátek-x),(začátek-y),(konec-x),(konec-y)
<map name="menu">
<area href="prvni.htm" shape="rect" coords="20, 20, 40, 40">
<area href="druha.htm" shape="rect" coords="50, 50, 70, 70">
</map>
<img src="obrazek.gif" usemap="#menu" width="150" height="150">