Αφού αποφασίσαμε τι είδους/version «γλώσσα» θα χρησιμοποιήσουμε για το site μας, ώρα να ξεκινήσουμε! Θα υποθέσω προς το παρόν οτι φτιάχνουμε ένα site σε HTML Strict 4.01 και, σε κάποιο επόμενο άρθρο, θα αναφερθώ στις διαφορές με την XHTML. Τώρα που το σκέφτομαι, δε νομίζω πως έχει νόημα να αναφερθώ στην XHTML πλέον — η αφορμή για το ξεσκόνισμα των παλιών αυτών άρθρων είναι η HTML5 και η XHTML, καλώς ή κακώς, θα περάσει στην ιστορία. Μπορείτε βέβαια να γράψετε HTML5 κώδικα με XML σύνταξη αλλά γιατί να το κάνετε;
Μια σελίδα HTML αποτελείται από tags. Αν χρησιμοποιείτε κάποιο πρόγραμμα WYSIWYG, δεν θα μάθετε και πολλά πράγματα για τον κώδικα που χτίζει την σελίδα και δεν είναι καλό αυτό — ανοίξτε έναν απλό editor (π.χ. Notepad) ή κάποιο περισσότερο εξιδικευμένο πρόγραμμα όπως το Komodo Edit ή το Notepad++ που χρησιμοποιώ εγώ.
Το <html> tag (εφεξής, όλα τα tags θα είναι με μικρά γράμματα – θα σας διευκολύνει πολύ όταν αποφασίσετε να αλλάξετε την σελίδα σε HTML5) ουσιαστικά δηλώνει πως από εδώ και κάτω ακολουθεί κώδικας 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! Στην HTML5 πάντως, το meta για την κωδικοποίηση αρκεί να είναι <meta charset="UTF-8"> ή μπορεί ακόμα και να απουσιάζει αν υπάρχει ο χαρακτήρας BOM στην αρχή του αρχείου, που είναι δουλειά του editor. Για να είστε σίγουροι, χρησιμοποιήστε το meta.
Τα <link> χρησιμοποιούνται για τη σύνδεση CSS, favicon και RSS feeds με τη σελίδα μας. Με τα CSS θα ασχοληθώ λίγο αργότερα αλλά στο μεταξύ δείτε το starting with HTML + CSS για να πάρετε μια ιδέα περί τίνος πρόκειται και γιατί τα χρησιμοποιούμε.
Τέλος, το script χρησιμοποιείται για να οριοθετήσει κώδικα Javascript αλλά και για να συνδέσει αρχεία κώδικα Javascript με την σελίδα μας, που είναι και ο ενδεδειγμένος τρόπος χρήσης της. Η Javascript είναι (πολύ) πέρα από τα «Πρώτα βήματα στην HTML».
Κλείνοντας, δείτε παρακάτω το head μιας τυπικής σελίδας ή δείτε τον κώδικα αυτής της σελίδας που διαβάζετε — θα πρέπει ωστόσο να σας προειδοποιήσω πως τα άρθρα μου εξυπηρετούνται από την πλατφόρμα WordPress και ο κώδικας που δημιουργείται δεν είναι τόσο απλός όσο οι βασικές δομές που παρουσιάζω…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="el"> <head> <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> </head>
Το ίδιο κομμάτι κώδικα σε HTML5:
<!doctype html> <html lang="el"> <head> <meta 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> </head>
(Βαθμολογία: +3, ψήφοι: 3)
Loading ...
