Εισαγωγή στην HTML – Τι είναι HTML
Η HTML προέρχεται από τις λέξεις Hyper Text Markup Language. Πρόκειται για μια γλώσσα επισήμανσης η οποία έχει σκοπό την σήμανση των στοιχείων, τα οποία εμφανίζονται σε μια ιστοσελίδα, ανάλογα με τον τύπο τους. Η σήμανση των στοιχείων αυτών γίνεται με την χρήση html ετικετών ή αλλιώς html tags. Η χρήση των html tags μαζί με το κείμενο και τα όποια άλλα στοιχεία, όπως εικόνα και κείμενο, μας δίνουν μια ιστοσελίδα την οποία βλέπουμε στον φυλλομετρητή μας.
Η δομή μιας ετικέτας html
Απαραίτητο σημείο στην εισαγωγή στην html είναι η κατανόηση της δομής της ετικέτας html. Κάθε html tag είναι στην ουσία ένα ζευγάρι ετικετών το οποίο περικλείει το στοιχείο το οποίο θέλουμε να επισημάνουμε. Έχουμε δηλαδή ένα tag ανοίγματος, ακολουθεί το όνομα του tag και στην συνέχεια έχουμε το tag κλεισίματος.
Ποιο συγκεκριμένα το tag ανοίγματος ορίζεται με:
- Το σύμβολο «<»,
- ακολουθεί το όνομα του tag,
- το σύμβολο «>»
Ένα τέτοιο παράδειγμα είναι το <όνομα tag>
Ένα tag περικλείει μια σειρά από σύμβολα και αριθμούς, όπως κείμενο, ή και άλλα tags και στην συνέχεια τερματίζεται η ισχύς του, με ένα tag κλεισίματος, με τον ίδιο περίπου τρόπο με τον οποίον ορίζεται, με την διαφορά ότι πριν το όνομα του μπαίνει το σύμβολο «/»:
- Σύμβολο «</»,
- ακολουθεί το όνομα του tag,
- σύμβολο «>»
Ένα τέτοιο παράδειγμα είναι το ακόλουθο <p>κείμενο</p> το ο ποίο ορίζει μια παράγραφο ανάμεσα στο tag ανοίγματος και κλεισίματος μιας παραγράφου.
Η δομή μιας ιστοσελίδας HTML
Σε κάθε σελίδα HTML υπάρχει η εξής ιεραρχία:
- <Html>
- <head>
- <title>…..</title>
- …….
- </head>
- <body>
- <p>…….</p>
- …….
- </body>
- <head>
- </html>
Μία σελίδα html ορίζεται από το tag html ότι υπάρχει μέσα σε αυτό το ζεύγος ετικετών, ορίζει το όλο σώμα της ιστοσελίδας.
Μέσα σε αυτό ορίζεται η κεφαλή της σελίδας, head, η οποία περιλαμβάνει τον τίτλο της και μετά-δεδομένα τα οποία αφορούν τις μηχανές αναζήτησης. Ότι βρίσκεται μέσα στην κεφαλίδα της σελίδας, δεν εμφανίζεται στον φυλλομετρητή παρά μόνο ο τίτλος της.
Το tag body αφορά οτιδήποτε προβάλλεται στην σελίδα html.
Παράδειγμα σελίδας HTML
Έστω ότι έχουμε τον ακόλουθο κώδικα html.
<!DOCTYPE html> <html> <head> <title>Untitled Document</title> </head> <body> Απλό κείμενο <b> με έντονα </b> γράμματα <p>Αυτό το κείμενο ανήκει σε παράγραφο</p> </body> </html>
Το οποίο παράγει το ακόλουθο αποτέλεσμα
Το κείμενο ξεκινάει με την ετικέτα <!DOCTYPE html> η οποία δηλώνει στον φυλλομετρητή ότι ακολουθεί html κώδικας.
Στην συνέχεια ανοίγει η html ετικέτα μαζί με την ετικέτα head της κεφαλίδας. Σε αυτήν, ορίζουμε τον τίτλο της σελίδας με χρήση της ετικέτας title.
Στην συνέχεια κλείνει η ετικέτα head για να δώσει την σειρά της στην ετικέτα body η οποία ορίζει το ορατό σώμα της ιστοσελίδας. Αυτό αποτελείται από ένα απλό κείμενο. Σε αυτό, για να ορίσουμε ένα κομμάτι του με έντονη γραφή, χρησιμοποιούμε την ετικέτα έντονης γραφής, b(old). Ακολουθεί μια ετικέτα παραγράφου, p.
Τέλος κλείνει η ετικέτα body του σώματος της σελίδας μαζί με την ετικέτα html του εγγράφου.
Επίλογος
Είδαμε μια εισαγωγή στην html με τα δομικά στοιχεία από τα οποία αποτελείται ένα έγγραφο html. Σε επόμενα άρθρα θα προχωρήσουμε στην html βλέποντας ορισμένα κύρια στοιχεία τα οποία θα μας βοηθήσουν αφ’ ενός να κατανοήσουμε την html αλλά και να μπορούμε να παρεμβαίνουμε σε html κώδικα.
