Bir yılda 4 mevsim bulunmaktadır. İklim krizi ve buzulların erimesinden dolayı mevsimlerin isimleri ve etkileri sürekli değişiklik göstermektedir. Yine de mevsimleri yazalım. İlkbahar, Yaz, Sonbahar, Kış. Bu uygulamamızda mevsimler ve mevsimlere ait ayları liste etiketi yardımıyla web sayfasında görüntüleyeceğiz. Bir yılda 4 mevsim ve her mevsim 3 aydan oluşmaktadır. Bunlar sıralı ve sırasız liste elemanı kullanarak listelemek istiyoruz.
Visual Studio 2022 programını açalım.
Create a new project diyerek yeni bir proje oluşturalım.
Dil olarak c#, platform olarak windows, ortam olarak web seçelim. Ekrana gelen şablonlardan Asp.Net Web Application(.Net Framework) seçelim. Proje ismi olarak MevsimlerKlasik belirleyelim. Framework 4.8 kalabilir. Create diyerek projeyi oluşturalım. Projenin içinde başlangıçta hiçbir dosyanın olmasını istemediğimiz için Empty diyelim. Bu arada Configure for HTTPS onay kutusunu kaldıralım. Tekrar Create diyerek projeyi oluşturalım.
Visual Studio 2022 programında web projesi gerçekleştirirken ekranda Toolbox, Solution Explorer ve Properties panellerinin olmasını sağlayalım. Eğer bunlardan biri yoksa View menüsünden bu panelleri ekleyelim.
Şimdi proje ismi üzerine fareyle gelelim. Burada farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add açılır menüsünü seçelim. Buradan New item diyalog penceresini açalım. Ekrana gelen dosya türlerinden HTML Page seçelim. Dosya ismi olarak index.html yazalım. Add diyerek projeye Html dosyasını eklemiş oluruz. Aşağıda bu dosyanın içeriği görüntülenmektedir.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Bir web sayfasının temel etiketleri burada görüntülenmektedir. Bunları html, head, title ve body olarak sayabiliriz. Web sayfası <!DOCTYPE html> bildirisi ile başlıyorsa bu web sayfasında html5 etiketleri kullanılacaktır anlamına gelir. Projeyi bu haliyle çalıştıralım. Böylece projenin doğru bir şekilde oluşturulup oluşturulmadığını kontrol etmiş oluruz.
Web sayfasında Türkçe karakterlerin doğru çalışması için html etiketine şu özelliği ekleyelim.
<html lang="tr">
Bir web sayfasında, Türkçe karakterleri görüntülemek için, yukarıdaki satırla birlikte aşağıdaki meta etiketinin de bulunması gerekir.
<meta charset="utf-8" />
Web sayfaları sadece masaüstü bilgisayarlarda görüntülenmez. Cep telefonları, tabletler, TVOS ortamı, akıllı tahtalar vasıtasıyla da web sayfaları görüntülenmektedir. Farklı boyutlarda bulunan cihazlarda web sayfalarının doğru bir şekilde görüntülenmesi için aşağıdaki meta etiketine ait özelliklerin tanımlanması gerekir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Burada title etiketi web sayfasının başlığını belirlemek için kullanılır.
<title>Mevsimler</title>
Web sayfalarında Html5 etiketlerinin yanında tasarım için BootStrap kütüphanesinin projeye eklenmesi gerekir. Bu işlemi gerçekleştirmenin birden fazla yolu vardır. Biz en kolayını kullanacağız. Proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Client-Side Library komut grubunu seçelim. Ekrana gelen diyalog penceresinde Library metin kutusuna bootstrap yazalım. Bu kütüphanenin en son versiyonu metin kutusunda görüntülenir. Install diyerek kütüphaneyi projeye ekleyelim. BootStrap kütüphanesine ait tüm dosyalar lib klasörü altına kopyalanır.
Web sayfalarının Client tarafında javascript ve jquery kodlarını kullanmak için jquery kütüphanesinin projeye eklenmesi gerekir. Bu işlemi gerçekleştirmenin birden fazla yolu vardır. Biz en kolayını kullanacağız. Proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Client-Side Library komut grubunu seçelim. Ekrana gelen diyalog penceresinde Library metin kutusuna jquery yazalım. Bu kütüphanenin en son versiyonu metin kutusunda görüntülenir. Install diyerek kütüphaneyi projeye ekleyelim. Jquery kütüphanesine ait tüm dosyalar lib klasörü altına kopyalanır.
Şimdi yüklediğimiz bu kütüphaneleri index.html web sayfasına eklememiz gerekir. lib klasörü altında bootstrap.min.css dosyasını bulalım. Dosya isminin üzerinde farenin sol tuşuna basalım. Basılı tutup dosyayı web sayfasında title etiketi altına bırakalım. Böylece web sayfasına aşağıdaki satır eklenecektir.
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
Aynı şekilde jquery.min.js ve bootstrap.min.js dosyalarını da web sayfasına ekleyelim. Web sayfasında aşağıdaki satırlar yer almalıdır.
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
Web sayfasını kaydedip çalıştıralım. Böylece kütüphanelerin web sayfasına hatasız bir şekilde eklendiğini görürsünüz. Şimdi body etiketi arasında web sayfasında görüntülenecek kısma gelelim. Burada h1 etiketiyle Mevsimler mesajını görüntüleyelim. <p> etiketiyle de Bir yılda 4 mevsim vardır açıklamasını gösterelim.
<!--h1 etiketiyle Mevsimler mesajını görüntüleyelim.-->
<h1>Mevsimler</h1>
<!--p etiketiyle de Bir yılda 4 mevsim vardır
açıklamasını gösterelim.-->
<p>Bir yılda <strong>4 mevsim</strong> vardır.<br />
<em>İlkbahar, Yaz, Sonbahar, Kış</em>.
<br /> Bir mevsim <ins>3 ay</ins>
sürmektedir. <br />Örneğin <u>İlkbahar</u> mevsimi
<del>Ocak</del> ayında değil,
<ins>Mart</ins> ayında başlar.
</p>
Yukarıdaki satırlarda <!-- .......--> etiketi açıklama satırı için kullanılır. Kullanıcıyı bilgilendirmek amaçlı yazılmaktadır. İçinde yazılan ifadeler görüntülenmez.
(strong> etiketi içinde yer alan ifadeyi kalın yazdırmak için kullanılır. <b> etiketiyle aynı işi yapar.
<em> etiketi içindeki ifadeyi italik olarak yazdırır. <i> etiketiyle aynı işi yapar.
<br /> etiketi kendisinden sonra yazılan ifadeyi bir satır aşağıya indirir. Enter tuşuna basılmış gibi muamelede bulunur.
<del> etiketi içinde yer alan ifadenin üzerini çizer.
<ins> etiketi ise içindeki ifadenin altını çizer. <u> etiketiyle aynı işi yapar.
Projeyi kaydedip çalıştıralım.
Şimdi ilkbahara ait ayları sıralı liste elemanı kullanarak listeleyelim.
<h6>İlkbahar</h6>
<ol>
<li>Mart</li>
<li>Nisan</li>
<li>Mayıs</li>
</ol>
Yaz mevsimini sırasız liste elamanı olarak ve küçük harfli a, b, c başlıklarını kullanarak listeleyelim.
<h6>Yaz</h6>
<ol type="a">
<li>Haziran</li>
<li>Temmuz</li>
<li>Ağustos</li>
</ol>
Sonbahar mevsimini sırasız liste elemanı olarak ve başlıkları kare olacak şekilde listeleyelim.
<h6>Sonbahar</h6>
<ul type="square">
<li>Eylül</li>
<li>Ekim</li>
<li>Kasım</li>
</ul>
Kış mevsimini tanım listesi etiketlerini kullanarak listeleyelim.
<dl>
<dt>Kış</dt>
<dd>Kasım</dd>
<dd>Aralık</dd>
<dd>Ocak</dd>
</dl>
Projeyi kaydedip çalıştıralım. Mevsimleri ve mevsimlere ait ayların farklı listeleme etiketleriyle listelendiğini görürsünüz.
Web sayfasının ham halini oluşturduk. Bootstrap kullanarak web sayfasını güzelleştirelim. Öncelikle başlık kısmını halledeceğiz.
<div class="container mt-5">
<!-- Başlık ve açıklama -->
<h1 class="text-center text-primary mb-4">Mevsimler</h1>
<p class="lead text-center">
Bir yılda <strong>4 mevsim</strong> vardır.<br />
<em>İlkbahar, Yaz, Sonbahar, Kış</em>.
<br /> Bir mevsim <ins>3 ay</ins> sürmektedir. <br />
Örneğin <u>İlkbahar</u> mevsimi <del>Ocak</del> ayında değil,
<ins>Mart</ins> ayında başlar.
</p>
</div>
Şimdi ilk mevsimi düzenleyelim.
<!-- İlkbahar mevsimi -->
<div class="row my-4">
<div class="col-md-6">
<h6 class="text-success">İlkbahar</h6>
<ol class="list-group">
<li class="list-group-item">Mart</li>
<li class="list-group-item">Nisan</li>
<li class="list-group-item">Mayıs</li>
</ol>
</div>
</div>
İkinci mevsimi düzenleyelim.
<!-- Yaz mevsimi -->
<div class="row my-4">
<div class="col-md-6">
<h6 class="text-danger">Yaz</h6>
<ol type="a" class="list-group">
<li class="list-group-item">Haziran</li>
<li class="list-group-item">Temmuz</li>
<li class="list-group-item">Ağustos</li>
</ol>
</div>
</div>
Üçüncü mevsimi düzenleyelim.
<!-- Sonbahar mevsimi -->
<div class="row my-4">
<div class="col-md-6">
<h6 class="text-warning">Sonbahar</h6>
<ul class="list-group">
<li class="list-group-item">Eylül</li>
<li class="list-group-item">Ekim</li>
<li class="list-group-item">Kasım</li>
</ul>
</div>
</div>
Son mevsimi halledelim.
<!-- Kış mevsimi -->
<div class="row my-4">
<div class="col-md-6">
<h6 class="text-primary">Kış</h6>
<ul class="list-group">
<li class="list-group-item">Aralık</li>
<li class="list-group-item">Ocak</li>
<li class="list-group-item">Şubat</li>
</ul>
</div>
</div>
Web sayfasına bootstrap uygulayarak sayfa tasarımını daha modern hale getirmiş olduk. Peki hangi değişiklikleri yaptık, onları açıklayalım.
-
Başlık ve Metin: Bootstrap'in text-center, text-primary, lead sınıfları kullanılarak daha modern ve düzgün bir tasarım sağlandı.
-
Mevsim Listeleri: Liste elemanlarına list-group sınıfı eklendi ve mevsim başlıklarına farklı renklerle dikkat çekildi (text-success, text-danger, text-warning, text-info).
-
Grid Sistemi: Bootstrap'in grid sistemi (row, col-md-6) kullanılarak içerik düzgün bir şekilde hizalandı.
-
Margin ve Padding: Aralıkları ayarlamak için mt-5, mb-4, my-4 gibi Bootstrap sınıfları eklendi.
Şimdi Acordion yapı oluşturarak mevsimlere tıklandığında ayların görüntülenmesini sağlayalım. Öncelikle aşağıdaki dosyanın head etiketi arasına eklenmesi gerekir.
<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
Mevsimleri ve ayları aşağıdaki gibi düzenleyelim.
<!-- Akordeon Başlangıcı -->
<div class="accordion" id="mevsimlerAccordion">
<!-- İlkbahar -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
İlkbahar
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#mevsimlerAccordion">
<div class="accordion-body">
<strong>İlkbahar</strong> mevsimi, Mart, Nisan
ve Mayıs aylarından oluşur.
<div class="list-group">
<div class="list-group-item">Mart</div>
<div class="list-group-item">Nisan</div>
<div class="list-group-item">Mayıs</div>
</div>
</div>
</div>
</div>
<!-- Yaz -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Yaz
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#mevsimlerAccordion">
<div class="accordion-body">
<strong>Yaz</strong> mevsimi, Haziran, Temmuz
ve Ağustos aylarından oluşur.
<div class="list-group">
<div class="list-group-item">Haziran</div>
<div class="list-group-item">Temmuz</div>
<div class="list-group-item">Ağustos</div>
</div>
</div>
</div>
</div>
<!-- Sonbahar -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
Sonbahar
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
aria-labelledby="headingThree" data-bs-parent="#mevsimlerAccordion">
<div class="accordion-body">
<strong>Sonbahar</strong> mevsimi, Eylül, Ekim
ve Kasım aylarından oluşur.
<div class="list-group">
<div class="list-group-item">Eylül</div>
<div class="list-group-item">Ekim</div>
<div class="list-group-item">Kasım</div>
</div>
</div>
</div>
</div>
<!-- Kış -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseFour"
aria-expanded="false" aria-controls="collapseFour">
Kış
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse"
aria-labelledby="headingFour" data-bs-parent="#mevsimlerAccordion">
<div class="accordion-body">
<strong>Kış</strong> mevsimi, Aralık, Ocak
ve Şubat aylarından oluşur.
<div class="list-group">
<div class="list-group-item">Aralık</div>
<div class="list-group-item">Ocak</div>
<div class="list-group-item">Şubat</div>
</div>
</div>
</div>
</div>
</div>
<!-- Akordeon Bitişi -->
Web sayfasını kaydedip çalıştıralım. Modern bir yapının oluştuğunu görürsünüz. Son olarak mevsimlere ait açıklama kısmına bir animasyon ekleyelim.
<style>
#aciklama {
display: none;
}
</style>
<script>
$(function () {
$('html, body').css("overflow", "hidden");
$("#aciklama").show(5000).fadeIn(5000).delay(1000).
hide(5000).fadeOut(1000, function () {
setTimeout(function () {
$('html, body').css("overflow", "auto");
}, 1000);
});
});
</script>
Animasyonun düzgün bir şekilde çalıştığını görürsünüz.