17 Temmuz 2006 Pazartesi

HTML ile Metinlere Şekil Vermek

Merhaba Webkolog takipçileri!

Bugün sizlere web sayfalarımızın olmazsa olmazı, içeriklerimizi anlamlı bir şekilde sunmamızı sağlayan HTML metin etiketlerini anlatacağım. HTML 4.01 ile web sayfalarına karakter katmanın inceliklerini öğrenmeye devam ediyoruz. Hadi bakalım, yazılarımıza nasıl şekil vereceğimizi keşfedelim!

---

Metinlere Şekil Vermek: Başlıklar ve Paragraflar

Bir gazetedeki manşetler gibi, web sayfalarımızdaki başlıklar da içeriğimizi özetler ve okuyucunun dikkatini çeker. HTML'de başlıklar için altı farklı seviye bulunuyor: <h1>'den <h6>'ya kadar. <h1> en önemli başlıkken, <h6> en az önemli olanıdır. Genellikle sayfa içinde sadece bir tane <h1> kullanırız, diğer başlıkları içeriğin önemine göre ayarlarız.

<h2>Bu Bir Ana Başlıktır</h2>
<h3>Bu Bir Alt Başlıktır</h3>
<h6>Bu da En Küçük Başlığımız</h6>

Peki ya uzun metinler? İşte burada imdadımıza paragraf etiketi <p> yetişiyor. Yazdığımız tüm düz metinleri bu etiketlerin arasına koyarak, tarayıcının metnimizi düzgün bir blok halinde göstermesini sağlarız. Her yeni <p> etiketi yeni bir paragraf oluşturur ve aralarında otomatik olarak boşluk bırakır.

<p>Bu, Webkolog'da yayımladığım ilk paragrafımdır. Web sayfaları tasarlamak gerçekten çok keyifli.</p>
<p>İkinci paragrafımız da burada başlıyor. Okumaya devam edin!</p>
---

Metin İçinde Vurgu ve Anlam Katmak

Bazen metin içinde belirli kelimeleri veya cümleleri öne çıkarmak isteriz. HTML 4.01 bize bunun için birkaç güçlü etiket sunuyor:

  • Kalın Metinler: Bir kelimeyi veya ifadeyi kalın yapmak için <strong> veya <b> etiketlerini kullanabiliriz. Tarayıcıda ikisi de metni kalın gösterir, ancak <strong> etiketi anlamsal olarak daha önemlidir, "vurgu" belirtir.
  • <p>Bu bir <strong>önemli</strong> bilgi içerir.</p>
    <p>Bu metin ise sadece <b>kalın</b> görünecektir.</p>
  • Eğik Metinler: Metni eğik yazmak için <em> veya <i> etiketlerini kullanırız. Yine, <em> anlamsal olarak "vurgulanmış" bir kelimeyi ifade ederken, <i> sadece stilsel olarak eğik yapar.
  • <p>Bu bir <em>ilginç</em> düşünce.</p>
    <p>Kitap adı <i>Web Tasarımına Giriş</i>.</p>
  • Altı Çizili ve Üstü Çizili Metinler: Metnin altını çizmek için <ins> (sonradan eklenmiş içerik) veya <u> (genel altı çizili) etiketlerini kullanırız. Üstünü çizmek için ise <del> (silinmiş içerik) veya <s> (anlamsız üstü çizili) etiketleri mevcuttur.
  • <p>Yeni fiyat <del>100 TL</del> <ins>75 TL</ins>.</p>
    <p><u>Buraya dikkat!</u></p>
  • Küçük Metin: Metnin boyutunu bir miktar küçültmek isterseniz <small> etiketini kullanabilirsiniz. Genellikle telif hakkı veya küçük notlar için idealdir.
  • <p><small>Tüm hakları saklıdır. 2006 Webkolog.</small></p>
  • Üst ve Alt Simge: Bilimsel veya matematiksel ifadelerde sıkça kullanılan üst simge (örneğin $\text{x}^2$) için <sup>, alt simge (örneğin $\text{H}_2\text{O}$) için ise <sub> etiketlerini kullanırız.
  • <p>Su formülü: H<sub>2</sub>O</p>
    <p>Matematiksel ifade: x<sup>2</sup></p>
---

Özel Metin Biçimlendirmeleri

Bazı durumlarda metnin özel bir formatta görünmesini isteriz. İşte o zaman kullanabileceğimiz diğer etiketler:

  • Önceden Biçimlendirilmiş Metin: <pre> etiketi, içine yazdığınız metni, tıpkı kod düzenleyicinizde olduğu gibi, tüm boşlukları ve satır sonlarını koruyarak gösterir. Kod blokları veya düz metin dosyalarını göstermek için harikadır.
  • <pre>
    Bu bir
       önceden biçimlendirilmiş
          metindir.
    </pre>
  • Kısa Alıntılar: Metin içinde kısa bir alıntı yapmak için <q> etiketini kullanırız. Tarayıcılar genellikle bu alıntıları tırnak içine alarak gösterir.
  • <p>Annem her zaman <q>Erken kalkan yol alır</q> derdi.</p>
  • Kısaltmalar: Bir kısaltmanın (örneğin, TRT) tam adını belirtmek için <abbr> etiketini ve title özelliğini kullanırız. Fare kısaltmanın üzerine geldiğinde tam adı görüntülenir.
  • <p><abbr title="Türk Radyo Televizyon">TRT</abbr> Türkiye'nin ulusal yayın kuruluşudur.</p>
  • Metin Yönü: <bdo> (Bi-directional Override) etiketi, metnin yazım yönünü değiştirmek için kullanılır. Özellikle sağdan sola yazılan dillerde (Arapça, İbranice gibi) faydalıdır.
  • <bdo dir="rtl">Bu metin sağdan sola yazılacaktır.</bdo>
  • Inline Kapsayıcı: <span> etiketi, genellikle CSS ile belirli bir metin parçasına stil uygulamak için kullanılan, anlamsal bir karşılığı olmayan genel bir etikettir.
  • <p>Bu cümlede <span style="color: blue;">mavi</span> bir kelime var.</p>
  • Adres Bilgisi: <address> etiketi, bir belgenin yazarının/sahibinin iletişim bilgilerini belirtmek için kullanılır. Tarayıcılar genellikle metni eğik gösterir ve sonrasında bir satır boşluk bırakır.
  • <address>
      Webkolog Blog Ekibi<br />
      [email protected]<br />
      Türkiye
    </address>
  • Blok Alıntılar: Daha uzun alıntılar için <blockquote> etiketini kullanırız. Bu, içeriği her iki yandan da girintili gösterir ve cite özelliği ile kaynağını belirtebiliriz.
  • <blockquote cite="http://www.webkolog.net/makale1">
      <p>Web tasarımı, geleceğin mesleğidir ve HTML bu işin temelidir. İyi bir başlangıç, başarılı bir kariyerin anahtarıdır.</p>
    </blockquote>
  • Kaynak ve Tanım: <cite> etiketi, bir çalışmanın başlığını (kitap, şarkı, film vb.) belirtmek için kullanılır. <dfn> etiketi ise bir terimin ilk tanımını belirtir.
  • <p><cite>Webkolog Rehberi</cite> adlı kitabımı okumanızı tavsiye ederim.</p>
    <p><dfn>HTML</dfn>, web sayfaları oluşturmak için kullanılan bir işaretleme dilidir.</p>
  • Tek Aralıklı Metinler (Programlama ve Kod): Programlama ile ilgili içerikleri göstermek için birkaç özel etiketimiz var:
    • <code>: Programlama kodu parçacıklarını belirtir. Tarayıcılar genellikle metni tek aralıklı (monospace) bir fontla gösterir.
    • <samp>: Bir bilgisayar programından örnek çıktıyı belirtir.
    • <kbd>: Kullanıcının klavye girişini (tuş kombinasyonu gibi) belirtir.
    • <var>: Bir değişkeni belirtir.
    • <tt>: Bu etiket HTML5'te desteklenmiyor olsa da, eski sistemlerde tek aralıklı metin için kullanılır.
    <p>Lütfen <code>print("Merhaba Dünya!")</code> kodunu deneyin.</p>
    <p>Çıktı şöyle görünecektir: <samp>Merhaba Dünya!</samp></p>
    <p>Kaydetmek için <kbd>Ctrl + S</kbd> tuşlarına basın.</p>
    <p><var>x</var> bir değişkendir.</p>
---

Listelerle Düzen Sağlamak

Bilgiyi liste halinde sunmak, okunabilirliği artırır. HTML 4.01 bize üç temel liste türü sunar:

  • Sırasız Listeler (Unordered Lists): <ul> etiketi ile oluşturulur ve her liste öğesi (<li>) başında bir madde işaretiyle gösterilir. Maddelerin sırası önemli değilse tercih edilir.
  • <ul>
      <li>Kahve</li>
      <li>Çay</li>
      <li>Süt</li>
    </ul>
  • Sıralı Listeler (Ordered Lists): <ol> etiketi ile oluşturulur ve her liste öğesi (<li>) başında bir numara veya harf ile gösterilir. Maddelerin sırası önemliyse kullanılır.
  • <ol>
      <li>Birinci Adım</li>
      <li>İkinci Adım</li>
      <li>Üçüncü Adım</li>
    </ol>
  • Tanım Listeleri (Description Lists): <dl> etiketi ile oluşturulur ve terim-tanım çiftlerini listelemek için kullanılır. Her terim <dt> ile, her tanım ise <dd> ile belirtilir.
  • <dl>
      <dt>HTML</dt>
      <dd>Web sayfaları oluşturmak için kullanılan bir işaretleme dilidir.</dd>
      <dt>CSS</dt>
      <dd>HTML elemanlarına stil vermek için kullanılan bir stil sayfası dilidir.</dd>
    </dl>

Gördüğünüz gibi, HTML 4.01 bize metinlerimizi düzenlemek ve onlara anlam katmak için pek çok güçlü araç sunuyor. Bu etiketleri doğru kullanarak, okunabilir, erişilebilir ve bilgilendirici web sayfaları oluşturabiliriz. Her yeni etiketle web geliştirme dünyasında bir adım daha ileri gidiyorsunuz!

Bu etiketleri kendi HTML dosyalarınızda deneyerek pratik yapmayı unutmayın. En iyi öğrenme şekli bizzat denemektir!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

0 yorum:

Yorum Gönder