Γράφοντας HTML | Σχετικά | Παραπομπές | Ετικέτες |Μαθήματα | Προηγούμενο | Επόμενο |

10. Προσχηματισμένο Κείμενο (Preformated)

Σημείωση: Αν δεν έχετε τα αρχεία των προηγούμενων μαθημάτων, μπορείτε να τα κατεβάσετε τώρα.

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

Η ετικέτα preformat λέει στον browser να εμφανίσει το κείμενο που περιέχει ακριβώς όπως έχει πληκτρολογηθεί, περιλαμβάνοντας και τα διαστήματα. Τυπικά το κείμενο εμφανίζεται ως

m o n o s p a c e d

που σημαίνει οτι κάθε χαρακτήρας έχει το ίδιο πλάτος. Δείτε ένα παράδειγμα για το τι κάνει η ετικέτα preformat:


  <pre>
    Με 5 κενούς χαρακτήρες εμφανίζουμε το κείμενο πιο μεσα,
    και με το enter μπορούμε 
    να 
    αλλάξουμε
    γραμμή.
    
          Εδώ             με
          τη        
          χρήση           διαστημάτων
          δημιουργούμε    έναν
          απλό            πίνακα.
   </pre>

Χωρίς τις ετικέτες <pre> και </pre>, η ίδια HTML παράγει:

We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table.

Για το μάθημα του Volcano We, θέλουμε να προσθέσουμε έναν πίνακα κάτω απο την ενότητα Introduction που να περιέχει μια λίστα με τα πιο γνωστά ηφαίστεια, πότε εκράγηκαν, και τι υλικό εκτόξευσαν. Για να το κάνετε αυτό:

Ανοίξτε το αρχείο index.html στον κειμενογράφο σας
Κάτω απο το τελευταίο κομμάτι της ενότητας Introduction, βάλτε για τίτλο 4ου μεγέθους (header <h4>) το Volumes of Some Well-Known Volcanic Eruptions (για περισσότερα, δες μάθημα 4).

Κάτω απο τον τίτλο, γράψτε τα ακόλουθα όπως ακριβώς τα βλέπετε (Αν θέλετε αντιγράψτε τα με copy-paste απο αυτή τη σελίδα):

<pre>
  Eruption                      Date           Volume in km^3
  --------                      ----           --------------
  Paricutin, Mexico             1943                 1.3
  Mt. Vesuvius, Italy           79 A.D.               3
  Mount St. Helen, Washington   1980                  4
  Krakatoa, Indonesia           1883                 18
  Long Valley, California     pre-historic        500 - 600
  Yellowstone, Wyoming        pre-historic           2400
</pre>

Σώστε και ανοίξτε το HTML αρχείο στον browser.

Ελέγξτε τις αλλαγές

Συγκρίνετε τις σελίδες σας με το δείγμα για το πως θα πρέπει να εμφανίζονται. Αν κάτι δε δουλεύει, ελέξτε ξανά τον κώδικα σας.

Περισσότερες Πληροφορίες

Μπορείτε να χρησιμοποιήσετε άλλες ετικέτες HTML σε κείμενο που περιέχεται στην ετικέτα <pre>...</pre>. Για παράδειγμα μπορούμε να προσθέσουμε έναν υπερσύνδεσμο:

HTML

ΑΠΟΤΕΛΕΣΜΑ

<pre>
This tutorial is copyright
2000,

    <B>Be sure to tell all of
    your friends about it!</B>
             <i>We
                  Welcome
                    Your
                      Feedback</i>
fondly,
<A HREF=
"http://www.uom.gr/">
University Of Macedonia</A>
</pre>


	This tutorial is copyright 
	2000,
	    
	    Be sure to tell all of 
	    your friends about it!     
	                We
	                  Welcome
	                    Your
	                      Feedback
	fondly,
	University Of Macedonia

Σημειώστε οτι οι άλλες ετικέτες HTML δεν υπολογίζονται σαν διαστήματα. Απλά αγνοούνται στην προσχηματισμένη περιοχή.

Ορισμένοι σχεδιαστές ιστοσελίδων χρησιμοποιούν την ετικέτα <pre>...</pre> για να προσθέσουν διατήματα ανάμεσα στις γραμμές:

HTML

ΑΠΟΤΕΛΕΣΜΑ

Cheese was long since
abolished from the Orient.
<pre>

</pre>
...until Sir Longhorn arrived with the
great Cheese Crusade of 1167.

Cheese was long since abolished from the Orient.

...until Sir Longhorn arrived with the great Cheese Crusade of 1167.

Στη συνέχεια: 11. Ειδικοί Χαρακτήρες