Σύνδεσμοι στην HTML
Οι σύνδεσμοι βρίσκονται σε σχεδόν όλες τις ιστοσελίδες. Οι σύνδεσμοι επιτρέπουν στους χρήστες να μεταβαίνουν από μια σελίδα στην άλλη με ένα κλικ.
Για να δημιουργήσετε ένα σύνδεσμο σε μια ιστοσελίδα, χρησιμοποιείτε το στοιχείο “a” (anchor) και το χαρακτηριστικό “href” (hypertext reference) για να καθορίσετε τον προορισμό του συνδέσμου.
Παράδειγμα:
<a href="http://www.example.com">Αυτός είναι ένας σύνδεσμος σε μια ιστοσελίδα</a>
Στο παραπάνω παράδειγμα, ορίζουμε ένα στοιχείο αγκίστρου με ένα χαρακτηριστικό href, που ορίζει το URL της ιστοσελίδας στην οποία οδηγεί ο σύνδεσμος. Όταν ο χρήστης κάνει κλικ στο σύνδεσμο, το πρόγραμμα περιήγησης ανοίγει τον προορισμό του συνδέσμου σε μια νέα καρτέλα ή παράθυρο περιήγησης.
Σύνδεσμοι HTML – Υπερσυνδέσεις (Hyperlinks)
Οι σύνδεσμοι HTML είναι υπερσυνδέσεις (hyperlinks).
Μπορείτε να κάνετε κλικ σε ένα σύνδεσμο και να μεταβείτε σε άλλο έγγραφο.
Όταν τοποθετείτε το ποντίκι σας πάνω από ένα σύνδεσμο, ο δείκτης του ποντικιού θα μετατραπεί σε ένα μικρό χέρι.
Παράδειγμα:
<a href="http://www.example.com">Αυτός είναι ένας σύνδεσμος σε μια ιστοσελίδα</a>
Στο παραπάνω παράδειγμα, έχουμε ένα στοιχείο αγκίστρου με ένα χαρακτηριστικό href, το οποίο καθορίζει το URL του συνδέσμου. Όταν κάνετε κλικ στο σύνδεσμο, θα μεταβείτε στο έγγραφο που καθορίζεται από το URL.
[adinserter block=”2″]
Σύνδεσμοι HTML – Το χαρακτηριστικό target
Από προεπιλογή, η συνδεδεμένη σελίδα θα εμφανιστεί στο ίδιο παράθυρο περιήγησης. Για να αλλάξετε αυτό, πρέπει να καθορίσετε έναν άλλο στόχο για τον σύνδεσμο.
Το χαρακτηριστικό target καθορίζει πού να ανοίξετε το συνδεδεμένο έγγραφο.
Το χαρακτηριστικό target μπορεί να έχει μία από τις ακόλουθες τιμές:
_self – Προεπιλεγμένο. Ανοίγει το έγγραφο στο ίδιο παράθυρο/καρτέλα όπως έγινε κλικ
_blank – Ανοίγει το έγγραφο σε ένα νέο παράθυρο ή καρτέλα
_parent – Ανοίγει το έγγραφο στο γονικό πλαίσιο
_top – Ανοίγει το έγγραφο στο πλήρες σώμα του παραθύρου
Παράδειγμα:
<a href="https://pliroforiki-edu.gr/" target="_blank">Αυτός είναι ένας σύνδεσμος σε μια ιστοσελίδα</a>
Στο παραπάνω παράδειγμα, έχουμε ένα στοιχείο αγκίστρου με ένα χαρακτηριστικό href, το οποίο καθορίζει το URL του συνδέσμου και το χαρακτηριστικό target, το οποίο καθορίζει ότι ο σύνδεσμος πρέπει να ανοίξει σε ένα νέο παράθυρο/
Απόλυτες και σχετικές διευθύνσεις URL
Και οι δύο παραπάνω παραδείγματα χρησιμοποιούν μια απόλυτη διεύθυνση URL (πλήρη διεύθυνση ιστού) στο χαρακτηριστικό href.
Μια τοπική σύνδεση (σύνδεση με μια σελίδα εντός του ίδιου ιστότοπου) καθορίζεται με μια σχετική διεύθυνση URL (χωρίς το μέρος “https://www”):
Παράδειγμα:
<a href="/contact">Επικοινωνήστε μαζί μας</a>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε μια σχετική διεύθυνση URL που αναφέρεται στη σελίδα επικοινωνίας του ιστότοπου. Η διεύθυνση URL δεν περιλαμβάνει το μέρος “https://www”, καθώς αναφέρεται στην τρέχουσα τοποθεσία του ιστότοπου.
[adinserter block=”3″]
Σύνδεσμοι HTML – Χρήση εικόνας ως συνδέσμου
Για να χρησιμοποιήσετε μια εικόνα ως σύνδεσμο, απλώς τοποθετήστε το ετικέτα <img> μέσα στην ετικέτα <a>:
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
</head>
<body>
<a href="https://pliroforiki-edu.gr/">
<img
src="https://pliroforiki-edu.gr/wp-content/uploads/2023/05/HTML.png"
alt="Εικόνα συνδέσμου"
/>
</a>
</body>
</html>
Στο παραπάνω παράδειγμα, η ετικέτα <a> περιβάλλει την ετικέτα <img>, καθώς θέλουμε να κάνουμε την εικόνα κλικαριστή. Το χαρακτηριστικό href καθορίζει το URL του συνδέσμου, ενώ το χαρακτηριστικό src καθορίζει τη διεύθυνση του αρχείου εικόνας. Το χαρακτηριστικό alt επίσης καθορίζεται για να παρέχει μια εναλλακτική περιγραφή της εικόνας σε περίπτωση που δεν φορτώσει.
Σύνδεσμοι HTML – Σύνδεση με διεύθυνση email
Χρησιμοποιήστε το mailto: μέσα στο χαρακτηριστικό href για να δημιουργήσετε ένα σύνδεσμο που ανοίγει το πρόγραμμα email του χρήστη (για να τους επιτρέψετε να στείλουν ένα νέο email):
Παράδειγμα:
<a href="mailto:info@example.com">Αποστολή email στην ομάδα υποστήριξης</a>
Στο παραπάνω παράδειγμα, το mailto:πρόθεμα προστίθεται στο χαρακτηριστικό href, καθορίζοντας τη διεύθυνση email του αποδέκτη. Όταν κάποιος κάνει κλικ στο σύνδεσμο, το πρόγραμμα email του χρήστη θα ανοίξει για να στείλει ένα νέο email στη διεύθυνση αυτή.
Κουμπί HTML ως σύνδεσμος
Για να χρησιμοποιήσετε ένα κουμπί HTML ως σύνδεσμος, πρέπει να προσθέσετε κάποιον κώδικα JavaScript.
Η JavaScript σας επιτρέπει να καθορίσετε τι συμβαίνει σε συγκεκριμένα γεγονότα, όπως η κλικ σε ένα κουμπί:
Παράδειγμα:
<button onclick="window.location.href='http://www.example.com'">Πήγαινε στην ιστοσελίδα</button>
Στο παραπάνω παράδειγμα, ο κώδικας JavaScript που εκτελείται όταν κάποιος κάνει κλικ στο κουμπί καθορίζει τη διεύθυνση URL προς την οποία θα πρέπει να κατευθύνεται ο χρήστης όταν κάνει κλικ στο κουμπί. Αυτό επιτυγχάνεται με την παραμετροποίηση του χαρακτηριστικού onclick του κουμπιού, χρησιμοποιώντας το window.location.href για να καθορίσετε τη διεύθυνση URL.
Τίτλοι συνδέσμων
Το χαρακτηριστικό title καθορίζει πρόσθετες πληροφορίες σχετικά με ένα στοιχείο. Η πληροφορία παρουσιάζεται συνήθως ως κείμενο εργαλείου (tooltip) όταν το ποντίκι κινείται πάνω από το στοιχείο.
Παράδειγμα:
<a href="http://www.example.com" title="Πήγαινε στην ιστοσελίδα του παραδείγματος">Επίσκεψη Ιστοσελίδας</a>
Στο παραπάνω παράδειγμα, ο τίτλος (title) καθορίζει το κείμενο του tooltip που θα εμφανιστεί όταν ο χρήστης κινήσει το ποντίκι πάνω από το σύνδεσμο. Αυτό παρέχει στο χρήστη περισσότερες πληροφορίες σχετικά με τον σύνδεσμο, και μπορεί να βοηθήσει στη διευκόλυνση της περιήγησης του χρήστη στην ιστοσελίδα.
Σύνδεσμοι HTML – Διαφορετικά χρώματα
Ένας σύνδεσμος HTML εμφανίζεται σε διαφορετικό χρώμα, ανάλογα με το εάν έχει επισκεφθεί, είναι ανεπισκέπτης ή είναι ενεργός.
Οι προκαθορισμένες τιμές των χρωμάτων είναι οι εξής:
- Ανεπισκέπτης σύνδεσμος (αρχικό χρώμα): μπλε
- Επισκεφθείς σύνδεσμος (χρώμα μετά τον επίσκεψη): μωβ
- Ενεργός σύνδεσμος (χρώμα όταν ο χρήστης κάνει κλικ): κόκκινο
Μπορείτε να ορίσετε τα χρώματα του συνδέσμου χρησιμοποιώντας τα ακόλουθα επιλέξιμα στυλ στοιχείων:
[adinserter block=”4″]
- :link – το χρώμα του ανεπισκέπτου συνδέσμου
- :visited – το χρώμα του συνδέσμου μετά τον επίσκεψη
- :active – το χρώμα του ενεργού συνδέσμου
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα</title>
<style>
a:link {
color: blue;
}
a:visited {
color: green;
}
a:active {
color: red;
}
</style>
</head>
<body>
<a href="https://pliroforiki-edu.gr/all-courses/">Ανεπισκέπτης σύνδεσμος</a>
<a href="https://www.google.com">Επισκεφθείς σύνδεσμος</a>
<a href="file:///C:/HTML/Example.html">Ενεργός σύνδεσμος</a>
</body>
</html>
Στο παραπάνω παράδειγμα, ορίζουμε τα χρώματα του συνδέσμου χρησιμοποιώντας τις εππιλέξιμες στυλ στοιχείων :link, :visited και :active, στον ενσωματωμένο στυλ πίνακα της σελίδας. Αυτό επηρεάζει τα χρώματα του συνδέσμου, ανάλογα με την κατάσταση του συνδέσμου (ανεπισκέπτης, επισκεφθείς, ενεργός).
Κουμπιά συνδέσμων
Ένας σύνδεσμος μπορεί να μορφοποιηθεί σαν κουμπί, χρησιμοποιώντας CSS:
Παράδειγμα:
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<a href="http://www.example.com" class="button">Κουμπί Συνδέσμου</a>
Στο παραπάνω παράδειγμα, δημιουργούμε ένα κουμπί συνδέσμου με τη χρήση CSS. Ορίζουμε το πλάτος, το ύψος, το χρώμα του κουμπιού και τον στυλ του κειμένου που εμφανίζεται στο κουμπί. Επίσης, ορίζουμε την κλάση “button” για τον σύνδεσμο, ώστε να εφαρμοστούν τα στυλ του κουμπιού στον σύνδεσμο.
Δημιουργία Σελιδοδεικτών
Οι σύνδεσμοι HTML μπορούν να χρησιμοποιηθούν για τη δημιουργία σελιδοδεικτών, ώστε οι αναγνώστες να μπορούν να μεταβούν σε συγκεκριμένα μέρη μιας ιστοσελίδας.
Για να δημιουργήσετε έναν σελιδοδείκτη, ορίστε έναν αναγνωριστικό (id) για το στοιχείο στο οποίο θέλετε να μεταβείτε. Έπειτα, προσθέστε έναν σύνδεσμο που περιέχει τον αναγνωριστικό στο αρχείο HTML. Όταν ο χρήστης κάνει κλικ στο σύνδεσμο, ο περιηγητής θα μεταβεί αυτόματα στο αναγνωριστικό που ορίσατε.
Παράδειγμα:
<a href="#section2">Μετάβαση στο τμήμα 2</a> <h2 id="section2">Αυτό είναι το τμήμα 2</h2>
Στο παραπάνω παράδειγμα, δημιουργούμε έναν σύνδεσμο που ονομάζεται “Μετάβαση στο τμήμα 2”. Όταν ο χρήστης κάνει κλικ στο σύνδεσμο, θα μεταβεί αυτόματα στο αναγνωριστικό με την τιμή “section2”. Το αναγνωριστικό είναι ένας μοναδικός αναγνωριστικός κωδικός για ένα στοιχείο της ιστοσελίδας. Στο στοιχείο που έχει το αναγνωριστικό ορίζεται χρησιμοποιώντας την ετικέτα h2, και στο αναγνωριστικό του προσθέτουμε την τιμή “section2”. Επομένως, όταν ο χρήστης κάνει κλικ στο σύνδεσμο, θα μεταβεί αυτόματα στην ετικέτα h2 που έχει το αναγνωριστικό “section2”.
[adinserter block=”5″]
Οι σελιδοδείκτες μπορούν να χρησιμοποιηθούν για να διευκολύνουν την πλοήγηση του χρήστη στην ιστοσελίδα και να βελτιώσουν την εμπειρία τους.
Ένα αναλυτικό παράδειγμα για τη δημιουργία σελιδοδεικτών είναι το παρακάτω:
<!DOCTYPE html>
<html>
<head>
<title>Παράδειγμα Σελιδοδεικτών</title>
</head>
<body>
<h1>Κεντρική Σελίδα</h1>
<p>Αυτή είναι μια κεντρική σελίδα με πολλούς συνδέσμους προς άλλες σελίδες.</p>
<ul>
<li><a href="#section1">Σελίδα 1</a></li>
<li><a href="#section2">Σελίδα 2</a></li>
<li><a href="#section3">Σελίδα 3</a></li>
</ul>
<h2 id="section1">Σελίδα 1</h2>
<p>Αυτή είναι η πρώτη σελίδα.</p>
<h2 id="section2">Σελίδα 2</h2>
<p>Αυτή είναι η δεύτερη σελίδα.</p>
<h2 id="section3">Σελίδα 3</h2>
<p>Αυτή είναι η τρίτη σελίδα.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε το αναγνωριστικό (id) για κάθε στοιχείο που θέλουμε να ορίσουμε ως σελιδοδείκτη. Έπειτα, δημιουργούμε μια λίστα με συνδέσμους προς τα πάνω στη σελίδα, οι οποίοι συνδέονται με το αντίστοιχο αναγνωριστικό. Όταν ο χρήστης κάνει κλικ στο σύνδεσμο, θα μεταβεί αυτόματα στο αναγνωριστικό που ορίσατε.
Παρατηρήστε ότι στο παραπάνω παράδειγμα, οι συνδέσμοι που οδηγούν στους σελιδοδείκτες έχουν μια τιμή href που ξεκινά με τον χαρακτήρα #, ακολουθούμενη από το αναγνωριστικό του στοιχείου που θέλουμε να μεταβούμε. Παρακάτω ακολουθεί μια λίστα με τους συνδέσμους στο παραπάνω παράδειγμα και το αντίστοιχο αναγνωριστικό που συνδέεται με αυτούς:
- “Σελίδα 1” -> #section1
- “Σελίδα 2” -> #section2
- “Σελίδα 3” -> #section3
Όταν ο χρήστης κάνει κλικ στον σύνδεσμο “Σελίδα 1”, ο περιηγητής θα μεταβεί αυτόματα στην ετικέτα h2 με το αναγνωριστικό “section1” στο κάτω μέρος της σελίδας. Ομοίως, όταν ο χρήστης κάνει κλικ στον σύνδεσμο “Σελίδα 2”, ο περιηγητής θα μεταβεί στην ετικέτα h2 με το αναγνωριστικό “section2”, και όταν κάνει κλικ στον σύνδεσμο “Σελίδα 3”, θα μεταβεί στην ετικέτα h2 με το αναγνωριστικό “section3”.
Η δημιουργία σελιδοδεικτών μπορεί να βοηθήσει τους χρήστες να μεταβαίνουν γρήγορα στα σημαντικά μέρη μιας ιστοσελίδας και να βελτιώσει την εμπειρία τους στην ιστοσελίδα. Επιπλέον, οι σελιδοδείκτες μπορούν να χρησιμοποιηθούν για να βοηθήσουν τους ρομπότ των μηχανών αναζήτησης να κατανοήσουν το περιεχόμενο μιας ιστοσελίδας και να βελτιώσουν τη θέση της στα αποτελέσματα αναζήτησης.
Επίσης, η χρήση των σελιδοδεικτών είναι ιδιαίτερα χρήσιμη σε μακροσκελείς ιστοσελίδες, όπου οι χρήστες μπορεί να χρειαστεί να μεταβούν γρήγορα σε μια συγκεκριμένη ενότητα της σελίδας χωρίς να χρειαστεί να κάνουν scroll όλο το περιεχόμενο της σελίδας.