HTML öğelerinin bir listesine bakmış olsaydınız, kendinize "bir blok alıntı nedir?" Sorusunu sormuş olabilirsiniz. Blockquote öğesi, uzun alıntıları tanımlamak için kullanılan bir HTML etiket çiftidir. Bu öğenin W3C HTML5 belirtimine göre tanımı şöyledir:
Blockquote elemanı, başka bir kaynaktan alıntılanan bir bölümü temsil eder.
Web Sayfalarınızda Blockquote Nasıl Kullanılır
Bir web sayfasında metin yazdığınızda ve bu sayfanın düzenini oluştururken, bazen bir metin bloğunu bir teklif olarak çağırmak istersiniz.
Bu, bir vaka çalışması veya proje başarı öyküsüne eşlik eden bir müşteri referansı gibi başka bir yerden bir alıntı olabilir. Bu ayrıca, makaleden veya içeriğin kendisinden bazı önemli metinleri tekrarlayan bir tasarım işlemi olabilir. Yayınlamada, bu bazen bir çek-alıntı olarak adlandırılır, Web tasarımında, bunu başarmanın yollarından biri (ve bu makalede ele alma biçimimiz) bir blok alıntı olarak adlandırılır.
Öyleyse, Blockquote etiketini, Lewis Carroll'un “The Jabberwocky” filminden alıntılar gibi uzun alıntıları tanımlamak için nasıl kullanacağınıza bakalım:
'Twas brillig ve slithey toves
Wy gyre ve gimble yaptı:
Tüm taklitler borogoydu.
Ve mome sıçanlar dışarı çıktı.
(Lewis Carroll tarafından)
Blockquote Etiketini Kullanma Örneği
Blockquote etiketi, tarayıcıya veya kullanıcı aracısına, içeriğin uzun bir teklif olduğunu belirten anlamsal bir etikettir. Bu nedenle, blockquote etiketinin içinde tırnak olmayan bir metin eklememelisiniz.Ayın, bir "tırnak" genellikle birinin söylediği veya bir dış kaynaktan gelen bir metin olduğu (bu makaledeki Lewis Carroll metni gibi), ancak Ayrıca daha önce ele aldığımız pullquote kavramı da olabilir.
Bunu düşündüğünüzde, bu çekiliş metnin bir alıntıdır, sadece alıntıların kendisinde yer aldığı aynı makaleden gelir.
Çoğu web tarayıcısı, çevreleyen metinden göze çarpar hale getirmek için bir bloğun her iki tarafına biraz girinti (yaklaşık 5 boşluk) ekler. Son derece eski bazı tarayıcılar, alıntı yapılan metni italik olarak da oluşturabilir.
Unutmayın ki bu basitçe blockquote öğesinin varsayılan stilidir. CSS ile, blockquote'unuzun nasıl görüntüleneceği konusunda tam kontrol sahibi olursunuz. Alıntıyı daha fazla aramak için girintiyi artırabilir, hatta kaldırabilir, arka plan renkleri ekleyebilir veya metin boyutunu artırabilirsiniz. Bu alıntıyı sayfanın bir tarafına aktarabilir ve diğer yazıların etrafına sarılabilir, bu da basılı dergilerde çekmeceler için kullanılan yaygın bir görsel stildir. Blok taslağının CSS ile görünüşünü kontrol edersiniz, biraz daha kısa bir süre tartışacağımız bir şey. Şimdilik, teklifin kendisini HTML biçimlendirmenize nasıl ekleyeceğinizi inceleyerek devam edelim.
Metninize blockquote etiketi eklemek için, aşağıdaki etiket çifti ile bir teklif olan metni çevreleyin -
Örneğin:
'Twas brillig ve slithey toves
Wy gyre ve gimble yaptı:
Tüm taklitler borogoydu.
Ve mome sıçanlar dışarı çıktı.
Gördüğünüz gibi, alıntı bloğu etiketinin çiftini teklifin içeriğinin etrafına ekleyin. Bu örnekte, bazı ara etiketler de kullandık (
) metnin içinde uygun olan yerlerde tek satır araları eklemek. Bunun nedeni, belirli bir aralığın önemli olduğu bir şiirden metinleri yeniden oluşturmamızdır. Bir müşteri referans teklifi oluşturuyorsanız ve satırların belirli bölümlerde kırılması gerekmiyorsa, bu ara etiketlerini eklemek istemezsiniz ve tarayıcının kendisini gerektiğinde ekran boyutuna göre sarmasına ve kırmasına izin vermezsiniz.
Metni Girmek için Blockquote Kullanmayın
Uzun yıllar boyunca, insanlar bu metnin bir çekimi olmasa bile, web sayfalarında metin girmek istediklerinde blockquote etiketini kullandılar. Bu kötü bir uygulama! Sadece görsel nedenlerden dolayı blokquote semantiğini kullanmak istemezsiniz. Metninizi girmeniz gerekiyorsa, blockquote etiketlerini değil stil sayfalarını kullanmalısınız (tabii ki, girmeye çalıştığınız şey bir alıntıdır!). Bir girintiyi eklemeyi deniyorsanız, bu kodu web sayfanıza eklemeyi deneyin:
Bu girintili metin olacaktır.
Ardından, bu sınıfı bir CSS stili ile hedeflersiniz
.indented {
dolgu malzemesi: 0 10px;
}
Bu, paragrafın her iki tarafına 10 piksel dolgu ekler.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 5/8/17 tarihinde düzenlenmiştir.