Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

3. díl - Obrázky a odkazy v HTML

HTML a CSS Statický web Obrázky a odkazy v HTML American English version English version

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Základní HTML tagy, jsme se naučili zvýrazňovat text a používat nadpisy. Vytvořili jsme si také první stránku jednoduchého webu, na které budeme v dnešním HTML tutoriálu pokračovat.

Obrázky

Co by to bylo za web bez obrázků? Obrázky vložíme pomocí tagu <img /> (jako image = obrázek). Setkáváme se s prvním tagem, který vyžaduje tzv. atributy. Atribut je doplňující informace k tagu. Zde bude atributem cesta k souboru obrázku - atribut src a popis obrázku alt. Atributy se píší do špičatých závorek za název tagu, následuje rovnítko a obsah atributu je potom v uvozovkách. Dobrou praktikou je mít všechny obrázky k webu v nějaké složce, aby se nemíchaly s dalším obsahem. Vytvoříme si tedy ve složce s webem novou složku, kterou pojmenujeme obrazky. Do ní si vložíme obrázek, který budeme chtít na stránce zobrazit. Můžete si stáhnout a použít tento zkušební obrázek. Uložte si ho do nově vytvořené složky a zkusme si ho vložit do nového odstavce.

Výsledný kód obrázku by mohl vypadat takto:

<p>
        <img src="obrazky/avatar.png" alt="Programátor HoBi" />
</p>

Pozor: Musíme si uvědomit, že až budou stránky na internetu, stažení obrázku bude nějakou dobu trvat. Používejte tedy úsporné formáty, jako jsou JPEG nebo PNG, kde má výsledný obrázek malou velikost díky kompresi. JPEG se zpravidla používá na velké obrázky a fotky, PNG na ikony, nákresy a obrázky, kde jsou jednobarevné plochy. Rozhodně se vyhněte formátu BMP, který je bezkompresní nebo formátu GIF, který poškozuje paletu.

Atribut alt bývá často vynecháván, ale to je chyba. Hraje totiž svou roli např. ve vyhledávačích obrázků (Google Images) nebo v hlasových čtečkách.

Výsledek:

HTML tutoriál – obrázky

Výšku a šířku obrázku je možné nastavit pomocí atributů width a height. Hodnoty můžeme zadat buď číslem (např width="64") a budou označovat velikost v pixelech nebo procenty (např width="50%"). Pokud je zadán jen jeden atribut, další se dopočítá tak, aby zůstal zachován poměr stran. Opět si však musíme uvědomit, že obrázek by měl být na webu v té velikosti, ve které se bude zobrazovat. Měli bychom ho tedy zmenšit např. v GIMPu a ne ho nahrát na web veliký a zmenšit si ho v HTML. Prohlížeč by jinak musel načíst celý velký obrázek, zmenšit ho a až potom ho zobrazit. To by jistě chvíli trvalo.

Odkazy

Posledním a možná nejdůležitější tagem, který si tu zmíníme, je odkaz. Vložíme ho tagem <a> (jako anchor = zakotvit, připoutat). Tag <a> je párový a obaluje text, který má být odkazem. Vyžaduje atribut href, kde je cílová stránka, na kterou odkaz vede. Někdy se hodí, aby se stránka otevřela v nové záložce prohlížeče, v tom případě přidáme atribut target s hodnotou _blank.

Ukázka kódu s odkazem:

<a href="http://www.google.com">odkaz na Google</a>

Nemusíme se odkazovat jen na stránky, ale také na soubory. Kliknutí na odkaz potom vyvolá jejich stažení.

Ukázka kódu pro stažení souboru:

<a href="http://www.mujweb.cz/soubor.zip">Stáhnout soubor.zip</a>

Elementy v HTML se dělí na řádkové a blokové. Rozdíl mezi nimi je ten, že blokové mohou v sobě obsahovat oba druhy, ale řádkové mohou obsahovat jen řádkové. Odkaz je element řádkový, stejně jako všechny elementy, co jsme si zatím zmínili, kromě nadpisů, které jsou blokové. Do odkazu tedy můžeme dát klidně i obrázek, ale ne nadpis.

Když vložíme vše, co jsme se dnes naučili do kódu webu, mohl by vypadat takto:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
</head>

<body>
        <h1>Můj první web</h1>
        <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
        <p><img src="obrazky/avatar.png" alt="Programátor HoBi" /></p>

        <h2>O mně</h2>
        <p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.</p>
        <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
        <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>

        <h2>Dovednosti</h2>
        <p>V prváku jsem začal ve škole s programovacím jazykem PASCAL. Hledal jsem na internetu nějaké lepší jazyky a náhodou jsem narazil na itnetwork.cz, kde se nyní učím <strong>HTML</strong> a <strong>Javu</strong>. Základy těchto jazyků ovládám.</p>

        <p>Tato stránka je vytvořena podle HTML tutoriálů na <a href="http://www.itnetwork.cz" target="_blank">itnetwork</a>.</p>
</body>

</html>

A výsledek:

HTML tutoriál – Základní HTML tagy

Po kliknutí na odkaz se ITnetwork otevře v nové stránce.

Navigace

Na závěr si vyzkoušejme ještě jednoduchou navigaci v rámci stránky. Vytvoříme si v PSPadu nový HTML soubor, půjde o kontaktní stránku, na kterou přejdeme ze stránky hlavní (z index.html) a naopak z kontaktní stránky se budeme moci na hlavní stranu vrátit.

Kód nové stránky bude následující:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
        <meta charset="utf-8" />
        <title>Kontaktujte mě</title>
</head>

<body>
        <h1>Kontakt</h1>
        <p><img src="obrazky/email.png" alt="email" /></p>
        <p>
        Pokud mi chcete něco sdělit, napište mi email na <strong>hobi (zavináč) hobi (tečka) cz.
        </p>

        <p><a href="index.html">Zpět na hlavní stranu</a></p>
</body>

</html>

Stránku uložíme jako kontakt.html do složky s webem. Obrázek (ikonku) emailu jsem stáhl z webu http://www.iconfinder.com, kde máte k dispozici tisíce ikonek pro vaše webové stránky. Ikony jsou zadarmo, u každé je napsaná licence, některé můžete použít libovolně, u některých je třeba uvést odkaz na autora. Takových webů, které nám pomohou v tvorbou grafiky, si během seriálu zmíníme ještě několik.

Zkusme si stránku kontakt.html otevřít v prohlížeči, vypadá asi takto:

HTML tutoriál -Kontaktní stránka

Po kliknutí na odkaz níže se z ní vrátíme zpět na hlavní stránku. Aby byla navigace kompletní, dejme ještě do hlavní stránky odkaz na stránku kontaktní, třeba do odstavce o mě:

<p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.</p>

Máme hotovou obousměrnou navigaci v rámci našeho webu. V příští lekci, Tabulky v HTML, to bude o tabulkách a seznamech. Dnešní kód je jako vždy ke stažení níže.


 

Stáhnout

Staženo 1330x (45.27 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
67 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Základní HTML tagy
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 1.-3. lekci HTML a CSS
Aktivity (4)

 

 

Komentáře
Zobrazit starší komentáře (96)

Avatar
Andrew
Člen
Avatar
Andrew:8.8.2016 17:31

Ahoj, jen chtěl upozornit že v kontakt.html není ukončený strong.

Odpovědět 8.8.2016 17:31
Scientia est potentia - Latinské přísloví
Avatar
Gbert
Člen
Avatar
Gbert:18. února 16:59

Ahoj ve cvičení o kontaku jsem umístil obrázek do složky "obrazky" je to na C - čku.
Když jsem do htm napsal tento řádek:
<p><img src="obrazky/e­mail.png" alt="email"/></p>

tak se zobrazil text tak jak se má zobrazovat, ale obrázek ani náhodou...
hrál jsem si a zkoušel a hledal svojí chybu, ale pak mě napadlo dát do html odkaz rovnou z "c-čka" - tedy jaky celou cestu od C..
upravil jsem odkaz na tento:
<p><img src="file:///C:/o­brazky/email.png" alt="email"/></p>
..no a teď to vše běhá jak má...mám z toho radost ...chápu i proč to chodí, ale proč to nechodilo když jsem to psal podle návodu..
prosím help me...
díky
gbert

 
Odpovědět 18. února 16:59
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:17. července 14:11

Zdravím,
v článku je uvedeno, že do odkazu nemůžeme dát nadpis. Tato HTML stránka s nadpisem uvnitř odkazu, jejíž kód uvádím zde, je dle Total validatoru i validátoru w3c validní.

<!DOCTYPE html>

<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <title>Moje druhá webová stránka</title>
</head>

<body>
<h1>Nadpis</h1>
<p>Vítejte v České republice. Za hodinu internetu nyní na cestách zaplatíte
    <s>10 Kč</s> 200 Kč.</p>
<p>Během roku se návštěvnost sociální sítě devbook.cz <mark>zvýšila o 300%</mark>.</p>
<a href="http://www.google.com"><h1>Nadpis v odkazu</h1>odkaz na Google<img src="Lighthouse.jpg" alt="lighthouse" /></a>
</body>
</html>

Zajímalo by mě, proč není vhodné vložit nadpis do odkazu. Případně by mě zajímalo, jaké jiné validátory HTML jsou schopné odhalit, že nadpis do odkazu nepatří. Za odpověď předem děkuji.

Editováno 17. července 14:12
 
Odpovědět 17. července 14:11
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Šup
David Čápka:17. července 14:33

Jelikož element a je řádkový a element h1 je blokový, nedává smysl dávat nadpis do odkazu, ale odkaz do nadpisu. Řádkové elementy v sobě dle původního návrhu a i logicky nemají obsahovat elementy blokové. Mám dojem, že od HTML 5 není toto nařízení striktní a lze jej porušovat, což je asi důvod, proč validátor s HTML 5 hlavičkou nezařve. Můžeš tam zkusit dát hlavičku HTML 4. Každopádně, to že to jde neznamená, že to tak máme dělat :)

Odpovědět 17. července 14:33
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Daniel Šup
Člen
Avatar
Odpovídá na David Čápka
Daniel Šup:17. července 15:04

Děkuji ti za odpověď s odůvodněním, proč není vhodné vložit nadpis do odkazu. Nyní jsem zkusil místo původní hlavičky

<!DOCTYPE html>

vložit hlavičku

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

a validátor w3c již bude hlásit chyby.

 
Odpovědět 17. července 15:04
Avatar
Martin Szmek
Člen
Avatar
Martin Szmek:9. listopadu 16:31

Ahoj, nevte někdo proč mi nejdou zobrazit obrázky ve firefoxu? Myslím, že je mám povoleny v prohlížeči . Děkuji za odpověd.

 
Odpovědět 9. listopadu 16:31
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Martin Szmek
David Čápka:9. listopadu 16:46

Protože jsi je vložil špatně. Zkontroluj si kód a zda se obrázky nacházejí v daném umístění.

Editováno 9. listopadu 16:46
Odpovědět 9. listopadu 16:46
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Martin Szmek
Člen
Avatar
Martin Szmek:9. listopadu 16:51

To mám vše správně , stáhnul jsem si test abych věděl kde mám chybu, ale když jsem to otevřel tak se mi obrazek nechce zobrazit.

 
Odpovědět 9. listopadu 16:51
Avatar
David Jančík
Tým ITnetwork
Avatar
Odpovídá na Martin Szmek
David Jančík:9. listopadu 16:56

A rozbalil jsi stáhnutý zip? Nelze načíst další soubory, pokud otevřeš html soubor přímo ze zipu (on se rozbalí systémem do dočasné složky, ale bez ostatních souborů).
Když stiskneš F12 a zvolíš si záložku "Konzole" měl bys vidět absolutní cestu k souboru, který se snaží načíst a důvod, proč se nenačetl.
Pokud nepomůže, je možné, že ti to blokuje prohlížeč. Zkus vypnout všechna rozšíření, případně resetovat prohlížeč do defaultního nastavení.

Odpovědět  +1 9. listopadu 16:56
Čím více času dostaneš, tím méně ho máš.
Avatar
V. Klíma
Člen
Avatar
V. Klíma:17. listopadu 20:37

Chybka, v kódu není uzavřený jeden tag v poslední ukázce kódu (navigace).
Pokud mi chcete něco sdělit, napište mi email na hobi (zavináč) hobi (tečka) cz.

 
Odpovědět 17. listopadu 20:37
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 106. Zobrazit vše