× Aktuálně z oboru

Vychází Game Ready ovladače pro Far Cry 5 [ clanek/2018040603-vychazi-game-ready-ovladace-pro-far-cry-5/ ]
Celá zprávička [ clanek/2018040603-vychazi-game-ready-ovladace-pro-far-cry-5/ ]

HTML II. – 4. lekce

[ http://programujte.com/profil/1743-radek-bouda/ ]Google [ :?rel=author ]       [ http://programujte.com/profil/75-martin-zak/ ]Google [ :?rel=author ]       22. 4. 2006       19 280×

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.

Parametry tagu <IMG>
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.

Parametry tagu <A>
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:

  1. hodnota _blank
  2. 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


Článek stažen z webu Programujte.com [ http://programujte.com/clanek/2006041901-html-ii-4-lekce/ ].