HTML Dersleri 12 Font Elementi

FONT TİPLERİ VE KULLANIMI

<font> etiketi HTML dilinde yazı tipi ve rengini değiştirmeye olanak sağlar. <font> etiketi üç temel niteliğe sahiptir. Bunlar sırasıyla size (boyut), color (renk), face (font tipi) adlarına sahiptirler. Sayfa boyunca herhangi bir yazı tipinin özelliğini değiştirmek için <font>  etiketini kullanmanız yeterlidir. Burada önemli olan şudur: siz </font> etiketiyle kapamadığınız sürece tüm yazılı metin sizin belirttiğiniz boyut, renk ve yazı tipinde yazılmış olarak görüntülenecektir.

FONT BOYUTU BELİRLEME (SİZE)

Yazı tipi boyutunu size niteliği ile ayarlayabilirsiniz. Size niteliğinin alabileceği en küçük değer 1 ve en büyük değer ise 7’dir. 1’den küçük yazacağınız değerler 1 olarak, 7’den büyük değerler ise 7 olarak işlem görür. Size değeri belirtmediğiniz durumlarda varsayılan font büyüklüğü 3’tür.

ÖRNEK :

Örnek çalıştırıldığında ise şöyle bir çıktı oluşur:

FONT BOYUTU BELİRLEME (SİZE)

FONT TİPİ BELİRLEME

Yazı tipi olarak adını tam bildiğiniz herhangi bir yazı tipini (fontu) kullanabilirsiniz. Burada önemli olan nokta şudur : Bilgisayarınızda çok çeşitli yazı tipleri bulunabilir. Yazı tipleri işletim sistemi  tarafından barındırılır ve kullanılır. Dolayısıyla bilgisayarınızda kurulu olmayan bir yazı tipi kullanmaya çalıştığınızda web tarayıcınız bu fontu görüntülemeyecektir. Bunun yerine varsayılan font olan Times New Roman fontu ile yazılmış olarak görüntülenecektir.

ÖRNEK :

Örnek çalıştırıldığında şöyle bir çıktı oluşur:

FONT TİPİ BELİRLEME

Tasarladığınız web sayfalarında kullandığınız fontlar ziyaretçilerinizin bilgisayarlarında kurulu olmayabilir. Bu durumda face niteliğine aralarında virgül kullanarak birden fazla font adı verebilirsiniz. Bu durumda ilk sıradakinden başlayarak ziyaretçinin bilgisayarında hangi font yüklü ise o font görüntülenir.

ÖRNEK :

  FONT RENGİ BELİRLEME

Font rengi belirlemek için color niteliği kullanılır. Color niteliğine, renklere ait ve 16’lık sayı sisteminde oluşturulmuş (hexadecimal) sayısal kodları girerek veya bazı temel renklerin İngilizce adlarını vererek renk belirleyebilirsiniz.  

ÖRNEK :

Örnek çalıştırıldığında şöyle bir çıktı oluşur:

FONT RENGİ BELİRLEME

<font> artık önemsiz bir etiket olmuştur. Gelecek nesil HTML dillerinde bunun kullanılması söz konusu olmayacaktır. Bir çok kişinin halen bunu kullanmasına karşın, bu komutu artık unutmanızı ve yerine stilleri kullanmanızı öneririz.

<font> Artık Kullanılmamalıdır!  <font> etiketi HTML 4 ve XHTML dillerinde artık geçersiz olmuştur. World Wide Web Consortium (W3C) bunun yerine style sheets (CSS) kullanılmasını önerir.

FONT PARAMETRELERİ

PARAMETRE ÖRNEK AÇIKLAMA
size=”number” size=”2″  Punto büyüklüğü
size=”+number” size=”+1″  Puntoyu 1 arttır
size=”-number” size=”-1″  Puntoyu 1 düşür
face=”face-name” face=”Times”  Yazı tipi belirle
color=”color-value”  color=”#eeff00″  Yazı rengi belirle
color=”color-name”  color=”red”   Yazı rengi belirle

CSS İLE FONT AYARLAMA

YAZI TİPİ AYARLAMA

Ekran çıktısı şu şekilde olacaktır.

CSS YAZI TİPİ AYARI

PUNTO AYARLAMA

Punto ölçüsünü örneğin “12px” şeklinde belirtebileceğiniz gibi yüzde şeklinde oransal bir değer vermeniz responsive tasarım açısından daha mantıklı olacaktır.

Ekran çıktısı şu şekilde olacaktır.

CSS İLE PUNTO AYARLAMA

YAZI RENGİ AYARLAMA

Ekran çıktısı şu şekilde olacaktır.

YAZI RENGİ AYARLAMA

Şimdi buraya kadar öğrendiğimiz bütün değerleri deneyerek bir örnek yapalım.

Ekran çıktısı şu şekilde olacaktır.

FONT TİPİ, RENGİ VE PUNTO AYRLAMA

Buraya kadar HTML temel yapısını bildiğim kadarıyla anlatmaya çalıştım. Bir sonraki dersimizden itibaren HTML 5 konularını işlemeye başlayacağız. Bir sonraki dersimizde görüşmek üzere…

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir