Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. 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í.

Lekce 4 - 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 v HTML tutoriálu ukážeme přidání obrázků a odkazů na naší vytvořenou webovou stránku.

Obrázky <img>

Co by to bylo za web bez obrázků? Obrázky vložíme pomocí nepárového tagu <img /> (image - obrázek). Setkáváme se s dalším tagem, který vyžaduje atributy (již jsme jimi dříve specifikovali např. jazyk lang v elementu <html> nebo kódování v <meta>). Víme, že atribut je doplňující informace k tagu. U obrázků typicky uvádíme 2 atributy:

  • src (source) - cestu k souboru obrázku a
  • alt (alternate text - alternativní text) - popis obrázku pro vyhledávače, lidi s hlasovými čtečkami a jako alternativní obsah pro případ, že se obrázek nezobrazí

Dobrou praktikou je mít všechny obrázky k webu v nějaké složce, aby se nemíchaly s dalšími soubory.

Vytvoříme si tedy ve složce s webem prvni_web/ 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 zkušební obrázek níže a to tak, že na něj kliknete pravým tlačítkem myši a zvolíte možnost Uložit obrázek jako.... Následně jej uložíte do složky obrazky/:

Webové stránky krok za krokem

Nyní si v kódu zkusíme vložit tento obrázek do nového odstavce:

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

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:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

Obrázek je pomerně velký, za moment si ukážeme, jak jej zmenšit.

Proč se obrázek nezobrazí - Nejčastější chyby

Obrázek je první součást naší stránky, která závisí na dalších souborech. Pokud jej špatně vložíme, nezobrazí se.

Častou chybou je, že v atributu src uvedeme celou absolutní cestu k obrázku v našem počítači, např. C:\users\Karel\OneDrive\prvni_web\obrazky\avatar.jpg. Když potom nahrajeme web na internet, návštěvník na svém počítači bude mít těžko naši složku Karel/ s naším diskem a obrázek se mu nezobrazí.

Proto píšeme vždy jen relativní část cesty od složky, ve které se nachází stránka, na které obrázek používáme. Obrázek musíme do složky samozřejmě nahrát, naše stránka musí být v nadřazené složce a názvy složek a souboru obrázku a souboru uvedeném v HTML kódu se musí na písmeno shodovat.

Opět nezapomeneme na rozlišování malých a velkých písmen, nezaměníme .jpeg za .jpg a naopak. Také v názvech souborů (i HTML stránek, i obrázků) nikdy nepoužíváme diakritiku, obrázek by se na jiných operačních systémech nemusel načíst. Raději se vyhýbáme i mezerám v názvech souborů, které nahradíme např. pomlčkami -.

Pokud máte s vložením obrázku přesto problémy, stáhněte si ukázkové řešení na konci lekce.

Typy obrázků pro web

Až budou naše stránky nahrané na internetu, stažení obrázku bude nějakou dobu trvat. Tuto skutečnost musíme mít na paměti. Používejte tedy úsporné formáty, jako jsou JPEG, PNG nebo WebP, 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. Při použití formátu JPEG volíme kvalitu okolo 90%, jinak obrázek obsahuje ošklivé artefakty. U velkých fotografií můžeme sáhnout s kvalitou trochu níže, aby soubor nebyl příliš velký. WebP je pak formát navržený přímo pro web, který je moderní úspornější alternativou k předchozím dvěma formátům.

Rozhodně se vyhněte formátu BMP, který je bezkompresní nebo formátu GIF, který u neanimovaných obrázků jen zbytečně poškodí paletu.

Nastavení výšky a šířky obrázku

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 prvně zmenšit v grafickém editoru (např. Paint.NET), a ne ho nahrát na web veliký a zmenšit si ho až 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.

S těmito znalostmi si můžeme zkusit obrázek zmenšit a kód upravit do následující podoby:

<p>
    <img src="obrazky/avatar.jpg" alt="Programátor HoBi" width="30%" height="30%" />
</p>

Výsledek:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

To je k obrázkům vše.

Odkazy <a>

Posledním a možná nejdůležitějším tagem, který si tu zmíníme, je odkaz. Vložíme ho tagem <a> (anchor - zakotvit, připoutat). Tag <a> je párový a obaluje text, který má být odkazem. Zadáváme mu atributy:

  • href (Hypertext REFerence - hypertextový odkaz), 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 (target - cíl) s hodnotou _blank (blank - čistý).

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>

Řádkové a blokové elementy

Již jsme nakousli, že HTML elementy se dělí na řádkové a blokové:

  • Blokové jsou elementy, které za běžných okolností nedává smysl dávat vedle sebe. Roztahují se přes celou šířku stránky, pokud je nenastavíme jinak. Jedná se např. o odstavce a nadpisy.
  • Řádkových, např. obrázků, může být pak na jednom řádku více vedle sebe a nezabírají celou šířku stránky.

Důležitý rozdíl mezi nimi je také ten, že řádkové elementy mohou v sobě obsahovat zas jen řádkové elementy, zatímco blokové mohou v sobě obsahovat jak řádkové, tak blokové. 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ž bychom chtěli odkaz v nadpisu, vložíme odkaz do nadpisu, nikoli nadpis do odkazu.

✗ Špatně

<a href="https://www.google.com"><h1>Strýček Google</h1></a>

✔ Správně

<h1>Strýček <a href="https://www.google.com">Google</a></h1>

Rozšíření projektu - Obrázky a odkazy

Když vložíme vše, co jsme se dnes naučili, do kódu webu, bude 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:

Moje první webová stránka
file:///C:/User­s/David/OneDri­ve/prvni_web/in­dex.html

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

Vytvoření podstránky - Kontakt

Na závěr si vyzkoušejme ještě jednoduchou navigaci v rámci stránky. Vytvoříme si ve VS Code nový HTML soubor kontakt.html. Pro snadnější práci si můžeme celou složku prvni_web/ otevřít ve VS Code tak, že na ni v průzkumníku Windows klikneme pravým tlačítkem myši, zvolíme Zobrazit více možností (Windows 11+) a pak možnost Otevřít v Code (ve Windows 10 a starších bude rovnou možnost Otevřít v Code). Nové soubory a složky pak můžeme snadno vytvářet kliknutím na levý panel se souborovou strukturou webu. Klikneme tedy na prázdné místo pod index.html pravým tlačítkem myši a zvolíme možnost "Nový soubor", poté vyplníme název kontakt.html.

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.</strong>
    </p>

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

</html>

Stránku uložíme do složky s webem. Obrázek (ikonku) emailu si můžete stáhnout níže a vložit do složky obrazky/:

Webové stránky krok za krokem

Nebo si vybrat vlastní 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 s tvorbou grafiky, si během kurzu zmíníme ještě několik.

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

Kontaktujte mě
file:///C:/User­s/David/OneDri­ve/prvni_web/kon­takt.html

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 kontaktní stránku, 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.-4. 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 3827x (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.-4. lekci HTML a CSS
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
2636 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti 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