Υποενότητα 2.3: Σύνδεσμοι

Γενικά περί συνδέσμων

Οι σύνδεσμοι HTML είναι υπερσυνδέσεις. Αυτό σημαίνει ότι όταν κάνετε κλικ σε ένα σύνδεσμο, πηγαίνετε στον προορισμό που ορίζεται σε αυτόν.

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

Η ετικέτα HTML για συνδέσμους είναι  <a>. <a> σημαίνει  anchor (προσαρτούμε κάτι σε κάτι άλλο).

Εσωτερικά στην ετικέτα <a> έχουμε την href attribute. Αυτό το χαρακτηριστικό καθορίζει τον προορισμό του συνδέσμου μας και δεν είναι ορατό στην ιστοσελίδα.

Το ορατό τμήμα του συνδέσμου μας είναι το περιεχόμενο που τοποθετούμε ανάμεσα στις ετικέτες  <a> και </a>.

Ένα σημαντικό χαρακτηριστικό των συνδέσεων είναι ο χαρακτηριστικός στόχος (target attribute). Ο στόχος τοποθετείται μέσα στην <a> ετικέτα έναρξης και καθορίζει πού να ανοίξει ο σύνδεσμος. Υπάρχουν πολλές διαφορετικές τιμές για το χαρακτηριστικό στόχο που μπορείτε να δείτε  στη διέυθυνση w3schools. https://www.w3schools.com/html/html_links.asp

Εδώ θα αναφέρουμε μόνο την τιμή _blank value.Ο στόχος με αυτήν την τιμή ανοίγει το έγγραφο σε νέο παράθυρο ή καρτέλα.

<a href="https://yourDestibation.com" target="_blank">Go to this site</a>

Περισσότερες πληροφορίες: https://www.w3schools.com/html/html_links.asp

Σύνδεσμος προς μια ιστοσελίδα

Εξωτερικοί σύνδεσμοι
Η σύνταξη που χρησιμοποιείται μέσα στο χαρακτηριστικό href είναι διαφορετική για την εξωτερική και την εσωτερική διεύθυνση  url. Μια εξωτερική διεύθυνση url  είναι ένας διαφορετικός ιστότοπος. Σε αυτή την περίπτωση θα πρέπει να χρησιμοποιήσουμε μια απόλυτη διεύθυνση (αβσολθτε) url η οποία είναι μια πλήρης διεύθυνση web που αρχίζει με  https://www.

Παράδειγμα:

<a href="https://www.w3schools.com/ target="_blank"">Visit w3schools!</a>

Τοπικός σύνδεσμος

Μια εσωτερική διεύθυνση url, είναι ένας σύνδεσμος στον ίδιο ιστότοπο (π.χ. πλοήγηση-navigation).

Η σύνταξη  href για τοπικούς συνδέσμους είναι μια σχετική διεύθυνση (relative) url, μια διεύθυνση  url χωρίς https://www.

Παραδείγματα:

<a href = "anotherPage.html" target="_blank">Visit Another page</a> <!--link to a page-->

<a href = "imagesFiles/myphoto.png" target="_blank">Visit My photo</a> <!--link to an image-->

Εικόνα ως σύνδεσμος

Οι σύνδεσμοι μπορεί να μην είναι κείμενα. Είναι πολύ συνηθισμένο να χρησιμοποιούμε τις εικόνες ως συνδέσμους. Όπως έχουμε εξηγήσει, το ορατό μέρος των συνδέσεών μας τοποθετείται ανάμεσα στις ετικέτες <a> και </a> tags. Έτσι, η σύνταξη είναι:

<a href = "anotherPage.html" target="_blank">
     <img src = "imagesFiles/myphoto.png" alt = "This is a photo" title = "Click to visit the ....">
</a>

Σημείωση

Ίσως έχετε παρατηρήσει ότι χρησιμοποιούμεe href fγια συνδέσμους και src για media. Αυτά τα χαρακτηριστικά μπορεί να μοιάζουν παρόμοια, αλλά το πρόγραμμα περιήγησης τα αντιλαμβάνεται πολύ διαφορετικά.

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

Άσκηση

Άσκηση

1. Δημιουργήστε ένα νέο αρχείο  exersice02.3.html στο φάκελο "Exercises" με τον επεξεργαστή κώδικα.
2. Δημιουργήστε έναν σύνδεσμο για την τοποθεσία της NASA. Η διεύθυνση URL αυτού του ιστότοπου είναι "https://www.nasa.gov/"
3. ργήστε έναν τοπικό σύνδεσμο στο αρχείο "exersice02.2.html"
4. Δημιουργήστε έναν τοπικό σύνδεσμο στο αρχείο "myphoto.jpg". Έχουμε αυτό το αρχείο στον φάκελο των εικόνων 
5. Εισάγετε το αρχείο "myphoto.jpg" στη σελίδα σας και συνδέστε το με τη σελίδα "NASA image of the day". Η διεύθυνση URL αυτού του ιστότοπου είναι "https://www.nasa.gov/multimedia/imagegallery/iotd.html"
6. Θέλουμε να ανοίξουμε αυτούς τους συνδέσμους σε ένα νέο παράθυρο.

Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα: 

Λύση: