Ana Sayfa
HTML5 Kodlama

HTML5 Nedir? Sıfırdan HTML5 Öğrenmek İçin Temel Rehber

HTML5'in ne olduğunu öğrenin ve temel kod yapısını keşfedin. Bu rehber, sıfırdan HTML5 öğrenmeye başlayanlar için adım adım açıklamalar sunuyor.
HTML5 Temel Kod Yapısı

HTML5 Nedir? Sıfırdan HTML5 Öğrenme Rehberi (Biraz Eğlenceli, Biraz Teknik)

İnternette gezinirken "HTML5 nedir?" diye mi düşündün? Korkma, kimse doğuştan HTML5 bilmez! Ama biz seni bu yazıyla kısa sürede bir HTML5 dahisi yapacağız! Hadi başlayalım!

Öncelikle HTML5’i tanıyalım. HTML5 web sayfalarını oluşturan, onlara hayat veren (bir nevi web’in motoru) bir işaretleme dili. Peki, nedir bu işaretleme dili? Düşün ki web sayfanıza bir çerçeve çiziyorsunuz. İşte HTML5 o çerçeveyi çizen kalem! Ama sadece sayfanın iskeletini oluşturuyor, dekorasyon yok (o CSS'in işi!). Ve evet, HTML5 sadece basit metinlerden ibaret değil, ses ve videoları bile oynatabiliyor. Yani kısacası: "Her şeyi yaparım abi!" 😁

HTML5’in Özellikleri

  1. Semantik etiketler: Web sitenizi inşa ederken, HTML5 “Burası başlık olsun, burası gövde” gibi semantik etiketlerle işi kolaylaştırır. Bunu kullanarak sitenizin “kimin nerede ne yaptığını” anlaması kolay olur.
  2. Video ve ses: Eskiden bir video koymak için tarayıcı eklentilerine muhtaçtık. Şimdi ise HTML5 ile eklentisiz, hop diye videoları sayfaya koyabiliyoruz.
  3. Form kontrolleri: Bil bakalım ne geldi? Daha havalı formlar! Kullanıcıların form doldururken çile çekmemesi için yepyeni özellikler var.

HTML5'in Temel Yapısı

Her şeyin bir temel yapısı vardır, değil mi? İşte HTML5’in temel yapı taşları. Dilersen, aşağıdaki basit kodu kopyalayarak işe başlayabilirsin:

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5’e Giriş</title>
  </head>
  <body>
    <h1>Merhaba, Dünya!</h1>
    <p>Bu, HTML5 ile yazılmış ilk sayfan olabilir, ama son olmayacak!</p>
  </body>
</html>

Bu Kodu Nasıl Çalıştıracağız?

Html5 kodlarını çalıştırmak için basit editörlerden karmaşık editörlere kadar herhangi birine ihtiyacımız olduğunu şuradaki yazımızda söylemiştik. Şimdilik en temel editörlerden biri olan Notepad'i kullanabiliriz. Eğer Mac bir bilgisayar kullanıyorsanız TextEdit programını da kullanabilirsiniz. 

Şimdi bir NotePad (Metin Belgesi ) açalım ve aşağıdaki kodları yazalım. 
<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5’e Giriş</title>
  </head>
  <body>
    <h1>Merhaba, Dünya!</h1>
    <p>Bu, HTML5 ile yazılmış ilk sayfan olabilir, ama son olmayacak!</p>
  </body>
</html>
image_title

Sonra bu dosyamızı Dosya - Farklı Kaydet diyerek farklı kaydedelim.

image_title

Burada Kayıt Türü kısmını Tüm Dosyalar yapıp dosya adını kendi belirlediğimiz bir isim yapıp sonunu .html yada .htm olarak kayıt ediyoruz İki kayıt türü de aynı kapıya çıkıyor. Aralarında hiç bir fark yok. Daha yaygın kullanılan tür .html şeklindeki kullanımdır.

Son olarak kayıt ettiğimiz dosyanın üzerine çift tıklayıp tarayıcıda açılmasını sağlıyoruz. 
image_title

Hadi Şimdi Kodları Tek Tek Açıklayalım

1. <!DOCTYPE html>

Bu satırla tarayıcıya, "Bu site HTML5 ile yazıldı, ona göre göster lütfen!" demiş oluyoruz.

2. <html lang="tr">

Bu satırda ise sitenizin dilini belirtiyoruz. "Bu site Türkçe olsun," diyoruz. Ne kadar kibar değil mi?

3. <meta charset="UTF-8">

Karakter setimiz evrensel, yani bütün dünya dillerini tanır. Burada "Her türlü karakteri düzgün göster" komutunu veriyoruz.

4. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobil kullanıcılar merhaba! Bu satır sayesinde siteniz her ekranda güzel görünecek. Kimse sıkış tepiş bir web sayfası görmek istemez değil mi?

5. <title>HTML5’e Giriş</title>

Sayfanızın başlığı, tarayıcının sekmesinde görünecek şeydir. Kısa ve öz, ama etkili olmalı!

6. <h1>Merhaba, Dünya!</h1>

Bu, web dünyasında bir gelenektir. Yeni başlayan herkes "Merhaba, Dünya!" diyerek işe başlar. Dünyayı selamlamayı unutmayın!

7. <p>Bu, HTML5 ile yazılmış ilk sayfan olabilir...</p>

Bu da bizim paragraflarımız. Sayfanıza istediğiniz kadar metin ekleyebilirsiniz. Paragraflar her zaman düzenli durur.

HTML5 Öğrenmeye Devam!

Bu kadarla sınırlı değil! HTML5’i ne kadar çok denersen, o kadar ustalaşacaksın. Hadi durma, pratik yap ve daha fazlasını keşfet! Yakında kendini web dünyasında bir ninja gibi hissedeceksin!

HTML5 Öğrenmek İle İlgili Sık Sorulan Sorular

1. HTML5 nedir?

HTML5, web sayfalarının yapısını tanımlayan en güncel işaretleme dilidir. Web sayfalarının metin, görüntü, video ve ses gibi içeriklerle zenginleştirilmesini sağlar.

2. HTML5’i öğrenmek zor mu?

Hayır, HTML5 oldukça basit bir dildir. Temel yapısını öğrendikten sonra, pratik yaparak hızlı bir şekilde ustalaşabilirsiniz. Başlamak için bir metin editörü ve tarayıcı yeterlidir!

3. HTML5 ile neler yapabilirim?

HTML5 ile basit web sayfaları oluşturabilir, videolar ve sesler ekleyebilir, formlar hazırlayabilir ve modern, mobil uyumlu sayfalar tasarlayabilirsiniz.

4. HTML5’i öğrenmek için nereden başlamalıyım?

Bu yazı, HTML5’e giriş yapmak için harika bir başlangıç noktası! İlk olarak HTML5'in temel yapısını öğrenebilir, ardından pratik yaparak adım adım daha ileri konulara geçebilirsiniz.

5. HTML5 ve HTML arasında fark var mı?

Evet, HTML5 HTML’in en son sürümüdür. HTML5, önceki sürümlere göre daha fazla özellik içerir; video ve ses oynatma gibi yeni medya öğeleri eklenmiştir. Ayrıca mobil uyumluluk ve gelişmiş semantik etiketlerle web sayfalarını daha iyi yapılandırmayı sağlar.