HTML 5 – Lekce 3

V této lekci si ukážeme, jak na web vkládat odkazy a obrázky, a jak se dají využít.

Zde je přehled mluvnice lekce 3 (tagy, které budeme v této lekci používat) :

<img> – nepárový – vkládá obrázek

<a> – párový – vkládá odkaz

 

I když v přehledu mluvnice moc tagů není, je tato lekce důležitá a velice zajímavá, protože jak já říkám ,,Bez obrázků to prostě nejde!“.

Obrázky:

Nepárový tag <img>, kterým vkládáme na web obrázek, má spoustu atributů. My si zde napíšeme jen ty nejpoužívanější:

src – určuje cestu k obrázku – hodnotou je adresa obrázku

alt – označuje alternativní popis – hodnotou je libovolný text

width – určuje šířku obrázku – hodnotou je % a nebo počet pixelů

height- určuje výšku obrázku – hodnotou je % a nebo počet pixelů

border- určuje tloušťku rámečku – hodnotou je číslo

(Atributy napsané kurzívou se dnes nahrazují pomocí CSS stylů)

 

Prvním nejdůležitějším atributem, je atribut src. Tento atribut označuje cestu k obrázku, tedy kde se obrázek nachází. Do hodnoty atributu můžeme vložit takzvanou relativní a absolutní cestu. Relativní cesta je taková, kde určujeme, v jakém adresáři na FTP serveru se obrázek nachází. Nachází se li obrázek ve stejné složce s dokumentem, který teď píšeme, bude relativní cesta k němu následující: <img src=“obrazek.jpg“> . Pokud je obrázek ve složce, která se nachází v tom samém umístění, jako dokument který píšeme, bude relativní cesta tato: <img src=“slozka/obrazek.jpg“> . U relativní cesty platí pravidlo, že pokud složka v které je obrázek je výše, tak se píší „ .. “. V případě, že tedy budeme mít obrázek ve složce „slozka1“ a dokument který píšeme bude ve složce „slozka2“ která bude na stejném místě jako slozka1, bude relativní cesta takto: <img src=“../slozka1/obrazek.jpg“> . V případě, že se potřebujeme vrátit například o 2 složky výše, cesta bude takto: <img src=“../../slozka1/obrazek.jpg“> .

Absolutní cesta k obrázku je klasická URL adresa, například: <img src=“http://www.vasweb.cz/slozka1/obrazek.jpg“> . Já osobně preferuji relativní cestu, ale je na každém jaký způsob zadávání cesty zvolí.

Atribut alt vypisuje popis obrázku, pokud se obrázek z nějakého důvodu nenačte. Obrázek se nemusí načíst z několika chtěných i nechtěných důvodů. Například může být špatná src cesta, nebo uživatel může mít zobrazování obrázků vypnuté kvůli pomalému připojení k internetu. Zkrátka je (řekl bych až) slušné k těmto uživatelům také přihlížet a atribut alt do tagu vkládat. Doporučuji do hodnoty atributu alt napsat nějaký popis obrázku, nebo alespoň název, například: <img src=“slozka1/obrazek.jpg alt=“Na tomto obrázku je hezké žluté auto značky Ford“> . Pokud se tedy obrázek z nějakého důvodu nezobrazí, zobrazí se místo něj alespoň text „ Na tomto obrázku je hezké žluté auto značky Ford“. Může se vám stát, že pokud atribut alt zadáte do obrázku, který následně zobrazíte v prohlížeči Explorer (myslím, že v jiných tento problém není) a najedete na obrázek kurzorem, zobrazí se vám „bublina“ s textem který je obsažen v atributu alt. Pokud ovšem alt použijete pro zobrazení „bubliny“, tak vás musím upozornit, že tento zápis není zcela validní. Pokud tedy chcete mít bublinu i v ostatních prohlížečích, použijte atribut title s hodnotou textu, který chcete aby se zobrazil v „bublině“. Pokud ovšem nechcete, aby se v Exploreru bublina zobrazovala, použijte atribut title s prázdnou hodnotou.

Atributy width (šířka) a height (výška) určují rozměr obrázku. Hodnoty atributů jsou buďto pixely, a nebo %. Pokud u obrázku tyto atributy chybí, obrázek se zobrazí v jeho původní velikosti. Ovšem pozor! Pokud u obrázku nebudou zachované proporce, zdeformuje se (bude sice mít jinou velikost, ale zdeformuje se). Pokud zadáme pouze jeden z atributů, například výšku, šířka se nám automaticky změní tak, aby obrázek zachoval proporce a tudíž nebyl zdeformován. Velikost obrázku můžeme zadávat také procentem. Při zadání hodnoty procentem, bude velikost obrázku záviset na monitoru. Při hodnotě 50%, zaplní obrázek 50% monitoru, pokud ale nechcete obrázek zdeformovat, tak bych tuto možnost raději úplně vynechal (s výjimkou zadání jen jednoho atributu). I když jsem psal, že pokud u obrázku neuvedeme jeho rozměr, tak se zobrazí v původní velikosti, doporučuji přes to zadat rozměry původní velikosti obrázku kvůli rychlejšímu načítání stránky.

Dalším atributem (dnes už většinou nahrazen stylem CSS) je atribut border, tedy tloušťka rámečku. V různých prohlížečích je problém se zobrazujícím se rámečkem, aniž by byl atribut border uveden (například v Exploreru). Tento problém lze vyřešit tak, že zadáme do atributu border hodnotu 0. Tuto variantu doporučuji používat v případě, že si opravdu nepřejete, aby rámeček u obrázku byl (samozřejmě není nic špatného, když atribut do tagu vložíte).

U obrázků můžete použít spoustu dalších atributů, tyto jsou však nejdůležitější a nejpoužívanější. Jen pro připomenutí: pokud chcete obrázek zarovnat, použijte CSS vlastnosti.

Ještě bych rád doplnil že podporované formáty obrázku jsou: .jpg, .gif, .png a .bmp.

 

Odkazy:

Párový tag <a> označuje odkaz. Opět má několik atributů. Vypíši zde jen ty nejpoužívanější.

 

href – uvádí cíl odkazu – hodnotou je URL adresa

name – jméno odkazu/záložky – hodnotou je jakékoliv jméno

target -uvádí nám jestli se nám odkaz otevře v současném oknu a nebo v jiném/ jiné záložce

 

První atribut href určuje, jaká stránka se načte po kliknutí na odkaz. Hodnota atributu je vždy URL adresa. Myslím, že není potřeba nic vysvětlovat, snad jen názornou ukázku:

 

<html>

<head>

</head>

<body>

Klikněte <a href=“http://www.google.cz“> ZDE </a>– Po kliknutí na odkaz se zobrazí vyhledávač Google

</body>

</html>

 

Na řadě je atribut name. Tento atribut většinou slouží k vytváření „záložek“. Pokud v textu přidáte odkaz <a name=“jmenozalozky“> a po té vytvoříte odkaz <a href=“#jmenozalozky“>, tak při kliknutí na něj se vám zobrazí vámi zvolená záložka.

Toto oceníte obzvláště v delších textech při přehledu obsahu. Problém je ovšem, že v HTML 5 již tento atribut není podporovaný. Proto se nyní inklinuje spíše k řešení pomocí id – identifikátoru sekce nebo jakéhokoliv elementu na stránce – např <p id=“jedinecny_identifikator“> a dodání # v odkazu. Praktické využití:

 

<html>

<head>

</head>

<body>

<a href=“#opejskoviakocice”>O pejskovi a kočičce</a>

<a href=“#optakoviohnivakovi“>O ptákovi Ohnivákovi</a>

<a href=“#opeticunicich“>O pěti čunících</a>

<p id=“opejskoviakocice”>

<h2> O pejskovi a kočičce </h2></a>

Byl jednou jeden pejsek a jedna kočička a šli spolu vařit dort…vařili a vařili….vařili a

vařili………….

<p id=“optakoviohnivakovi“>

<h2> O ptákovi Ohnivákovi </h2></a>

Byl jednou jeden pták Ohnivák ……………

<p id=“opeticunicich“>

<h2> O pěti čunících </h2></a>

Bylo nebylo pět čuníků a ti proti zlému vlkovi stavěli domeček ………………….

</body>

</html>

 

Velice užitečné navíc je, že se odkazy dají vkládat do obrázků. Pokud tedy chceme vytvořit reklamní banner, nebo chceme udělat obrázkové menu tak se bez této kombinace neobejdeme. Zápis bude následovný:

<html>

<head>

</head>

<body>

<a href=“http://www.odkazujicireklama.cz“>

<img src=“reklamniikonka.jpg“ alt=“Reklamní banner“>

</a>

</body>

</html>