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

25. Ετικέτες META


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

Στο μάθημα αυτό εξετάζουμε δυο απο τις χρήσεις των ετικετών <META>. Αυτή η σύνταξη της HTML δημιουργήθηκε για να επιτρέπει την ενσωμάτωση επιπλέον πληροφοριών σε μια ιστοσελίδα, στο τμήμα που δεν εμφανίζουν οι web browsers. Υπάρχουν πολλά άλλα είδη ετικετών META που μπορεί να συναντήσετε, αλλά εδω σας δίνουμε παραδείγματα για τις δυο πιο χρήσιμες.

Οι ετικέτες αυτές περιέχονται στο τμήμα <HEAD> ... </HEAD> του HTML αρχείου, που είδαμε στο μάθημα 2.

META REFRESH για αυτόματη μεταφορά σε άλλες ιστοσελίδες

Ο πρώτος τύπος ετικέτας META επιτρέπει να γράψετε HTML η οποία εμφανίζει την ιστοσελίδα σας, περιμένει ένα χρονικό διάστημα δευτερολέπτων, και στη συνέχεια σας μεταφέρει αυτόματα σε μια άλλη σελίδα ή URL. Γιατί όμως να θέλετε να κάνετε κάτι τέτοιο;

Θα σας δείξουμε πως γίνεται το τρίτο απο τα παραπάνω παραδείγματα, προσθέτοντας μια εισαγωγική οθόνη στο Volcano Web Site. H ετικέτα <META> περιβάλεται απο την ετικέτα <HEAD>..</HEAD>:

<head>
<title>My page title</title>
<META HTTP-EQUIV="REFRESH" CONTENT="X; URL=newpage_or_URL.html">
</head>

όπου X είναι ο αριθμός σε δευτερόλεπτα που η σελίδα αυτή θα εμφανίζεται πριν να μας οδηγήσει αυτόματα στο HTML αρχείο ή τη URL που έχουμε ορίσει μετά το URL=. Σημειώστε ότι όλο το κείμενο που περιλαμβάνεται μετά το CONTENT= πρέπει να είναι μέσα σε εισαγωγικά, και οτι πρέπει να βάλετε ερωτηματικό μετά την τιμή του Χ.

Για το μάθημα αυτό θα δημιουργήσουμε μια εισαγωγική σελίδα, που θα αντικαταστήσει την προηγούμενη. Πριν όμως κάνουμε οτιδήποτε, πρέπει να αλλάξουμε το όνομα της σελίδας index.html και και όλους τους υπερσυνδέσμους που αναφέρονται σε αυτή.

  1. Πρώτα κατεβάστε την εικόνα απο τη σελίδα Eικόνες για το μάθημα 25. Σώστε την εικόνα στο κατάλογο pictures μαζί με τις άλλες εικόνες.
  2. Αλλάξτε το όνομα του αρχείου index.html σε index1.html
  3. Ανοίξτε στον κειμενογράφο σας όλα τα HTML αρχεία, και αλλάξτε κάθε υπερσύνδεσμο στο αρχείο index.html ώστε να οδηγεί στο αρχείο index1.html. Αυτό συμβαίνει 2 φορές σε κάθε σελίδα. Στο πανω μέρος

      <A HREF="index.html">Index</A> /

    αλλάξτε το σε:

      <A HREF="index1.html">Index</A> /

    Στο κάτω μέρος κάθε σελίδας

      <ADDRESS>
      <b><A HREF="index.html">Volcano Web</A> :

    αλλάξτε το σε:

      <ADDRESS>
      <b><A HREF="index1.html">Volcano Web</A> :

  4. Τώρα θα κάνουμε μια νεα σελίδα που θα αντικαταστήσει τη σελίδα index.html που αλλάξαμε πριν. Πρώτα θα την φτιάξουμε και θα τη δοκιμάουμε και ύστερα θα προσθέσουμε τη ετικέτα ΜΕΤΑ (καθώς είναι δύσκολο να δοκιμάσεις μια σελίδα οταν αυτή μετακινείται κάθε φορά που την φορτώνεις). Κάντε μια νέα σελίδα που περιέχει την ακόλουθη ΗΤΜL:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
      <html>
      <head>
      <title>Volcano Web</title>
      </head>
      <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
      <!-- first table centers all content on any browser window size -->
      <table border=0 width=100% height=100%>
      <tr>
      <td valign=middle align=center>

        <!-- Second table stretches the word "volcano!" across the width of the screen -->
        <table border=0 width=100%>
        <tr>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>v</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>o</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>l</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>c</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>a</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>n</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>o</b></font></td>
        <td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>!</b></font></td>
        </tr>
        </table>

      <p>
      <A HREF="index1.html">
      <IMG SRC="../pictures/cover.gif" ALT="volcano!" WIDTH="206" HEIGHT="186" BORDER="0"></A>
      <p>
      <font face="verdana,helvetica,arial" size=2><A HREF="index1.html">enter</A></font>
      </td>
      </tr>
      </table>
      </body>
      </html>

    ΣΗΜΕΙΩΣΗ: Χρησιμοποιούμε ορισμένες απο τις τεχνικές που είδαμε στο  μάθημα 22 για τους πίνακες. Επίσης χρησιμοποιήσαμε την ετικέτα <font face=..>. Παρόλο που θα προσθέσουμε την ετικέτα <META> για αυτόματη μετάβαση σε άλλη σελίδα, καλό είναι να συμπεριλάβουμε και κάποιο υπερσύνδεσμο προς την κύρια σελίδα index1.html

  5. Σώστε τις αλλαγές και ανοίξτε τα αρχεία στο browser. Ελέγξτε όλους τους υπερσυνδέσμους για να βεβαιωθείτε οτι οδηγούν στο αρχείο index1.html
  6. Έπειτα ανοίξτε το νέο αρχείο index.html στον κειμενογράφο, και μετα τη γραμμή:

    <title>Volcano Web</title>

    προσθέστε:

    <META HTTP-EQUIV="REFRESH" CONTENT="3; URL=index1.html">

    NOTE: Η ετικέτα META λέει στο browser να περιμένει για 3 δευτερόλεπτα και έπειτα να μεταβεί αυτόματα στην ιστοσελίδα index1.html

  7. Σώστε τις αλλαγές και ανοίξτε το αρχείο index.html στο browser.  Δείτε αν σας οδηγεί αυτόματα στη δεύτερη σελίδα.

Ετικέτες Περιγραφής (META Descriptor tags)

Κάνετε όλη αυτή τη σκληρή δουλειά για να μάθετε HTML και να φτιάξετε ιστοσελίδες. Τελικά, το πιο πιθάνο είναι να θέλετε οι χρήστες να μπορούν να τις βρίσκουν ανάμεσα στις εκατομμύρια άλλες που υπάρχουν. Οι ετικέτες ΜΕΤΑ σας επιτρέπουν να προσθέσετε επιπλέον πληροφορίες που θα κάνουν εφικτό τον εντοπισμό της σελίδας σας απο τις μηχανές αναζήτησης.

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

Αν δεν είστε εξοικιωμένος με κάποια μηχανή ανζήτησης, πειραματιστείτε χρησιμοποιώντας τις δυνατότητες που προσφέρουν sites όπως τα Yahoo, Altavista, HotBot, Excite, Lycos, κλπ.

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

sample web page
Εγχειρίδιο HTML
From: http://www.uom.gr/itweb/
Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα |
To εγχειρίδιο Γράφοντας HTML δημιουργήθηκε...

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

sample web page
Εγχειρίδιο HTML
From: http://www.uom.gr/itweb/
Ενα αναλυτικό εγχειρίδιο στα ελληνικά, για την γλώσσα ΗΤΜL και για τη συγγραφή ιστοσελίδων, απο το τμήμα Εφ.Πληροφορικής του Παν. Μακεδονίας.

Η σύνταξη μιας τέτοιας META ετικέτας είναι

<META name="description" content="Αυτό το κομμάτι κειμένου είναι μια καλή περιγραφή αυτής της σελίδας. Μια δεύτερη πρόταση ίσως να βοηθήσει περισσότερο.">

Αν μπείτε στον πειρασμό να γράψετε μια μακροσκελή περιγραφή, να θυμάστε οτι το μέγιστο μήκος της META ετικέτας, απο το πρώτο < εως το τελευταίο > είναι 1024 χαρακτήρες, αφήνοντας στη διάθεση σας 998 χαρακτήρες ανάμεσα στην αρχή της ετικέτας

  <META name="description" content="

και στο κλείσιμο

    ">

αφήνοντας χώρο για 100 περίπου λέξεις.

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

    <META   name="keywords" content="HTML, tutorial, learn,
    make, create, design, web page, εγχειρίδιο, ιστοσελίδες,
    writing, form, tables, frames">

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

  1. Ανοίξτε το αρχείο index.html στον κειμενογράφο.
  2. Μετά την ετικέτα HEAD βρείτε τα:

      <META HTTP-EQUIV="REFRESH" CONTENT="2; URL=index1.html">

    και προσθέστε:

      <META  name="description" content="A mini lesson about the wide world of
          volcanoes as an example for the Writing HTML tutorial">
      <META  name="keywords" content="HTML, volcano, learn, web page, earth,
           mars, Mount St, Helens, Long Valley, Pliny">

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

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

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

Περισσότερες Πληροφορίες

Για να μάθετε περισσότερα για τις μηχανές αναζήτησης, επισκεφτείτε το site Search Engine Watch, και ιδιαίτερα την ενότητα How to Use Meta Tags.


Στη συνέχεια: 26.Επιλέγοντας Παράθυρο

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