HTML Metin Biçimlendirme Etiketler

HTML metin biçimlendirme etiketleri, web sayfalarını metinleri düzenlemek ve biçimlendirmek için kullanılan önemli araçlardır. İşte bu etiketlerin bazıları hakkında detaylı analizler ve örnekleri:

1. <b> ve <strong> Etiketleri:

   • <b> etiketi: Metni kalın hale getirir, ancak vurgu veya önem belirtmez.
   • <strong> etiketi: Metni hem kalın hale getirir hem de vurgu veya önemini belirtir.

   Örnek:

   <p><b>Bu metin kalın bir biçimde yazılmıştır.</b></p>
   <p><strong>Bu metin önemli ve kalın bir biçimde yazılmıştır.</strong></p>

2. <i> ve <em> Etiketleri:

   • <i> etiketi: Metni eğik (italik) hale getirir, ancak vurgu veya önem belirtmez.
   • <em> etiketi: Metni hem eğik (italik) hale getirir hem de vurgu veya önemi belirtir.

   Örnek:

   <p><i>Bu metin eğik bir biçimde yazılmıştır.</i></p>
   <p><em>Bu metin önemli ve eğik bir biçimde yazılmıştır.</em></p>

3. <u> Etiketi:

   • <u> etiketi: Metni altı çizili hale getirir.

   Örnek:

   <p><u>Bu metin altı çizili bir biçimde yazılmıştır.</u></p>

4. <del> Etiketi:

   • <del> etiketi: Metni üzeri çizili (üzeri çizili) hale getirir ve genellikle silinmiş veya geçerliliğini yitirmiş metinleri temsil etmek için kullanılır.

   Örnek:

   <p><del>Bu metin artık geçerli değildir.</del></p>

5. <sup> ve <sub> Etiketleri:

   • <sup> etiketi: Metni üst simge (üstte) olarak görüntüler. Özellikle matematiksel ifadelerde ve kimya formüllerinde kullanılır.
   • <sub> etiketi: Metni alt simge (altta) olarak görüntüler. Kimya formüllerinde, matematiksel ifadelerde ve kimya formüllerinde kullanılır.

   Örnek:

   <p>H<sub>2</sub>O suyun kimyasal formülüdür.</p>
   <p>E=mc<sup>2</sup> formülü, Albert Einstein'ın ünlü denklemidir.</p>

6. <big> ve <small> Etiketleri:

   • <big> etiketi: Metni büyük bir fontla gösterir.
   • <small> etiketi: Metni küçük bir fontla gösterir.

   Örnek:

   <p><big>Bu metin büyük bir fontla yazılmıştır.</big></p>
   <p><small>Bu metin küçük bir fontla yazılmıştır.</small></p>

7. Başlık Etiketleri (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>):

   • Başlık etiketleri, metin başlıklarını belirtmek için kullanılır. <h1> en yüksek düzeyde başlığı temsil ederken, <h6> en düşük düzeyde başlığı temsil eder.

   Örnek:

   <h1>Bu bir h1 başlığıdır</h1>
   <h2>Bu bir h2 başlığıdır</h2>
   <h3>Bu bir h3 başlığıdır</h3>
   <h4>Bu bir h4 başlığıdır</h4>
   <h5>Bu bir h5 başlığıdır</h5>
   <h6>Bu bir h6 başlığıdır</h6>
   

8. <a> Etiketi:

   • <a> etiketi, metni bir bağlantıya dönüştürmek için kullanılır. href özelliği ile hedef sayfanın URL'sini belirtir.

   Örnek:

   <p><a href="https://www.openai.com">OpenAI</a> resmi web sitesini ziyaret edin.</p>

9. <p> Etiketi:

   • <p> etiketi, metni bir paragraf olarak biçimlendirir.

   Örnek:

   <p>Bu bir paragraf içindeki metindir. Metin paragraflara ayrılmıştır.</p>

10. <font> etiketi, metinlerin fontunu ve rengini belirlemek için kullanılabilen bir etikettir. Ancak HTML5'de kullanımı önerilmez ve yerine CSS kullanılması tavsiye edilir. İşte <font> etiketi ve bazı yaygın kullanılan nitelikler:
    
    a. face Niteliği: Metnin kullanılacak olan fontunu belirler. Örnek:
    

    <p><font face="Arial">Bu metin Arial fontunda yazılmıştır.</font></p>

    
    b. color Niteliği: Metnin rengini belirler. Rengi, isim veya RGB değeri ile tanımlayabilirsiniz.
    Örnek:

    <p><font color="red">Bu metin kırmızı renkte yazılmıştır.</font></p>
    <p><font color="#00FF00">Bu metin yeşil (#00FF00) renkte yazılmıştır.</font></p>

    
    c. size Niteliği: Metnin boyutunu belirler. Sayısal bir değer veya +1, -1 gibi göreceli değerler kullanılabilir.
    Örnek:

    <p><font size="4">Bu metin büyük boyutta yazılmıştır.</font></p>
    <p><font size="+2">Bu metin iki boyut büyütülmüş.</font></p>

    
    Ancak, <font> etiketini kullanmak yerine CSS (Cascading Style Sheets) kullanmanız daha iyi bir uygulamadır. Örneğin, aynı metin biçimlendirmelerini CSS ile yapmak şu şekilde olabilir:
    
    

    <p style="font-family: Arial; color: red; font-size: 16px;">Bu metin CSS ile biçimlendirilmiştir.</p>

    CSS, daha fazla esneklik ve kontrol sağlar ve HTML kodunuzu daha temiz ve bakımı daha kolay hale getirir.

Tamamını tek bir örnekte göstermek gerekirse HTML metin biçimlendirme etiketlerinin tamamının kullanımı aşağıdaki örnekte yer almaktadır.

<!DOCTYPE html>
<html>
<head>
    <title>Metin Biçimlendirme Örnekleri</title>
</head>
<body>
    <h1>HTML Metin Biçimlendirme Örnekleri</h1>

    <p><strong>Bu metin kalın bir biçimde yazılmıştır.</strong></p>

    <p><em>Bu metin önemli ve eğik bir biçimde yazılmıştır.</em></p>

    <p><u>Bu metin altı çizili bir biçimde yazılmıştır.</u></p>

    <p><del>Bu metin artık geçerli değildir.</del></p>     <p>H<sub>2</sub>O suyun kimyasal formülüdür.</p>

    <p>E=mc<sup>2</sup> formülü, Albert Einstein'ın ünlü denklemidir.</p>

    <p><big>Bu metin büyük bir fontla yazılmıştır.</big></p>

    <p><small>Bu metin küçük bir fontla yazılmıştır.</small></p>

    <h2><font face="Arial" color="blue">HTML Font Örnekleri</font></h2>

    <p><font face="Arial">Bu metin Arial fontunda yazılmıştır.</font></p>

    <p><font color="red">Bu metin kırmızı renkte yazılmıştır.</font></p>

    <p><font size="4">Bu metin büyük boyutta yazılmıştır.</font></p>
</body>
</html>