Πρώτα βήματα στην HTML: body και τα πρώτα tags

Φτάσαμε στο body. Τώρα αρχίζουν τα δύσκολα! Εδώ θα μπει το βιογραφικό μας σημείωμα, η φόρμα επικοινωνίας, οι σκέψεις μας σχετικά με το ασφαλιστικό και την πορεία της ομάδας μας στα γήπεδα της ευρώπης. Αλλά πρώτα, λίγη θεωρία.

Η αγγλίκη σελίδα της Wikipedia για την HTML περιέχει το ιστορικό της γλώσσας και λίγα λόγια για την χρήση της. Εγώ θα αναφερθώ στον όρο Semantic HTML (και όποιος γνωρίζει μια σωστή ελληνική λέξη για να περιγράψει αυτή την έννοια, παρακαλώ να με διαφωτίσει), που είναι πλέον η ενδεδειγμένη μέθοδος για να φτιάχνουμε sites. Αν όντως κάνετε τώρα τα πρώτα σας βήματα στην HTML είστε τυχεροί — δεν χρειάζεται να ξεχάσετε την «σούπα από tags» που χρησιμοποιούσαμε μέχρι πριν από 3-4 χρόνια.

Η μέθοδος είναι απλή και προσφέρει πολλά πλεονεκτήματα:

Ο πλήρης διαχωρισμός της πληροφορίας από την μορφοποίηση και την λειτουργικότητα της σελίδας σημαίνει πως χρησιμοποιούμε τα κατάλληλα tags της HTML για να περιγράψουμε την έννοια της πληροφορίας, τα CSS για να καθορίσουμε το πως θα παρουσιαστεί αυτή η πληροφορία στον χρήστη και την Javascript για να προσθέσουμε λειτουργικότητα και έφε στο site μας. Ο προγραμματισμός και η συντήρηση του site γίνονται ευκολότερα διότι κάθε κομμάτι από τα παραπάνω είναι σε ξεχωριστά αρχεία — τα CSS και Javascript αρχεία είναι κοινά για όλες μας τις σελίδες, κι έτσι μπορούμε να προσθέσουμε λειτουργικότητα ή να αλλάξουμε την εμφάνιση του site συνολικά, αλλάζοντας μόνο ένα αρχείο. Τέλος, δίνουμε την δυνατότητα σε ΑμΕΑ να έχουν πρόσβαση στην πληροφορία μας χρησιμοποιώντας browsers που είναι φτιαγμένοι για να χρησιμοποιούνται από τυφλούς ή άτομα με κινητικά προβλήματα ενώ ταυτόχρονα διασφαλίζουμε ότι τα «ρομπότ» των μηχανών αναζήτησης (που είναι τυφλά!) θα διαβάσουν τις σελίδες μας και θα τις ταξινομήσουν σωστά. Σε αυτή τη σειρά μαθημάτων θα ασχοληθούμε μόνο με την πληροφορία — ας δούμε λοιπόν μερικά από τα βασικότερα tags της HTML που περικλείονται από το body.

Το <p> (paragraph) περιέχει συνήθως το κείμενο μας. Η παράγραφος που διαβάζετε τώρα, περικλείεται από ένα <p> tag.
Μέσα στο κείμενο μπορούμε να χρησιμοποιήσουμε τα <em> (emphasis) και <strong> (strong emphasis) για να δώσουμε έμφαση. Να επισημάνω πως αυτά τα tags δεν είναι ίδια με τα <i> και <b> (που θα πρέπει να τα αποφεύγετε), παρόλο που ο browser παρουσιάζει τα μεν με πλαγιαστά γράμματα και τα δε με έντονα – η διαφορά είναι στην έννοια.
Αν θέλουμε να βάλουμε ένα link προς κάποια άλλη σελίδα (ή προς κάποιο άλλο σημείο στην ίδια σελίδα) θα χρησιμοποιήσουμε το <a> (anchor), το άρθρο είναι γεμάτο από δαύτα (π.χ. <a href="http://wikipedia.org/">Wikipedia</a> — προσέξτε την χρήση του href attribute).
Έχουμε επίσης στη διάθεση μας το <img> (που είναι ένα από τα ελάχιστα tags που δεν πρέπει να κλείνει με </img> ) για να προσθέσουμε μια εκόνα στην σελίδα μας. Το <img> μπορεί να περικλείεται από <a> κι έτσι μπορούμε να έχουμε μια εικόνα ή ένα γραφικό που οδηγεί σε άλλο σημείο της σελίδας ή σε άλλη σελίδα, όπως οι δύο μικρές εικόνες κάτω δεξία που οδηγούν στα online validators.

Υπάρχει το <blockquote> tag που χρησιμοποιείται για να ορίσει μια παράθεση (που θα πρέπει να περικλείεται σε <p></p>) και μπορεί να περιέχει το cite (που είναι attribute, με τα οποία θα ασχοληθώ στο αμέσως επόμενο άρθρο) το οποίο δηλώνει την πηγή του αποσπάσματος. Αυτό χρειάζεται παράδειγμα:

HTML, an initialism of Hypertext Markup Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of labels (known as tags), surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code which can affect the behavior of web browsers and other HTML processors.

Δείτε και τον κώδικα:

<blockquote cite="http://en.wikipedia.org/wiki/HTML"><p>HTML,
an initialism of Hypertext Markup Language, is the predominant markup language for web pages.
It provides a means to describe the structure of text-based information in a document —
by denoting certain text as headings, paragraphs, lists, and so on —
and to supplement that text with interactive forms, embedded images, and other objects.
HTML is written in the form of labels (known as tags), surrounded by angle brackets.
HTML can also describe, to some degree, the appearance and semantics of a document,
and can include embedded scripting language code which can affect
the behavior of web browsers and other HTML processors.</p></blockquote>

Να σημειώσω πως το cite δεν εμφανίζεται αλλά στον Firefox μπορείτε με δεξί κλικ να δείτε την διεύθυνση απ' όπου πήραμε το απόσμασμα.

Μπορούμε να ορίσουμε λίστες χρησιμοποιώντας τα <ul> (unordered list, όπως η παραπάνω) και <ol> (ordered list) — ένα παράδειγμα θα κάνει λίγο πιο σαφή την χρήση τους:

<ul>
<li>Πλήρης διαχωρισμός της πληροφορίας από την μορφοποίηση της και την λειτουργικότητα της σελίδας</li>
<li>Ευκολότερος προγραμματισμός και συντήρηση του site</li>
<li>Δυνατότητα πρόσβασης στην σελίδα μας από <abbr title="Άτομα με Ειδικές Ανάγκες">ΑμΕΑ</abbr> και πιο αξιόπιστη καταχώρηση στις μηχανές αναζήτησης</li>
</ul>

Στο παραπάνω παράδειγμα θα δείτε και το <abbr> με το title attribute που ορίζει μια συντομογραφία και την εξήγηση αυτής (που εμφανίζεται στον browser με tooltip), αντίστοιχα.

Αφήνω για το επόμενο άρθρο τα tags που μας επιτρέπουν να φτιάξουμε πίνακες (<table>, <tr>, <th>, <td> κ.α.) και φόρμες (<form>, <legend>, <input> κ.α.) αλλά και τα tags επικεφαλίδων (<h1> - <h6>) γιατί το μάθημα, νομίζω, ήταν ιδιαίτερα δύσκολο σήμερα!