4. diel - Obrázky a odkazy v HTML
V minulej lekcii, Základné HTML tagy , sme sa naučili zvýrazňovať text a používať nadpisy. Vytvorili sme si aj prvú stránku jednoduchého webu.
Dnes si v HTML tutoriáli ukážeme pridanie obrázkov a odkazov na našu vytvorenú webovú stránku.
Obrázky <img>
Čo by to bolo za web bez obrázkov? Obrázky vložíme pomocou nepárového
tagu <img /> (image - obrázok). Stretávame sa s
ďalším tagom, ktorý vyžaduje atribúty (už sme nimi
predtým špecifikovali napr. jazyk lang v elemente
<html> alebo kódovanie v <meta>). Vieme,
že atribút je doplňujúce informácie k tagu. U obrázkov typicky uvádzame 2
atribúty:
src(source) - cestu k súboru obrázku aalt(alternate text - alternatívny text) - popis obrázku pre vyhľadávače, ľudí s hlasovými čítačkami a ako alternatívny obsah pre prípad, že sa obrázok nezobrazí
Vytvoríme si teda v zložke s webom prvni_web/ novú zložku,
ktorú pomenujeme obrazky/. Do nej si vložíme obrázok, ktorý
budeme chcieť na stránke zobraziť. Môžete si stiahnuť a použiť
skúšobný obrázok nižšie a to tak, že naň kliknete pravým tlačidlom
myši a zvolíte možnosť Uložiť obrázok ako.... Následne ho
uložíte do zložky obrazky/:
Teraz si v kóde skúsime vložiť tento obrázok do nového odseku:
<p> <img src="obrazky/avatar.jpg" alt="Programátor HoBi" /> </p>
Atribút alt býva často vynechávaný, ale to je
chyba. Hrá totiž svoju rolu napr. vo vyhľadávačoch
obrázkov (Google Images) alebo v hlasových čítačkách.
Výsledok:
Obrázok je pomerne veľký, za moment si ukážeme, ako ho zmenšiť.
Prečo sa obrázok nezobrazí - Najčastejšie chyby
Obrázok je prvá súčasť našej stránky, ktorá závisí od ďalších súborov. Pokiaľ ho zle vložíme, nezobrazí sa.
Častou chybou je, že v atribúte src uvedieme
celú absolútnu cestu k obrázku v našom
počítači, napr.
C:\users\Karel\OneDrive\prvni_web\obrazky\avatar.jpg. Keď potom
nahráme web na internet, návštevník na svojom počítači bude mať ťažko
našu zložku Karel/ s naším diskom a obrázok sa mu
nezobrazí.
Preto píšeme vždy len relatívnu časť cesty od zložky, v ktorej sa nachádza stránka, na ktorej obrázok používame. Obrázok musíme do zložky samozrejme nahrať, naša stránka musí byť v nadradenej zložke a názvy zložiek a súboru obrázku a súboru uvedenom v HTML kóde sa musí na písmeno zhodovať.
Opäť nezabudneme na rozlišovanie malých a veľkých
písmen, nezameníme .jpeg za .jpg a naopak. Aj v
názvoch súborov (aj HTML stránok, aj obrázkov) nikdy nepoužívame
diakritiku, obrázok by sa na iných operačných systémoch nemusel
načítať. Radšej sa vyhýbame aj medzerám v názvoch súborov, ktoré
nahradíme napr. pomlčkami -.
Pokiaľ máte s vložením obrázku napriek tomu problémy, stiahnite si ukážkové riešenie na konci lekcie.
Typy obrázkov pre web
Keď budú naše stránky nahrané na internete, stiahnutie obrázku bude nejaký čas trvať. Túto skutočnosť musíme mať na pamäti. Používajte teda úsporné formáty, ako sú JPEG, PNG alebo WebP, kde má výsledný obrázok malú veľkosť vďaka kompresii. JPEG sa spravidla používa na veľké obrázky a fotky, PNG na ikony, nákresy a obrázky, kde sú jednofarebné plochy. Pri použití formátu JPEG volíme kvalitu okolo 90%, inak obrázok obsahuje škaredé artefakty. Pri veľkých fotografiách môžeme siahnuť s kvalitou trochu nižšie, aby súbor nebol príliš veľký. WebP je potom formát navrhnutý priamo pre web, ktorý je modernou úspornejšou alternatívou k predchádzajúcim dvom formátom.
Rozhodne sa vyhnite formátu BMP, ktorý je bezkompresný alebo formátu GIF, ktorý pri neanimovaných obrázkoch len zbytočne poškodí paletu.
Nastavenie výšky a šírky obrázku
Výšku a šírku obrázku je možné nastaviť pomocou atribútov
width a height. Hodnoty môžeme zadať buď číslom
(napr. width="64") a budú označovať veľkosť v pixeloch, alebo
percentami (napr width="50%"). Pokiaľ je zadaný len jeden
atribút, ďalší sa dopočíta tak, aby zostal zachovaný pomer strán. Opäť
si však musíme uvedomiť, že obrázok by mal byť na webe v tej veľkosti, v
ktorej sa bude zobrazovať. Mali by sme ho teda prvýkrát zmenšiť v grafickom
editore (napr. Paint.NET), a nie ho nahrať na web veľký a zmenšiť si ho až
v HTML. Prehliadač by inak musel načítať celý veľký obrázok, zmenšiť
ho a až potom ho zobraziť. To by určite chvíľu trvalo.
S týmito znalosťami si môžeme skúsiť obrázok zmenšiť a kód upraviť do nasledujúcej podoby:
<p> <img src="obrazky/avatar.jpg" alt="Programátor HoBi" width="30%" height="30%" /> </p>
Výsledok:
To je k obrázkom všetko.
Odkazy <a>
Posledným a možno najdôležitejším tagom, ktorý si tu spomenieme, je
odkaz. Vložíme ho tagom <a> (anchor - zakotviť,
pripútať). Tag <a> je párový a obaľuje text, ktorý má
byť odkazom. Zadávame mu atribúty:
href(Hypertext REFerence - hypertextový odkaz), kde je cieľová stránka, na ktorú odkaz vedie.- Niekedy sa hodí, aby sa stránka otvorila v novej záložke prehliadača, v
tom prípade pridáme atribút
target(target - cieľ) s hodnotou_blank(blank - čistý).
<a href="http://www.google.com">odkaz na Google</a>
Nemusíme sa odkazovať len na stránky, ale aj na súbory. Kliknutie na odkaz potom vyvolá ich stiahnutie.
Ukážka kódu pre stiahnutie súboru:
<a href="http://www.mujweb.cz/soubor.zip">Stáhnout soubor.zip</a>
Riadkové a blokové elementy
Už sme načali, že HTML elementy sa delia na riadkové a blokové:
- Blokové sú elementy, ktoré za bežných okolností nedáva zmysel dávať vedľa seba. Rozťahujú sa cez celú šírku stránky, pokiaľ ich nenastavíme inak. Ide napr. o odseky a nadpisy.
- Riadkových, napr. obrázkov, môže byť potom na jednom riadku viac vedľa seba a nezaberajú celú šírku stránky.
✗ Š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šírenie projektu - Obrázky a odkazy
Keď vložíme všetko, čo sme sa dnes naučili, do kódu webu, bude vyzerať 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ýsledok:
Po kliknutí na odkaz sa ITnetwork otvorí v novej stránke.
Vytvorenie podstránky - Kontakt
Na záver si vyskúšajme ešte jednoduchú navigáciu v rámci stránky.
Vytvoríme si vo VS Code nový HTML súbor kontakt.html. Pre
ľahšiu prácu si môžeme celú zložku prvni_web/ otvoriť vo VS
Code tak, že na ňu v prieskumníku Windows klikneme pravým tlačidlom myši,
zvolíme Zobraziť viac možností (Windows 11+) a potom možnosť
Otvoriť v Code (vo Windows 10 a starších bude rovno možnosť
Otvoriť v Code). Nové súbory a priečinky potom môžeme ľahko
vytvárať kliknutím na ľavý panel so súborovou štruktúrou webu. Klikneme
teda na prázdne miesto pod index.html pravým tlačidlom myši a
zvolíme možnosť "Nový súbor", potom vyplníme názov
kontakt.html.
Pôjde o kontaktnú stránku, na ktorú prejdeme zo stránky hlavnej (z
index.html) a naopak z kontaktnej stránky sa budeme môcť na
hlavnú stranu vrátiť.
Kód novej stránky bude nasledujúci:
<!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 zložky s webom. Obrázok (ikonku) emailu si môžete
stiahnuť nižšie a vložiť do zložky obrazky/:
Alebo si vybrať vlastný z webu http://www.iconfinder.com, kde máte k dispozícii tisíce ikoniek pre vaše webové stránky. Ikony sú zadarmo, pri každej je napísaná licencia, niektoré môžete použiť ľubovoľne, pri niektorých je potrebné uviesť odkaz na autora. Takých webov, ktoré nám pomôžu s tvorbou grafiky, si počas kurzu spomenieme ešte niekoľko.
Skúsme si stránku kontakt.html otvoriť v prehliadači. Bude
vyzerať asi takto:
Po kliknutí na odkaz nižšie sa z nej vrátime späť na hlavnú stránku. Aby bola navigácia kompletná, dajme ešte do hlavnej stránky odkaz na kontaktnú stránku, treba do odseku "O mne":
<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 hotovú obojsmernú navigáciu v rámci nášho webu!:) Dnešný kód je ako vždy na stiahnutie nižšie.
V nasledujúcom cvičení, Riešené úlohy k 1.-4. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 3906x (2.11 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.