Os ydych chi erioed wedi edrych ar restr o elfennau HTML, efallai eich bod wedi dod o hyd i chi'ch hun yn gofyn "beth yw rhwystr?" Mae'r elfen rhwystr yn bâr tag HTML a ddefnyddir i ddiffinio dyfyniadau hir. Dyma'r diffiniad o'r elfen hon yn ôl manyleb W3C HTML5:
Mae'r elfen rhwystr yn cynrychioli adran a ddyfynnir o ffynhonnell arall.
Sut i Ddefnyddio Blockquote ar Eich Gwefannau
Pan fyddwch chi'n ysgrifennu testun mewn tudalen we a chreu cynllun y dudalen honno, rydych weithiau'n awyddus i alw bloc o destun fel dyfynbris.
Gallai hyn fod yn ddyfyniad o rywle arall, fel tysteb cwsmer sy'n cyd-fynd ag astudiaeth achos neu stori llwyddiant prosiect. Gallai hyn hefyd fod yn driniaeth ddylunio sy'n ailadrodd peth testun pwysig o'r erthygl neu'r cynnwys ei hun. Wrth gyhoeddi, gelwir hyn weithiau yn ddyfyniad tynnu , Mewn dylunio gwe, gelwir un o'r ffyrdd i gyflawni hyn (a'r ffordd yr ydym yn ei chynnwys yn yr erthygl hon) yn rhwystr.
Felly, gadewch i ni edrych ar sut y byddech chi'n defnyddio'r tag blocfeddwl i ddiffinio dyfyniadau hir, fel y detholiad hwn o "The Jabberwocky" gan Lewis Carroll:
'Twas brillig a'r toves slithey
A wnaeth gyre a chlywed yn y wabe:
Pob mimsy oedd y borogoves,
Ac mae'r mome yn rhyfeddu allan.
(gan Lewis Carroll)
Enghraifft o Defnyddio'r Tag Blockquote
Mae'r tag blockquote yn tag semantig sy'n dweud wrth y porwr neu asiant defnyddiwr bod y cynnwys yn ddyfynbris hir. Fel y cyfryw, ni ddylech amgáu testun nad yw'n ddyfyniad y tu mewn i'r tag blockquote. Cofiwch, mae "dyfynbris" yn aml yn eiriau gwirioneddol y mae rhywun wedi ei ddweud neu destun o ffynhonnell allanol (fel testun Lewis Carroll yn yr erthygl hon), ond gall hefyd fod yn gysyniad pullquote a gwnaethom sylw yn flaenorol.
Pan fyddwch chi'n meddwl amdano, mae'r dyfyniad hwnnw yn ddyfyniad o destun, mae'n digwydd i fod o'r un erthygl y mae'r dyfyniad ei hun yn ymddangos ynddo.
Mae'r rhan fwyaf o borwyr gwe yn ychwanegu rhywfaint o fentro (tua 5 man) i'r ddwy ochr o blociau er mwyn ei gwneud yn amlwg o'r testun cyfagos. Efallai y bydd rhai porwyr hynod yn gwneud y testun a ddyfynnir mewn llythrennau italig hyd yn oed.
Cofiwch mai dim ond arddull diofyn yr elfen blocfuddio yw hwn. Gyda CSS, mae gennych chi reolaeth lwyr dros y modd y bydd eich blocdewis yn arddangos. Gallwch gynyddu neu hyd yn oed dynnu'r indent, ychwanegu lliwiau cefndir neu gynyddu maint y testun i alw'r dyfynbris ymhellach. Gallwch chi arnofio'r dyfyniad hwnnw ar un ochr y dudalen a chael y testun arall yn ei gwmpasu, sef arddull weledol gyffredin a ddefnyddir ar gyfer tynnu pigiadau mewn cylchgronau argraffedig. Mae gennych reolaeth dros ymddangosiad y blockquote gyda CSS, rhywbeth y byddwn yn ei drafod ychydig yn fwy cyn bo hir. Am nawr, gadewch i ni barhau i edrych ar sut i ychwanegu'r dyfynbris ei hun i'ch marc HTML.
I ychwanegu'r tag blockquote i'ch testun, cwmpaswch y testun sy'n ddyfynbris gyda'r pâr tag canlynol -
Er enghraifft:
'Twas brillig a'r toves slithey
A wnaeth gyre a chlywed yn y wabe:
Pob mimsy oedd y borogoves,
Ac mae'r mome yn rhyfeddu allan.
Fel y gwelwch, yr ydych yn syml ychwanegwch y pâr o tagiau blockquote o amgylch cynnwys y dyfynbris ei hun. Yn yr enghraifft hon, gwnaethom ddefnyddio rhai tagiau egwyl (
) i ychwanegu seibiannau llinell sengl lle bo'n briodol y tu mewn i'r testun. Mae hyn oherwydd ein bod yn ail-greu testun o gerdd, lle mae'r gwyliau penodol hynny yn bwysig. Pe bai eich bod yn creu dyfynbris tysteb i gwsmeriaid, ac nad oedd angen i'r llinellau dorri mewn rhannau penodol, ni fyddech am ychwanegu'r tagiau torri hyn a chaniatáu i'r porwr ei lapio a'i dorri yn ôl yr angen yn seiliedig ar faint y sgrin.
Peidiwch â Defnyddiwch Blockquote i Gynnwys Testun
Am lawer o flynyddoedd, roedd pobl yn defnyddio'r tag blocfeddygol os oeddent am roi testun ar eu gwefan, hyd yn oed os nad oedd y testun hwnnw'n dipyn. Mae hon yn arfer gwael! Nid ydych chi am ddefnyddio semantics blockquote yn unig am resymau gweledol. Os oes angen i chi indentio'ch testun, dylech ddefnyddio taflenni arddull, nid y tagiau blocfwrdd (oni bai, wrth gwrs, yr hyn yr ydych yn ceisio ei indent yw dyfynbris!). Rhowch gynnig ar y cod hwn yn eich tudalen we os ydych yn ceisio syml ychwanegu nodyn:
Bydd hwn yn destun sydd wedi'i bentio.
Nesaf, byddech yn targedu'r dosbarth hwnnw gyda steil CSS
.indented {
padio: 0 10px;
}
Mae hyn yn ychwanegu 10 picsel o padio i bob ochr i'r paragraff.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 5/8/17.