Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

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

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


 

Stiahnuť

Stiahnuté 1850x (45.27 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Základné HTML tagy
Všetky články v sekcii
Webové stránky krok za krokom
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
kuba
Člen
Avatar
kuba:26. januára 19:48

dik

 
Odpovedať
26. januára 19:48
Avatar
Ladislav Guldan:22. marca 14:10

Ahoj,neviem prejsť zo stránky na stránku.Odkaz mám dobrý,tlačidlo vrátiť sa späť je funkčné,otvorí novú kartu ale vypíše : Súbor sa nenašiel prehliadač nedokáže nájsť súbor....

 
Odpovedať
22. marca 14:10
Avatar
Odpovedá na Ladislav Guldan
Ladislav Guldan:22. marca 14:52

Už je to ok (názov súboru.html)

 
Odpovedať
22. marca 14:52
Avatar
Milan Písecký:18. mája 15:38

Lze vložit obrázek, který není uložen v pracovním adresáři HTML, ale v nějakém jiném. Nebo třeba i na jiném disku v tom samém počítači, aby ho nebylo nutné přetahovat do pracovního HTML? Mám samostatný disk, kde dělám foto.
Díky

 
Odpovedať
18. mája 15:38
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovedá na Milan Písecký
Samuel Hél:7. júna 17:00

Ano, jen do atributu src zadej celou cestu i s jednotkou ale přidej tam i file. Např. disk D:

<img src="file://D:/foto/fotka1.jpg" alt="Fotka s přírodou" />
Editované 7. júna 17:03
 
Odpovedať
7. júna 17:00
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Michael Last
Člen
Avatar
Michael Last:28. júla 11:18

Nevím co se mi stalo ale mezery mezi řádky pod sebou mám velké a text pak vypadá prapodivně .Nemohl by mi někdo napsat jak to spravit ?Děkuji všem.

Odpovedať
28. júla 11:18
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
Lukáš Navrátil:30. júla 3:51

Děkuji :)

 
Odpovedať
30. júla 3:51
Avatar
Kateřina Vonkomerová:3. augusta 17:02

Já tam ten obrázek prostě nenahraju :D

 
Odpovedať
3. augusta 17:02
Avatar
Tomáš Gregorovič:7. augusta 10:06

Chtěl bych k článku doplnit, že také záleží na názvu obrázku.
Název obrázku by měl odpovídat tomu, co se daném obrázku nachází. Například: macbook-pro-2020.jpg
Většina webů má pojmenované obrázky nějak takto "imgpdgh45548.jpg", což je špatně, protože je to nepřehledné, jak pro provozovatele webu, tak i vyhledávače. Vyhledávačům to může pomoct v lepším rozpoznání obrázku.

Pokud by někoho zajímalo, jak optimalizovat obrázky pro vyhledávače, tak doporučuji si přečíst tento článek

 
Odpovedať
7. augusta 10:06
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!