HTML Nedir? HMTL Kodlama Nasıl Yapılır?

Web tasarım konusunda araştırma yapan hemen herkesin karşına çıkan temel kavram HTMLdir. Web sayfalarını oluşturma aşamasında kullanılan standart bir metin işaret dili olan HTML açılımı “Hyper Text Markup Language” olarak bilinir. Genel bilinen yanlış kanının aksine HTML bir programlama dili değildir. Daha açık anlatmak gerekirse, Chrome, Firefox, Yandex gibi tarayıcıların okuyup anlamlandırdığı dil HTML dilidir.


HTML Ne İşe Yarar?

HTML, web tasarımcılarına sayfalar ve uygulamalar için yapı profilleri, bağlantılar, blok alıntılar, paragraflar ve başlıklar oluşturmalarında yardımcıdır. Bu konuda basit kod yapıları olan etiketler ve nitelikler kullanılarak web sayfaları şekillendirilebilir. HTML için aslında bir web sitesinin iskeleti denilebilir. Yani HTML kodları olmadan web sitesi kodlanamaz.

Web sitesi ve sayfaları oluşturulurken mutlaka kullanılması gereken HTML, yeni başlayanlar için öğrenmesi en kolay biçimleme dillerinden biridir. HTML dersleri alarak sistemli bir çalışma için kendinizi geliştirebilir, öğrendiğiniz bilgileri web sayfası tasarlama aşamasında deneyebilirsiniz. Zamanla sahip olduklarınızdan fazlasını öğrenebilir ve web sitesi tasarlama konusunda söz sahibi olabilirsiniz.



En Çok Kullanılan HTML Kodları

HTML kodları, bir web sayfasının yapısını oluşturan parçacıklardır. Kullanılan kod ne olursa olsun tümü “<” ile başlar ve “>” ile bitmek zorundadır. Bazı basit HTML kodlarını daima bilmeniz gerekir. Hazırladığınız web sayfalarında bu kodları birden fazla yerde kullanmanız gerekecektir. Ancak öncesinde temel bir HTML belge yapısının nasıl olması gerektiğini bilmeniz gerekir. Buna göre;

<!DOCTYPE html>: Tüm HTML belgeleri bu kod ile başlamak zorundadır. Bu kod aslında sayfanın HTML5 formatına göre kodlandığını gösterir.

<html>: Kök etiket olarak da bilinen bu temel kullanımda tüm HTML kodları, bu iki etiket arasında tanımlanmak zorundadır.

<body>: Görünebilir tüm HTML kod parçalarının eklendiği etiket alanıdır.

<head>: Web sayfasının dili, başlığı ve diğer düzenlemelerinin yer aldığı etikettir.

<title>: Web sitesinin başlık alanını tanımlamak için kullanılır. <title> etiketi, <head> etiketleri arasında olmak zorundadır.

<meta charset=”utf-8″>: HTML kodunun Türkçe karakter desteği dahil olmak üzere pek çok dil seti içerdiğini belirtir.


  • Başlık Kodu (Hx)

Web sayfanızdaki içeriği okunabilir parçalara bölmenizi sağlayan unsur başlıklardır. HTML temelde 6 başlık ögesini destekler. Bunlar H1, H2, H3, H4, H5 ve H6‘dan oluşur. Örnek kullanım şekli şu şekilde gösterilir:

  • <h1>Birinci başlık</h1>
  • <h2>İkinci başlık</h2>
  • <h3>Üçüncü başlık</h3>
  • <h4>Dördüncü başlık</h4>
  • <h5>Beşinci başlık</h5>
  • <h6>Altıncı başlık</h6>
  • Paragraf Kodu (<p>)

Metin içerisindeki paragrafları oluşturmanızı sağlayan koddur. İçerik bölümlerini ayırırken aralarında <br> kodu eklenerek metin paragrafları oluşturulabilse de <p> kodunun kullanılması tavsiye edilir. Arama motorlarını ve tarayıcıları sayfa yapısı hakkında bilgilendirir.




  • Satır Sonu Kodu (<br>)

Web sayfasındaki metni yatay olarak bölmeye yarayan HTML kodudur. Kullanıldığı yerde metin bir alt satırdan devam eder. Diğer bir deyişle <br/> kullanıldığında, takip eden tüm kelimeler alt satırdan devam eder.

  • Resim Kodu (<img>)

<img> kodu, görüntüleri web sayfasına eklemek için kullanılır. Web sayfasına resim eklemek istediğinizde önce web sunucusuna yükleyin. Daha sonra yüklenen resmin dosya adına başvuru yapmak için bir <img> etiketi kullanabilirsiniz.

  • Buton Kodu (<button>)

HTML buton kodu, sayfalarınızı ilgi çekici yapmak ve etkileşimli içerikler oluşturmak için kullanılır. JavaScript ve HTML renk kodları ile daha güçlü hale gelen bu kod, içeriklerinizde kullanıcılarla etkileşime girmenizi sağlar.


  • Bağlantı Kodu (<a>)

Önemli HTML link verme kodlarından biri olan <a> kodu ile diğer içerikleriniz arasında da bağlantılar oluşturabilirsiniz. Bağlantı oluşturmak için, bağlantı kurmak istediğiniz içeriğin çevresine <a> ve </a> etiketleri sarmanız gerekir. 

  • Yatay Çizgi Kodu (<hr>)

Sayfa bölümlerini görsel olarak ayırmada yatay çizgi kodları kullanılır. Bu kod, sayfadaki geçerli konum üzerinden sağ kenar boşluğu arasında bir çizgi oluşturur. Böylece kelime veya cümle grupları yatay çizgiyle ayrılır.

HTML ile CSS ve JS Arasındaki Bağlantı Nedir?

HTML site tasarlama konusunda gerçekten güçlü bir dil olsa da, profesyonel ve güçlü sonuçlar almada tek başına yeterli değildir. Belirli kodlar kullanılarak yalnızca metin parçaları eklenebilir ve içerik yapısı değiştirilebilir. Fakat HTML ile birlikte CSS ve JavaScript gibi iki frontend dil kullanılırsa, muhteşem bir uyum yakalanır.

HTML ile birlikte CSS ve JS kullanılması demek, sağlam bir temel üzerine eklenecek gelişmiş işlevler ve zengin bir kullanıcı deneyimi oluşturma anlamına gelir. HTML arka plan, renk, tasarım, boşluk ve animasyon için CSS’den yardım alırken; slider, fotoğraf galerileri ve açılır pencereler gibi dinamik işlevsellikler için JavaScript ile birlikte uyum içinde çalışır.

HTML5 Nedir?

Çıktığı günden bu yana sürekli geliştirilen yeni özellik ve eklentiler eklenen HTML sürümleri sürekli yeni güncellemeler ile tarihsel olarak kendi özel isimleri ile anılmıştır. Günümüzde HTML olarak bilinen HTML 4, 1999 yılında yayınlanmış ve oldukça beğeni toplamıştı. Ancak daha sonra HTML 5 güncellemesi geldiğinde, beraberinde pek çok yenilik getirdiği görüldü.


HTML5’in en popüler özelliklerinden biri gömülü haldeki ses ve videolara verdiği dahilî destektir. Yıllardan beri kullanılan flash oynatıcı kullanmaya gerek kalmadan, gömülü ses ve video dosyaları web sitesine <audio> </audio> ve <video> </video> kodları eklenerek kullanılabilir. Benzer şekilde SVG (scale vector graphics) ve matematiksel formüller için de MathML desteği sunar.

HTML5’i diğerlerinden ayıran bir başka özellik de çeşitli anlamsal düzeltmelere sahip olmasıdır. Yani, web sayfasındaki içeriğin anlamı konusunda hem tarayıcıları hem de arama motorlarına bilgilendirerek web sitesinin indekslenmesine yardımcı olur. En çok kullanılan anlamsal kodlar <article> </article, <header> </header>, <aside> </aside> ve <footer> </footer> etiketleridir.



HTML Artıları ve Eksileri

HTML Artıları

  • Tüm internet tarayıcılarında doğal (native) olarak çalışabilme,
  • Kolay öğrenebilme,
  • Açık kaynak koduna sahip olma,
  • Tamamen ücretsiz olma,
  • Çok sayıda kaynağa sahip olan devasa bir dil seçeneği sunma,
  • World Wide Web Consortium (W3C) gibi resmî web standartları tarafından denetlenebilme,
  • İstikrarlı ve düzgün biçimleme sunma,
  • Node.js ve PHP gibi backend dilleri ile uyum içinde çalışabilme.


HTML Eksileri

  • Bazı tarayıcılar HTML kod sistemine eklenen yeni özellikleri tanımakta yavaş kalabilir.
  • HTML, kullanıcıya mantık ekleyebilme imkânı vermez. Bu nedenle aynı ögelere (footer ve başlıklar gibi) sahip olunsa dahi fark etmeksizin tüm web siteleri ayrı ayrı oluşturulur.
  • Sıklıkla statik durumdaki web sayfaları için kullanıldığından, dinamik işlemleri gerçekleştirmek için PHP, CSS ya da JavaScript gibi ayrı bir backend dili kullanılması gerekir.

Bunların dışında HTML hakkında bilinmesi gerekenler şunlardır:

  • HTML bir programlama dili değil, bir işaretleme dilidir.
  • HTML dosya uzantılarının .html ya da .htm şeklinde yazılması gereklidir.
  • HTML kodlarının yazımı için Notepad, Notepad++ ya da Sublime Text gibi editörler kullanılabilir.
  • HTML iyice öğrenildikten sonra mutlaka bilinmesi gereken diğer bir program CSS olmalıdır. HTML kodlarının ilgili tarayıcıda okunan şekline stil vermek için çoğunlukla CSS programı kullanılır.
  • HTML, CSS ve JS ile web sitesi tasarlanabilir.Ancak dinamik ve daha kaliteli hale getirmek için ASP.net, JAVA gibi diller de kullanılmalıdır.