HTML, Hyper Text Markup Language (Hiper Metin İşaretleme Dili) ifadesinin kısaltması olup, internet sayfalarını tasarlamakta kullanılan metin işaretleme dilidir. HTML standartları World Wide Web Consortium (W3C) tarafından belirlenmektedir. HTML dili kullanılarak kendi kendine çalışabilen programlar üretilemeyeceği için HTML tam olarak bir programlama dili sayılmaz. HTML ile yazılmış web sayfaları, web tarayıcılar tarafından yorumlanarak görsel hale getirilir. Bu sebeple web sayfalarının görünümü, kullanılan web tarayıcıya bağlı olarak farklılık gösterebilir

W3C, internet siteleri için standartları belirlemek amacıyla kurulmuş bir organizasyondur. WWW olarak da adlandırılır.

Sayfa Ön İzleme: Yazdığınız web sayfasının Internet Explorer, Firefox gibi internet tarayıcılarında ön izlemesini yapabilirsiniz. Bu amaçla, Internet Explorer ön izlemesi için (Ctrl+Alt+Shift+I) tuş kombinasyonunu, Firefox ön izlemesi için ise (Ctrl+Alt+Shift+X) tuş kombinasyonunu kullanmanız yeterli olacaktır. 

Hazırladığımız sayfadaki yazılara başlık koymak için kullanılan HTML etiketidir. <h1>, <h2>, <h3>, <h4>, <h5> ve <h6> şeklinde listenenmektedir. B etiketler arasında <h1> en büyük başlığı, <h6> ise en küçük başlığı göstermektedir.

Tasarladığımız web sayfasına paragraf içeriği eklemek için kullanılan HTML etiketidir. Her paragrafın başına <p> açma etiketini, sonuna ise </p> kapatma etiketini koymamız gerekmektedir. Her bir paragraf yeni satırda başlar.

Sayfamızda başka web sayfalarına bağlantı (link) vermek için kullanabileceğimiz HTML etiketidir. Vermek istediğimiz linkleri ve etiketleri arasına aşağıdaki gibi yazmalıyız. Burada dikkat edilmesi gereken husus, bağlantı verilirken hem bağlantı adresinin hem de ekranda yazmasını istediğimiz bilginin girilmesinin gerekli olduğudur.

Tasarladığımız web sayfasında bulunan metinleri biçimlendirmek için aşağıdaki etiketleri kullanabiliriz:

• <strong> etiketi: Metni daha kalınlaştırmak için kullanılır.
• <em> etiketi: Metni eğik (italik) hâle getirmek için kullanılır.
• <sub> etiketi: Metni alt yazı hâline getirir.
• <sup> etiketi: Metni üst yazı hâline getirir.
• <del> etiketi: Metnin üzerine çizgi çizer.
• <u> etiketi: Metnin altına çizgi çizer.
• <small> etiketi: Metnin fontunu küçültür.
• <big> etiketi: Metnin fontunu büyütür.
• <tt> etiketi: Metnin daktilo fontunda yazılmasını sağlar.
• <cite> etiketi: Metni alıntı olarak yazdığımızda bu etiketi kullanırız.
• <abbr> etiketi: Kısaltma şeklinde yazılan bir kelimenin tanımını verir,“title” özelli- ği ile yazılan bilgi fare imleci ile kısaltılmış kelimenin üzerine gelince tanım olarak ortaya çıkar.
• <br /> etiketi: Bu etiket boş etikettir. Bir satırlık boşluk oluşturmak için kullanılır.
• <hr /> etiketi: Bu etiket boş etikettir. Bir satırlık yatay bir çizgi oluşturmaya yarar.

Tasarlanan sayfalarda bilgileri bazen liste hâlinde sıralamak isteyebiliriz. HTML etiketleri arasında standart olarak Sıralı Liste ve Sırasız Liste şeklinde iki tip liste bulunmaktadır. Sıralı liste, adından da anlaşılacağı gibi her bir liste elemanının başına küçükten büyüğe doğru ilerleyen bir sembol (rakam, Romen rakamları, alfabetik) koyar. Sırasız liste ise her bir liste elemanının başına bir işaret koyar (içi dolu bir daire, içi boş bir daire, içi dolu ya da boş bir kare vb.).

Web sayfalarında tanım listeleri oluşturmak için kullanılır. Tanım listesi <dl> etiketlerinin arasında tanımlanır. Liste içerisinde alt başlık oluşturmak için <dt>, bu başlığa ait bilgi vermek için ise <dd> etiketi kullanılır. 

HTML programlama esnasında en çok kullanılan elemanlardan biri de tablolardır. Tablo, temel olarak satır ve sütunlara yerleştirilmiş hücrelerden oluşmaktadır. Tabloyu oluşturmak için <table> etiketini kullanmak gereklidir. Satır ve sütunlar ise <tr> ve <td> etiketleri ile oluşturulur.

Bazı durumlarda satır ve sütunları birleştirme ihtiyacı duyarız. Satır veya sütunları birleştirmek için <table> etiketinin “colspan” ve “rowspan” özelliklerinden faydalanmamız gereklidir. Sütunları birleştirmek için “colspan”, satırları birleştirmek için ise “rowspan” özelliği, birleştirilecek sütun ve/veya satır sayısı belirtilerek ayarlanır. Sıfır değeri verilirse, tüm satır ya da sütun birleştirilir. 

HTML5 standardı geliştirilirken web sayfasının yapısı semantik (anlamsal) web kavramını destekleyecek şekilde oluşturulmuştur. Bu amaçla yeni etiketler yaratılmadan önce, mevcut siteler üzerinden en çok kullanılan sınıf isimleri incelenmiştir. Yaklaşık 1 milyar web sayfası bu kapsamda taranmış ve bunlardan elde edilen istatistiklere göre yeni anlamsal etiketler oluşturulmuştur. HTML5 standardı, web sayfasının çeşitli yerlerinde kullanılmak üzere aşağıda listelenen anlamsal etiketleri desteklemektedir. Yeni geliştirilen bu etiketler sayesinde arama motorları daha anlamlı indekslemeler yapabilmektedir.

HTML5 sürümü ile gelen <details> ve <summary> etiketleri genelde birlikte kullanılırlar. <details>etiketi detay bilgilerini içerirken <summary> etiketi sayfanın ya da yazının özet bilgisini içerir.

HTML sayfalarında son kullanıcıya daha iyi bilgi verebilmek için görsel ögelere önem vermeliyiz. Arama motorlarının sitenizdeki görselleri indeksleyebilmesi için resminize bir tanımlamada bulunmalısınız, sitenize herhangi bir görsel eklediğinizde “alt” özelliğini belirten bir metin yazmak faydalı olacaktır. Resmin altına bir başlık eklemek istersek <figcaption> etiketini kullnamalıyız.

Web sayfası ile resim aynı klasörde olmalıdır. Aksi hâlde resmin tam adresini vermeniz gereklidir.

Video oynatmak için HTML5 içerisinde gelen standart video oynatıcıyı kullanmak mümkündür. Bu etiket sayesinde videoyu oynatmak için Flash/Medya oynatıcı gibi bir eklentiye ihtiyaç duymayız. Sayfamıza video oynatıcıyı eklemek için <video> etiketini kullanmamız gerekmektedir.

Video oynatıcının kontrol edebileceğimiz özellikleri aşağıda listelenmiştir.

• Autoplay özelliği sayesinde video hazır olur olmaz oynamaya başlar.

• Loop özelliği sayesinde video bittiğinde yeniden başlar.

• Muted özelliği yardımıyla, video ilk açıldığında sesi kapalı olup olmayacağı ayarlanır.

• Poster URL özelliği, video oynatılana kadar ekranda bir resim göstermemizi sağlar.

• Preload auto özelliği sayesinde, sayfa yüklendiğinde videonun yüklenip yüklenmeyeceğini ayarlayabiliriz. Üç farklı değer alabilir. Auto değerini aldığında otomatik olarak yüklenir ve video hazır olduğunda oynamaya başlar. Metadata değerini aldığında sadece videoya ait öznitelikler yüklenir. None değerini aldığında ise sayfa yüklendiğinde hiçbir dosya yüklenmez, kullanıcının oynatıcıyı çalıştırması ile yüklenmeye başlar.

• Src özelliği ile hangi videonun oynatılacağı belirlenir.

Web sayfamızda ses dosyası oynetmak için <audio> etiketini kullanmalıyız. HTML kodunda geçen “controls” ifadesi, ses oynatıcının kontrollerinin açık olarak kullanıcıya sunulacağını gösterir.

• Autoplay özelliği sayesinde ses dosyası hazır olur olmaz oynamaya başlar.
• Loop özelliği ile ses dosyası bittiğinde yeniden başlar.
• Muted özelliği ile ses dosyasının ilk açıldığında sesi kapalı olup olmayacağı ayarlanır.
• Preload özelliği ile sayfa yüklenir yüklenmez, ses dosyasının da yüklenip yüklenmeyeceğini ayarlayabiliriz. Üç farklı değer alabilir. Auto değerini aldığında otomatik olarak ses dosyası yüklenir ve hazır olduğunda oynamaya başlar. Metadata değerini aldığında sadece ses dosyasına ait öznitelikler yüklenir. None değerini aldığında ise sayfa yüklendiğinde hiçbir dosya yüklenmez, kullanıcının oynatıcıyı çalıştırması ile yüklenmeye başlar.
• Src özelliği ile hangi ses dosyasının oynatılacağı belirlenir.

Giriş alanından tarih seçmenize yardımcı olur. Bu özelliği kullanabilmek için giriş tipimizi <input type="date"> şeklinde ayarlamanız gerekir.

Kullanıcının tarih ve zaman seçmesini sağlayan giriş şeklidir. Bu giriş şeklini kullanabilmek için giriş tipini "datetime-local" olarak ayarlamak gerekir.

Giriş alanından bir elektronik posta alınması için kullanılır. İlk bakışta standart bir metin alanı gibi görünse de mobil web tarayıcıları için kendi sanal klavyelerinde “@” işaretinin çıkmasını sağlar. Bu giriş şeklini kullanabilmek için giriş tipini “email” olarak ayarlamak gerekmektedir.

Giriş alanından herhangi bir haftanın ve yılın seçilmesine olanak veren giriş tipidir. Bu giriş tipini kullanabilmek için giriş tipini “week” olarak ayarlamak gerekmektedir. 

Son kullanıcının telefon numarası girmesini sağlayan giriş tipidir. Bu giriş tipini kullanabilmek için giriş tipini “tel” olarak ayarlamak gerekmektedir. Standart giriş tipi gibi gö- rünse de mobil cihazların klavyelerinin otomatik olarak telefon çevirici ekran şeklinde ayarlanmasını sağlar.

Giriş alanı sayısal bir değer gerektirdiği zaman kullanılır. “min” ve “max” özelliklerinin değerlerini ayarlayarak hangi sayıların kabul edilebileceğini belirtebilirsiniz. Ayrıca “step” özelliğini ayarlayarak yukarı aşağı tuşlarına basıldığında değerin kaçar kaçar artacağını belirlemeniz mümkündür. Bu giriş tipini kullanabilmek için giriş tipini “number” olarak ayarlamak gerekmektedir.

Betik (script) programlama (genellikle JavaScript) yardımı ile grafik ve çizim alanları oluş- turmak için kullanılan etikettir.  elemanının herhangi bir özelliği yoktur. Yalnızca üzerine çizilebilir bir alan oluşturmaktadır. Bu giriş tipini kullanabilmek için giriş tipini “canvas” olarak ayarlamak gerekmektedir.

Bilinen bir aralık içindeki değeri görsel olarak verir. Etiketin içerisinden ayarlayabileceğimiz “min” ve “max” özellikleri ile elemanın alabileceği en küçük ve en büyük değerleri verebiliriz. Ayrıca,“value” özelliği ile o anki değeri girebiliriz.

Giriş elemanları için önceden tanımlanmış seçenekler listesini içerisinde barındırır ve bu liste içerisindeki elemanlara otomatik tamamlama özelliği verilmesini sağlar.

Bu etiket sayesinde sayfamızı görüntüleyen kullanıcının konumunu alabiliriz. Aşağıda verilen örnekte, “Koordinatı Al” butonuna tıklandığı zaman koordinatı almak istediğimiz için fonksiyonlar <script> etiketinin içine yazılmıştır. 

Konum bilgisini alabilmek için kullanıcının izni gerekmektedir.

CSS, İngilizce “Cascading Style Sheet” kelimlerinin baş harflerinden oluşan bir kısaltmadır. Dilimize “Basamaklı Stil Sayfaları” şeklinde çevrilebilir. CSS kullanarak HTML etiketlerinin renklerini, boyutlarını, arka plan rengi gibi birçok görünüm özelliğini değiştirebiliriz. CSS işaretleme dilini esnek ve kullanışlı kılan en önemli özellik, tek bir yerden tüm sayfayı etkileyebilecek stil değişikliklerini yapabilmemizdir. CSS tanımını değiştirdiğimizde tüm sayfalarda ilgili stil değişmiş olacaktır.

Metinlerin normal akışlarının dışında gazete veya dergilerde olduğu gibi çok kolonlu olarak gösterilmesini sağlar. Çoklu kolon oluşturmak ve düzenlemek için aşağıdaki özellikleri kullanabiliriz:

• column-count: Metnin kaç kolona bölüneceğini belirler.

• column-gap: Kolonlar arasında ne kadar mesafe olacağını belirler.

• column-rule: Kolonlar arasında çizgi olup olmayacağını belirler. • column-rule-color: Kolonlar arasındaki çizginin rengini belirler.

• column-rule-style: Kolonlar arasındaki çizginin şeklini belirler.

• column-rule-width: Kolonlar arasındaki çizginin kalınlığını belirler.

• column-width: Kolonların genişliğinin ne kadar olacağını belirler