Jos olet koskaan tarkastellut HTML-elementtien luetteloa, olet ehkä löytänyt itsellesi kysymyksen "Mikä on blockquote?" Blockquote-elementti on HTML-tunnistepari, jota käytetään määrittämään pitkiä lainauksia. Tässä määritellään tämä elementti W3C HTML5 -määrityksen mukaan:
Blockquote-elementti edustaa osaa, joka on lainattu toisesta lähteestä.
Kuinka käyttää Blockquotea Web-sivuillasi
Kun kirjoitat tekstiä Web-sivulle ja luodaan kyseisen sivun asettelua, haluat joskus kutsua tekstiä lohkoksi. Tämä voisi olla lainaus muualta, kuten asiakaskertomus, joka liittyy tapaustutkimukseen tai hankkeen menestystarinaan. Tämä voisi olla myös suunnittelukäsittely, joka toistaa tärkeän tekstin artikkelista tai sisällöstä. Julkaisemisessa tätä kutsutaan joskus pull-quote -luokaksi. Web-suunnittelussa yksi tapa saavuttaa tämä (ja tapa, jolla olemme tässä artikkelissa) kutsutaan blockquote-nimeksi.
Katsotaan siis, kuinka käytät blockquote -tunnistetta määritelläksesi pitkiä lainauksia, kuten Lewis Carrollin "The Jabberwocky" -erittelystä:
"Twas brillig ja slithey tovesOliko juhla ja kyyhkyset wabessa:Kaikki mimsy olivat borogoves,Ja mäni ratsat outgrabe.
(esittäjä: Lewis Carroll)
Esimerkki Blockquote-tunnisteen käyttämisestä
Blockquote -tunniste on semanttinen tagi, joka kertoo selaimelle tai käyttäjäagentille, että sisältö on pitkä tarjous. Sinun ei pitäisi liittää tekstiä, joka ei ole hintatarjous blockquote-tunnisteen sisällä. Muista, että "lainaus" on usein todelliset sanat, jotka joku on sanonut tai teksti ulkopuolisesta lähteestä (kuten Lewis Carrollin teksti tässä artikkelissa), mutta se voida olla myös pullquote-käsite, jota aiemmin käsiteltiin. Kun ajattelet, että pullquote on lainaus tekstiä, se vain sattuu olemaan samasta artikkelista, että lainaus itsessään näkyy.
Useimmat selaimet lisäävät sisennystä (noin 5 välilyöntiä) lohkon molemmille puolille, jotta se erottuu ympäröivästä tekstistä. Jotkut äärimmäisen vanhat selaimet voivat jopa tehdä quoted tekstin kursiivilla. Muista, että tämä on yksinkertaisesti elementtielementin oletusmuoto. CSS: llä on täysi määräysvaltaa siitä, miten korttikuvasi näkyy. Voit lisätä tai jopa poistaa sisennyksen, lisätä taustavärejä tai lisätä tekstin kokoa. Voit lainaa lainauksen sivun toiselle sivulle ja muuta tekstiä ympäröi se, joka on tavallinen visuaalinen tyyli, jota käytetään lehtikuukausina lehdissä. Sinulla on hallussa blockquoten ulkoasua CSS: llä, josta keskustelemme hieman pian. Jatketaan nyt vielä, miten lisätään laina itsellesi HTML-merkintään.
Lisääksesi blockquote-tunnisteen tekstiisi ympäröivä tekstiä, joka on lainaus seuraavalla tagiparilla -
Esimerkiksi:
"Twas brillig ja slithey toves Oliko juhla ja kyyhkyset wabessa: Kaikki mimsy olivat borogoves, Ja mäni ratsat outgrabe.Kuten näet, lisäät vain pari blockquote-tunnistetta lainattavan sisällön ympärille. Tässä esimerkissä käytimme myös joitain taukotunnisteita () lisäämällä tarvittaessa yksittäisiä rivinvaihtoja tekstin sisälle. Tämä johtuu siitä, että luomme tekstiä runosta, jossa kyseiset tauot ovat tärkeitä. Jos luot asiakasasiakastelukemäärän, eikä rivejä tarvinnut rikkoa tietyissä osissa, et halua lisätä näitä rikkoontunnisteita ja sallia selaimen itse kääriä ja murtaa tarpeen mukaan näytön koon mukaan.
Älä käytä lokikirjaa sisennystekstiin
Monien vuosien ajan ihmiset käyttivät korttikooditunnistetta, jos he halusivat lisätä tekstiä verkkosivustollaan, vaikka kyseinen teksti ei ollut pullquote. Tämä on huono käytäntö! Et halua käyttää blockquotin semanttia pelkästään visuaalisista syistä. Jos haluat sijoita tekstiasi, käytä tyylitiedostoja, ei blockquote-tunnisteita (ellei tietysti yritä laukaista lainaa!). Yritä laittaa koodi verkkosivustasi, jos yrität vain lisätä viereen:
Tämä on tekstiä, joka on sisennetty.
Seuraavaksi kohdistat kyseisen luokan CSS-tyyliin
.indented {
pehmuste: 0 10px;}
Tämä lisää pehmusteiden 10 pikseliä kappaleen kummallekin puolelle.
