Μια ματιά στο πώς ο λευκός χώρος στη HTML αντιμετωπίζεται από προγράμματα περιήγησης
Εάν είστε αρχάριος σχεδιαστής ιστοσελίδων, ένα από τα πολλά πράγματα που θα πρέπει να καταλάβετε από νωρίς είναι ο τρόπος με τον οποίο ο λευκός χώρος στον κώδικα ενός ιστοτόπου χειρίζεται τα προγράμματα περιήγησης ιστού.
Δυστυχώς, ο τρόπος με τον οποίο τα προγράμματα περιήγησης χειρίζονται λευκό χώρο δεν είναι πολύ διαισθητικός στην αρχή, ειδικά αν έρχεστε σε HTML και συγκρίνετε με τον τρόπο με τον οποίο διαχειρίζεται λευκός χώρος σε προγράμματα επεξεργασίας κειμένου, τα οποία μπορεί να είστε πιο εξοικειωμένοι με.
Στο λογισμικό επεξεργασίας κειμένου, μπορείτε να προσθέσετε πολλά αποστάγματα ή καρτέλες στο έγγραφο και ότι η απόσταση θα αντικατοπτρίζεται στην εμφάνιση του περιεχομένου του εγγράφου. Αυτό δεν συμβαίνει με την HTML ή με ιστοσελίδες. Ως εκ τούτου, είναι πολύ σημαντικό να μάθουμε πώς ο λευκός χώρος αντιμετωπίζεται από προγράμματα περιήγησης ιστού.
Διαχωρισμός σε εκτύπωση
Στο λογισμικό επεξεργασίας κειμένου, οι τρεις πρωταρχικοί χαρακτήρες λευκού διαστήματος είναι ο χώρος, η καρτέλα και η επιστροφή της μεταφοράς. Καθένα από αυτά ενεργεί με διαφορετικό τρόπο, αλλά σε HTML, τα προγράμματα περιήγησης τους καθιστούν ουσιαστικά τα ίδια. Είτε τοποθετείτε ένα διάστημα ή 100 κενά στη σήμανσή σας HTML, είτε ανακατεύετε το διάστημα με τις καρτέλες και τις επιστροφές των καροτσακιών, όλα αυτά θα συμπυκνωθούν σε ένα χώρο όταν η σελίδα αποτυπωθεί από το πρόγραμμα περιήγησης. Στην ορολογία σχεδιασμού ιστοσελίδων, αυτό είναι γνωστό ως κατάρρευση λευκού χώρου. Δεν μπορείτε να χρησιμοποιήσετε αυτά τα τυπικά κλειδιά διαστήματα για να προσθέσετε κενά σε μια ιστοσελίδα, επειδή ο περιηγητής περιστρέφει πολλούς χώρους προς τα κάτω σε ένα μόνο διάστημα όταν αποδίδεται στο πρόγραμμα περιήγησης,
Γιατί κάποιος χρησιμοποιεί τις καρτέλες;
Συνήθως, όταν οι χρήστες χρησιμοποιούν καρτέλες σε ένα έγγραφο κειμένου, τα χρησιμοποιούν για λόγους διαμόρφωσης ή για να μεταφέρουν το κείμενο σε ένα συγκεκριμένο σημείο ή να είναι κάποια απόσταση από κάποιο άλλο στοιχείο. Στο σχεδιασμό ιστοσελίδων, δεν μπορείτε να χρησιμοποιήσετε τους προαναφερθέντες χαρακτήρες διαστήματος για να επιτύχετε αυτές τις οπτικές μορφές ή τις ανάγκες διάταξης.
Στο σχεδιασμό ιστοσελίδων, η χρήση πρόσθετων χαρακτήρων διαστήματος στον κώδικα θα ήταν καθαρά για ευκολία στην ανάγνωση αυτού του κώδικα. Οι σχεδιαστές ιστοσελίδων και οι προγραμματιστές συχνά χρησιμοποιούν καρτέλες για να δώσουν τον κώδικα έτσι ώστε να μπορούν να δουν ποια στοιχεία είναι παιδιά άλλων στοιχείων - αλλά αυτές οι περιπτώσεις δεν επηρεάζουν την οπτική διάταξη της ίδιας της σελίδας. Για εκείνους που χρειάζονται αλλαγές οπτικής διάταξης, θα πρέπει να στραφείτε σε CSS (cascading style sheets).
Χρήση του CSS για δημιουργία καρτελών HTML και διαχωρισμού
Οι ιστοχώροι σήμερα είναι χτισμένοι με διαχωρισμό δομής και στυλ. Η δομή μιας σελίδας γίνεται από το HTML, ενώ το στυλ υπαγορεύεται από το CSS. Αυτό σημαίνει ότι για να δημιουργήσετε αποστάσεις ή να επιτύχετε μια συγκεκριμένη διάταξη, θα πρέπει να στραφείτε προς το CSS και να μην προσπαθείτε απλώς να προσθέσετε χαρακτήρες αποστασιοποίησης στον κώδικα HTML.
Εάν προσπαθείτε να χρησιμοποιήσετε καρτέλες για να δημιουργήσετε κίονες κειμένου, μπορείτε να χρησιμοποιήσετε τα στοιχεία
Εάν τα δεδομένα που παρουσιάζετε είναι πίνακες, μπορείτε να χρησιμοποιήσετε πίνακες για να ευθυγραμμίσετε τα δεδομένα όπως θέλετε. Οι πίνακες εμφανίζουν συχνά κακό ρομπότ στο σχεδιασμό ιστοσελίδων επειδή έχουν καταστρατηγηθεί ως καθαρά εργαλεία διάταξης για τόσα χρόνια, αλλά οι πίνακες εξακολουθούν να είναι απόλυτα έγκυροι εάν το περιεχόμενό σας περιέχει τα προαναφερθέντα πινακοποιημένα δεδομένα.
Περιθώρια, παρεμβολή και κείμενο
Οι πιο συνηθισμένοι τρόποι δημιουργίας αποστάσεων με το CSS είναι χρησιμοποιώντας ένα από τα παρακάτω CSS στυλ:
- περιθώριο
- υλικό παραγεμίσματος
- κείμενο-παύλα
Για παράδειγμα, μπορείτε να περιγράψετε την πρώτη γραμμή μιας παραγράφου όπως μια καρτέλα με το ακόλουθο CSS (σημειώστε ότι αυτό υποθέτει ότι η παράγραφος σας έχει ένα χαρακτηριστικό κλάσης "πρώτης" συνδεδεμένο με αυτήν):
p.first {
κείμενο-παύλα: 5em;
}}
Αυτή η παράγραφος θα έχει τώρα μια εσοχή περίπου 5 χαρακτήρων.
Μπορείτε επίσης να χρησιμοποιήσετε τις ιδιότητες περιθωρίου ή γεμίσματος στο CSS για να προσθέσετε αποστάσεις από πάνω, κάτω, αριστερά ή δεξιά (ή συνδυασμούς αυτών των πλευρών) ενός στοιχείου. Τελικά, μπορείτε να επιτύχετε οποιουδήποτε είδους απόσταση που χρειάζεστε γυρίζοντας στο CSS.
Μετακίνηση κειμένου σε περισσότερα από ένα κενά χωρίς CSS
Εάν το μόνο που θέλετε είναι να μετακινήσετε το κείμενό σας σε απόσταση μεγαλύτερη από ένα διάστημα από το προηγούμενο στοιχείο, μπορείτε να χρησιμοποιήσετε το μη σπασμένο χώρο.
Για να χρησιμοποιήσετε τον μη σπασμένο χώρο, προσθέτετε & nbsp; όσες φορές χρειάζεστε στη σήμανση HTML.
Για παράδειγμα, αν θέλετε να μετακινήσετε τη λέξη σας πέντε θέσεις, μπορείτε να προσθέσετε τα παρακάτω πριν από τη λέξη.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Το HTML σέβεται αυτά και δεν θα τα καταρρεύσει σε ένα μόνο χώρο. Ωστόσο, αυτό θεωρείται μια πολύ κακή πρακτική, δεδομένου ότι προσθέτει επιπλέον σήμανση HTML σε ένα έγγραφο μόνο για την επίτευξη των απαιτήσεων διαμόρφωσης. Αναφερόμενοι πίσω σε αυτόν τον διαχωρισμό της δομής και του στυλ, θα πρέπει να αποφύγετε την προσθήκη μη διασταλτικών χώρων απλώς για να επιτύχετε το επιθυμητό αποτέλεσμα διάταξης και θα πρέπει να χρησιμοποιήσετε τα περιθώρια και την επένδυση CSS.