Εισαγωγή στις βασικές ετικέτες html
Στο άρθρο , ως συνέχεια των μαθημάτων html, θα δούμε τις βασικές ετικέτες html τις οποίες συναντούμε σχεδόν σε κάθε html σελίδα.
Η δομή μιας ετικέτας
Ας θυμηθούμε στο σημείο αυτό την δομή μιας ετικέτας. Έστω tagname μια οποιαδήποτε html ετικέτα. Η δομή της λοιπόν είναι:
<tagname>περιεχόμενο</tagname>.
Η ετικέτα λοιπόν, όπως έχουμε δει έχει ένα όνομα. Γύρω από το όποιο περιεχόμενο θέλουμε να μορφοποιήσουμε, βάζουμε μια ετικέτα ανοίγματος. Στην συνέχεια ακολουθεί το περιεχόμενο και τελειώνουμε με την ετικέτα κλεισίματος. Η διαφορά είναι ότι στην ετικέτα ανοίγματος έχουμε εκατέρωθεν του ονόματος της τα σύμβολα < και >, ενώ στην ετικέτα κλεισίματος πριν το όνομα της υπάρχει και το σύμβολο / το οποίο υποδηλώνει το κλείσιμο της. Οι περισσότερες ετικέτες δηλαδή λειτουργούν ως ζεύγη. Υπάρχουν όμως και εξαιρέσεις.
Κενή ετικέτα
Υπάρχουν ετικέτες οι οποίες δεν περικλείουν κάποιο περιεχόμενο. Οι ετικέτες αυτές ονομάζονται κενές ετικέτες. Τέτοια παραδείγματα είναι:
- <br /> – Ετικέτα αλλαγής γραμμής, όχι παραγράφου, πηγαίνει δηλαδή στην αμέσως επόμεη γραμμή.
- <hr > – Ετικέτα προσθήκης οριζόντιας γραμμής.
Ο ρόλος αυτών των ετικετών είναι η προσθήκη κάποιων οπτικών χαρακτηριστικών χωρίς την επίδραση τους στο όποιο περιεχόμενο.
Έγγραφο HTML – !DOCTYPE
Έχοντας μιλήσει για την δομή ενός εγγράφου html, να επισημάνουμε την σημασία ύπαρξης του ακόλουθου στοιχείου ως πρώτο εμφανιζόμενο στοιχείο σε κάθε html έγγραφο:
<!DOCTYPE html>
Αυτό που κάνει είναι να δηλώνει στον φυλλομετρητή ότι ανοίγει ένα έγγραφο τύπου html. Σε μια ολοκληρωμένη μορφή θα είναι ως εξής:
See the Pen 3.1. HTML: HTML – !DOCTYPE by Georgios Georgiou (@glgeorgiou) on CodePen.
Επικεφαλίδες – Headings
Οι επικεφαλίδες ορίζονται με τις ετικέτες <h1>…</h1> έως <h6>…</h6> με την h1 να είναι η μεγαλύτερη επικεφαλίδα, επικεφαλίδα 1, και την h6 η μικρότερη όπως φαίνεται στο ακόλουθο παράδειγμα:
See the Pen 3.1. HTML: HTML – !DOCTYPE by Georgios Georgiou (@glgeorgiou) on CodePen.
Τα μεγέθη των επικεφαλίδων παίρνουν εξ’ ορισμού τιμές βάση των ρυθμίσεων του φυλλομετρητή οι οποίες μπορούν να μεταβληθούν τόσο από τις σχετικές ρυθμίσεις όσο και με χρήση των κανόνων CSS.
Η παράγραφος
Η παράγραφος ορίζεται από την ετικέτα <p>περιεχόμενο</p>. Το χαρακτηριστικό ενός κειμένου το οποίο περικλείεται σε αυτές τις ετικέτες είναι ότι πριν και μετά από αυτές υπάρχει μια κενή γραμμή.
See the Pen HTML: 3.3 Paragraph by Georgios Georgiou (@glgeorgiou) on CodePen.
Όπως παρατηρούμε στο παράδειγμα αυτό, οριστήκαν 2 παράγραφοι με ένα ζεύγος <p> ετικετών η κάθε μια και με μια κενή γραμμή μεταξύ τους.
Βασικές ετικέτες μορφοποίησης
Ακολουθούν ορισμένες από τις βασικές ετικέτες html:
- <strong>…</strong> – Κάνει έντονο το κείμενο. Ίδια λειτουργία κάνει και η ετικέτα <b>…</b>
- <em>…</em> – Κάνει πλάγιο το κείμενο. Ίδια λειτουργία κάνει και η ετικέτα <i>…</i>
See the Pen HTML: 3.3 Paragraph by Georgios Georgiou (@glgeorgiou) on CodePen.
Παρατηρήστε ότι μορφοποιείται εκείνο το κείμενο το οποίο βρίσκεται μέσα στο αντίστοιχο ζεύγος ετικετών.
Ενσωματωμένες ετικέτες
Μπορούμε να συνδυάσουμε ετικέτες όπως στο επόμενο παράδειγμα στο οποίο συνδυάζουμε μορφοποίηση έντονου κειμένου με πλάγια γράμματα.
See the Pen HTML: 3.5. Embeded tags by Georgios Georgiou (@glgeorgiou) on CodePen.
Στο παράδειγμα αυτό παρατηρούμε ότι το μορφοποιημένο κείμενο περικλείεται μεταξύ των ετικετών <em> και <strong>. Προσοχή: στην περίπτωση αυτή, η τελευταία ετικέτα ανοίγματος πρέπει να είναι και η πρώτη ετικέτα κλεισίματος. Δηλαδή το ακόλουθο παράδειγμα είναι λάθος:
See the Pen HTML: 3.6. Wrong embeded tags by Georgios Georgiou (@glgeorgiou) on CodePen.
Κλείνοντας με τις βασικές ετικέτες html
Στο άρθρο αυτό θυμηθήκαμε το βασικό δομικό στοιχείο της html καθώς και τους τύπους των ετικετών. Στην συνέχεια είδαμε μερικές από τις βασικές και περισσότερο χρησιμοποιούμενες ετικέτες. Τέλος είδαμε την χρήση των ενσωματωμένων ετικετών.
