Εάν έχετε δει ποτέ μια λίστα με στοιχεία HTML, μπορεί να βρεθήκατε να ρωτάτε "τι είναι blockquote;" Το στοιχείο blockquote είναι ένα ζεύγος ετικετών HTML που χρησιμοποιείται για τον ορισμό μεγάλων τιμών. Εδώ είναι ο ορισμός αυτού του στοιχείου σύμφωνα με την προδιαγραφή W3C HTML5:
Το στοιχείο blockquote αντιπροσωπεύει ένα τμήμα που αναφέρεται σε άλλη πηγή.
Πώς να χρησιμοποιήσετε Blockquote στις ιστοσελίδες σας
Όταν γράφετε κείμενο σε μια ιστοσελίδα και δημιουργείτε τη διάταξη της σελίδας αυτής, μερικές φορές θέλετε να καλέσετε ένα μπλοκ κειμένου ως προσφορά.
Αυτό θα μπορούσε να είναι ένα απόσπασμα από κάπου αλλού, όπως μια μαρτυρία πελάτη που συνοδεύει μια μελέτη περίπτωσης ή ιστορία επιτυχίας του έργου. Αυτό θα μπορούσε επίσης να είναι μια επεξεργασία σχεδιασμού που επαναλαμβάνει κάποιο σημαντικό κείμενο από το ίδιο το άρθρο ή το περιεχόμενο. Κατά τη δημοσίευση, αυτό καλείται μερικές φορές ένα pull-quote . Στον σχεδιασμό ιστοσελίδων, ένας από τους τρόπους επίτευξης αυτού (και ο τρόπος που καλύπτουμε σε αυτό το άρθρο) ονομάζεται blockquote.
Ας δούμε λοιπόν πώς θα χρησιμοποιούσατε την ετικέτα blockquote για να ορίσετε μακριές παραπομπές, όπως αυτό το απόσπασμα από το "The Jabberwocky" του Lewis Carroll:
'Δύσκολα και τα χαλαρά
Μήπως γύρισε και πήγε στο wabe:
Όλοι οι μιμούδες ήταν οι βοροβόλοι,
Και οι τάφοι των μουσουλμάνων ξεπερνούν.
(από τον Lewis Carroll)
Παράδειγμα χρήσης της ετικέτας Blockquote
Η ετικέτα blockquote είναι μια σημασιολογική ετικέτα που λέει στο πρόγραμμα περιήγησης ή στον πράκτορα χρήστη ότι τα περιεχόμενα είναι μακρά προσφορά. Ως εκ τούτου, δεν πρέπει να επισυνάπτετε κείμενο που δεν είναι προσφορά μέσα στην ετικέτα blockquote.Δεν θυμάστε ότι μια "προσφορά" είναι συχνά πραγματικές λέξεις που κάποιος έχει πει ή κείμενο από μια εξωτερική πηγή (όπως το κείμενο του Lewis Carroll σε αυτό το άρθρο), αλλά Μπορεί επίσης να είναι η έννοια pullquote που καλύψαμε προηγουμένως.
Όταν το σκέφτεστε, αυτό το pullquote είναι ένα απόσπασμα του κειμένου, απλά συμβαίνει να είναι από το ίδιο άρθρο που εμφανίζεται το ίδιο το απόσπασμα.
Οι περισσότεροι περιηγητές ιστού προσθέτουν κάποια εσοχή (περίπου 5 διαστήματα) και στις δύο πλευρές ενός blockquote ώστε να ξεχωρίζουν από το περιβάλλον κείμενο. Ορισμένα εξαιρετικά παλιά προγράμματα περιήγησης ενδέχεται να κάνουν ακόμη και το αναφερόμενο κείμενο με πλάγιους χαρακτήρες.
Θυμηθείτε ότι αυτό είναι απλώς το προεπιλεγμένο στυλ του στοιχείου blockquote. Με το CSS, έχετε πλήρη έλεγχο του τρόπου εμφάνισης του blockquote σας. Μπορείτε να αυξήσετε ή ακόμα και να αφαιρέσετε την εσοχή, να προσθέσετε χρώματα φόντου ή να αυξήσετε το μέγεθος κειμένου για να καλέσετε περαιτέρω την προσφορά. Μπορείτε να μεταφέρετε αυτό το απόσπασμα σε μια πλευρά της σελίδας και να έχετε το άλλο κείμενο γύρω από αυτό, το οποίο είναι συνήθως οπτικό στυλ που χρησιμοποιείται για pullquotes σε έντυπα περιοδικά. Έχετε τον έλεγχο της εμφάνισης του blockquote με το CSS, κάτι που θα συζητήσουμε λίγο πιο σύντομα. Προς το παρόν, ας συνεχίσουμε να εξετάζουμε τον τρόπο με τον οποίο προσθέτουμε την ίδια την προσφορά στη σήμανση HTML.
Για να προσθέσετε την ετικέτα blockquote στο κείμενό σας, απλά περιβάλλετε το κείμενο που είναι μια προσφορά με το ακόλουθο ζεύγος ετικετών -
Για παράδειγμα:
'Δύσκολα και τα χαλαρά
Μήπως γύρισε και πήγε στο wabe:
Όλοι οι μιμούδες ήταν οι βοροβόλοι,
Και οι τάφοι των μουσουλμάνων ξεπερνούν.
Όπως μπορείτε να δείτε, μπορείτε απλά να προσθέσετε το ζεύγος ετικετών blockquote γύρω από το περιεχόμενο της ίδιας της προσφοράς. Σε αυτό το παράδειγμα, χρησιμοποιήσαμε επίσης κάποιες ετικέτες διακοπής (
) για να προσθέσετε αποσπάσματα μιας γραμμής, όπου χρειάζεται, μέσα στο κείμενο. Αυτό οφείλεται στο γεγονός ότι αναπαράγουμε κείμενο από ένα ποίημα, όπου τα συγκεκριμένα διαλείμματα είναι σημαντικά. Εάν δημιουργούσατε ένα απόσπασμα μαρτυρίας πελάτη και οι γραμμές δεν χρειάστηκε να σπάσει σε συγκεκριμένα τμήματα, δεν θα θέλατε να προσθέσετε αυτές τις ετικέτες διακοπής και να επιτρέψετε στο ίδιο το πρόγραμμα περιήγησης να περιτυλίξει και να σπάσει, ανάλογα με τις ανάγκες, με βάση το μέγεθος της οθόνης.
Μην χρησιμοποιείτε το Blockquote στο εσοχικό κείμενο
Για πολλά χρόνια, οι άνθρωποι χρησιμοποίησαν την ετικέτα blockquote εάν ήθελαν να περιγράψουν κείμενο στην ιστοσελίδα τους, ακόμα κι αν αυτό το κείμενο δεν ήταν ένα pullout. Αυτή είναι μια κακή πρακτική! Δεν θέλετε να χρησιμοποιήσετε τη σημασιολογία του blockquote αποκλειστικά για οπτικούς λόγους. Αν χρειάζεται να προσθέσετε το κείμενο σας, θα πρέπει να χρησιμοποιήσετε τα φύλλα στυλ, όχι τα ετικέτες blockquote (εκτός αν, φυσικά, αυτό που προσπαθείτε να παύσετε είναι ένα απόσπασμα!). Προσπαθήστε να τοποθετήσετε αυτόν τον κώδικα στην ιστοσελίδα σας εάν προσπαθείτε απλώς να προσθέσετε μια παύλα:
Αυτό θα είναι κείμενο που είναι χαραγμένο.
Στη συνέχεια, θα στοχεύσετε την τάξη με στυλ CSS
.indentated {
padding: 0 10px;
}}
Αυτό προσθέτει τα 10 pixels του padding σε κάθε πλευρά της παραγράφου.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 5/8/17.