Frontend1

Çınar YalçınkayaÇınar Yalçınkaya
3 min read

Table of contents

Basit HTML Eğitimi - Dosya Detaylı Açıklaması

Bu belge, basit bir HTML dosyasındaki her bölümün ve kodun ne işe yaradığını adım adım açıklar.

1. Dosya Başlangıcı ve Genel Ayarlar

  • <!DOCTYPE html>
    Bu satır, tarayıcıya sayfanın HTML5 standardına uygun olduğunu bildirir. Olmazsa sayfa eski modda veya uyumsuz açılabilir.

  • <html lang="tr">
    HTML sayfasının kök etiketidir. lang="tr" sayfanın Türkçe olduğunu belirtir. Bu, SEO ve erişilebilirlik için önemlidir.

2. <head> Bölümü

  • <meta charset="UTF-8" />
    Sayfanın karakter kodlamasını UTF-8 olarak ayarlar. Türkçe karakterlerin doğru görüntülenmesini sağlar.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    Mobil cihazlarda sayfanın düzgün görünmesi için ölçek ve genişlik ayarı yapar.

  • <title>Basit HTML Eğitimi</title>
    Tarayıcı sekmesinde görünen sayfa başlığını belirler.

  • <style> içinde CSS tanımları sayfanın görünümünü belirler.

3. CSS Detayları

  • body
    Arial yazı tipi kullanılır, sayfanın tüm kenar ve iç boşlukları sıfırlanır, arka plan açık gri (#f0f0f0) olarak ayarlanır.

  • header
    Koyu mavi arka plan (#004080), beyaz yazı rengi, ortalanmış metin, 20px iç boşluk.

  • nav
    Koyu lacivert arka plan (#003060), bağlantılar beyaz ve kalın. Bağlantılar arasında yatay 15px boşluk ve üzerine gelince alt çizgi çıkar.

  • main
    Sayfa ana içeriği için 20px iç boşluk.

  • section
    Beyaz arka plan, kutu gölgesi, 20px iç boşluk ve 40px alt boşluk ile belirginleşir.

  • button
    Canlı mavi (#007bff) arka plan, beyaz yazı, kenarlıksız, hafif yuvarlatılmış köşeler. Üzerine gelince koyu mavi (#0056b3).

  • #output
    Başlangıçta gizlidir, açık mavi arka plan, mavi kesikli sınır, içten ve üstten boşluk.

4. <body> İçeriği

Header Bölümü

  • Başlık: "HTML + CSS + JS Eğitimi"

  • Altında kısa açıklama: "Bu dosyada temel web teknolojileri tek bir yerde anlatılıyor."

Navigasyon

  • Sayfa içinde HTML, CSS ve JavaScript bölümlerine hızlı erişim sağlayan bağlantılar.

Main İçerik

HTML Bölümü

  • HTML'nin ne olduğu ve temel etiketleri (başlık, paragraf, bağlantı, görsel, liste) açıklanıyor.

CSS Bölümü

  • CSS'nin ne olduğu, temel stil özellikleri (renk, arka plan, iç ve dış boşluk, kenar yumuşatma) anlatılıyor.

JavaScript Bölümü

  • JavaScript’in web sayfalarını nasıl dinamik hale getirdiği, kullanıcı etkileşimlerini yönettiği anlatılıyor.

  • Kullanıcıdan isim girmesi isteniyor, butona basınca selam veriliyor.

5. JavaScript Kısmı

function greetUser() {
  const name = document.getElementById("nameInput").value;
  if (name.trim() === "") {
    alert("Lütfen adını gir!");
    return;
  }
  const outputDiv = document.getElementById("output");
  outputDiv.innerText = "Merhaba, " + name + "! Web geliştirmeye hoş geldin 🚀";
  outputDiv.style.display = "block";
}

  • greetUser fonksiyonu butona tıklanınca çalışır.

  • nameInput alanından ismi alır, boşsa uyarı verir.

  • Girilen isimle kişisel bir selam mesajı gösterir ve gizli olan output kutusunu görünür yapar.

6. Genel Değerlendirme

  • Sayfa sade ve temel düzeyde hazırlanmış, HTML, CSS ve JavaScript’in en basit örnekleri bir arada.

  • Eğitim amaçlıdır, temel web teknolojilerinin temel mantığını kavramak için yeterlidir.

  • Kodlar sade, anlaşılır ve açıklayıcı yorumlar içerir.

https://github.com/Web-Gelistirme-Meclisi/basichtml.edu/blob/main/Frontend/edu1.html

0
Subscribe to my newsletter

Read articles from Çınar Yalçınkaya directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5CSSjslessons

Written by

Çınar Yalçınkaya
Çınar Yalçınkaya