Kültürlü PenguenSeo Blog'u
İnsanların ne dediği umrumda değil, bu hayatı onlar için yaşamıyorum .


HTML5 Head Etiketleri!

124 Okunma


Merhaba Kültürlü Penguen okurları,

Diğer dersimizde html5’e giriş yapmıştık şimdi ise head etiketinin en sık kullanılan beşini inceleyeceğiz.Head etiketi içerisinde title,meta,link,style ve sciprit etiketleri en sık kullanılan etiketlerdir.Bu etiketleri şimdi tek tek ele alalım isterseniz.

<title> etiketi

Başlık olarak doğrudan dilimize çevrilebilir. Sayfa başlığını belirtir.

Kullanımı şu şekildedir:

<!doctype HTML>
<html>
    <head>
        <title>Head Etiketleri</title>
    </head>
    <body>
    </body>
</html>

Ekran görüntüsü yoktur. Fakat şu an tarayıcınızdaki sekme başlığına bakarsanız <title> etiketini görebilirsiniz.

<meta> etiketi

metadata olarak bir açılım vardır. Sayfanın bilgi kaynağını belirtir. Daha çok SEO (Arama Motoru Optimizasyonu)’da kullanılır.

Aşağıdaki örnekte durumu biraz daha ayrıntılı inceleyelim:

<!doctype HTML>
<html>
    <head>
        <title>Sayfa Başlığı</title>
        <meta charset="utf-8" />
        <meta name="description" content="Bu bir web sayfasının tanımıdır.">
        <meta name="keywords" content="anahtar, kelimeler, burada, olur">
        <meta name="author" content="KulturluPenguen">
    </head>
    <body>
    </body>
</html>

<meta> etiketi çoğunlukla name atfı ile birlikte kullanılır. Örneğin; descriptiontanımlama demektedir ve bu atıf ile sayfa tanımlaması yapılır. keywordsanahtar kelimeler anlamındadır ve arama motorları için gerekli önemli anahtar kelimeler bu kısma yazılır. author dilimizde yazardemektir. Sayfayı yazan kişinin adını ya da rumuzunu belirtmek için kullanılabilir. author atfı çok sık kullanılmaz. Sadece örnek olsun diye gösterdim. Bunun dışında charset, yani karakter seti atfı ile sayfanın dil formatı tarayıcıya belirtilebilir.

Aslına bakarsanız title ve description‘ı sıklıkla arama motorları sonuçlarında görmekteyiz. Aşağıdaki görselde bunu daha rahat anlayabilirsiniz:

<link> etiketi

Dilimizde bağlantı anlamına gelmektedir. Sayfa dahili bir CSS kodu ya da site tarayıcı ikonu olarak da bilinen favicon eklemek için sıklıkla kullanılır.

<!doctype HTML>
<html>
    <head>
        <link rel="stylesheet" href="~/kultur/web_tasarim/Content/css/style.css"/>
        <link rel="shortcut icon" href="~/kultur/web_tasarim/Content/img/penguen-web-tasarim-favicon.png">
    </head>
    <body>
    </body>
</html>

Yukarıdaki örnekte rel‘in açılımı relationship‘tir ve dilimizde ilişki anlamına gelmektedir. Sayfaya eklenecek dosyanın ilişkisini tarayıcıya belirtir. Örneğin; ilk satırda bir CSS dosyası eklenmiştir. Bunun için de rel atfına stylesheet yazılmıştır. İkinci satırda ise shortcut icon yazılmıştır. Dilimizde kısayol ikonu anlamına gelmektedir. Sayfa ikonunu bu şekilde sitemize eklemiş olduk.

<style> etiketi

Bazen sayfa içinde sadece o sayfaya özgü CSS kodları kullanmak isteyebiliriz. Bunun için <style> etiketini kullanmamız yeterlidir. Dilimizde stili, tarz anlamına gelmektedir.

<!doctype HTML>
<html>
    <head>
        <style>
            body {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p>Bu bir deneme yazıdır.</p>
    </body>
</html>

Yukarıdaki örnekte body CSS seçicisi ile sayfadaki metin rengini mavi yaptık.

<script> etiketi

Sayfa içinde kullanılacak JavaScript kodlarını <script> etiketi içerisine yazarız. Bununla birlikte src atfı ile birlikte sayfamıza dahili bir JavaScript dosyası ekleyebiliriz.

<!doctype HTML>
<html>
    <head>
        <script src="~/kultur/web_tasarim/Scripts/jQuery-2.0.2.min.js"></script>
        <script>
            $(document).ready(function() {
                alert('Sayfa hazır!');
            });
        </script>
    </head>
    <body>
    </body>
</html>

Yukarıdaki örnekte sayfaya jQuery’nin 2.0.2 sürümünün minimize edilmiş dosyasını yükledik. Diğer satırlarda ise sayfa yüklendikten sonra “Sayfa hazır!” şeklinde bir yazının olduğu uyarı penceresi açılmasını istedik.


avatarresmi

Ulan şu zenginler gibi kafamız bozulduğunda son model arabamızı alıp deniz kenarında efkarlanamadık be varsa yoksa kapıyı çarp yatağa atla

- Twitter - Facebook


Cevap Yaz

Görüşlerinizi bizimle paylaşmanız bizi çok mutlu edecektir. Bir yorum da siz bırakın.
Blogların beslenme şekli yorumlardır.