web programming – Dr. Vecdi Emre Levent

HTML

1. Aşağıdaki HTML kodunun tarayıcıdaki varsayılan görünümü nasıl olur?

<main>
<h1>Kampüs Kütüphanesi</h1>
<p>Final haftasında 24 saat açıktır.</p>
<ul>
    <li>Sessiz alan</li>
    <li>Grup çalışma odası</li>
    <li>Bilgisayar laboratuvarı</li>
</ul>
<p><a href=”#”>Detaylı kurallar</a></p>
</main>

2. Rektörlük, Açık Kampüs Günü için lise öğrencilerine yönelik tek sayfalık bir tanıtım sayfası istemektedir. Sayfada etkinliğin adı, kısa tanıtım, gün akışı, ziyaretçi notları ve iletişim bilgileri bulunacaktır. Bu sayfanın HTML’ini yazınız.

3. Aşağıdaki HTML kodunun tarayıcıdaki varsayılan görünümü nasıl olur?

<section>
<h2>Atölye Programı</h2>
<table>
    <tr><th>Saat</th><th>Oturum</th></tr>
    <tr><td>09.30</td><td>Kayıt</td></tr>
    <tr><td>10.30</td><td>Semantik İçerik</td></tr>
    <tr><td>13.00</td><td>Formlar</td></tr>
</table>
</section>

4. Aşağıdaki görselde görülen atölye kartının yalnızca HTML iskeletini yazınız.

CSS

6. Aşağıdaki basit HTML yapısını görsele en yakın hale getirecek CSS’i yazınız.

HTML

<header class=”ust”>
<div class=”logo”>Campus Nutrition Summit</div>
<nav>
    <a href=”#”>Program</a>
    <a href=”#”>Biletler</a>
    <a href=”#”>İletişim</a>
</nav>
</header>

<main>
<section class=”hero”>
    <h1>Daha sağlıklı kampüs, daha bilinçli seçimler</h1>
    <p>Kısa açıklama metni</p>
    <a href=”#”>Bilet Al</a>
    <a href=”#”>Programı İncele</a>
</section>

<section class=”kartlar”>
    <article><h2>Atölyeler</h2><p>Kısa açıklama</p><a href=”#”>Detay</a></article>
    <article><h2>Uzman Konuklar</h2><p>Kısa açıklama</p><a href=”#”>Detay</a></article>
    <article><h2>Kampüs Standları</h2><p>Kısa açıklama</p><a href=”#”>Detay</a></article>
</section>
</main>

7. Aşağıdaki HTML ve CSS kodları çalıştırıldığında tarayıcıda nasıl bir görünüm oluşur?

HTML

<article class=”card”>
<h2>FBU Lab</h2>
<p>CSS tekrar günü</p>
<a href=”#”>İncele</a>
</article>

CSS

.card{
width:260px;
padding:24px;
border:2px solid #244f7c;
border-radius:18px;
background:#fff;
}
.card h2{margin:0 0 10px;}
.card a{
display:inline-block;
margin-top:12px;
padding:10px 16px;
background:#244f7c;
color:#fff;
border-radius:12px;
text-decoration:none;
}

8. Sağlıklı yaşam kulübü bu düz HTML için sakin renkli, ferah boşluklu ve kartlı bir görünüm istemektedir. Bu sayfanın CSS’ini yazınız.

HTML

<header class=”topbar”>
<h1>Campus Nutrition Summit</h1>
<nav>
    <a href=”#”>Program</a>
    <a href=”#”>Biletler</a>
    <a href=”#”>İletişim</a>
</nav>
</header>

<section class=”hero”>
<h2>Daha sağlıklı kampüs, daha bilinçli seçimler</h2>
<p>Kısa açıklama metni</p>
<a href=”#”>Bilet Al</a>
<a href=”#”>Programı İncele</a>
</section>

<section class=”cards”>
<article>Atölyeler</article>
<article>Uzman Konuklar</article>
<article>Kampüs Standları</article>
</section>

9. Aşağıdaki HTML ve CSS kodları çalıştırıldığında menü nasıl görünür?

HTML

<ul class=”menu”>
<li>Ana Sayfa</li>
<li class=”active”>Program</li>
<li>İletişim</li>
</ul>

CSS

.menu{
display:flex;
gap:18px;
list-style:none;
padding:0;
}
.menu li{
padding:10px 14px;
border-radius:12px;
background:#eef3f9;
color:#1f3653;
}
.menu .active{
background:#1f4f83;
color:#fff;
}

10. Bir seminer sitesindeki konuşmacı kartları masaüstünde üçlü, telefonda tekli görünmelidir. Aşağıdaki basit HTML yapısı için bu sonucu sağlayacak CSS’i yazınız.

HTML

<section class=”speakers”>
<article>Konuşmacı 1</article>
<article>Konuşmacı 2</article>
<article>Konuşmacı 3</article>
</section>

JavaScript

11. Aşağıdaki kod çalıştırıldığında kullanıcı +, + ve x2 butonlarına sırayla bastığında ekranda ne görülür?

<p id=”count”>1</p>
<button id=”add”>+</button>
<button id=”double”>x2</button>

<script>
let value = 1;
const count = document.getElementById(“count”);

document.getElementById(“add”).addEventListener(“click”, () => {
value += 1;
count.textContent = value;
});

document.getElementById(“double”).addEventListener(“click”, () => {
value *= 2;
count.textContent = value;
});
</script>

12. Aşağıdaki kod çalıştırıldığında önizleme alanında ne görünür?

<input id=”name” value=”Ece Yılmaz”>
<select id=”track”>
<option selected>Erişilebilir HTML</option>
</select>
<textarea id=”note”>İlk kez katılıyorum</textarea>

<div id=”preview”></div>

<script>
const name = document.getElementById(“name”).value;
const track = document.getElementById(“track”).value;
const note = document.getElementById(“note”).value;

document.getElementById(“preview”).innerHTML = `
<h3>${name}</h3>
<p>${track}</p>
<small>${note}</small>
`;
</script>

13. Aşağıdaki basit HTML yapısında boş masa sayısı giriş ve çıkış butonlarına göre değişmeli, sayı sıfıra düştüğünde uygun uyarı görünmelidir. Bu davranışı JavaScript ile yazınız.

HTML

<p id=”count”>8</p>
<button id=”enter”>Giriş</button>
<button id=”leave”>Çıkış</button>
<p id=”warning”></p>

14. Aşağıdaki kod çalıştırıldığında liste sayfa sonunda nasıl görünür?

<ul id=”tasks”>
<li>HTML tekrar</li>
<li>CSS kartları bitir</li>
<li>JS notlarını oku</li>
</ul>

<script>
document.querySelectorAll(“#tasks li”)[1].remove();
document.getElementById(“tasks”).insertAdjacentHTML(“beforeend”, “<li>Form sorularını çöz</li>”);
</script>

15. Aşağıdaki basit HTML yapısında, Detayları göster butonuna her basıldığında açıklama alanı açılıp kapanmalıdır. Bu davranışı JavaScript ile yazınız.

HTML

<button id=”toggle”>Detayları göster</button>
<p id=”detail” hidden>Atölye kontenjanı sınırlıdır.</p>

HTML + CSS + JS

16. Bir diyetisyen, danışanın boy ve kilo bilgisini girip ekranda BMI sonucunu ve kilo durumunu görmek istemektedir. Sonuç alanı girilen değerlere göre güncellenmeli; zayıf, normal, fazla kilolu ve obez sınıflarından uygun olanı belirgin biçimde göstermelidir. Çalışan bir frontend hazırlayınız.

17. Aşağıdaki görselde görülen workshop başvuru ve canlı önizleme ekranının çalışan frontend uygulamasını hazırlayınız.

Hafta	Notlar	İndirme
1	Introduction
2	Fundamentals
3	HTML I
4	HTML II
5	CSS
6	Javascript I
7	Javascript II
8	Vize
9
10
11
12
13
14
15	Final