Εγκαινιάζω μια νέα σειρά άρθρων με τα οποία θα προσπαθήσω να «μεταφράσω» σε απλά ελληνικά τις επίσημες προδιαγραφές της HTML 4.01. Θα παρουσιάσω όλα τα διαθέσιμα tags, πως τα χρησιμοποιούμε, πότε και πως, και θα αναλύσω τα best practices. Επίσης. θα δώσω συμβουλές usabilitity και accessibility — δύο έννοιες που πρέπει να έχετε πάντα κατά νου. Και θα αρχίσω -πως αλλιώς- αλφαβητικά.
<a> (anchor)
Ο ακρογωνιαίος λίθος του Internet! Χωρίς τα hyperlinks -που είναι η βασική χρήση του <a>- θα είχαμε απλώς στατικές σελίδες, κάτι σαν βιβλία αλλά στον υπολογιστή. Τα hyperlinks βρίσκονται παντού και συνήθως είναι μπλε και υπογραμμισμένα — στο screenshot μπορείτε να δείτε τις μικροδιαφορές μεταξύ των διαφορετικών browsers σε Windows με τις εξ ορισμού ρυθμίσεις του καθενός. Μπορείτε φυσικά μέσω CSS να αλλάξετε την εμφάνιση τους αλλά να έχετε υπόψιν πως α) η υπογράμμιση είναι ένα ιδιαίτερα χρήσιμο για τους επισκέπτες μας χαρακτηριστικό και αν αποφασίσετε να την αφαιρέσετε, φροντίστε να μην υπάρχει τίποτε άλλο υπογραμμισμένο στην σελίδα σας, β) το μπλε χρώμα μπορεί να είναι άσχημο αλλά είναι σχετικά «ασφαλές» για το 10% περίπου των ανδρών παγκοσμίως που πάσχουν από κάποιου είδους αχρωματοψία.
Το <a> μπορεί να δεχτεί τα εξής attributes:
href- Δηλώνει τη διεύθυνση ενός web resource ή αλλιώς, μια άλλη διεύθυνση στο διαδίκτυο, μια άλλη σελίδα στο site μας, ένα αρχείο .pdf, .zip ή κάποιο άλλου είδους download, μια φωτογραφία .jpg, κ.α.
hreflang- Προαιρετικά δηλώνει την γλώσσα του target — δεν χρησιμοποιείται από τους browsers.
name- Χρησιμοποιείται για links στην ίδια σελίδα. Ένα link σαν αυτό:
<a name="a"></a>υπάρχει στην αρχή της ανάλυσης και χρησιμοποιώντας ένα link σαν αυτό:<a href="#a"></a>η σελίδα θα κυλίσει εκεί. rel- Περιγράφει την σχέση του target με της σελίδας που βρίσκεται το ίδιο το link, που, όπως και το αντίστροφο
rev, δεν αξιοποιούνται από τους περισσότερους browsres. type- Περιέχει πληροφορία σχετικά με το είδους του αρχείου στο οποίο αναφέρεται το link - συνήθως δεν χρησιμοποιείται.
Και βέβαια μπορεί να δεχτεί τα -κοινά για πολλά tags της HTML- attributes: accesskey, class, id, lang, style, target και tabindex, στα οποία θα αναφερθώ αναλυτικά σε επόμενο μάθημα. Να σημειώσω μόνο πως το target αναφέρεται σε frames (τα οποία θα δούμε αργότερα) ενώ χρησιμοποιείται και για να ανοίγει τα links σε νέο παράθυρο (target="_blank") το οποίο θα πρέπει να το ξεχάσετε — ο browser είναι του χρήστη και θα πρέπει να έχει εκείνος τον έλεγχο!.
Το style αφορά σε inline CSS που καλό είναι να τα αποφεύγετε· τα CSS θα πρέπει πάντα να βρίσκονται σε ξεχωριστά αρχεία.
Τέλος, επειδή το <a> είναι το σημαντικότερο ίσως tag της HTML θα πρέπει να θυμάστε και τα εξής:
- φροντίστε η περιοχή που μπορεί να επιλέξει ο χρήστης να είναι σχετικά μεγάλη – εικονίδια 10x10 pixels ή ένα > π.χ. δεν είναι εύκολος «στόχος» για ΑμεΑ, είτε έχουν προβλήματα όρασης είτε κινητικά
- μην χρησιμοποιείτε links της μορφής «Πατήστε εδώ» – καλύτερα να ενσωματώσετε το hyperlink στην παράγραφο που προηγείται
- φροντίστε να κάνετε τα links να ξεχωρίζουν από τον κείμενο με την πρώτη ματιά
<abbr> (abbreviated form)
Χρησιμοποιείται, με το title attribute, για να δηλώσει μια συντομογραφία όπως το <abbr title="Cascading Syle Sheets">CSS</abbr>. Ο Firefox και ο Opera δείχνουν τη συντομογραφία υπογραμμισμένη με διακεκομμένη γραμμή (ο Internet Explorer και ο Safari όχι) ενώ το περιεχόμενο του title εμφανίζεται σε tooltip σε όλους τους browsers.
<acronym>
Χρησιμοποιείται, με το title attribute, για να δηλώσει μια συντομογραφία που όμως συνηθίζεται να προφέρεται σαν κανονική λέξη, π.χ. <acronym title="Κέντρα Τεχνικού Ελέγχου Οχημάτων">ΚΤΕΟ</acronym>. Δεν υποστηρίζεται σε Internet Explorer 6 αλλά ποιός νοιάζεται!
<applet> (Java applet)
Είναι μάλλον σαφές το τι ακριβώς κάνει αλλά δεν θα μας απασχολήσει περισσότερο διότι θεωρείται πλέον άχρηστο και θα καταργηθεί.
<area> (client-side image map area)
Αφορά σε image maps — θα το δούμε μαζί με το map.
(Βαθμολογία: +1, ψήφοι: 1)
Loading ...