Html Biçimlendirme

Html metin düzenleme yani biçimlendirme etiketleri kullanılarak metinler üzerinde biçimlendirme yani düzenleme işlemleri  yapılmaktadır. Html sayfasındaki metinlerin renk, boyutu, kalınlık, eğiklik vb. değişiklikler html metin düzenleme etiketleri ile yapılabilmektedir.

Html metin düzenleme etiketleri metinleri vurgulamak, daha okunur ve daha belirgin göstermek için kullanılmaktadır.

Html dilinde en çok kullanılan 12 adet metin düzenleme etiketleri vardır.

Html metin düzenleme etiketleri şunlardır:

  • <b> (Kalın) Etiketi
  • <strong> (Önemli Yazı) Etiketi
  • <u> (Altı çizili) Etiketi
  • <i> (Eğik) Etiketi
  • <em> (Vurgulanan Metin) Etiketi
  • <br> (Alt satır) Etiketi
  • <font> (Yazı tipi) Etiketi
  • <mark> (İşaretlenmiş Yazı) Etiketi
  • <del> (Üstü çizili silinmiş yazı) Etiketi
  • <ins> (Altı çizili yazı) Etiketi
  • <sub> (Alt simge) Etiketi
  • <sup> (Üst simge) Etiketi

<b> Kalın Yazı Etiketi

Html dilinde belirlenen metni kalın yapmak için <b> etiketi kullanılmaktadır.  Herhangi bir metni kalın yapmak için <b> ile </b> etiketleri arasına yazılarak kullanılır.

b etiketi İngilizce olan Bold kelimesinden gelmektedir.

b Etiketi Kullanımı:

<b> azkod ile kalın yazı etiketini kullanmayı öğreniyorum</b>

Kodu Çalıştır

b Kalın Yazı Etiketi Örneği

Boş zaman yoktur <b> boşa geçen zaman </b> vardır. 

Kodu Çalıştır

 

<strong> Önemli Yazı Etiketi

Html dilinde belirlenen metnin önemli olduğunu vurgulamak için kullanılmaktadır. Belirlenen metni kalın yapar ve <strong> etiketi ile kullanılmaktadır.  Herhangi bir metni önemli olduğunu belirtmek ve kalın yapmak için <strong> ile </strong> etiketleri arasına yazılarak kullanılır.

strong Etiketi Kullanımı:

<strong> azkod ile strong etiketini kullanmayı öğreniyorum </strong>

Kodu Çalıştır

strong Etiketi Örneği:

<p> azkod ile <strong> html dersleri </strong> öğreniyorum </p>

Kodu Çalıştır

<u> Altı Çizili Yazı Etiketi

Html  dilinde belirlenen metnin altını çizmek için <u> etiketi kullanılmaktadır.  Herhangi istediğimiz bir metni altı çizili yapmak için <u> ile </u> etiketleri arasına yazılması gerekmektedir.

U etiketi İngilizce olan Underline kelimesinin baş harfinden gelmektedir.

u Etiketi Kullanımı:

<u> azkod ile altı çizili yazı etiketi kullanmayı öğreniyorum  </u>

Kodu Çalıştır

<i> Eğik Yazı Etiketi

Html dilinde metni yani yazıyı eğik olarak yazdırmak için <i> etiketi kullanılmaktadır.  Herhangi istediğimiz bir metni eğik  yapmak için <i> ile </i> etiketleri arasına yazılması gerekmektedir.

i etiketi İngilizce olan İtalic kelimesinin baş harfinden gelmektedir.

i Etiketi Kullanımı:

<i> azkod ile eğik yazı etiketi kullanmayı öğreniyorum </i>

Kodu Çalıştır

<em> Vurgulanan Yazı Etiketi

i etiketi gibi yazıyı eğik olarak yazmaktadır. Fakat i etiketinden farklı olarak önemli olduğu düşünülen metinleri belirtmek için kullanılır.

em Etiketi Kullanımı:

<em> AZKOD ile em etiketi kullanmayı öğreniyorum </em>

Kodu Çalıştır

<br> Alt Satır Etiketi

Html dilinde alt satıra geçmek için br etiketi kullanılmaktadır. br etiketi html dilinde enter tuşu ile aynı görevi yapmaktadır. 

Alt satıra geçme etiketi 2 şekilde kullanılmaktadır:

  1.  <br> şeklinde
  2. <br/> şeklinde kullanabilirsiniz.

Bilgi: Html dilinde neredeyse tüm etiketler kapatılmaktadır. Fakat <br>  etiketi kapatılmaz.

br Etiketi Kullanımı:

Metin 1

<br>

Metin 2

Kodu Çalıştır

<font > Etiketi

<font> etiketi, metnin renk, boyut, yazı tipi gibi özelliklerini değiştirmek için kullanılır. Bu özellikleri değiştirmek için 3 parametre vardır. Bu parametreler :

  • Size (Boyut) Parametresi
  • Color (Renk) Parametresi
  • Face (Yazı Tipi) Parametresi

Size Parametresi

Metnin büyüklüğünü yani boyutunu belirlemek için kullanılır. Size parametresi 1 ile 7 arasında değer almaktadır.

Size Parametresi Kullanımı:

<font size="1"> AZKOD Yazı </font>

<font size="3"> AZKOD Yazı </font>

<font size="7"> AZKOD Yazı </font>

Kodu Çalıştır

Color Parametresi

Metnin rengini belirlemek için kullanılır. Metnin hangi renk yapmak istiyorsak o rengin ismini veya kodunu yazarak değişiklik yapabiliriz.

Metni rengin ismi ile yapacaksak kullanılacak rengin İngilizce ismini kullanmamız gerekmektedir. Örneğin: Kırmızı :red

Metnin rengini, rengin kodu ile değiştireceksek #000000 ile #FFFFFF arasında girmemiz gerekmektedir. Örneğin:  Siyah : #000000 Beyaz : #FFFFFF

Kod ile girilebilecek değerler : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ‘dir.

Color Parametresi Kullanımı:

<font color="red"> Yazı 1 </font>

<font color="#00AAFF"> Yazı 2 </font>

Kodu Çalıştır

Face Paremetresi

Metnin yazı tipinde değişiklik yapmak için kullanılır. Hangi yazı tipini göstermek istiyorsak o yazı tipinin ismi girilerek kullanılır. Örnek: Arial

Face Parametresi Kullanımı:

<font face="Times New Roman"> AZKOD Metin </font>

Kodu Çalıştır

<mark> İşaretlenmiş Yazı Etiketi

Metnin seçili olan bölümünü sarı olarak işaretleme işlemi yapmak için kullanılır. İşaretleme işlemi yapılacak metni <mark> ile </mark> etiketleri arasına yazmamız gerekmektedir.

mark Etiketi Kullanımı:

 <mark> azkod </mark> 

Kodu Çalıştır

<del> Üstü Çizili (Silinmiş) Yazı Etiketi

Metnin seçili olan bölümünün ortasından tek çizgi çekmek için yani silinmiş gibi göstermek için kullanılır. Üstü çizili şeklide göstermek metni <del> ile </del> etiketleri arasına yazmamız gerekmektedir.

del Etiketi Kullanımı:

 <del> üstü çizili metin </del> 

Kodu Çalıştır

<ins> Altı çizili Yazı Etiketi

Metnin altını çizerek vurgulamak için kullanılır. <u> etiketi ile aynı işlemi yapmaktadır.  Metni altı çizili şekilde göstermek için <ins> ile </ins> etiketleri arasında yazmamız gerekmektedir.

ins Etiketi Kullanımı:

 <ins> altı çizili metin </ins> 

Kodu Çalıştır

<sub> Alt Simge Etiketi

Herhangi bir metne alt simge eklemek için kullanılır. Alt simge <sub> ile </sub> etiketleri arasına eklenerek eklenir. Genellikle matematiksel işlemler için kullanılabilir.

sub Etiketi Kullanımı:

<p> x <sub>2</sub> </p>

Kodu Çalıştır

<sup> Üst Simge Etiketi

Herhangi bir metne üst simge eklemek için kullanılır. Üst simge <sub> ile </sub> etiketleri arasına eklenerek eklenir. Genellikle matematiksel işlemlerde karesi, küpü vb. işlemler için kullanılabilir.

sup Etiketi Kullanımı:

<p> x <sup>2</sup> </p>

Kodu Çalıştır

 

Önceki Ders: Html Paragraf Sonraki Ders: Html Çizgi