Odkazy na zdroje informací, seznamy a obrázky

  • 5 min

Slovo "hypertext" znamená, že na webové stránce můžete zobrazit více než jen text. HTML nabízí možnost vytvářet odkazy na další prostředky a přidávat obrázky na stránku.

Hypertextové odkazy (nebo jenom odkazy) umožňují uživateli přejít na jiné věci. Může to být jiná stránka na vašem webu, úplně samostatný web nebo dokonce e-mailová adresa. Jedním z hlavních cílů HTML bylo umožnit přidání těchto "ukazatelů" na stránku pro snadný přístup. To se provádí prostřednictvím odkazů.

Značka použitá k vytvoření odkazu je a, což je zkratka pro kotvu. Obsah mezi otevřenou a zavřenou značkou a se stane hypertextem, který uživateli umožní přístup k prostředku.

Odkazovaný prostředek je označen pomocí atributu označovaného jako href (nebo hypertextový odkaz). Atributy se přidají do počáteční značky a obvykle se jedná o název spárovaný s hodnotou (označovanou jako páry klíč-hodnota) s hodnotou obsaženou v uvozovkách.

<a href="some url">clickable text</a>

Páry klíč-hodnota se používají ve formulářích. Pokud vyplníte formulář, můžete být požádáni o své křestní jméno a příjmení samostatně. Formulář má popisek Křestní jméno a prázdné místo a další jmenovku Příjmení a prázdné místo. Popisky jsou jako klíče v atributech HTML a cokoli zadáte do prázdného místa, je hodnota . V atributech HTML jsou klíč a hodnota spojeny znakem rovná se, aby bylo zřejmé, že patří k sobě.

Indikátory zdrojů

Existuje mnoho typů prostředků, na které může odkaz odkazovat. Odkazy často odkazují na jiné webové stránky nebo weby. Odkaz ale může také odkazovat na e-mailovou adresu, soubor (třeba dokument PDF), video nebo obrázek.

Pokud chcete vytvořit odkaz na externí web, použijte úplnou adresu webu. Pokud například chcete vytvořit odkaz na web dokumentace Microsoftu, můžete použít:

<a href="/">Microsoft Technical Documentation</a>

Odkaz na e-mailovou adresu je možný. Tento typ odkazu automaticky otevře e-mailový klient uživatele a vyplní pole To s adresou uvedenou za direktivou mailto: .

<a href="mailto:someone@example.com">Email us!</a>

Pokud do stránky HTML, kterou vytváříte, vložíte odkaz, všimnete si, že text mezi otevírací a uzavírací značkou zmodrá. Všimněte si také, že adresa je skrytá. Nakonec si všimnete, že slovo je teď možné vybrat. To znamená, že vyberete slovo, které se má přesunout do prostředku.

Text, který se zobrazí jako odkaz, se označuje jako text odkazu. Použití dobrého textu odkazu je klíčem k zajištění přístupnosti stránky všem uživatelům. Fráze jako "klikněte sem" jsou rušivé pro čtečky obrazovky a další nástroje, které se nepoužívají k navigaci na webu. Osvědčeným postupem je vždy používat text odkazu, který stručně popisuje odkazovaný prostředek. Další informace o zajištění přístupnosti najdete v modulu Accessibility Learn.

Obrázky

Značka img slouží k zobrazení obrázků na stránce. Na rozdíl od většiny ostatních prvků img nemá žádnou koncovou značku. Atribut src slouží k nasměrování na umístění obrázku, který se má na stránce zobrazit, a alt popisuje obsah obrázku pro věci, jako jsou vyhledávací weby a čtečky obrazovky.

Důležité

I když height a width atributy lze použít k určení výšky a šířky zobrazení obrázku, nedají se změnit velikost samotného souboru obrázku. Osvědčeným postupem je nastavit soubor obrázku jako rozměry, které použijete na stránce.

<img src="headshot.png" alt="Picture of an employee.">

Vytváření seznamů

Často budete muset zobrazit seznam informací na stránce. Při vytváření životopisu chcete zobrazit seznam předchozích rolí nebo kvalifikací. HTML poskytuje dva různé typy seznamů, seřazené a neuspořádané.

Pokud chcete vytvořit seznam, nejprve se rozhodnete, který typ seznamu chcete vytvořit. Seřazený seznam je seřazený s čísly (výchozí) nebo písmeny a používá ol se pro seřazený seznam. Neuspořádaný seznam používá odrážky a je identifikován jako ul pro . Položky jsou označeny li pro položku seznamu .

Neuspořádaný seznam

Následující vytvoří neuspořádaný seznam:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Vygenerovaný seznam:

  • První položka
  • Druhá položka
  • Třetí položka

Seřazený seznam

Následující seznam vytvoří seřazený seznam:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Vygenerovaný seznam:

  1. První položka
  2. Druhá položka
  3. Třetí položka