Kung nakita mo na ang isang listahan ng mga elemento ng HTML, maaaring natuklasan mo ang iyong sarili na humihingi ng "kung ano ang isang blockquote?" Ang elementong blockquote ay isang pares ng tag ng HTML na ginagamit upang tukuyin ang mga mahahabang sipi. Narito ang kahulugan ng elementong ito ayon sa detalye ng W3C HTML5:
Ang elementong blockquote ay kumakatawan sa isang seksyon na naka-quote mula sa isa pang pinagmulan.
Paano Gamitin ang Blockquote sa Iyong Mga Webpage
Kapag sumusulat ka ng teksto sa isang web page at lumilikha ng layout ng pahinang iyon, kung minsan ay nais mong tawagan ang isang bloke ng teksto bilang isang panipi.
Ito ay maaaring isang quote mula sa ibang lugar, tulad ng isang testimonial ng customer na kasama ng isang pag-aaral ng kaso o kwento ng tagumpay ng proyekto. Ito ay maaaring maging isang disenyo ng paggamot na uulit ng ilang mahahalagang teksto mula sa artikulo o nilalaman mismo. Sa pag-publish, minsan ito ay tinatawag na pull-quote , Sa web design, ang isa sa mga paraan upang makamit ito (at ang paraan na tinakpan natin sa artikulong ito) ay tinatawag na blockquote.
Kaya tingnan natin kung paano mo gagamitin ang tag blockquote upang tukuyin ang matagal na mga panipi, tulad ng sipi na ito mula sa "The Jabberwocky" ni Lewis Carroll:
'Twas brillig at ang slithey toves
Ganyan at gimble sa wabe:
Lahat ng mimsy ay ang mga borogoves,
At ang mome raths outgrabe.
(ni Lewis Carroll)
Halimbawa ng Paggamit ng Blockquote Tag
Ang blockquote tag ay isang tag na semantiko na nagsasabi sa browser o user agent na ang mga nilalaman ay mahaba ang panipi. Dahil dito, hindi mo dapat isama ang teksto na hindi isang panipi sa loob ng tag ng blockquote. Tandaan, ang isang "panipi" ay kadalasang aktwal na mga salita na sinabing isang tao o teksto mula sa labas ng pinagmulan (tulad ng Lewis Carroll na teksto sa artikulong ito), ngunit maaari rin itong maging konsepto ng pullquote na aming sinakop na dati.
Kapag sa tingin mo tungkol dito, ang pullquote na ito ay isang quote ng teksto, ito ay mangyayari lamang na mula sa parehong artikulo na ang quote mismo ay lilitaw sa.
Karamihan sa mga web browser ay nagdaragdag ng ilang mga indenting (tungkol sa 5 mga puwang) sa magkabilang panig ng isang blockquote upang gawin itong tumayo mula sa nakapalibot na teksto. Ang ilang mga lumang lumang mga browser ay maaaring kahit na mag-render ang naka-quote na teksto sa italics.
Tandaan na ito lamang ang default na estilo ng elemento ng blockquote. Sa CSS, mayroon kang kabuuang kontrol sa kung paano ipapakita ang iyong blockquote. Maaari mong taasan o tanggalin pa ang indent, magdagdag ng mga kulay ng background o dagdagan ang laki ng teksto upang higit pang tawagan ang quote. Maaari mong float na quote sa isang gilid ng pahina at magkaroon ng iba pang mga teksto balutin sa paligid nito, na kung saan ay isang karaniwang estilo ng visual na ginagamit para sa pullquotes sa naka-print na magazine. Mayroon kang kontrol sa hitsura ng blockquote sa CSS, isang bagay na tatalakayin namin nang kaunti pa. Sa ngayon, patuloy na tingnan kung paano idagdag ang quote mismo sa iyong HTML markup.
Upang idagdag ang tag na blockquote sa iyong teksto, palibutan lamang ang teksto na isang panipi sa sumusunod na pares ng tag -
Halimbawa:
'Twas brillig at ang slithey toves
Ganyan at gimble sa wabe:
Lahat ng mimsy ay ang mga borogoves,
At ang mome raths outgrabe.
Tulad ng iyong nakikita, idagdag mo lang ang pares ng mga tag na blockquote sa paligid ng nilalaman ng quote mismo. Sa halimbawang ito, ginagamit din namin ang ilang mga tag ng break (
) upang magdagdag ng mga solong line break kung saan naaangkop sa loob ng teksto. Ito ay dahil nililikha namin ang teksto mula sa isang tula, kung saan ang mga partikular na pahinga ay mahalaga. Kung ang iyong paglikha ng isang testimonial quote ng customer, at ang mga linya ay hindi kailangan upang masira ang mga partikular na bahagi, hindi mo nais na idagdag ang mga tag na break na ito at payagan ang browser na i-wrap at buksan kung kinakailangan batay sa laki ng screen.
Huwag Gamitin ang Blockquote sa Indent Text
Sa loob ng maraming taon, ginamit ng mga tao ang tag ng blockquote kung nais nilang i-indent ang teksto sa kanilang webpage, kahit na ang tekstong iyon ay hindi isang pullquote. Ito ay isang masamang kaugalian! Hindi mo nais na gamitin ang mga semantika ng blockquote para lamang sa mga visual na dahilan. Kung kailangan mong i-indent ang iyong teksto, dapat mong gamitin ang mga style sheet, hindi ang blockquote tag (maliban kung, siyempre, kung ano ang sinusubukan mong i-indent ay isang quote!). Subukan mong ilagay ang code na ito sa iyong web page kung sinusubukan mong magdagdag lamang ng indent:
Ito ay magiging teksto na naka-indent.
Susunod, itutok mo ang klase na may estilo ng CSS
.indented {
padding: 0 10px;
}
Ito ay nagdaragdag ng 10 pixels ng padding sa magkabilang panig ng talata.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 5/8/17.