|
Avrupa kıtasının önemli organizasyonlarından biri olan Euro 2024 eleme grupları belli oldu. 2024 Avrupa Şampiyonası Almanya'da düzenlenecektir. Bu uygulamamızda Euro 2024 eleme gruplarını table etiketi yardımıyla web sayfasında görüntüleyeceğiz. Kupada 10 grup ve 7 grupta 5, 3 grupta 6 yer almaktadır. Bunları 2 sütun ve her satırda iki grup olacak şekilde 5 satırda listelemek istiyoruz. Ayrıca bu işlemleri iç içe table kullanarak gerçekleştireceğiz.
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 Euro2024Gruplar belirleyelim. Framework 4.7.2 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>Euro 2024 Eleme Grupları</title>
Şimdi body etiketi arasında web sayfasında görüntülenecek kısma gelelim. Burada işlemleri iç içe table etiketiyle gerçekleştireceğiz. Dışında yer alacak table etiketini tanımlayalım. Bu etiketin caption, tbody ve tfoot özelliğinden yararlanacağız.
<table>
<caption></caption>
<tbody></tbody>
<tfoot></tfoot>
</table>
Şimdi tablomuzun başlığını belirleyelim.
<caption>
<h1>Euro 2024 Eleme Grupları Listesi</h1>
<p>
4. torbadan kuralara katılan <strong>Türkiye</strong>'nin
grubu dahil, tüm gruplar
burada listelenmektedir. Euro 2024
<em>Almanya</em>'da yapılacaktır.
<br /> <del>Rusya</del>'nın yer almadığı turnuvada,
<ins>en şanslı</ins> <strong>24 takım</strong>
bu gruplardan belirlenecektir.
</p>
</caption>
Projeyi kaydedip çalıştıralım. Tablomuzda hiçbir satır ve sütun yer almadığı için başlığın daracık bir yerde listelendiğini görürsünüz. Şimdi grupların yer alacağı tabloları barındrmak için ana tabloda tbody kısmında her satırda iki sütun olacak şekilde 5 satır oluşturalım.
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
Şimdi buraya dikkat edelim. A grubunda yer alan ülkeleri listeleyeceğiz. Bu tablomuz ana tablonun 1. satırının 1. sütununda yer alacaktır. Tablomuzda caption, thead ve tbody yer alacaktır. Başlığı belirleyelim.
<tr>
<td>
<table>
<caption>
A Grubu
</caption>
<thead></thead>
<tbody></tbody>
</table>
</td>
<td></td>
</tr>
Şimdi alt başlıkları belirleyelim. Burada Ülke Adı, O, G, B, M, A, P alt başlıkları yer alacaktır. Hadi yapalım şu işi.
<table>
<caption>
A Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody></tbody>
</table>
A grubunda yer alan ülkeleri Ülke Adı başlığında listeleyelim. İlk ülkeyi ekleyelim.
<tr>
<td>
İspanya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Diğer ülkeleri ekleyelim. Bu grupta 5 takım olacağı için 4 tane daha satır ekliyorum.
<tbody>
<tr>
<td>
İspanya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
İskoçya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Norveç
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Gürcistan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Cebeli Tarık
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
Şimdi ana tabloda 1. satır 2. sütuna B grubunda yer alan takımları listeleyelim.
<table>
<caption>
B Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Hollanda
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Fransa
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
İrlanda Cumhuriyeti
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Yunanistan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Güney Kıbrıs
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Devam edelim. Ana tabloda 2. satır 1. sütuna C grubunda yer alan ülkeleri listeleyelim.
<table>
<caption>
C Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
İtalya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
İngiltere
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Ukrayna
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Kuzey Makedonya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Malta
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
D grubunda yer alan ülkeleri listeleyelim. Bu ülkeleri ana tabloda 2. satır 2. sütunda listeleyeceğiz.
<table>
<caption>
D Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Hırvatistan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Galler
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Ermenistan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Türkiye
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Letonya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
E grubunu listeleyelim.
<table>
<caption>
E Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Polonya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Çekya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Arnavutluk
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Faroe Adaları
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Moldova
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
F grubunu listeleyelim.
<table>
<caption>
F Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Belçika
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Avusturya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
İsveç
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Azerbaycan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Estonya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
G grubunu listeleyelim.
<table>
<caption>
G Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Macaristan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Sırbistan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Karadağ
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Bulgaristan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Litvanya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
H grubunu listeleyelim. Bu grup dahil, bundan sonraki gruplarda 6 ülke olduğu için 6 satır oluşturmalıyız.
<table>
<caption>
H Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Danimarka
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Finlandiya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Slovenya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Lüksemburg
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Kuzey İrlanda
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
San Marino
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I grubunda yer alan ülkeleri listeleyelim.
<table>
<caption>
I Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
İsviçre
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
İsrail
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Romanya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Kazakistan
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Belarus
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Andorra
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Ve nihayet J grubunda yer alan ülkeleri listeleyelim.
<table>
<caption>
J Grubu
</caption>
<thead>
<tr>
<th>Ülke Adı</th>
<th>O</th>
<th>G</th>
<th>B</th>
<th>M</th>
<th>A</th>
<th>P</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Portekiz
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Bosna Hersek
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
İzlanda
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Kosova
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Slovakya
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
Liechtenstein
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Gruplarda yer alan ülkeleri listelemiş olduk. Ana tablonun tfoot bölümünü aşağıdaki gibi düzenleyelim.
<tfoot>
<tr>
<td colspan="2">
<p>
Grup maçları <span>23 Mart 2023</span>
ile <span>21 Kasım 2023</span> tarihleri
arasında yapılacaktır. <br />
<em>Play-off</em> yarı finalleri
<span>21 Mart 2024</span>, finaller ise
<span>26 Mart 2024</span> tarihlerinde yapılacaktır.
</p>
</td>
</tr>
</tfoot>
Projeyi kaydedip çalıştırdığımızda aşağıdaki gib bir sayfa bizi karşılar.
Dikkat ettiyseniz tablomuzun genişliği içindeki yazıya göre belirlendiği için tablolar sıkışık gibi görünüyor. Hadi bu işlemleri beraber yapalım.
|