A zde přikládám ještě výpis textu stránky, na
které si ověříte, jak vše funguje.
Již v minulé kapitole jsme se krátce zmínili o obrázcích, dnes si o nich povíme více. Kromě textu můžete na stránky vkládat také obrázky. Ty mohou stránky nejen zkrášlovat, ale také jimi můžete vytvořit části, které běžnými metodami nevytvoříte. Například tlačítka s odkazy, barevné zarážky, nadpisy, atd.
Vložené obrázky podléhají stejným formátovacím příkazům jako běžný text, můžete je tedy sdružovat do odstavců, zarovnávat (o tom si povíme později).
Obrázky se vkládají pomocí nepárového příkazu <IMG>. Můžete jej dát kamkoliv do textu. Tento příkaz obsahuje několik parametrů, pomocí nichž říkáte, jak má obrázek být zobrazen atd.
Nejdůležitějším parametrem je SRC, kterému předáte adresu obrázku, jenž má být zobrazen. Je to jediný povinný parametr:
<img src="buttok.gif">
Jako obrázky budete nejčastěji používat formáty JPEG a GIF. Můžete sice použít i jiné (například XBM), ale ty hůře komprimují obraz a nejsou podporovány všemi prohlížeči.
Pokud příkaz napíšete tímto způsobem, bude jeho spodní okraj zarovnán se spodním okrajem textu. Tuto pozici můžete změnit parametrem ALIGN, který umožňuje mnoho dalších způsobů zarovnání. Kromě toho můžete také nechat obrázek textem obtékat, a to hned několika způsoby. Řešením je opět předání vhodné hodnoty do parametru ALIGN. Konec obtékaného textu označíte příkazem <BR CLEAR="ALL">. Všechny hodnoty a jejich význam jsou uvedeny v tabulce. Příklad znázorňuje obtékání textu vpravo od obrázku:
<img src="buttok.gif" ALIGN="LEFT"> Na tomto obrázku je tlačítko. <BR CLEAR="ALL">
Pokud necháte obrázek obtékat, je vhodné nastavit mezery mezi obrázkem a okolním textem. Pro odsazení textu po stranách použijete parametr HSPACE a pro vzdálenost odshora parametr VSPACE. Jako hodnotu předáte počet bodů, které udávají velikost mezery:
<img src="buttok.gif" ALIGN="LEFT" HSPACE="20">
Další parametr BORDER umožňuje obrázek ohraničit rámečkem, který má barvu textu na stránce (a lze ji tedy změnit běžným způsobem). Moc často se nepoužívá, ale v některých situacích jej použijete (například když je třeba přesně znát okraje obrázku).
Vzhledem k tomu, že uživatel může mít v prohlížeči vypnutou možnost zobrazení obrázků, nebo může používat textově orientovaný prohlížeč, pak je vhodné doplnit parametr ALT, který může obsahovat hodnotu alternativního textového vyjádření.
Poslední z parametrů, o kterých si řekneme, jsou parametry udávající rozměr obrázku. Nejsou povinné, neboť všechny nové prohlížeče velikost správně poznají, ale mohou se hodit, pokud potřebujete velikost obrázku změnit. Parametr HEIGHT udává výšku a WIDTH šířku v obrazových bodech.
Umístění obrázku na stránce se podřizuje formátovacím příkazům, o nichž si povíme příště.
A zde přikládám ještě výpis textu stránky, na
které si ověříte, jak vše funguje.
<HTML>
<HEAD>
<TITLE>Kapitola VIII.</TITLE>
</HEAD>
<BODY>
<img src=buttok.gif alt="OK">
Text<BR>
<img src=buttok.gif align="top">Text nahoře<BR><BR>
<img src=buttok.gif align="left">Text<BR>obtéká<BR>okolo obrázku<BR CLEAR="ALL">
<img src=buttok.gif border="3">Rámeček<BR>
<img src=buttok.gif height="30" width="50">Jiná velikost<BR>
</BODY>
</HTML>
(pokračování příště) BEDŘICH SMETANA
| Hodnota TOP TEXTOP MIDDLE ABSMIDDLE BASELINE, BOTTOM ABSBOTTOM LEFT RIGHT |
Význam Vrchol obrázku je zarovnán s vrcholem textu Vrchol obrázku je zarovnán s nejvyšším bodem textu na řádce Zarovná střed obrázku se základní čarou textu Zarovná střed obrázku se středem textu Zarovná spodek obrázku se základní čarou textu Zarovná spodek obrázku s nejnižším bodem textu Text obtéká vpravo Text obtéká vlevo |
