Html - Temel Etiketler

Artık ufak ufakta olsa Html dosyasını oluştururken kullandığımız etiketleri tanımaya başlayalım. Bu yazımda her Html sayfasında bulunması gereken temel etiketleri öğrenmeye çalışacağız. Öğreneceğimiz etiketleri tek tek ele alacağım için, hepsinin bir dosyada nasıl kullanıldığını yazımın sonunda yer alan html dosyasında bulabilirsiniz.

Head Etiketleri

Html etiketlerinin içinde yer alan ve html sayfamızın tanım etiketlerini içeren bölümdür. Head etiketleri arasında yer alan etiketlerin kullanıcıya gösterilmediğini önce ki yazımızda belirtmiştik. Temel de kullanılacak olan etiketleri inceleyecek olursak;

Başlık Etiketi

İnternet (Html) sayfamızın başlığını belirten başlık etiketine title denir. Bu etiketin arasına yazılan metin, internet tarayıcısında sayfanın başlığını oluşturur.
Kullanımı:

<title>Başlık Yazısı</title>

Sonuç;

Resimde görüldüğü üzere sekmenin adı (sayfa başlığı) belirtiğimiz metin ile belirlenmiş oldu. Sadece kullanıcıya bilgi vermesi değil, arama motorları sonuçlarını listeleyebilmek için sayfa başlıklarını kullanır. Anlaşılacağı üzere Seo açısından önemli bir etikettir. 60 - 65 karakter uzunluğunda metin girmeniz tavsiye edilir. Seo açısından önemini ve doğru kullanımı hakkında yazı hazırlanıyor...

Link Etiketi

Harici dosyaları Html dosyası ile ilişkilendirmek için kullanılan etikettir. Genelde css ve favicon dosyaları için kullanılır. Şimdilik diğer kullanım yöntemlerini ele almayacağız. 

Kullanımı:

<link rel="stylesheet" type="text/css" media="screen" href="main.css">

Script Etiketi

Javascript kodlarının yorumlanmasını sağlan etikettir. Javascript kodunun uzunluğuna bağlı olarak dahili kullanılabilir veya "src" özelliği ile harici bir javascript dosyası dahil edilebilir.
Kullanımı:

<script src="main.js"></script>

Meta Etiketleri

Html dosyasının yapısını belirleyen ve tarayıcı tarafından farklı yorumlanmasına etki sağlayan etiket grubuna meta etiketler denir. Meta etiketlerinin ihtiyaca göre birden fazla özelliği bulunmaktadır.

Meta Charset

Bu etiket, tarayıcının Html sayfasını hangi karakter seti üzerinden görüntüleneceğini belirler. Bu etiket olmadığı taktirde tarayıcının kendi ön tanımlı karakter seti kullanılır. Bu durumda internet tarayıcısı farklı bir karakter seti kullanmış ise yazdığımız metinlerde Türkçe karakter sorunu yaşanacaktır. Bizim gibi dillerin doğru bir şekilde görüntülenebilmesi için UTF-8 karakter standardını kullanması gerekiyor.

<meta charset="utf-8">

Görüldüğü üzere kullanımı bu şekildedir. Head başlangıç etiketinden sonra tanımlanabilir.

Meta X-UA-Compatible

Bu meta etiketi ise Html dosyasının uyumluluğu açısından hangi Internet Explorer tarayıcı versiyonuna göre hazırlandığını, tarayıcıya bildirmemizi sağlar. Bu özellik sadece IE-8 ve üzeri versiyonlarda çalışmaktadır. Bir örnekle açıklayacak olursak;  IE-6 versiyonu için tasarlanmış Web tasarımı olduğunu varsayalım. Internet Explorer Edge ile görüntülemek istediğimizde tarayıcı bize IE-6 versiyonunda bir yorumlayarak görüntüler. Ayrıca bu özellik sayesinde W3validate doğrulamasını son versiyona göre yapılmasını sağladığına dair bir bilgi okumuştum.
Kullanımı:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Meta Viewport

Bu etiket Html dosyasını görüntüleyen cihazın genişliğini öğrenmemize ve varsayılan görüntüleme ölçeğini belirtmemize olanak sağlanıyor. Bu özellik sayesinde tasarımlarımızı tüm cihazlara göre esnek (responsive) hale getirebiliyoruz. Kullanımı:

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

Head etiketleri arasında temelde bu etiketleri kullanmaktayız. Diğer etiketleri zamanla öğreneceğiz.

Body Etiketleri

Sıra sayfamızın görüntülenen bölüme geldi. Html derslerinde öğreneceğimiz çoğu etiket bu body etiketleri arasında yer almaktadır. Biz şimdilik çokça kullanacağımız olan div etiketini öğrenelim.

Div Etiketi

Div, Html dosyasında alanlar oluşturmamıza olanak sağlayan etikettir. İhtiyaca göre farklı kullanım amaçları vardır. Bir örnek vermek gerekirse, Div etiketi ile Html tasarımına layout (header, footer, content) sistemi oluşturabilir. Kullanımı:

<div>
    <h1>Html Dersleri - Temel Etiketler</h1>
    <a href="https://www.msoguz.com">Msoguz.com</a>
</div>

Temel olarak bilmemiz gereken etiketler bunlardı. Tüm etiketlerin kullanıldığı örneği incelemenizi tavsiye ediyorum.

Not: Html Lang özelliğini ilerleyen zamanlarda uygun bir yazı ile değineceğim. Şimdilik merak etmeyin.