Türkçe HTML5 Dersleri

 

html5

HTML5: Web Dünyasının Parlayan Yıldızı

HTML5 nedir? Bir programlama dili midir? Yoksa internetin görünmez kahramanı mı? Bu yazıda HTML5’in temel yapısını, tarihsel gelişimini, tarayıcılarla ilişkisini ve hayatımızı nasıl kolaylaştırdığını eğlenceli bir dille anlatacağız. Hadi başlayalım!

HTML5 Nedir?

HTML5, "HyperText Markup Language"ın 5. sürümüdür. Bir programlama dili olmadığını peşinen söyleyerek başlayalım. HTML5, web sayfalarının iskeletini oluşturmak için kullanılan bir işaretleme dilidir.

Düşünün, bir ev inşa ediyorsunuz ve ilk adım olarak temeli atıyorsunuz. HTML5, web sitenizin bu temelini oluşturur. Ancak üzerine boya yapmak (CSS) ya da elektrik tesisatı döşemek (JavaScript) için başka araçlara da ihtiyacınız olacak.

HTML5’in Tarihsel Gelişimi

HTML5'in hikâyesi, web dünyasının evrimini anlamak için önemlidir. Aşağıdaki tabloyla geçmişe kısa bir yolculuk yapalım:

Yıl Gelişme
1991 HTML'in ilk versiyonu Tim Berners-Lee tarafından geliştirildi.
1999 HTML4.01 piyasaya sürüldü. Daha statik bir yapıdaydı.
2008 HTML5 taslağı yayımlandı. Daha dinamik ve kullanıcı dostu bir yapı hedeflendi.
2014 HTML5 resmi olarak standart hâline geldi.
Bugün HTML5, video oynatmadan oyun geliştirmeye kadar birçok alanda kullanılıyor.

HTML5’in Temel Yapısı

HTML5, tıpkı lego parçaları gibi farklı bileşenlerden oluşur. İşte basit bir HTML5 dosyasının yapısı:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Dersleri</title>
</head>
<body>
    <header>
        <h1>Merhaba Dünya!</h1>
    </header>
    <main>
        <p>HTML5 öğrenmek için doğru yerdesiniz.</p>
    </main>
    <footer>
        <p>&copy; 2024 HTML5 Dersleri</p>
    </footer>
</body>
</html>

Kodun Çıktısı

Bu kod ne yapar?

  • <!DOCTYPE html>: Tarayıcıya, HTML5 kullanıldığını söyler.
  • <html>: Tüm HTML kodlarını kapsayan ana etikettir.
  • <head> ve <body>: Başlık bilgilerini ve ana içeriği ayırır.

HTML5’in Sunduğu Yenilikler

HTML5, web geliştiricilerine hayatı kolaylaştıran birçok yenilik getirdi. İşte bazıları:

1. Semantik Etiketler

HTML5, içeriğin ne anlama geldiğini belirlemek için semantik etiketler sunar. Örneğin:

  • <header>: Sayfa başlıkları için.
  • <article>: Bir makale veya blog gönderisi.
  • <footer>: Sayfa altbilgisi.

<article>
    <h2>HTML5 Semantik Yapı</h2>
    <p>Web sitenizi daha anlamlı ve düzenli hâle getirir.</p>
</article>

2. Multimedya Desteği

Artık harici eklentilere gerek kalmadan video ve ses oynatabilirsiniz.

<video controls>
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız video formatını desteklemiyor.
</video>

3. Form Kontrolleri

HTML5, kullanıcı dostu formlar oluşturmayı çok kolaylaştırdı.

<form>
    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required>
</form>

HTML5 ve Tarayıcılar

Her tarayıcı HTML5’i aynı şekilde mi destekliyor? Aslında hayır. Bazı eski tarayıcılar HTML5'in özelliklerini tamamen desteklemiyor olabilir. Ancak modern tarayıcılar (Google Chrome, Firefox, Safari) ile uyumluluk oldukça yüksek.


Hangi Tarayıcılar Daha İyi Destekliyor?

Tarayıcı HTML5 Desteği
Google Chrome %100'e yakın
Mozilla Firefox %95
Safari %90
Microsoft Edge %90
Eski Internet Explorer %10 veya daha az

HTML5 Dersleriyle Daha İleriye 

HTML5 öğrenirken bol bol pratik yapmanız çok önemli. Yazının sonunda örnek bir proje hazırlayarak öğrendiklerinizi pekiştirebilirsiniz. İşte küçük bir örnek proje:

HTML5 ile Basit Bir Kişisel Sayfa

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benim Sayfam</title>
</head>
<body>
    <header>
        <h1>Hoş Geldiniz!</h1>
    </header>
    <section>
        <h2>Hakkımda</h2>
        <p>HTML5 öğrenmeye yeni başladım ve bu sayfayı tasarladım.</p>
    </section>
    <footer>
        <p>İletişim: <a href="mailto:example@example.com">example@example.com</a></p>
    </footer>
</body>
</html>

HTML5 Hakkında Yanlış Anlaşılmalar 

  • HTML5 bir programlama dili değildir! Sadece içeriği yapılandırmak için kullanılır. 
  • HTML5'in JavaScript veya CSS gibi dinamik özellikler sunmasını beklemeyin. Ancak onlarla harika bir takım çalışması yapar.

Sonuç: HTML5 ile Web Dünyasına Adım Atın!

HTML5 öğrenmek sizi sadece bir web geliştiricisi yapmaz, aynı zamanda fikirlerinizi global bir sahnede paylaşmanızı sağlar. Unutmayın, her ustanın bir zamanlar acemi olduğunu! HTML5 öğrenirken sabırlı olun, bol bol kod yazın ve bu süreçten keyif alın.

SSS - Sık Sorulan Sorular

HTML5 nedir ve neden önemlidir?

HTML5, web sayfalarının yapısını tanımlamak ve içeriğini düzenlemek için kullanılan en yeni HTML sürümüdür. Multimedya desteği, mobil uyumluluk ve modern web geliştirme için sunduğu özelliklerle web geliştirme dünyasında önemli bir yere sahiptir.

HTML5'in diğer HTML sürümlerinden farkı nedir?

HTML5, semantik etiketler (

,
,
), multimedya desteği (

HTML5 ile modern web tasarımı nasıl yapılır?

HTML5, responsive tasarımlar, semantik yapı, medya desteği ve performans artışı gibi özellikleriyle modern web siteleri tasarlamayı kolaylaştırır. CSS3 ile birleştirilerek etkileyici web projeleri oluşturulabilir.

HTML5 kullanarak hangi multimedya özelliklerinden faydalanabilirim?

HTML5, ses ve video oynatma (

HTML5 öğrenmeye nereden başlamalıyım?

HTML5 öğrenmek için ücretsiz kaynaklardan, W3Schools ve MDN Web Docs gibi platformlardan yararlanabilir, basit projeler yaparak pratik kazanabilirsiniz. Ayrıca video dersler ve topluluklar da faydalıdır.

Temel bilgileri aldığına göre hadi şimdi HTML5'i sıfırdan öğrenmek tıkla!