Başlangıç

HTML Nedir?

HTML web sayfaları için standart işaretleme (markup) dilidir. HTML’in ilk versiyonu 1993 yılında Tim Berners-Lee tarafından oluşturulmuştur. HTML’in oluşturulduğu günden itibaren birçok versiyonu geliştirilmiştir.

Aşağıda en basit haliyle bir HTML belgesini görüyorsunuz.


HTML Versiyonları

  • HTML5
  • XHTML
  • HTML 4.01
  • HTML 4.0
  • HTML 3.2
  • HTML 3.0
  • HTML 2.0
  • HTML 1


HTML, Hyper Text Markup Language kelimelerinin kısaltmasından oluşur ve .html uzantısına sahiptir. HTML kodları tarayıcılar tarafından yorumlandıktan sonra görüntüsü oluşur. O yüzden bir tarayıcıda farklı diğer tarayıcıda farklı sonuçlar elde etmek mümkündür.



HTML ara yüzleri hazırlarken birçok editör kullanabileceğiniz gibi bilgisayarınızda bulunan en basit metin editörünü de kullanabilirsiniz. HTML sayfaları oluştururken başlangıç seviyelerinde çok ihtiyacınız olmasa da ilerleyen derslerde uzun sayfalar için yazdığınız kodları yazım düzenine göre şekillendirecek editörler kullanılabilir. Örneğin Visual Studio Code IDE’si için geliştirilmiş HTML ve CSS sayfaları düzenli hale getirerek daha açık ve anlaşılır kod yazmanıza yardımcı olacaktır.

HTML nesneleri <> bloğu içerisine yazılan etiketlerden oluşur. HTML etiketlerinin özellikleri vardır. Bu özellikler isim ve değer çiftlerinden oluşur. Bu özellikler etiketlerle ilgili ek bilgileri tanımlamak için kullanılır. Örneğin: <meta charset=”utf-8”/> meta etiketinin özelliği olarak charset=”utf-8” tanımlanmıştır.


HTML Doküman Yapısı

HTML dokümanı ana olarak iki bölümden oluşur bunlar head ve body bölümleridir. HTML’ye Giriş ve Temel HTML Yapısı dersimizde bu konuya temel olarak değineceğiz. Head bölümünde sayfada görünmeyen ancak sayfa ile ilgili ayar etiketlerinin yer aldığı bölümdür. Body bölümünde ise sayfanın içeriğini oluşturan etiketler yer almaktadır.

Tüm HTML dokümanları tanımlanırken doküman tipi tanımlanarak başlanmalıdır. <!DOCTYPE html> HTML doküman <html> etiketiyle başlar ve </html> ile biter.

Html dokümanının sayfa içeriğini oluşturan, görünen kısmı <body> </body> etiketinin içerisine oluşturulur.


HTML Temel Etiket Yapısı

Etiketleri oluştururken temel HTML kodlarındaki unsurlardan biri HTML etiketleri birbirlerini kesmeyecek şekilde kapanır. Yani bir HTML etiketi açıldıktan sonra o etiket ya önce kapatılır ya da içerisindeki nesneyi tamamen kapsar.

HTML etiketlerinde her bir etiket için ayrı özellikler tanımlıdır. Örneğin <img> etiketi kaynağı tanımlamak için src , alternatif metin için alt , boyutlandırmaları için ise width ve height özelliklerini alabilir.

HTML etiketlerinin özelliklerine değer verirken değerleri çift tırnak içerisinde verilmesi önerilir. Bu sayede arasında boşluk veya özel karakter olan değerler de rahatlıkla görüntülenebilmektedir.


HTML Etiketleri

HTML etiketlerini ana olarak iki başlık altında sunabiliriz. Bunlar Blok Seviyesi HTML Etiketleri ve Satır Arası HTML Etiketleridir. Blok Seviyesi HTML Etiketleri her zaman yeni bir satır ekleyerek ve tam genişliğe sahip olarak sayfada yer alır. Satır Arası HTML Etiketleri yeni satır eklemeden sayfada yer alır ve sadece gerekli olacak kadar genişliğe ulaşır yani içeriğinin uzunluğuna göre kendi uzunluğu da değişiklik gösterir.

HTML e başlarken en sık sorulan sorulardan biri ise HTML kodları nerede oluşturmalıyım. Bu kodlar nereye yazılacak ve nasıl kaydedilecek oluyor.

Nasıl kaydedeceğimizi okumuştuk. Uzantımız .html olacak

Nerede yazacağız sorusuna gelirsek en basiti not defteri yada notepad tir. Yada online olarak kullanabileceğiniz pek çok editör site mevcut.

Güzel bir Gövde oluşturup içerisine başlık içerik ve resim ekleyelim.



HTML sayfalar hazırlarken satır arası ve blok seviyesi HTML etiketleri istediğimiz ara yüzleri elde etmek için tek başına yeterli değildir. HTML sayfaları görsel olarak da zenginleştirmek için CSS yani basamaklı stil şablonuna da ihtiyaç duyacağız. CSS kodları temel olarak üç biçimde yazılabilir; satır arası, sayfa içerisine, harici dosyaya.