Εισαγωγή

Στο προηγούμενο κεφάλαιο αναφέραμε κάποια βασικά για την δομή ενός html εγγράφου, τους πιο δημοφιλείς text editors που υπάρχουν, την δομή των HTML tags καθώς και με ποίο τρόπο δημιουργούμε html αρχεία με text editors. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στις html παραγράφους και επικεφαλίδες και θα δούμε πως μπορούμε να προσθέσουμε περιεχόμενο σε ένα html έγγραφο.


Εισαγωγή στις HTML παραγράφους

Οι παράγραφοι είναι ίσως το πιο σημαντικό κομμάτι στην HTML. Για να μπορέσουμε να προσθέσουμε οποιοδήποτε κείμενο σε μια ιστοσελίδα θα πρέπει να χρησιμοποιήσουμε το HTML tag <p>. Μπορούμε βέβαια να προσθέσουμε κείμενο χωρίς να είναι μέσα σε ένα <p> tag αλλά θα είναι μια πολύ κακή επιλογή ειδικά αν θέλουμε να αποδώσουμε σε αυτό κάποιους γραφικόυς σχεδιασμούς (π.χ. CSS). Αυτά βέβαια θα τα δούμε πολύ αργότερα προς το παρόν ας κρατήσουμε στο μυαλό μας ότι όταν προσθέτουμε ένα οποιοδήποτε σύνολο κειμένου σε μια ιστοσελίδα αυτό θα πρέπει να περιέχεται μέσα σε <p> tag. Σε αυτό το σημείο ας δούμε ένα παράδειγμα έστω ότι θέλουμε να φτιάξουμε μια ιστοσελίδα η οποία έχει την παρακάτω δομή.





Για να δημουργήσουμε μια τέτοια ιστοσελίδα θα πρέπει να προσθέσουμε ένα html <p> tag μέσα στο <body> tag του html εγγράφου. Η πρώτη μας ενέργεια είναι να ανοίξουμε το sublime text editor και στην συνέχεια αποθηκεύουμε το αρχείο αυτό με ένα όνομα της αρεσκείας μας (π.χ. page.html) αρκεί να έχει στο τέλος την .html επέκταση. Η δομή του html εγγράφου αποτυπώνεται στον παρακάτω πίνακα.



Το HTML tag <br>

Σε αυτό το σημείο είναι χρήσιμο να αναφέρουμε μερικά χρήσιμα HTML tags καθώς και χαρακτήρες που μας βοηθάνε να μορφοποιήσουμε το κείμενο εντός μιας παραγράφου. Το πρώτο είναι το HTML tag <br> όπου συνεχίζει μια παράγραφο μια γραμμή παρακάτω. Είναι παρόμοιο με το /n της γλώσσας προγραμματισμού c όπου ξεκινάει μια παράγραφο σε μια γραμμή παρακάτω.







Εισαγωγή unicode χαρακτήρων σε ένα HTML έγγραφο

Αφού είδαμε το tag <br> ας προχωρήσουμε στους ειδικούς unicode χαρακτήρες. Οι unicode χαρακτήρες είναι ειδικοί συμβολισμοί που μπορούμε να χρησιμοποιήσουμε μέσα σε ένα κείμενο ή μια παράγραφο. Μπορείτε κάνοντας κλίκ εδω ή στο παρακάτω κουμπί να δείτε μια αναλυτική λίστα με όλους τους unicode χαρακτήρες καθώς και τους κωδικούς τους.


Κλίκ εδώ για να δείτε όλους
τους unicode χαρακτήρες

Πάμε σε αυτό το σημείο να δούμε την εφαρμογή αυτών των ειδικών unicode χαρακτήρων σε μία ιστοσελίδα. Ας υποθέσουμε ότι θέλουμε να φτιάξουμε μια ιστοσελίδα με τους ειδικούς χαρακτήρες που περιέχονται στο παρακάτω παράδειγμα.





Παρατηρούμε ότι στην παραπάνω εικόνα υπάρχουν κάποιοι ειδικοί χαρακτήρες για κενό και επίσης κάποια emoji. Για να προσθέσουμε αυτούς τους ειδικούς unicode χαρακτήρες απλά παίρνουμε τον κωδικό τους και το κάνουμε επικόληση στο ειδικό σημείο της σελίδας στο οποίο θέλουμε να εμφανιστούν όπως αποτυπώνεται και στο παρακάτω παράδειγμα.



Όπου γραμματοσειρά με πορτοκαλί χρώμα είναι οι ειδικοί χαρακτήρες που έχουμε προσθέσει στο html έγγραφο. Ίσως ο πιο χρήσιμος unicode χαρακτήρας που θα συναντήσετε είναι ο &nbsp; καθότι αφήνει ένα κενό (space) χαρακτήρα. Γενικά δεν υπάρχει unicode χαρακτήρας για tab οπότε το &nbsp; θα το συναντήσετε πολύ συχνά μπροστά σας.


Εισαγωγή στις επικεφαλίδες

Οι επικεφαλίδες είναι πάντα χρήσιμες στο περιεχόμενο μιας ιστοσελίδας ειδικά αν έχουμε να κάνουμε με ένα μεγάλο κείμενο. Ας δούμε πάλι ένα παράδειγμα για να το κατανοήσουμε καλύτερα. Έστω λοιπόν η παρακάτω ιστοσελίδα.




Αποτελείται λοιπόν απο 5 επικεφαλίδες όπου κάθεμία είναι αμέσως μικρότερη απο την προγουμενή της. Υπάρχουν 4 html tags που μπορούμε να χρησιμοποιήσουμε για επικεφαλίδες όπου αποτυπώνονται στον πίνακα παρακάτω.



HTML tag Παράδειγμα
<h1> </h1> Επικεφαλίδα 1
<h2> </h2> Επικεφαλίδα 2
<h3> </h3> Επικεφαλίδα 3
<h4> </h4> Επικεφαλίδα 4
<h5> </h5> Επικεφαλίδα 5
<h6> </h6> Επικεφαλίδα 6

Ας δούμε και την σύνταξη τους εντός ενός html εγγράφου. Έστω το παράδειγμα ιστοσελίδας που είδαμε στην παραπάνω εικόνα. Η δομή του html αρχείου έχει ως εξής.





Τελευταία ενημέρωση: 16/08/2018






Follow us

 ☰