Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Οι υπερσύνδεσμοι ή απλά σύνδεσμοι (hyper-links) είναι ένα από τα πιο σημαντικά χαρακτηριστικά του υπερκειμένου, των ιστοσελίδων και του παγκόσμιου ιστού. Είναι σχεδόν απίθανο να εντοπίσουμε κάποια σελίδα στο www χωρίς link, που να μη συνδέεται δηλαδή με τουλάχιστον μια άλλη σελίδα. 

Η ετικέτα <a> (Anchor-Άγκυρα) είναι αυτή που δημιουργεί το σύνδεσμο με κάποιο άλλη σελίδα. Το url ή το relative path της σελίδας προορισμού μπαίνει ως τιμή στο attribute href (Hypertext REFerence) 

Παραδείγματα:

<a href="https://www.w3schools.com/tags/tag_a.asp">Εξωτερικό link: &lt;a&gt; tag στο w3schools.com </a>

Εξωτερικό link: <a> tag στο w3schools.com

<a href="index.html">Εσωτερικό link: Αρχική Σελίδα Μαθημάτων</a>

Εσωτερικό link: Αρχική Σελίδα Μαθημάτων

Όπως παρατηρείτε, το <a> element έχει περιεχόμενο, άρα και end tag. Ό,τι βρίσκεται μεταξύ των <a> και </a> γίνεται "ενεργό" (clickable) και θα μας οδηγήσει στο url που έχει οριστεί στο href.

Το περιεχόμενο στα παραδείγματα είναι απλό κείμενο, ωστόσο μπορούμε να χρησιμοποιήσουμε και εικόνες (<a...><img...></a>), περιοχές (<a...><div...> content </div></a>) και σχεδόν οποιοδήποτε element έχουμε αναφέρει ως τώρα.

Παραδείγματα:

<a href="bugs.html"> <img src="./images/bug.jpg"></a>

<ul>

    <a href="bugs.html"><li> Έντομα </li> </a>

</ul>

target attribute

Αν προσέξετε τα παραδείγματα εσωτερικού-εξωτερικού link θα διαπιστώσετε πως το μεν εξωτερικό link ανοίγει σε νέα καρτέλα ενώ το εσωτερικό στην ίδια. Οι σύνδεσμοι που μας οδηγούν σε ένα άλλο website από το δικό μας (εξωτερικοί), συνήθως θέλουμε να ανοίξουν σε νέα καρτέλα/παράθυρο, αφήνοντας ανοιχτή και τη σελίδα μας, για να μην απομακρύνουμε τον επισκέπτη από τον δικό μας ιστότοπο. 

Για να το πετύχουμε αυτό έχουμε το attribute target στο οποίο αν δώσουμε την τιμή "_blank" θα ανοίξει το link σε νέα καρτέλα. Αν δεν ορίσουμε το target ή αν του δώσουμε την τιμή "_self" θα ανοίξει στην καρτέλα που βρισκόμαστε. (προσοχή στην κάτω παύλα, είναι απαραίτητη!). 

Παράδειγμα:

<a href="url"> Link content </a> : Στην ίδια καρτέλα

<a href="url" target = "_blank"> Link content </a>: Σε νέα καρτέλα

Τα links μπορεί να μας οδηγήσουν και άλλο σημείο της ίδιας σελίδας όπως αυτό: 

Link to the top! 

Μελετήστε το id attribute στο w3schools