HTML'de HTML Dili Nedir?

HTML Dersleri ile kendi web sitelerinizi kodlayabileceksiniz ama ilk önce HTML'yi bir tanıyalım! 

HTML dosyası nedir?

HTML, CERN’de çalışan Tim Berners-Lee tarafından geliştirilen , 90’lı yıllarda ise adına HTML denilen bir web standartıdır. HTML’in açılımı ise Hyper Text Markup Language internet üzerinde web sitesi oluşturmak için kullanılan bir betik dil olup, programlama dili değildir.

HTML dosyası nedir?

  • HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir.
  • Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir
  • Markup tag'ler web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
  • Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.
  • Bir HTML dosyası basit bir text editör ile oluşturulabilir.

Denemek ister misiniz?

Bilgisayarınızın herhangi bir yerine anasayfam.html adlı bir dosya oluşturun, bu dosyayı metin editörünüzün üstüne sürükleyin ve bırakın.

Aşağıdaki kodlaru açtığınız editör içerisine yazın:

<!DOCTYPE html>
<html>
<head>
    <title>Sayfa Başlığı</title>
    <meta charset="UTF-8">
</head>
<body>
   
   <h1>Merhaba Dünya</h1>

</body> 
</html>

oluşturduğunuz dosyaya çift tıklayın, dosya tarayıcınızda açılacaktır.

UNUTMAYIN!

Web tarayıcıları, HTML etiketlerini göstermez ancak sayfaların içeriklerini oluşturmak için bu etiketleri kullanır. Bu yüzden kurallarına uygun HTML yazmak, hem tarayıcıların kodlarınızı yorumlamasını kolaylaştırır hem de arama motoru dostu sayfalar oluşturmanızı sağlar.

Örneğin Açıklaması

  • <!DOCTYPE> tanımı, HTML sayfası yorumlanırken HTML'in hangi sürümüyle yorumlanması gerektiğini belirlemek için kullanılır. Bu örnekte biz son sürüm olan HTML5'i kullandık.
  • <html> etiketi, HTML'in en temel etiketidir ve diğer tüm etiketleri kapsar.
  • <head> etiketi, sayfa hakkında üst bilgiler içerir. Yani kullanıcı bir web sayfasına girdiğinde göremeyeceği ancak arka planda yüklenip işleyişi devam ettirecek bilgileri içerir. Bunların ilk örneği olan <title> etiketini yazarak sayfanın başlığını belirledik. Bu etiketin detaylarına ileride geleceğiz.
  • <title> etiketi, sayfanın başlığını belirlemek için kullanılır ve <head> etiketi içerisinde yer alır.
  • <meta> etiketi, web sayfalarında üst bilgi belirtmek için kullanılır. Bu örnekte, sayfanın karakter kodlamasını belirttik.
  • <body> etiketi, görünecek olan tüm yazı ve etiketleri içinde barındırır. Yani bir web sayfası açıldığında, body içerisindekiler son kullanıcıya gösterilir.

Yukarıdaki örneği tam olarak anlamadıysanız, HTML etiketlerinin yapısını inceleyerek başlayalım.

HTML'de Etiket Yapısı

HTML'de metinleri işaretlerken etiketler kullanılır. Ve etiketler tanımlanırken < küçüktür ve > büyüktür işaretleri içerisine etiket adı yazılır. Yani <etiketAdi> şeklinde tanımlanırlar.
Ayrıca açılan etiketler, aynı şekilde başında / konarak kapatılır. Yani <etiketAdi> .. </etiketAdi> şeklinde tanımlanır. Ancak bu kural tüm etiketler için geçerli değildir, bazı etiketler kendiliğinden kapatıldığından sizin kapatmanıza gerek yoktur. Bunların ayrımını, ilerleyen derslerde daha iyi anlayıp öğreneceksiniz ancak kapatılmayan etiketlere birkaç örnek vermek gerekirse, <img> <br> <hr> <meta> vb. diyebiliriz.

Örnek bir HTML etiketi inceleyelim;

<b>Kalın Yazı</b>

Bu örnekte, <b> içerisindeki ifade kalın yazılacaktır.

HTML'de Nitelik Yapısı

Etiketleri oluşturduktan sonra, etiketleri oluşturan niteliklerin kullanımını incelemek gerekiyor. Nitelikler, etiketlerin direktifleri gibi düşünebilirsiniz. Yani etiketin daha fazla işlevsel hale getirmek için belli başlı nitelikler tanımlıyoruz. Ancak önce, nitelik nasıl tanımlanır bunu öğrenelim.

Niteliği etiketi açtıktan sonra anahtar="deger" şeklinde tanımlıyoruz. Niteliklerle ilgili daha detaylı bir açıklamayı "Nitelikler" sayfasında bulacaksınız. Şimdilik bir örnek vermek gerekirse, yukarıdaki temel örneğimizden verelim.

<meta charset="UTF-8">

Bu örnek hem kendi kendine kapanan etiket türüne hemde nitelikli bir etikete örnek. Gördüğünüz gibi anahtar olarak charset ve değer olarakta UTF-8 değeri geldi. Bazı durumlarda anahtar ve değerler belli başlı şeyleri temsil ederken, bazı durumlarda değerler sizin belirleyeceğiniz bir ifadede olabilir.

Ayrıca nitelikleri birden fazlada kullanabilirsiniz, örnek vermek gerekirse;

<meta content="description" content="açıklama..">

Web Tarayıcısı nedir?

Eğer daha önce bu işlerle uğraşmadıysanız, web tarayıcısı ifadesini duymamış olabilirsiniz ancak emin olun uzun süredir kullandığınız bir program.

Web tarayıcılarının amacı HTML sayfalarını okuyup yorumlayarak son kullanıcıya göstermektir.

Web tarayıcıları yazılan HTML etiketlerini son kullanıcıya göstermezler, ancak belgenin nasıl yorumlanacağını bu etiketlere göre belirlerler. Bu etiketlerde, sizin HTML sayfalar oluştururken kullandığınız etiketlerdir.

En popüler tarayıcıları aşağıda listeledim (Favorim Google Chrome)

<!DOCTYPE> Tanımı

DOCTYPE tanımı, HTML sayfanın belge türünü belirler. Yani tarayıcının HTML sayfayı hangi sürümde yorumlayacağı, bu etikete bağlıdır.

Bu etiketi yazmak zorunlu çünkü tarayıcıların doğru şekilde çalışması için bu gereken bir standart. Her zaman sayfanın en üstünde tanımlanır.

<!DOCTYPE> tanımlanırken büyük-küçük harfe dikkat etmenize gerek yoktur, her iki türlüde geçerli olacaktır.

Şu an ki güncel HTML sürümü olan HTML5 için DOCTYPE tanımını aslında yukarıdaki ilk örneğimizde yazmıştık, şimdi tekrar edelim.

<!DOCTYPE html>

Tarayıcı bu tanıma göre sayfanın HTML5 standartlarına göre yazıldığını varsayarak yorumlayacaktır.

W3C Hakkında

Tim Berners-Lee, 1989'da CERN laboratuvarında HTML işaretleme dilini geliştirdikten sonra, W3C, yani ingilizce adıyla "World Wide Web Consortium", Türkçe adıyla "Dünya Çapında Ağ Örgütü"nü kurmuştur. Bu örgütün amacı, HTML'in ve CSS'in standartlarını belirlemektir.

Sorular (0)