Merhaba,

Daha önceki yazılarda HTML’in ne olduğunu, HTML sayfasını nasıl oluşturacağımızı ve HTML sayfasının temel bölümlerini inceledik. Şimdi ilk temel bölüm olan <head> </head> bölümünü inceleyeceğiz.

Head bölümümüz, sayfamızda görünmeyen ancak sayfamız hakkında bir çok bilgi ve özelliği içeren bir bölümdür. Buraya eklediğimiz hiç bir şeyi web sayfanızda göremezsiniz ancak etkilerini görebilmeniz mümkün olur.  Bu bölüme onlarca farklı tipte veri ve özellik girişi yapabilirsiniz. Ancak biz bu bölümde yalnızca temel özelliklerden bahsediyor olacağız. Daha gelişmiş özellikleri konuya daha fazla hakim olduğumuz zamanlarda bakıyor olacağız.

 

Sayfa Başlığı – <title> </title>

Head bölümümüzde kullanacağımız ilk ve en önemli etiketlerinden birisi sayfa başlığını yazdığımız <title> etiketidir. Yazacağımız bu başlık:

  • Web tarayıcımızın sekme çubuğunda görünür.
  • Google gibi arama motorlarının sayfamızı göstermek üzere başlık aldığı yerdir.
<!DOCTYPE html>
<html>
   <head>

      <title>Web Sitemizin Başlığı</title>

   </head>
   <body>
   .
   .
   .
   .
   .
   .
   </body>
</html>

<head> </head> etiketleri arasında <title> etiketini açarak başlığımızı yazmaya başlıyoruz ve </title> kapanış etiketimiz ile tamamlıyoruz.

En uygun başlık uzunluğu 60 karakterdir. Google aramalarında başlığımızın 50 – 60 karakterlik kısmı görünecektir. Bulunabilirliğinizin daha yüksek olabilmesi için 60 karakterden çok daha kısa, okunabilirliği azaltmamak için de 60 karakterden çok daha uzun başlıklar kullanmamanız tavsiye edilir.

Karakter Kodlaması – <meta charset>

Bu etiketimiz de sayfamızda mutlaka kullanmamız gereken önemli etiketlerden biridir. Sayfamızın karakter kodlamasını belirtir. Öyle ki her dilin kendine özgü karakterleri olabilir. Örnek olarak Türkçe dilimizde (ı, ö, ü, ç, ş, ğ) gibi İngilizce dilinde olmayan karakterler vardır. Sayfamızın bu karakterleri tanıyabilmesi için, biz hemen hemen her karakteri tanıyabilen utf-8 karakter kodlama tipini kullanıyoruz. Bu etiketimizi kullanarak sayfamızdaki Türkçe karakterlerin bozuk çıkmasına engel olmuş oluruz.

Bu etiketimizin bir başlangıç ve bitişi yoktur. Bir özellik belirtir. Standart öğrendiğimiz etiket kullanımına ek olarak henüz öğrenmediğimiz bir bilgiyi daha burada göreceğiz.

<meta charset="utf-8">

Etiket Özellikleri ve Değerleri

Şimdiye kadar yazdığımız etiketlerde, <html> , <body> , <head> , <p> , <title> gibi, yalnızca etiketi yazıyorduk ve bu şekilde kullanıyorduk. Ancak burada farklı bir durumla karşılaştık. <meta> etiketimizin ek bir özellik alabildiğini görüyoruz. Öte yandan etiketimizin kendi kendine kapandığını ayrıca biz </meta> şeklinde kapanış etiketi olmadığını görüyoruz.

Daha önce belirtmiştik, bazı etiketler arasında başlayan ve biten bir içerik bulunmaz. Bu gibi etiketlerde hem açılış hem kapanış etiketi ayrı ayrı bulunmaz. Bunu sadece <meta> etiketimizde değil başka etiketlerimizde de göreceğiz.

Diğer gördüğümüz farklı özellik ise meta kelimesinden sonra gelen charset="utf-8" özelliği. Bu bir etiket özelliğidir (attribute). Bu özellik yazdığımız etiket ile ilgili ek bilgi, özellik verebilir. Buradaki kullanımımızda sayfa hakkında bilgi vereceğimizi belirten <meta> etiketimizin charset özelliğini kullandık. Ve bu özelliğimizin değeri olarak da “utf-8” değerini verdik. Etiket özelliklerini her zaman çeşitli şekillerle kullanmaya devam edeceğiz.

Sayfa Açıklaması – <meta name=”description”>

Arama motorlarının sayfamızın başlığını <title> etiketinden aldığını öğrenmiştik. Arama sonuçlarında sayfa başlığının altında o sayfa ile ilgili bir miktar açıklama metni yer alır. Buradaki metne müdahale etmek istiyorsak bu <meta> etiketini kullanmamız gerekir.

<meta name="description" content="Sayfamız hakkındaki açıklama metni.">

Burada yine bir meta etiketi kullandık. Ancak bu sefer 2 farklı etiket özelliği kullandık. Birinci kullandığımız name özelliği, verdiğimiz bilginin adını belirtir. Burada kullandığımız bilgi “description” yani “açıklama” bilgisidir. Ve açıklamamızın içeriğini de “content” özelliğini kullanarak yazıyoruz.

Görselde de gördüğünüz Sayfa Başlığı <title> etiketinden, Sayfa Açıklaması da ilgili <meta> etiketimizden gelir. Eğer bu bilgiyi siz vermezseniz, Google gibi arama motorları sayfada bulduğu bir içeriği açıklama olarak atayabilir. Görselde göründüğü gibi bizim web sitemizde bir açıklama belirtilmediği için, Google web sitemizdeki içeriklerden birinin, bir kısmını açıklama olarak kullanmış.

Sayfa Açıklaması – <meta name=”keywords”>

Sayfamızın içerdiği bilgiler ile ilgili bazı anahtar kelimeler belirleyerek arama motorlarında ilgili kelimeler arandığında web sayfamızın bulunmasını sağlamaya katkıda bulunabiliriz. Tabi ki bulunabilirlik için bunu yapmak yeterli olmayacaktır ama daha iyi bir sonuç elde edebilmek için bunu kullanmak önemlidir. Kullanım şekli:

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

Sayfa Yaratıcısı – <meta name=”author”>

Bu meta bilgisi sayfayı hazırlayan kişi bilgisini yazmamıza imkan verir. 

<meta name="author" content="Oğuz Kağan Tetik">

Görünüm Çerçevesini Ayarlama (Viewport)

HTML5, sayfa tasarımcıları için bir çok kolaylıkla birlikte gelmiştir. Viewport özelliği de bunlardan biridir. Bu özellik sayesinde web sayfalarının, açıldığı cihaza göre boyut ve ölçeklendirme talimatlarını vermiş oluruz. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Burada gördüğümüz width=device-width kısmı web sayfasının genişliğinin kullanılan cihaz genişliğine göre ayarlanmasını sağlayacaktır. initial-scale=1.0 kısmı ise sayfa tarayıcı tarafından ilk yüklendiğindeki yakınlaştırma (zoom) seviyesini ayarlar.

Mobil cihazlardan internete bağlanma alışkanlığının masaüstü cihazlara oranla git gide arttığını düşünecek olursak, web sayfamızın mobil cihazlara göre ölçeklendirilmesi oldukça önemli bir konudur ve mutlaka viewport özelliğimiz başta olmak üzere tüm gerekli işlemler yapılmalıdır.

Şimdilik sayfamızın head bölümünde öğreneceklerimiz bu kadar. İlerleyen bölümlerde daha kapsamlı bilgiler öğreniyor olacağız. Şimdiye kadar öğrendiğimiz bilgiler doğrultusunda web sayfamız:

<!DOCTYPE html>
<html>
   <head>

      <title>Web Sitemizin Başlığı</title>

      <meta charset="utf-8">

      <meta name="description" content="Sayfamız hakkındaki açıklama metni.">
      <meta name="keywords" content="HTML,CSS,XML,JavaScript">
      <meta name="author" content="Oğuz Kağan Tetik">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

   </head>
   <body>
   .
   .
   .
   .
   .
   .
   </body>
</html>

Bu kodları kullanarak siz de not defterinde bir dosya oluşturun, HTML olarak kaydedin ve tarayıcınızda çalıştırın. Çalıştırdığınızda boş bir sayfa ile karşılaşacaksınız. Yalnızca tarayıcınızın sekme çubuğunda yazdığınız sayfa başlığını görmeniz mümkün olacak. Çünkü şu ana kadar sayfamızın içerik bölümü olan <body> bölümüne hiç bir içerik eklemedik. Bir sonraki yazıda da bu bölüme bakıyor olacağız.