HIZLI
TEKLİF AL
WEB TASARIM AJANSI TÜRKİYE

HTML Nedir?

  1. Anasayfa
  2. HTML Nedir?

HTML nedir? HTML'ye kısa bir giriş ile HTML5 yapısını ve DOM yapısını anlamaya çalışalım. HTML temelleri hakkında.

HTML Açılımı Nedir?

HTML açılımı (Hyper Text Markup Language) Yani Hiper Metin İşaretleme Dilidir ya da Köprü Metin İşaretleme Dili. Web siteleri oluşturabilmek için standart olarak herkes tarafından kullanılması zorunlu olan metin işaretleme ve biçimlendirme dilidir. HTML birçok dize ve öğeden oluşur ve web sitenin yapısını belirler. HTMl yapısı tarayıcıya içeriğin nasıl görüneceğini belirtir.

Chrome, Opera, Firefox, Safari, Edge gibi tüm tarayıcılar HTML yapısını okuyarak web sayfasını görüntülenmektedir. 
Web tasarım ve kodlamaya yeni başladıysanız ilk önce öğrenmeniz gereken kısım HTML olmalıdır. 
HTML öğeleri sayfa içeriğinin bir başlık mı, paragraf mı, resim mi yoksa link mi olduğunu tarayıcıya belirtir.

 

 

Sayfa Başlıkları

Basit HTML'nin Yapısına Değinelim

<!DOCTYPE HTML>  <!-- Bu kısım tarayıcıya dosyanın HTML5 Belgesi olduğunu belirtir. -->
<html>
<head>
<title>Sayfa Başlığı</title> <!-- Meta Title -->
</head>

<body>
<h1>Bu Bir Başlık Etiketi</h1> <!-- Başlık etiketi -->
<p>Bu bir paragraf</p> 
<a href=”#”>Bu Bir Link</a>
</body>

</html>

HTML yapısında etiketler “<etiket></etiket>” şeklinde kullanılmaktadır. body, html, title, h1, p, a, gibi birçok html etiketi vardır. <etiket> bu ifade etiketin başladığını belirtir ve bu ifade de </etiket> etiketin kapandığını belirtir. her etiket kendi adıyla açılır ve yine kendi adı ile kapanır.Bu temel kuraldır. İstisna olarak <br> <hr> gibi etiketler için </br> şeklinde kapanma etikleri uygulanmaz. Bu tarz istisnalar dışında tüm HTML etiketleri </Etiket-ismi> şekli ile kapanır

 

  • <!DOCTYPE html> → Bu ifade belgenin bir HTML5 belgesi olduğunu belirtir.
  • <html> →  html etiketi HTML5 Belgesinin kök elemanıdır.
  • <head> → head etiketi HTML sayfası hakkında meta bilgileri içerir.
  • <title> →  Title etiketi <head> alanı içerisinde bulunan meta başlığı temsil eder, Web sayfasının başlığını belirlemek için <head> alanı içerisinde <title>Sayfa Başlığı</title> belirtilmelidir. Ayrıca <title> da belirtilen sayfa başlığı tarayıcının sayfa sekmesinde ve Google, Yandex, Bing gibi arama motorları sonuç sayfasında kullanıcıya gösterilir. Başlık etiketi aynı zamanda SEO için de çok önemlidir.
  • <body> →  Body etiketini de belgenin ya da web sayfasının bedeni ve iskeleti olarak da düşünülebilir. <body></body> etiketleri arasında 
  • <h1>Ana Başlık</h1> → H1 etiketi web sayfasının en üst düzey başlığını yani ana başlığını ifade eder. <title>Meta Başlık</title> title etiketi ile aynı olması zorunlu değildir. Web sayfasında <h1> etiketi bulunması zorunlu değildir ancak SEO açısından oldukça önemlidir. Sayfanın konusunun ne hakkında olduğunu arama motorlarına bildirir.
  • <h2>Alt Başlık<h2>  → Alt başlık etiketi olan h2, h3,h4,h5,h6 etiketleri web sayfasında içeriklerin kategorize edilmesine ve parçalara ayrılarak kullanıcıya sunulmasını sağlar, Etkili ve düzgün kullanıldığında SEO ve UX açısında iyi bir performans elde edilir.
  • <p> → P etiketi de sayfadaki bir paragraf alanını simgeler.

 

Tarayıcılar HTML etiketlerini görüntülemez fakat onları sayfanın nasıl görüntüleneceğini belirlemek amacıyla referans alır.

 

<body> Bu Alan Sayfada Görünecektir</body>  Body alanı içerisinde yazılan içerikler web sayfasında görüntülecektir.

<head></head> Alanı içerisine yazılan içerikler ise sayfada görüntülenmez. Title, description ve css (Stil dosyaları) dosyaları <head> </head> alanı içerisine yazılır.

İlk HTML Sayfamızı Oluşturalım

<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>

<h1>İlk Başlığım</h1>
<p>İlk Paragrafım.</p>

</body>
</html>

Kodunuzun çıktısı bu şekilde olacaktır.

İlk HTML Sayfam

Tercih Akademi Tercih Akademi Anasayfa HTML Temelleri Sonraki Ders