HTML ile Web Sayfası Yapma: İlk Dosyanızı Oluşturun

HTML ile web sayfası yapmaya başlamak için bir düz metin düzenleyicisi ve tarayıcı yeterli. Bir dosyaya başlık, paragraf ve liste ekleyip index.html adıyla kaydederek ilk sayfanızı bilgisayarınızda açabilirsiniz. Aşağıdaki örnek için hesap, alan adı veya ücretli araç gerekmiyor.

Bu çalışma, dosya oluşturup kaydedebilen ve klavyede kısa metinler yazabilen başlangıç düzeyindeki öğrenciler içindir. Amacımız bir kulübü tanıtan küçük bir sayfa hazırlamak ve metinde yaptığımız değişikliğin tarayıcıya nasıl yansıdığını görmek.

HTML ne işe yarar?

HTML, sayfanın içeriğine yapı kazandıran bir işaretleme dilidir. Bir metnin ana başlık, paragraf veya liste olduğunu etiketlerle belirtirsiniz. Görünümü düzenlemek için CSS, etkileşimli davranışlar eklemek için JavaScript kullanılabilir; ilk çalışmamızda yalnızca HTML yazacağız. Temel yapı ve etiketler MDN’nin başlangıç rehberinde açıklanır.

Etiketleri, metne verilen görevler gibi düşünebilirsiniz. Örneğin <p>Birlikte araştırıyoruz.</p> satırında <p> paragrafı başlatır, </p> bitirir. İkisinin arasında okuyucunun göreceği metin bulunur.

1. Proje klasörünü ve dosyayı hazırlayın

Bilgisayarınızda ilk-web-sayfam adlı bir klasör oluşturun. Düz metin veya kod düzenleyicinizde yeni dosya açın. Word gibi zengin metin biçiminde kayıt yapan bir belge yerine düz metin kullanın; düzenleyicinizin bu kipte olduğundan emin olun.

Dosyayı klasörün içine index.html adıyla ve UTF-8 kodlamasıyla kaydedin. Dosya adının index.html.txt olmadığını kontrol edin. İşletim sisteminiz uzantıları gizliyorsa dosyanın özelliklerinden tam adını görebilir veya dosya uzantılarının gösterilmesini seçebilirsiniz.

index, dosyanın adı; .html ise türünü belirten uzantıdır. Dosya ve klasörlerle çalışma mantığını ayrıca MDN’nin dosya düzeni rehberinde inceleyebilirsiniz.

2. İlk HTML kodunu yazın

Aşağıdaki örnekteki Uzay Kulübü, bu alıştırma için seçilmiş temsili bir kulüptür. Gerçek ad, okul veya iletişim bilgisi eklemeniz gerekmez. Kod bloğunun tamamını index.html dosyanıza yazın:

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Uzay Kulübü</title>
</head>
<body>
  <h1>Uzay Kulübü</h1>
  <p>Uzayı merak ediyor, sorularımızı birlikte araştırıyoruz.</p>

  <h2>İlk buluşmada yapacaklarımız</h2>
  <ul>
    <li>Merak ettiğimiz bir gezegeni seçeceğiz.</li>
    <li>Üç araştırma sorusu yazacağız.</li>
    <li>Bulduklarımızı bir posterle anlatacağız.</li>
  </ul>
</body>
</html>

Kod bloğunun tamamını dosyanıza kopyalayın. Dosyanız doğrudan <!doctype html> satırıyla başlamalı.

3. Dosyayı tarayıcıda açın

Önce düzenleyicide dosyayı kaydedin. Ardından dosya yöneticisinde index.html üzerine sağ tıklayıp Birlikte Aç seçeneğinden tarayıcınızı seçin. Dosyayı açık bir tarayıcı penceresine sürüklemek de bir başka yöntemdir.

Sayfada büyük bir “Uzay Kulübü” başlığı, altında bir paragraf, ardından ikinci bir başlık ve üç maddelik liste görmelisiniz. Tarayıcı sekmesinin adı da “Uzay Kulübü” olmalıdır.

Görünüm ilk aşamada sade olacaktır; örneğe renk veya özel yazı tipi eklemedik. Bu dosyanın içeriği başka bir görsel, yazı tipi veya kütüphaneye bağlı olmadığı için bilgisayarınızda internet bağlantısı olmadan da görüntülenebilir. Yazıdaki dış kaynak bağlantılarını açmak için ise internet gerekir.

4. Hangi satırın neyi değiştirdiğini bulun

Bu sayfada iki farklı başlık alanı var: <title> tarayıcı sekmesinin adını, <h1> sayfanın içindeki ana başlığı belirliyor. Aynı metni taşısalar da ayrı yerleri etkiliyorlar.

Başlık ve karakter kodlaması gibi belge bilgilerinin görevlerini MDN’nin head açıklamasında da görebilirsiniz.

5. Tahmin edin, değiştirin ve yenileyin

Şimdi her seferinde yalnızca bir değişiklik yapın. Kaydedin, tarayıcıya dönün ve sayfayı yenileyin. Önce ne değişeceğini tahmin etmek, sonucu yorumlamanızı kolaylaştırır.

Son denemede listeye düz bir cümle yazmakla yeni bir <li> eklemek arasındaki farkı inceleyin. Tarayıcıdaki görünümün yanında kodun içeriği nasıl grupladığını da açıklamaya çalışın.

Sayfa beklediğiniz gibi görünmüyorsa

Kodun kendisi metin olarak görünüyorsa: Dosyayı düzenleyicide mi, tarayıcıda mı açtığınızı ve uzantının .html olduğunu kontrol edin.

Yaptığınız değişiklik görünmüyorsa: Dosyayı kaydedin, tarayıcıyı yenileyin ve açık dosyanın doğru klasördeki index.html olduğundan emin olun. Aynı adlı farklı dosyalarla çalışmak karışıklığa neden olabilir.

Türkçe karakterler bozuluyorsa: Hem dosyanın kayıt kodlamasını hem de <meta charset="utf-8"> satırını kontrol edin.

Liste veya başlıklar karışıyorsa: Açılış ve kapanış etiketlerini eşleştirin. Tarayıcı bazı HTML hatalarında yine de bir şeyler gösterebilir; sayfanın açılması bütün etiketlerin doğru yazıldığını kanıtlamaz.

Dosyayı açmak ile yayınlamak arasındaki fark

Bilgisayarınızda bir HTML dosyasını açmanız, onu otomatik olarak internette herkese açık yapmaz. Bu çalışmada bir sunucuya dosya yüklemiyoruz. İnternette yayınlama, daha sonra ayrıca ele alınabilecek bir adımdır.

Çalışmanızı tamamladığınızda sekme başlığını, sayfa başlığını ve liste maddelerini kod üzerinde gösterebilmelisiniz. Bir sonraki adım, bu içeriğin görünümünü CSS ile düzenlemek olabilir. Başlangıç akışını farklı bir kaynaktan pekiştirmek için Microsoft Learn’ün ilk HTML sayfası modülünü inceleyebilirsiniz.

Bu çalışma, dijital beceriler rehberimizdeki kendi projesini üretme önerisinin küçük bir uygulamasıdır. Eğitmenle ilerlemek isterseniz velinizle birlikte DijiGO Online Yazılım Eğitimi’nin içeriğine bakıp seviyenize uygun başlangıcı sorabilirsiniz.