12 Ağustos 2006 Cumartesi

HTML ile Özel Karakterler

Merhaba sevgili Webkolog okurları,

Bugün sizlere web sayfalarımızda sıklıkla karşılaştığımız ancak bazen nasıl yazacağımızı bilemediğimiz o küçük ama önemli sembollerden bahsedeceğim: özel karakterler. Web tarayıcıları hâlâ bazen belirli sembolleri doğrudan algılamakta zorlanabiliyor veya bu semboller HTML kodumuzun yapısını bozabiliyor. İşte bu noktada HTML 4.01'in bize sunduğu "varlık adları" veya "varlık numaraları" (entity names/numbers) devreye giriyor. Gelin, bu gizli dilin inceliklerini birlikte çözelim!

HTML belgeleri, genellikle belirli karakterleri (örneğin <, > veya &) özel bir anlamda kullanır. Bu yüzden, bu karakterleri metin içinde olduğu gibi kullanmaya çalıştığımızda tarayıcı bunları kod olarak algılayabilir ve istediğimiz çıktıyı alamayabiliriz. Özel karakterler, bu tür durumlarda veya klavyede doğrudan bulunmayan sembolleri eklemek için kullanılır.

Neden Özel Karakterlere İhtiyaç Duyarız?

İki temel nedeni var:

  1. HTML Söz Dizimini Korumak: Örneğin, bir açılı parantez (<) bir HTML etiketinin başlangıcını ifade eder. Eğer metninizin içinde "5 < 10" yazmak isterseniz, tarayıcı <10> kısmını bir etiket sanıp hata verebilir.
  2. Klavye Dışı Sembolleri Eklemek: Copyright sembolü (©), tescilli marka işareti (®) gibi semboller klavyede doğrudan bulunmaz. Özel karakterler sayesinde bu sembolleri kolayca ekleyebiliriz.

Özel karakterler genellikle iki şekilde temsil edilir:

  • Varlık Adı (Entity Name): Anlaşılması kolay, okunabilir isimler (örneğin &lt;).
  • Varlık Numarası (Entity Number): Sayısal kodlar. İki türü vardır:
    • Desimal (Onluk): &#60;
    • Heksadesimal (Onaltılık): &#x3C;

Her iki yöntem de aynı sonucu verir, ancak varlık adları genellikle daha akılda kalıcıdır.

Sık Kullanılan Özel Karakterler

İşte web sayfalarınızda en sık karşılaşacağınız ve kullanacağınız bazı önemli özel karakterler:

  • Ampersand (&): HTML özel karakterlerinin başlangıcını belirtir. Kendisini kullanmak için &amp; veya &#38; kullanırız.
  • <p>Bu metinde &amp; işareti var.</p>

    Çıktı: Bu metinde & işareti var.

  • Küçüktür İşareti (<): HTML etiketlerinin açılış parantezi. Kendisini kullanmak için &lt; veya &#60; kullanırız.
  • <p>5 &lt; 10 ifadesi.</p>

    Çıktı: 5 < 10 ifadesi.

  • Büyüktür İşareti (>): HTML etiketlerinin kapanış parantezi. Kendisini kullanmak için &gt; veya &#62; kullanırız.
  • <p>10 &gt; 5 ifadesi.</p>

    Çıktı: 10 > 5 ifadesi.

  • Boşluk Karakteri ( ): Normalde HTML birden fazla boşluğu tek bir boşluk olarak algılar. Ekstra boşluk eklemek için bu karakteri kullanırız. &nbsp; (non-breaking space) aynı zamanda satır sonu yapmaz, yani kelimeler birbirinden ayrılmaz.
  • <p>Kelime &nbsp;&nbsp;&nbsp; Arası</p>

    Çıktı: Kelime     Arası

  • Telif Hakkı İşareti (©): Copyright sembolü. &copy; veya &#169; kullanırız.
  • <p>&copy; 2006 Webkolog. Tüm hakları saklıdır.</p>

    Çıktı: © 2006 Webkolog. Tüm hakları saklıdır.

  • Tescilli Marka İşareti (®): Registered trademark sembolü. &reg; veya &#174; kullanırız.
  • <p>Webkolog&reg;</p>

    Çıktı: Webkolog®

  • Ticari Marka İşareti (): Trademark sembolü. &trade; veya &#8482; kullanırız.
  • <p>Yazılımım&trade;</p>

    Çıktı: Yazılımım™

  • Derece İşareti (°): Sıcaklık veya açı derecesi için kullanılır. &deg; veya &#176; kullanırız.
  • <p>Sıcaklık: 25&deg;C</p>

    Çıktı: Sıcaklık: 25°C

  • At İşareti (@): Özellikle e-posta adreslerinde kullanılır. &#64; (desimal) veya &#x40; (heksadesimal) kullanırız. Direkt olarak yazıldığında sorun olmasa da, bazen güvenlik veya kodlama uyumluluğu için bu şekilde kullanılması tercih edilebilir.
  • <p>E-posta: info&#64;webkolog.net</p>

    Çıktı: E-posta: [email protected]

HTML 4.01'de özel karakterler, web sayfalarınızın sadece içeriğini değil, aynı zamanda uluslararasılaşma ve okunabilirlik standartlarını da iyileştiren önemli araçlardır. Bu küçük sembollerin doğru kullanımı, sayfalarınızın her tarayıcıda ve her dilde doğru görünmesini sağlar. Unutmayın, detaylar her zaman fark yaratır!

Webkolog'u takipte kalın!

Hepinize hatasız ve başarılı kodlama deneyimleri dilerim!

0 yorum:

Yorum Gönder