Obrázky

Grafika  je asi ta nejdůležitější část webové prezentace, která kromě obsahu stránky přitáhne nebo odpudí její návštěvníky.

Již z minulého dílu snad víte, jakým způsobem přidat obrázek na pozadí stránky. Je to pomocí vlastnosti BACKGROUND příkazu <BODY>. Pokud ale na pozadí používáte grafiku, mějte na paměti dobrou čitelnost. Pokud budete používat jiné než jednobarevné pozadí, používejte spíše tmavší barvy a obrázky, ze kterých se dají vyskládat dlaždice.

Obrázek můžeme vložit i do textu. K tomu slouží značka <IMG>. Povinně musíte definovat vlastnost SRC, která udává cestu k souboru. I v tomto případě je vhodné používat relativní cestu před absolutní. Dále byste měli dodržet pravidlo, že nepoužíváte grafické soubory z jiného serveru. Navíc by měly být grafické soubory v jedné složce, která by měla mít jméno images nebo grafika. Zde je malý příklad: <IMG SRC="images/logo.gif">.

Další vlastnost, kterou je vhodné doplnit, je alternativní text k obrázku. Toto se udělá pomocí vlastnosti ALT, tedy například takto: <IMG SRC="images/logo.gif" ALT="Logo naší firmy">. Možná, že se ptáte, k čemu je tento text, když se nám zobrazí grafika. Text je zde kvůli následujícím situacím:

  • zobrazí se v bublinové nápovědě, pokud uživatel najede nad grafický prvek myší
  • pokud uživatel nemá zapnuto zobrazování grafiky
  • pokud uživatel používá textový prohlížeč / převod stránek do řeči pro nevidomé

Alternativní text byste ale neměli doplňovat u různých grafických doplňků, ale vždy, když jej použijete, snažte se, aby text dobře vystihoval grafický prvek a byl dobře srozumitelný.

Pokud budete při tvorbě stránek myslet na návštěvníky, měli byste doplnit též informace o výšce a šířce grafického prvku. Prohlížeč totiž ve stránce vyhradí místo pro zobrazení a nemusí tak návštěvník čekat na načtení celého obrázku. Šířku napište do atributu WIDTH a výšku do HEIGHT. Určit jí můžete v obrazových bodech (např. WIDTH="100") nebo v procentech šířky/výšky okna prohlížeče (např. WIDTH="50%").

Grafice, která není v samostatném odstavci (mezi dvěma odstavci), můžete chtít určit zarovnání oproti textu (ALIGN). Zde máte vypsány všechny možnosti:

Na webových stránkách byste měli používat pouze rozšířené formáty: GIF, JPEG, PNG. Pokud budete namítat, že BMP je také rozšířený formát, máte pravdu, ale protože je nekomprimovaný, není pro web vůbec vhodný. Pokud chcete na web umístit velkou fotografii, vytvořte náhled, který na stránce použijete jako odkaz na velký soubor (ne každého to bude zajímat a tak dáte dotyčnému možnost výběru). V popisu odkazu je vhodné podotknout velikost souboru. K tvorbě náhledů se hodí programy IrfanView nebo XnView (viz. Chip CD 9/01).

Obrázek vložíte klávesovou zkratkou CTRL+I. V Tag inspektoru můžete tlačítkem se složkou vybrat příslušný obrázek.
Obrázek může být použit jako klikací mapa. Tu vytvoříte pomocí Kouzelníka, kterého spustíte čtvrtým tlačítkem zprava na spodním panelu. Vyberte obrázek a zadejte jméno mapy (libovolné, ale musí být v rámci dokumentu jedinečné). Poté se otevře druhé okno. V něm tlačítkem nová oblast vytvořte novou položku, zadejte jméno, vyberte tvar oblasti nakreslete a zadejte do pole HREF odkaz. Oblasti můžete přejmenovávat, mazat, kopírovat atd.