Η ορισμός των αναφορών γίνεται στο HTML μέσω του στοιχείου a. Προτού σας δείξω πώς να το χρησιμοποιήσετε, μερικές γενικές συμβουλές σχετικά με τους υπερ-συνδέσμους. Σκεφτείτε απαραιτήτως καλούς κειμενούς αναφορών. Με μία απλή πίσω συνήθως δεν βοηθάτε κανέναν. (Γιατί εάν ένας επισκέπτης έρχεται από μια εξωτερική σελίδα, συνήθως δεν ξέρει τι εννοείται με το πίσω). Προσπαθήστε να επιλέξετε περιγραφικούς κειμενούς αναφορών.
Οι υπερ-σύνδεσμοι ακολουθούν πάντα την ίδια αρχή στο HTML.
<a href="videos.html">Τρέχοντα Βίντεο</a>
Στο στοιχείο a ανατίθεται το γνώρισμα href. Αυτό το href περιμένει ως τιμή τον στόχο της αναφοράς. Στο προηγούμενο παράδειγμα, υπήρχε αναφορά στο αρχείο videos.html. Αυτό βρίσκεται στον ίδιο φάκελο με το αρχείο HTML στο οποίο ορίστηκε ο υπερ-σύνδεσμος.
Στον ορισμό των υπερ-συνδέσμων ισχύουν κατά τα άλλα οι κανόνες που παρουσιάστηκαν και στο πλαίσιο της ενσωμάτωσης γραφικών.
Μπορείτε εξάλλου όχι μόνο να ορίσετε εσωτερικές συνδέσεις έργου. Επίσης, οι υπερ-συνδέσεις μπορούν να τεθούν σε εξωτερικά αρχεία και domains.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Το κείμενο που βρίσκεται μεταξύ των ανοίγων <a> και κλείνοντας </a> είναι τελικά το κείμενο της αναφοράς. Προεπιλεγμένα, αυτό το κείμενο εμφανίζεται υπογραμμισμένο από τους περιηγητές.
Καθορισμός παραθύρου στόχου
Όταν κάνετε κλικ σε έναν υπερ-σύνδεσμο, ο στόχος της αναφοράς ανοίγει στο τρέχον παράθυρο περιήγησης. Αυτό είναι συνήθως εντάξει. Μπορεί όμως να συμβεί να έχετε ορίσει μια αναφορά προς ένα εξωτερικό domain. Όταν ένας επισκέπτης κάνει κλικ σε αυτό το σύνδεσμο, θέλετε ο στόχος της αναφοράς να ανοίξει σε ένα νέο παράθυρο ή καρτέλα περιήγησης. Το πλεονέκτημα αυτής της προσέγγισης: Η ιστοσελίδα σας παραμένει ανοικτή στο παρασκήνιο.
Πρέπει όμως να μην ανοίγετε κάθε σύνδεσμο της σελίδας σας σε ένα εξωτερικό παράθυρο, καθώς οι επισκέπτες γρήγορα εκνευρίζονται από αυτό.
Μέσω του γνωρίσματος target του στοιχείου a μπορείτε να καθορίσετε το παράθυρο στόχο όπου θα ανοίγεται ο συγκεκριμένος σύνδεσμος. Το HTML προσφέρει αρχικά τρία προεπιλεγμένα τιμές για το target.
• _blank – Το στόχος της αναφοράς εμφανίζεται σε ένα νέο παράθυρο περιήγησης.
• _self – Ανοίγει τον στόχο της αναφοράς στο τρέχον παράθυρο περιήγησης.
• _parent – Εδώ μπορείτε να βγείτε από το frame. (Σημειώστε ότι τα frames στο HTML5 δεν υποστηρίζονται. Αντίθετα, δεν θα έπρεπε πλέον να χρησιμοποιείτε αυτή την τεχνική, καθώς υπάρχουν καλύτερες εναλλακτικές. Όποιος θέλει να εξοικειωθεί περισσότερο με τα frames, μπορεί να βρει πηγή πληροφοριών στην ιστοσελίδα http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Χρησιμοποιείται επίσης σε συνδυασμό με τα frames. Με αυτόν τον τρόπο μπορείτε να ανοίξετε τον στόχο της αναφοράς εκτός του πλαισίου.
Ένα παράδειγμα εφαρμογής του γνωρίσματος target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
Σε αυτήν την περίπτωση, το στόχος της αναφοράς http://www.psd-tutorials.de θα ανοίγεται σε ένα νέο παράθυρο/καρτέλα. Το ίδιο αποτέλεσμα θα είχατε αν χρησιμοποιούσατε έναν όνομα φαντασίας όπως halligalli αντί για τον εμπορικό όνομα _blank. Αλλά εάν χρησιμοποιήσετε το target, θα σας συνιστούσα να χρησιμοποιήσετε έναν από τους εμπορικά κατοχυρωμένους ονόματα.
Καθορισμός βάσης αναφοράς
Μπορείτε να ορίσετε μια βάση αναφοράς στην ενότητα head του αρχείου HTML. Μια τέτοια βάση αναφοράς εξασφαλίζει ότι όλοι οι στόχοι των αναφορών εμφανίζονται σε ένα συγκεκριμένο παράθυρο περιήγησης. Αυτό είναι φυσικά ιδιαίτερα ενδιαφέρον σε συνάρτηση με τα frames.
Πρακτικά, όμως, είναι χρήσιμο ακόμη και αν θέλετε για παράδειγμα να εμφανίζονται όλοι οι σύνδεσμοι με το _blank σε ένα νέο παράθυρο περιήγησης. Φανταστείτε έναν κατάλογο συνδέσμων. Αν θέλετε να ανοίγονται πάντα τα παράθυρα περιηγήσεως σε νέο παράθυρο, θα ήταν κάπως έτσι:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Έτσι, θα έπρεπε να αντιστοιχίσετε ένα γνώρισμα παραθύρου στόχου σε κάθε ορισμό a.
Όπως βλέπετε, αυτό δεν είναι ιδιαίτερα αποτελεσματικό. Ακόμη λιγότερο αποτελεσματικό θα είναι αν, για παράδειγμα, μερικούς μήνες αργότερα αποφασίσετε ότι δεν θέλετε να ανοίξετε τους στόχους των αναφορών σε ένα νέο παράθυρο. Τότε θα πρέπει να προσαρμόσετε τα γνωρίσμα
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Αυτό βελτιώνει σημαντικά την εργασία πληκτρολόγησης.
Ορισμός αγκυρώσεων
Όπως είδατε ήδη πώς να ορίζετε υπερσυνδέσμους προς άλλα αρχεία. Ωστόσο, μπορείτε επίσης να ορίζετε εσωτερικές αγκυρώσεις σε ένα αρχείο HTML. Στη συνέχεια, μπορείτε να τοποθετήσετε αναφορές σε αυτές τις αγκυρώσεις. Αυτό είναι χρήσιμο, για παράδειγμα, σε σελίδες μεγάλου μήκους. Έτσι, μπορείτε να ορίσετε ένα πίνακα περιεχομένων στην αρχή του εγγράφου, μέσω του οποίου οι επισκέπτες μπορούν να μεταβούν στα σημεία που τους ενδιαφέρουν, χωρίς να χρειάζεται να κάνουν κύλιση μέσω του παραθύρου του περιηγητή.
Οι αγκύρωσεις δημιουργούνται με το στοιχείο a. Ωστόσο, οι ορισμοί των αγκυρώσεων δεν λαμβάνουν το χαρακτηριστικό href, αλλά ανατίθεται μια ιδιότητα name.
<a name="seitenanfang">Περιεχόμενο</a> <a name="kapitel1">Περιεχόμενο Κεφαλαίου 1</a> <p>Ακολουθεί πολύ κείμενο.</p> <a name="kapitel2">Περιεχόμενο Κεφαλαίου 2</a> <p>Ακολουθεί πολύ κείμενο.</p>
Μπορείτε να επιλέξετε τους ονόματα των αγκυρώσεων ελεύθερα. Σας προτείνω όμως να τα επιλέξετε όσο το δυνατόν πιο σύντομα, να χρησιμοποιείτε μόνο πεζούς χαρακτήρες και να αποφεύγετε τα ειδικά σύμβολα.
Για να αναφερθείτε σε μια αγκύρωση, ορίζετε έναν κανονικό υπερσύνδεσμο, όπως έχει εμφανιστεί στην αρχή αυτού του εκπαιδευτικού μαθήματος.
<a href="#seitenanfang">Προς την κορυφή της σελίδας</a>
Στο χαρακτηριστικό href ανατίθεται ως τιμή το όνομα της αγκύρωσης. Κρίσιμο εδώ είναι ότι το όνομα της αγκύρωσης πρέπει να προηγείται από το σύμβολο "#"."
Μπορείτε επίσης να ορίσετε αναφορές σε αγκυρώσεις μεταξύ αρχείων. Στο προηγούμενο παράδειγμα υποθέτω ότι υπάρχει ένα αρχείο news.htm που βρίσκεται στον ίδιο φάκελο με το κύριο αρχείο HTML. Εντός του news.htm έχει οριστεί η αγκύρωση seitenanfang. Για να αναφέρεστε σε αυτό, πρέπει να προσθέσετε το σύμβολο "#" μετά το όνομα του στοχείου (news.htm). Έπειτα ακολουθεί το όνομα της αγκύρωσης.
<a href="news.htm#seitenanfang">Προς την κορυφή της σελίδας</a>
Με αυτόν τον τρόπο μπορείτε εύκολα να αναφέρεστε σε αγκυρώσεις σε οποιοδήποτε αρχείο.
