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

• 15 Μαΐου 2012
• by: Georgios
• in: Web Development

Συνδέσμους HTML μπορείτε να βρείτε σχεδόν σε κάθε HTML έγγραφο. Οι σύνδεσμοι είναι αυτοί που σας επιτρέπουν να συνδέετε έγγραφα μεταξύ τους με αποτέλεσμα όλα τα έγγραφα μαζί να είναι σε θέση να αποτελέσουν ένα Web Site. Τα στοιχεία συνδέσμων στην HTML είναι αυτά που επιτρέπουν στον χρήστη με ένα κλικ να μετακινηθούν σε άλλο έγγραφο ή σε άλλο σημείο στο ίδιο έγγραφο.

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

Όταν το ποντίκι περνάει πάνω από ένα σύνδεσμο, το βελάκι θα μετατραπεί σε χέρι.

Οι σύνδεσμοι στην HTML ορίζονται με την ετικέτα <a>, η οποία με τη σειρά της μπορεί να χρησιμοποιηθεί με δύο τρόπους.

Ο πρώτος είναι να δημιουργήσετε ένα σύνδεσμο προς μια άλλη ιστοσελίδα χρησιμοποιώντας την ιδιότητα href της ετικέτας.

Ο δεύτερος τρόπος είναι να δημιουργήσετε ένα “σελιδοδείκτη” μέσα σε ένα έγγραφο HTML, χρησιμοποιώντας την ιδιότητα name της ετικέτας.

Η σύνταξη ενός συνδέσμου με την ετικέτα της HTML a είναι απλά και έχει την ακόλουθη μορφή:

<a href=”url”>Κείμενο ή εικόνα συνδέσμου</a>

Η ιδιότητα href είναι αυτή που ορίζει το σημείο στο οποίο θα γίνει η μετάβαση μετά το κλικ.

Παράδειγμα
<a href=”http://www.stigmahost.com/”>Δείτε τη σελίδα της StigmaHost</a>

Δείτε το παράδειγμα ζωντανά

Βάση του παραπάνω παραδείγματος, όταν κάποιος κάνει κλικ στο κείμενο “Δείτε τη σελίδα της StigmaHost” θα πηγαίνει στην κεντρική σελίδα της StigmaHost.

Σημείωση: Ο σύνδεσμος μπορεί να μην είναι απαραίτητα κείμενο, αλλά να είναι κάποια εικόνα.

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

Η ετικέτα a έχει ακόμα μια ιδιότητα που ονομάζεται target και μπορείτε να τη χρησιμοποιήσετε για να αλλάξετε το χώρο στον οποίο θα ανοίξει μια σελίδα.

Για παράδειγμα, ο κώδικας που ακολουθεί να ανοίξει την κεντρική σελίδα της StigmaHost σε άλλο παράθυρο ή σε άλλη καρτέρα.

<a href=”http://www.stigmahost.com/” target=”_blank”>Δείτε τη σελίδα της StigmaHost</a>

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

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

Η ιδιότητα name στην ετικέτα a ορίζει το όνομα του συνδέσμου και για να δημιουργηθεί ένας σελιδοδείκτης μέσα σε ένα έγγραφο HTML.

Σημείωση: Στην έκδοση HTML 5 θα πρέπει να χρησιμοποιείτε την ιδιότητα id για να ορίσετε το όνομα ενός συνδέσμου. Επίσης ο ορισμός του ονόματος του συνδέσμου με την ιδιότητα id λειτουργεί και στην HTML 4 σε όλους τους μοντέρνους περιηγητές διαδικτύου.

Οι σελιδοδείκτες δεν εμφανίζονται μέσα στη σελίδα, αλλά είναι κρυφοί.

Παράδειγμα

Ένας επώνυμος σύνδεσμος μέσα σε ένα έγγραφο HTML.

<a name=”my_section”>Τμήμα της ιστοσελίδας μου</a>

Δημιουργία συνδέσμου προς το “ Τμήμα της ιστοσελίδας μου” μέσα στο ίδιο έγγραφο:

<a href=”my_section”>Μετάβαση στο τμήμα της ιστοσελίδας μου</a>

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

<a href=”http://www.my-web-site.gr/my-page.html#my_section”> Μετάβαση στο τμήμα της ιστοσελίδας μου</a>

Βασικές σημειώσεις

Να προσθέτετε πάντα μια τελική πλαγιοκάθετο στα URL σας τα οποία αναφέρονται σε φάκελο και όχι σε κάποια σελίδα. Αν για παράδειγμα θέλετε να συνδεθείτε στον στον φάκελο html μέσα από το έγγραφο σας με τον κώδικα href=”http://www.my-web-site.gr/html” τότε ο server σας θα πραγματοποιήσει δύο αιτήσεις για να απαντήσει. Αρχικά θα προσθέσει την πλαγιοκάθετο που ξεχάσατε εσείς και στη συνέχεια κάνει ξανά το αίτημα το οποίο μοιάζει έτσι href=”http://www.my-web-site.gr/html/”.

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

[COL size=”one_half”]« Μορφοποίηση εγγράφων HTML με CSS[/COL] [COL size=’one_half’ last=’last’]

[/COL]