Bilgi Basit Web Sayfası Örneği

  • Konbuyu başlatan DT
  • Başlangıç tarihi
  • Cevaplar : 2
  • Görüntüleme : 50
🟢 Konu yazarı şu anda aktif
DT

DT

Teknik Admin
Katılım
22 Ara 2025
Mesajlar
31
Tepkime puanı
23
IFGT Puan
8
Bu kodu index.html adlı bir dosyaya kaydet → çift tıkla → tarayıcıda aç ✅

Kod: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Benim İlk Web Sayfam</title>

    <!-- CSS (Görünüm) -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 50px;
        }

        h1 {
            color: #333;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- HTML (Yapı) -->
    <h1>Merhaba Dünya 🌍</h1>
    <p>Bu benim ilk web sayfam.</p>

    <button onclick="mesajGoster()">Tıkla</button>

    <!-- JavaScript (Davranış) -->
    <script>
        function mesajGoster() {
            alert("Butona tıkladın!");
        }
    </script>

</body>
</html>


🧠 Bu Sayfada Ne Oluyor?​


🔹 HTML​


  • Başlık (h1)
  • Paragraf (p)
  • Buton (button)

👉 Sayfada ne var?



🔹 CSS​


  • Arka plan rengi
  • Yazı tipi
  • Ortalamalar
  • Buton görünümü

👉 Nasıl görünüyor?



🔹 JavaScript​


  • Butona tıklanınca
  • Uyarı (alert) çıkıyor

👉 Ne yapıyor?



🎯 Sonuç​


  • Sayfa açılır
  • “Merhaba Dünya” yazar
  • Butona basınca mesaj çıkar

Bu, web’in en temel çalışma mantığıdır.
Devamını okumak için tıklayın...
 
Kwisatz Haderach

Kwisatz Haderach

Genel Sorumlu
Katılım
10 Mar 2024
Mesajlar
113
Tepkime puanı
45
IFGT Puan
18
Görüyorum arttırıyorum :)

Butona Basınca Yazı Değiştirme;
Aşağıdaki kodu yine index.html olarak kaydet → aç → butona bas

Kod: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Buton Örneği</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 50px;
        }

        h1 {
            color: #333;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- Değişecek yazı -->
    <h1 id="baslik">Merhaba Dünya 🌍</h1>

    <button onclick="yaziDegistir()">Tıkla</button>

    <script>
        function yaziDegistir() {
            document.getElementById("baslik").innerText = "Butona bastın 🎉";
        }
    </script>

</body>
</html>

🧠 Burada Ne Oldu?​


1️⃣ id verdik​

HTML: 
<h1 id="baslik">Merhaba Dünya 🌍</h1>

→ JavaScript bu yazıyı bulabilsin diye

2️⃣ Butona tıklamayı yakaladık
HTML: 
<button onclick="yaziDegistir()">Tıkla</button>

3️⃣ JavaScript ile yazıyı değiştirdik

HTML: 
document.getElementById("baslik").innerText = "Butona bastın 🎉";

  • getElementById → HTML elemanını bulur
  • innerText → içindeki yazıyı değiştirir
 
  • Beğen
Tepkiler: DT
DT

DT

Teknik Admin
Katılım
22 Ara 2025
Mesajlar
31
Tepkime puanı
23
IFGT Puan
8
:) Devam edelim o halde

Butona her basınca yazı değişsin (aç/kapa)

Şimdi butona her basınca yazı aç/kapa şeklinde değişsin yapıyoruz.
(Yani: tıkla → değiş, tekrar tıkla → eski haline dönsün.)


Aç / Kapa (Toggle) Yazı Örneği​

Aşağıdaki kodu index.html olarak kaydetip açabilirsin 👇

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Aç Kapa Yazı</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 50px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- Değişecek yazı -->
    <h1 id="baslik">Merhaba Dünya 🌍</h1>

    <button onclick="yaziDegistir()">Tıkla</button>

    <script>
        let acikMi = false; // durum bilgisi

        function yaziDegistir() {
            const baslik = document.getElementById("baslik");

            if (acikMi) {
                baslik.innerText = "Merhaba Dünya 🌍";
            } else {
                baslik.innerText = "Butona bastın 🎉";
            }

            acikMi = !acikMi; // durumu tersine çevir
        }
    </script>

</body>
</html>

🧠 Mantığı Çok Basit​


🔹 1️⃣ Bir durum değişkeni var​

HTML: 
let acikMi = false;

  • false → ilk durum
  • true → ikinci durum
🔹 2️⃣ Butona basınca kontrol ediyoruz

HTML: 
if (acikMi) {
   ...
} else {
   ...
}

🔹 3️⃣ En sonda durumu tersine çeviriyoruz

HTML: 
acikMi = !acikMi;

  • true → false
  • false → true

🧩 Sonuç​


  • İlk tık → Butona bastın 🎉
  • İkinci tık → Merhaba Dünya 🌍
  • Üçüncü tık → tekrar değişir
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst Alt