Pokračování kurzu HTML II. Tentokrát se podíváme na obrázky a odkazy.
Obsah lekce:
- Vkládání obrázků
- Tvorba odkazů
- Domácí úkol
- Příští lekce
Než začneme vkládat do stránky adresované prvky, musíme si ovědomit, jaké jsou typy adres.
Typy adres jsou následující:
- Absolutní
- http://vashosting.cz/soubor.jpg (pouze příklad, soubor nemusí být ve formátu .jpg)
- Relativní
- soubor.jpg
Já používám adresu relativní. Použijete-li relativní adresu, prohlížeč bude hledat soubor ve stejné složce jako soubor právě otevřený. Pokud nezadáte cestu ve tvaru obrazky/pozadi.jpg, řekne to prohlížeči, že má hledat ve složce obrazky. Už logicky musíte počítat s tím, že pokud chcete dát adresu na jiný server, nezbyde vám nic jiného než použít adresu absolutní.
Dodatek korektora
U relativních adres doporučuji používat místo zápisu soubor.jpg zápis ./soubor.jpg. Dáte tím najevo, že se jedná o aktuální adresář. Kód je potom přehlednější. Nadřazený adresář zase určíte dvěma tečkami a lomítkem – ../.
Root webu se značí lomítkem na začátku. To znamená, že pokud v dokumentu, který je na adrese http://server.com/users/images/, zapíši do odkazu /smile.jpg, je to stejné, jako kdybych napsal http://server.com/smile.jpg. Zapomeňte ale na zpětná lomítka, ta jsou typická pouze pro Windows. Na Linuxu či Unixu s nimi příliš nepochodíte.
Odkazy zakončujte lomítkem. Místo zápisu http://domain.net/articles použijte http://domain.net/articles/. Výsledný efekt sice bývá většinou stejný, ale teoreticky by to mohl server brát jako požadavek na soubor articles (ne všechny soubory totiž mají příponu).
Použití absolutního adresování
Dejme tomu, že momentálně máte server s adresou www.mojewebovky.cz. Potřebujete vložit obrázek absolutním adresováním. Stačí tedy místo adresy obrázku ve formátu obrazky/pozadi.jpg zadat http://www.mojewebovky.cz/obrazky/pozadi.jpg a vše je hotovo. To by bylo na vysvětlení rozdílu adresování.
Vkládání obrázku do stránky
Obrázek se vkládá pomocí NEpárového tagu <IMG> (od slova IMaGe – obrázek). To by samo o sobě ale nic neudělalo, proto musíme přidat další parametry a těm přiřadit příslušné hodnoty.
| Parametr | Obvyklá hodnota | Význam hodnoty |
|---|---|---|
| width | číslo v px | Výška obrázku |
| height | číslo v px | šířka obrázku |
| src | absolutní/relativní adresa | samotný obrázek |
| alt | jakýkoliv text | Popis obrázku |
Výsledný kód pro vložení obrázku tedy vypadá takto:
<IMG src="obrazky/pozadi.jpg" width="30" height="30" alt="Pozadí"> //relativně
<IMG src="http://mojewebovky.cz/obrazky/pozadi.jpg" width="30" height="30" alt="Pozadí"> //absolutně
Jako doporučené formáty obrázků na webové stránky se uvádějí jpg, gif a png.
Tvorba odkazu
Odkaz se vkládá do stránky pomocí párového tagu <A>. Odkazy vedou na soubory typu htm, html, php a další. Ale opět tento tag sám o sobě nic neudělá. Opět budeme muset přidat parametry a jim přidat hodnoty.
| Parametr | Obvyklá hodnota | Význam hodnoty |
|---|---|---|
| href | absolutní/relativní adresa | tato stránka se po kliknutí zobrazí |
| target | název rámce nebo okna, kde se stránka zobrazí | v tomto rámci nebo okně se zobrazí stránka |
| title | jakýkoliv text | po najetí myší se zobrazí popisek |
Kód pro odkaz tedy bude vypadat takto:
<A href="stranka2.html" title="Další stránka">Pokračujte</a> //relativně
<A href="http://www.mojewebovky.cz/stranka2.html" title="Další stránka">Pokračujte</a> //absolutně
Můžete si vyzkoušet: ZDE [ http://programujte.com/ ]
Doufám, že nemusím připomínat, že v obou případech se vykoná to samé, a že za www.mojewebovky.cz musíte dosadit adresu svých stránek. COKOLIV, co napíšete mezi tagy <A> a </a>, se zobrazí na stránce. Napíšete text, na stránce bude text. Dáte tam obrázek (<IMG>), na stránce bude vidět obrázek.
Použití parametru target
Jistě jste si všimli, že jsem v příkladu neuvedl parametr target.
Target se používá ve dvou případech:
- hodnota _blank
- hodnota název rámce (o tom v lekci 6.)
Pokud použijete parametr target s hodnotou _blank, stránka, na kterou odkazujete v parametru href, se zobrazí v novém okně.
Můžete vyzkoušet: ZDE [ http://programujte.com ]
Stahování
Pokud chcete někomu něco nabídnout na stáhnutí, stačí adresovat na soubor libovolného formátu a ne na dokument a obrázek. Příklad:
<a href="prog/soubor.exe">Download</a> //relativně
<a href="http://www.mojewebovky.cz/prog/soubor.exe">Download</a>
Zapamatujte si:
Adresa obrázku se určuje parametrem SRC
Na jiný dokument se odkazuje parametrem HREF
Domácí úkol
Udělejte mi kód celé stránky s černým pozadím a žlutým textem (ne odkazem), s tabulkou – dvě buňky v jedné řádce, kde v jedné buňce bude odkaz jako text, v druhé odkaz jako obrázek (velikost neřešte). Pod tabulku tím žlutým textem napište, co Vás napadne.
Příště
Formuláře