Hypertextové odkazy (zkráceně odkazy) jsou hlavní podstatou webových stránek. Odkazem může být text, ale i obrázek, který po kliknutí zobrazí jinou HTML stránku. Odkazovat můžete i na libovolné soubory (dokumenty, obrázky, videa, zvuky, atd.), poté se však nezobrazí webová stránku, ale nabídne se možnost uložení či otevření daného souboru.

<A>

• párová značka pro vkládání hypertextových odkazů
• patří mezi řádkové elementy
• uvnitř značky <a> může být jakýkoliv jiný HTML element s výjimkou: jiného odkazu <a> formuláře <form> a tabulky <table>

HREF

• nejdůležitější a také povinný atribut definující cíl odkazu (URL)
• cílem může být jiný HTML soubor, jakýkoliv jiný soubor, webová adresa na jiném serveru

<a href="index.html">Odkaz na hlavní stránku</a>
<a href="http://www.seznam.cz">Odkaz na server Seznam.cz</a>
<a href="ukazka.zip">Stáhněte si tento soubor</a>

TARGET

• atribut určující, kde se má cíl otevřít
• má několik hodnot
  • _blank: otevře odkaz v novém okně či záložce (používá se při odkazování na jiný server)
  • _parent: otevře odkaz nadřazeném HTML prvku (používá se při tvorbě hlavního menu)

<a href="http://www.google.cz" target="_blank">Odkaz na hlavní stránku Googlu</a>

Odkaz pomocí obrázku

• samozřejmě lze místo textu vložit obrázek
• odkazem se poté stane celý obrázek

<a href="index.html"><img src="obrazek.jpg" alt="text"></a>

Úkol č. 1

• Ve složce WWW si vytvořte složku CV07.
• Do této složky si stáhněte a rozbalte soubor cv07.zip.
• Otevřete si rozbalený soubor cv07.txt v HTML editoru (např. PSPad).
• Převeďte si tento soubor do souboru mesta.html a uložte.
• Ze složky CV06 si zkopírujte soubor index.html a složku IMG.

Úkol č. 2

• Soubor index.html upravte podle následujícího postupu:
  • kapitolu o přírodních poměrech přesuňte do nového souboru a uložte jej pod názvem "priroda.html",
  • přesunutý text nahraďte následujícím:
    • nadpis 2. úrovně "Přírodní poměry",
    • odstavec s textem "Více o přírodních poměrech" a s odkazem na soubor "priroda.html",
  • kapitolu o obyvatelstvu přesuňte do nového souboru a uložte jej pod názvem "obyvatelstvo.html",
  • přesunutý text nahraďte následujícím:
    • nadpis 2. úrovně "Obyvatelstvo",
    • odstavec s textem "Více o obyvatelstvu" a s odkazem na soubor "obyvatelstvo.html",
  • kapitolu o administrativním členění přesuňte do nového souboru a uložte jej pod názvem "cleneni.html",
  • přesunutý text nahraďte následujícím:
    • nadpis 2. úrovně "Administrativní členění",
    • odstavec s textem "Více o administrativním členění" a s odkazem na soubor "cleneni.html",
  • v posledním odstavci se zdrojem vytvořte z URL adresy funkční odkaz, který se bude otevírat v novém okně či kartě,
• Zkontrolujte na případné chyby a uložte.

Úkol č. 3

• Soubory priroda.html, obyvatelstvo.html a cleneni.html upravte podle následujícího postupu:
  • upravte jednotlivé titulky stránek podle hlavního nadpisu, 
  • z původního nadpisu 2. úrovně vytvořte nadpis 1. úrovně,
  • z nadpisů 3. úrovně vytvořte nadpisy 2. úrovně,
  • za poslední odstavec vložte nový odstavec s textem: "Zpět na hlavní stránku", a vytvořte funkční odkaz na soubor index.html.
  • navíc v souboru obyvatelstvo.html přidejte za číslovaný seznam s největšími městy nový odstavec s textem: "Více o městech ČR",
  • z tohoto textu vytvořte funkční odkaz na soubor mesta.html.
• Zkontrolujte na případné chyby a uložte.

Úkol č. 4

• Soubor mesta.html upravte podle následujícího postupu:
  • upravte titulek stránky na "Města ČR"
  • z hlavního nadpisu vytvořte nadpis 1. úrovně,
  • z nadpisů měst vytvořte nadpisy 2. úrovně,
  • z ostatního textu vytvořte odstavce,
  • za nadpisy jednotlivých měst vložte příslušný obrázek ze složky IMG a obrázkům nastavte šířku 300 pixelů,
  • z URL adres uvedených ve zdrojích vytvořte funkční hypertextové odkazy, které se navíc budou otevírat v novém okně/kartě,
  • za poslední odstavec vložte nový odstavec s textem: "Zpět na stránku o obyvatelstvu", a vytvořte funkční odkaz na soubor obyvatelstvo.html,
  • za poslední odstavec vložte nový odstavec s textem: "Zpět na hlavní stránku", a vytvořte funkční odkaz na soubor index.html.
• Zkontrolujte na případné chyby a uložte.