Οι υπερσύνδεσμοι (anchor links ή απλώς links) αποτελούν θεμελιώδες μέρος του ιστού. Είναι στοιχεία με δυνατότητα κλικ που επιτρέπουν στους χρήστες να πλοηγούνται μεταξύ διαφορετικών σελίδων στον ίδιο ιστότοπο ή να συνδέονται με άλλους ιστότοπους και διαδικτυακούς πόρους.
Στην HTML, μπορείτε εύκολα να δημιουργήσετε συνδέσμους χρησιμοποιώντας την ετικέτα <a>, η οποία σημαίνει “anchor”. Η ετικέτα <a> βασίζεται κυρίως στο χαρακτηριστικό href, το οποίο καθορίζει τον προορισμό του συνδέσμου. Αυτός ο προορισμός μπορεί να είναι μια απόλυτη διεύθυνση URL (όπως https://www.example.com/) ή μια σχετική διεύθυνση URL (όπως about.html εάν η σελίδα προορισμού βρίσκεται στον ίδιο κατάλογο με την τρέχουσα σελίδα). Για να προσθέσετε ένα ορατό, κλικάσιμο κείμενο συνδέσμου σε HTML, πρέπει να το τοποθετήσετε μεταξύ της ετικέτας ανοίγματος <a> και της ετικέτας κλεισίματος </a>. Αυτό το κείμενο είναι αυτό που εμφανίζεται στην ιστοσελίδα. Για παράδειγμα, ο ακόλουθος κώδικας θα δημιουργήσει έναν υπερσύνδεσμο με το κείμενο “Επισκεφθείτε τον ιστότοπό μας” που οδηγεί στη διεύθυνση URL “https://www.example.com”
Οι υπερσύνδεσμοι συνήθως υπογραμμίζονται και εμφανίζονται με διαφορετικό χρώμα από το περιβάλλον κείμενο, για να υποδεικνύουν στον χρήστη ότι μπορεί να γίνει κλικ σε αυτούς. Από προεπιλογή, τα προγράμματα περιήγησης ιστού διαμορφώνουν τους υπερσυνδέσμους ώστε να υποδεικνύουν την κατάστασή τους, βελτιώνοντας την πλοήγηση του χρήστη. Οι μη επισκεπτόμενοι σύνδεσμοι υπογραμμίζονται με μπλε χρώμα, σηματοδοτώντας νέες διαδρομές. Οι επισκεπτόμενοι σύνδεσμοι αλλάζουν σε υπογραμμισμένο μωβ, διαφοροποιώντας τους από τους νέους. Οι ενεργοί σύνδεσμοι, όταν κάνουν κλικ, γίνονται υπογραμμισμένοι με κόκκινο, παρέχοντας άμεση ανατροφοδότηση σχετικά με την αλληλεπίδραση. Αυτά τα τυπικά στυλ βοηθούν τους χρήστες να πλοηγούνται διαισθητικά στον ιστό.
Internal Links
Υπάρχουν δύο τύποι υπερσυνδέσμων: οι εσωτερικοί και οι εξωτερικοί. Οι εσωτερικοί σύνδεσμοι χρησιμοποιούνται για πλοήγηση εντός του ίδιου ιστότοπου ή ιστοσελίδας, ενώ οι εξωτερικοί σύνδεσμοι χρησιμοποιούνται για πλοήγηση σε άλλους ιστότοπους ή ιστοσελίδες. Για να δημιουργήσετε έναν εσωτερικό σύνδεσμο, μπορείτε να χρησιμοποιήσετε είτε μια απόλυτη είτε μια σχετική διεύθυνση URL για να καθορίσετε τη διεύθυνση URL της σελίδας ή της ενότητας του ίδιου ιστότοπου στην οποία θέλετε να συνδεθείτε. Για παράδειγμα: <a href=”https://example.com/page.html”>Σύνδεσμος προς Σελίδα</a> η πλήρης διεύθυνση της σελίδας (απόλυτη διεύθυνση URL). <a href=”/page.html”>Σύνδεσμος προς Σελίδα</a> η σχετική διεύθυνση URL που περιλαμβάνει μόνο τη διαδρομή προς τη σελίδα και δημιουργεί έναν σύνδεσμο προς το αρχείο page.html στον ίδιο κατάλογο με την τρέχουσα σελίδα.
Anchor Links
Μπορείτε επίσης να δημιουργήσετε συνδέσμους που οδηγούν σε συγκεκριμένες ενότητες μέσα σε μια ιστοσελίδα. Τέτοιοι σύνδεσμοι ονομάζονται μερικές φορές σύνδεσμοι αγκύρωσης ή σύνδεσμοι μετάβασης. Για να δημιουργήσετε έναν τέτοιο σύνδεσμο, θα χρειαστείτε το χαρακτηριστικό id και το σύμβολο. Δείτε πώς μπορείτε να το κάνετε: 1. Προσθέστε το χαρακτηριστικό id σε ένα στοιχείο HTML στη σελίδα στην οποία θέλετε να συνδεθείτε. Για παράδειγμα, εάν θέλετε να συνδεθείτε σε ένα στοιχείο <h2> με το περιεχόμενο “Ενότητα 1″, μπορείτε να κάνετε τα εξής: <h2 id=”section-1″>Ενότητα 1</h2> 2. Στη συνέχεια, δημιουργήστε έναν σύνδεσμο που οδηγεί σε αυτήν την άγκυρα προσθέτοντας το σύμβολο ακολουθούμενο από το id στο χαρακτηριστικό href μιας ετικέτας <a>, ως εξής: <a href=”#section-1″>Μετάβαση στην Ενότητα 1</a> Όταν ένας χρήστης κάνει κλικ σε αυτόν τον σύνδεσμο, θα μεταφερθεί στην ενότητα της σελίδας με το id=”section-1”. Είναι σημαντικό να σημειωθεί ότι η τιμή id πρέπει να είναι μοναδική μέσα στη σελίδα και είναι καλή πρακτική να χρησιμοποιείτε περιγραφικά ονόματα που υποδεικνύουν το περιεχόμενο της ενότητας.
External Links
Για να δημιουργήσετε έναν εξωτερικό σύνδεσμο, πρέπει να καθορίσετε την πλήρη διεύθυνση URL της σελίδας, του ιστότοπου ή του πόρου στον οποίο θέλετε να συνδεθείτε. Για παράδειγμα:
Είναι σημαντικό να σημειωθεί ότι επειδή οι εξωτερικοί σύνδεσμοι απομακρύνουν τους χρήστες από τον ιστότοπό σας, θα πρέπει να βεβαιωθείτε ότι ανοίγουν σε νέο παράθυρο ή καρτέλα χρησιμοποιώντας το χαρακτηριστικό target. Για παράδειγμα:
Το χαρακτηριστικό target=”blank” θα ανοίξει τη συνδεδεμένη σελίδα σε μια νέα καρτέλα ή παράθυρο, επιτρέποντας στους χρήστες να επιστρέψουν εύκολα στον ιστότοπό σας. Το χαρακτηριστικό target=”_self” θα ανοίξει τον σύνδεσμο στο ίδιο παράθυρο.
Είναι σημαντικό να σημειωθεί ότι οι εξωτερικοί σύνδεσμοι μπορεί να έχουν επιπτώσεις στην ασφάλεια του ιστότοπού σας. Θα πρέπει να είστε προσεκτικοί όταν συνδέεστε σε εξωτερικούς ιστότοπους και να βεβαιώνεστε ότι είναι αξιόπιστες πηγές. Επιπλέον, είναι καλή πρακτική να ενημερώνετε τους χρήστες σας όταν ένας σύνδεσμος είναι εξωτερικός, χρησιμοποιώντας ένα μικρό εικονίδιο ή μια ετικέτα κειμένου δίπλα στον σύνδεσμο.
