3. diel - Obrázky a odkazy v HTML

V minulej lekcii, Štruktúra HTML stránky , sme si ukázali, ako vyzerá štruktúra HTML stránky a vytvorili sme si prvú stránku s krátkym textom.

V minulej lekcii, Štruktúra HTML stránky , sme sa naučili zvýrazňovať text a používať nadpisy. Vytvorili sme si tiež prvú stránku jednoduchého webu, na ktoré budeme v dnešnom HTML tutoriálu pokračovať.

Obrázky

Čo by to bolo za web bez obrázkov? Obrázky vložíme pomocou tagu <img /> (ako image = obrázok). Stretávame sa s prvým tagom, ktorý vyžaduje tzv. Atribúty. Atribút je doplňujúce informácie k tagu. Tu bude atribútom cesta k súboru obrázku - atribút src a popis obrázku alt. Atribúty sa píšu do špicatých zátvoriek za názov tagu, nasleduje znamienko rovnosti a obsah atribútu je potom v úvodzovkách. Dobrou praktikou je mať všetky obrázky k stránke v nejakej zložke, aby sa nemiešali s ďalším obsahom. Vytvoríme si teda v zložke s webom 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ť tento skúšobný obrázok. Uložte si ho do novovytvoreného priečinka a skúsme si ho vložiť do nového odseku.

Výsledný kód obrázku by mohol vyzerať takto:

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

Pozor: Musíme si uvedomiť, že až budú stránky na internete, stiahnutie obrázku bude nejaký čas trvať. Používajte teda úsporné formáty, ako sú JPEG alebo PNG, 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. Rozhodne sa vyhnite formáte BMP, ktorý je bezkompresní alebo formáte GIF, ktorý poškodzuje paletu.

Atribút alt býva často vynechávanie, ale to je chyba. Hrá totiž svoju úlohu napr. Vo vyhľadávačoch obrázkov (Google Images) alebo v hlasových čítačkách.

výsledok:

HTML tutoriál – obrázky - Webové stránky krok za krokom

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%"). Ak je zadaný len jeden atribút, ďalšie 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 zmenšiť napr. V GIMP a nie ho nahrať na web, veľký a zmenšiť si ho 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.

Odkazy

Posledným a možno najdôležitejšie tagom, ktorý si tu zmienime, je odkaz. Vložíme ho tagom <a> (ako anchor = zakotviť, pripútať). Tag <a> je párový a obaľuje text, ktorý má byť odkazom. Vyžaduje atribút href, 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 s hodnotou _blank.

Ukážka kódu s odkazom:

<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>

Elementy v HTML sa delí na riadkové a blokové. Rozdiel medzi nimi je ten, že blokové môžu v sebe obsahovať oba druhy, ale riadkové môžu obsahovať len riadkové. Odkaz je element riadkový, rovnako ako všetky elementy, čo sme si zatiaľ spomenuli, okrem nadpisov, ktoré sú blokové. Do odkazu teda môžeme dať pokojne aj obrázok, ale nie nadpis.

Keď vložíme všetko, čo sme sa dnes naučili do kódu webu, mohol by 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.png" alt="Programátor HoBi" /></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:

HTML tutoriál – Základné HTML tagy - Webové stránky krok za krokom

Po kliknutí na odkaz sa ITnetwork otvorí v novej stránke.

Navigácia

Na záver si vyskúšajme ešte jednoduchú navigáciu v rámci stránky. Vytvoríme si v PSPadu nový HTML súbor, pôjde o kontaktné stránku, na ktorú prejdeme zo stránky hlavná (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.
    </p>

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

</html>

Stránku uložíme ako kontakt.html do zložky s webom. Obrázok (ikonku) emailu som stiahol 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á licencie, niektoré môžete použiť ľubovoľne, u niektorých je potrebné uviesť odkaz na autora. Takých webov, ktoré nám pomôžu v tvorbou grafiky, si počas seriálu zmienime ešte niekoľko.

Skúsme si stránku kontakt.html otvoriť v prehliadači, vyzerá asi takto:

HTML tutoriál -Kontaktní stránka - Webové stránky krok za krokom

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 stránku kontaktné, treba do odseku o mňa:

<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. V budúcej lekcii, Riešené úlohy k 1.-3. lekciu HTML a CSS , to bude o tabuľkách a zoznamoch. Dnešné kód je ako vždy k stiahnutiu nižšie.

V nasledujúcom cvičení, Riešené úlohy k 1.-3. 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é 3866x (2.11 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

10 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity