Μια επεξήγηση του τι είναι το προ-μορφοποιημένο κείμενο σε HTML

click fraud protection

Όταν προσθέτετε κείμενο στον κώδικα HTML για μια ιστοσελίδα, ας πούμε σε ένα στοιχείο παραγράφου, δεν έχετε καθόλου ή όχι έλεγχο σχετικά με το πού θα σπάσουν αυτές οι γραμμές κειμένου ή το διάστημα που θα χρησιμοποιηθεί. Αυτό συμβαίνει επειδή το πρόγραμμα περιήγησης ιστού θα μεταφέρει το κείμενο ανάλογα με τις ανάγκες με βάση την περιοχή που το περιέχει. Αυτό περιλαμβάνει ιστοσελίδες που ανταποκρίνονται που θα έχει μια πολύ ρευστή διάταξη που αλλάζει με βάση το μέγεθος της οθόνης χρησιμοποιείται για την προβολή της σελίδας. Το κείμενο HTML θα σπάσει μια γραμμή όπου πρέπει να φτάσει μόλις φτάσει στο τέλος της περιοχής που περιέχει. Στο τέλος, το πρόγραμμα περιήγησης παίζει περισσότερο ρόλο στον καθορισμό του τρόπου διακοπής του κειμένου από εσάς.

Όσον αφορά την προσθήκη διαστήματος για τη δημιουργία μιας συγκεκριμένης μορφής ή διάταξης, το HTML δεν αναγνωρίζει το διάστημα που προστίθεται στον κώδικα, συμπεριλαμβανομένης της επιστροφής διαστήματος, της καρτέλας ή της μεταφοράς. Εάν βάλετε είκοσι κενά μεταξύ μιας λέξης και της λέξης που ακολουθεί, το πρόγραμμα περιήγησης θα αποδώσει μόνο έναν μόνο χώρο εκεί. Αυτό είναι γνωστό ως κατάρρευση του λευκού χώρου και είναι στην πραγματικότητα μια από τις έννοιες του HTML που πολλοί νέοι στον κλάδο αγωνίζονται στην αρχή. Περιμένουν ότι το κενό διάστημα HTML θα λειτουργήσει με τον τρόπο που λειτουργεί σε ένα πρόγραμμα όπως το Microsoft Word, αλλά δεν λειτουργεί έτσι καθόλου το κενό διάστημα HTML.

instagram viewer

Στις περισσότερες περιπτώσεις, ο κανονικός χειρισμός κειμένου σε οποιοδήποτε έγγραφο HTML είναι ακριβώς αυτό που χρειάζεστε, αλλά σε άλλα σε περιπτώσεις, μπορεί να θέλετε περισσότερο έλεγχο για το πώς διαγράφεται το κείμενο και πού διασπά γραμμές. Αυτό είναι γνωστό ως προ-μορφοποιημένο κείμενο (με άλλα λόγια, υπαγορεύετε τη μορφή). Μπορείτε να προσθέσετε προσχηματισμένο κείμενο στις ιστοσελίδες σας χρησιμοποιώντας το HTML.

Χρησιμοποιώντας το
 Ετικέτα 

Πριν από πολλά χρόνια, συνήθιζε να βλέπουμε ιστοσελίδες με μπλοκ προ-μορφοποιημένου κειμένου. Χρησιμοποιώντας το

 Η ετικέτα για τον ορισμό τμημάτων της σελίδας ως μορφοποιημένη από την ίδια την πληκτρολόγηση ήταν ένας γρήγορος και εύκολος τρόπος για τους σχεδιαστές ιστοσελίδων να εμφανίσουν το κείμενο όπως ήθελαν. Αυτό ήταν πριν από την άνοδο του CSS για διάταξη, όταν οι σχεδιαστές ιστοσελίδων ήταν πραγματικά κολλημένοι προσπαθώντας να επιβάλουν τη διάταξη χρησιμοποιώντας πίνακες και άλλες μεθόδους μόνο HTML Αυτό (κάπως) λειτούργησε επειδή το προ-μορφοποιημένο κείμενο ορίζεται ως κείμενο στο οποίο η δομή ορίζεται από τυπογραφικές συμβάσεις και όχι από την απόδοση HTML. 

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

Εδώ είναι ένας τρόπος χρήσης του HTML

 ετικέτα: 

Το τυπικό HTML συμπτύσσει το κενό διάστημα στο έγγραφο. Αυτό σημαίνει ότι οι μεταφορές επιστρέφουν, διαστήματα και χαρακτήρες καρτελών που χρησιμοποιούνται σε αυτό το κείμενο θα συμπτύσσονται σε ένα κενό. Εάν πληκτρολογήσατε το παραπάνω απόσπασμα σε μια τυπική ετικέτα HTML όπως η ετικέτα p (παράγραφος), θα καταλήξετε με μια γραμμή κειμένου, όπως αυτό:

Ο Μπρίγκλ και τα σλιπ δάχτυλα έκαναν γυρίσματα και ταράχτηκαν στο γουέμπ.

Η προ-ετικέτα αφήνει τους λευκούς χαρακτήρες ως έχουν. Έτσι, οι αλλαγές γραμμής, τα κενά και οι καρτέλες διατηρούνται στην απόδοση του περιεχομένου του προγράμματος περιήγησης. Βάζοντας το απόσπασμα μέσα σε ένα

 ετικέτα για το ίδιο κείμενο θα είχε ως αποτέλεσμα αυτήν την εμφάνιση: 
Δυστυχώς, το σλιθ και τα παπούτσια
Μήπως γυρίστηκε και αναμίχτηκε
σε
ο
γουμπέ

Όσον αφορά τις γραμματοσειρές

ο

 Η ετικέτα κάνει κάτι περισσότερο από τη διατήρηση των κενών και διαλειμμάτων για το κείμενο που γράφετε. Στα περισσότερα προγράμματα περιήγησης, είναι γραμμένο σε μονοφωνική γραμματοσειρά. Αυτό καθιστά τους χαρακτήρες στο κείμενο ίσο σε πλάτος. Με άλλα λόγια, το γράμμα i καταλαμβάνει τόσο χώρο όσο το γράμμα w. 

Εάν προτιμάτε να χρησιμοποιήσετε άλλη γραμματοσειρά στη θέση του προεπιλεγμένου μονοσυστήματος που εμφανίζει το πρόγραμμα περιήγησης, μπορείτε να το αλλάξετε φύλλα στυλ και επιλέξτε οποιοδήποτε άλλο γραμματοσειρά θέλετε το κείμενο να αποδίδεται.

HTML5

Ένα πράγμα που πρέπει να προσέξετε είναι ότι, στο HTML5, το χαρακτηριστικό "width" δεν υποστηρίζεται πλέον για το

 στοιχείο. Στο HTML 4.01, το πλάτος καθόρισε τον αριθμό των χαρακτήρων που θα περιέχει μια γραμμή, αλλά αυτό έχει πέσει για HTML5 και μετά. 
instagram story viewer