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 aalt(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/:
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:
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:
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:
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/:
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:
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 4684x (2.11 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.