Πρώτα βήματα στην HTML: html και head
Αφού αποφασίσαμε τι είδους/version «γλώσσα» θα χρησιμοποιήσουμε για το site μας, ώρα να ξεκινήσουμε! Θα υποθέσω προς το παρόν οτι φτιάχνουμε ένα site σε HTML Strict 4.01 και, σε κάποιο επόμενο άρθρο, θα αναφερθώ στις διαφορές με την XHTML.
Μια σελίδα HTML αποτελείται από tags. Αν χρησιμοποιείτε κάποιο πρόγραμμα WYSIWYG, δεν θα μάθετε και πολλά πράγματα για τον κώδικα που χτίζει την σελίδα και δεν είναι καλό αυτό — ανοίξτε έναν απλό editor (π.χ. Notepad) ή κάποιο περισσότερο εξιδικευμένο πρόγραμμα όπως το Komodo Edit που χρησιμοποιώ εγώ.
Το <html> tag (εφεξής, όλα τα tags θα είναι με μικρά γράμματα – θα σας διευκολύνει πολύ όταν κάποτε αποφασίσετε να αλλάξετε την σελίδα σε XHTML) ουσιαστικά δηλώνει πως από εδώ και κάτω ακολουθεί κώδικας HTML. Είναι, φυσικά, υποχρεωτικό tag και είναι το τελευταίο που θα κλείσει (</html>) στον κώδικα. Με το <html> θα δηλώσουμε επίσης την κύρια γλώσσα που χρησιμοποιεί το site μας, ως εξής: <html lang="el">. Αυτό το κάνουμε για διάφορους λόγους, μεταξύ των οποίων είναι: α) για να μπορούν οι μηχανές αναζήτησης να ταξινομήσουν σωστά το περιεχόμενο της σελίδας μας, β) για να είναι πιο εύχρηστη από ΑμΕΑ.
Στην συνέχεια έχουμε το <head>. Το <head> είναι υποχρεωτικό, θα πρέπει να βρίσκεται πριν από το <body> και περιλαμβάνει το <title>, το οποίο είναι και το μόνο υποχρεωτικό tag. Περιλαμβάνει επίσης διάφορα <meta> tags, <link> και <script>. Ας τα δούμε με τη σειρά.
Το <title>, όπως είπαμε, είναι υποχρεωτικό (και πρέπει να κλείνει με </title>). Είναι ο τίτλος της σελίδας μας και θα εμφανίζεται στο παράθυρο του browser, στα bookmarks και στα αποτελέσματα αναζήτησης των μηχανών. Είναι πολύ σημαντική πληροφορία και πρέπει να είναι σύντομη και περιεκτική. Δεν υπάρχει κανόνας αλλά συνηθίζεται να περιλαμβάνει τον τίτλο ή την διεύθυνση του site μας και την υπο-σελίδα που βρισκόμαστε αυτή τη στιγμή, π.χ. <title>www.prince.gr | Πρώτα βήματα στην HTML: html και head</title>.
Μετά μπορούμε να πληκτρολογήσουμε διάφορα <meta> tags, το πιο σημαντικό, αν και δεν είναι υποχρεωτικό, είναι η δήλωση της κωδικοποίησης του αρχείου, που διαφέρει ανάλογα με την γλώσσα που χρησιμοποιούμε. Στην HTML είναι <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ενώ στην XHTML είναι <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />. Το utf-8 σημαίνει κωδικοποίηση Unicode και είναι πλέον ο ενδεδειγμένος τρόπος για να δημοσιεύετε ελληνικά ή/και πολυγλωσσικά έγγραφα στο internet, ενώ θα πρέπει και η κωδικοποίηση του ίδιου του αρχείου να είναι σε Unicode.
Υπάρχουν πολλά ακόμα <meta> tags μεταξύ των οποίων τα description και keywords που, υποτίθεται πως φροντίζουν να ανέβει το site μας ψηλά στα αποτελέσματα αναζήτησης. Βέβαια, τα πράγματα δεν είναι ακριβώς έτσι, π.χ. το Google αγνοεί τα keywords!
Τα link χρησιμοποιούνται για τη σύνδεση CSS, favicon και RSS feeds με τη σελίδα μας. Με τα CSS θα ασχοληθώ λίγο αργότερα αλλά στο μεταξύ δείτε το starting with HTML + CSS για να πάρετε μια ιδέα περί τίνος πρόκειται και γιατί τα χρησιμοποιούμε.
Τέλος, το script χρησιμοποιείται για να οριοθετήσει κώδικα Javascript αλλά και για να συνδέσει αρχεία κώδικα Javascript με την σελίδα μας, που είναι και ο ενδεδειγμένος τρόπος χρήσης της. Η Javascript είναι πέρα από τα «Πρώτα βήματα στην HTML».
Κλείνοντας, δείτε το head αυτής της σελίδας:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head lang="el"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="include/default.css" type="text/css" title="Default" media="screen"> <link rel="shortcut icon" href="favicon.ico"> <script type="text/javascript" src="include/lightbox.js"></script> <script type="text/javascript" src="include/tinyMCE/tiny_mce.js"></script>