HTML5'e giriş ve meta veriler

HTML5’e giriş ve meta veriler

HTML5’ten öncelikle HTML nedir  ona bir bakalım:

Hyper Text Markup Language kelimelerinin baş harflerini alan HTML, Türkçe’ye çevirdiğimizde “Zengin Metin İşaretleme Dili” anlamına geliyor.

Kısa bir şekilde tarihçesine de bakacak olursak; CERN’de çalışan Tim Berners-Lee (günümüzde web’in babası olarak da kabul edilir) araştırmacıların arasında rahat bir şekilde döküman paylaşımı ve bili alış-verişi olmasını sağlamak amacıyla HTML dilini ortaya çıkarmış. Amacı sadece CERN’deki araştırmacılar arasında bilgi paylaşımına olanak sağlamak olsa da, günümüzde hepimizin kullandığı bir dil haline geldi.

Hangi dili kullanırsa kullansın, tüm web siteleri HTML dilini kullanmak zorunda. Bundan dolayı bu dili öğrenmeden web içeriği oluşturamayız.

Şimdi gelelim HTML’nin temel yapısına. HTML’nin temel yapısı aşağıdaki gibidir ve her HTML sayfasında bu yapıya uyulmak zorundadır. Ayrıca, HTML’de istisnalar dışında açılan her etiket kapatılmak zorundadır. (<html> </html> gibi)

<!DOCTYPE html>
<html>

 <head>
  <title></title>
 </head>

   <body>

   </body>
</html>

Gelelim açıklamalara;

<!DOCTYPE html> : Döküman tipinini HTML olduğunu belirtir. HTML5’ten önce döküman tipinde uzun uzun yazılar yazılırdı Örneğin; <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> gibi. HTML5 ile birlikte büyük bir sadeleşme geldi ve büyük bir külfetten kurtulmuş olduk.

<html> : Sayfanın yazılım dilinin belirliyor.

<head> : Bu bölümde sayfa ile ilgili title(başlık)  ve meta veriler bulunur. Bu veriler kullanıcı tarafından görülmez. Bu veriler arama motorları tarafından okunur ve yorumlanır.

<body> : Gövde kısmı, yani içeriğimizin bulunduğu ve kullanıcıların web sitesinin içeriğini gördüğü kısım. Bizim de en çok üzerinde duracağımız kısım.

HTML meta veriler (meta data)

<head> – </head> etiketleri arasında yer alan sayfa başlığı(title)  ve meta veriler, arama motorları tarafından okunur ve yorumlanır. Bu yüzden, bu verilerin doğru bir şekilde girilmesi ya da girilmemesi SEO’ya etki edeceğinden dolayı sayfa trafiğini etkileyen baş faktörlerden bir tanesi olacaktır.

<title> – </title> etiketleri arası sayfa başlığıdır ve sayfa içeriğiyle ilgili nokta atışı şeyler yazılmalıdır.

Meta veriler is şu şekilde;

<meta charset="utf-8">

Sayfa karakter kodlamasının utf-8 olduğunu belirtir. UTF-8, birçok dildeki karakterleri destekler.

<meta name="keywords" content="kişisel blog, foto galeri, ...">

Sayfa ile ilgili anahtar kelimeleri belirtir. SEO açısından önemli kriterlerden bir tanesidir.

<meta name="description" content="kişisel düşüncelerimin yer aldığı blog sayfası">

Sayfa içeriğiyle ilgili açıklama kısmıdır.

<meta name="author" content="Salih Altuntaş">

Yayımcıyı belirtir.

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

Sayfa yenilenme süresini belirtir. Özellikle haber siteleri gibi sürekli yeni sayfaların eklendiği sitelerde, kullanıcıların son güncellemelerden eksik kalmasını engellemek için kullanılabilir. Bu örnekte sayfa 60 saniyede bir yenilenecektir.

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

viewport (Görüş alanı) : Bu metada içeriğin genişlik-yükseklik, ve sayfa yakınlığı-uzaklığı gibi ayarlamalar yapılmaktadır. Özellikle content=”width=device-width” parametresi sayfanın, cihaz genişliğine göre şekillenmesini sağlıyor ki; bu da responsive tasarım diye adlandırılan ve günümüzde önemli bir yere sahip olan bir özellik. Günümüzde internet erişiminin mobil cihazlardan çok fazla yapıldığını düşünürsek, sayfanın mobil cihazlara uygun olması kullanıcılar tarafından tercih sebebi olacaktır. (genişlik piksel değeri olarak da girilebilir ama en iyi seçim cihaz genişliği seçeneği olacaktır.)

initial-scale parametresi ise sayfanın başlangıç ölçeklendirmesidir. Bunun haricinde maximum-scale ve minumum-scale parametresi de bulunmaktadır. Bunlar da sayfada yapılabilecek minimum ve maksimum ölçeklendirme değerlerini belirler. Örneğim maximum-scale değeri 2 olduğunda, sayfada yapılabilecek en fazla ölçeklendirme %150 olabilir.

GÖNDERİYİ PAYLAŞ

Yorum Bırak