HTML bilen birisi gerçekten Nasa gibi yüksek güvenlikli bir siteyi hackleyebilir mi? Buna benzer caps’leri internette görmüş olabilirsiniz. HTML’in ne olduğunu kabiliyetlerini doğru anlamadan bu soruya cevap veremeyiz sanırım. Bu sebeple size html hakkında her şeyi kapsamlı bir şekilde öğrenebileceğiniz bir yazı kaleme aldım. Şimdiden keyifli okumalar.
HTML Nedir?
HTML, Hyper Text Markup Language (Zengin metin işaretleme dili) kelimelerinin kısaltmasından oluşan bir tanımdır. İsminden de anlaşılacağı gibi bir işaretleme dilidir. Evet buraya kadar her şey kitabi olarak doğru ama işaretleme dili ne demek? İşaretleme dili bir doküman içerisindeki tüm ögelerin türü, özellikleri ve içeriği gibi tüm konularda dokümanı açan programa bildirim yapmak için kullanılır.
Konumuzla ilişkilendirerek anlatmak gerekirse, bir web sayfasındaki tüm eklediğimiz içeriklerle alakalı bu bir metindir, bu bir resimdir, bu bir başlıktır … şeklinde tarayıcıya bildirimler yapar. Tarayıcılar da bu bildirimlere göre sayfa içerisindeki her bir elemanı ön tanımlı stillerine uygun olarak gösterir.
HTML'in Tarihçesi
Html 1989 yılında Tim Berners-Lee tarafından geliştirilmiştir. Kökenini incelediğimizde ise 1980 yılında Tim Berners-Lee’nin, görevli olduğu CERN’deki (Avrupa Nükleer Araştırma Merkezi) araştırmacıların bilgi ve dokümanlarını birbiriyle kolayca paylaşmalarına olanak sağlayan bir sistem olması gerektiğine inancına dayanmaktadır.
İlk olarak Enrique isminde bir prototip oluşturdu. 1989 yılında CERN Avrupa’nın en büyük internet ağına sahip olduğundan hiper metin kavramına internetle katılma fırsatı yakalayan Tim Berners-Lee alan adı sistemi ve TCP protokollerini de birleştirerek bugünkü kullandığımız internetin (WWW) doğmasını sağladı.
1994 yılına geldiğimizde ise W3C (World Wide Web Consortium) Dünya Çapında Ağ Konsorsiyumunu kurdu ve böylece günümüze kadar gelen web tasarım standartları da doğmuş oldu. W3C’nin amacı web’in kalitesinin iyileştirilmesi ve standartların belirlenmesi olarak özetlenebilir.
HTML'in Dosya Yapısı ve Geliştiricileri
Dosya yapısı olarak ele aldığımız zaman html dosyalarında 2 farklı uzantıya rastlamaktayız. Bunlar “.html” ve “.htm” uzantılarıdır. Windows işletim sistemine sahip bilgisayarlar önceleri dosya uzantılarında üçten fazla karakteri desteklemediği için “.htm” uzantısı kullanılmaktaydı. Günümüzde böyle bir zorunluluk olmadığı için uzantılar artık standart olarak “.html” şeklinde kullanılmaktadır diyebiliriz.
Html’in bulunduğu ilk yıllardan beri geliştirilmesi ve standartlarını W3C kontrol etmektedir. Html web tarayıcıları üzerinde çalışan client( istemci) tarafında çalışan bir dildir. Bu kısaca sitenizin dosyalarını siz bir sunucuda barındırmanıza rağmen alan adınızı ziyaret eden herkesin görebileceği anlamına gelmektedir.
Günümüzde güncel olarak html5 sürümünü kullanmaktayız, bundan önceki sürüm ise 4.1 olan sürümdü. Her bir sürümle beraber bazı etiketler eklenirken bazı etiketler kullanımdan kaldırılmakta, ek özellikler tanımlanmaktadır.
HTML'in Faydaları
- Web sitelerinin temelidir ve tüm web sitelerinde kullanılır.
- Sadece HTML ile web siteleri yapılabilir.
- Tamamen ücretsiz ve öğrenmesi kolaydır.
- Tüm dillere uyumluluk gösterir (dokümanın dilini tanımlamak için).
- HTML kodlamalarını yaparken not defteri gibi basit programlarla bile çalışılabilir.
HTML ile Neler Yapılabilir
- Metin biçimlendirme işlemleri yapılabilir (renk, boyut, font gibi).
- Resim, video ve ses dosyaları çalıştırılabilir.
- Tablo, Çerçeve ve Alan işlemleri gibi işlemler yapılabilir.
- Form işlemlerinin bir kısmı yapılabilir (Sayfaya ekleme ve gönderilecek sayfaların seçilmesi gibi).
- Dinamik olmayan statik (durağan) web sayfaları yapılabilir.
HTML ile Neler Yapılamaz
- Olaya duyarlı ve etkileşimli sayfalar yapılamaz (Butona tıklayınca pop-up açılması gibi.).
- Form eklenebilir ama değerlendirme işlemleri yapılamaz.
- Dinamik web sayfaları yapılamaz.
HTML'de Bölge ve Dil Kodları
HTML ile oluşturduğumuz dokümanlara bölge ve dil tanımlamaları yapabiliriz. Böylece html dokümanının bölgesi ve dili hakkında arama motoru botlarına ek bilgilendirmeler yaparak sitemizin hangi dilde ve bölgede yapılan aramalarda gösterilmesi gerektiğiyle alakalı ek bildirim yapabiliriz. Burada sayfa içeriğini çok fazla uzatmamak adına tüm ülke ve dil kodlarını sayfaya eklemeyeceğim. Ama buradan bölge ve dil kodlarına ulaşabilirsiniz.
HTML dokümanının tamamına dil ve bölge tanımlaması yaparken dikkat etmemiz gereken en önemli ayrıntı, tanımlanan değerin ilk iki karakteri dil, sonraki iki karakteri ise bölge tanımlaması için kullanılır ve lang özelliği ile kullanılır. Örnek bir tanımlamayı aşağıda görebilirsiniz. Ek bir bilgi olarak da bölge tanımlaması yapmadan sadece dil tanımlaması da yaparak kullanım sağlayabilirsiniz.
HTML'de Söz Dizimi (Syntax) ve Etiket Tanımlama
Her dilin kendine özgü bir syntax (söz dizimi) vardır. Bu yapı o dilin elemanlarının nasıl oluşturulacağı ve nasıl tanımlanması gerektiğiyle alakalı kurallar bütünüdür ve her dilde değişmektedir. HTML’in de kendine özgü bir söz dizimi vardır. HTML içerisindeki elemanları oluştururken 2 türlü etiket kullanımı mevcuttur. Bunlardan ilki açılış ve kapanış etiketine sahip olan tanımlama diğeri ise sadece tek etikete sahip tanımlamadır. Her elemanın kendi etiket tanımlamasına dikkat ederek dokümana eklemek gerekmektedir.
Aşağıda iki farklı etiket kullanım örneğini de görebilirsiniz.
HTML'in Mutlak Etiketleri
Bir metin düzenleme editörüne gidip boş bir dosya kaydettiğinizde (uzantısını .html olarak) bu içerisi boş bir doküman bile olsa esasında bir web sayfasıdır. Siz herhangi bir etiket yapısı eklememiş olsanız bile tarayıcı dosya uzantısı .html olan bir dosyada varsayılan olarak 3 tane etiketi mutlak olarak ekler. Bu etiketler html’in mutlak etiketleridir. Sırasıyla html, head ve body etiketleridir. Boş bir html dokümanının tarayıcı’da görünümü aşağıdaki şekilde olacaktır.
Buradaki <!doctype html> kısmı dokümanın html5 dilinde olduğunu belirtmek için kullanılmaktadır.
Html etiketi bütün diğer elemanları kapsayan kök durumundaki etikettir. Kapsayıcı durumda bulunan bu etiket sayfanın başladığı ve bittiği noktaları gösterir.
Head etiketi dokümenın çoğunlukla tarayıcıda görüntülenmeyen ve doküman hakkında bilgilendirmelerin yapıldığı, harici kaynaklardan veri eklemelerinin yapıldığı ve bazı yapısal düzenlemelerin belirlendiği bölümüdür.
Body etiketi ise kullanıcıların tarayıcı içerisinde gördükleri her şeyi kapsamaktadır. Burada olmayan elemanlar tarayıcıda görüntülenmeyecektir veya hatalı bir görünüm olacaktır.
HTML Özellikler ve Çeşitleri
HTML ile elemanlara bazı ek özellikler(attributes) kazandırılmaktadır. Bu özelliklerin(attributes) bazıları sadece belli özelliklere has kullanılmakta bazıları ise tüm elemanlara uygulanabilmektedir. Tüm etiketlere uygulanabilen özelliklere biz global özellikler (global attributes diyoruz. Yazıyı çok fazla uzatmamak adına tüm global attributes özelliklerine buradan ulaşabilirsiniz.
Şu an kullanımda olan tüm bu global özelliklerin her tarayıcıda benzer şekilde çalışmama durumları olabilmektedir. Sürekli güncellenen tarayıcı sürümleriyle çoğunlukla bu sorunun önüne geçilse bile yazılım geliştiriciler her zaman daha eski versiyonlarda tarayıcı kullanan kitleleri düşünmek ve geliştirmelerini buna göre yapmak zorundadır yoksa kritik bazı hatalar kullanıcı deneyimi açısından sorunlara sebep olabilmektedir. Güncel olarak herhangi bir özelliğin tarayıcılardaki çalışma durumunu caniuse sitesinden kontrol edebilirsiniz.
Html de dahil olmak üzere %100 öğrenme garantisi verdiğim front-end developer eğitimime buradan erişebilirsiniz. Sınırlı süreli indirim kuponu için de iletişim sayfasındaki form’u doldurarak ya da whatsapp numaramdan bana ulaşabilirsiniz.