HTML – Το Στοιχείο Head
Το στοιχείο HTML <head> είναι ένας δοχείος για τα ακόλουθα στοιχεία: <title>, <style>, <meta>, <link>, <script>, και <base>.
Το στοιχείο <head> περιλαμβάνει πληροφορίες και μεταδεδομένα για την ιστοσελίδα. Οι ετικέτες που τοποθετούνται μέσα στο <head> δεν εμφανίζονται απευθείας στην ιστοσελίδα, αλλά παρέχουν πληροφορίες σχετικά με την ιστοσελίδα ή επηρεάζουν τη συμπεριφορά της.
Παρακάτω παρουσιάζονται μερικά παραδείγματα στοιχείων που μπορούν να βρίσκονται εντός του <head>:
<head> <title>Τίτλος Ιστοσελίδας</title> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head>
Στο παραπάνω παράδειγμα, ο τίτλος της ιστοσελίδας ορίζεται μέσω της ετικέτας <title>. Η ετικέτα <meta> ορίζει τον χαρακτήρα κωδικοποίησης της ιστοσελίδας. Η ετικέτα <link> συνδέει το αρχείο CSS με την ιστοσελίδα, ενώ η ετικέτα <script> φορτώνει ένα αρχείο JavaScript.
Το Στοιχείο HTML <title>
Το στοιχείο <title> καθορίζει τον τίτλο του εγγράφου. Ο τίτλος πρέπει να αποτελείται μόνο από κείμενο και εμφανίζεται είτε στη γραμμή τίτλου του προγράμματος περιήγησης είτε στην καρτέλα της σελίδας.
Το στοιχείο <title> είναι υποχρεωτικό στα έγγραφα HTML!
Ο περιεχόμενος ενός τίτλου σελίδας είναι πολύ σημαντικός για τη βελτιστοποίηση μηχανών αναζήτησης (SEO)! Ο τίτλος της σελίδας χρησιμοποιείται από τους αλγόριθμους των μηχανών αναζήτησης για να αποφασίσουν τη σειρά καταχώρησης των σελίδων στα αποτελέσματα αναζήτησης.
Το στοιχείο <title>:
Ορίζει έναν τίτλο στη γραμμή εργαλείων του προγράμματος περιήγησης
Παρέχει έναν τίτλο για τη σελίδα όταν προστίθεται στα αγαπημένα
Εμφανίζει έναν τίτλο για τη σελίδα στα αποτελέσματα αναζήτησης των μηχανών αναζήτησης.
[adinserter block=”2″]
Παρακάτω παρατίθεται ένα παράδειγμα σε μορφή κώδικα:
<!DOCTYPE html> <html> <head> <title>Παράδειγμα Ιστοσελίδας</title> </head> <body> <h1>Καλώς ήρθατε!</h1> <p>Αυτή είναι μια παράδειγματική ιστοσελίδα.</p> </body> </html>
Στο παραπάνω παράδειγμα, η ετικέτα <!DOCTYPE html> καθορίζει τον τύπο του εγγράφου ως HTML5. Η ετικέτα <html> αντιπροσωπεύει το ξεκίνημα και το τέλος του εγγράφου HTML. Το στοιχείο <head> περιλαμβάνει τον τίτλο της ιστοσελίδας, ενώ το στοιχείο <body> περιλαμβάνει το περιεχόμενο της ιστοσελίδας όπως κείμενο και άλλα στοιχεία.
Το στοιχείο HTML <style>
Το στοιχείο <style> χρησιμοποιείται για να καθορίσει πληροφορίες στυλ για μια μόνο σελίδα HTML:
<!DOCTYPE html>
<html>
<head>
<title>Οδηγός HTML</title>
<style>
/* Προσθέστε εδώ τις κανόνες στυλ */
</style>
</head>
<body>
<h1>Κεφαλίδα</h1>
<p>Αυτό είναι ένα παράδειγμα κειμένου μέσα σε μια παράγραφο.</p>
<h2>Υποκεφαλίδα</h2>
<p>Άλλο ένα παράδειγμα κειμένου.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, μπορείτε να προσθέσετε τους κανόνες στυλ μέσα στο στοιχείο <style>. Για παράδειγμα:
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
}
</style>
Στο παραπάνω παράδειγμα, οι κανόνες στυλ ορίζουν ότι οι επικεφαλίδες <h1> θα έχουν μπλε χρώμα και μέγεθος γραμματοσειράς 24px, ενώ οι παράγραφοι <p> θα έχουν κόκκινο χρώμα.
Αυτό είναι ένα μικρό παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το στοιχείο <style> για να προσθέσετε στυλ στη σελίδα HTML σας. Μπορείτε να προσαρμόσετε τους κανόνες στυλ σύμφωνα με τις ανάγκες σας.
Το στοιχείο HTML <link>
Το στοιχείο <link> καθορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και ενός εξωτερικού πόρου.
Η ετικέτα <link> χρησιμοποιείται συνήθως για να συνδέσει εξωτερικά style sheets (φύλλα στυλ):
<!DOCTYPE html>
<html>
<head>
<title>Οδηγός HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Κεφαλίδα</h1>
<p>Αυτό είναι ένα παράδειγμα κειμένου μέσα σε μια παράγραφο.</p>
<h2>Υποκεφαλίδα</h2>
<p>Άλλο ένα παράδειγμα κειμένου.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, η ετικέτα <link> χρησιμοποιείται για να συνδέσει ένα εξωτερικό style sheet με όνομα “styles.css”. Το style sheet περιέχει τους κανόνες στυλ που εφαρμόζονται στη σελίδα HTML.
Μπορείτε να προσθέσετε το αντίστοιχο style sheet αρχείο με την επέκταση .css και να προσαρμόσετε τους κανόνες στυλ σύμφωνα με τις ανάγκες σας.
Αυτό είναι ένα μικρό παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε την ετικέτα <link> για να συνδέσετε εξωτερικά style sheets στη σελίδα HTML σας.
[adinserter block=”3″]
Το στοιχείο HTML <meta>
Το στοιχείο <meta> χρησιμοποιείται συνήθως για να καθορίσει τον χαρακτήρα κωδικοποίησης, την περιγραφή της σελίδας, τις λέξεις-κλειδιά, τον συντάκτη του εγγράφου και τις ρυθμίσεις προβολής (viewport).
Τα μεταδεδομένα (metadata) δεν θα εμφανιστούν στη σελίδα, αλλά χρησιμοποιούνται από τους φυλλομετρητές (πώς να εμφανίσουν το περιεχόμενο ή να ανανεώσουν τη σελίδα), από μηχανές αναζήτησης (λέξεις-κλειδιά) και άλλες υπηρεσίες του web.
Παρακάτω παρατίθεται ένα παράδειγμα χρήσης του στοιχείου <meta> για την καθορισμό χαρακτήρα κωδικοποίησης, περιγραφής σελίδας και λέξεων-κλειδιών:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Αυτό είναι ένα παράδειγμα σελίδας HTML">
<meta name="keywords" content="HTML, μεταδεδομένα, παράδειγμα">
<title>Οδηγός HTML</title>
</head>
<body>
<h1>Κεφαλίδα</h1>
<p>Αυτό είναι ένα παράδειγμα κειμένου μέσα σε μια παράγραφο.</p>
<h2>Υποκεφαλίδα</h2>
<p>Άλλο ένα παράδειγμα κειμένου.</p>
</body>
</html>
Στο παραπάνω παράδειγμα, χρησιμοποιούνται τρία στοιχεία :
- Το στοιχείο
<meta charset="UTF-8">καθορίζει τον χαρακτήρα κωδικοποίησης της σελίδας ως UTF-8. Αυτό εξασφαλίζει ότι οι χαρακτήρες που χρησιμοποιούνται στη σελίδα θα παρουσιάζονται σωστά. - Το στοιχείο
<meta name="description" content="Αυτό είναι ένα παράδειγμα σελίδας HTML">καθορίζει την περιγραφή της σελίδας. Αυτό το κείμενο μπορεί να χρησιμοποιηθεί από μηχανές αναζήτησης για να κατανοήσουν το περιεχόμενο της σελίδας. - Το στοιχείο
<meta name="keywords" content="HTML, μεταδεδομένα, παράδειγμα">καθορίζει τις λέξεις-κλειδιά που σχετίζονται με τη σελίδα. Αυτές οι λέξεις-κλειδιά μπορούν να βοηθήσουν στην αναζήτηση και την ευρετηρίαση της σελίδας από μηχανές αναζήτησης.
Μπορείτε να προσθέσετε περισσότερα στοιχεία για να καθορίσετε περισσότερες πληροφορίες σχετικά με τη σελίδα σας, όπως τον συντάκτη του εγγράφου, τον χρόνο ανανέωσης κ.λπ.
Ορισμός του χαρακτήρα κωδικοποίησης που χρησιμοποιείται:
<meta charset="UTF-8">
Ορισμός λέξεων-κλειδιών για μηχανές αναζήτησης:
<meta name="keywords" content="HTML, CSS, JavaScript">
Ορισμός μιας περιγραφής της ιστοσελίδας σας:
<meta name="description" content="Δωρεάν μαθήματα για τον ιστό">
Ορισμός του συντάκτη μιας σελίδας:
<meta name="author" content="Γιάννης Παπαδόπουλος">
Ανανέωση του εγγράφου κάθε 30 δευτερόλεπτα:
<meta http-equiv="refresh" content="30">
Ορισμός του viewport για να εμφανίζεται σωστά η ιστοσελίδα σε όλες τις συσκευές:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Αυτά είναι μερικά παραδείγματα για το πώς μπορείτε να χρησιμοποιήσετε το στοιχείο για να καθορίσετε μεταδεδομένα στη σελίδα HTML σας. Μπορείτε να προσαρμόσετε τα περιεχόμενα και τις τιμές στα παραδείγματα σύμφωνα με τις ανάγκες σας.
[adinserter block=”4″]
Ορισμός του viewport
Το viewport αναφέρεται στην ορατή περιοχή μιας ιστοσελίδας για τον χρήστη. Αυτή η περιοχή ποικίλει ανάλογα με τη συσκευή – θα είναι μικρότερη σε ένα κινητό τηλέφωνο σε σχέση με μια οθόνη υπολογιστή.
Για να ορίσετε το viewport, θα πρέπει να περιλαμβάνετε το εξής στοιχείο <meta> σε όλες τις ιστοσελίδες σας:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Αυτό δίνει οδηγίες στον φυλλομετρητή για το πώς να ελέγχει τις διαστάσεις και την κλιμάκωση της σελίδας.
Το τμήμα width=device-width ορίζει το πλάτος της σελίδας να ακολουθεί το πλάτος της οθόνης της συσκευής (το οποίο θα ποικίλει ανάλογα με τη συσκευή).
Το τμήμα initial-scale=1.0 ορίζει το αρχικό επίπεδο μεγέθυνσης όταν η σελίδα φορτώνεται για πρώτη φορά από τον φυλλομετρητή.
Αυτό είναι ένα παράδειγμα για το πώς να ορίσετε το viewport στις ιστοσελίδες σας. Περιλαμβάνοντας αυτό το στοιχείο <meta>, θα δώσετε στον φυλλομετρητή οδηγίες για το πώς να προβάλλει τη σελίδα σωστά σε διάφορες συσκευές. Αυτό εξασφαλίζει ότι η ιστοσελίδα σας θα εμφανίζεται σωστά και θα προσαρμόζεται στην οθόνη της συσκευής που την προβάλλει.
Μπορείτε να προσαρμόσετε τις τιμές του πλάτους (width) και της αρχικής κλίμακας (initial-scale) ανάλογα με τις ανάγκες σας και τις απαιτήσεις σχεδιασμού της ιστοσελίδας σας.
Αυτή η οδηγία για το viewport είναι σημαντική για τη δημιουργία ανταποκρίσεων ιστοσελίδων (responsive web design), καθώς επιτρέπει στη σελίδα σας να προβάλλεται σωστά και να προσαρμόζεται σε διάφορες συσκευές και οθόνες.
Το στοιχείο HTML <script>
Το στοιχείο <script> χρησιμοποιείται για τον ορισμό των client-side JavaScripts (JavaScript που εκτελείται στην πλευρά του πελάτη, δηλαδή στον φυλλομετρητή).
Το παρακάτω JavaScript γράφει το κείμενο “Γειά σου, JavaScript!” μέσα σε ένα στοιχείο HTML με id=”demo”:
<!DOCTYPE html>
<html>
<head>
<title>Οδηγός HTML</title>
<script>
document.getElementById("demo").innerHTML = "Γειά σου, JavaScript!";
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>
Στο παραπάνω παράδειγμα, ο κώδικας JavaScript που βρίσκεται μέσα στο στοιχείο <script> επιλέγει το στοιχείο με id “demo” χρησιμοποιώντας την μέθοδο document.getElementById(). Έπειτα, με τη χρήση της ιδιότητας innerHTML, ορίζει το περιεχόμενο του στοιχείου ως “Γειά σου, JavaScript!”.
Το στοιχείο HTML <base>
Το στοιχείο <base> καθορίζει τον βασικό URL και/ή τον στόχο για όλα τα σχετικά URLs σε μια σελίδα.
Το στοιχείο <base> πρέπει να έχει είτε το χαρακτηριστικό href είτε το χαρακτηριστικό target παρόν, ή και τα δύο.
Μπορεί να υπάρχει μόνο ένα μοναδικό στοιχείο <base> σε ένα έγγραφο!
Παράδειγμα
Ορίστε έναν προεπιλεγμένο URL και έναν προεπιλεγμένο στόχο για όλους τους συνδέσμους σε μια σελίδα:
<!DOCTYPE html>
<html>
<head>
<title>Οδηγός HTML</title>
<base href="https://www.example.com/" target="_blank">
</head>
<body>
<a href="page1.html">Σελίδα 1</a>
<a href="page2.html">Σελίδα 2</a>
</body>
</html>
Στο παραπάνω παράδειγμα, το στοιχείο <base> ορίζει το βασικό URL ως “https://www.example.com/” και τον προεπιλεγμένο στόχο ως “_blank” (ανοίγει τους συνδέσμους σε νέα καρτέλα προγράμματος περιήγησης).
Αυτό είναι ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το στοιχείο <base> για να καθορίσετε τον βασικό URL και τον προεπιλεγμένο στόχο για όλους τους συνδέσμους σε μια σελίδα HTML σας. Μπορείτε να προσαρμόσετε τις τιμές των χαρακττηριστικών href και target σύμφωνα με τις ανάγκες σας.
Σημείωση: Το στοιχείο <base> πρέπει να εμφανίζεται μέσα στην ετικέτα <head> του έγγραφου HTML.