Σχετικά με τα στοιχεία html
Σε αυτό το σύντομο μάθημα θα κάνουμε μια διάκριση στοιχείων html σε 2 κατηγορίες, τα inline html στοιχεία και τα στοιχεία html block. Το χαρακτηριστικό εκείνο το οποίο τοποθετεί την κάθε ετικέτα στην μία ή την άλλη κατηγορία είναι το εάν η έκαστη ετικέτα πριν ή/και μετά τον ορισμό της προβάλλει κενές γραμμές στον φυλλομετρητή.
Inline στοιχεία
Το χαρακτηριστικό των inline ετικετών html είναι ότι προβάλλονται στον φυλλομετρητή χωρίς να αφήνουν κενές γραμμές. Τέτοιες ετικέτες είναι οι:
- <b>
- <td>
- <a>
- <img>
- <span>
Η inline ετικέτα span
Η ετικέτα span χρησιμοποιείται για να αποδώσει ένα διαφορετικό στυλ μέσα σε μια ετικέτα ως inline style. Για τον λόγο αυτόν περικλείει ένα κείμενο. Για την απόδοση στυλ χρησιμοποιούνται οι ιδιότητες class και style. Ας δούμε το ακόλουθο παράδειγμα:
<!DOCTYPE html> <html> <head> </head> <body> Στην <b>Ελλάδα</b> οι αιώνιοι αντίπαλοι είναι ο <span style="color:red;">Ολυμπιακός</span> και ο <span style="color:green;">Παναθηναϊκός</span>. </body> </html>
Σε αυτό βλέπουμε την χρήση των ετικετών b και span. Η span χρησιμοποιείται για την απόδοση χρώματος στην αντίστοιχη λέξη. Παρατηρούμε ότι και οι δύο ετικέτες δεν αφήνουν κενές γραμμές όταν προβάλλεται ο κώδικας στον φυλλομετρητή.
Block στοιχεία
Ένα block html στοιχείο όταν προβάλλεται στον φυλλομετρητή, υπάρχει πριν και μετά από αυτό μια κενή γραμμή. Λειτουργεί δηλαδή σαν ένα κουτί στο οποίο πάνω και κάτω από αυτό εμφανίζεται η κενή γραμμή. Αυτό συμβαίνει επειδή η κενή γραμμή μπαίνει ως αυτόματη μορφοποίηση γύρω από την ετικέτα αυτής της κατηγορίας. Οι κενές γραμμές μπορούν να αφαιρεθούν με τους αντίστοιχους κανόνες css. Τέτοιες ετικέτες είναι:
- <h1>,
- <p>,
- <ul>,
- <table>
- <div>
Ας δούμε ένα παράδειγμα:
<!DOCTYPE html> <html> <head> </head> <body> <p>Κείμενο παραγράφου μιας γραμμής</p> <span style="color:blue;">Κείμενο μέσα σε ετικέτα span</span> <p>Κείμενο παραγράφου μιας γραμμής</p> </body> </html>
Στο παράδειγμα αυτό βλέπουμε ότι χρησιμοποιείται μια ετικέτα span για να δηλώσει το χρώμα του κειμένου. Πάνω και κάτω από αυτήν υπάρχουν 2 ετικέτες παραγράφου p γύρω από τις οποίες μπαίνει αυτόματα μια κενή γραμμή.
Η box ετικέτα div
Η ετικέτα div ορίζει ένα νοητό κουτί μέσα στο οποίο μπορούμε να βάλουμε οποιαδήποτε html ετικέτα θέλουμε. Ως box ετικέτα, πριν και μετά από αυτήν εμφανίζονται κενές γραμμές. Σε μια ετικέτα div χρησιμοποιούνται οι ιδιότητες class ή/και id με σκοπό την κλήση κανόνων μορφοποίησης css. Αποτελεί το βασικό δομικό στοιχείο από το οποίο αποτελούνται σήμερα οι ιστοσελίδες. Η κάθε ιστοσελίδα δηλαδή είναι ένα σύνολο από ετικέτες divs οι οποίες διαμορφώνονται με χρήση των κανόνων css. Εκτενέστερη αναφορά στην ετικέτα αυτή γίνεται στο αντίστοιχο css μάθημα.
Επίλογος
Στο μάθημα αυτό είδαμε την διάκριση μεταξύ inline και box στοιχείων html
