HTML - obrázky(5)

Vkládání obrázků v kostce

Vložení obrázku pomocí tagu <img>

Obrázek v jazyce HTML se vkládá pomocí nepárového tagu <img>. Img má jeden povinný atribut a tím je src, do něhož zadáme relativní URL.

Příklad:

<img src="obrazek.jpg">

Zobrazte si příklad

Dobré je udělat si pro obrázky jiný adresář než pro stránky(viz. Správa soubrů). Hodně to zvyšuje přehlednost.

Příklad:

<img src="obrazky/obrazek.jpg">

Popis obrázku bublinovou nápovědou

Určitě jste si všimly, že když někde najedete na obrázek, tak se vám vedle kurzoru zobrazí bublinová nápověda. Tento popis se vytváří pomocí atributu alt. Když si někdo vypne zobrazování obrázků nebo administrátor omylem zadá špatnou cestu(stávat by se to nemělo) k obrázku, tak se tam tento text vypíše. Je stejné jako použití atributu title.

Příklad:

<img src="obrazek.jpg" alt="Toto je můj obrázek">

Zobrazte si příklad

Rozměry obrázků

Doporučuje se zadat rozměry obrázku, jinak prohlížeč nebude vědět jak bude velký a než to srovná tak to bude vypadat hrozně. A nejspíš to i sníží orientaci. Pro zadávání rozměrů se používají dva atributy:

wight - určuje délku obrázku
height - urřuje výšku obrázku

Rozměry se zadávají v pixelech nebo procentech velikosti obrazovky. Zadat jen jedno číslo v procentech, tak to bude lepší.

Zmenšovat pomocí atributů tagu <img> ano či ne

Spíše ne. Když obrázek zmenšíte až prohlížeči, tak tím akorát zdelšíte čas stahování, protože zmenšením v grafickém editoru zmenší velikost. Což je na internetu docela důležité. A bude to vypadat mnohem hůř, než když si s tím pohrajete v nějakém editoru. Zvětšování to samé, vzniknou obrovské čtverce. A to je asi ještě horší.

Umístění obrázku vůči řádku a obtékání textem

Obtékání textem nabo umístění na řádku se používá atribut align. A jeho podatributy. Potatributy:

top, textop, middle, absmiddle, baseline, bottom, absbottom a center určují umítění obrázku na řádku
left a right určují obtékání tetxem

Podatributy pro obtékání textu:

Text se zarovná napravo od obrázku a obrázek se zarovná úplně na levé straně stránky, horní okraj obrázku se zarovná k textu, který je nad ním.
Vlastně stejně, ale vše na druhou stranu.

Příklad:

<img src="obrazek.jpg" align="left">

Zobrazte si příklad

Podatributy pro umístění obrázku na řádku:

baseline, bottom, absbottom, textop -- zarovná spodek obrázku na spodek textu
center, absmiddle, middle -- střed textu prochází středem obrázku
top -- zarovná horní kraj obrázku na horní kraj textu

Příklad:

<img src="obrazek.jpg" align="top">

Zobrazte si příklad

Rámeček

Rámeček, který se vykreslí okolo se vkládá pomocí atributu border. Rámeček je normálně černý, ale když se z obrázku stane odkaz rámeček zmodrá.

Příklad:

<img src="obrazek.jpg" border="2">

A takto to vypadá.
Když chcete obrázek bez rámečku jednoduše zadáte border="0".

< >

autor: Vítězslav Titl
publikováno: 24.10.2004