Web sayfalarında genellikle te sütun kullanılacaksa liste elemanlarından, birden fazla sütun kullanılacaksa tablo elemanından yararlanılır. Bu uygulamada Başakşehir'in 2024-2025 UEFA Konferans Ligi'ndeki grup aşaması maç programını hem liste hem tablo hem de bootstrap tema kullanarak web sayfasında listeleyeceğiz. Uefa bu sene yeni bir format deniyor. Takımlar birbiirnden farklı 6 takımla içeride ya da dışarıda maç yapacaklar. Böylece hem maç sayısı artacak hem de takımlar farklı takımlarla maç yaparak bir üst tura geçme imkanı sağlanacaktır.
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 UefaKonferansLigiBS2425Klasik 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>Başakşehir Konferans Ligi Maçları 2024-2025</title>
Web sayfasını liste biçiminde düzenleyelim.
<!DOCTYPE html>
<html>
<head>
<title>Başakşehir Konferans Ligi Maçları 2024-2025</title>
</head>
<body>
<h1>Başakşehir'in Konferans Ligi Rakipleri</h1>
<ol>
<li>2 Ekim 2024 - R. Wien (Ev)</li>
<li>24 Ekim 2024 - Celje (Deplasman)</li>
<li>7 Kasım 2024 - Kopenhag (Deplasman)</li>
<li>27 Kasım 2024 - Petrocub (Ev)</li>
<li>12 Aralık 2024 - Heidenheim (Ev)</li>
<li>19 Aralık 2024 - C. Brugge (Deplasman)</li>
</ol>
</body>
</html>
Hatırlarsanız tek sütun listeleneceği zaman liste elemanının kullanılabileceğini söylemiştik. Burada ise uzunlukları birbirinden farklı tarih ve takım adları görüntülenmektedir. Bu da web sayfasının düzenini etkiler. Bu sorunu çözmek için web sayfalarında table etiketi kullanılır. Şimdi bu tasarımı yapalım.
<table>
<caption>Başakşehir'in Konferans Ligi Rakipleri</caption>
<thead>
<tr>
<th>Tarih</th>
<th>Takım</th>
<th>Ev/Deplasman</th>
</tr>
</thead>
<tbody>
<tr>
<td>2 Ekim 2024</td>
<td>R. Wien</td>
<td>Ev</td>
</tr>
<tr>
<td>24 Ekim 2024</td>
<td>Celje</td>
<td>Deplasman</td>
</tr>
<tr>
<td>7 Kasım 2024</td>
<td>Kopenhag</td>
<td>Deplasman</td>
</tr>
<tr>
<td>27 Kasım 2024</td>
<td>Petrocub</td>
<td>Ev</td>
</tr>
<tr>
<td>12 Aralık 2024</td>
<td>Heidenheim</td>
<td>Ev</td>
</tr>
<tr>
<td>19 Aralık 2024</td>
<td>C. Brugge</td>
<td>Deplasman</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Takımlar toplam 6 maç yapacaklardır.</td>
</tr>
</tfoot>
</table>
Takımların logolarını da web sayfasında görüntüleyelim. Böylece web sayfasına bir görsellik kazandırmış oluruz. Internetten indirdiğiniz takım logolarını logo isimli klasörün altına kopyalayalım. Kodları düzenleyelim.
<table>
<caption>Başakşehir'in Konferans Ligi Rakipleri</caption>
<thead>
<tr>
<th>Tarih</th>
<th>Takım</th>
<th>Ev/Deplasman</th>
<th>Logo</th>
</tr>
</thead>
<tbody>
<tr>
<td>2 Ekim 2024</td>
<td>R. Wien</td>
<td>Ev</td>
<td>
<img src="logo/rwlogo.png" style="width:24px;
height:24px" title="R. Wien" />
</td>
</tr>
<tr>
<td>24 Ekim 2024</td>
<td>Celje</td>
<td>Deplasman</td>
<td>
<img src="logo/cllogo.png" style="width:24px;
height:24px" title="Celje" />
</td>
</tr>
<tr>
<td>7 Kasım 2024</td>
<td>Kopenhag</td>
<td>Deplasman</td>
<td>
<img src="logo/kologo.png" style="width:24px;
height:24px" title="Kopenhag" />
</td>
</tr>
<tr>
<td>27 Kasım 2024</td>
<td>Petrocub</td>
<td>Ev</td>
<td>
<img src="logo/ptlogo.png" style="width:24px;
height:24px" title="Petrocub" />
</td>
</tr>
<tr>
<td>12 Aralık 2024</td>
<td>Heidenheim</td>
<td>Ev</td>
<td>
<img src="logo/helogo.png" style="width:24px;
height:24px" title="Heidenheim" />
</td>
</tr>
<tr>
<td>19 Aralık 2024</td>
<td>C. Brugge</td>
<td>Deplasman</td>
<td>
<img src="logo/cblogo.png" style="width:24px;
height:24px" title="C. Brugge" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Takımlar toplam 6 maç yapacaklardır.</td>
</tr>
</tfoot>
</table>
Dikkat ettiyseniz web sayfası hem gösterişsiz hem de acemice yapılmış gözüküyor. 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. Web sayfasını aşağıdaki gibi düzenleyelim.
<div class="table-responsive">
<table class="table table-striped table-hover caption-top">
<caption>
<h1 class="text-center mb-4">
Başakşehir'in
Konferans Ligi Rakipleri ve Logoları
</h1>
</caption>
<thead class="table-dark">
<tr>
<th scope="col">Tarih</th>
<th scope="col">Rakip</th>
<th scope="col">Ev/Deplasman</th>
<th scope="col">Logo</th>
</tr>
</thead>
<tbody>
<tr>
<td>2 Ekim 2024</td>
<td>R. Wien</td>
<td>Ev</td>
<td>
<img src="logo/rwlogo.png" style="width:24px;
height:24px" title="R. Wien" />
</td>
</tr>
<tr>
<td>24 Ekim 2024</td>
<td>Celje</td>
<td>Deplasman</td>
<td>
<img src="logo/cllogo.png" style="width:24px;
height:24px" title="Celje" />
</td>
</tr>
<tr>
<td>7 Kasım 2024</td>
<td>Kopenhag</td>
<td>Deplasman</td>
<td>
<img src="logo/kologo.png" style="width:24px;
height:24px" title="Kopenhag" />
</td>
</tr>
<tr>
<td>27 Kasım 2024</td>
<td>Petrocub</td>
<td>Ev</td>
<td>
<img src="logo/ptlogo.png" style="width:24px;
height:24px" title="Petrocub" />
</td>
</tr>
<tr>
<td>12 Aralık 2024</td>
<td>Heidenheim</td>
<td>Ev</td>
<td>
<img src="logo/helogo.png" style="width:24px;
height:24px" title="Heidenheim" />
</td>
</tr>
<tr>
<td>19 Aralık 2024</td>
<td>C. Brugge</td>
<td>Deplasman</td>
<td>
<img src="logo/cblogo.png" style="width:24px;
height:24px" title="C. Brugge" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><mark>Takımlar 3 maç iç saha,
3 maç deplasman olmak üzere toplam 6 maç yapacaklardır.</mark></td>
</tr>
</tfoot>
</table>
</div>
</div>
Web sayfasının daha modern ve tasarım açısından uygun hale geldiğini görürsünüz.