Skip to content

CSS ile Nasıl Başlık Tasarlanır

Başlıklar bir web sitesinin olmazsa olmazlarıdır. Bu nedenle herhangi bir sayfanızda en az bir tane başlık kullanmalısınız, bu sayede ziyaretçilerinizin o anda neyi okuduğunu bilmesini sağlarsınız. HTML size 6 tane önce de hazırlanmış başlık etiketi imkanı sunuyor. Fakat incelediğim birçok web sayfası başlıkları şu şekilde belirliyor:

<div id="baslik" class="baslik">İşte Burası Başlığım</div>

Bu şekilde baslik ID’si ve baslik class’ı ile isteği sonucu üretiyor. Fakat h1 etiketi kullanmıyor:

oldukça büyük, kalın ve çirkin

Elbette eğer siz h1 etiketlerine stil vermezseniz haliyle büyük, kalın ve çirkin görünecektir. Halbuki div’i stillendireceğiniz h1’i stillendirmeniz daha mantıklı. En azından SEO açısından. Web sayfalarınızda bir tane h1 etiketi arama motoru botlarının dikkatini çok fazla çeker. Fakat bir tanesi de yeterlidir.

Neden DIV yerine Başlık Etiketini Kullanalım

  • Arama motorları başlık etiketini severler
  • Başlıklarınız için hangi class’ı kullandığınızı hatırlamak zorunda kalmazsınız
  • Sağlam bir sayfa düzeni için idealdir.
  • Stiller kapalı olduğunda bile neyin ne olduğu anlaşılabilir

Başlıklarınıza Stil Oluşturalım
Başlık etiketlerinizi “büyük, kalın ve çirkin” olmaktan kurtarmak için öncelikle nasıl görünmesini istiyorsak o şekilde stillendirelim. Bu nedenle bir web sitesi üzerinde çalıştığım zaman öncelikle paragraf, h1, h2 ve h3 stillerini belirlerim. Örneğin yeni bir sitenizin stil dosyası başlangıçta bu olabilir:

body, html { margin: 0; padding: 0; }  
p { font: 1em Arial, Geneva, Helvetica, sans-serif; }  
h1 { font: bold 2em "Times New Roman", Times, serif; }  
h2 { font: bold 1.5em "Times New Roman", Times, serif; }  
h3 { font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; } 

Bundan sonraki adımda başlık etiketinizin font türünü ve font rengini düzenleyin. Bu sayede sayfa yapınıza biraz daha uygun hale gelecektir.

h1 {  
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;  
margin: 0;  
padding: 0;  
color: #e7ce00;  
}

Çerçeveler Başlıklarınızı Çıplaklıktan Kurtarır
Çerçeveler başlıklarınızı geliştirmek için muhteşem bir yoldur. Fakat her başlığınızda çerçeve olmasına da gerek yoktur. Önemli olan sitenizle uyum içinde olmasıdır.

h1 {  
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;  
margin: 0;  
padding: 0;  
color: #e7ce00;  
border-top: solid #e7ce00 medium;  
border-bottom: dotted #e7ce00 thin;  
width: 600px;  
} 

Yukarıdaki örnekte başlığın üstüne düz bir çizgi altına ise noktlar kümesinden oluşan bir çizgi ekledim.

Başlığınıza bir arka plan resmi eklmek çok şık bir görüntü katabilir
Birçok web sitesinin üst kısmnıda başlık kısmı yer alır. Genellikle site başlığı ve grafik. Birçok tasarımcı bunları iki farklı element olarak ele alır ve o şekilde hazırlar. Neden siz de öyle yapasınız ki? Şimdi başlığımızın arkasına bir de resim yerleştirelim:

h1 {  
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;  
background: #fff url("baslik_arka.jpg") repeat-x bottom;  
padding: 0.5em 0 90px 0;  
text-align: center;  
margin: 0;  
border-bottom: solid #e7ce00 0.25em;  
color: #e7ce00;  
} 

Hayalim de eklediğim resmin yüksekliği 90px idi. O nedenle padding: 0.5em 0 90px 0; yaptım. Bu sayede alttan 90 piksellik padding verdim. Daha farklı yöntemlerde var. Line-height, margin gibi.

Umarım anlatabilmişimdir.

Kolay gelsin

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!