HTML'de Üst Bilgiler

İlk HTML dersimizde <head> etiketini öğrenmiştik ve temel etiketlerden birisi olduğunu söylemiştik. Ayrıca <body> etiketine yazılanların son kullanıcıya gösterileceğini, arka planda çalışacak diğer tüm kodların <head> içerisinde yazılması gerektiğinden de bahsetmiştik. Hatta aynı örnekte <head> etiketi içerisinde yine varsayılan bir etiket olan <title> etiketini kullanarak web sayfasının başlığını belirlemiştik. Şimdi bu etiketin kullanım alanlarına daha detaylı bakalım.

<head> etiketi içerisinde tanımlanan her etiket üst bilgi göndermek için tanımlanır. Bunların içerisinde şu etiketler vardır;

<title> - Sayfa başlığını belirler
<style> - HTML içerisinde CSS kullanımını sağlar
<meta> - Her türlü üst bilgiyi tanımlamak için kullanılır.
<link> - Bir CSS dosyasını sayfada dahil etmeye yarar
<script> - HTML'de javascript kullanımını sağlar. Ayrıca javascript dosyalarını çağırmaya da yarar.
<base> - Daha geçen derste öğrendiğimiz bu etiket varsayılan yolu belirler.

<style> Etiketi

Bu etiket HTML sayfa içerisinde CSS kodu yazmamızı sağlar. Örnek vermek gerekirse;

<style>
body {
    background-color: #eee;
}
h1 {
    font-size: 30px;
}
</style>

Editörde Görüntüle

Genelde <head> etiketi içerisine yazılsa da zaman zaman body içerisine de yazılabiliyor. Fakat şöyle bir sorun var, kodlar yukarıdan aşağı doğru yorumlandığı için CSS kodları her zaman en üstte olmalı, aksi taktirde stiller sayfa yüklendikten sonra gelecektir buda çirkin bir görüntü oluşturur.

<link> Etiketi

Bu etiket mevcut sayfa ile çağrılacak olan sayfa arasındaki ilişkiyi tanımlar. Örneğin CSS dosyası çağırabiliriz, oda şöyle;

<link rel="stylesheet" type="text/css" href="stil.css">

Editörde Görüntüle

<meta> Etiketi

<meta> etiketi web sayfalarında üst bilgi tanımlamak için kullanılır. Örneğin sayfanın karakter kodlamasını, açıklamasını, anahtar kelimesini, yazarını vb. üst bilgilerini tanımlamak için kullanılır.

Tarayıcılar, üst bilgileri sayfayı nasıl göstereceğini belirlemek için kullanırlar. Arama motorları da genelde bu üst bilgilere göre yorumlarlar, bu açıdan bu üst bilgileri doğru şekilde belirlemek SEO için çok önemli. Hayda.. Birde SEO diye bir ifade çıktı der gibisiniz? SEO yani uzun adıyla Search Engine Optimization yani türkçesiyle Arama Motoru Optimizasyonu, web sayfalarının arama motorlarında daha üst sıralarda çıkmasını sağlar. Bu konuya daha sonra uzun uzun geliriz. Şimdi gelin, <meta> etiketinin kullanım alanlarına bakalım.

Sayfanın karakter kodlamasını belirlemek için;

<meta charset="UTF-8">

Editörde Görüntüle

Sayfanın başlığını belirlemek için;

<title>PROTOTURK | Yazılım ve Tasarım Dersleri</title>

Editörde Görüntüle

Sayfanın açıklamasını belirlemek için;

<meta name="description" content="Web dilleriyle ilgili Türkçe hazırlanmış içerikler, dersler ve daha fazlası..">

Editörde Görüntüle

Bu şekilde kullanıldığında arama motorlarında şu şekilde gözükecek;

Sayfanın anahtar kelimelerini belirlemek için;

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

Editörde Görüntüle

Sayfanın yazarını belirlemek için;

<meta name="author" content="Tayfun Erbilen">

Editörde Görüntüle

Sayfayı belirlenen bir süre içerisinde yenilemek için; (Bu örnekte 10sn olarak belirledik)

<meta http-equiv="refresh" content="10">

Editörde Görüntüle

Viewport (Görünüm) Ayarlama

Hazırladığınız HTML sayfalara hiç mobilde bakmayı denediniz mi? Eğer viewport değerini belirlemediyseniz yani görünüm ayarını, o zaman mobile duyarlı web sayfaları yapmıyorsunuz demektir. Normal şartlarda mobilde görünümünü ayarlamak CSS ile yapılacak bir şey ancak HTML tarafında viewport'u yani görünümü ayarlamak için bir etiket bulunuyor. Hemen inceleyelim;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Editörde Görüntüle

Bu örnekte önemli olan content içerisindeki değerler. Bunları tek tek açıklamak gerekirse;

width=device-width - Görünüm ayarlarında genişliği girilen cihazın genişliği ne ise o olarak belirle. Bu mantıkta mobilden girilirse mobil genişlik, normal bilgisayardan girilirse tarayıcının çözünürlüğü belirlenir.
initial-scale=1.0 - Sayfanın yakınlık seviyesidir. 1.0 = 100% - Daha büyük yapmak isterseniz örneğin 1.7 olarak belirleyip test edebilirsiniz.
user-scalable=no - Kullanıcıların sayfayı yakınlaştırmasını engellemek için kullanılır.
minimum-scale=1.0 - Sayfanın minimum yakınlık değeri. (1.0 = 100%)
maximum-scale=1.0 - Sayfanın maksimum yakınlık değeri. (1.0 = 100%)

Yani kısaca bu kodu eklediğimizde yakınlık 100% olarak gözükecek yakınlaşmayacak ve genişlik girilen cihazın genişliği olacak. width=device-width yerine width=1300 yazarsanız genişliği 1300px olarak belirlemiş olursunuz ama bu tarz kullanımları yoktur, bu kullanım en standart kullanımdır.

Soldaki viewport kullanıldığında düzgün gözüken resim, sağdaki ise viewport'suz mobil versiyon.

<script> Etiketi

HTML sayfa içerisinde Javascript kodlarını çalıştırmak için bu etiket kullanılır. Örnek vermek gerekirse;

<script>
document.body.innerHTML = 'Body etiketinin içeriğini değiştirdik.';
</script>

Editörde Görüntüle

Bu örneği anlamadıysanız sorun etmeyin, çünkü Javascript'e henüz hiç giriş yapmadık :) Javascript bölümü altında bolca irdeleyeceğiz.

<base> Etiketi

Bu etiketi kullanarak sayfa içerisinde bağlantı verdiğimiz tüm adreslerin varsayılan başlangıç değerlerini belirlemek için kullanılır. Örnek vermek gerekirse;

<base href="https://prototurk.com/upload" target="_blank">

Editörde Görüntüle

Bunu <head> etiketi içerisine yazdığınızda artık bağlantı verdiğiniz tüm adresler https://prototurk.com/upload altında aranacaktır. Ayrıca target="_blank" dedik, buda her bağlantının yeni sekmede açılmasını sağlar. Yani genel bir tanım yapmak için kullanılır genelde. Çok sık kullandığım etiketlerden biridir :) Prototürk'ün kaynak kodlarına bakarsanız görebilirsiniz.