Δημιουργία Ιστοσελίδων Κεφάλαιο 3 – Μορφοποίηση κειμένου με HTML tags

Δημοσιεύτηκε από τον/την codebrakes στις

Δημιουργία Ιστοσελίδων
Κεφάλαιο 3 - Μορφοποίηση κειμένου με HTML tags

Εισαγωγή

 

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

 
Δημιουργία Bold κειμένου
 

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

Θέλουμε να τονίσουμε με bold το σημείο απο “Η ψευδογλώσσα” έως to “κωδικοποίηση αλγορίθμων”. Για να το κάνουμε αυτό θα χρησιμοποιήσουμε το HTML tag <b>. Οπότε όταν ανοίξουμε το HTML αρχείο με έναν text editor θα γράψουμε τα εξής.

<html> <!-- Αρχή HTML αρχείου -->

   <head>
      <title> Bold κείμενο </title>
   </head>

   <body>
      <p> <!-- Αρχή παραγράφου -->
          <b>Η ψευδογλώσσα είναι μια υποθετική-τεχνητή γλώσσα για την αναπαράσταση - 
          κωδικοποίηση αλγορίθμων</b>. Συνήθως ακολουθεί το συντακτικό κάποιας γλώσσας
          προγραμματισμού, αλλά όχι αυστηρά. Κατά τη διατύπωση του αλγόριθμου με ψευδογλώσσα 
          δίνεται προτεραιότητα στην κατανόησή του από τον άνθρωπο, παρά από ένα υπολογιστικό 
          μηχάνημα.
        </p> <!-- Τέλος παραγράφου -->
   </body>
</html> 

Με πορτοκαλί χρώμα είναι το HTML tag <b>. Παρατηρούμε λοιπόν ότι με το tag <b> αρχίζουμε την έναρξη του bold κειμένου και με το </b> κλείνουμε το tag αυτό. Ότι κείμενο βρίσκετε εντός αυτού του HTML tag θα αποκτήσει bold τονισμό. Η παρακάτω εικόνα δείχνει το αποτέλεσμα που θα μας εμφανίσει στον browser μας όταν ανοίξουμε αυτό το HTML έγγραγο.

Δημιουργία πλάγιου (italic) κειμένου
 

Άς συνεχίσουμε στο προηγούμενο παράδειγμα έστω ότι θέλουμε να τονίσουμε με πλάγια γράμματα την πρόταση “Κατά την διατύπωση του” έως και το “δίνεται προτεραιότητα”. Για να το κάνουμε αυτό θα χρησιμοποιήσουμε το HTML tag <i>. Ας δούμε λοιπόν σε αυτό το σημείο πως θα επεξεραστούμε το HTML αρχείο μας στον text editor και σε ποίο σημείο θα προσθέσουμε αυτό το HTML tag.

<html> <!-- Αρχή HTML αρχείου -->

   <head>
      <title> Παράγραφοι </title>
   </head>

   <body>
        <p> <!-- Αρχή παραγράφου -->
          Η ψευδογλώσσα είναι μια υποθετική-τεχνητή γλώσσα για την αναπαράσταση - κωδικοποίηση αλγορίθμων. 
          Συνήθως ακολουθεί το συντακτικό κάποιας γλώσσας προγραμματισμού, αλλά όχι αυστηρά. <br> 
          Κατά τη διατύπωση του αλγόριθμου με ψευδογλώσσα δίνεται προτεραιότητα στην κατανόησή του από τον άνθρωπο, παρά από ένα 
          υπολογιστικό μηχάνημα.
        </p> <!-- Τέλος παραγράφου -->
   </body>
</html>

Με το <i> ανοίγουμε το tag αυτό και με το </i> κλείνουμε αυτό το tag.

 
Υπογράμιση κειμένου
 

Υπάρχουν δύο χρήσιμα HTML tags για υπογράμιση κειμένου. Το πρώτο είναι το HTML tag <u> όπου υπογραμίζει το κείμενο με μια ίσια γραμμή απο κάτω του. Το δεύτερο HTML tag είναι το <mark> όπου υπογραμίζει ένα κείμενο με κάποιο χρώμα σαν να το έχουμε περάσει με κάποιον μαρκαδόρο αν ήταν το κείμενο γραμμένο σε ένα βιβλίο. Εμείς θα δούμε και τα δύο tags πάνω στο προηγούμενο παράδειγμα, έστω ότι θέλουμε να υπογραμίσουμε την πρόταση “Η ψευδογλώσσα” έως και το “υποθετική-τεχνητή γλώσσα” και να υπογραμμίσουμε με κίτρινο χρώμα την φράση “Κατά την διατύπωση” έως και το “δίνεται προτεραιότητα”. Θα πρέπει λοιπόν να επεξεργαστούμε το HTML έγγραφό μας ως εξής.

<html> <!-- Αρχή HTML αρχείου -->

   <head>
      <title> Bold κείμενο </title>
   </head>

   <body>
        <p> <!-- Αρχή παραγράφου -->
          <b><u> Η ψευδογλώσσα είναι μια υποθετική-τεχνητή γλώσσα </u> για την αναπαράσταση - κωδικοποίηση
          αλγορίθμων</b>. Συνήθως ακολουθεί το συντακτικό κάποιας γλώσσας προγραμματισμού, αλλά όχι 
          αυστηρά. <i> <mark> Κατά τη διατύπωση του αλγόριθμου με ψευδογλώσσα δίνεται προτεραιότητα </mark> 
          </i> στην κατανόησή <del> του από τον άνθρωπο, παρά από ένα υπολογιστικό </del> μηχάνημα.
        </p> <!-- Τέλος παραγράφου -->
   </body>
</html> 

Το αποτέλεσμα που θα μας εμφανήσει στον browser μας θα είναι το εξής

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


0 σχόλια

Αφήστε μια απάντηση

Σύμβολο κράτησης θέσης avatar

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *