Ако некогаш сте погледнале во листа на HTML елементи, може да се најде себеси прашувајќи "што е блокнот?" Елементот на блокнот е HTML таг пар кој се користи за дефинирање на долгите цитати. Еве ја дефиницијата на овој елемент според спецификацијата на W3C HTML5:
Елементот на блокнот претставува дел кој е цитиран од друг извор.
Како да ја користите блоккотата на вашите веб-страници
Кога пишувате текст во веб-страница и создавате изглед на таа страница, понекогаш сакате да повикате блок од текст како цитат.
Ова може да биде цитат од некое друго место, како сведоштво на клиент кој ја придружува студијата на случај или успешната приказна на проектот. Ова, исто така, може да биде дизајниран третман кој повторува некој важен текст од самата статија или содржина. Во издаваштво, ова понекогаш се нарекува и повлекување , Во веб-дизајнот, еден од начините за постигнување на ова (и начинот на којшто го покриваме во овој напис) се нарекува блок-блок.
Па, ајде да погледнеме како ќе ја употребиш блоккотата за да дефинирате долги цитати, како што е овој извадок од "The Jabberwocky" од Луис Керол:
"Twas brillig и slithey toves
Дали гробови и да се грижат во бесот:
Сите мими беа борогови,
И момчето извира.
(од Луис Керол)
Пример за користење на тековната блоккота
Блокираната таг е семантичка ознака која му кажува на прелистувачот или корисничкиот агент дека содржината е долга цитат. Како таква, не треба да приложите текст што не е цитат во блокот-тагот. Запомнете, "цитат" е често актуелни зборови што некој ги кажал или текстот од надворешен извор (како текстот на Луис Керол во овој член), но тоа исто така може да биде концептот pullquote што претходно го покривавме.
Кога ќе размислите за тоа, тоа потскопување е цитат од текст, едноставно се случува да биде од истиот напис во кој самиот цитат се појавува внатре.
Повеќето веб-прелистувачи додаваат малку вдлабнување (околу 5 празни места) на двете страни на блок-блокот за да се истакне од околниот текст. Некои исклучително стари прелистувачи може дури и да го стават цитираниот текст во закосени букви.
Запомнете дека ова е едноставно стандарден стил на блок-блок-елементот. Со CSS, имате целосна контрола врз тоа како ќе се прикаже блоккотата. Можете да ја зголемите или дури да ја отстраните алинејата, да додадете бои во заднина или да ја зголемите големината на текстот за да го повикате цитат. Можете да плови тоа цитирање на една страна од страната и да го заокружи другиот текст, што вообичаено е визуелен стил што се користи за повлекување во печатени списанија. Вие имате контрола над изгледот на блоккотата со CSS, нешто што ќе разговараме малку пократко. За сега, ајде да продолжиме да гледаме како да го додадете самиот цитат на вашиот HTML ознака.
За да го додадете блокното означувањето на вашиот текст, едноставно го опкружувате текстот што е цитат со следниот пар тагови -
На пример:
"Twas brillig и slithey toves
Дали гробови и да се грижат во бесот:
Сите мими беа борогови,
И момчето извира.
Како што можете да видите, едноставно додадете парчиња блоккетирани тагови околу содржината на самиот цитат. Во овој пример, исто така, користевме некои одборни ознаки (
) за да додадете паузи со поединечни линии каде што е соодветно во текстот. Тоа е затоа што ние го пресоздаваме текстот од една песна, каде што овие специфични паузи се важни. Ако сте креирале препорачателски цитат од купувачи, и линиите не требаше да се скршат во одредени делови, вие не би сакале да ги додавате овие ознаки за одложувања и да дозволите самиот прелистувач да го преврти и да го скрши колку што е потребно врз основа на големината на екранот.
Не ја користај блоккотата на текстот на внесување
Долги години, луѓето ја користеа ознаката за блоккоти ако сакаат да го наведат текстот на нивната веб-страница, дури и ако тој текст не бил поттикнат. Ова е лоша практика! Вие не сакате да ја користите семантиката на блоккотата единствено поради визуелни причини. Ако треба да го навлезете текстот, треба да користите стилски листови, а не блок-означени ознаки (освен, се разбира, она што се обидувате да го наместите е цитат!). Обидете се да го ставите овој код во вашата веб-страница ако едноставно се обидувате да додадете алимент:
Ова ќе биде текст што е вовлечен.
Напред, ќе ја насочивте таа класа со стил на CSS
.indented {
Соочувајќи се: 0 10px;
}
Ова ги додава 10-те пиксели за дополнување на двете страни од пасусот.
Авторски напис од Џенифер Крајнин. Ревидирани од Џереми Жирар на 5/8/17.