Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |

9e. Yπερσύνδεσμοι Γραφικών

Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα.

Πλήκτρο Υπερσυνδέσμου

Απο τα προηγούμενα μαθήματα, έχετε μάθει (ελπίζουμε) να δημιουργείτε υπερκείμενο, δηλαδή κείμενο που συνδέει ένα αρχείο με ένα άλλο με σχετικό θέμα. Μπορείτε να συμπεριλάβετε ακόμη και εικόνες (δες Μάθημα 8a) που να τις κάνετε να ενεργούν σαν υπερσύνδεσμοι. Αν θυμάστε, σε προηγούμενο μάθημα συνδέσαμε ένα τμήμα του κειμένου απο το Volcano Web, και συγκεκριμένα τη index.html σελίδα, με μια δεύτερη σελίδα, την msh.html. Στη συνέχεια θα προσθέσουμε στη δεύτερη σελίδα ένα πλήκτρο που όταν θα κάνει κάποιος κλικ θα επιστρέφει στην κεντρική σελίδα του Volcano Web.

Ο τρόπος για να γίνει κάτι τέτοιο είναι να βάλουμε τις HTML ετικέτες για την εισαγωγή εικόνων, μέσα στις ετικέτες που δημιουργούν υπερσυνδέσμους:

   <a href="fileX.html"> <img src="graphic.gif">
   Go to Document X</a>

Στη ιστοσελίδα σας, ο παραπάνω κώδικας θα εμφανίσει μια εικόνα και το κείμενο Go to Document X. Και τα δυο θα λειτουργούν ως υπερσύνδεσμοι. Κάνοντας κλικ είτε στο κείμενο είτε στην εικόνα, θα πηγαίνετε στο αρχείο fileX.html. Η εικόνα θα μπορούσε να είναι και απο μόνη της υπερσύνδεσμος. Συνήθως μια εικόνα-υπεσύνδεσμος περιβάλλεται απο ένα περιθώριο στο χρώμα που έχουν οι υπερσύνδεσμοι της σελίδας, έτσι ώστε να ξέρετε οτι είναι ενεργή.

ΣΗΜΕΙΩΣΗ: Πολλοί browsers μπορεί να αλλάξουν το χρώμα του υπερκειμένου και ορισμένες σελίδες εμποδίζουν την εμφάνιση του περιθωρίου γύρω απο τους συνδέσμους γραφικών. Γενικά, μπορείτε να αναγνωρίσετε τους υπερσύνδεσμους σε μια σελίδα απο την αλλαγή του κέρσορα σε χέρι όταν περνάει απο επάνω τους.

Θα δημιουργήσουμε ένα πλήκτρο υπερσυνδέσμου. Πρώτα χρειάζεται να αποκτήσετε ένα αντίγραφο μια εικόνας με ένα βέλος απο τη σελίδα Eικόνες για το μάθημα 9e.

Στη συνέχεια, προσθέστε την HTML για να κάνετε το πλήκτρο να δουλεύει:

1. Ανοίξτε το δεύτερο αρχείο, msh.html στον κειμενογράφο.
2. Στο τέλος, αλλάξτε την τελευταία γραμμή σε:

   <hr>
   <a href="index.html#usa"> <img src="../pictures/left.gif">
   Return to <i>Volcano Web</i></a>

3. Σώστε το HTML αρχείο.
4. Επιστρέψτε στον web browser, και επιλέξτε Open Local απο το μενού File και ανοίξτε το αρχείο msh.html.
5. Επιλέξτε Reload fαπο το μενού File για να δείτε τις αλλαγές.
6. Δοκιμάστε τον υπερσύνδεσμο, αν δουλεύει.

Δείγματα Εικόνων

Σας συνιστούμε να μη χρησιμοποιείτε μεγάλα αρχεία γραφικών στις σελίδες σας, γιατί αλλιώς οι αναγνώστες σας θα πρέπει να περιμένουν για αρκετά μεγάλο χρονικό διάστημα μέχρι να εμφανιστούν οι εικόνες. Ένας τρόπος για να αποφύγετε κάτι τέτοιο είναι να δημιουργήσετε αντίγραφα-μικρογραφίες των εικόνων σας, και να τα χρησιμοποιείσετε σαν δείγματα και υπερσυνδέσμους ταυτόχρονα, προς τις πραγματικές εικόνες. Έτσι ο χρήστης θα κατεβάζει τις μεγάλες εικόνες μόνο αν επιθυμεί να τις δει.

Πρώτα χρειάζεται να αποκτήσετε ένα αντίγραφο των εικόνων απο τη σελίδα Eικόνες για το μάθημα 9e.

Στη συνέχεια, δημιουργήστε τον υπεσύνδεσμο της εικόνας-δείγμα στην κύρια σελίδα:

1. Ανοίξτε το  αρχείο index.html,στον κειμενογράφο.
2. Κάτω απο τον τίτλο Long Valley γράψτε τα ακόλουθα:

     This field seismometer measures earthquakes associated
     with subsurface volcanic forces and may help to predict
     future events. It sits on a plateau known as the "Volcanic
     Tableland" formed by a major eruption  600,000 years ago.
     <p>
     <a href="../pictures/seismo.jpg">
       <img src="../pictures/stamp.gif" ALT="link to large image"
       WIDTH="62" HEIGHT="85">
       -- [full size image, 55k] --
     </a>
     <p>
     This seismometer measures earthquakes
     associated with subsurface volcanic forces.

   Η εικόνα stamp.gif λειτουργεί σαν υπερσύνδεσμος σε μια μεγαλύτερη εικόνα, το αρχείο seismo.jpg. Όταν ο χρήστης κάνει κλικ είτε στην εικόνα είτε στο κείμενο, ο web browser θα εμφανίσει τη μεγαλύτερη εικόνα σε μια άλλη σελίδα.

3. Σώστε τις αλλαγές και ανοίξτε τη σελίδα στον browser σας.

Ελέγξτε τις αλλαγές

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

Κείμενο Κείμενο Κείμενο Κείμενο Κείμενο Κείμενο

τότε αυτό συνήθως σημαίνει ή οτι η HTML δεν αντιστοιχεί στο αρχείο που ορίζει η ετικέτα <img>, ή οτι το αρχείο δεν είναι σε μορφή GIF ή JPEG.

Στη συνέχεια: 10. Προσχηματισμένο Κείμενο (Preformated)

Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |