Δημιουργία Ιστοσελίδων Κεφάλαιο 2 – Παράγραφοι, unicode χαρακτήρες και επικεφαλίδες
Δημιουργία Ιστοσελίδων
Κεφάλαιο 2 - Παράγραφοι, unicode χαρακτήρες και επικεφαλίδες
Στο προηγούμενο κεφάλαιο αναφέραμε κάποια βασικά για την δομή ενός html εγγράφου, τους πιο δημοφιλείς text editors που υπάρχουν, την δομή των HTML tags καθώς και με ποίο τρόπο δημιουργούμε html αρχεία με text editors. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στις 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> <!-- Αρχή HTML αρχείου -->
<head>
<title> Παράγραφοι </title>
</head>
<body>
<p> <!-- Αρχή παραγράφου -->
Η ψευδογλώσσα είναι μια υποθετική-τεχνητή γλώσσα για την αναπαράσταση - κωδικοποίηση αλγορίθμων.
Συνήθως ακολουθεί το συντακτικό κάποιας γλώσσας προγραμματισμού, αλλά όχι αυστηρά. Κατά τη διατύπωση του
αλγόριθμου με ψευδογλώσσα δίνεται προτεραιότητα στην κατανόησή του από τον άνθρωπο, παρά από ένα υπολογιστικό
μηχάνημα.
</p> <!-- Τέλος παραγράφου -->
</body>
</html> Το HTML tag <br>
Σε αυτό το σημείο είναι χρήσιμο να αναφέρουμε μερικά χρήσιμα HTML tags καθώς και χαρακτήρες που μας βοηθάνε να μορφοποιήσουμε το κείμενο εντός μιας παραγράφου. Το πρώτο είναι το HTML tag <br> όπου συνεχίζει μια παράγραφο μια γραμμή παρακάτω. Είναι παρόμοιο με το /n της γλώσσας προγραμματισμού c όπου ξεκινάει μια παράγραφο σε μια γραμμή παρακάτω.
<html> <!-- Αρχή HTML αρχείου -->
<head>
<title> Παράγραφοι </title>
</head>
<body>
<p> <!-- Αρχή παραγράφου -->
Η ψευδογλώσσα είναι μια υποθετική-τεχνητή γλώσσα για την αναπαράσταση - κωδικοποίηση αλγορίθμων.
Συνήθως ακολουθεί το συντακτικό κάποιας γλώσσας προγραμματισμού, αλλά όχι αυστηρά. <br>
Κατά τη διατύπωση του αλγόριθμου με ψευδογλώσσα δίνεται προτεραιότητα στην κατανόησή του από τον άνθρωπο, παρά από ένα
υπολογιστικό μηχάνημα.
</p> <!-- Τέλος παραγράφου -->
</body>
</html>
Αφού είδαμε το tag <br> ας προχωρήσουμε στους ειδικούς unicode χαρακτήρες. Οι unicode χαρακτήρες είναι ειδικοί συμβολισμοί που μπορούμε να χρησιμοποιήσουμε μέσα σε ένα κείμενο ή μια παράγραφο. Μπορείτε κάνοντας κλίκ εδώ για να δείτε όλους τους τύπους Unicode χαρακτήρων.
Πάμε σε αυτό το σημείο να δούμε την εφαρμογή αυτών των ειδικών unicode χαρακτήρων σε μία ιστοσελίδα. Ας υποθέσουμε ότι θέλουμε να φτιάξουμε μια ιστοσελίδα με τους ειδικούς χαρακτήρες που περιέχονται στο παρακάτω παράδειγμα.
Text Editor
<html> <!-- Αρχή HTML αρχείου -->
<head>
<title> Unicode χαρακτήρες </title>
</head>
<body>
<p> <!-- Αρχή παραγράφου -->
Η ψευδογλώσσα είναι μια υποθετική-τεχνητή γλώσσα για την αναπαράσταση - κωδικοποίηση
αλγορίθμων. Συνήθως ακολουθεί το συντακτικό κάποιας γλώσσας προγραμματισμού, αλλά όχι
αυστηρά. <br> Κατά τη διατύπωση του αλγόριθμου με ψευδογλώσσα δίνεται
προτεραιότητα στην κατανόησή του από τον άνθρωπο, παρά από ένα υπολογιστικό μηχάνημα.
😁😄😄😄
</p> <!-- Τέλος παραγράφου -->
</body>
</html> Όπου γραμματοσειρά με πορτοκαλί χρώμα είναι οι ειδικοί χαρακτήρες που έχουμε προσθέσει στο html έγγραφο. Ίσως ο πιο χρήσιμος unicode χαρακτήρας που θα συναντήσετε είναι ο καθότι αφήνει ένα κενό (space) χαρακτήρα. Γενικά δεν υπάρχει unicode χαρακτήρας για tab οπότε το θα το συναντήσετε πολύ συχνά μπροστά σας.
Οι επικεφαλίδες είναι πάντα χρήσιμες στο περιεχόμενο μιας ιστοσελίδας ειδικά αν έχουμε να κάνουμε με ένα μεγάλο κείμενο. Ας δούμε πάλι ένα παράδειγμα για να το κατανοήσουμε καλύτερα. Έστω λοιπόν η παρακάτω ιστοσελίδα.
Αποτελείται λοιπόν απο 5 επικεφαλίδες όπου κάθεμία είναι αμέσως μικρότερη απο την προγουμενή της. Υπάρχουν 4 html tags που μπορούμε να χρησιμοποιήσουμε για επικεφαλίδες όπου αποτυπώνονται στον πίνακα παρακάτω.
<h1> </h1> <! -- Επικεφαλίδα 1 -->
<h2> </h2> <! --Επικεφαλίδα 2 -->
<h3> </h3> <! --Επικεφαλίδα 3 -->
<h4> </h4> <! --Επικεφαλίδα 4 -->
<h5> </h5> <! --Επικεφαλίδα 5 -->
<h6> </h6> <! --Επικεφαλίδα 6 -->Ας δούμε και την σύνταξη τους εντός ενός html εγγράφου. Έστω το παράδειγμα ιστοσελίδας που είδαμε στην παραπάνω εικόνα. Η δομή του html αρχείου έχει ως εξής.
<html> <!-- Αρχή HTML αρχείου -->
<head>
<title> Επικεφαλίδες </title>
</head>
<body>
<h1> Επικεφαλίδα 1 </h1>
<h2> Επικεφαλίδα 2 </h2>
<h3> Επικεφαλίδα 3 </h3>
<h4> Επικεφαλίδα 4 </h4>
<h5> Επικεφαλίδα 5 </h5>
<h6> Επικεφαλίδα 6 </h6>
</body>
</html> Τελευταία ενημέρωση: 16/08/2018
