Ότι βλέπουμε μέσω του περιηγητή μας στο διαδίκτυο αποτελείται κυρίως από HTML. Η HTML μπορεί να συνδυαστεί με πάρα πολλούς τρόπους και αυτό διότι αποτελεί ένα σύστημα «διάρθρωσης» των «αντικειμένων» μιας ιστοσελίδας. Όταν πλέον η ιστοσελίδα διαρθρωθεί, μια άλλη γλώσσα αναλαμβάνει να την μορφοποιήσει και να την κάνει δυναμική. Πχ… CSS, Javascript, PHP.
Μια ιστοσελίδα HTML, από τις απαρχές του ίντερνετ, αποτελούσε απλά ένα αρχείο με κατάληξη html. Αν ανοίξουμε για παράδειγμα τον Notepad++ και δημιουργήσουμε ένα νέο αρχείο με όνομα «FirstPage.html» και το αποθηκεύσουμε, αυτομάτως αποτελεί μία αυτόνομη ιστοσελίδα. Το τι θα γράψουμε μέσα σε αυτό το αρχείο καθορίζει το πώς θα φαίνεται η ιστοσελίδα μας όταν την ανοίξουμε στον περιηγητή μας.
Προσοχή! Αποθηκεύουμε το αρχείο που δημιουργούμε με κατάληξη html, και κατα την αποθήκευση προσέχουμε η επιλογή «Save as type» να είναι επιλεγμένη στο «All Types».
Κάθε έγγραφο html έχει μια βασική δομή πάνω στην οποία με βάση το περιεχόμενο του χτίζεται μια ιστοσελίδα. Η βασική δομή ενός αρχείου html έχει ως εξής:
<html>
<head>
...
</head>
<body>
Περιεχόμενο
</body>
</html>- Όπως παρατηρούμε από το παραπάνω πλαίσιο κώδικα, το έγγραφο HTML μας ξεκινά με την ετικέτα <html> η οποία δηλώνει την έναρξη ενός εγγράφου html.
- Ύστερα ακολουθεί το άνοιγμα μιας ετικέτας <head> η οποία πρέπει οπωσδήποτε να υπάρχει μέσα στο έγγραφο html μας μόνο μια φορά και δηλώνει ένα σημείο στην ιστοσελίδα μας το οποίο δηλώνουμε σημασιολογικά tags και scripts. Όλη η head δεν εμφανίζεται στον περιηγητή επομένως όσα tags συμπεριλαμβάνονται στην head ετικέτα δεν θα εμφανιστούν στην ιστοσελίδα μας.
- Μετά το κλείσιμο του </head> ακολουθεί το άνοιγμα μιας ετικέτας <body> η οποία αποτελεί το κύριο «σώμα» της ιστοσελίδας μας, ότι γράψουμε μέσα σε αυτό το ζευγάρι ετικετών φαίνεται κανονικά στον περιηγητή μας.
- Μετά από το κλείσιμο του </body> κλείνει και το tag της html.
Κάθε λοιπόν έγγραφο html ΥΠΟΧΡΕΩΤΙΚΑ πλαισιώνεται σε ένα ζευγάρι tags ,<html></html> το οποίο περιέχει ΟΠΟΣΔΗΠΟΤΕ, ΠΡΩΤΑ ένα ζευγάρι <head></head> και ΥΣΤΕΡΑ ένα ζευγάρι <body></body>.
Χρησιμοποιούμε αυτή την σειρά στα tags διότι, στο head όπως είπαμε συμπεριλαμβάνουμε όλες εκείνες τις πληροφορίες που θέλουμε να φορτωθούν ΠΡΙΝ ξεκινήσει η ιστοσελίδα να σχεδιάζεται στον περιηγητή μας. Αν τοποθετούσαμε το head ΜΕΤΑ το body η φόρτωση αυτή θα γινόταν με λάθος σειρά, έτσι αν τοποθετούσαμε ένα script ή ένα css μέσα στο head της ιστοσελίδας που θα βρισκόταν όμως στο τέλος της, δεν θα γινόταν εφαρμογή του css ή εκτέλεση του script πριν φορτωθεί πλήρως η ιστοσελίδα και αυτό θα οδηγούσε σε μια ιστοσελίδα κενή μορφοποίηση ώσπου να φτάσει στο σημείο που υπάρχει και να την εφαρμόσει. .
Τι είναι οι ετικέτες;
Η html όπως και κάθε γλώσσα markup (πχ XML) χρησιμοποιεί ετικέτες – tags – για να περιγράψει την μορφή ενός αρχείου html. Οι ετικέτες αυτές περιέχουν πληροφορίες ή εντολές τις οποίες αναγνωρίζει ένας περιηγητής και σύμφωνα με αυτές μορφοποιεί και στην συνέχεια εμφανίζει τα περιεχόμενα της ιστοσελίδας. Μια ετικέτα είναι μια λεκτική ονομασία όπως πχ… html πλαισιωμένη μέσα σε σύμβολα ανισότητας όταν πρόκειται για ετικέτα ανοίγματος, πχ <html> , και πλαισιωμένη μέσα σε σύμβολα ανισότητας μαζί με μια κάθετο σε αυτά δλδ </html> . Όταν υπάρχει μια ετικέτα ανοίγματος συνήθως υπάρχει και μια ετικέτα κλεισίματος, βρίσκονται ανά ζευγάρια στην πλειοψηφία των περιπτώσεων, αλλά υπάρχουν και εξαιρέσεις. Ανάμεσα στην ετικέτα ανοίγματος και την ετικέτα κλεισίματος μπορούν να τοποθετηθούν άλλες ετικέτες ή κείμενο.
Μία ετικέτα επίσης μπορεί να έχει attributes (ιδιότητες) οι οποίες μπορεί να αποτελούν διάφορες πληροφορίες ή εντολές για την συγκεκριμένη ετικέτα. Μία ιδιότητα είναι ένα λεκτικό το οποίο συμπεριλαμβάνεται μέσα στην ετικέτα ανοίγματος μια ετικέτας και μαζί με το λεκτικό αυτό ένα ίσον (=) και ένα ζευγάρι εισαγωγικών ("") το οποίο μπορεί να περιέχει κάποια πληροφορία.
Ένα παράδειγμα ενός attribute είναι το “lang” το οποίο αποτελεί attribute της ετικέτας html και καθορίζει σε τι γλώσσα είναι γραμμένο το περιεχόμενο της συγκεκριμένης ιστοσελίδας. Το περιεχόμενο του attribute αποτελεί ένα από τους δεκάδες κωδικούς ISO που καθορίζουν μια γλώσσα, για την ελληνική για παράδειγμα είναι «el» ενώ για την αγγλική «en». Αν θέλαμε λοιπόν να ορίσουμε στην ιστοσελίδα μας ότι η γλώσσα της είναι η ελληνικά θα γράφαμε το παρακάτω:
Αρχείο: firstPage.html
<html lang="el">
<head>
<title>Πρώτη Σελίδα</title>
</head>
<body>
Περιεχόμενο
</body>
</html>Αν αποθηκεύσουμε αυτό το αρχείο με κατάληξη html και ύστερα το ανοίξουμε με κάποιο πρόγραμμα περιήγησης (στην περίπτωση μας χρησιμοποιούμε Google Chrome) τότε θα δούμε το αποτέλεσμα, όπως ακριβώς παρακάτω:
Αποτέλεσμα:
