Home


  Kompletní příručka HTML III.

dcch / 21.2.2002 /

   V předchozích dílech jste se naučily udělat základ HTML strany, nyní začneme vytvářet jednotlivé části dokumentu, dnes to budou obrázky, jejich vkládání, úprava apod.
   Obrázky jsou společně s textem a hypertextovými odkazy základem stránky. Základním příkazem je příkaz <img>, do kterého se vepisují další informace o obrázku.
   V příkazu img nesmí chybět atribut src, který určuje umístění obrázku, tedy např.:

<img src="img/logo.gif">

   Dalším atriutem může být změna velikosti obrázku k tomu slouží atributy height (výška) a width (šířka). Tyto atributy jsou využívany ve větším množství příkazů, proto je lepší si je zapamatovat. No jak to má například vypadat je zde:

<img src="img/logo.gif" width="210" height="77">

   Další atribut u obrázku může být nastavení okraje. To se normálně nenastavuje, ale pokud chcete mít nějaký okraj u obrázku můžete. Ovšem nutné je to vyplnit při hypertextovém odkazu. Kolem obrázku se totiž automaticky udělá okraj, ale při nastavení border="0" tomu můžete zabránit.

<img src="img/logo.gif" border="5">

   U obrázku můžeme také nastavit umístění, či zarovnání. Tedy jestli chceme obrázek zarovnat doprostřed, nalevo napravo apod. To se nám povede atributem align, ke kterému přiřadíme jednu z následujících možností:

center - zarovnání doprostřed
left - zarovnání doleva
right - zarovnání doprava
top - zarovnání k vrchu řádky, tedy pokud je na řádku ještě vyšší obrázek, tak se horní okraj obrázku zarovná k vrchu obrázku druhého
texttop - zarovná obrázek k nejvyššímu písmenu řádky
middle - střed obrázku na středu řádky
baseline - obrázek je zarovnán na základnu řádky

   Dalšímy atributy je hspace a vspace. To znamená kolik bodů se má odsadit od okraje obráku nebo textu. hsapce je horizontální a vspace je vertikální.

   Posledním atributem je atribut alt. Ten vypíše text při přejetí, který se objevuje v "žlutých bublinách".

<img src="img/logo.gif" alt="PCmagic">

   Kompletní obrázek může vypadat v HTML kódu takto:

<img src="img/logo.gif" border="5" align="center" width="210" height="77" vspace="0" hspace="0" alt="PCmagic">

   Výsledek:

PCmagic

   To by bylo příště se koukneme na vkládání hypertextových odkazů.