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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

HTML II. – 4. lekce

Google       Google       22. 4. 2006       18 008×

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 Pracujete u počítače ve stoje? Dbejte na správné držení těla

Pracujete u počítače ve stoje? Dbejte na správné držení těla

Práce ve stoje je jedna z variant, jak změnit polohu těla při dlouhodobé práci u počítače. Především je důležité nezapomínat na správné držení těla, abychom při práci nenamáhali naší krční páteř. Primářka MUDr. Michaela Tomanová představí hlavní bonusy a rizika práce u počítače ve stoje.

Obrázek ke článku Firmy musejí s nástupem Průmyslu 4.0 více dbát na kyberbezpečnost. V ohrožení je i jejich know-how.

Firmy musejí s nástupem Průmyslu 4.0 více dbát na kyberbezpečnost. V ohrožení je i jejich know-how.

Destabilizace firmy či ukradené know-how. To jsou možná hlavní budoucí rizika spojená s nedostatečnou kybernetickou bezpečností průmyslových firem, na která upozorňují experti. Vzhledem k postupující digitalizaci výrobních či technologických procesů a přechodu k takzvanému Průmyslu 4.0 může těchto hrozeb postupně přibývat. Varují před nimi i nejnovější průzkumy. 

Obrázek ke článku Nový CEBIT je připraven: Pochopit digitální dnešek a objevit digitální zítřek

Nový CEBIT je připraven: Pochopit digitální dnešek a objevit digitální zítřek

Nový veletrh  CEBIT je připraven. V polovině června začne v Hannoveru evropský festival obchodu s radikálně změněnou koncepcí věnovaný inovacím a digitalizaci.  CEBIT jedinečnou formou spojuje obchod v digitálním hospodářství 
s festivalovými prvky a posouvá do středu pozornosti téma digitální transformace hospodářství a společnosti.  

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý