HTML - Linkovi


Kreiranje HTML linkova

Linkovi ili hiperveza je link s jednog web izvora na drugi. Linkovi omogućavaju korisnicima da bez poteškoća prelaze sa jedne stranice na drugu, na bilo kojem pretraživaču bilo gdje u svijetu. Linkovi imaju dva kraja, nazvana sidra. Linkovi započinje sidrom izvora i upućuje na odredišno sidro, što može biti bilo koji web resurs, na primjer: slika, audio ili video snimak, PDF datoteka, HTML dokument ili element unutar samog dokumenta i tako dalje. Linkovi će se prema zadanoj putanji u većini pretraživača pojaviti na sledeći način:

  • Neviđeni link unvisited link je podvučena i plava.
  • Posjećeni link visited link je podvučena i ljubičasta.
  • Aktivni link active link je podvučena i crvena.


HTML sintaksa linka

Linkovi su određeni u HTML-u pomoću taga <a>. Poveznice ili hiperveze mogu biti riječ, grupa riječi ili slika..

<a href="url">Link</a>

Sve između početnog <a> i završnog taga </a> postaje dio linka koji korisnik vidi i može da klikne na njega u pretraživaču. Evo nekoliko primjera veza:

<a href="https://www.google.com/">Google Search</a>
<a href="https://www.ittutorijali.net/">IT TUTORIJALI</a>
<a href="images/kites.jpg">
    <img src="kites-thumb.jpg" alt="kites">
</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Creating Links in HTML</title>
</head>
<body>
    <p><a href="https://www.google.com/">Google Search</a></p>
    <p>
        <a href="images/kites.jpg">
            <img src="kites-thumb.jpg" alt="kites">
        </a>
    </p>
  <p><a href="https://www.ittutorijali.net/">IT TUTORIJALI</a></p>
</body>
</html>

Atribut href određuje cilj linka. Njegova vrijednost može biti apsolutni ili relativni URL. Apsolutni URL je URL koji uključuje svaki dio formata URL-a, poput protokola, naziva hosta i putanje dokumenta, npr.: https://www.google.com/, https://www.example.com /form.php, itd. Relativni URL-ovi stranice su: contact.html, images/smiley.png i tako dalje. Relativni URL nikada ne uključuje prefiks protokola http:// ili https://.



Postavljanje ciljeva za linkove

Ciljni atribut target govori pretraživaču gdje otvoriti povezani dokument. Postoje četiri definisana cilja, a svako ciljno ime započinje s znakom donja crta (_):

  • _blank - Otvara povezani dokument u novom prozoru ili kartici.
  • _parent - Otvara povezani dokument u roditeljskom prozoru.
  • _self - Otvara povezani dokument u istom prozoru ili kartici kao i izvorni dokument. Ovo je zadana postavka, zbog toga nije potrebno izričito navesti ovu vrijednost.
  • _top - Otvara povezani dokument u cijelom prozoru pretraživača.

Pogledajmo sljedeći primjer da biste shvatili kako funkcioniše:

<a href="o-nama.php" target="_top">O nama</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Postavljanje HTML Link-ova</title>
</head>
<body>
    <p><a href="o-nama.php" target="_top">O nama</a></p>
    <p><a href="https://www.google.com/" target="_blank">Google</a></p>
    <p>
    <a href="images/sky.jpg" target="_parent">
        <img src="sky-thumb.jpg" alt="Cloudy Sky">
    </a>
    </p>
</body>
</html>


Izrada sidra za obilježavanje

Takođe možete izraditi sidra za oznake kako biste omogućili korisnicima da preskoče na određeni dio web stranice. Oznake su posebno korisne ako imate jako dugu web stranicu. Stvaranje oznaka postupak je u dva koraka: prvo dodajte atribut id elementa u koji želite skočiti, a zatim upotrijebite vrijednost atributa id kojoj prethodi hash znak (#) kao vrijednost atributa href <a> oznake , kao što je prikazano u sljedećem primjeru:

<a href="#sectionA">Idi na određenu sekciju A</a>
<h2 id="sectionA">Sekcija A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Izrada sidra za obilježavanje u HTML</title>
    <style>
    h2 + p{
        line-height: 75px; /* povećati visinu između linija */
    }
    </style>
</head>
<body>
    <p><a href="#sectionA">Idi na sekciju A</a></p>
    <p><a href="#sectionB">Idi na sekciju B</a></p>
    <p><a href="#sectionC">Idi na sekciju C</a></p>

    <h2 id="sectionA">Sekcija A</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   </p>
    
    <h2 id="sectionB">Sekcija B</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </p>
    
    <h2 id="sectionC">Sekcija C</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </p>
</body>
</html>


Kreiranje linkova za download

Takođe možete stvoriti link za preuzimanje datoteka na potpuno isti način kao što postavljate tekstualne likove. Samo usmjerite odredišni URL na datoteku koju želite da bude dostupna za preuzimanje. U sljedećem primjeru stvorili smo link za preuzimanje ZIP, PDF i JPG datoteke.

<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Download link</title>
</head>
<body>
    <p><a href="/examples/downloads/test.zip">Download Zip file</a></p>
    <p><a href="/examples/downloads/masters.pdf">Download PDF file</a></p>
    <p><a href="/examples/downloads/sample.jpg">Download Image file</a></p>
</body>
</html>