אם ראית פעם רשימה של רכיבי HTML, ייתכן שמצאת את עצמך שואלת "מהו בלוקוטה?" אלמנט blockquote הוא זוג תגי HTML המשמש להגדרת הצעות מחיר ארוכות. הנה ההגדרה של אלמנט זה על פי מפרט W3C HTML5:
אלמנט blockquote מייצג קטע המצוטט ממקור אחר.
כיצד להשתמש בלוקוטה על דפי האינטרנט שלך
כאשר אתה כותב טקסט בדף אינטרנט ויוצר את פריסת הדף, לפעמים אתה רוצה לקרוא גוש טקסט כציטוט.
זה יכול להיות ציטוט ממקום אחר, כמו המלצה הלקוח המלווה מקרה או סיפור הצלחה הפרויקט. זה יכול להיות גם טיפול עיצוב חוזר על כמה טקסט חשוב מן המאמר או התוכן עצמו. בפרסום, זה נקרא לפעמים למשוך ציטוט , עיצוב אתרים, אחת הדרכים להשיג זאת (ואת הדרך שבה אנו מכסים במאמר זה) נקרא blockquote.
אז בואו נסתכל על איך תשתמשו בתג הבלוקקוט כדי להגדיר ציטוטים ארוכים, כגון קטע זה מתוך "ג'אפברווקי" מאת לואיס קארול:
"זה היה בריליג והצלצלים
האם הצטלמה באצבע ובזימניות:
כל המימדי היו הבורגות,
והשבבים של האמא.
(מאת לואיס קארול)
דוגמה לשימוש בתג בלוקוטה
תג ה- blockquote הוא תג סמנטי המציין את הדפדפן או סוכן המשתמש שהתוכן הוא ציטוט ארוך. ככזה, אל תציפו טקסט שאינו ציטוט בתוך התג של בלוקוטה. זכור, "ציטוט" הוא לעתים קרובות מילים בפועל שמישהו אמר או טקסט ממקור חיצוני (כמו הטקסט של לואיס קרול במאמר זה), אבל זה יכול להיות גם את הרעיון pullquote כי כיסינו בעבר.
כאשר אתה חושב על זה, כי pullquote זה הוא ציטוט של טקסט, זה פשוט קורה כי מאותו מאמר כי הציטוט עצמו מופיע.
רוב דפדפני האינטרנט להוסיף כמה indenting (על 5 רווחים) לשני הצדדים של blockquote כדי להפוך אותו להתבלט מן הטקסט שמסביב. כמה דפדפנים ישנים מאוד עשויים אפילו להפוך את הטקסט המצוטט בנטוי.
זכור כי זה פשוט את סגנון ברירת המחדל של אלמנט blockquote. בעזרת CSS, יש לך שליטה מלאה על אופן הצגת הבלוקוטה שלך. ניתן להגדיל או אפילו להסיר את הכניסה, להוסיף צבעי רקע או להגדיל את גודל הטקסט כדי לקרוא עוד את הציטוט. אתה יכול לצוף כי לצטט בצד אחד של הדף יש את הטקסט השני לעטוף סביבו, שהוא סגנון חזותי נפוץ המשמש pullquotes במגזינים מודפסים. יש לך שליטה על המראה של blockquote עם CSS, משהו נדון קצת יותר זמן. לעת עתה, הבה נמשיך לבחון כיצד להוסיף את הציטוט עצמו לסימון ה- HTML שלך.
כדי להוסיף את תג ה- blockquote לטקסט שלך, פשוט הקף את הטקסט שהוא ציטוט עם זוג התג הבא -
לדוגמה:
"זה היה בריליג והצלצלים
האם הצטלמה באצבע ובזימניות:
כל המימדי היו הבורגות,
והשבבים של האמא.
כפי שאתה יכול לראות, אתה פשוט להוסיף את זוג תגים blockquote סביב התוכן של הציטוט עצמו. בדוגמה זו, השתמשנו גם כמה תגים הפסקה (
) כדי להוסיף מעברי שורה בודדים במקום המתאים בתוך הטקסט. הסיבה לכך היא שאנחנו מחדש טקסט מתוך שיר, שבו אלה הפסקות ספציפיות חשובים. אם שלך היו יצירת הצעת לקוח המלצה, ואת השורות לא צריך לשבור חלקים מסוימים, אתה לא רוצה להוסיף אלה לשבור תגים ולאפשר הדפדפן עצמו לעטוף ולשבור לפי הצורך על פי גודל המסך.
אין להשתמש בלוקקוט לטקסט
במשך שנים רבות, אנשים השתמשו בתג blockquote אם הם רוצים להכניס טקסט בדף האינטרנט שלהם, גם אם טקסט זה לא היה משיכה. זהו תרגול רע! אתה לא רוצה להשתמש בסמנטיקה של blockquote אך ורק מסיבות ויזואליות. אם אתה צריך להכניס את הטקסט שלך, אתה צריך להשתמש גיליונות סגנון, לא את התגים blockquote (אלא אם כן, כמובן, מה שאתה מנסה הכניסה הוא ציטוט!). נסה לשים את הקוד בדף האינטרנט שלך אם אתה מנסה פשוט להוסיף כניסה:
זה יהיה טקסט כי הוא מוזנח.
הבא, היית היעד כי בכיתה עם סגנון CSS
.
ריפוד: 0 10px;
}
זה מוסיף את 10 פיקסלים של ריפוד משני צדי הפיסקה.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב 5/8/17.