Tutoriál

V tomto díle se podíváme na asi nejdůležitější součást internetu a to jsou odkazy. Bez nich bychom musely vždy do horní řádku prohlížeče zadat celou adresu určité stránky a to by bylo velmi zdlouhavé. Proto tu jsou odkazy, aby se mohlo několik stránek (třeba 10 stránek na doméně www.testovaci-stranky.cz) propojit a stát se pro uživatele mnohem přehlednější a přívětivejší.

Nejprve se naučíme klasický odkaz. Udělejte si dvě stránky, jedna bude hlavní a druhá bude nějaká postraní třeba se tam bude nacházet kontakt. Až oboje budete mít hotové tak do hlavní napište:

  ...
  <a href=”stranka2.html”> Odkaz na stranu 2</a>
  ...
  

Kde stranka2.html je adresa kde se požadovaná stránka nachází a kde je Odkaz na stranu 2 je text který bude jako odkaz a který bude vidět i v internetovém prohlížeči. Do druhé stránky napište to samé akorát tentokrát to bude odkaz na hlavní stranu. Výsledek by měl vypadat takto:

To však není vše, můžeme třeba do href napsat název a koncovku souboru a pak se uživateli stáhne soubor který jste do href napsali. Také můžete dát třeba odkaz na již existující adresu. Teď se ale podíváme na tvorbu odkazu který otevře emailového klienta a rovnou se tam zobrazí i adresa kterou napíšete také do href. Celé to vypadá asi takto:

  ...
  <a href=”mailto:jmeno@adresa.cz”> Napiš mi</a>
  ...
  

Samozřejmě že kde je jmeno@adresa.cz je název e-mailové adresy a kde je Napiš mi tak tam je text který bude jako odkaz a bude se zobrazovat uživateli na jeho internetovém prohlížeči. Můžeme také dát obrázek jako odkaz. Vše je vidět v následujícím kódu:

  ...
  <a href=”stranka.html”><img src=”obrazek.jpg”></a>
  ...
  

Kde stranka.html je adresa stránky na kterou chcete odkázat a kde obrázek.jpg je adresa obrázku na který chcete odkázat. Poslední možností je odkázat na jiné místo na stránce. Tato funkce se používá výhradně u dlouhých článků aby byly přehlednější. Kód vypadá následovně:

  <p><a href=”#kapitola1”>Kapitola 1</a></p>
  <p><a href=”#kapitola2”>Kapitola 2</a></p>
  ...
  <h1><a name=”kapitola1”>Kapitola 1</a></h1>
  <p>...
  

To je prozatím vše. Příště se koukneme na základní styly CSS.