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íklad jazyk lang v elemente
<html> alebo kódovanie v <meta>). Vieme,
že atribúty sú v podstate doplňujúce informácie k tagu. U obrázkov
typicky uvádzame 2 atribúty:
src(source) - cestu k súboru obrázkualt(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í.
Dobrou praktikou je mať všetky obrázky k webu v nejakom priečinku, aby sa nemiešali s ďalšími súbormi.
Vytvoríme si teda v priečinku s webom first_web/ nový
priečinok, ktorý pomenujeme images/. Doň 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 priečinka images/:
Teraz si v kóde skúsime vložiť tento obrázok do nového odseku:
<p> <img src="images/avatar.jpg" alt="Programmer SaBi" /> </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íklad C:\users\Karel\OneDrive\first_web\images\avatar.jpg.
Keď potom nahráme web na internet, návštevník na svojom počítači bude
mať ťažko náš priečinok Karol/ s naším diskom a obrázok sa
mu nezobrazí.
Preto píšeme vždy len relatívnu časť cesty od priečinka, v ktorom sa nachádza stránka, na ktorej obrázok používame. Obrázok musíme do priečinka samozrejme nahrať, naša stránka musí byť v nadradenom priečinku a názvy priečinkov a súboru obrázku a súboru uvedenom v HTML kóde sa musia do písmena 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íklad pomlčkami -.
Ak 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 ísť s kvalitou trochu nižšie, aby súbor nebol príliš veľký. WebP je 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íklad width="64") a budú označovať veľkosť v pixeloch,
alebo percentami (napríklad 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 najprv zmenšiť v
grafickom editore (napríklad 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="images/avatar.jpg" alt="Programmer SaBi" 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ý).
Ukážka kódu s odkazom:
<a href="http://www.google.com">Link to 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.myweb.com/file.zip">Download file.zip</a>
Riadkové a blokové elementy
Už sme načrtli, ž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íklad o odseky a nadpisy.
- Riadkových, napríklad obrázkov, môže byť potom na jednom riadku viac vedľa seba a nezaberajú celú šírku stránky.
Dôležitý rozdiel medzi nimi je tiež ten, že riadkové elementy môžu v sebe obsahovať zas len riadkové elementy, zatiaľ čo blokové môžu v sebe obsahovať ako riadkové, tak blokové. Odkaz je element riadkový, rovnako ako všetky elementy, čo sme si zatiaľ zmienili, okrem nadpisov, ktoré sú blokové. Do odkazu teda môžeme dať pokojne aj obrázok, ale nie nadpis. Ak by sme chceli mať odkaz v nadpise, vložíme odkaz do nadpisu, nie nadpis do odkazu.
✗ Nesprávne
<a href="https://www.google.com"><h1>Professor Google</h1></a>
✔ Správne
<h1>Professor <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="en"> <head> <meta charset="utf-8" /> <title>Sam Bittner - Web Developer</title> </head> <body> <h1>Sam Bittner - Web Developer</h1> <p>Welcome! I'm thrilled to help you transform your ideas into stunning, <strong>high-performing websites</strong>.</p> <p><img src="images/avatar.jpg" alt="Programmer SaBi" width="30%" height="30%" /></p> <h2>About Me</h2> <p>I'm Sam Bittner, a web developer with a passion for creating dynamic and responsive websites. I have expertise in various technologies, including HTML, CSS, JavaScript, and Java with Spring Boot.</p> <p>When I'm not coding, I love reading tech blogs, experimenting with new frameworks, and engaging in outdoor activities.</p> <h2>Skills</h2> <p>With a background in IT from ictdemy.com courses, I have developed my skills in various programming languages, including HTML, CSS, JavaScript, and Java with Spring Boot.</p> <p>I believe that web development is not just about writing code; it's about creating user experiences that are engaging and accessible to everyone. I am committed to continuous learning and improvement, staying updated on the latest trends and technologies in the field.</p> <p>This page is based on the HTML tutorials on <a href="http://www.ictdemy.com" target="_blank">ictdemy.com</a>.</p> </body> </html>
A výsledok:
Po kliknutí na odkaz sa na novej stránke otvorí web ICTdemy.
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 contact.html. Pre
ľahšiu prácu si môžeme celý priečinok first_web/ otvoriť vo
VS Code tak, že naň 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ť New File..., potom vyplníme názov
contact.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="en"> <head> <meta charset="utf-8" /> <title>Contact Me</title> </head> <body> <h1>Contact</h1> <p><img src="images/email.png" alt="email" /></p> <p>If you want to tell me something, write me an email to <strong>sabi (at sign) sabi (dot) com.</strong></p> <p><a href="index.html">Back to home page</a></p> </body> </html>
Stránku uložíme do priečinka s webom. Obrázok (ikonku) e-mailu si
môžete stiahnuť nižšie a vložiť do priečinka images/:
Alebo si vybrať vlastnú ikonu z webu http://www.iconfinder.com, kde ich máte k dispozícii tisícky 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 contact.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, napríklad do časti "About Me":
<p>You can contact me at <a href="contact.html">contact page</a>.</p>
Máme hotovú obojsmernú navigáciu v rámci nášho webu 
Dnešný kód je ako vždy k
dispozícii 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é 58x (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.