HTML Nedir?
HTML; web sayfalarını yapısını oluşturmak için kullanılan bir işaretleme dilidir. HTML açılımı ise HyperText Markup Language’dir. İnternetin en temel yapı taşlarından biri olarak dil, web sayfalarının düzenini ve içeriklerini belirlemek için HTML etiketleri (tags) aracılığıyla kullanılır. Bu noktada her etiketin farklı bir ögeyi ya da işlevi tanımlama görevi bulunur.
Web sitelerinin yapılandırılması ve içeriklerin tarayıcılar tarafından doğru şekilde algılanmasını sağlayan söz konusu dil; metin, görsel, bağlantı, liste ve diğer içerik türlerini destekler. Yazılan HTML kodları ise .html ya da .htm formatındaki dosyalar olarak saklanır.
HTML’in Temel Yapısı
HTML yapısı, sayfa iskeletini meydana getiren ve tarayıcıların içerisi doğru şekilde görmesine imkan tanıyan belli etiketlerden oluşur. Söz konusu etiketlerle ilgili detaylar ise aşağıdaki gibidir:
- Her dosya <!DOCTYPE html> ile başlar. Söz konusu satır, HTML5 uygunluğunu gösterir.
- Dosyaların başında ve sonunda <html> etiketi bulunur. Bu kapsamda içerikler <html> etiketiyle açılır ve </html> ile kapatılır. Dolayısıyla HTML dosyası açma ve kapatma için ilgili etiket kullanılır.
- HTML head etiketi, <head> olarak belirtilir. Meta bilgileri, karakter seti tanımlamaları, stil ve script dosyalarının bağlantıları gibi üst bilgileri içerir.
- HTML body etiketi, <body> biçiminde gösterilir. İlgili etikette kullanıcıların internet tarayıcısında gördüğü metinler, görseller, listeler ve diğer bileşenler yer alır.
- Başlık ise <title> ile gösterilir.
Bunlara ek olarak paragraf, başlık türleri, bağlantılar ve listeler için farklı etiketler kullanılır. İlgili kullanımlara ilişkin bazı HTML örnekleri arasında ise <p> paragraf, <h1> ile <h6> başlıklar, <a> bağlantılar, <ul>, <ol>, <li> yer alır. Ayrıca temel HTML bilgileri ve düzenine göre her etiketin hem <isim> şeklinde açılması hem de </isim> olarak kapatılması gerekir.
HTML Ne İşe Yarar?
HTML; web sitelerinin yapısını oluşturma, içerik-görsel yerleştirme, bağlantı verme, navigasyon, SEO, erişilebilirlik, formlar ve kullanıcı girişi sağlama gibi farklı işlevlere sahiptir. Söz konusu işlevlere ilişkin detaylar ise aşağıdaki gibidir:
Web Sayfalarının Yapısını Oluşturur
Web sayfalarının yapısını oluşturmak dilin en yaygın kullanım amacıdır. Bu noktada başlıklar, paragraflar, tablolar ve listeler gibi ögeler uygun etiketler kullanılarak yapılandırılır. HTML ile site yapımı sürecinde söz konusu etiketler ise kritik bir öneme sahiptir. Bunun yanı sıra bireylerin tarayıcılar üzerinden içeriği doğru olarak görüntülemesini sağladığı gibi kullanıcı deneyiminin iyileştirilmesine de katkıda bulunur. Kodlar, içeriğin hiyerarşik ve düzenli şekilde sunulmasını da sağlar.
İçerik ve Görselleri Yerleştirir
Web sitelerinin içerisinde bulunan görseller, içerikler, videolar ve diğer multimedya ögelerinin yerleştirilmesinde de söz konusu kodlama dili kullanılır. Bu bağlamda HTML görsel ekleme için <img> etiketinden yararlanılır. Yerleştirilecek ögenin türüne bağlı olarak uygun etiketler yazılır.
Video ve görsel yerleştirme imkanı tanıması da hem sayfaların hem de sitelerin içerik açısından zenginleşmesini sağlar. Böylece kullanıcı deneyiminin iyileşmesi desteklenir.
Bağlantılar ve Navigasyon
Web sitelerindeki bağlantı ve navigasyonlar, kullanıcıların sayfalar arasında kolay bir şekilde gezinmesini sağlar. Bu çerçevede HTML bağlantı verme işlevini de yerine getiren bir kodlama dilidir. Bağlantı içinse <a> etiketinden yararlanılır.
Oluşturulan bir içeriğin farklı noktalarına yerleştirilen bağlantılar ve navigasyon butonları ile ziyaretçilerin site içerisindeki ya da dışındaki farklı sayfalara hızlı şekilde ulaşması sağlanır. Böylece içeriği incelerken kullanıcılar, ihtiyaç duyabilecekleri farklı bilgilere ve ögelere hızlı şekilde ulaşır.
Formlar ve Kullanıcı Girdisi
HTML form yapısı oluşturmaya imkan tanıyan bir dildir. Bu bağlamda oluşturulan formlar üzerinden kullanıcılardan veriler toplanır. Toplanan veriler sunucuya gönderilerek depolanır ya da işlenir. Söz konusu süreçte <form>, <button> ve <input> gibi farklı etiketlerden yararlanılır. Web sitesinde üyelik açma, başvuru yapma, bilgileri verme gibi amaçlarla da formlar oluşturulabilir.
SEO ve Erişilebilirlik
HTML özellikleri arasında SEO ve erişilebilirliğe katkıda bulunması da yer alır. Bu çerçevede doğru etiketler ve yapılandırmalar kullanılarak sitelerin arama motorlarındaki görünürlükleri artırılır. Kullanılan HTML DİV yapısı, arama motoru botları tarafından sayfanın ya da içeriğin hiyerarşik yapısının algılanmasını sağlar. Böylece içerik botlar için çok daha anlamlı hale gelir. Ayrıca kullanılan HTML semantik etiketler içeriğin botlar ve geliştiriciler için daha anlaşılır olmasına destek olur. Örneğin; <header>, <footer>, <article>, <section> ya da <nav> gibi etiketlerle sitedeki bölümler tanımlanır.
CSS ve JavaScript ile Entegrasyon
Sitelerin hem dinamik işlevselliğinin hem de stilinin sağlanması için JavaScript ve CSS ile birlikte HTML kullanılır. Bu doğrultuda JavaScript, sayfanın dinamik ve etkileşimli bir yapıda olmasına imkan tanır. CSS ise içeriğin düzeninin ve görünümünün kontrol edilmesini sağlar. İlgili süreçte HTML renk kodları gibi farklı etiketlerden de yararlanılır.
HTML Nasıl Öğrenilir?
İlgili kodlama dilinin öğrenilmesine ilişkin pek çok kaynak mevcuttur. Bu aşamada ilk olarak kaynaklar arasından güvenilir ve kaliteli olanlar tercih edilerek öğrenme sürecine başlanır. Ancak sadece video izleyerek ya da kodları ezberleyerek hipermetin öğrenmek oldukça zordur. Bunun yerine uygulamalı yöntem tercih edilmelidir.
Öğrenilen her bilgi, uygun yerlerde uygulanır ve etkileri gözlenir. Örneğin; HTML metin biçimlendirme ile ilgili kodlar bir sayfa tasarımında kullanılabilir. Bu sayede işlevlerin çok daha doğru ve kalıcı şekilde öğrenilmesi mümkün olur.
Sistematik ve proje tabanlı öğrenme en etkili yöntemlerden biri olarak öne çıkar. Bu çerçevede öğrenilen bilgilerin küçük projelerde hayata geçirilmesi sonucun net olarak görülmesine de olanak tanır. İlerleyen süreçlerde daha kapsamlı HTML sayfa tasarımı ya da düzenlemeleriyle farklı bilgiler birlikte kullanılır. Böylece öğrenilenler pekiştirilerek farklı kullanımları deneyimlenir.
HTML Nerelerde Kullanılır?
Web sitesi kurmak en yaygın HTML kullanımı alanı olarak öne çıkar. Sitedeki detayların önemli kısmında hipermetin kodları mevcuttur. Bu bağlamda başlıklar, paragraflar, görseller, videolar, multimedya ögeleri ya da benzeri türden diğer bileşenlerin hem oluşturulması hem de konumlandırılmasında HTML elementleri ve kodları kullanılır. Diğer kullanım alanları ise aşağıdaki gibidir:
- Formlar ve kullanıcı girişleri bir diğer yaygın kullanım alanıdır. Kullanıcı adı, şifre ve onay kutuları gibi elemanların oluşturulmasını sağlar. HTML table kullanımı (<table>) ile sayfalara tablo eklenir.
- Zengin metinler, bağlantılar ve görseller içeren e-postaların oluşturulmasında rol alır.
Yukarıdaki unsurların yanı sıra HTML, web uygulamaların yapımında da diğer kodlama dilleriyle birlikte kullanılır.
HTML Yazarken Nelere Dikkat Edilmelidir?
Kod yazmaya başlamadan önce anlamlarını ve işlevlerini doğru olarak bilmek temel bir kuraldır. İlgili kurala uyulmadan izlenen HTML yapım aşamaları sonucunda onlarca satırdan oluşan anlamsız kodlar ortaya çıkabilir. Süreçte dikkat edilmesi gereken diğer hususlar ise aşağıdaki gibidir:
- En üst satıra <!DOCTYPE html> eklenerek kod yazılmaya başlanır.
- Sayfanın hangi dilde olacağının belirtilmesi SEO ve tarayıcılar açısından yararlıdır. Örneğin; Türkçe için <html lang=”tr”> etiketi eklenmelidir.
- Etiketler <tagismi> ile açılır, </tagismi> ile kapatılır.
- Kodlarda Türkçe karakterler kullanılmaz. Ancak kodlar arası metinlerde Türkçe karakterlerin kullanımı mümkündür.
Bahsedilen basit hususlara dikkat edilerek kod yazımı sorunsuz olarak tamamlanır.
HTML’in Gelişimi ve Geleceği
Hipermetin dili 1990 yılında geliştirilmiş ve yıllar içerisinde farklı sürümleri kullanıma sürülmüştür. Son olarak 2014 yılında HTML5 tanıtılmış ve dilin dijital dünyada çok daha etkin olması sağlanmıştır. Bunun yanı sıra yeni semantik etiketler, multimedya desteği ve yüksek performans gibi özellikler sayesinde web geliştirme alanında devrim yaşanmıştır. Değişen ihtiyaçlara bağlı olarak gelecekte de benzeri geliştirmeler olabileceği tahmin edilir.
