Kategoriler: Genel

CSS – Alıntı: Blockquote ve q etiketleri

W3C bir çok durum için çeşitli etiketler üretmiştir ve bu etiketlerin kullanılmasını önerir. Alıntıda böyle bir etikete sahiptir(<blockquote> ve <q>). Ancak kod yazarlarını bu etiketleri kullanmaktan alı koyan bu etiketlerin başlangıçtaki görünümünün çok güzel olmamasıdır, tabi farklı etiketlerle uğraşmak istemeyenlerde vardır. İşte bizde burada hem w3c’nin dediğini yapıp hemde güzel görünümlü ve kullanışlı alıntılar yapacağımızı anlatacağız.

Alıntı etiketlerini(<blockquote> ve <q>) diğer sitelerden, yazarlardan ve yayınlardan alıntı yapmak için kullanırız.

W3C <blockquote> elementini kullanımını önermektedir. Bu kodlama bizlere ayrıcalık tanıyacaktır ve tekil bir etiketin kullanım avantajlarını bize sunacaktır.

Herhangi bir stil tanımlaması yapmasak bile <blockquote> normal içeriğe göre daha içerden başlayacaktır. Bu küçük bir ayrıntıdır, ancak içerikten ayırmak için yeterlidir.

Sizler burada alıntıların kullanımı göstermeden önce <cite> etiketinden bahsedeceğiz.

Bu zamanı geçmiş bir etiket değildir. Bu kod alıntıları aldığımız siteleri belirtmek için kullanacağımız bir özelliktir. Bu kodu eklediğinizde birçok tarayıcı bunun farkına varmayacaktır bile. Ancak gerek CSS ve gerekse betikler ile bu kodu kullanabiliriz mesela indeksleme yaparken kullanabilriz. Bu bilgi bize alıntı hakkında ileride bilgi vermek için kullanılabilir.

Kodlama içinde Alıntı kullanmak

Sizlere kısaca kod içerisinde alıntı kullanımını anlatacağız. Eğer cümle için bir alıntı yaptı iseniz, <q> etiketini kullanabilirsiniz.

  1. Bunu Mevlana’nın bir sözü ile destekleyelim <q>Nice insanlar gördüm, üzerinde elbisesi yok. Nice elbiseler gördüm, içinde insan yok.</q> ve <q>Ehil olmayanlara sabretmek ehil olanları parlatır.</q> sözleri bize yol gösterir.

Yeni nesil tarayıcılar bu kodu aşağıdaki gibi gösterecektir.

Bu kodu IE normal içerik gibi yorumlayacaktır. IE için farklı stil tanımı yapmamız gerekiyor.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>Alıntı Örneği</title>
  6. <style>
  7. /* IE icin */
  8. q {
  9. font-style:italic;
  10. }
  11. /* Safari ve Firefox icin */
  12. html:not([dummy]) q {
  13. font-style:normal;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <p>Bunu Mevlana’nın bir sözü ile destekleyelim <q>Nice insanlar gördüm, üzerinde elbisesi yok. Nice elbiseler gördüm, içinde insan yok.</q> ve
  19. <q>Ehil olmayanlara sabretmek ehil olanları parlatır.</q> sözleri bize yol gösterir. </p>
  20. </body>
  21. </html

Böylelikle Internet Explorer da kodumuz farklı görünecektir.

Bu etiketin birde dil özelliği vardır.

  1. I said, <q lang=”en-us”>Herman, do you like bubblegum? </q> And he said, <q lang=”en-us”>Yes, the kind that comes with a comic.</q>

Tüm dil kodlarını öğrenmek için www.w3.org/TR/html4/struct/dirlang.html#langcodes adresini ziyaret ediniz.

Alıntı ve <blockquote> etiketi

Örnek bir kod yazalım:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>Alıntı Örneği</title>
  6. </head>
  7. <body>
  8. <blockquote>Sevgide güneş gibi ol, dostluk ve kardeşlikte akarsu gibi ol, hataları örtmede gece gibi ol, tevazuda toprak gibi ol, öfkede ölü gibi
  9. ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</blockquote>
  10. <cite>Mevla’na Celaleddin-i Rumi</cite>
  11. </body>
  12. </html>

Görüntü istediğimiz gibi olmaya bilir. Biraz görüntüyü düzeltelim. Burada üç adet zemin resim ile görüntüyü düzeltebiliriz.


Alıntı Üst Zemin Resmi


Alıntı Orta Zemin Resmi


Alıntı Alt Zemin Resmi

Şimdi CSS kodumuzu yazalım

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>Alıntı Örneği</title>
  6. <style>
  7. blockquote {
  8. width: 240px;
  9. margin:0;
  10. padding:29px 0 0 0;
  11. background:url(images/alinti_ust.gif) no-repeat left top;
  12. }
  13. blockquote p {
  14. margin:0;
  15. padding:10px;
  16. color: #fff;
  17. text-align:center;
  18. font:bold 14px/1.7em Georgia, “Times New Roman”, Times, serif;
  19. background: url(images/alinti_orta.gif) left bottom repeat-y;
  20. }
  21. cite
  22. {
  23. font-size: 1.2em;
  24. padding-bottom:29px;
  25. display:block;
  26. text-align:center;
  27. color:#C6D9F1;
  28. text-decoration:underline;
  29. width:240px;
  30. background: url(images/alinti_alt.gif) no-repeat left bottom;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <blockquote><p>Sevgide güneş gibi ol, dostluk ve kardeşlikte akarsu gibi ol, hataları örtmede gece gibi ol, tevazuda toprak gibi ol, öfkede ölü gibi ol, her ne olursan ol, ya olduğun gibi görün, ya göründüğün gibi ol.</p></blockquote>
  36. <cite>Mevla’na Celaleddin-i Rumi</cite>
  37. </body>
  38. </html>

Yukarıda verdiğimiz zemin resimlerini yerleştirdik ve fon ve renk değerleri verdik.

Sonuçta hem güzel bir görüntü elde ettik hemde css desteklemeyen tarayıcı ve araçlarda da farklı bir görünüm sağlamış olduk.

Bul-Tikla

Yorum Yap
Share
Yazar
Bul-Tikla
15 yıl ago

Son Yazılar

Türkiye’de Posta Reformlarının Gelişimi ve Dönemsel Analizi

Türkiye’de posta hizmetlerinin kamu vesilesiyle vatandaşlara sunulma yolculuğu, 1840 senesinde “Posta Nezareti”nin kurulmasıyla başladı. O…

3 gün ago

Bütünleşik Afet Yönetimi Bağlamında Büyükşehir Belediyelerinin 2025-2029 Stratejik Planlarının AnaliziAkademik Kaynak

Afetlerin küresel ve mahalli ölçekte artan yıkıcı tesirleri, kentlerin bu tür krizlere karşı daha dirençli…

3 gün ago

2025-2026 10. Sınıf Türk Dili ve Edebiyatı 2.Dönem 2.Ortak Yazılı Sınavı

10-TDE-2.Dönem 2.Ortak Yazılı Ulusal Eğitim Bakanlığı (MEB) tarafınca 2024-2025 eğitim-öğretim senesinde yürürlüğe konulmuş olan Türkiye…

4 gün ago

2025-2026 11. Sınıf Türk Dili ve Edebiyatı 2.Dönem 2.Ortak Yazılı Sınavı

2025-2026 11-TDE-2.Dönem 2.Yazılı Imtihanı SORULAR SORU – KAZANIM EŞLEŞTİRMESİ – SENARYO 1 Sual Birim Mevzu…

5 gün ago

2025-2026 12. Sınıf Türk Dili ve Edebiyatı 2.Dönem 2.Yazılı Sınavı

2025-2026 11-TDE-2.Dönem 2.Yazılı Imtihanı SORULAR Izahat:Sorular açık uçlu ve kısa cevaplıdır. Cevaplarınızı yazım ve noktalama…

5 gün ago

Liseler Arası Öğrenci Nakil Kılavuzu

Liseler Arası Talebe Nakil Kılavuzu Bu kılavuz, Millî Eğitim Bakanlığı Ortaöğretim Kurumları Yönetmeliği ile Millî…

1 hafta ago