Σύνδεσμοι του HTML

Το HTML χρησιμοποιεί υπερσύνδεσμους για να συνδέει έγγραφα σε άλλες τοποθεσίες στο διαδίκτυο.

Οι σύνδεσμοι μπορούν να βρεθούν σχεδόν σε όλες τις ιστοσελίδες. Κάνοντας κλικ σε αυτούς, μπορείτε να μεταβείτε από μια σελίδα σε άλλη.

Παράδειγμα

Δημιουργία υπερσυνδέσμων
Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε σύνδεσμους σε έγγραφα HTML.
Χρήση εικόνας ως σύνδεσμος
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε μια εικόνα ως σύνδεσμο.

(Περισσότερες παραδείγματα μπορούν να βρεθούν στην κορυφή της σελίδας.)

Υπερσύνδεσμοι HTML (σύνδεσμοι)

Οι υπερσύνδεσμοι μπορούν να είναι ένα γράμμα, μια λέξη ή μια ομάδα λέξεων, ή και μια εικόνα, και μπορείτε να κάνετε κλικ σε αυτά για να μεταβείτε σε νέο έγγραφο ή σε κάποια ενότητα του τρέχοντος εγγράφου.

Όταν μετακινήσετε τον δείκτη του ποντικιού σε έναν σύνδεσμο στην ιστοσελίδα, η ένδειξη θα αλλάξει σε ένα μικρό χέρι.

Χρησιμοποιούμε την ετικέτα <a> για να δημιουργούμε σύνδεσμους στο HTML.

Υπάρχουν δύο τρόποι χρήσης του σήματος <a>:

  1. Με τη χρήση της ιδιότητας href - Δημιουργία σύνδεσμου προς άλλο έγγραφο
  2. Με τη χρήση της ιδιότητας name - Δημιουργία σημαίας εντός έγγραφου

Επεκτείνουμε την ανάγνωση:Τι είναι το υπερtekst?

Γλώσσα σύνδεσμου HTML

Ο κώδικας των σύνδεσμων HTML είναι απλός. Είναι κάπως έτσι:

<a href="url">Κείμενο σύνδεσμου</a>

Η ιδιότητα href καθορίζει το στόχο του σύνδεσμου.

Το κείμενο μεταξύ των αρχικών και τελικών σημείων εμφανίζεται ως υπερσύνδεσμος.

Παράδειγμα

<a href="http://www.codew3c.com/">Επισκεφθείτε το CodeW3C.com</a>

Η παρακάτω γραμμή εμφανίζεται ως:Επισκεφθείτε το CodeW3C.com

Κάνοντας κλικ σε αυτόν τον υπερσύνδεσμο, ο χρήστης θα μεταφερθεί στην αρχική σελίδα του CodeW3C.com.

Συμβουλή:"Κείμενο σύνδεσμου" δεν χρειάζεται να είναι απαραίτητα κείμενο. Εικόνες ή άλλοι HTML στοιχεία μπορούν να γίνουν σύνδεσμοι.

HTML Σύνδεσμοι - ιδιότητα target

Με τη χρήση της ιδιότητας Target, μπορείτε να καθορίσετε πού θα εμφανίζεται το έγγραφο που συνδέεται.

Η παρακάτω γραμμή θα ανοίξει το έγγραφο σε νέο παράθυρο:

<a href="http://www.codew3c.com/" target="_blank">Επισκεφθείτε το CodeW3C.com!</a>

Δοκιμάστε το προσωπικά σας!

HTML Σύνδεσμοι - ιδιότητα name

Η ιδιότητα name καθορίζει το όνομα του σημείου (anchor).

Μπορείτε να δημιουργήσετε σημαίες χρησιμοποιώντας την ιδιότητα name σε σελίδες HTML.

Οι σημαίες δεν εμφανίζονται με καμία ειδική μέθοδο, είναι αόρατες για τον αναγνώστη.

Όταν χρησιμοποιούμε σημαίες (named anchors), μπορούμε να δημιουργήσουμε σύνδεσμους που οδηγούν απευθείας σε αυτή τη σημαία (π.χ. σε κάποιο μικρό τμήμα της σελίδας), έτσι ώστε ο χρήστης να μην χρειάζεται να γυρίζει συνεχώς τη σελίδα για να βρει την πληροφορία που χρειάζεται.

Γλώσσα σημαίας:

<a name="label">Σημείο (εμφανίζεται στη σελίδα)</a>

Συμβουλή:Το όνομα του σημείου μπορεί να είναι οποιοδήποτε θέλετε.

Συμβουλή:Μπορείτε να χρησιμοποιήσετε την ιδιότητα id αντί για την ιδιότητα name, η ονομασία του σημείου είναι εξίσου αποτελεσματική.

Παράδειγμα

Πρώτα απ' όλα, ονομάζουμε το σημείο στο HTML έγγραφο ( δημιουργούμε μια σημαία):

<a name="tips">Βασικές προειδοποιήσεις - Χρήσιμες συμβουλές</a>

Στη συνέχεια, δημιουργούμε σύνδεσμοι που δείχνουν προς αυτό το σημείο στον ίδιο έγγραφο:

<a href="#tips">Χρήσιμες συμβουλές</a>

Μπορείτε επίσης να δημιουργήσετε σύνδεσμοι που δείχνουν προς αυτό το σημείο σε άλλες σελίδες:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">有用的提示

">Χρήσιμες συμβουλές</a>

Στο παραπάνω κώδικα, προσθέτουμε το σύμβολο # και το όνομα του πυλώνα στο τέλος της URL, ώστε να μπορούμε να συνδέσουμε άμεσα στον πύλο tips.Καθαρός αποτέλεσμα:

Χρήσιμες συμβουλές

Βασικές προσεγγίσεις - Χρήσιμες συμβουλές:Παρατηρήσεις:

Συμβουλή:Οι ονομαστοί πύλων χρησιμοποιούνται συχνά για τη δημιουργία πινάκων περιεχομένου στην αρχή μεγάλων έγγραφων. Μπορείτε να δώσετε έναν ονομαστό πύλο σε κάθε κεφάλαιο και να τοποθετήσετε τις σύνδεσμοι που συνδέονται σε αυτούς στην επάνω περιοχή του έγγραφου. Αν συχνά επισκέπτεστε το Βικιπαίδεια, θα δείτε ότι σχεδόν κάθε λήμμα χρησιμοποιεί τέτοιο τρόπο πλοήγησης.

Συμβουλή:Αν ο περιηγητής δεν βρει το καθορισμένο όνομα πυλώνα, θα μεταφερθεί στην κορυφή του έγγραφου. Δεν θα συμβεί κανένα σφάλμα.

Περισσότερα παραδείγματα

Ανοίξτε σύνδεση σε νέο παράθυρο του προγράμματος περιήγησης
Αυτό το παράδειγμα δείχνει πώς να ανοίξετε μια σελίδα σε νέο παράθυρο του προγράμματος περιήγησης, ώστε οι επισκέπτες να μην εγκαταλείψουν το site σας.
Σύνδεση σε διαφορετικές τοποθεσίες της ίδιας σελίδας
Αυτό το παράδειγμα δείχνει πώς να μεταφερθείτε σε μια άλλη περιοχή του έγγραφου χρησιμοποιώντας σύνδεση.
Εξοδος από το πλαίσιο
Αυτό το παράδειγμα δείχνει πώς να βγείτε από το πλαίσιο, αν η σελίδα σας είναι κλειδωμένη μέσα σε ένα πλαίσιο.
Δημιουργία σύνδεσης email
Αυτό το παράδειγμα δείχνει πώς να συνδέσετε σε ένα email. (Αυτό το παράδειγμα λειτουργεί μόνο όταν το πρόγραμμα πελάτη email έχει εγκατασταθεί.)
Δημιουργία σύνδεσης email 2
Αυτό το παράδειγμα δείχνει πιο σύνθετη σύνδεση email.

Ετικέτα σύνδεσης HTML

Ετικέτα Περιγραφή
<a> Ορισμός πυλών.