Html dökümanlarının en genel etiketi <hmtl> etiketidir.Dolayısıyla bütün içeriğimiz bu etiket içine gelmelidir.
<html> Burada 2 genel alt etiket daha tanımlıyoruz.(head ve body) </html>
** Etiket tanımlamalarının aynı hizaya gelmesi önemlidir. <html> etiketlerinin aynı hizada ve html etiketinin 2 alt öğesi olan head ve body etiketinin ise aynı hizada tanımlandığına dikkat edelim.
<html>
<head>
</head>
<body>
</body>
</html>
head etiketlerinin bazı alt etiketleri ise şu şekildedir ;
<html>
<head>
Burada sayfamızı tanımlayan açıklamalar yer almalıdır.Örneğin;
**sayfa başlığı (title),
<title> Bu benim ilk web sayfam </title>
**sayfanın arama motorlarında bulunması için gereken sayfa açıklaması ve anahtar kelime tanımlamaları (meta etiketleri),
<meta name="description" content="Sadık Turan' ın hazırladığı kurslar">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
**sayfa stil (css) tanımlamaları (yazı fontu,arkaplan rengi gibi...)
<style>
body
{
background-color:red; // sayfa zemini kırmızı olur.body sayfanın genelini temsil ettiği için.
}
</style>
</head>
<body>
Sayfa üzerinde gördüğümüz her öğe burada tanımlanmalıdır.
</body>
</html>
Html5 Meta Etiketleri ;
meta etiketleri html dökümanı ile alakalı tanımlayıcı bilgileri içeriyor. Örneğin ; sayfanın hangi konu ile alakalı olduğunu, hangi anahtar kelimeler kullanılarak ulaşılabileceği gibi bilgileri arama motorlarına bildirir.
En çok kullanılan bazı meta etiketleri;
<head> <meta charset="UTF-8"> <meta name="title" content="Yazılım Eğitimleri" /> <meta name="description" content="En kaliteli yazılım eğitimleri ile zaman kaybetmeden bir adım öne geçin."> <meta name="keywords" content="HTML,CSS,Asp.Net,Javascript"> <meta name="author" content="Sadık Turan"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="refresh" content="30"> </head>
charset="UTF-8" : Sayfanın tanıyacağı karakter kodlama türünü belirtir. Bu karakter kodlarını aşağıdaki linkten kontrol edebilirsiniz.Eğer kullanılmazsa tanınmayan karakter gösteriminde sorun çıkabilir.
https://www.w3schools.com/charsets/ref_html_utf8.asp
title: Site adı olarak belirttiğiniz bu meta kodu arama motorlarının sitenizin adını kolay bulması için yardımcı olmaktadır.Tarayıcının sol üstünde görünen isimdir.
<meta name="title" content="Yazılım Eğitimleri" />
description : Sayfa hakkında açıklayıcı bilgi. Genelde açıklayıcı ve anahtar kelime içeren özet bir cümle olması beklenir. Çok uzun açıklama girmek negatif bir duruma neden olur.
<meta name="description" content="En kaliteli yazılım eğitimleri ile zaman kaybetmeden bir adım öne geçin.">
keywords : Sitenizin arama motorlarında bulunmasına yardımcı olacak olan anahtar kelimelerinizi tanımlayacağınnız alan olan meta keyword içerisinde anahtar kelimelerinizden 1-4 tanesini belirtebilirsiniz.
<meta name="keywords" content="HTML,CSS,Asp.Net,Javascript">
author : Yazar bilgisi.
<meta name="author" content="Sadık Turan">
viewport : Sayfanızın tüm cihazlarda sorunsuz görünmesiyle alakalı bilgi. Responsive Design bölümünde bu konuyu anlatmaktayım.
Aşağıdaki meta etiketinin her html sayfanıza eklemenizi tavsiye ederim.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dersi izlemek için aşağıdaki linki takip ediniz.
https://www.udemy.com/komple-web-developer-kursu/learn/v4/t/lecture/8525640
refresh : Sayfanızın belli bir saniyede yenilenmesini istiyorsanız refresh meta etiketini kullanabilirsiniz.Aşağıdaki meta etiketiyle sayfamız her 30 saniyede bir yeniden yüklenecektir.
<meta http-equiv="refresh" content="30">
Meta etiketlerini tanımlamamızdaki en büyük neden sayfamızın arama motorlarına iyi gözükmesidir. Ve bazı seo tavsiyeleri için aşağıdaki linki takip etmenizde fayda var.