Προηγούμενο

Μορφοποίηση κειμένου

Τα στοιχεία μορφοποίησης κειμένου χρησιμοποιούνται για την εμφάνιση κειμένου με ιδιαίτερη σημασία.

Αυτά τα στοιχεία είναι:

  • Strong και bold: <strong>, <b>
  • Italic και emphasized: <i>, <em>
  • Subscript και Superscript : <sub>, <sup>
  • Inserted και Deleted: <ins>, <del>
  • Small: <small>
  • Marked: <mark>

Το πρώτο ζευγάρι <strong> και <b> θα έχει το ίδιο αποτέλεσμα στη σελίδα. Κάνουν το κείμενο να εμφανίζεται με έντονους χαρακτήρες. Ωστόσο, σημασιολογικά δεν αντιπροσωπεύουν το ίδιο πράγμα. Η ετικέτα <b> χρησιμοποιείται μόνο για να εμφανιστεί ένα κείμενο με έντονη γραφή και μπορεί να χρησιμοποιηθεί για οποιοδήποτε λόγο. Η ετικέτα <strong> όμως, έχει σημασιολογική σημασία και χρησιμοποιείται όταν θέλουμε να τονίσουμε τη σημασία του συγκεκριμένου κειμένου.

Οι ετικέτες Italic <i> και emphasized <em>, και οι δύο θα κάνουν το κείμενο να εμφανίζεται πλάγιο. Ωστόσο, παρόμοια με το προηγούμενο παράδειγμα μας, είναι σημασιολογικά διαφορετικές. Η <i> χρησιμοποιείται για να κάνει ένα κείμενο πλάγια χωρίς ιδιαίτερη σημασία. Η <em> όμοωςπό την άλλη πλευρά τονίζει τη σημαντικότητα του συγκεκριμένου κειμένου.

Η ετικέτα Subscript <sub> συνήθως αποδίδεται ως δείκτης και η Superscript <sup> ως εκθέτης. Η ετικέτα  <sub> μετακινεί το κείμενο προς τα κάτω, ορίζει το κείμενο του δείκτη. Η ετικέτα <sup> μετακινεί το κείμενο προς τα επάνω, ορίζει το κείμενο του εκθέτη.

Οι ετικέτες Υπογράμμισης- Inserted <ins> και Διαγραφής- Deleted <del> χρησιμοποιούνται για την απεικόνιση των επεξεργασιών. Η ετικέτα <ins> εμφανίζει το κείμενο υπογραμμισμένο. Η ετικέτα  <del> dεμφανίζει το κείμενο διαγραμμένο.

Η ετικέτα Small <small> ορίζει μικρότερο κείμενο. Κάνει το συγκεκριμένο κείμενο να φαίνεται μικρότερο από το περιβάλλον.

Η ετικέτα επισήμανσης - Marked <mark> ορίζει το επισημασμένο κείμενο. Εμφανίζεται επισημαίνοντας με κίτρινο το συγκεκριμένο κείμενο.

Παράδειγμα

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Formating text</title>
  </head>
  <body>
    <h1>Text formatting</h1>
    <p>
       <strong>Strong </strong> text <br>
       <b>Bold </b>text <br>
       <em>Emphasized </em> text <br>
       <i>Italic </i> text <br>
       <sub>Subscript </sub> text <br>
       <sup>Superscript </sup> text <br>
       <ins>Inserted </ins> text <br>
       <del>Deleted</del> text <br>
       <small>Small</small> text <br>
       <mark>Marked</mark> text <br>
    </p>
  </body>
</html>

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως  exersice01.3.04.html στον φάκελο "Exercises"
  2. Επεξεργαστείτε το αρχείο. Η εμφάνσιση στον browser θα πρέπει να είναι σαν την ακόλουθη εικόνα: 

 

Solution:

Προηγούμενο