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

Η ετικέτα <A> και η ιδιότητα HREF

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


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

Διασύνδεση μιας σελίδας με άλλες σελίδες στο Web

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

Προσθήκη link στην σελίδα
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.google.com">Google</a>

Η ιδιότητα target της ετικέτας <a>

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

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

Δοκίμασε το

Δημιουργία συνδέσμου προς άλλα δικά μας HTML έγγραφα του Site μας

Όταν "χτίζουμε" την δικιά μας ιστοσελίδα, χρησιμοποιούμε κυρίως συνδέσμους προς έγγραφα που βρίσκονται είτε στον ίδιο φάκελο με το 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 αυτό θα το γράψω έτσι:
<a href="/wlearn/info.html">Link προς το αρχείο info.html</a>

Αν πάλι θέλω να προσθέσω στο html αρχείο public/mysite/index.html ένα link προς το html αρχείο public/mysite/mathimata/html/eisagwgh.html, τότε το link αυτό θα το γράψω έτσι:
<a href="/wlearn/mathimata/html/eidagwgh.html">Link προς το αρχείο eisagwgh.html</a>

Στην περίπτωση αυτή το αρχείο που δείχνει ο link δεν βρίσκεται στον ίδιο φάκελο και έτσι αναφερόμαστε σε αυτό γράφοντας ολόκληρη την διαδρομή του αρχείου από το σημείο που βρίσκεται το έγγραφο public/mysite/index.html

Αν θέλω να προσθέσω στο html αρχείο public/mysite/mathimata/index.html ένα link προς την κεντρική σελίδα, δηλαδή την public/mysite/index.html, τότε το link αυτό θα το γράψω έτσι:
<a href="/wlearn/../index.html">Link προς την κεντρική σελίδα</a>

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

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

Αν θέλω να προσθέσω στο html αρχείο public/mysite/mathimata/javascript/loops.html ένα link προς την σελίδα public/mysite/mathimata/html/eisagwgh.html, τότε το link αυτό θα το γράψω έτσι:
<a href="/wlearn/../html/eisagwgh.html">Link προς την σελίδα html/eisagwgh.html</a>

Δημιουργία δεσμών

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

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


Τώρα αν θέλουμε να προσθέσουμε στην ίδια σελίδα έναν σύνδεσμο (link) που θα μας οδηγεί στον δεσμό του εγγράφου που ονομάζεται paragraph1, τότε θα γράφαμε:
<a href="http://localhost/#paragraph1">Πήγαινε στην πρώτη παράγραφο.</a>


Έχουμε επίσης την δυνατότητα να μεταφερθούμε σε ένα συγκεκριμένο δεσμό μιας άλλης σελίδας. Έτσι αν θέλουμε να προσθέσουμε έναν σύνδεσμο στην σελίδα public/mysite/mathimata/javascript/loops.html προς τον δεσμό με όνομα paragraph1 της σελίδας public/mysite/index.html, τότε θα γράφαμε:
<a href="/../../mathimata/index.html#paragraph1">Link προς τον δεσμό με όνομα paragraph1 του αρχείου index.html</a>

αρκεί βέβαια να υπάρχει ο αντίστοιχος Δεσμός, με όνομα paragraph1, στην σελίδα αυτή.

Δοκίμασε το

Σχετικά Θέματα

Πώς μπορώ να προσθέσω σύνδεσμο σε μια εικόνα ;
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.