Jak přidat obrázky a odkazy na web

Navazujeme na základy z 1. dílu. Obrázky a odkazy jsou dvě věci, bez kterých se skoro žádný web neobejde – a obojí zvládnete jedním řádkem.

Přidání obrázku

Obrázek vložíte značkou <img>. Je to výjimka – nemá zavírací značku. Má dva důležité atributy:

• src – cesta k souboru obrázku (odkud se má načíst),
• alt – textový popis obrázku (co na něm je).

<img src="kava.jpg" alt="Šálek čerstvé kávy">

Vytvoření odkazu

Odkaz (na jinou stránku nebo web) se dělá značkou <a>. Kam vede, určuje atribut href; mezi značky napíšete text, na který se klikne:

<a href="https://osteigl.cz">Navštivte můj web</a>

Odkazovat můžete na cizí web (celá adresa https://…), nebo na vlastní stránku ve stejné složce (stačí název, třeba href="kontakt.html").

Jednoduché menu z odkazů

Menu není nic jiného než několik odkazů vedle sebe, ideálně obalených ve značce <nav> (ta říká „tohle je navigace"):

<nav>
  <a href="index.html">Domů</a>
  <a href="sluzby.html">Služby</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

Zatím je to jen řada odkazů – ale to je přesně ono menu. Hezký vzhled (rozestupy, barvy, tlačítka) mu dodáte pomocí CSS z 2. dílu. Pro představu, s trochou CSS může stejné menu vypadat takhle:

Časté chyby

• Obrázek se nezobrazuje (rozbitá ikona). Nejčastěji špatná cesta v src – překlep v názvu, jiná složka, nebo špatná velikost písmen (Kava.jpg ≠ kava.jpg).
• Chybějící alt. Web bude fungovat, ale přijdete o přístupnost i o bod u vyhledávačů. Popisujte stručně, co na obrázku je.
• Zapomenuté uvozovky u href. Adresa musí být v uvozovkách: href="kontakt.html".
• Odkaz na cizí web bez https://. href="osteigl.cz" prohlížeč bere jako soubor u vás; celá adresa musí být href="https://osteigl.cz".

Co dál?

Umíte teď na web dostat text, obrázky i odkazy – to jsou stavební kameny každé stránky. Zkuste si je poskládat dohromady a vzhled dolaďte pomocí CSS z 2. dílu.