Η δημιουργία διαστημάτων και ο φυσικός διαχωρισμός των στοιχείων σε HTML μπορεί να είναι δύσκολο να γίνει κατανοητό για τον αρχικό δημιουργό ιστοσελίδων. Αυτό είναι επειδή HTML έχει μια ιδιότητα γνωστή ως "κατάρρευση κενού χώρου". είτε πληκτρολογείτε 1 κενό είτε 100 στον κώδικα HTML, το πρόγραμμα περιήγησης ιστού καταρρέει αυτόματα αυτά τα διαστήματα σε έναν μόνο χώρο. Αυτό είναι διαφορετικό από ένα πρόγραμμα όπως Microsoft Word, που επιτρέπει στους δημιουργούς εγγράφων να προσθέτουν πολλά κενά για να διαχωρίσουν λέξεις και άλλα στοιχεία αυτού του εγγράφου. Αυτό δεν είναι το πώς λειτουργεί το διάστημα σχεδιασμού ιστοσελίδων.
Λοιπόν, πώς προσθέτετε κενά διαστήματα σε HTML που εμφανίζονται στο ιστοσελίδα που έχετε δημιουργήσει? Αυτό το άρθρο εξετάζει μερικούς από τους διαφορετικούς τρόπους.
Spaces σε HTML με CSS
Ο προτιμώμενος τρόπος για να προσθέσετε κενά στο HTML σας είναι με Φύλλα Cascading Style (CSS). Το CSS πρέπει να χρησιμοποιείται για την προσθήκη οποιωνδήποτε οπτικών πτυχών μιας ιστοσελίδας και δεδομένου ότι το διάστημα είναι μέρος των οπτικών σχεδιαστικών χαρακτηριστικών μιας σελίδας, το CSS είναι εκεί που θέλετε να γίνει αυτό.
Στο CSS, μπορείτε να χρησιμοποιήσετε είτε τις ιδιότητες περιθωρίου είτε γεμίσματος για να προσθέσετε χώρο γύρω από τα στοιχεία. Επιπλέον, η ιδιότητα κειμένου-εσοχής προσθέτει χώρο στο μπροστινό μέρος του κειμένου, όπως για εσοχή παραγράφων.
Ακολουθεί ένα παράδειγμα για το πώς να χρησιμοποιήσετε το CSS για να προσθέσετε χώρο μπροστά από όλες τις παραγράφους σας. Προσθέστε το ακόλουθο CSS στο δικό σας εξωτερικός ή εσωτερικός φύλλο στυλ:
Π {
κείμενο-εσοχή: 3em;
}
Spaces σε HTML μέσα στο κείμενό σας
Εάν θέλετε απλώς να προσθέσετε ένα επιπλέον διάστημα ή δύο στο κείμενό σας, μπορείτε να χρησιμοποιήσετε το μη σπασμένο χώρο. Αυτός ο χαρακτήρας ενεργεί ακριβώς όπως ένας τυπικός χαρακτήρας διαστήματος, μόνο δεν καταρρέει μέσα στο πρόγραμμα περιήγησης.
Ακολουθεί ένα παράδειγμα για το πώς να προσθέσετε πέντε κενά μέσα σε μια γραμμή κειμένου:
Αυτό το κείμενο έχει πέντε επιπλέον κενά μέσα του
Χρησιμοποιεί το HTML:
Αυτό το κείμενο έχει πέντε επιπλέον κενά μέσα του
Μπορείτε επίσης να χρησιμοποιήσετε το
για να προσθέσετε επιπλέον αλλαγές γραμμής.
Αυτή η πρόταση έχει πέντε αλλαγές γραμμής στο τέλος της
Γιατί η απόσταση σε HTML είναι κακή ιδέα
Ενώ αυτές οι επιλογές λειτουργούν και οι δύο - το μη διακεκομμένο στοιχείο θα προσθέσει όντως διαστήματα στο κείμενο και τη γραμμή σας τα διαλείμματα θα προσθέσουν διαστήματα κάτω από την παραπάνω παράγραφο - αυτός δεν είναι ο καλύτερος τρόπος για να δημιουργήσετε διαστήματα στο δικό σας ιστοσελίδα. Η προσθήκη αυτών των στοιχείων στο HTML σας προσθέτει οπτικές πληροφορίες στον κώδικα αντί να διαχωρίζει τη δομή μιας σελίδας (HTML) από τα οπτικά στυλ (CSS). Οι βέλτιστες πρακτικές υπαγορεύουν ότι αυτές πρέπει να είναι ξεχωριστές για διάφορους λόγους, όπως η ευκολία ενημέρωσης στο μέλλον και το συνολικό μέγεθος αρχείου και απόδοση σελίδας.
Εάν χρησιμοποιείτε ένα εξωτερικό φύλλο στυλ για να υπαγορεύσετε όλα τα στυλ και τα κενά σας, τότε είναι εύκολο να αλλάξετε αυτά τα στυλ για ολόκληρο τον ιστότοπο, αφού απλά πρέπει να ενημερώσετε αυτό το φύλλο στυλ.
Εξετάστε το παραπάνω παράδειγμα της πρότασης με πέντε
ετικέτες στο τέλος του. Αν θέλετε αυτό το διάστημα από το κάτω μέρος κάθε παραγράφου, θα πρέπει να προσθέσετε αυτόν τον κώδικα HTML σε κάθε παράγραφο σε ολόκληρο τον ιστότοπό σας. Αυτό είναι ένα σωστό ποσό επιπλέον σήμανσης που θα φουσκώνει τις σελίδες σας. Επιπλέον, αν αποφασίσετε ότι αυτό το διάστημα είναι πολύ ή πολύ μικρό και θέλετε να το αλλάξετε λίγο, θα πρέπει να επεξεργαστείτε κάθε παράγραφο σε ολόκληρο τον ιστότοπό σας. Οχι ευχαριστώ!
Αντί να προσθέσετε αυτά τα διαχωριστικά στοιχεία στον κώδικά σας, χρησιμοποιήστε CSS.
Π {
επένδυση-κάτω: 20px;
}
Αυτή η γραμμή CSS θα προσθέσει διαστήματα κάτω από τις παραγράφους της σελίδας σας. Εάν θέλετε να αλλάξετε αυτό το διάστημα στο μέλλον, επεξεργαστείτε αυτήν τη μία γραμμή (αντί για τον κωδικό ολόκληρου του ιστότοπού σας) και είστε έτοιμοι!
Τώρα, εάν πρέπει να προσθέσετε έναν μόνο χώρο σε ένα μέρος του ιστότοπού σας, χρησιμοποιώντας ένα
ετικέτα ή ένας ενιαίος χώρος που δεν σπάει δεν είναι το τέλος του κόσμου, αλλά πρέπει να είστε προσεκτικοί. Η χρήση αυτών των ενσωματωμένων επιλογών απόστασης HTML μπορεί να είναι μια ολισθηρή κλίση. Ενώ ένα ή δύο μπορεί να μην βλάψουν τον ιστότοπό σας, εάν συνεχίσετε σε αυτήν την πορεία, θα εισαγάγετε προβλήματα στις σελίδες σας. Στο τέλος, προτιμάτε να στραφείτε σε CSS για απόσταση HTML και όλες τις άλλες οπτικές ανάγκες ιστοσελίδας.