Εισαγωγή στην HTML
Η HTML είναι η κύρια γλώσσα σήμανσης για τη δημιουργία ιστοσελίδων.
Τι είναι η HTML;
Η HTML σημαίνει Hyper Text Markup Language
Η HTML είναι η κύρια γλώσσα σήμανσης για τη δημιουργία ιστοσελίδων.
Η HTML περιγράφει τη δομή μιας ιστοσελίδας.
Η HTML αποτελείται από μια σειρά στοιχείων.
Τα στοιχεία της HTML περιγράφουν στον περιηγητή πως να εμφανίσει το περιεχόμενο.
Τα στοιχεία της HTML σηματοδοτούν κομμάτια του περιεχομένου, όπως “αυτό είναι ένας τίτλος”, “αυτό είναι ένα παράγραφος”, “αυτό είναι ένας σύνδεσμος”, κ.λπ.
Ένα απλό Έγγραφο HTML
Παρακάτω βρίσκεται ένα παράδειγμα ενός απλού εγγράφου HTML, που αποτελείται από τη βασική δομή μιας ιστοσελίδας.
<!DOCTYPE html> <html> <head> <title>Τίτλος Ιστοσελίδας</title> </head> <body> <h1>Αυτός είναι ο τίτλος της σελίδας</h1> <p>Αυτό είναι ένα παράδειγμα περιεχομένου.</p> </body> </html>
Το παραπάνω παράδειγμα αποτελείται από τα εξής στοιχεία:
<!DOCTYPE html>
: Δηλώνει την έκδοση της HTML που χρησιμοποιείται.<html>
: Το ανοίγμα της κύριας ετικέτας της σελίδας.<head>
: Η ετικέτα κεφαλίδας, που περιέχει μεταδεδομένα και άλλα στοιχεία που δεν εμφανίζονται στη σελίδα.<title>
: Η ετικέτα τίτλου, που ορίζει τον τίτλο της σελίδας που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης.<body>
: Η κύρια ετικέτα σώματος, που περιέχει το περιεχόμενο της σελίδας.<h1>
: Η ετικέτα τίτλου επικεφαλίδας, που δηλώνει τον κύριο τίτλο της σελίδας.<p>
: Η ετικέτα παραγράφου, που δηλώνει ένα κείμενο παραγράφου στη σελίδα.
[adinserter block=”2″]
Τι είναι ένα Στοιχείο HTML;
Ένα στοιχείο HTML ορίζεται από μια ετικέτα έναρξης, κάποιο περιεχόμενο και μια ετικέτα λήξης:
<ετικέτα> Περιεχόμενο εδώ…
Το στοιχείο HTML αποτελείται από όλα τα στοιχεία μεταξύ της ετικέτας έναρξης και της ετικέτας λήξης:
Ο πρώτος μου τίτλος
η πρωτη μου παράγραφος.
Στο παραπάνω παράδειγμα, το στοιχείο <h1>
αποτελείται από την ετικέτα έναρξης <h1>
και την ετικέτα λήξης </h1>
, καθώς και το περιεχόμενο μεταξύ τους, “Ο πρώτος μου τίτλος”. Το ίδιο ισχύει και για το στοιχείο <p>
.
Τα στοιχεία HTML μπορούν να περιλαμβάνουν άλλα στοιχεία ως παιδιά τους, καθώς και άλλα χαρακτηριστικά όπως το id, το class, το style, κ.λπ.
Ετικέτα έναρξης | Περιεχόμενο Στοιχείου | Ετικέτα λήξης |
---|---|---|
<h1> | Ο πρώτος μου τίτλος | </h1> |
<p> | Η πρώτη μου παράγραφος. | </p> |
<br> | κανένα | κανένα |
Περιηγητές Ιστού
Ο σκοπός ενός περιηγητή ιστού (Chrome, Edge, Firefox, Safari) είναι να διαβάζει έγγραφα HTML και να τα εμφανίζει σωστά.
Ο περιηγητής δεν εμφανίζει τις ετικέτες HTML, αλλά τις χρησιμοποιεί για να προσδιορίσει πώς να εμφανίσει το έγγραφο.
Δομή Σελίδας HTML
Μια σελίδα HTML αποτελείται από διάφορα στοιχεία, τα οποία συνήθως περιλαμβάνουν το κεφαλίδα (header), το σώμα (body) και το υποσέλιδο (footer).
Το στοιχείο header περιέχει συνήθως τίτλους, λογότυπα, μενού πλοήγησης και άλλα παρόμοια στοιχεία. Το στοιχείο body περιέχει το κυρίως περιεχόμενο της σελίδας, όπως κείμενο, εικόνες, βίντεο, πίνακες και άλλα στοιχεία. Το στοιχείο footer περιέχει συνήθως πληροφορίες σχετικά με τον ιστότοπο, όπως δικαιώματα πνευματικής ιδιοκτησίας, σύνδεσμους για κοινωνικά δίκτυα και άλλα παρόμοια στοιχεία.
[adinserter block=”3″]
Η σύνταξη ενός έγκυρου εγγράφου HTML απαιτεί τη συμπερίληψη ενός αριθμού απαραίτητων ετικετών και στοιχείων, όπως η ετικέτα στην αρχή του εγγράφου και τις ετικέτες , και στο σώμα του εγγράφου. Η συμμόρφωση με τα πρότυπα HTML είναι σημαντική για την επίτευξη ενός σωστού και συμβατού σχεδιασμού ιστοσελίδων, καθώς και για την επίτευξη της βέλτιστης απόδοση της σελίδας σε διάφορους περιηγητές ιστού και συσκευές.
Μια τυπική δομή σελίδας HTML μπορεί να φαίνεται κάπως έτσι:
<!DOCTYPE html> <html> <head> <title>Τίτλος σελίδας</title> </head> <body> <header> <h1>Κύριος τίτλος σελίδας</h1> <nav> <ul> <li><a href="#">Αρχική</a></li> <li><a href="#">Σχετικά με εμάς</a></li> <li><a href="#">Επικοινωνία</a></li> </ul> </nav> </header> <main> <h2>Δευτερεύον τίτλος σελίδας</h2> <p>Κείμενο σελίδας...</p> </main> <footer> <p>Δικαιώματα πνευματικής ιδιοκτησίας © 2021</p> </footer> </body> </html>
Στο παραπάνω παράδειγμα, το στοιχείο <header>
περιέχει τον κύριο τίτλο της σελίδας και το μενού πλοήγησης, ενώ το στοιχείο <main>
περιέχει το κυρίως περιεχόμενο της σελίδας. Το στοιχείο <footer>
περιέχει πληροφορίες που σχετίζονται με τον ιστότοπο, όπως τα δικαιώματα πνευματικής ιδιοκτησίας.
Παρόλο που η σύνταξη ενός εγγράφου HTML δεν επηρεάζει απευθείας το περιεχόμενο της σελίδας, η σωστή δομή του και η χρήση των κατάλληλων στοιχείων μπορεί να βελτίσει την προσβασιμότητα, την απόδοση και τον σχεδιασμό της ιστοσελίδας σας. Συγκεκριμένα, μια σωστά δομημένη σελίδα μπορεί να βοηθήσει στην κατανόηση του περιεχομένου της από μηχανές αναζήτησης και αναγνώστες βοηθητικής τεχνολογίας, ενώ επίσης μπορεί να βελτιώσει την αναζητησιμότητα της σελίδας στις μηχανές αναζήτησης.
Επιπλέον, η συμμόρφωση με τα πρότυπα HTML είναι σημαντική για τη διασφάλιση της συμβατότητας της σελίδας με διάφορους περιηγητές ιστού και συσκευές. Η συμβατότητα της σελίδας εξαρτάται από την ορθή χρήση των στοιχείων HTML, την επιλογή των κατάλληλων γνωρισμάτων και την εφαρμογή των σωστών τιμών για αυτά τα γνωρίσματα.
Συνολικά, η σωστή δομή σελίδας HTML είναι σημαντική για τη βέλτιστη λειτουργία και απόδοση μιας ιστοσελίδας, καθώς επίσης και για τη βελτιωμένη προσβασιμότητα και τη συμβατότητα της σελίδας σε διάφορες πλατφόρμες και περιβάλλοντα.