Βασικά στοιχεία της HTML > Συνδέσεις

Σύνδεση με μια άλλη WEB σελίδα, Σύνδεση με μια άλλη ιστοσελίδα της τοποθεσίας σας, Σύνδεση σε μια εικόνα, Σύνδεση σε ένα αρχείο, Σύνδεση ηλεκτρονικού ταχυδρομείου ή τοποθεσίας ftp

Η γενική μορφή του κωδικού για σύνδεση είναι:

<A HREF=" ">...</A>
όπου τα ... μπορεί να είναι κείμενο ή εικόνα και μέσα στα εισαγωγικά βάζουμε την "δεύθυνση" της σύνδεσης που θέλετε να καταλήξει ο χρήστης αν κάνει με το ποντίκι του κλικ σε οποιοδήποτε σημείο του κειμένου ή της εικόνας που βρίσκεται ανάμεσα στον κωδικό. Υπάρχουν οι ακόλουθες περιπτώσεις σύνδεσης:

Σύνδεση με μια άλλη WEB σελίδα
Σ' αυτή τη περίπτωση η διεύθυνση που μπαίνει μέσα στα εισαγωγικά έχει τη γνωστή μορφή http://....... Για παράδειγμα, ο κώδικας:

Κάνοντας κλικ στο <A HREF="http://www.ntua.gr">ΕΜΠ</A> πηγαίνετε στην ιστοσελίδα του Πολυτεχνείου.
θα δώσει:

Κάνοντας κλικ στο ΕΜΠ πηγαίνετε στην ιστοσελίδα του Πολυτεχνείου.

Η νέα ιστοσελίδα εμφανίζεται στο παράθυρο της ιστοσελίδας απ' όπου ξεκινήσατε. Χρησιμοποιώντας το "κουμπί" Back του αναγνώστη ιστοσελίδων ξαναγυρίζετε στο σημείο που ξεκινήσατε. Μπορείτε όμως να ανοίξετε τη ίστοσελίδα της σύνδεσης σε νέο παράθυρο του αναγνώστη ιστοσελίδων. Απλά, στον κωδικό <A ....> προσθέστε το όρισμα TARGET="_BLANK". Οπότε ο κωδικός γίνεται:
<A HREF="http://www.ntua.gr" TARGET="_BLANK">ΕΜΠ</A> και το ΕΜΠ μας ανοίγει σε νέο παράθυρο την ιστοσελίδα του Πολυτεχνείου.

Σύνδεση με μια άλλη ιστοσελίδα της τοποθεσίας σας
Σ' αυτή την περίπτωση, στα εισαγωγικά της διεύθυνσης γράφετε το αρχείο που περιέχει την νέα ιστοσελίδα. Σε περίπτωση που δεν είναι στον ίδιο υποφάκελλο με την αρχική, πρέπει να γράψετε το πλήρες path. Μπορείτε επίσης να δημιουργήσετε μια σύνδεση που σας οδηγεί σε συγκεκριμένο σημείο μιας άλλης ιστοσελίδα. Για να το επιτύχετε αυτό θα πρέπει πρώτα να "μαρκάρετε" το σημείο αυτό. Το μαρκάρισμα γίνεται με τη χρήση του ορίσματος NAME=" " στον κωδικό <A>. Δηλαδή, το σημείο που θέλουμε να μεταφερθούμε με τη σύνδεση περικλείεται μεταξύ του <A ΝΑΜΕ=" "> και </A>. Τώρα είναι εύκολο να γίνει η σύνδεση γράφoντας:

<A HREF="ONOMA_ARXEIOY#TIMH_NAME">...</A>

Με τον τρόπο αυτό μπορείτε να κάνετε σύνδεση σε ένα σημείο της ιστοσελίδας που ήδη βρίσκεστε: απλά παραλείψτε το όνομα του αρχείου. Για παράδειγμα, έχοντας περικλείσει την επικεφαλίδα αυτής της ενότητας μεταξύ των <A NAME="TOP_TEST"> και </A>, μπορώ να μεταφερθώ εκεί γράφοντας τον κώδικα:

<A HREF="#TOP_TEST">ΑΡΧΗ ΣΕΛΙΔΑΣ</A> που θα μας δώσει:

ΑΡΧΗ ΣΕΛΙΔΑΣ

Σύνδεση σε μια εικόνα
Η τιμή του HREF=" " μπορεί να είναι και το όνομα αρχείου που περιέχει μια εικόνα. Τέτοιες περιπτώσεις είναι πολύ χρήσιμες αν έχετε σκοπό να συμπεριλάβετε στην ιστοσελίδα σας μεγάλες εικόνες. Μπορείτε στην ιστοσελίδα να εισάγετε την εικόνα σε σμίκρυνση (καλό θα είναι να είναι πραγματικά μικρότερης ανάλυσης για να μην αργεί το φόρτωμα της ιστοσελίδας), και κάνοντας κλικ πάνω της να πηγαίνετε στην μεγάλη εικόνα.
Κώδικας:

<a href="fig2.jpg" target="_blank"><img src="fig2.jpg" width="30"></a> Κάντε κλικ στην εικόνα για να τη δείτε σε φυσικό μέγεθος.

Εμφάνιση:

Κάντε κλικ στην εικόνα για να τη δείτε σε φυσικό μέγεθος.

Εξ' ορισμού, ο αναγνώστης ιστοσελίδων βάζει ένα μπλε περιθώριο γύρω από μια εικόνα που οδηγεί σε σύνδεση. Για να το αποφύγετε, μπορείτε να βάλετε το όρισμα BORDER="NO" στον κωδικό <IMG>:

Κάντε κλικ στην εικόνα για να τη δείτε σε φυσικό μέγεθος.

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

Η σύνδεση αυτή οδηγεί σε ένα αρχείο doc που ο αναγνώστης ιστοσελίδων θα το ανοίξει χρησιμοποιώντας το Word/Office. Η σύνδεση αυτή οδηγεί σε ένα αρχείο swf που ανοίγει με τη χρήση του FlashPlayer. Τέλος, η σύνδεση αυτή είναι ένα εκτελέσιμο αρχείο (exe) και ο αναγνώστης ιστοσελίδων θα σας προτρέψει να το αποθηκεύσετε.

Σύνδεση ηλεκτρονικού ταχυδρομείου η τοποθεσίας ftp
Η σύνδεση ηλεκτρονικού ταχυδρομείου επιτρέπει την εύκολη αποστολή ηλεκτρονικών μυνημάτων. Το όρισμα του κωδικού <A> είναι: HREF="mailto:...", όπου στη θέση των ... αντικαθιστώνται από την ηλεκτρονική διεύθυνση. Για παράδειγμα, γράφοντας τον κώδικα:

Αν κάνετε κλικ πάνω στο όνομα <a href="mailto:ntrac@central.ntua.gr"> Νίκος Τράκας</a>, ο αναγνώστης ιστοσελίδων θα σας ανοίξει το λογισμικό του για παοστολή email.

Εμφάνιση:

Αν κάνετε κλικ πάνω στο όνομα Νίκος Τράκας, ο αναγνώστης ιστοσελίδων θα σας ανοίξει το λογισμικό του για αποστολή email.

Τέλος, το ίδιο μπορείτε να κάνετε για διεύθυνση ftp, δηλαδή σε μια τοποθεσία όπου οι χρήστες μπορούν να προμηθευτούν χρήσιμα αρχεία και λογισμικά. Η σύνδεση γίνεται ακριβώς με τον ίδιο τρόπο όπως σε μια ηλεκτρονική διεύθυνση, αλλά με την ένδειξη: ftp://... αντί του http://...

'Aσκηση 4: Πληκτρολογήστε τον κώδικα HTML ώστε να εμφανίζεται στον αναγνώστη ιστοσελίδων το παρακάτω κείμενο:



Κάνοντας κλικ πάνω σε κάθε εικονίδιο θα πρέπει να ανοίγει νέο παράθυρο του αναγνώστη ιστοσελίδων και να εμφανίζεται η σχετική ιστοσελίδα. Για παράδειγμα, κτυπώντας στο εικονίδιο για την "Ισχυρή αλληλεπίδραση" θα πρέπει να ανοίγει η ιστοσελίδα:



Ανάλογες ιστοσελίδες αντιστοιχούν και στους άλλους συνδέσμους. Κάνοντας κλικ στο βελάκι δεξιά πρέπει να επανέρχεστε στην αρχική σελίδα.

Τα κείμενα που εμφανίζονται στη βασική σελίδα του παραδείγματος αυτού μπορείτε να τα βρείτε εδώ σε αρχείο txt, μαζί με τις δύο διευθύνσεις στο διαδίκτυο που αντιστοιχούν στους δύο συνδέσμους που εμφανίζονται στο κάτω μέρος της αρχικής ιστοσελίδας. Τις πέντε εικόνες που θα χρειαστείτε μπορείτε να τις "κατεβάσετε" από εδώ: εικόνα 1, εικόνα 2, εικόνα 3, εικόνα 4 και εικόνα 5. Το βελάκι της δεύτερης σελίδας μπορείτε να το "κατεβάσετε" από εδώ.

Εδώ μπορείτε να δείτε σε ξεχωριστό παράθυρο του αναγνώστη ιστοσελίδων το html αρχείo που παρήγαγε την παραπάνω εικόνα, οπότε να διαβάσετε και τον αντίστοιχο κώδικα.

Επόμενη ενότητα                           Προηγούμενη ενότητα