IFGT Bilgi Basit Web Sayfası Örneği

DT · Pazartesi saat 11:32'de

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.

Kwisatz Haderach · Pazartesi saat 11:35'de

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?

id verdik

HTML:

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

→ JavaScript bu yazıyı bulabilsin diye

Butona tıklamayı yakaladık

HTML:

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

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

DT · Pazartesi saat 11:37'de

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

Bir durum değişkeni var

HTML:

let acikMi = false;

false → ilk durum
true → ikinci durum

Butona basınca kontrol ediyoruz

HTML:

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

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

IFGT Bilgi Basit Web Sayfası Örneği

IFGENTR Konu Bilgileri

DT

Bu Sayfada Ne Oluyor?​

HTML​

CSS​

JavaScript​

Sonuç​

Kwisatz Haderach

Burada Ne Oldu?​

id verdik​

DT

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

Mantığı Çok Basit​

Bir durum değişkeni var​

Sonuç​

Bu Sayfada Ne Oluyor?

HTML

CSS

JavaScript

Sonuç

Burada Ne Oldu?

id verdik

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

Mantığı Çok Basit

Bir durum değişkeni var

Sonuç