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

9d. Yπερσύνδεσμοι Σε Τμήματα της Ιδιας Σελίδας

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

Named Anchor

Named anchor είναι μια αόρατη αναφορά σε ένα συγκεκριμένο τμήμα του HTML αρχείου. Μπορεί να χρησιμοποιηθεί για να συνδέσει μια ενότητα της σελίδας με μια άλλη, ιδιαίτερα αν είναι μεγάλη. Για παράδειγμα, στη σελίδα που βλέπετε τώρα, θα μπορούσαμε να φτιάξουμε ένα κρυφό διακριτικό με το όνομα "check" που θα αντιστοιχεί στην ενότητα "Ελέγξτε τη δουλειά σας", που βρίσκεται πιο κάτω. Στη συνέχεια δημιουργώντας σε κάποιο σημείο έναν σύνδεσμο anchor μπορούμε να μεταβούμε απο το σημείο αυτό, στην ενότητα που προαναφέραμε.

Ας το δούμε αυτό με κάποιο παράδειγμα, που μπορείτε να δοκιμάσετε. Πηγαίνετε στη ενότητα "Ελέγξτε τη δουλειά σας". Όταν μεταβείτε στο σημείο αυτό, ψάξτε για το σύνδεσμο που θα σας επιστρέψει πίσω.

Η HTML που δημιουργεί ένα named anchor είναι:

     <a name="NAME">Κείμενο που σε συνδέει με</a>

ή για το σύνδεσμο που δοκιμάσατε πιο πάνω:

    <a name="check">"Ελέγξτε τη δουλειά σας"</a>

Σημειώστε οτι αυτό το είδος συνδέσμων διαφέρει ελαφρά απο τους συνδέσμους <a href=... που είδαμε στο μάθημα 9a.

Προσθέτοντας Named Anchors στο Volcano Web

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

Το πρώτο βήμα είναι να δημιουργήσουμε ένα named anchor για κάθε εναν απο τους τίτλους κάθε ενότητας της σελίδας του Volcano Web.

  1. Ανοίξτε το αρχείο index.html στον κειμενογράφο σας.
  2. Βρείτε τον τίτλο Introduction, και αλλάξτε τον απο:

    <h2>Introduction</h2>

    σε

    <h2><a name="intro">Introduction</a></h2>

    ΣΗΜΕΙΩΣΗ: Μόλις έχετε σημειώσει τη γραμμή που περιέχει τον τίτλο "Introduction", με ένα αόρατο διακριτικό, το named anchor "intro".

  3. Με παρόμοιο τρόπο, αλλάξτε όλους τους άλλους τίτλους των ενοτήτων της σελίδας (δηλαδή, όσα περιέχονται στις ετικέτες <h2>):

      <h2><A NAME="term">Volcano Terminology</A></h2>
     
      <h2><A NAME="usa">Volcanic Places in the USA</A></h2>
     
      <h2><A NAME="mars">Volcanic Places on Mars</A></h2>
     
      <h2><A NAME="project">Research Project</A></h2>

  4. Αν ανοίξετε στο σημείο αυτό τη σελίδα στο browser, δε θα δείτε καμια εμφανή διαφορά. Οι προσθήκες που μόλις κάναμε δεν είναι ορατές στο χρήστη.

Προσθέτοντας Συνδέσμους Προς Named Anchor Στην Ιδια Σελίδα

Θα δημιουργήσουμε τον πίνακα με τα περιεχόμενα στην αρχή της σελίδας. Για το σκοπό αυτό θα χρησιμοποιήσουμε μια μη αριθμημένη λίστα (για περισσότερα σχετικά με τις λίστες δες μάθημα 7):

  1. Αν δεν το έχετε ήδη ανοιχτό, ανοίξτε το αρχείο index.html στον κειμενογράφο σας.
  2. Κάτω απο την πρώτη γραμμή, και κάτω απο τον τίτλο Volcano Web γράψτε τα ακόλουθα:

    <hr>
    <B>In this Lesson...</B>
    <ul><i>
    <li>Introduction
    <li>Volcano Terminology
    <li>Volcanic Places in the USA
    <li>Volcanic Places on Mars
    <li>Research Project</i>
    </ul>

  3. Σώστε και ανοίξτε το HTML αρχείο στον browser.

Τελειώνοντας, θέλουμε να κάνουμε το κάθε στοιχείο της λίστας υπερσύνδεσμο προς την αντίστοιχη ενότητα της σελίδας. Για να το κάνουμε αυτό θα χρησιμοποιήσουμε μια παραλλαγή της βασικής ετικέτας που είδαμε στο μάθημα 9a. Αντί να συνδέσουμε τη σελίδα με κάποιο άλλο αρχείο, συνδέουμε κάθε σύνδεσμο με ένα named anchor (τα αόρατα διακριτικά που δημιουργήσατε πιο πάνω) στην ίδια σελίδα. Υποδεικνύουμε ένα named anchor βάζοντας πριν απο το όνομα του το σύμβολο "#":

  1. Αν δεν το έχετε ήδη ανοιχτό, ανοίξτε το αρχείο index.html στον κειμενογράφο σας.
  2. Αλλάξτε το πρώτο στοιχείο της λίστας με τα περιεχόμενα:

        <li>Introduction

    με τα:

       <li><A HREF="#intro">Introduction</A>

  3. Κάντε το ίδιο για τα υπόλοιπα στοιχεία του πίνακα:

    <hr>
    <B>In this Lesson...</B>
    <ul><i>
    <li><A HREF="#intro">Introduction</A>
    <li><A HREF="#term">Volcano Terminology</A>
    <li><A HREF="#usa">Volcanic Places in the USA</A>
    <li><A HREF="#mars">Volcanic Places on Mars</A>
    <li><A HREF="#project">Research Project</A></i>
    </ul>

  4. Σώστε και ανοίξτε το HTML αρχείο στον browser.

Προσθέτοντας Συνδέσμους Προς Named Anchor σε Άλλη Σελίδα

Μπορείτε να δημιουργήσετε υπερσυνδέσμους που οδηγούν σε κάποιο τμήμα ενός άλλου αρχείου HTML. Η HTML για να γίνει αυτό είναι:

    <a href="file.html#NAME">Κείμενο που αναφέρεται στον υπερσύνδεσμο</a>

και αν το αρχείο βρίσκεται σε άλλο web site:

    <a href="http://www.website.com/pub/file.html#name">Κείμενο που αναφέρεται στον υπερσύνδεσμο</a>

Στο μάθημα 8a κάναμε εναν σύνδεσμο υπερκειμένου που οδηγούσε απο την ενότητα της κύριας σελίδας στο ξεχωριστό αρχείο msh.html. Τώρα θα προσθέσουμε εναν σύνδεσμο σε αυτό το αρχείο που θα οδηγεί πίσω στην αρχική ενότητα στην κύρια σελίδα του Volcano Web.

  1. Ανοίξτε το αρχείο msh.html στον κειμενογράφο σας.
  2. Κοντά στο τέλος του αρχείου HTML (πριν απο την ετικέτα </body>) γράψτε το ακόλουθο κείμενο:

    <hr>
    <a href="index.html#usa">Return to <i>Volcano Web</i></a>

  3. Σώστε και ανοίξτε το HTML αρχείο στον browser.

Ελέγξτε τη δουλειά σας

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

Παράδειγμα χρήσης των υπερσυνδέσμων επιστροφή στην ενότητα όπου περιγράφουμε τι είναι named anchor...

Στη συνέχεια: 9e. Yπερσύνδεσμοι Γραφικών

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