Nëse ke shikuar ndonjëherë një listë me elementë HTML, mund të kesh gjetur veten duke pyetur "çfarë është një blloqe?" Elementi blockquote është një palë HTML që përdoret për të përcaktuar citate të gjata. Këtu është përkufizimi i këtij elementi sipas specifikimit W3C HTML5:
Elementi blockquote përfaqëson një seksion që citohet nga një burim tjetër.
Si të përdorni Blockquote në Webfaqet tuaja
Kur shkruani një tekst në një faqe interneti dhe krijoni paraqitjen e kësaj faqeje, ndonjëherë dëshironi të thërrisni një bllok teksti si një citat.
Kjo mund të jetë një citim nga diku tjetër, si një dëshmi e klientit që shoqëron një studim të rastit ose një histori suksesi në projekt. Kjo mund të jetë gjithashtu një trajtim dizenjimi që përsërit disa tekste të rëndësishme nga vetë artikulli ose përmbajtja. Në botimin, kjo nganjëherë quhet një pull-quote , Në web design, një nga mënyrat për të arritur këtë (dhe mënyra që ne po mbulojmë në këtë artikull) quhet një blockquote.
Pra, le të shohim se si do ta përdorni tagin e blockquote për të përcaktuar citate të gjata, siç është ky fragment nga "The Jabberwocky" nga Lewis Carroll:
'Twas brillig dhe slittey toves
A vrapuan dhe gimble në wabe:
Të gjitha mimsy ishin borogoves,
Dhe sytë e mi shuhen.
(nga Lewis Carroll)
Shembull i përdorimit të kutisë së bllokimit
Etiketa blockquote është një tag semantik që tregon shfletuesin ose agjentin e përdoruesit se përmbajtja është një citat i gjatë. Si e tillë, ju nuk duhet të bashkangjitni tekst që nuk është citat brenda tagit të blockquote. Kujtoj, një "kuotim" është shpesh fjalë reale që dikush ka thënë ose tekst nga një burim i jashtëm (si teksti i Lewis Carroll në këtë artikull), por mund të jetë edhe koncepti i pullquote që kemi mbuluar më parë.
Kur mendoni për këtë, ajo pullquote është një kuotë e tekstit, ajo thjesht ndodh të jetë nga i njëjti artikull që vetë kuotën paraqitet.
Shumica e shfletuesve të internetit shtojnë disa indenting (rreth 5 hapësira) në të dyja anët e një bllokkoti për ta bërë atë të dalë nga teksti që rrethon. Disa shfletues jashtëzakonisht të vjetër madje mund ta bëjnë tekstin e cituar në italikë.
Mos harroni se ky është thjesht modeli i parazgjedhur i elementit blockquote. Me CSS, ju keni kontroll të plotë se si do të shfaqet blockquote juaj. Ju mund të rrisni ose edhe të hiqni indentin, shtoni ngjyrat e sfondit ose të rrisni madhësinë e tekstit për të thirrur më tej kuotën. Ju mund ta notoni këtë kuotë në një anë të faqes dhe ta keni tekstin tjetër të mbyllur, i cili është një stil vizual zakonisht i përdorur për pullkota në revistat e shtypura. Ju keni kontroll mbi pamjen e blockquote me CSS, diçka që do të diskutojmë pak më shpejt. Tani për tani, le të vazhdojmë të shikojmë se si të shtojmë vetë kuotën në HTML-in tuaj.
Për të shtuar tekstin blockquote në tekstin tënd, thjesht rrethoni tekstin që është citat me palën e mëposhtme të tagave -
Për shembull:
'Twas brillig dhe slittey toves
A vrapuan dhe gimble në wabe:
Të gjitha mimsy ishin borogoves,
Dhe sytë e mi shuhen.
Siç mund ta shikoni, thjesht shtoni palët e tagëve të bllokimit rreth përmbajtjes së vetë kuotës. Në këtë shembull, ne gjithashtu përdorëm disa tags break (
) për të shtuar ndërprerje të linjës së vetme aty ku është e përshtatshme brenda tekstit. Kjo është për shkak se po rikrijojmë tekstin nga një poemë, ku ato ndërprerje specifike janë të rëndësishme. Nëse po krijon një kuotë për dëshminë e klientit, dhe linjat nuk kanë nevojë të thyhen në pjesë specifike, nuk do të dëshironi të shtoni këto etiketa pushimi dhe lejoni vetë shfletuesin të përfundojë dhe të thyhet sipas nevojës bazuar në madhësinë e ekranit.
Mos përdorni Blockquote në Text Indent
Për shumë vite, njerëzit përdorën etiketën blockquote nëse dëshironin të futnin tekst në faqen e tyre, edhe nëse ai tekst nuk ishte një pullquote. Kjo është një praktikë e keqe! Ju nuk dëshironi të përdorni semantikën e blockquote vetëm për arsye vizuale. Nëse keni nevojë të fusni tekstin tuaj, ju duhet të përdorni fletët e stilit, jo etiketat blockquote (përveç nëse, sigurisht, ajo që po përpiqeni të futni është një kuotë!). Provoni të vendosni këtë kod në faqen tuaj të internetit nëse jeni duke u përpjekur thjesht të shtoni një indent:
Ky do të jetë teksti që është i prerë.
Tjetra, do ta targetonit atë klasë me një stil CSS
.indented {
mbushje: 0 10px;
}
Kjo shton 10 piksele të mbushjes në të dy anët e paragrafit.
Artikulli origjinal nga Jennifer Krynin. Redaktuar prej Jeremy Girard më 5/8/17.