Merhaba.

Html Eğitimlerimize body etiketi içinde kullanabileceğimiz etiketlerle devam ediyoruz.

WebMatrix’i açalım. Kaldığımız yerden devam edelim. 

Paragraf Etiketi  <p></p>

HTML üzerinde yeni bir paragraf oluşturmak istersek bunu p etiketi ile gerçekleştiririz.

Bir önceki eğitim yazılarımızda gördüğümüz başlık etiketiyle konuyu harmanlayalım. 

Bir konu başlığı bulalım ve 3 tane paragraf yapacak şekilde metin girişi yapalım. Başlığımız H1 büyüklüğünde olsun.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>


        <h1 style="text-align: center; color: purple" >HTML Eğitimleri</h1>
      
        <p>HTML –> Hyper Text Markup Language >> Yüksek Metin Biçimlendirme Dili</p>

        <p>Aslında isminden de anlaşılacağı üzere HTML internet sayfaları üzerindeki metinler üzerinde yüksek biçimlendirme hakimiyeti kurmamızı sağlayan bir işaret dilidir.</p>

        <p>Ayrıca internet sayfası üzerindeki görsellerin, ses ve video gibi nesnelerin konumlandırma işlemini yapmamıza yardımcı olur.</p>

    </body>
</html>

<b></b> Bold Etiketi

Şimdi biraz bu paragraf içinde metin biçimledirme yapalım.

Mesela başlangıçtaki HTML yazısının kalın olmasını istiyorum. Bunun için yapmam gereken daha koyu görünmesini istediğim metni <b> </b> etiketleri arasına yazmaktır.

Bütün konunun anlatımı sonunda tüm kodları aşağıdan bakabilirsiniz. Her defasında kod kalabalığını buraya taşımayalım.

 <p> <b>HTML –></b>

Çıktımız.

<em></em> Eğik Yazı Etiketi

Hemen ardından gelen isimi ise eğik yazalım. Bunun içinde metnin o kısmını em etiketleri içine almak yeterli gelecektir.

<em>Hyper Text Markup Language</em>

<u></u> Alt Çizgi Etiketi

Yüksek Metin Biçimlendirme Dili ifadesinin altı çizgili olsun istiyorsak bu metni u tagleri arasına yazmamız yeterli olacaktır.

<u>Yüksek Metin Biçimlendirme Dili</u>

Bu etiketlerin style özellikleri ile metinlere daha kapsamlı müdahale edebiliriz.

Örneğin 2. paragrafın tümü bold rengi kırmızı ve aynı zamanda bir çerçeve içinde olsun istiyoruz.

  <p><b style="color: red; border: 2px solid blue">Aslında isminden de anlaşılacağı üzere HTML 
  
   internet sayfaları üzerindeki metinler üzerinde yüksek biçimlendirme hakimiyeti kurmamızı sağlayan bir işaret dilidir.</b></p>

Burada Border Style ile ilgili bilgi vermekte fayda var. Border kenarlık demektir. Kullanıldığı alanda o alana kenarlıklar ekler. İlk başta girilen 2px değeri kalınlığını gösterir. Solid ifadesi kenarlık çizgisinin şeklini gösterir. Solid düz çizgi demektir. Diğer border şekillerini deneyebilirsiniz. En sonra girilen blue ifadesi çizginin rengini ifade eder.

<strike></strike> Üstü Çizili

3. Paragrafın tamamının üstünü çizelim.

<p><strike>Ayrıca internet sayfası üzerindeki görsellerin, ses ve video gibi nesnelerin konumlandırma işlemini yapmamıza yardımcı olur.</strike></p>

Diğer Önemli Etiketler

<sub>Alt simge</sub>

<sup>Üst simge</sup>

<big>Büyük metin</big>

<small>Küçük metin</small>

<address>Yazarın iletişim bilgileri/adresi</address>

<blockquote>Alıntı (çoğunlukla tarayıcılar metni her iki taraftan girintilendirirler.)</blockquote>

<cite>Satıriçi alıntı</cite>

<dfn>Özel terim</dfn>

<code>Bilgisayar kodu</code>

<samp>Örnek çıktı</code>

<kbd>Klavye girişini gösteren metin</kbd>

<var>Bir program kodundaki değişkenler</var>

<del>Silinen metin (çoğunlukla tarayıcılar üzerine çizgi çeker)</del>

<ins>Yeni eklenen metin (çoğunlukla tarayıcılar altını çizerler)</ins>

<q>Satıriçi alıntı<q>

 

Tüm İşlemlerimizin Kodlaması

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Project Zeta</title>

    </head>

    <body>


        <h1 style="text-align: center; color: purple" >HTML Eğitimleri</h1>
      
        <p> <b>HTML –></b> <em>Hyper Text Markup Language</em> >> <u>Yüksek Metin Biçimlendirme Dili</u></p>

        <p><b style="color: red; border: 2px solid blue">Aslında isminden de anlaşılacağı üzere HTML internet sayfaları üzerindeki metinler üzerinde yüksek biçimlendirme hakimiyeti kurmamızı sağlayan bir işaret dilidir.</b></p>

        <p><strike>Ayrıca internet sayfası üzerindeki görsellerin, ses ve video gibi nesnelerin konumlandırma işlemini yapmamıza yardımcı olur.</strike></p>

      
    </body>
</html>

 


muratbilginer