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><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><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><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><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><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><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><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><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><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><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><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><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><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><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