[TUT] Obrázek

[7.Host 3]

Ukážeme si jak snadno se dá upravovat obrázek v html a co všechno se s ním dá dělat.

 

Obrázek se do stránky vkládá tímto tagem:

Pokud používáme xhtml tak tímto:

Teď by se nám náš obrázek nezobrazil protože jsem nezadali, jaký obrázek se má zobrazit.

Obrázek který chceme zobrazit musíme tedy nahrát na web a následně vložit jeho adresu.

Náš obrázek jsem nahráli třeba na http:///chat/img/emoticons/error.png.

Zobrazíme ho tedy tímto způsobem:

Pokud používáme xhtml tak zase jen přidáme na konec před > /:

Obrázek už se nám zobrazuje v této podobě:

Po okrajích se, ale v některých prohlížečích zobrazuje rámeček, ten odstraníme přidáním border="0":

a nebo naopak zapneme když přepíšeme border="0" na border="1":

Další otázka zní, co budeme dělat když chceme zmenšit velikost zobrazovaného obrázku?

Odpověď zní, v html není nic složité a proto ani změna velikosti obrázku nebude těžká. Stačí přidat width="vase_velikost_v_px_nebo_%" (šířka) a height="vase_velikost_v_px_nebo_%" (výška). Já jsem se rozhodl že velikost obrázku nastavím na 12px šířky a 12px výšky, což je ještě menší než náš obrázek vyznačující chybu s nezměněnou velikostí.

Dále by jsme chtěli k obrázku přidat nějaký alternativní popis (alt="alt. popis") a titulek (title="titulek"), který se zobrazí po najetí myší na obrázek.

Obrázek je automaticky zarovnaný vlevo, jak ho ale zarovnat třeba vpravo? Html je jednoduchý jazyk který se naučíte za pár dní a tak i zarovnání obrázku není nijak složité. Stačí použít align="kam". Máme na výběr z hodně možností:

align="left"
align="right"
align="top"
align="texttop"
align="middle"
align="absmiddle"
align="baseline"
align="bottom"
align="absbottom"

Nejpoužívanější jsou asi left (vlevo), right (vpravo), top (nahoře) a bottom (dole). Někteří z vás se možná divíte proč není i možnost center (uprostřed). Tato možnost v align není a to proto že celý img tag můžete dát mezi tagy

a . Na našem obrázku si ukážeme třeba možnost right:

 

To by bylo všechno. Jistě jsou i další možnosti které můžeme použít v img tagu, ale ty až někdy příště

[Exe_R 0]

jednoduché ale celkev vpoho popsané a vysvětlené :thumbup: :thumbup:

[Kuba5 0]

Pěkný.. pro začátečníky dobrý "cyclops"

[StarsCream_Cze 1]

ještě bych dodal že xhtml vyžaduje alternativní text pro validnost mmožná bych i vysvětlil k src absolutní a relativní adresování, aby nemuseli ti, kteří se z tohoto budou učit, k obrázku, který je ve stejné složce nebo v podsložce psát celou url, ale jen třebas:

./error.png

10/10

[Guest D3luX]

Popísané dobre Ale toto som uz vedel na zaciatku.,,

[Red beanie 0]

tak html je takový menší základ když chceš něco na internetu dělat mno pak další věc je umět rozluštit php a nakonec css já se to učitl tak že nejdříve html, štrachal se v php ale umím max opravit nějaké lehké errory a pak rovnou na kaskadove styly

[_Killer_ 1]

to je lahke to vie asi kazdy ked si davas do php fusion napr niaky banner alebo obrazok

[7.Host 3]

killer":ostmdtaj]to je lahke to vie asi kazdy ked si davas do php fusion napr niaky banner alebo obrazok

Lehké je celé html Se může html sekce rovnou smazat když je HTML lehké a každý ho umí

[Deleted User 295]

killer":30t1nwpy]to je lahke to vie asi kazdy ked si davas do php fusion napr niaky banner alebo obrazok

 

jeden riakod napisat je lahky ale celi web nie...

 

-- sob 24. črc 2010 14:16:17 --

 

killer":30t1nwpy]to je lahke to vie asi kazdy ked si davas do php fusion napr niaky banner alebo obrazok

 

jeden riakod napisat je lahky ale celi web nie...

[sony55 0]

5/10 Za vysvětlení 5 ale za potřebu asi 0

[Ingnition 170]

HTML snad ani neni jazyk To je prostě základ všeho. Něco jako země a kyslík...