Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 80 % zdarma při nákupu e-learningu - více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
C# .NET week + discount week

Lekce 3 - Obrázky a odkazy v HTML

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.

Dnes si ukážeme přidání obrázků a odkazů na naší vytvořenou webovou stránku.

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.jpg" 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:

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.jpg" alt="Programátor HoBi" width="30%"
        height="30%"
  /></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:

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 ve VSCode 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 mně:

<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. Dnešní kód je jako vždy ke stažení níže.

V následujícím cvičení, Řešené úlohy k 1.-3. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 2320x (2.11 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Základní HTML tagy
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 1.-3. lekci HTML a CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
470 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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

Avatar
Mahmoud Alqimah:12. února 19:30

Ahoj , dneska je prvni den .

Odpovědět
12. února 19:30
Mody
Avatar
Mahmoud Alqimah:12. února 19:43

Je to dobrý ?

Odpovědět
12. února 19:43
Mody
Avatar
Tomas Remek
Člen
Avatar
Tomas Remek:13. února 13:46

Ahoj, prima článek. Zmínil bych jen moderní obrázkový formát webp, aby nováčci věděli, že něco takového je, případně jak se k tomu chovají prohlížeče. Pokud to bude v dalších lekcích, tak to ignoruj ;)

Odpovědět
13. února 13:46
Projekťák, co chce vědět, zda mu programátoři a kodéři nemažou med kolem huby... :)
Avatar
Karel Čížek:25. února 21:48

Ahoj.. když jsem vkládal obrázek na stránky omylem jsem neukončil .

Příklad : <img src="obrazky/a­vatar.jpeg" alt="avatar" width="30%" height="30%" /></p>

Na konci jsem měl jen. : ( </p> ). ... nikoliv .... ( /> )

Jak je možné, že i přesto se při zobrazení nejeví, že by nějaká chyba nastala, jak se to projevuje ? Díky

 
Odpovědět
25. února 21:48
Avatar
Jaroslav Drobek:14. března 10:58

Jak otevřít odkaz v novém okně prohlížeče?

 
Odpovědět
14. března 10:58
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jaroslav Drobek
Zuzana Bumbová:15. března 12:55

Přidáním atributu target="_blank". Obecně to ale není dobré používat častěji než je nutné, ideálně jen tedy když chci přesměrovat uživatele na nějakou cizí stránku úplně ven, a ne na další stránku uvnitř mé stejné domény (vysvětlení by bylo na déle, v zásadě je to méně bezpečné a má to negativní dopady na to jak dlouho je uživatel ochoten na naší stránce zůstat).

 
Odpovědět
15. března 12:55
Avatar
Odpovídá na Zuzana Bumbová
Jaroslav Drobek:15. března 13:19

target="_blank" otevře novou záložku v rámci stejného okna. Mě ale zajímá otevření nového okna..

 
Odpovědět
15. března 13:19
Avatar
Nat Owen
Člen
Avatar
Nat Owen:8. května 14:52

Ahoj, nevím proč, ale nevypisují se mi automatick tagy.. musím vše psát ručně

 
Odpovědět
8. května 14:52
Avatar
David Tomko
Člen
Avatar
David Tomko:13. května 17:00

Co znamená programátor HoBi u tagu Alt?

Odpovědět
13. května 17:00
Úspěch je něco, co ti přátelé nikdy neodpustí. — Julian Tuwim
Avatar
Petr Holoch
Člen
Avatar
Odpovídá na David Tomko
Petr Holoch:14. května 16:23

Ahoj, je to napsáno v článku:
"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."

 
Odpovědět
14. května 16:23
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 236. Zobrazit vše