Structure of HTML page – HTML tags
DOCTYPE
Κάθε αρχείο html αποτελεί μία σελίδα. Κάθε HTML σελίδα πρέπει να έχει συγκεκριμένη μορφή:
<!DOCTYPE html>
<html>
<head>
<title>Τίτλος σελίδας</title>
</head>
<body>
Περιεχόμενο σελίδας
</body>
</html>
Στη σελίδα http://validator.w3.org μπορούμε να ανεβάσουμε το αρχείο html που έχουμε φτιάξει και να δούμε αν ο κώδικας ακολουθεί το πρότυπο που ορίζεται από το W3C (World Wide Web Consortium) για κάθε είδος doctype.
Το αποτέλεσμα του validator για το παραπάνω κομμάτι κώδικα html
Html tag: <html>
Η πρώτη html ετικέτα που πρέπει να υπάρχει σε ένα αρχείο html είναι η ετικέτα <html>. Το συγκεκριμένο tag ενημερώνει τον browser ότι ο κώδικας που περικλείεται ανάμεσα στα <html> και </html> είναι γλώσσα σήμανσης HTML.
Html tag: <head>
Το επόμενο tag που πρέπει να υπάρχει στον κώδικα είναι το <head>. Χρησιμοποιείται για την καταχώρηση στοιχείων που δεν είναι ορατά (όχι όλα τουλάχιστον) στη σελίδα. Μόνο συγκεκριμένα tags μπορούν να χρησιμοποιηθούν μέσα στο κομμάτι του <head>, κάθε ένα από τα οποία έχει συγκεκριμένο σκοπό.
Html tag: <title>
Στον παραπάνω κώδικά είδαμε τη χρήση του tag <title> μέσα στο <head>. Το <title> όριζει τον τίτλο της σελίδας. Αν ανοίξουμε το html αρχείο στον browser, θα δούμε στο tab του browser τον τίτλο που έχουμε ορίσει, καθώς επίσης και στο πάνω μέρος του browser.
Ο τίτλος της σελίδας είναι ορατός στο πάνω μέρος του browser
Html tag: <script>
Το <script> χρησιμοποιείται για να ορίσουμε κάποιο κομμάτι κώδικα που θέλουμε να εκτελεστεί. Ο κώδικας αυτός συνήθως είναι σε γλώσσα javascript, η οποία θα μελετηθεί εκτενέστερα σε επόμενο κεφάλαιο. Π.χ.
<script type="text/javascript">
<!--script
Κώδικας javascript σε σχόλια
-->
</script>
Html tag: <style>
Η ετικέτα <style> χρησιμοποιείται για να οριστεί η πληροφορία που σχετίζεται με το αισθητικό αποτέλεσμα της σελίδας. Ο κώδικας που περικλείεται στο <style> είναι σε μορφή css (Cascading Style Sheets) και θα μελετηθεί σε επόμενο κεφάλαιο. Π.χ.
<style type="text/css">
* {
font-size:11px;
}
</style>
Html tag: <link>
Χρησιμοποιείται για τη σύνδεση του αρχείου html με εξωτερικά αρχεία, κυρίως αρχεία css. Με αυτό τον τρόπο διαχωρίζεται ο κώδικας html από τον κώδικα css, γεγονός που συντελεί σε πιο ευανάγνωστο κώδικα. Π.χ.
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
Html tag: <meta>
Χρησιμοποίειται για τον ορισμό των πληροφοριών meta της σελίδας (meta data). Οι πληροφορίες αυτές δεν είναι ορατές στην ιστοσελίδα, ωστόσο έχουν πολλές φορές σημαντικό λόγο ύπαρξης. Για παράδειγμα κάποιες από τις πληροφορίες meta είναι πολύ σημαντικές για το κομμάτι του Search Engine Optimization (SEO), τη διαδικαδία δηλαδή βελτίωσης της θέσης της ιστοσελίδας σε μία μηχανή αναζήτησης (π.χ. Google). Π.χ.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="keywords" content="mini, play, games, παιχνίδια, flash" />
<meta http-equiv="description" content="Παίξτε ελεύθερα πολλά flash παιχνίδια, ιδανικά για χαλάρωση και διασκέδαση." />
Η πρώτη σειρά (Content-Type) καθορίζει την κωδικοποίηση της σελίδας, η δεύτερη τις λέξεις κλειδιά με τις οποίες μπορεί ένας χρήστης να βρει τη σελίδα σε μία μηχανή αναζήτησης και η τρίτη μία μικρή περιγραφή της σελίδας.
Html tag: <base>
Ορίζει τη βάση αρχής για τον καθορισμό των σχετικών urls. Π.χ.
<base href="http://www.miniplay.gr./images/" target="_blank" />
Αν όλες οι εικόνες της ιστοσελίδας είναι αποθηκευμένες στον κατάλογο images, για να τις εμφανίσουμε στη σελίδα δε θα χρειαζόταν να γράψουμε:
<img src=”images/picture.jpg” /> αλλά
<img src=”picture.jpg” />
Html tag: <body>
Χρησιμοποιείται μετά το κλείσιμο του στοιχείο head και αποτελεί το στοιχείο που περιέχει όλο το περιεχόμενο της ιστοσελίδας. Ο html κώδικας που γράφεται για τη σελίδα, περιέχεται μέσα στο body. Κάποιες από τις ιδιότητές του είναι:
- bgcolor: ορισμός χρώματος του φόντου της σελίδας
- text: ορισμός χρώματος των χαρακτήρων του κειμένου
- background: το URL της εικόνας που θα εμφανίζεται στο φόντο της σελίδας
Π.χ.
<body text="#CC0000" background="images/thundercats.jpg">
Περιεχόμενο σελίδας
</body>
Χρήση background εικόνα στο body