HTML Nedir? Çocuklar İçin Örnek Kodlarla İlk Web Sayfası

HTML nedir sorusunun kısa cevabı şudur: HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan ve tarayıcıya başlıkların, paragrafların, resimlerin ve linklerin nerede duracağını söyleyen bir işaretleme dilidir. Bu rehberde en çok kullanılan etiketleri tanıyacak, Not Defteri ile ilk sayfanı yazıp tarayıcıda açacak ve sonunda kendini tanıtan küçük bir "Hakkımda" sayfası yapacaksın.

Kısaca

• HTML, web sayfalarının içeriğini ve yapısını tanımlayan bir işaretleme dilidir.
• HTML yazmak için bilgisayarındaki Not Defteri ve bir internet tarayıcısı yeterlidir.
• HTML'in yapı taşları etiketlerdir; çoğu etiket açılır, içine içerik yazılır ve kapanır.
• Resim için img, link için a, liste için ul ve li etiketleri kullanılır.
• HTML'den sonra tasarım için CSS, etkileşim için JavaScript öğrenmek doğal bir sıradır.

HTML nedir ve web sayfaları nasıl çalışır?

HTML, bir web sayfasında hangi parçanın başlık, hangisinin paragraf, hangisinin resim olduğunu tarayıcıya anlatan dildir. Tarayıcı (Chrome, Firefox, Edge, Safari gibi) bu HTML kodunu okur ve senin ekranda gördüğün düzenli sayfaya dönüştürür.

Bunu bir evin yapımına benzetebilirsin. HTML evin duvarları, odaları ve kapılarıdır. Duvarların rengi, perdeler ve mobilyalar ise sonradan eklenen süslemelerdir. Yani HTML önce "burada bir başlık var, burada bir resim var" der; nasıl görüneceği işi başka bir dile kalır.

Adındaki "HyperText" (hiper metin) kelimesi, sayfaların birbirine linklerle bağlanabilmesini anlatır. Bir linke tıklayıp başka bir sayfaya geçtiğinde aslında HTML'in en temel fikrini kullanmış olursun. Vikipedi'deki HTML maddesine göre HTML, 1990'ların başında Tim Berners-Lee tarafından web'in ilk sayfalarını yazmak için geliştirildi ve o günden bu yana birçok sürümle büyüdü.

HTML'in herkes için aynı şekilde çalışması da önemlidir. Web'in ortak kurallarını belirleyen uluslararası topluluklardan biri olan W3C (World Wide Web Consortium), HTML gibi web teknolojilerinin standartları üzerinde çalışır. Bu sayede senin yazdığın bir sayfa, farklı bilgisayarlardaki farklı tarayıcılarda da benzer şekilde açılır.

HTML bir programlama dili mi?

Hayır, HTML bir programlama dili değil, işaretleme dilidir. Programlama dilleri bilgisayara "şunu hesapla, şu olursa bunu yap" gibi kararlar ve işlemler yaptırır; HTML ise yalnızca içeriği etiketleyip düzenler.

Örneğin Python ile iki sayıyı toplayan ya da bir oyunda skoru artıran bir program yazabilirsin. HTML'de ise döngü, koşul veya hesaplama yoktur. Sen bir metni etiketlerin arasına koyarsın, tarayıcı da onu başlık ya da paragraf olarak gösterir.

Bu durum HTML'i değersiz yapmaz; tam tersine, kodlamaya başlamak için çok rahat bir kapıdır. Hata yaptığında sayfa genellikle yine açılır, sadece görüntü biraz bozulur. Bu da denemeyi ve hatadan öğrenmeyi kolaylaştırır. Farklı dillerin ne işe yaradığını merak ediyorsan yazılım dilleri ve kullanım alanları yazısında genel bir harita bulabilirsin.

HTML yazmak için hangi programlara ihtiyacım var?

HTML yazmak için iki şey yeterlidir: düz metin yazabilen bir metin düzenleyici ve bir internet tarayıcısı. Bunların ikisi de büyük olasılıkla bilgisayarında zaten yüklüdür.

• Windows'ta: Not Defteri (Notepad) ile başlayabilirsin.
• Mac'te: TextEdit kullanabilirsin; ancak önce Biçim menüsünden "Düz Metin Yap" seçeneğini açman gerekir, yoksa dosya zengin metin olarak kaydedilir.
• Tarayıcı: Chrome, Firefox, Edge veya Safari'den herhangi biri işini görür.

Biraz ilerledikten sonra Visual Studio Code gibi ücretsiz bir kod editörüne geçebilirsin. Bu tür editörler etiketleri renklendirir, kapanış etiketini senin yerine tamamlar ve hataları fark etmeni kolaylaştırır. Yine de ilk sayfanı Not Defteri ile yazmak, HTML'in aslında sadece bir metin dosyası olduğunu görmen için iyi bir başlangıçtır.

Kurulum yapmadan tarayıcı içinde denemek istersen, Code.org üzerindeki web geliştirme alıştırmaları (Web Lab) çocuklar ve gençler için hazırlanmış ücretsiz bir seçenektir.

HTML etiketleri nelerdir? En çok kullanılan 10 etiket

HTML etiketleri, köşeli parantez içine yazılan ve tarayıcıya bir içeriğin ne olduğunu söyleyen komutlardır. Çoğu etiket bir açılış (<p>) ve bir kapanış (</p>) etiketiyle çalışır; kapanış etiketinde baştaki eğik çizgiye dikkat et.

Bazı etiketler ise içine metin almaz ve kapanış etiketi yoktur. Resim ekleyen <img> ve satır atlatan <br> bunlara örnektir. Etiketler ayrıca özellik (attribute) alabilir: <img src="kedi.jpg"> içindeki src, resmin hangi dosya olduğunu söyleyen bir özelliktir.

Aşağıdaki tablo, ilk sayfalarında en sık kullanacağın 10 etiketi özetliyor:

Etiketlerin tam listesini ve her birinin ayrıntılı açıklamasını görmek istersen MDN Web Docs'taki HTML öğrenme bölümü, yeni başlayanlar için hazırlanmış güvenilir bir başvuru kaynağıdır.

İlk web sayfamı adım adım nasıl yaparım?

İlk web sayfanı yapmak için Not Defteri'ne birkaç satır HTML yazman, dosyayı .html uzantısıyla kaydetmen ve tarayıcıda açman yeterlidir. Bütün süreç birkaç dakika sürer.

1. Masaüstünde "web-sayfam" adında yeni bir klasör oluştur. Bütün dosyalarını burada tutacaksın.
2. Not Defteri'ni aç ve aşağıdaki kodu harfi harfine yaz (kopyalamak yerine yazmak, etiketleri ezberlemene yardım eder).
3. Dosya menüsünden "Farklı Kaydet"i seç. Kayıt türünü "Tüm Dosyalar" yap, kodlamayı "UTF-8" olarak bırak ve dosya adını index.html yaz.
4. Klasöre gidip index.html dosyasına çift tıkla. Dosya tarayıcıda açılacak.
5. Not Defteri'nde bir değişiklik yap, kaydet ve tarayıcıda sayfayı yenile. Değişikliği hemen göreceksin.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>İlk Sayfam</title>
</head>
<body>
  <h1>Merhaba Dünya!</h1>
  <p>Bu benim ilk web sayfam.</p>
  <p>HTML öğrenmeye <strong>bugün</strong> başladım.</p>
</body>
</html>

Bu koddaki satırların görevleri şöyle:

• <!DOCTYPE html>: Tarayıcıya bunun modern bir HTML belgesi olduğunu söyler.
• lang="tr": Sayfanın Türkçe olduğunu belirtir.
• <meta charset="UTF-8">: "ş, ğ, ü, ı" gibi Türkçe harflerin doğru görünmesini sağlar. Bu satırı unutursan harfler bozuk görünebilir.
• <title>: Sekmede "İlk Sayfam" yazmasını sağlar.

Sık yapılan hatalar

• Dosya .txt olarak kaydedildi: Kayıt türünü "Tüm Dosyalar" seçmezsen dosya index.html.txt olur ve tarayıcıda kod olarak açılır.
• Kapanış etiketi unutuldu: <h1> açıp kapatmazsan altındaki her şey başlık gibi büyük görünebilir.
• Eğik çizginin yönü: Kapanış etiketinde / kullanılır, \ değil.

Sayfama resim, link ve liste nasıl eklerim?

Sayfana resim eklemek için <img>, link eklemek için <a>, liste eklemek için <ul> ve <li> etiketlerini kullanırsın. Bu üç parça, düz yazıdan oluşan bir sayfayı gerçek bir web sayfasına dönüştürür.

Resim eklemek

Önce bir resim dosyasını (örneğin kedi.jpg) index.html ile aynı klasöre koy. Sonra body içine şu satırı yaz:

<img src="kedi.jpg" alt="Turuncu bir kedi" width="300">

src resmin dosya adıdır; harfi harfine aynı yazılmalıdır. alt ise resim yüklenemezse görünen ve görme engelli kullanıcıların ekran okuyucularla dinlediği açıklamadır. width resmin genişliğini piksel cinsinden ayarlar.

Link eklemek

<a href="https://code.org/">Code.org sitesine git</a>

href içine gidilecek adresi, etiketlerin arasına da ekranda görünecek yazıyı koyarsın. Kendi klasöründeki başka bir sayfaya link vermek istersen adres yerine dosya adını yazman yeterlidir: <a href="hakkimda.html">Hakkımda</a>.

Liste eklemek

<ul>
  <li>Elma</li>
  <li>Muz</li>
  <li>Çilek</li>
</ul>

<ul> madde işaretli liste yapar. Sıralı, yani 1, 2, 3 diye numaralanan bir liste istersen <ul> yerine <ol> yazman yeterli. Bu küçük değişiklik, tarif adımları veya en sevdiğin filmler sıralaması gibi listeler için kullanışlıdır.

Mini proje: Kendini tanıtan bir 'Hakkımda' sayfası yap

Öğrendiğin etiketleri birleştirmenin en iyi yolu, kendini tanıtan küçük bir "Hakkımda" sayfası yapmaktır. Bu proje başlık, paragraf, resim, liste ve linki tek sayfada bir araya getirir.

Aynı klasörde hakkimda.html adında yeni bir dosya oluştur ve aşağıdaki kodu kendine göre değiştir. Kendi fotoğrafın yerine sevdiğin bir hayvanın ya da çizdiğin bir resmin fotoğrafını kullanabilirsin; internette kişisel fotoğraf paylaşmadan önce ailene danışmak iyi bir alışkanlıktır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Hakkımda</title>
</head>
<body>
  <h1>Merhaba, ben Deniz!</h1>
  <img src="resmim.jpg" alt="Çizdiğim uzay gemisi" width="250">
  <p>12 yaşındayım ve kodlama öğreniyorum.</p>

  <h2>Hobilerim</h2>
  <ul>
    <li>Resim yapmak</li>
    <li>Basketbol</li>
    <li>Oyun tasarlamak</li>
  </ul>

  <h2>En sevdiğim üç kitap</h2>
  <ol>
    <li>Birinci kitap</li>
    <li>İkinci kitap</li>
    <li>Üçüncü kitap</li>
  </ol>

  <p><a href="index.html">Ana sayfama dön</a></p>
</body>
</html>

Sayfa çalıştıktan sonra kendine küçük görevler ver:

1. Bir <h2>Hayalimdeki meslek</h2> bölümü ekle ve altına bir paragraf yaz.
2. index.html sayfana hakkimda.html sayfasına giden bir link koy; böylece iki sayfa birbirine bağlanır.
3. Önemli bir cümleyi <strong> ile kalın yap.
4. Sevdiğin bir eğitim sitesine link veren yeni bir liste maddesi ekle.

Bu görevleri bitirdiğinde iki sayfalı, birbirine bağlı küçük bir web siten olacak. Şimdilik sadece senin bilgisayarında çalışıyor, ama yapısı internetteki sitelerle aynı mantıkta.

HTML'den sonra ne öğrenmeliyim: CSS mi, JavaScript mi?

HTML'den sonra çoğu öğrenci için doğal sıra önce CSS, sonra JavaScript öğrenmektir. HTML sayfanın iskeletini kurar, CSS onu güzelleştirir, JavaScript ise sayfayı hareketli ve etkileşimli hale getirir.

CSS ile "Hakkımda" sayfanın arka plan rengini değiştirebilir, başlıkları ortalayabilir, resmine yuvarlak köşeler verebilirsin. Bu adımı merak ediyorsan CSS nedir ve sayfalara nasıl stil verilir yazısı tam olarak kaldığın yerden devam ediyor.

CSS'e alıştıktan sonra JavaScript ile sayfana küçük oyunlar, sayaçlar veya bilgi yarışmaları ekleyebilirsin. Bu aşamada rehberli ilerlemek istersen çocuklar ve gençler için JavaScript dersi sayfasına göz atabilirsin. Bu üç dilin birlikte oluşturduğu alanın adı "ön yüz" geliştirmedir; front-end nedir ve neleri kapsar yazısında bu alanı daha geniş bir çerçevede bulabilirsin.

Web dışında Python, oyun geliştirme veya yapay zeka gibi alanları da merak ediyorsan, hangi yaşta hangi adımın uygun olduğunu gösteren kodlama öğrenme yol haritası sana bir plan çıkarmanda yardımcı olur.

Sık Sorulan Sorular

HTML öğrenmeye kaç yaşında başlanır?

Kesin bir yaş sınırı yoktur; genel olarak okuma yazmayı oturtmuş ve klavyede rahat yazabilen çocuklar, yaklaşık 9-10 yaş civarından itibaren HTML'e başlayabilir. Daha küçük çocuklar için önce Scratch gibi blok tabanlı araçlarla mantığı kavramak daha keyifli olabilir. Önemli olan yaştan çok, çocuğun yazdığını tarayıcıda görmekten hoşlanmasıdır.

Telefondan veya tabletten HTML yazabilir miyim?

Tarayıcı içinde çalışan bazı kod düzenleyicileri ve uygulamalarla telefonda da HTML denenebilir. Ancak uzun kod yazmak, dosya kaydetmek ve sayfayı test etmek bilgisayarda çok daha rahattır. Mümkünse ilk adımları bir dizüstü veya masaüstü bilgisayarda atmanı öneririz.

HTML öğrenmek ne kadar sürer?

Temel etiketleri öğrenip basit bir sayfa yapmak birkaç çalışma oturumunda mümkündür. Etiketleri rahatça kullanmak, düzenli ve okunabilir sayfalar yazmak ise düzenli pratikle birkaç haftaya yayılır. Her hafta küçük bir sayfa yapmak, uzun süre okuyup hiç yazmamaktan daha etkilidir.

Sadece HTML ile oyun yapılabilir mi?

Sadece HTML ile oyun yapılamaz, çünkü HTML'de puan sayma veya tuşa basınca karakteri hareket ettirme gibi işlemler yoktur. HTML oyunun ekranını hazırlar; oyunun kurallarını ve hareketlerini JavaScript sağlar. Yine de HTML ile linklerle ilerleyen "kendi maceranı seç" türünde basit hikaye sayfaları hazırlayabilirsin.

Yaptığım web sayfasını başkaları internette görebilir mi?

Bilgisayarında açtığın HTML dosyası yalnızca senin bilgisayarında görünür. Başkalarının görebilmesi için dosyaların bir sunucuya, yani barındırma (hosting) hizmetine yüklenmesi gerekir. Kişisel bilgi içeren bir sayfayı yayınlamadan önce mutlaka bir yetişkinle birlikte karar vermek gerekir.

Sonuç

HTML, etiketlerle içeriği düzenleyen ve web'in temelini oluşturan bir işaretleme dilidir; Not Defteri ve bir tarayıcıyla bugün ilk sayfanı yapabilirsin. "Hakkımda" sayfanı tamamladıktan sonra CSS ile tasarıma, ardından JavaScript ile etkileşime geçmek sağlam bir yol olur. Bu yolu bir eğitmenle birlikte denemek istersen ücretsiz deneme dersi ile başlayabilirsin.

Kaynaklar

• MDN Web Docs - HTML Öğrenme Bölümü — HTML etiketlerinin tanımları ve yeni başlayanlar için örnekler sunan güvenilir başvuru kaynağı.
• W3C - World Wide Web Consortium — Web teknolojilerinin standartları üzerinde çalışan uluslararası topluluğun resmi sitesi.
• Vikipedi - HTML — HTML'in tanımı, açılımı ve Tim Berners-Lee ile başlayan tarihçesi hakkında genel bilgi.
• Code.org — Çocuklar ve gençler için ücretsiz web geliştirme (Web Lab) dahil kodlama alıştırmaları sunan platform.