Webová stránka bez obrázků je jako kniha bez obrázků – může být dobrá, ale s obrázky je mnohem zábavnější! Pro vložení obrázku použijeme značku <img>. Je to samouzavírací značka.
Nejdůležitější jsou dva atributy:
Tento atribut říká prohlížeči, kde se obrázek nachází. Musíte sem dát "cestu" k souboru obrázku. Pokud je obrázek ve stejné složce jako váš HTML soubor, stačí jen název obrázku.
Příklad: máte obrázek slunce.jpg ve stejné složce jako index.html.
<img src="slunce.jpg" alt="Zlaté slunce svítící na obloze">
Důležité: Nejlepší je mít pro obrázky speciální složku, třeba images nebo obrazky. Pak cesta vypadá takto:
<img src="obrazky/kocicka.png" alt="Malá kočička hrající si s míčkem">
Tohle říká: "Jdi do složky obrazky a tam najdi soubor kocicka.png."
Tohle je VELMI DŮLEŽITÉ! Atribut alt obsahuje textový popis obrázku. Proč?
Pomocí atributů width (šířka) a height (výška) můžete nastavit velikost obrázku na stránce. Můžete zadat počet pixelů (např. width="300") nebo procenta (např. width="50%").
<img src="obrazky/dinosaur.jpg" alt="Roztomilý zelený dinosaurus" width="400">
<!-- Nastavíme jen šířku, výška se přizpůsobí sama, aby se obrázek nedeformoval! -->
<img src="obrazky/kvetina.png" alt="Červená květina" width="50%">
<!-- Obrázek zabere polovinu šířky stránky -->
Tip: Nejlepší je nastavit buď jen width, nebo jen height. Prohlížeč pak automaticky spočítá druhou hodnotu tak, aby se obrázek nedeformoval (aby se neroztáhl nebo nezmáčkl). Pokud nastavíte obě hodnoty a poměr stran nebude sedět, obrázek se může zdeformovat!
Odkazy jsou to, co dělá web webem! Umožňují nám skákat z jedné stránky na druhou, nebo i na jiné místo na té samé stránce. Pro odkazy používáme značku <a> (jako "anchor", neboli kotva).
Nejdůležitější atribut je href (Hypertext Reference - hypertextový odkaz). Sem napíšete adresu (URL), kam má odkaz vést.
<a href="https://www.youtube.com">Navštiv YouTube!</a>
Text mezi <a> a </a> je ten, na který se dá kliknout.
Když chcete odkázat na stránku, která není vaše (např. Google, YouTube, Wikipedie), musíte napsat celou adresu, včetně http:// nebo https://.
<p>Chceš se dozvědět více? zkuste <a href="https://cs.wikipedia.org/wiki/HTML">Wikipedii</a>.</p>
Pokud máte ve své složce víc HTML souborů (např. index.html a o_mne.html), můžete se na ně odkazovat jen názvem souboru.
<p>Přečti si více <a href="o_mne.html">o mně</a>!</p>
Pokud máte soubor o_mne.html ve složce stranky, bude cesta vypadat takto:
<a href="stranky/o_mne.html">Jdi na stránku O mně</a>
Někdy chcete, aby se kliknutím na odkaz stránka posunula na konkrétní místo. K tomu je potřeba udělat dvě věci:
<h2 id="obrazky">Naše Galerie Obrázků</h2>
<a href="#obrazky">Přejít na galerii obrázků</a>
Chcete, aby Vám lidé mohli poslat e-mail pouhým kliknutím? Použijte mailto: v atributu href.
<a href="mailto:[email protected]">Napište mi e-mail!</a>
Někdy je dobré, když se odkaz otevře v nové záložce prohlížeče, aby návštěvník neopustil vaši stránku. K tomu slouží atribut target s hodnotou _blank.
<a href="https://www.google.com" target="_blank">Hledat na Google (otevře se nová záložka)</a>
Pokud target nenastavíte, odkaz se otevře ve stejném okně (to je výchozí chování).
U odkazů i obrázků můžete použít atribut title. Když na odkaz nebo obrázek najedete myší, objeví se malé vyskakovací okénko s textem, který jste do title napsali. Je to jako malá nápověda.
<a href="stranka.html" title="Kliknutím se dozvíš více!">Více informací</a>
<img src="pes.jpg" alt="Hravý pes" title="Můj nejlepší kamarád!">
Úkol: Pokračujte ve svém souboru index.html.
<img>. Nezapomeňte na atributy src a alt. můžete zkusit nastavit i width nebo height.Uložte kód a zkontrolujte výsledek v prohlížeči!