HTML (Hypertext Markup Language), bir HTML dosyasının içeriğinin nasıl yapılandırıldığını açıklamaya yönelik metin tabanlı bir yaklaşımdır. Bu işaretleme, bir web tarayıcısına bir sayfadaki metin, resimler ve diğer multimedya türlerinin nasıl görüntüleneceğini söyler. HTML, World Wide Web Consortium (W3C) tarafından resmi olarak tavsiye edilen bir dildir ve hem masaüstü hem de mobil web tarayıcıları dahil olmak üzere tüm büyük web tarayıcıları tarafından genellikle uyulmaktadır. HTML5, bu spesifikasyonun en son sürümüdür.
HTML Nasıl Çalışır
HTML, belirli sözdizimi, dosya ve adlandırma kurallarını içeren bir metin dosyasıdır ve bilgisayara ve web sunucusuna HTML olduğunu ve bu şekilde okunması gerektiğini gösterir. Neredeyse her metin düzenleyicide bir metin dosyasına bu HTML kurallarını uygulayarak, bir kullanıcı temel bir web sayfası yazabilir ve tasarlayabilir ve ardından internete yükleyebilir.
HTML kurallarının en temel olanı, metin dosyasının başında bir belge türü bildirisinin dahil edilmesidir. Bu her zaman belgedeki ilk satır olmalıdır, çünkü bu parça bilgisayara kesin bir şekilde bu dosyanın bir HTML dosyası olduğunu bildirir. Belge başlığı genellikle şu şekilde görünür: <!DOCTYPE html>. Bu şekilde, içeride herhangi bir içerik olmadan veya bölünmeden yazılmalıdır. Bu bildiriden önce gelen herhangi bir içerik, bilgisayar tarafından HTML olarak tanınmayacaktır. Belge türü bildirimleri sadece HTML için değil, SGML (Standard Generalized Markup Language) kullanan herhangi bir belge için de geçerlidir. SGML, kullanılan belirli bir işaretleme dilini belirlemek için bir standarttır. HTML, SGML ve belge türü bildirimlerinin uygulandığı birkaç işaretleme dilinden biridir.
Bir HTML dosyası oluşturmak için diğer kritik gereklilik, dosyayı .html dosya uzantısı ile kaydetmektir. Belge türü bildirimi dosyanın içinden bilgisayara HTML sinyali verirken, dosya uzantısı dosyanın dışından HTML sinyali verir. Her ikisine sahip olarak, bir bilgisayar dosyayı okuyup okumadığına bakılmaksızın bunun bir HTML dosyası olduğunu anlayabilir. Bu, dosyaları web’e yüklerken özellikle önemlidir, çünkü web sunucusunun dosyaları istemci bilgisayara göndermeden önce ne yapacağını bilmesi gerekir.
Belge türünü yazıp HTML dosyası olarak kaydettikten sonra, kullanıcı bir web sayfasını özelleştirmek için HTML’nin diğer sözdizimsel araçlarını uygulayabilir. İşlem tamamlandığında, muhtemelen web sitesinin çeşitli sayfalarına karşılık gelen birkaç HTML dosyasına sahip olacaklardır. Bu dosyaları, kaydettikleri aynı hiyerarşide yüklemeleri önemlidir, çünkü her sayfa, diğer sayfaların belirli dosya yollarına referans verir ve bu, sayfalar arasındaki bağlantıları etkinleştirir. Dosyaların farklı bir sırayla yüklenmesi, bağlantıların kopmasına ve sayfaların kaybolmasına neden olacaktır, çünkü belirtilen dosya yolları sayfalarla eşleşmeyecektir.
HTML’nin Temel Öğeleri
HTML kullanarak, bir metin dosyası, belgenin nasıl görüntülenmesi gerektiğini açıklayan ek metinle daha da işaretlenir. İşaretlemeyi HTML dosyasının gerçek içeriğinden ayrı tutmak için özel, ayırt edici bir HTML sözdizimi kullanılır. Bu özel bileşenler HTML etiketleri olarak bilinir. Etiketler, ad-değer çiftleri olarak bilinen öznitelikleri içerebilir ve bir etiket içinde yer alan bir içerik parçası, HTML öğesi olarak adlandırılır. HTML öğeleri her zaman açılış etiketlerine, ortada içeriğe ve kapanış etiketlerine sahiptir. Öznitelikler, öğe hakkında ek bilgi sağlayabilir ve açılış etiketine dahil edilir. Öğeler iki şekilde tanımlanabilir:
Blok düzeyinde öğeler, belgede yeni bir satırda başlar ve kendi alanlarını kaplar. Bu öğelere örnek olarak başlıklar ve paragraf etiketleri verilebilir.
Satır içi öğeler, belgede yeni bir satırda başlamaz ve yalnızca gerekli alanı kaplar. Bu öğeler genellikle blok düzeyinde öğelerin içeriğini biçimlendirir. Satır içi öğelere örnek olarak bağlantılar ve metin biçimlendirme etiketleri verilebilir.
Yaygın Olarak Kullanılan HTML Etiketleri
HTML etiketleri, bir sayfanın genel yapısını ve içlerindeki öğelerin tarayıcıda nasıl görüntüleneceğini belirler. Yaygın olarak kullanılan HTML etiketleri şunlardır:
- <h1>: En üst düzey başlığı tanımlar.
- <h2>: İkinci düzey başlığı tanımlar.
- <p>: Bir paragrafı tanımlar.
- <table>: Tablo verilerini tanımlar.
- <ol>: Sıralı bir bilgi listesini tanımlar.
- <ul>: Sırasız bir bilgi listesini tanımlar.
Belirtildiği gibi, açılış ve kapanış etiketleri, artırdıkları içeriği çevreler. Bir açılış etiketi şu şekilde görünür: <p>. Bir kapanış etiketi ise aynı olup, verilen HTML öğesinin sonunu belirtmek için içinde bir eğik çizgi içerir. Kapanış etiketleri şu şekilde görünür: </p>.
HTML Kullanımı ve Uygulaması
HTML tamamen metin tabanlı olduğundan, bir HTML dosyası Notepad++, Vi veya Emacs gibi bir programda açılarak düzenlenebilir. Herhangi bir metin düzenleyici, bir HTML dosyası oluşturmak veya düzenlemek için kullanılabilir ve .html dosya uzantısıyla adlandırıldığı sürece, Chrome veya Firefox gibi herhangi bir web tarayıcısı dosyayı bir web sayfası olarak görüntüleyebilir.
Profesyonel yazılım geliştiriciler için, web sayfaları geliştirmek için çeşitli WYSIWYG (What You See Is What You Get) düzenleyicileri vardır. Netbeans, IntelliJ, Eclipse ve Microsoft’un Visual Studio’su, WYSIWYG düzenleyicilerini eklenti olarak veya standart bileşenler olarak sunar, bu da HTML’yi kullanmayı ve uygulamayı inanılmaz derecede kolaylaştırır.
Bu WYSIWYG düzenleyicileri aynı zamanda HTML sorun giderme olanakları da sağlar, ancak modern web tarayıcıları genellikle HTML sayfalarındaki eksik kapanış etiketi veya iyi biçimlendirilmiş HTML oluşturmayan sözdizimi gibi sorunları vurgulayan web geliştirici eklentileri içerir. Chrome ve Firefox, bir web sayfasının tam HTML dosyasını hemen görüntüleme, HTML’yi anında düzenleme ve değişiklikleri internet tarayıcısında hemen uygulama olanağı sağlayan HTML geliştirici araçları içerir.
HTML, CSS ve JavaScript
HTML, web sayfaları oluşturmak için kullanılır, ancak tamamen duyarlı bileşenler söz konusu olduğunda sınırlamalar yaşar. Bu nedenle, HTML yalnızca metin öğeleri eklemek ve bunları bir sayfa içinde yapılandırmak için kullanılmalıdır. Daha karmaşık özellikler için HTML, stil şablonları (CSS) ve JavaScript (JS) ile birleştirilebilir.
Bir HTML dosyası, bir stil şablonuna veya JS dosyasına — genellikle belgenin üst kısmında belirtilen bir dosya yoluyla — bağlantı verebilir; bu dosya, hangi renklerin kullanılacağı, hangi yazı tiplerinin kullanılacağı ve diğer HTML öğesi oluşturma bilgilerini içerir. JavaScript ayrıca geliştiricilerin web sayfasında açılır pencereler ve fotoğraf slayt gösterileri gibi daha dinamik işlevsellikler eklemelerine olanak tanır. HTML öğelerini karşılık gelen CSS veya JS öğelerine eşlemek için class öznitelikleri adı verilen etiketler kullanılır.
Örneğin, bir kullanıcı belirli bir miktardaki metnin kırmızı olmasını istiyorsa, CSS dosyasına metni kırmızıya çeviren bir class özniteliği ile kod yazabilir. Daha sonra, HTML dosyasındaki kırmızı olmasını istedikleri metin parçalarına ilgili class özniteliğini yerleştirebilirler. Aynı temel yöntem, farklı işlevlerle JS dosyaları için de geçerlidir. Bir sayfanın nasıl yapılandırıldığının bilgisi olan HTML ile bir web sayfasının bir tarayıcıda oluşturulduğunda nasıl görüneceğine dair bilgiyi ayırmak, endişelerin ayrılması olarak bilinen bir yazılım geliştirme modeli ve en iyi uygulamadır.
Tarihçe ve Gelişim
World Wide Web’in ilk günlerinde, HTML sözdizimi kullanarak metin tabanlı belgeleri işaretlemek, akademik belgelerin ve teknik notların paylaşılmasını kolaylaştırmak için fazlasıyla yeterliydi. Ancak, internet akademi dışındaki duvarlardan çıkarak genel nüfusun evlerine girdiğinde, web sayfalarına formatlama ve etkileşim açısından daha büyük bir talep geldi.
HTML 4.01, 1999’da, internetin henüz evlerde yaygın olmadığı bir dönemde yayınlandı ve HTML5, 2014’e kadar standartlaştırılmadı. Bu süre zarfında, HTML işaretlemesi, web sayfası içeriğinin belge yapısını basitçe tanımlamaktan, aynı zamanda içeriğin bir web sayfasında görüntülendiğinde nasıl görüneceğini tanımlama rolüne doğru kaydı.
Sonuç olarak, HTML4 tabanlı web sayfaları, bir etiket içinde, metni görüntülerken hangi yazı tipinin kullanılacağı, arka plan için hangi rengin kullanılacağı ve içeriğin nasıl hizalanacağı gibi bilgileri sıklıkla içeriyordu. Bir HTML etiketinde, bir HTML öğesinin bir web sayfasında oluşturulduğunda nasıl biçimlendirileceğini tanımlamak, bir HTML antipattern olarak kabul edilir. HTML genellikle içeriğin nasıl yapılandırıldığını tanımlamalıdır, nasıl stillendirileceğini ve bir tarayıcıda nasıl oluşturulacağını değil. Diğer işaretleme dilleri bu görev için daha uygundur.
HTML4 ve HTML5 arasındaki büyük farklardan biri, endişelerin ayrılması modelinin HTML5’te HTML4’te olduğundan daha sıkı bir şekilde uygulanmasıdır. HTML5 ile, kalın <b> ve italik <i> etiketleri kullanımdan kaldırılmıştır. Paragraf etiketi için, hizalama (align) özniteliği tamamen HTML spesifikasyonundan çıkarılmıştır.