4. Hypertextové odkazy

4. Hypertextové odkazy

Hypertextové odkazy umožňují rychlé zobrazování různých stránek pouhým kliknutím myší.

Odkaz se tvoří pomocí párového tagu <a> </a> s atributem href="" :

<a href="index.html">Hlavní stránka</a>

 

1) Mezi uvozovky atributu href="..." se píše adresa odkazu.
Tou může být:

         a) název souboru, který se nachází ve stejné složce jako zobrazená stránka
             př: <a href="nazev_stranky.html"> popis odkazu </a>

         b) cesta (název složky) a název souboru, který se nachází ve stejné složce jako zobrazená stránka
             př: <a href="nazev_slozky/nazev_stranky.html"> popis odkazu </a>

         c) celá internetová adresa stránky
             př: <a href="https://www.seznam.cz"> popis odkazu </a>
                    internetovou adresu stránky získáme po kliknutí do adresního řádku prohlížeče,
                    pak zkopírujeme Ctrl+C

 

2) Doprostřed párového tagu <a href="https://www.seznam.cz"> popis odkazu </a> se vloží popis odkazu, který je pak na webové stánce vidět jako klikací odkaz.

 

Zadání tagu, jeho atributu i odkazu musí být napsáno přesně, jinak nebude fungovat!!!

                <a href="přesný odkaz nebo název"> popis odkazu </a>

 

Popis odkazu musí být krátký a výstižný, aby návštěvník stránky snadno poznal, kam ho odkaz zavede.

Po najetí na hypertextový odkaz se automaticky odkaz zvýrazní a také se změní kurzor myši. (Tyto vlastnosti upravovat nebudeme).

Samostatný úkol

1) Vytvoř novou webovou stránku, ve které bude:

  • tvoje jméno
  • tvoje záliby
  • tvoje oblíbené stránky 
  • a tento odkaz (můžeš si ho zkopírovat):
      <a href="spoluzaci.html"> Moji spolužáci </a> 

 

2) Stránku ulož do složky:
   Žáci_S/8_třída/_HTML4
Svoji stránku pojmenuj přesně takto: 
   jmeno_prijmeni.html  

 

3) Na svojí stránce nastav pěknou barvu písma, zvýrazni nadpis, nastav barvu textů... - nějak ji "okrášli". (Nezapomeň, že nové odstavce vytvoříš pomocí <p> a </p>.)

 

Pokud jsi správně a přesně splnil všechny úkoly, po kliknutí na svůj odkaz Moji spolužáci se přepneš na stránku se seznamem svých spolužáků, kliknutím na své jméno se přepneš zpět na svou stránku.

Budeš moci podívat na stránky svých spolužáků, kteří také správně dokončili zadaný úkol.

 

Do svojí stránky si můžeš přidat odkazy na své kamarády ve třídě, například:

Moji kamarádi:
Lojza
Alfred
Izabela
Alma

 

Rozšíření: 

U hypertextového odkazu se dá nastavit, aby se otevřel v novém okně. Používá se to tehdy, když do své stránky vkládáme odkaz na cizí stránku. Většinou chceme, aby při přepnutí na cizí web zůstala současně v prohlížeči otevřená i naše stránka. Návštěvník naší stránky se tak může pohodlně na naši stránku vrátit i kdyby cizí stránku zavřel, "neztratí se mu z prohlížeče".

 

Pro otevření v novém okně se přidává atribut target="_blank"

Příklad:
<a href="https://www.google.cz" target="_blank"> odkaz na Google </a>

 

Ve svojí stránce nastav, aby se odkazy, které nevedou na spolužáky, otvíraly v novém okně.

ZPĚT