Συνεχίζουμε γρήγορα-γρήγορα την περιήγηση μας στα tags της HTML 4.01 με τα γράμματα K, L και M.

<kbd> (text to be entered by the user)

Ένα tag που προσπαθεί να δώσει νόημα στο κείμενο της σελίδας μας — ορίζει το κείμενο που περικλείει σαν εντολή που θα πρέπει να πληκτρολογήσει ο χρήστης, π.χ. στο πλαίσιο ενός tutorial. Δεν χρησιμοποιείται ιδιαίτερα.

<label> (form field label text)

Έχω ήδη αναφερθεί στην χρήση του, στο άρθρο για τις φόρμες, όπως και για το legend που ακολουθεί.

<legend> (fieldset legend)

Δείτε παραπάνω.

<li> (list item)

Αυτό θα το αναλύσω σε επόμενο μάθημα, μαζί με το <ul> — στο μεταξύ μπορείτε να δείτε τη χρήση του στο άρθρο Πρώτα βήματα στα CSS: μενού.

<link> (a media-independent link)

Πρόκειται για ένα tag που μπαίνει στο head της σελίδας και χρησιμοποιείται για να καθοδηγήσει τον browser να ζητήσει επιπλέον αρχεία από τον server όπως CSS: <link rel="stylesheet" href="default.css" type="text/css" media="screen">, Favicon: <link rel="shortcut icon" href="favicon.ico"> αλλά και RSS feeds: <link href="rss.php?type=RSS2" rel="alternate" title="My RSS Feed" type="application/rss+xml">. Προς το παρόν, αρκεί να θυμάστε την χρήση του για το φόρτωμα των CSS.

<map> (client-side image map)

Τα image maps στην πράξη είναι εικόνες με πολλές ενεργές περιοχές, όπως π.χ. ένας χάρτης. Οι περιοχές αυτές ορίζονται με <area> tags και περικλείονται από το <map>. Επίσης, θα πρέπει η συγκεκριμένη εικόνα (<img>) να έχει ένα usemap attribute που θα πρέπει να αντιστοιχεί στο name του <map>. Προτείνεται δε η χρήση του <object> αντί του <img> αλλά δεν συνηθίζεται. Αυτό όμως θα χρειαστεί παράδειγμα:

Ο παραπάνω χάρτης (που έχω «δανειστεί» από γνωστή αλυσίδα super markets — μην τους το πείτε…) έχει αρκετές παραλληλόγραμμες ενεργές περιοχές που η καθεμιά τους -στο site απ'όπου πήρα τον χάρτη- οδηγεί σε μια σελίδα που δείχνει τα υποκαταστήματα τους. Είναι ένας σχετικά καλός τρόπος να διευκολύνουμε τον χρήστη χωρίς να φορτώσουμε το site μας με λίστες περιοχών-καταστημάτων. Φυσικά, η ίδια δουλειά μπορεί να γίνει και με άλλους τρόπους. Ορίστε και ο κώδικας:

<p><img alt="Τα υποκαταστήματα μας σε ολόκληρη την Ελλάδα" height="472" src="images/greece.gif" usemap="#greece" width="436"></p>
<map name="greece">
	<area alt="Κέρκυρα" coords="3,70,46,90" href="#">
	<area alt="Ιωάννινα" coords="43,98,100,116" href="#">
	<area alt="Θεσσαλονίκη" coords="174,62,243,76" href="#">
	<area alt="Λαμία" coords="122,161,171,177" href="#">
	<area alt="Μαγνησία" coords="172,139,224,153" href="#">
	<area alt="Αιτωλοακαρνανία" coords="45,177,134,193" href="#">
	<area alt="Βοιωτία" coords="155,201,200,216" href="#">
	<area alt="Εύβοια" coords="203,196,243,210" href="#">
	<area alt="Αττική" coords="186,227,226,241" href="#">
	<area alt="Αχαΐα" coords="88,207,128,221" href="#">
	<area alt="Ηλεία" coords="67,233,107,247" href="#">
	<area alt="Κορινθία" coords="129,236,178,247" href="#">
	<area alt="Αρκαδία" coords="94,254,143,265" href="#">
	<area alt="Αργολίδα" coords="146,254,195,265" href="#">
	<area alt="Μεσσηνία" coords="59,277,108,288" href="#">
	<area alt="Λακωνία" coords="120,296,169,307" href="#">
	<area alt="Λέσβος" coords="302,176,342,190" href="#">
	<area alt="Άνδρος" coords="260,240,300,254" href="#">
	<area alt="Σάμος" coords="342,251,375,264" href="#">
	<area alt="Πάρος" coords="272,289,305,302" href="#">
	<area alt="Ρόδος" coords="367,361,400,374" href="#">
	<area alt="Πάτμος" coords="313,294,351,304" href="#">
	<area alt="Κεφαλλονιά" coords="2,194,67,207" href="#">
	<area alt="Ζάκυνθος" coords="6,214,56,226" href="#">
	<area alt="Κως" coords="367,317,400,330" href="#">
	<area alt="Λάρισσα" coords="146,115,186,135" href="#">
	<area alt="Άρτα" coords="59,132,96,146" href="#">
	<area alt="Πιερία" coords="141,80,180,94" href="#">
	<area alt="Τζια" coords="224,260,258,273" href="#">
</map>

Να σημειώσω τα εξής:

• Το <map> δέχεται υποχρεωτικά μόνο ένα attribute, το name. Το <img> θα πρέπει, όπως είπαμε, να έχει ένα usemap με το ίδιο όνομα συν τη δίεση ή κάγκελο (στη γλώσσα των προγραμματιστών) - #.
• Κάθε <area> καθορίζει ουσιαστικά ένα hyperlink. Θα πρέπει υποχρεωτικά να έχει το alt συμπληρωμένο. Επίσης υποχρεωτικό είναι το coords που -σε συνδυασμό με το shape (που δεν έχω χρησιμοποιήσει χάριν συντομίας αλλά και γιατί, εξ ορισμού, είναι rect — παραλληλόγραμο)- καθορίζει το σημείο και το σχήμα της ενεργής περιοχής επάνω στην εικόνα. Ρίξτε μια ματιά στο thumbnail παραπάνω για να δείτε τις ενεργές περιοχές του χάρτη.
• Το href -προφανώς- θα πρέπει να είναι συμπληρωμένο με ένα έγκυρο URI — όλα αυτά τα κάγκελα στο παράδειγμα μου δεν είναι ούτε σωστά ούτε χρήσιμα… Αν χρειάζεστε μια ορισμένη περιοχή να είναι ανενεργή θα πρέπει να χρησιμοποιήσετε το nohref.
• Τέλος, επειδή η δημιουργία άλλου είδους shape (rect, circle, poly) είναι ακόμα δυσκολότερη, προτείνεται η χρήση κάποιου ειδικού προγράμματος όπως το CuteMap. Το συγκεκριμένο δυστυχώς δεν είναι δωρεάν ωστόσο, φαντάζομαι δεν θα είναι δύσκολο να βρείτε κάποιο αντίστοιχο στο διαδίκτυο.

<menu> (menu list)

Προσπεράστε γρήγορα!

<meta> (generic metainformation)

Ακόμα ένα tag που δεν αφορά το κείμενο των σελίδων μας αλλά δίνει οδηγίες ή επιπλέον πληροφορίες στον browser σχετικά με τον κώδικα ή το περιεχόμενο του site. Τα <meta> είναι μεγάλο κεφάλαιο και υπόσχομαι να αφιερώσω ένα όλοκληρο άρθρο σε αυτά, κυρίως με αφορμή το λεγόμενο SEO που, μεταξύ άλλων, χρησιμοποιεί τα keywords και description <meta> tags για να «ανέβει» το site μας πιο ψηλά στα αποτελέσματα αναζήτησης των μηχανών. Φυσικά, είναι μύθος.
Μέχρι τότε, υπάρχει ένα <meta> που πρέπει οπωσδήποτε να υπάρχει σε κάθε σελίδα σας: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

(Καμία ψήφος)

 Loading ...

TrackBack URL