HTML II. – 4. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

HTML II. – 4. lekceHTML II. – 4. lekce

 

HTML II. – 4. lekce

Google       Google       22. 4. 2006       17 323×

Pokračování kurzu HTML II. Tentokrát se podíváme na obrázky a odkazy.

Reklama
Reklama

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

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

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

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Radek BoudaRadek Bouda studuje na Fakultě aplikovaných věd Západočeské univerzity v Plzni. Programuje v jazyce Java a zajímá se platformu .NET. Kromě programování má rád také cyklistiku, volejbal, skauting a pohyb venku obecně.
Web     Twitter     Facebook    

Nové články

Reklama
Reklama
Obrázek ke článku Blockchain & Bitcoin konference

Blockchain & Bitcoin konference

V pátek 19. 5. 2017 se v pražském konferenčním centru Andel’s konala Blockchain & Bitcoin konference. Řada odborníků a podnikatelů v oboru blockchainu a kryptoměn představila možnosti budoucího směřování tohoto oboru. Speakeři většinou rusky mluvící provenience prezentovali řešení svých firem založená na technologii blockchainu.

Obrázek ke článku Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Malware KONNI se úspěšně skrýval 3 roky. Odhalil ho bezpečnostní tým Cisco Talos

Bezpečnostní tým Cisco Talos odhalil celkem 4 kampaně dosud neobjeveného malwaru, který dostal jméno KONNI. Ten se dokázal úspěšně maskovat od roku 2014. Zpočátku se malware zaměřoval pouze na krádeže citlivých dat. Za 3 roky se ale několikrát vyvinul, přičemž jeho současná verze umožňuje útočníkovi z infikovaného počítače nejenom krást data, ale i mapovat stisky na klávesnici, pořizovat screenshoty obrazovky či v zařízení spustit libovolný kód. Pro odvedení pozornosti oběti zasílali útočníci v příloze také obrázek, zprávu a výhružkách severokorejského režimu či kontakty na členy mezinárodních organizací.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý