Εδώ πώς να χρησιμοποιήσετε την ετικέτα Pre-Formatted Text στον κώδικα HTML
Όταν προσθέτετε κείμενο στον κώδικα HTML για μια ιστοσελίδα, λέτε σε ένα στοιχείο παραγράφου, έχετε λίγο ή και κανέναν έλεγχο σχετικά με το πού θα σπάσουν αυτές οι γραμμές κειμένου ή το διάστημα που θα χρησιμοποιηθεί. Αυτό οφείλεται στο γεγονός ότι το πρόγραμμα περιήγησης ιστού θα μεταφέρει το κείμενο ανάλογα με τις ανάγκες ανάλογα με την περιοχή που το περιέχει. Αυτό περιλαμβάνει ανταποκρινόμενες ιστοσελίδες οι οποίες θα έχουν πολύ ρευστό σχήμα που αλλάζει με βάση το μέγεθος της οθόνης που χρησιμοποιείται για την προβολή της σελίδας .
Το κείμενο HTML θα σπάσει μια γραμμή όπου χρειάζεται μετά την ολοκλήρωση της περιοχής που περιέχει. Στο τέλος, το πρόγραμμα περιήγησης παίζει περισσότερο ρόλο στον προσδιορισμό του τρόπου με τον οποίο το κείμενο σπάει από εσάς.
Όσον αφορά την προσθήκη αποστάσεων για τη δημιουργία μιας συγκεκριμένης μορφής ή διάταξης, η HTML δεν αναγνωρίζει την απόσταση που προστίθεται στον κώδικα, συμπεριλαμβανομένης της διαστήματος, της καρτέλας ή των επιστροφών μεταφοράς. Εάν τοποθετήσετε είκοσι κενά μεταξύ μιας λέξης και της λέξης που έρχεται μετά από αυτήν, το πρόγραμμα περιήγησης θα αποδώσει μόνο ένα χώρο εκεί. Αυτό είναι γνωστό ως κατάρρευση του λευκού χώρου και είναι στην πραγματικότητα μία από τις έννοιες της HTML που πολλοί νέοι στην βιομηχανία αγωνίζονται με την πρώτη. Περιμένουν ότι ο κενός χώρος HTML θα λειτουργήσει με τον τρόπο που κάνει σε ένα πρόγραμμα όπως το Microsoft Word, αλλά αυτό δεν είναι καθόλου το whitespace HTML.
Στις περισσότερες περιπτώσεις, ο συνηθισμένος χειρισμός του κειμένου σε οποιοδήποτε έγγραφο HTML είναι ακριβώς αυτό που χρειάζεστε, αλλά σε άλλες περιπτώσεις, μπορεί να θέλετε να έχετε περισσότερο έλεγχο πάνω ακριβώς στο πώς τα κενά κειμένου και σε ποιες γραμμές σπάει γραμμές.
Αυτό είναι γνωστό ως προκαθορισμένο κείμενο (με άλλα λόγια, υπαγορεύετε τη μορφή). Μπορείτε να προσθέσετε προ-διαμορφωμένο κείμενο στις ιστοσελίδες σας χρησιμοποιώντας την προ-ετικέτα HTML.
Χρησιμοποιώντας την ετικέτα
Πριν από πολλά χρόνια, ήταν συνηθισμένο να βλέπετε ιστοσελίδες με μπλοκ προκαθορισμένου κειμένου. Η χρήση της προ-ετικέτας για τον ορισμό τμημάτων της σελίδας, όπως μορφοποιήθηκε από την ίδια την πληκτρολόγηση, ήταν ένας γρήγορος και εύκολος τρόπος για τους σχεδιαστές ιστοσελίδων να αποκτήσουν το κείμενο για προβολή όπως το ήθελαν.
Αυτό ήταν πριν από την άνοδο του CSS για τη διάταξη, όταν οι σχεδιαστές ιστοσελίδων ήταν πραγματικά κολλημένοι προσπαθώντας να εξαναγκάσουν τη διάταξη χρησιμοποιώντας πίνακες και άλλες μεθόδους HTML μόνο. Αυτό (κάπως) επέστρεψε επειδή το προκαθορισμένο κείμενο ορίζεται ως κείμενο στο οποίο η δομή ορίζεται από τυπογραφικές συμβάσεις και όχι από την απόδοση HTML.
Σήμερα, αυτή η ετικέτα δεν χρησιμοποιείται τόσο πολύ, διότι το CSS μας επιτρέπει να υπαγορεύουμε τα οπτικά στυλ με πολύ πιο αποτελεσματικό τρόπο από ότι προσπαθούμε να εξαναγκάσουμε να εμφανιστούν στην HTML μας και επειδή τα πρότυπα του Web υπαγορεύουν έναν σαφή διαχωρισμό της δομής (HTML) και των στυλ (CSS). Παρόλα αυτά, ενδέχεται να υπάρχουν περιπτώσεις που το κείμενο που έχει προ-μορφοποιημένο κείμενο έχει νόημα, όπως για μια διεύθυνση αλληλογραφίας όπου θέλετε να εξαναγκάσετε τα διαλείμματα γραμμών ή για παραδείγματα ποίησης όπου διαλείμματα γραμμής είναι απαραίτητα για την ανάγνωση και τη συνολική ροή του περιεχομένου.
Εδώ είναι ένας τρόπος να χρησιμοποιήσετε την ετικέτα HTML
:Twas brillig και τα slithey toves Μήπως γύρισε και άρπαξε στο wabeΤυπική HTML συρρικνώνει τον λευκό χώρο στο έγγραφο. Αυτό σημαίνει ότι οι επιστροφές μεταφοράς, τα διαστήματα και οι χαρακτήρες καρτελών που χρησιμοποιούνται σε αυτό το κείμενο θα κατέρρεαν σε ένα χώρο. Εάν πληκτρολογήσατε το παραπάνω απόσπασμα σε μια τυπική ετικέτα HTML, όπως την ετικέτα p (paragraph), καταλήγετε σε μία γραμμή κειμένου, όπως αυτή:
Τους άσπρους και τους αδύναμους
Η προ-ετικέτα αφήνει τους λευκούς χαρακτήρες χώρου ως έχει. Έτσι, τα διαλείμματα γραμμής, τα κενά και οι καρτέλες διατηρούνται στην εμφάνιση του περιεχομένου του προγράμματος περιήγησης. Η τοποθέτηση της προσφοράς σε μια προ-ετικέτα για το ίδιο κείμενο θα είχε ως αποτέλεσμα αυτή την εμφάνιση:
Τους άσπρους και τους αδύναμουςΣχετικά με τις γραμματοσειρές
Η προ-ετικέτα κάνει κάτι περισσότερο από απλά να διατηρεί τα κενά και τα σπασίματα για το κείμενο που γράφετε. Στα περισσότερα προγράμματα περιήγησης, είναι γραμμένο σε γραμματοσειρά μονοσκοπικού χαρακτήρα. Αυτό κάνει τους χαρακτήρες στο κείμενο όλοι ίσοι σε πλάτος. Με άλλα λόγια, το γράμμα i καταλαμβάνει όσο το γράμμα w.
Εάν προτιμάτε να χρησιμοποιήσετε μια άλλη γραμματοσειρά στη θέση της προεπιλεγμένης μονοσκοπικής έκδοσης που εμφανίζεται στο πρόγραμμα περιήγησης, μπορείτε να την αλλάξετε με φύλλα στυλ και να επιλέξετε οποιαδήποτε άλλη γραμματοσειρά θέλετε να εμφανίζεται το κείμενο .
HTML5
Ένα πράγμα που πρέπει να προσέξουμε είναι ότι, στην HTML5, το χαρακτηριστικό "πλάτος" δεν υποστηρίζεται πλέον για το στοιχείο
. Στο HTML 4.01, το πλάτος καθορίζει τον αριθμό των χαρακτήρων που θα περιέχει μια γραμμή, αλλά αυτό έχει πέσει για HTML5 και πέρα.Επεξεργασμένο από τον Jeremy Girard στις 2/2/17