Vkládání obrázků do stránek
8. července 2006
|
Radek Kropík
|
Co by to bylo za webovou stránku, kdybychom v ní neměli ani jeden grafický prvek – obrázek. Naše stránky by pak byly nudné a fádní, pouze textové. Toto je u některých stránek výhoda, ale my chceme na naši stránku umístit i nějaké obrázky, abychom ji trochu oživili. Ale jak nato?
V první časti vám povím, že do webových stránek lze vkládat obrázky v grafických formátech GIF, JPG a PNG. Obrázky ve formátu gif se používají hlavně na obrázky, které nemají mnoho barev, jelikož tento formát zvládá maximálně 256 odstínů. Hodí se hlavně na menší loga, obrázkové odkazy nebo tlačítka. Oproti tomu formát jpg se hodí hlavně na fotografie a vícebarevné obrázky, které by při 256 barvách ztratily svou „přitažlivost“. No a pak je tu formát png, který v některých případech nahrazuje obrázky ve formátu gif a to hlavně proto, že podporuje více barev při zhruba stejné kompresi.
Ale jak takový obrázek do stránky vložit? Docela jednoduše. Nejprve si vytvořte, popřípadi někde zkopírujte nějaké obrázek ve formátu JPG a pojmenujte ho foto.jpg. Ten pak vložte do své složky www, kterou jste si pro své stránky vytvořili v první lekci. Následně nato vytvořte html dokument, který vidíte níže a pojmenujte ho obrazek.htm. No a ten pak už známým zpusobem otevřete ve vašem internetovém prohlížeči. No a na vaší stránce by mimo textu měl být zobrazen i obrázek.
<html>
<head>
<title>Obrázek</title>
</head>
<body>
<h1>Vítejte na mé stránce</h1>
<p>Ukážu vám hezký obrázek</p>
<br>
<img src=“foto.jpg“>
</body>
</html>
Co znamená značka <img… , kterou zatím neznáte? Pomocí této značky se vkládá do webové stránky obrázek. Toto je pouze zkrácená verze, kde v atributu src je uvedena cesta k obrázku, který chcete vložit. Pokud chcete, mužete použít i další atributy, jako např:
- BORDER=X – kde X nahradíte číslem. Pokud zapíšete BORDER=1 bude mít vložený obrázek 1 bod silný okraj.
- HEIGHT=X – kde X určuje víšku obrázku
- WIDTH=X – kde X znamená šířku obrázku
- ALT=“Popisek“ – popisek, který se zobrazí, pokud má někdo v prohlížeči vypnuté zobrazování obrázků. Zobrazí se také při najetí myší nad obrázek.
- ALIGN=“zarovnání“ – zarovnání obrázku – možnosti jsou LEFT (doleva) nebo RIGHT (doprava)
Celé by to pak vypadalo třeba takto:
<img src=“foto.jpg“ alt=“Toto je moje foto“ border="0" height="120" width="130" align=“left“>