Vytváříme webové stránky – Obrázky a odkazy (část 4.)

Dnes se budeme zabývat vkládáním odkazů a obrázků do HTML stránky.

Vložení odkazu (links)

Zde jsou čtyři příklady, jak vložit odkaz na nějakou stránku:

1
2
3
4
<a href="http://www.seznam.cz/" target="_blank">Seznam (v novém okně</a>
<a href="druhastranka.html" target="top">Odkaz na nějakou stránku</a>
<a href="tretistranka.html">Odkaz na nějakou stránku</a>
<a href="mailto:adresa@domena.cz">Email (otevře program na el. poštu)</a>

Target znamená cíl. Pokud nemáte na stránce rámce (frames), nebude mezi druhým a třetím řádkem žádný rozdíl. Pokud je tam mít budete, třetí příklad se zobrazí v rámu, kde na něj kliknete a druhý příklad v samostatném rámu. HTTP a MAILTO se říká protokol (je jich víc, třeba i FTP), adresy by se měly uvádět včetně něj.

Vložení obrázku (images)

Vložení obrázku do HTML stránky:

1
2
3
<img src="obrazek.jpg" alt="Obrázek se nezobrazil (alternativní text)." />
<img src="obrazek.jpg" width="300" height="200" border="2" />
<img src="obrazek.jpg" style="width: 300px; height: 200px; border: 2px;" />

Width znamená šířka a Height výška. Třetí příklad je totožný s druhým, jen je zapsán pomocí CSS. Oba mají nastavenou šířku 300 a výšku 200 pixelů a velikost rámečku je 2 pixely (defaultně nastaveno na 0). Pokud se obrázek nemůže zobrazit, vypíše se text v atributu ALT a u IE se zobrazí čtvereček s červeným křížkem. Obecně má tag IMG ještě další atributy, z nichž bych uvedl ještě align, který řídí obtékání textu vůči obrázku. Lze také použít obecný atribut TITLE, který jsem uváděl posledně.

Obtékání

Dle mého názoru není třeba tohle znát dokonale hned napoprvé. Uvedu proto jen krátký příklad.

1
<img src="obrazek.jpg" align="right" />

Align může nabývat hodnot left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom. K nastavení obtékání pomocí CSS slouží vlastnost float: left nebo float: right plus nastavením vlastnosti vertical-align.

Grafické formáty pro web

Na web můžete umístit obrázky s formátem a příponou .jpg, .gif a .png, nelze použít .bmp. Formát GIF má jen 256 barev, ale v grafických editorech lze nastavit průhlednost (transparentnost). Dříve se na stránky dávaly i animované gify, dnes je to spíše přežitek. Formát .jpg je vhodný pro fotografie, jen pozor na úroveň komprese při ukládání. Formát .png (Uložit jako v Malování) je asi nejvýhodnější, pokud potřebujete víc než 256 barev a zároveň nechcete ztratit kvalitu kvůli kompresi. Až budete stránky někam nahrávat, dávejte si pozor na přípony s velkými písmeny a na formát .JPEG. Název obrázku musí být shodný včetně přípony s ohledem na velká a malá písmena.

Vložení obrázku jako odkaz

Aby se neudělalo kolem odkazu modré orámování, musí se nastavit atribut border na 0.

1
<a href="druha.html"><img src="tlacitko.png" border="0" /></a>

Relativní adresování

Statické adresování: C:\Documents and Settings\All Users\Plocha\stranka.html (na webu nepoužívat)
Relativní adresování: stranka.html (zde je vidět rozdíl, používá se na webu)

Pokud chceme, aby se obrázek zobrazil nebo po kliknutí otevřel odkaz (Nejen Stránku nelze zobrazit), musí obrázek nebo cíl odkazu existovat a my se na něj musíme správně odkazovat. Stránku, ze které obrázek zobrazujeme nebo klikáme na odkaz, máme uloženou v nějakém adresáři (říkejme mu Pracovní složka).

Pokud máme druhý html soubor či obrázek uložen ve stejném adresáři jako je Pracovní adresář, není problém. Ale co když je obrázek či html soubor uložen v nějaké podsložce Pracovního adresáře? V tom případě použijeme název toho adresáře a lomítko. Stejným způsobem postupujeme, pokud je ve více podadresářích.

1
<a href="stranky/druha.html>Odkaz</a><img src="img/obrazek" />

Pokud naopak potřebujeme z Pracovní složky o úroveň výše, použijeme dvě tečky a lomítko.

1
<a href="../stranka.html>Odkaz</a><img src="../obrazek.gif" />

Vnoření do podadresáře a vynoření z adresáře se dá kombinovat. Příklad:

1
<img src="../img/obrazek.gif" />

Zmínka o klikacích mapách
Dnes už se používají málo. Jde o to, že si můžete navolit namísto čtvercového odkazu, kam můžete kliknout, kruhovou, trojúhelníkovou, ale také libovolnou oblast, například vložíte fotku a půjde kliknout pouze na tváře lidí z fotky. Uvedu jen krátký příklad se čtvercovou oblastí:

1
2
3
4
5
<map name="vyberodkazu">
<area href="prvni.html" shape="rect" coords="40, 40, 100, 100" />
<area href="druha.html" shape="rect" coords="15, 15, 60, 60" />
</map>
<img src="fotka.jpg" usemap="#vyberodkazu" width="250" height="250" />

Vložení odkazu na kapitolu (záložky)

Hodí se u delších textů. Kliknutím na odkaz se posuvná lišta přesune na dané místo (odroluje).

1
2
3
4
5
6
<span id="kapitola1">Kapitola 1</span>
...hodně textu...<br /><br /><br /><br /><br /><br /><br />
...hodně textu...<br /><br /><br /><br /><br /><br /><br />
...hodně textu...<br /><br /><br /><br /><br /><br /><br />
...hodně textu...<br /><br /><br /><br /><br /><br /><br />
<a href="#kapitola1">Přejít na kapitolu 1</a>.

Křížek říká, že se odkazuje na místo v souboru a ne na soubor. U starších prohlížečů se používalo namísto tagu SPAN a atributu ID tag A a atribut NAME.

Závěr

Pokud jste v tomto seriálu došli až sem a neztratili jste trpělivost při čtení některého odstavce, zejména toho o adresování, pak nezbývá nic jiného než pogratulovat. Ještě nás sice čeká hodně práce, ale teď už by to většinou mělo být jen a jen lepší. Příště se pustíme do tabulek a seznamů.

O Petr Fořt

Student ČVUT FJFI KSE ASI (Softwarové inženýrství v ekonomii). Zajímám se o počítače (programování, diagnostika chyb hw), hudbu. Mám rád grilování, táboráky, hraní na kytaru a srandu v dobré společnosti.