Blockquote ni nini?

Ikiwa umewahi kutazama orodha ya mambo ya HTML, huenda umejikuta ukiuliza "ni nini blockquote?" Kipengele cha blockquote ni jozi la lebo ya HTML ambalo linatumiwa kufafanua nukuu ndefu. Hapa ni ufafanuzi wa kipengele hiki kulingana na vipimo vya W3C HTML5:

Kipengele cha blockquote kinawakilisha sehemu ambayo imechukuliwa kutoka chanzo kingine.

Jinsi ya kutumia Blockquote kwenye Wavuti zako

Unapoandika maandishi kwenye ukurasa wa wavuti na unda mpangilio wa ukurasa huo, wakati mwingine unataka kuita kizuizi cha maandiko kama quotation.

Hii inaweza kuwa quote kutoka mahali pengine, kama ushuhuda wa wateja ambao unaambatana na utafiti wa kesi au hadithi ya mafanikio ya mradi. Hii pia inaweza kuwa matibabu ya kubuni ambayo yanarudia maandishi fulani muhimu kutoka kwenye makala au maudhui yenyewe. Katika kuchapisha, hii mara nyingine huitwa kuvuta-quote , Katika kubuni mtandao, mojawapo ya njia za kufikia hili (na njia tunayoifunika katika makala hii) inaitwa blockquote.

Kwa hiyo hebu tutazame jinsi unavyotumia lebo ya blockquote ili kufafanua nukuu ndefu, kama vile hii kutoka kwa "Jabberwocky" na Lewis Carroll:

'Twas brillig na tophi slithey
Je, walikuja na kupiga gimble kwenye wafuasi:
Mitsy wote walikuwa borogoves,
Na mome hupiga uchafu.

(na Lewis Carroll)

Mfano wa kutumia Blockquote Tag

Lebo ya blockquote ni lebo ya semantic inayoelezea kivinjari au wakala wa mtumiaji kuwa yaliyomo ni nukuu ndefu. Kwa hiyo, haipaswi kufungwa maandishi ambayo sio nukuu ndani ya lebo ya blockquote.Kumbuka, "nukuu" mara nyingi ni maneno halisi ambayo mtu amesema au kuandika kutoka kwenye chanzo cha nje (kama maandiko ya Lewis Carroll katika makala hii), lakini inaweza pia kuwa dhana ya kuchochea ambayo tulifunua awali.

Unapofikiria kuhusu hilo, kuchochea kwao ni nukuu ya maandishi, inatokea tu kuwa kutoka kwa makala hiyo hiyo ambayo quote yenyewe inatokea.

Vivinjari vingi vya wavuti huongeza baadhi ya vitu (karibu na nafasi 5) kwa pande zote mbili za blockquote ili kuifanya kutoweka kutoka kwa maandishi yaliyomo. Baadhi ya vivinjari vya kale sana huenda hata kutoa maandishi yaliyotajwa katika herufi.

Kumbuka kwamba hii ni tu styling default ya kipengele blockquote. Kwa CSS, una udhibiti kamili juu ya jinsi blockquote yako itaonyesha. Unaweza kuongeza au hata kuondoa kipengee, ongeza rangi za asili au kuongeza ukubwa wa maandishi ili uongeze tena nukuu. Unaweza kuelezea kwamba kunukuu upande mmoja wa ukurasa na kuwa na maandishi mengine ya kuifunga kuzunguka, ambayo ni mtindo wa kawaida unaotumiwa kwa ajili ya vipandikizi katika magazeti yaliyochapishwa. Una udhibiti wa kuonekana kwa blockquote na CSS, kitu tutachojadili kidogo kidogo hivi karibuni. Kwa sasa, hebu tuendelee kuangalia jinsi ya kuongeza nukuu yenyewe kwenye markup yako ya HTML.

Ili kuongeza lebo ya blockquote kwenye maandishi yako, uzunguka tu maandishi ambayo ni quotation na jozi lafuatayo -

Kwa mfano:


'Twas brillig na tophi slithey

Je, walikuja na kupiga gimble kwenye wafuasi:

Mitsy wote walikuwa borogoves,

Na mome hupiga uchafu.

Kama unavyoweza kuona, unaongeza tu jozi ya vitambulisho vya blockquote karibu na maudhui ya quote yenyewe. Katika mfano huu, tulitumia pia vitambulisho vya mapumziko (
) ili kuongeza mapumziko ya mstari mmoja ambapo inafaa ndani ya maandiko. Hii ni kwa sababu tunarudia maandishi kutoka kwa shairi, ambapo mapumziko hayo ni muhimu. Ikiwa yako iliunda ushuhuda wa ushuhuda wa mteja, na mistari hayakuhitaji kuvunja sehemu maalum, hutaki kuongezea vitambulisho vya kupumzika na kuruhusu kivinjari yenyewe kuifuta na kuvunja kama inahitajika kulingana na ukubwa wa skrini.

Usitumie Blockquote kwa Nakala ya Haki

Kwa miaka mingi, watu walitumia lebo ya blockquote ikiwa walitaka kufuta maandiko kwenye ukurasa wao wa wavuti, hata kama maandishi hayo hayakuwa ya kuchochea. Hii ni mazoezi mabaya! Hutaki kutumia semantics ya blockquote tu kwa sababu za kuona. Ikiwa unahitaji kufuta maandishi yako, unapaswa kutumia karatasi za mtindo, si vitambulisho vya blockquote (isipokuwa, bila shaka, unachojaribu kunama ni quote!). Jaribu kuweka msimbo huu kwenye ukurasa wako wa wavuti ikiwa unajaribu tu kuongeza kipengee:

Hili litakuwa ni maandishi ambayo yamepangwa.

Kisha, ungependa kulenga darasa hilo kwa mtindo wa CSS

amepata {
padding: 0 10px;
}

Hii inaongeza saizi 10 za padding kwa upande wowote wa aya.

Makala ya awali na Jennifer Krynin. Iliyotengenezwa na Jeremy Girard tarehe 5/8/17.