Σύνδεσμοι και δεσμοί

Μέχρι τώρα μάθαμε πως να διαμορφώνουμε κείμενο σε μια σελίδα, πως να προσθέτουμε σε αυτήν παραγράφους, χρώματα και λίστες, αλλά δεν μάθαμε την βασικότερη λειτουργία του υπερ-κειμένου, δηλαδή την διασύνδεση μεταξύ των σελίδων που χτίζουμε, αλλά και την διασύνδεση των σελίδων μας με οποιαδήποτε άλλη τοποθεσία στο Web. Ένας σύνδεσμος (link) χρησιμοποιείτε για να μεταφερθούμε σε ένα άλλο HTML έγγραφο μέσα στο web

Δημιουργούμε συνδέσμους με την ετικέτα <a> (a από την λέξη Anchor). Η πιο βασική ιδιότητα της ετικέτας είναι η href, η οποία περιέχει το url ενός αρχείου. Το κείμενο που γράφεται ανάμεσα στην ετικέτα αρχής και τέλους είναι το κείμενο που φαίνεται στην οθόνη και πατάει ο χρήστης επάνω σε αυτό για να μεταφερθεί στην σελίδα που δείχνει η ιδιότητα href. Η εμφάνιση ενός συνδέσμου στην οθόνη μας ποικίλει ανάλογα με τον browser που χρησιμοποιούμε. Οι περισσότεροι browsers, όπως οι Internet Explorer και Mozilla Firefox, εξ' ορισμού τους εμφανίζουν με Μπλε και υπογραμμισμένα γράμματα, ενώ τους συνδέσμους που έχουμε επισκεφτεί στο παρελθόν τους εμφανίζουν με Μοβ γράμματα. Βέβαια τα χρώματα αυτά μπορούμε να τα αλλάξουμε όπως είδαμε στην Ενότητα Χρώματα ή με την χρήση CSS.


- Τα μέρη ενός Συνδέσμου

Μπορούμε να δημιουργήσουμε σύνδεσμο στην σελίδα μας προς μια άλλη τοποθεσία στο Web, όπως η σελίδα του Yahoo.

Με την ιδιότητα target ορίζουμε σε ποιο παράθυρο ή μέρος του παραθύρου θα εμφανιστεί η σελίδα που ανοίγουμε πατώντας τον σύνδεσμο. Η ιδιότητα παίρνει τις εξής τιμές:

Τιμή	Σχόλιο
_self	ανοίγει την σελίδα στο ίδιο πλαίσιο
_blank	ανοίγει την σελίδα σε νέο παράθυρο. Αφού πατήσετε τον σύνδεσμο, ανοίγει ένα νέο παράθυρο του browser στο οποίο θα εμφανιστεί την σελίδα
_top	ανοίγει την σελίδα στο ίδιο παράθυρο αγνοώντας τα πλαίσια που τυχόν υπάρχουν
_parent	ανοίγει την σελίδα στο "πατρικό πλαίσιο "

Δοκίμασε το

Όταν "χτίζουμε" την δικιά μας ιστοσελίδα, χρησιμοποιούμε κυρίως συνδέσμους προς έγγραφα που βρίσκονται είτε στον ίδιο φάκελο με το HTML αρχείο που βρίσκεται το link είτε σε διαφορετικό φάκελο.



Στην παραπάνω εικόνα φαίνεται ο τρόπος που συνδέονται μεταξύ τους οι σελίδες του site WLearn.gr. Όλα τα HTML αρχεία που φαίνονται στην εικόνα είναι οργανωμένα σε φακέλους και βρίσκονται αποθηκευμένα στον τοπικό σκληρό δίσκο του Server που φιλοξενεί το site. Κάθε ένα από αυτά τα αρχεία περιέχει συνδέσμους προς άλλα αρχεία του site. Για παράδειγμα στην σελίδα index.html υπάρχει σύνδεσμος προς την σελίδα mathimata/index.html. Η σελίδα mathimata/index.html περιέχει έναν σύνδεσμο προς την σελίδα mathimata/css.html κ.ο.κ

Φανταστείτε τώρα ότι τα αρχεία του site που χτίζουμε περιέχονται στην παρακάτω δομή αρχείων:

Η δομή φακέλων και αρχείων Public Mysite index.html info.html Images logo.jpg leftarrow.jpg myphoto.jpg rightarrow.jpg Mathimata index.html Html basikesetiketes.html eidikoixarakthres.html eisagwgh.html hdomihtml.html Javascript eisagwgh.html functions.html loops.html sinthiki.html

Η δομή μόνο των φακέλων (ώστε να είναι κατανοητά τα επίπεδα των φακέλων) Public Mysite Images Mathimata Html Javascript Η παραπάνω δομή φακέλων περιέχει 4 επίπεδα: Επίπεδο 0 : Public Επίπεδο 1 : Mysite Επίπεδο 2 : Images, Mathimata Επίπεδο 3 : Html, Javascript

Αν τώρα θέλω να προσθέσω στο html αρχείο public/mysite/index.html ένα link προς το html αρχείο public/mysite/info.html, τότε το link αυτό θα το γράψω έτσι:
Αν πάλι θέλω να προσθέσω στο html αρχείο public/mysite/index.html ένα link προς το html αρχείο public/mysite/mathimata/html/eisagwgh.html, τότε το link αυτό θα το γράψω έτσι:
Στην περίπτωση αυτή το αρχείο που δείχνει ο link δεν βρίσκεται στον ίδιο φάκελο και έτσι αναφερόμαστε σε αυτό γράφοντας ολόκληρη την διαδρομή του αρχείου από το σημείο που βρίσκεται το έγγραφο public/mysite/index.html

Αν θέλω να προσθέσω στο html αρχείο public/mysite/mathimata/index.html ένα link προς την κεντρική σελίδα, δηλαδή την public/mysite/index.html, τότε το link αυτό θα το γράψω έτσι:
Στην περίπτωση αυτή το αρχείο που δείχνει ο link βρίσκεται σε φάκελο προηγούμενου επιπέδου.
Με τις δύο τελείες ( .. ) αναφερόμαστε στο αμέσως προηγούμενο επίπεδο φακέλων από τον φάκελο που βρίσκεται το αρχείο που περιέχει το link

Αν θέλω να προσθέσω στο html αρχείο public/mysite/mathimata/javascript/loops.html ένα link προς την κεντρική σελίδα, δηλαδή την public/mysite/index.html, τότε το link αυτό θα το γράψω έτσι:
Αν θέλω να προσθέσω στο html αρχείο public/mysite/mathimata/javascript/loops.html ένα link προς την σελίδα public/mysite/mathimata/html/eisagwgh.html, τότε το link αυτό θα το γράψω έτσι:

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

Οι δεσμοί δημιουργούνται χρησιμοποιώντας την ίδια ετικέτα που χρησιμοποιούν και οι σύνδεσμοι, δηλαδή την <a>, με την διαφορά αντί για την ιδιότητα HREF, χρησιμοποιούμε την ιδιότητα NAME με την οποία δίνουμε ένα όνομα στον δεσμό. Για παράδειγμα αν θέλαμε να δημιουργήσουμε έναν δεσμό με όνομα paragraph1 σε ένα σημείο της σελίδας μας, τότε θα γράφαμε:

Τώρα αν θέλουμε να προσθέσουμε στην ίδια σελίδα έναν σύνδεσμο (link) που θα μας οδηγεί στον δεσμό του εγγράφου που ονομάζεται paragraph1, τότε θα γράφαμε:


Έχουμε επίσης την δυνατότητα να μεταφερθούμε σε ένα συγκεκριμένο δεσμό μιας άλλης σελίδας. Έτσι αν θέλουμε να προσθέσουμε έναν σύνδεσμο στην σελίδα public/mysite/mathimata/javascript/loops.html προς τον δεσμό με όνομα paragraph1 της σελίδας public/mysite/index.html, τότε θα γράφαμε:
αρκεί βέβαια να υπάρχει ο αντίστοιχος Δεσμός, με όνομα paragraph1, στην σελίδα αυτή.

Δοκίμασε το