Εάν έχετε δει ποτέ μια λίστα με στοιχεία 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 σε κάθε πλευρά της παραγράφου.
