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

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

 

HTML II. – 4. lekce

Google       Google       22. 4. 2006       16 917×

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

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý