HTML ve HTML5'e Giriş | Temel Kavramlar ve Devrim Niteliğindeki Yenilikler

Merhaba geleceğin web geliştiricileri! Bilişim Teknolojileri derslerimizde artık heyecanlı bir yolculuğa çıkıyoruz: Web Programlama. İlk durağımız, tüm web sitelerinin yapı taşı ve olmazsa olmazı olan HTML ve onun güçlü kardeşi HTML5.

HTML Nedir? (HyperText Markup Language)

HTML, bir programlama dili değil, bir işaretleme dilidir (Markup Language). Basitçe anlatmak gerekirse, web tarayıcınıza (Chrome, Firefox, Edge) "Bu bir başlık, bu bir paragraf, burada bir resim göster, bu bir link" gibi talimatlar vermenizi sağlayan bir dildir.

• HyperText (Hiper Metin): Bir sayfadan diğerine, metinler veya nesneler aracılığıyla bağlantı (link) kurabilme yeteneğidir. İnternetin çalışma mantığının temelidir.
• Markup Language (İşaretleme Dili): Etiketler (<tag>) kullanarak içeriği işaretler ve anlamlandırırsınız.

Kısacası, HTML bir web sitesinin iskeletidir. Bir binanın betonarme yapısı, bir insanın kemikleri neyse, bir web sitesi için de HTML odur.

HTML Niçin ve Nerelerde Kullanılır?

• Neden Kullanılır? 

Web tarayıcılarının anlayabileceği standart ve evrensel bir yapı oluşturmak için.

• Nerelerde Kullanılır?

  Web Siteleri: Tüm statik ve dinamik web sitelerinin temelini oluşturur.

  E-Posta Şablonları: Gördüğünüz renkli ve formatlı e-bültenler HTML ile kodlanır.

  Web Uygulamaları: Facebook, Twitter, Instagram gibi tek sayfa uygulamaları (SPA) bile en nihayetinde HTML ile render edilir.

  Mobil Uygulamalar: React Native veya Ionic gibi framework'ler, kodları HTML benzeri bir yapıda yazmanıza olanak tanır ve sonrasında native uygulamaya dönüştürür.

Peki Ya HTML5? Bu "5" Nereden Geliyor?

HTML durağan bir dil değildir. İnternetin ihtiyaçları arttıkça, teknoloji geliştikçe HTML de gelişmiştir. HTML5, HTML'in en son ve en güçlü major sürümüdür. Bu sürüm, sadece yeni etiketler getirmekle kalmamış, aynı zamanda web'in bir uygulama platformu haline gelmesine olanak sağlamıştır.

HTML5 ile Gelen Devrim Niteliğindeki Yenilikler:

• Semantik (Anlamsal) Etiketler: <div> karmaşasına son! Tarayıcıya ve arama motorlarına (SEO) içeriğin anlamını daha iyi belirten etiketler geldi.

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

Avantajı: Daha düzenli kod, daha iyi erişilebilirlik ve SEO performansı.

• Yerleşik Medya Desteği: Eskiden video ve ses oynatmak için Flash Player gibi eklentiler gerekirdi. HTML5 ile artık bu native olarak (yerel olarak) desteklenir.

<video> ve <audio> etiketleri hayatımıza girdi.

• Gelişmiş Form Kontrolleri: Kullanıcı deneyimini arttıran yeni input tipleri eklendi.

type="email", type="url", type="date", type="number", type="range"

Avantajı: Daha az JavaScript kodu, daha doğru veri girişi.

• Canvas ve SVG: Tarayıcı üzerinde doğrudan çizim yapabilme, grafikler ve hatta oyunlar oluşturabilme yeteneği. <canvas> etiketi bir devrim yarattı.
• Yerel Depolama (Local Storage): Kullanıcının tarayıcısında küçük verileri (kullanıcı tercihleri, oturum bilgileri) saklayabilme imkanı. Çerezlerden (cookies) daha kullanışlı ve güvenlidir.

Sonuç: Nereden Başlamalı?

HTML5, modern web geliştirmenin temelidir. Öğrenmeye başlamak için ihtiyacınız olan tek şey bir metin editörü (VS Code önerilir) ve bir web tarayıcısı. Kodlarınızı yazacak, .html uzantısıyla kaydedecek ve tarayıcınızda açacaksınız. Bu kadar!

Bir sonraki dersimizde, ilk HTML5 belgemizi oluşturup bu anlattığımız etiketleri pratikte göreceğiz. Heyecanla devam edeceğiz!