tutoriály : Jak na obrázky

Po delší době je zde další návod, jak na WEB. Dneska si vysvětlíme jak se do HTML kódu umisťují odkazy a obrázky.
Ještě jsem si uvědomil, že jsem neřekl nic o kódování stránek. To se uvádí v hlavičce stránky (HEAD) a vypadá následovně:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

Tím zaručíte správné zobrazování diakritiky. Dá se říct, že tuto informaci o kódování musíte dávat do všech vašich stránek.

Nejdříve začneme s odkazy, většinou odkazují na jiný HTML dokument. Odkaz vás ale může přemístit i na jiné místo (řádek) jednoho dokumentu. Nejdřív si ale musíme říct něco o relativní adrese a absolutní adrese.

Není to žádný horor. V podstatě můžeme do odkazu zadat adresu ve dvou tvarech. Jenom chci upozornit, že se nepoužívají zpětná lomítka "\" ale obyčejná lomítka "/" (třeba na numerické klávesnici).

- První tvar se nazývá absolutní a vypadá třeba takto: "http://bls.ceskehry.cz/tutorialy.htm". Je to vlastně kompletní cesta k dokumentu "tutorialy.htm". Pokud tuto adresu dáte do odkazu, tak vám bude odkudkoli fungovat.

- Druhá možnost je zadání takzvané relativní cesty k dokumentu. Tato cesta může vypadat takto: "tutorialy.htm". Aby to ale fungovalo, musíme se nacházet ve stejném adresáři, jako je soubor tutorialy.htm. Pokud by se soubor nacházel v nadřazeném adresáři, pak bychom napsali tohle: "../tutorialy.htm". Pokud by se však soubor nacházel v podadresáři "html", pak bychom jako cíl odkazu napsali tuto relativní cestu: "html/tutorialy.htm". Dokonce je možné zajít tak daleko, že pokud by se dokument nacházel ve složce "prog", která je ještě v nadřazeném adresáři, pak tuto relativní cestu také můžeme napsat. Nejdříve dáme dvě tečky + lomítko "../" pro vstoupení do nadřazeného adresáře, potom napíšu název adresáře "prog/" a nakonec ještě přidám název onoho HTML dokumentu "tutorialy.htm". Dostaneme tedy tuto relativní cestu: "../prog/tutorialy.htm".

To samé platí také pro zadávání adres obrázkům, samozřejmě, že místo HTML dokumentu tam napíšeme třeba "img/vrch.gif".
Doporučuji používat relativní zadání cest. Má to několik výhod:

1) Vaše stránky můžete testovat přímo na svém počítači z disku
2) Zjednodušíte si zadávání všech adres :)

Teď si ale už konečně ukážeme nové HTML TAGy.

Odkazy
Nejprve se ukážeme, jak použít odkaz na jiný dokument. Na dalším řádku najdete TAG pro odkaz, je párový.

<A HREF = "stranka.htm">Odkaz na stranku.htm</A>

Parametr HREF je vlastně cíl odkazu (může to samozřejmě být i soubor ke stažení). Co se nachází mezi <A> a </A> je vlastně text, na který se klikne (může tam být i složitě formátovaný text, nebo i obrázek)
Zde jsou další parametry:
 

Pokud odkazujete na jiné místo (řádek) dokumentu, pak se používají tyto tagy:

<A HREF = "#informace">Informace jsou níže</A>

A místo, kam se má stránka posunout se označí taky tagem <A>, ale s jiným parametrem:

<A NAME = "#informace"></A>

Můžeme také odkazovat zároveň na jiný dokument a ještě na návěští se jménem "#adresa". Pak vytvoříme takový odkaz:

<A HREF = "informace.htm#adresa">Má adresa</A>

Obrázky
<IMG SRC = "obrazek.gif" ALT = "Text v bublině">
Další parametry:
 

Parametr ALT je vhodné vyplňovat nějakým výstižným a krátkým popisem obrázku. Pokud si stránky prohlíží někdo, kdo má schválně vypnuté zobrazení obrázků, pak se mu namísto obrázku zobrazí text v parametru ALT. Jinak ale parametr ALT vytváří také text bubliny, podobně jako TITLE u odkazu.

Protože vám chci přehledně ukázat, jak to vše dohromady funguje, tak jsem udělal jednu ukázku. Obsahuje všechny výše popsané příklady.

Příště se naučíte zarovnávat obrázky vzhledem k textu a možná si řekneme něco o tabulkách.

HUB
 

Poslední update: