Yakuza

Yakuza

WFN Üye
Konular
544
Mesajlar
544
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Artvin
Web Sitesi
Var
Alanı
SEO Danışmanı
1/1
Konu sahibi
HTML için doğru planlama, kod yazmaya başlamadan önce sayfanın amacını, içerik hiyerarşisini, gerekli bölümleri ve her içeriğin uygun HTML öğesini belirlemektir. Önce sayfanın ne yaptığını tek cümleyle tanımlayın; ardından kullanıcıya gösterilecek içerikleri önem sırasına koyun, ana bölümleri bir taslak hâline getirin ve bu taslağı semantik HTML etiketleriyle uygulayın. Böylece sonradan sürekli etiket değiştirmek yerine, düzenli ve geliştirilebilir bir sayfa iskeleti elde edersiniz.

Koddan önce sayfanın amacını belirleyin​


Planlamaya “hangi etiketi kullanmalıyım?” sorusuyla değil, “bu sayfada kullanıcı ne yapacak?” sorusuyla başlayın. Örneğin bir ürün sayfasının amacı ürünü tanıtmak ve satın alma kararını desteklemek olabilir. Bir iletişim sayfasının amacı ise adres, iletişim bilgileri ve mesaj gönderme seçeneğini sunmaktır.

Sayfanın amacını bir cümleyle yazın. Ardından şu bilgileri listeleyin:
  • Sayfanın hedefi: Bilgi vermek, kullanıcıdan veri almak, ürün tanıtmak veya içerik yayımlamak mı?
  • Ana içerik: Kullanıcının sayfada ilk olarak görmesi ve anlaması gereken bölüm hangisi?
  • Destekleyici içerik: Açıklamalar, görseller, bağlantılar veya iletişim bilgileri nerede bulunacak?
  • Kullanıcı eylemi: Kullanıcı yalnızca okuyacak mı, başka sayfaya mı geçecek, form mu gönderecek?
Bu aşamada renk, yazı tipi veya animasyon gibi görsel ayrıntılar öncelikli değildir. HTML planı, sayfanın anlamını ve içerik sırasını belirler; görsel görünüm daha sonra CSS ile düzenlenir.

İçeriği hiyerarşik bir taslağa dönüştürün​


İçeriği başlıklar ve alt başlıklar şeklinde sıralayın. Sayfanın tek bir ana başlığı olmalı, alt bölümler ise bu başlığa bağlı ilerlemelidir. Başlık düzeylerini yalnızca yazı boyutunu değiştirmek için kullanmayın; her başlık, kendisinden sonra gelen içeriğin ne hakkında olduğunu açıklamalıdır.

Örneğin varsayımsal bir “Web Geliştirme Kursu” sayfasının taslağı şöyle olabilir:
  1. Sayfanın ana başlığı: Web Geliştirme Kursu
  2. Kısa tanıtım ve kursun amacı
  3. Kurs içeriği
  4. Kimler katılabilir?
  5. Kayıt formu
  6. Sık sorulan sorular
Bu taslak, HTML kodunun temel yapısını belirler. “Kurs içeriği” ve “Kimler katılabilir?” gibi bölümler aynı düzeydeyse aynı başlık seviyesinde tutulmalıdır. Bir bölümün içinde daha küçük bir konu varsa bunun için alt başlık kullanılabilir.

Her bölüme anlamına uygun HTML etiketi verin​


HTML planında temel amaç, her içeriği yalnızca ekranda doğru göstermek değil, anlamını da doğru ifade etmektir. Bunun için genel amaçlı div kullanımını sınırlayın ve uygun olduğunda semantik öğeleri tercih edin.
İçerik veya görevUygun HTML öğesiKullanım amacı
Sayfanın üst bölümü ve marka alanıheaderGiriş veya üst bilgi alanını belirtir.
Ana gezinme bağlantılarınavKullanıcının sayfalar arasında gezinmesini sağlar.
Sayfanın ana içeriğimainSayfanın temel amacını taşıyan içeriği belirtir.
Bağımsız içerikarticleHaber, blog yazısı veya bağımsız bir içerik parçası için kullanılır.
Tematik bölümsectionBaşlığı olan ilişkili içerikleri gruplar.
Yan bilgi veya tamamlayıcı içerikasideAna içeriği destekleyen kenar veya ek bilgileri belirtir.
Alt bilgi alanıfooterTelif, iletişim veya ek bağlantılar gibi bilgileri içerir.
Bu etiketler sayfanın görünümünü kendiliğinden istediğiniz tasarıma dönüştürmez. Örneğin nav öğesi otomatik olarak yatay bir menü oluşturmaz; yalnızca içeriğin gezinme amacı taşıdığını belirtir. Görsel düzen için CSS gerekir.

Planı küçük ama gerçek bir HTML iskeletine dönüştürün​


Taslak hazırlandıktan sonra sayfanın ana iskeletini oluşturun. Aşağıdaki örnek, yukarıdaki kurs sayfası için varsayımsal ve en küçük çalışır yapıdır:

HTML: 
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Geliştirme Kursu</title>
</head>
<body>
  <header>
    <h1>Web Geliştirme Kursu</h1>
    <nav aria-label="Ana menü">
      <a href="#icerik">Kurs içeriği</a>
      <a href="#kayit">Kayıt</a>
    </nav>
  </header>

  <main id="icerik">
    <section>
      <h2>Kurs hakkında</h2>
      <p>Bu kurs, temel web sayfası geliştirme konularını ele alır.</p>
    </section>

    <section>
      <h2>Kurs içeriği</h2>
      <ul>
        <li>HTML temelleri</li>
        <li>CSS ile biçimlendirme</li>
        <li>JavaScript'e giriş</li>
      </ul>
    </section>

    <section id="kayit">
      <h2>Kayıt formu</h2>
      <form>
        <label for="email">E-posta adresi</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Kayıt ol</button>
      </form>
    </section>
  </main>

  <footer>
    <p>Web Geliştirme Kursu</p>
  </footer>
</body>
</html>

Bu kodu .html uzantılı bir dosyaya kaydedip tarayıcıda açtığınızda başlık, gezinme bağlantıları, kurs bölümleri ve kayıt formu görünür. Menüdeki bağlantılar id değerleriyle eşleştiği için kullanıcı ilgili bölüme geçebilir. Formun required ve type="email" özellikleri temel tarayıcı doğrulaması sağlar; ancak bu, verinin sunucuda güvenli ve eksiksiz biçimde doğrulandığı anlamına gelmez. Gönderilen veriler sunucu tarafında da kontrol edilmelidir.

İçeriği erişilebilirlik ve bakım açısından kontrol edin​


Planı tamamladıktan sonra yalnızca tarayıcıda görüntünün doğru olup olmadığına bakmayın. Başlıkların mantıklı sırada ilerlediğini, bağlantı metinlerinin nereye gittiğini ve form alanlarının etiketleriyle ilişkilendirildiğini kontrol edin. Görsel ekleyecekseniz, bilgi taşıyan görseller için açıklayıcı alt metni planlayın; yalnızca dekoratif görsellerde boş alt değeri kullanılabilir.

Aşağıdaki kontroller planın eksik noktalarını ortaya çıkarır:
  • Sayfada bir ana h1 var mı ve sayfanın amacını açıkça anlatıyor mu?
  • Başlıklar yalnızca görünüm için değil, içerik hiyerarşisi için mi kullanılmış?
  • Ana içerik main içinde ve birbirinden bağımsız bölümler uygun etiketlerle ayrılmış mı?
  • Her form alanının açıklayıcı bir label öğesi var mı?
  • Bağlantı metni “buraya tıklayın” yerine hedefi açıklıyor mu?
  • HTML dosyası kaydedilip tarayıcıda açıldığında eksik kapanış, bozuk bağlantı veya anlamsız iç içe yapı görülüyor mu?
Bir bölümün sayfada görünmesi, planın doğru olduğu anlamına gelmez. İçerik çalışıyor gibi görünse bile hatalı başlık sırası, etiketsiz form alanları veya yalnızca div kullanımı sayfanın anlaşılmasını ve daha sonra geliştirilmesini zorlaştırabilir. Sorun bulursanız önce içeriğin amacını ve hiyerarşisini yeniden kontrol edin, ardından ilgili HTML öğesini düzeltin. CSS ile çözülemeyen bir anlam veya yapı sorunu, HTML planında ele alınmalıdır.

Planı CSS ve JavaScript'ten ayırın​


HTML planı, sayfada hangi içeriğin ve hangi işlevin bulunacağını belirler. CSS renk, boşluk, sütun ve tipografi gibi görünüm kararlarını; JavaScript ise etkileşim, dinamik içerik ve kullanıcı işlemlerini yönetir. Bu görevleri birbirine karıştırmamak, değişiklik yapmayı kolaylaştırır.

Örneğin bir düğmenin kırmızı görünmesi HTML planının değil, CSS'in konusudur. Düğmeye basıldığında menünün açılması ise JavaScript gerektirebilir. Buna karşılık düğmenin gerçekten bir işlem başlatması gerekiyorsa HTML içindeki öğe seçimi önemlidir: başka bir sayfaya geçiş için a, form verisi göndermek için button veya form yapısı kullanılmalıdır.

Bu nedenle doğru sıra genellikle şöyledir: önce içerik ve sayfa amacı, sonra HTML iskeleti, ardından CSS düzeni ve gerekiyorsa JavaScript davranışı. Tarayıcıda temel içerik ve bağlantılar çalışmadan görsel ayrıntılara veya etkileşim koduna geçmek, yapısal sorunları gizleyebilir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)