Web sayfası tasarımında satırlar ve sütunlar önemli yer tutmaktadır. Sayfa tasarımı satır bazında yapılabildiği gibi sütun bazında da yapılabilir. Kütüphaneler bu yöntemleri kullanarak sayfa tasarımı konusunda programcıya yardımcı olur.
Şimdi uygulamayı yapalım.
Adım 1: Öncelikle web sayfasının tasarımını gerçekleştirmeliyiz. Bunun için paint programını kullanabiliriz.
Adım 2: Visual Studio 2022 programını açınız. Bunun için devenv komutunu kullanabilirsiniz.
Adım 3: Create a new project diyerek yeni bir proje oluşturunuz. Dil olarak c#, platform olarak Windows, ortam olarak Web seçiniz. Ekrana gelen şablonlardan Asp.NET Web Applicatin(.Net Framework) seçiniz.
Adım 4: Proje ismini TakvimKlasik olarak belirleyiniz. FrameWork olarak 4.8 tercih ediniz. Projenizi saklayacak sunucunun desteklediği versiyonu dikkate alarak bu tercihi yapınız. Böylece projeniz hatasız bir şekilde açılacaktır. Create diyerek işlemi tamamlayınız.
Adım 5: Ekrana gelen pencerede Empty seçeneğini seçiniz. Bu seçenek boş bir web projesi oluşturmak için kullanılır. Sağ tarafta yer alan onay kutularından Configure for HTTPS seçeneğini kaldırın. Bu seçenek aktif olursa proje IPv6 sistemini kullanmak için bizden bir sertifika yüklememizi isteyecektir. Daha sonra Create diyerek işlemi tamamlayalım.
Adım 6: Projeye terminal tabanlı bir web sayfası ekleyelim. Bunun proje ismini seçelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add komut grubunu seçelim. Burada açılan pencereden HTML Page komutunu seçelim. Ekrana gelen pencerede web sayfasının ismini takvim olarak belirleyelim. Daha sonra Ok diyerek web sayfasını tamamlayalım. Web sayfasında aşağıdaki kodlar otomatik olarak yazılır.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Adım 7: Web sayfasının tüm araçlarda düngün çalışması için gerekli olam satırı ekleyelim. Projeyi çalıştırıp sonucu görelim.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Adım 8: Web sayfasının pencere başlığını <title> etiketi arasına yazalım. Projeyi çalıştırıp sonucu görelim.
<title>Takvim Tasarımı</title>
Adım 9: Web sayfasında css ve javascript kodları kullanacağımız için head etiketi arasına gerekli kod bloklarını yazalım. Projeyi çalıştırıp sonucu görelim.
<script>
/* Javascript kodlarının tanımlanacağı blok
</script>
<style>
/* CSS özelliklerinin tanımlanacağı blok*/
</style>
Adım 10: Tasarım ekranına geri dönelim. Bu tasarımı gerçekleştirmek için en dışta page isminde bir kutu tanımlayalım. Bu kutu web sayfamızın dış tanımlamasını oluşturacak. Projeyi çalıştırıp sonucu görelim.
<div id="page">
</div>
Adım 11: Bu page kutusunun genişliğini 1000, yüksekliğini 1800, arka plan rengini açık mavi yapalım. Kutuyu ekranın ortasına alalım. Projeyi çalıştırıp sonucu görelim.
#page {
/* Sayfanın arka plan rengini açık mavi yapar
(hex kodu #0df: açık mavi) */
background-color: #0df;
/* Sayfanın üst ve alt kenarlarına sıfır boşluk,
sağ ve sol kenarlara otomatik boşluk ekler, böylece sayfa ortalanır */
margin: 0 auto;
/* Sayfanın genişliği 1210 piksel olarak ayarlanır */
width: 1210px;
/* Sayfanın yüksekliği 1800 piksel olarak ayarlanır */
height: 1800px;
}
Adım 12: Sayfanın başlığı için header isminde bir kutu oluşturalım. Projeyi çalıştırıp sonucu görelim.
<div id="header">
</div>
Adım 13: Oluşturduğumuz header isimli kutunun css özelliklerini belirleyelim. Projeyi çalıştırıp sonucu görelim.
#header {
/* Başlığın arka plan rengini siyah yapar (hex kodu #000: siyah) */
background-color: #000;
/* Başlığın genişliğini 1210 piksel olarak ayarlar */
width: 1210px;
/* Başlığın yüksekliğini 130 piksel olarak ayarlar */
height: 130px;
/* Başlık ile altındaki öğe arasına 5 piksel boşluk ekler */
margin-bottom: 5px;
}
Adım 14: İçerik olarak her satırda 3 sütun olan 3 satır oluşturalım. Satırlar ve sütunlar aynı özellikte olduğu için kutular için class tanımlayacağız. Öncelikle satir isminde ilk kutuyu oluşturalım. Projeyi çalıştırıp sonucu görelim.
<div class="satir">
</div>
Adım 15: Oluşturulan satir sınıfı için gerekli css tanımlamalarını yapalım. Projeyi çalıştırıp sonucu görelim.
.satir {
/* Satırın genişliğini 1210 piksel olarak ayarlar */
width: 1210px;
/* Satırın yüksekliğini 400 piksel olarak ayarlar */
height: 400px;
/* Başlık ile altındaki öğe arasına 5 piksel boşluk ekler */
margin-bottom: 5px;
}
Adım 16: Her satır için 3 tane sütun oluşturalım. Sütunların sınıf isimlerini sırasıyla left, middle, right olarak verelim. Birinci sütunu oluşturalım. Projeyi çalıştırıp sonucu görelim.
<div class="satir">
<div class="left">
</div>
</div>
Adım 17: İlk sütunumuz olan left sınıfının css tanımlamalarını yapalım. Projeyi çalıştırıp sonucu görelim.
.left {
/* Elemanın arka plan rengini siyah yapar (hexadecimal
renk kodu: #000) */
background-color: #000;
/* Elemanın genişliğini 400 piksel olarak ayarlar */
width: 400px;
/* Elemanın sağ tarafında 5 piksel boşluk bırakır */
margin-right: 5px;
/* Elemanın yüksekliğini 400 piksel olarak ayarlar */
height: 400px;
/* Elemanın sol tarafa hizalanmasını sağlar, diğer
içerikler sağ tarafa akar */
float: left;
}
Adım 18: İkinci sütunu oluşturalım. Projeyi çalıştırıp sonucu görelim.
<div class="satir">
<div class="left">
</div>
<div class="middle">
</div>
</div>
Adım 19: middle sınıfının css tanımlamalarını yapalım. Projeyi çalıştırıp sonucu görelim.
.middle {
background-color: #000;
/* Elemanın genişliğini 400 piksel olarak ayarlar */
width: 400px;
/* Elemanın sağ tarafında 5 piksel boşluk bırakır */
margin-right: 5px;
/* Elemanın yüksekliğini 400 piksel olarak ayarlar */
height: 400px;
/* Elemanın sol tarafa hizalanmasını sağlar, diğer
içerikler sağ tarafa akar */
float: left;
}
Adım 20: Üçüncü sütunu oluşturalım. Projeyi çalıştırıp sonucu görelim.
<div class="satir">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
Adım 21: right sınıfının css tanımlamalarını yapalım. Projeyi çalıştırıp sonucu görelim.
.right {
background-color: #000;
/* Elemanın genişliğini 400 piksel olarak ayarlar */
width: 400px;
/* Elemanın yüksekliğini 400 piksel olarak ayarlar */
height: 400px;
/* Elemanın sol tarafa hizalanmasını sağlar,
diğer içerikler sağ tarafa akar */
float: left;
}
Adım 22: İlk satırımıza ait tanımlamaları yaptık. Diğer satırlar tanımladığımız bu satırla aynı özelliklere sahip olacağından sadece html tanımlamalarını yapmamız yeterli olacaktır. Projeyi çalıştırıp sonucu görelim.
<div class="satir">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
<div class="satir">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
<div class="satir">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
<div class="satir">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
Adım 23: Web sayfamıza ait içerik bölümünü tanımladık. Son olarak tasarımın footer bölümünü yapalım. Projeyi çalıştırıp sonucu görelim.
<div id="footer">
</div>
Adım 24: footer kutusuna ait css özelliklerini tanımlayalım. Projeyi çalıştırıp sonucu görelim.
#footer {
/* Elemanın arka plan rengini siyah yapar (hexadecimal
renk kodu: #000) */
background-color: #000;
/* Elemanın genişliğini 400 piksel olarak ayarlar */
width: 1210px;
/* Elemanın yüksekliğini 400 piksel olarak ayarlar */
height: 50px;
/* Elemanın sol tarafa hizalanmasını sağlar, diğer
içerikler sağ tarafa akar */
float: left;
}
Adım 26: header kutusunun içine "2025 Yılı Takvimi" başlığını yazalım. Bunun için h1 etiketini kullanalım.
<div id="header">
<h1>2025 Yılı Takvimi</h1>
</div>
Adım 27: İlk satırda yer alan kutulara sırasıyla Ocak, Şubat, Mart yazalım. Bunun için h3 etiketini kullanalım.
<div class="satir">
<div class="left">
<h3>Ocak</h3>
</div>
<div class="middle">
<h3>Şubat</h3>
</div>
<div class="right">
<h3>Mart</h3>
</div>
</div>
Adım 28: İkinci satırda yer alan kutulara sırasıyla Nisan, Mayıs, Haziran yazalım. Bunun için h3 etiketini kullanalım.
<div class="satir">
<div class="left">
<h3>Nisan</h3>
</div>
<div class="middle">
<h3>Mayıs</h3>
</div>
<div class="right">
<h3>Haziran</h3>
</div>
</div>
Adım 29: Üçüncü satırda yer alan kutulara sırasıyla Temmuz, Ağustos, Eylül yazalım. Bunun için h3 etiketini kullanalım.
<div class="satir">
<div class="left">
<h3>Temmuz</h3>
</div>
<div class="middle">
<h3>Ağustos</h3>
</div>
<div class="right">
<h3>Eylül</h3>
</div>
</div>
Adım 30: Dördüncü satırda yer alan kutulara sırasıyla Ekim, Kasım, Aralık yazalım. Bunun için h3 etiketini kullanalım.
<div class="satir">
<div class="left">
<h3>Ekim</h3>
</div>
<div class="middle">
<h3>Kasım</h3>
</div>
<div class="right">
<h3>Aralık</h3>
</div>
</div>
Adım 31: Son olarak footer bölümüne "Miladi Takvim" yazalım. Bunun için h1 etiketini kullanalım.
<div id="footer">
<h1>Miladi Takvim</h1>
</div>
Adım 32: Web sayfasını çalıştırdığımızda ekranda yazdığımız yazıları göremeyiz. Çünkü yazının rengi ile birlikte kutunun arkaplan rengi siyah olduğu için görünmez. h1 ve h3 etiketleriyle tanımladığımız yazıların rengini beyaz yapalım.
h1, h3 {
color: white;
}
Adım 33: Web sayfasını çalıştırdığımızda yazıların sol üst köşede listelendiğini görürsünüz. Şimdi yazıyı yatayda ortalayalım. Büyüklüğünü ise 20px yapalım. Fontunu Arial yapalım. Yazıların tamamını büyük harfe dönüştürelim.
h1, h3 {
/* Yazı rengini beyaz olarak ayarlar. */
color: white;
/* Yazı tipini Arial olarak belirler. */
font-family: Arial;
/* Yazı boyutunu 20 piksel olarak ayarlar. */
font-size: 20px;
/* Metni yatayda ortalar. */
text-align: center;
/* Metni büyük harfe dönüştürür. */
text-transform: uppercase;
}
Adım 34: Web sayfasını çalıştırdığımızda yazıların verilen özelliklere göre listelendiğini görürsünüz. Şimdi yazıyı dikeyde ortalayalım.
#header, #footer, .left, .middle, .right {
display: flex;
/* Dikey olarak ortalar */
align-items: center;
/* Yatay olarak ortalar */
justify-content: center;
}
Adım 35: Web sayfasını çalıştıralım. Dikkat ettiyseniz web sayfası tüm aletlerde düzgün görüntülenmemektedir. Web sayfalarının tüm aletlerde düzgün görüntülenmesi için Html5 etiketleri ve tasarım için BootStrap kütüphanesinin kullanılması 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>
Adım 36: Yukarıda verilen web sayfasını yeniden tasarlayalım. Web sayfasındaki kod sayısı azalacak ve sayfa daha işlevsel olacaktır. Öncelikle body etiketini tanımlayalım.
<body class="m-0 m-auto">
m-0 : Bu, tüm kenarlar (üst, alt, sağ, sol) için dış boşluğun (margin) sıfır olduğunu belirtir. Yani, elemanın çevresinde boşluk bırakmaz.
m-auto : Elemanın otomatik olarak yatayda (sol ve sağ) ortalanmasını sağlar. Genellikle genişliği belirtilen blok düzeyindeki elemanları (örneğin, div, header, body) ortalamak için kullanılır.
Adım 37: Tasarım için kullanılan dış kutuyu tanımlayalım.
<div class="container">
</div>
container: İçeriği belirli bir genişlikte tutarak düzenler ve sayfanın ortasına hizalar. Sayfanın farklı ekran boyutlarına (responsive) uyum sağlaması için kullanılır. Bootstrap’te container, farklı ekran boyutlarına göre esnek davranan, sabit genişlikli bir kap oluşturur.
Mobil cihazlarda (xs): Genişliği tamamen doldurur.
Daha büyük ekranlarda: Belirlenen sabit genişliklerle içerik merkezi bir konumda yer alır.
Adım 38: Tasarıma ait header bağlığını tanımlayalım. Başlık olarak 2025 Yılı Takvimi bilgisini yazalım.
<!-- Header -->
<header class="bg-dark text-white text-center py-3 mb-1">
<h1>2025 Yılı Takvimi</h1>
</header>
class="bg-dark": Arka planı koyu bir renk yapar. Bootstrap'te genelde siyah veya koyu gri tonlarında bir arka plan uygular.
class="text-white": Metin rengini beyaza çevirir. Bootstrap'te kullanılarak içerikteki yazının beyaz renkte görünmesi sağlanır.
class="text-center": Metni yatay olarak ortalar. İçerikteki yazılar, görseller ya da diğer elemanlar yatayda ortalanır.
class="py-3": Dikey boşluk (padding) uygular, yani elemanın üstüne ve altına 1.5rem (24px) boşluk ekler. p padding anlamında, y ise vertical (dikey) anlamında kullanılır.
class="mb-1": Alt tarafa 0.25rem (4px) boşluk ekler. m margin (dış boşluk), b ise bottom (alt) anlamında kullanılır.
Adım 39: Tasarıma ait içerik bölümünün ilk satırını tanımlayalım.
<!-- İçerik -->
<section class="row g-1 gy-1 mb-1">
</section>
row : Bootstrap'te kullanılır ve bir satır oluşturur. Genellikle col sınıfıyla birlikte kullanılarak grid (ızgara) sisteminde sütunları hizalar. Bu sınıf, elemanları yatayda sıralamak için kullanılır.
g-1 : Grid (ızgara) sisteminde sütunlar arasındaki boşluğu 1 birim (0.25rem / 4px) olarak ayarlar. g grid gap (ızgara boşluğu) anlamına gelir ve hem yatay hem de dikey boşlukları düzenler.
gy-1 : Sadece dikeyde (vertical) 1 birim (0.25rem / 4px) boşluk bırakır. gy vertical gap (dikey boşluk) anlamına gelir ve satırlar arasındaki boşluğu ayarlamak için kullanılır.
mb-1 : Alt kısma 1 birim (0.25rem / 4px) dış boşluk (margin) ekler. m margin (dış boşluk), b bottom (alt) anlamında kullanılır.
Adım 40: Tasarıma ait içerik bölümünün ilk satırında ilk sütunu tanımlayalım.
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 1. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12">
col-lg-4: Bootstrap grid sisteminde büyük ekranlar (large, yani 992px ve üstü genişlikteki cihazlar) için elemanın genişliğinin 12 sütunluk yapının 4 sütununu kaplamasını sağlar. Yani, geniş ekranlarda eleman sayfanın üçte birini kaplar.
col-md-6: Orta boyutlu ekranlar (medium, yani 768px ile 991px genişlikteki cihazlar) için elemanın genişliğini 6 sütuna ayarlar. Orta boyutlu ekranlarda eleman sayfanın yarısını kaplar.
col-12: Küçük ekranlar (mobile-first tasarım yaklaşımıyla, yani 576px ve daha küçük cihazlar) için elemanın tam genişlikte, yani 12 sütunun tamamını kaplamasını sağlar. Küçük cihazlarda eleman tam genişlikte görünür.
<div class="bg-dark text-white p-5 h-100">
bg-dark: Arka plan rengini koyu yapar (genellikle siyah ya da koyu gri tonları). Bu sınıf Bootstrap'te arka plan rengini değiştirmek için kullanılır.
text-white: Metin rengini beyaza ayarlar, koyu arka plan üzerinde beyaz metin görünmesini sağlar.
p-5: Elemanın tüm kenarlarına 3rem (48px) iç boşluk (padding) ekler. p padding anlamına gelir ve hem yatay hem de dikey boşlukları ayarlar.
h-100: Elemanın yüksekliğini yüzde 100 yapar. Bu sınıf, elemanın ebeveyni kadar yüksek olmasını sağlar.
Adım 41: Tasarıma ait içerik bölümünün ilk satırında ikinci sütunu tanımlayalım.
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 2. Sütun içeriği -->
</div>
</article>
Adım 41: Tasarıma ait içerik bölümünün ilk satırında üçünü sütunu tanımlayalım.
<article class="col-lg-4 col-md-6 col-12 tablet">
<div class="bg-dark text-white p-5 h-100">
<!-- 3. Sütun içeriği -->
</div>
</article>
Adım 42: Tasarıma ait içerik bölümünün ilk satırında yer alan tüm sütunları tanımladık. Bu satırdan tasarım ekranında 3 tane daha olması gerekir. Bunları da tanımlayalım.
<section class="row g-1 gy-1 mb-1">
<!-- 2. Satır -->
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 4. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 5. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12 tablet">
<div class="bg-dark text-white p-5 h-100">
<!-- 6. Sütun içeriği -->
</div>
</article>
</section>
<section class="row g-1 gy-1 mb-1">
<!-- 3. Satır -->
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 7. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 8. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12 tablet">
<div class="bg-dark text-white p-5 h-100">
<!-- 9. Sütun içeriği -->
</div>
</article>
</section>
<section class="row g-1 gy-1 mb-1">
<!-- 4. Satır -->
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 10. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100">
<!-- 11. Sütun içeriği -->
</div>
</article>
<article class="col-lg-4 col-md-6 col-12 tablet">
<div class="bg-dark text-white p-5 h-100">
<!-- 12. Sütun içeriği -->
</div>
</article>
</section>
Adım 43: Tasarımda aylara ait olan kutuların yükseklikleri için gerekli css tanımlamasını yapalım.
<style>
article {
min-height: 450px; /* Yüksekliği artırılmış */
}
</style>
Adım 44: Web sayfasını tablette açtığımızda birinci satırda 2 ay, ikinci satırda ise 1 ay görüntülenir. Bu sorunu çözmek için aşağıdaki media tanımlamasını yapalım.
/* Medya sorgusu: Tablet görünümünde 1. satırda 2 sütun,
2. satırda 1 sütun */
@media (min-width: 768px) and (max-width: 991px) {
.tablet {
flex-direction: column; /* Tek sütun yapıyoruz */
flex: 0 0 100%; /* %100 genişlikte sütun */
max-width: 100%; /* %100 genişlikte sütun */
}
}
Adım 45: İçerik bölümünde ilk kutuya Ocak yazısını ekleyelim.
<article class="col-lg-4 col-md-6 col-12">
<div class="bg-dark text-white p-5 h-100 d-flex
justify-content-center align-items-center">
<h2>Ocak</h2>
</div>
</article>
d-flex: Elemanları esnek (flex) bir kutu modeline sokar.
justify-content-center: İçeriği yatayda ortalar.
align-items-center: İçeriği dikeyde ortalar.
Adım 46: İçerik bölümünde ilgili sütunlara diğer ayları siz ekleyiniz. Son olarak footer bölümüne yazı ekleyelim.
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
<h1>Miladi Takvim</h1>
</footer>
Adım 47: Web sayfasını çalıştıralım. Sayfanın düzgün bir şekilde çalıştığını görürsünüz.
Web sayfasında aylara ait günleri ekleme işini sonra yapacağız.