c# Web

2022 Katar Dünya Kupasında Belirlenen Grupları Table Etiketini Kullanarak Web Core Sayfasında Görüntüleme

Uluslararası bir futbol şöleni olan ve 4 yılda bir yapılan Dünya kupası bu sene ilk defa bir Ortadoğu ülkesi olan Katar'da yapılacaktır. Bu uygulamamızda Dünya kupasına katılan ülkelerin gruplarını table etiketi yardımıyla web core sayfasında görüntüleyeceğiz. Kupada 8 grup ve her grupta 4 takım yer almaktadır. Bunları 5 satır ve 8 sütunda 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 Core Empty seçelim. Proje oluşturulurken hiçbir dosyanın yüklü olmasını istemediğimiz için Empty seçiyoruz. Proje ismi olarak DunyaKupasi2022Core belirleyelim. Next diyerek devam edelim. .Net 6.0 kalabilir. Bu arada Configure for HTTPS onay kutusunu kaldıralım. 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>2022 Katar Dünya Kupası Grupları</title>

Şimdi body etiketi arasında web sayfasında görüntülenecek kısma gelelim. Burada işlemleri table etiketiyle gerçekleştireceğiz. Temel table etiketlerini yazalım.

    <table>
        <caption></caption>
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

Burada yer alan etiketleri açıklayalım.

<caption> tablonun ana başlığının belirlendiği bölümdür.

<thead> tablonun alt başlıklarının tanımlandığı bölümdür.

<tbody> tablonun içeriğinin tanımlandığı bölümdür.

<tfoot> tablonun en alt satırının tanımlandığı bölümdür.

Şimdi tablomuzun başlığını belirleyelim.

        <caption>
            <h1>2022 Dünya Kupası</h1>
            <p>
                Bu sene <strong>Dünya Kupası</strong>
                <em>Katar</em>'da yapıacaktır.
                <br /> Ortadoğuda havalar <ins>sıcak</ins>
                olduğundan maçlar <del>Haziran</del> ayında değil,
                <ins>Kasım</ins> ayında oynanacaktır.
            </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 tabloya ait alt başlıkları belirleyelim. 8 grup olduğu için 8 sütunlu bir başlık oluşturacağız.

        <thead>
            <tr>
                <th>A GRUBU</th>
                <th>B GRUBU</th>
                <th>C GRUBU</th>
                <th>D GRUBU</th>
                <th>E GRUBU</th>
                <th>F GRUBU</th>
                <th>G GRUBU</th>
                <th>H GRUBU</th>
            </tr>
        </thead>

Gruplarda yer alan takımları listeleyelim. Tüm takımları tek satırda ve her sütunda bir takım olacak şekilde listeleyeceğimiz için tüm gruplarda yer alan ilk takımları tablomuzun ilk satırında görüntülemeliyiz. Hadi şimdi onu yapalım.

        <tbody>
            <tr>
                <td>Katar</td>
                <td>İngiltere</td>
                <td>Arjantin</td>
                <td>Fransa</td>
                <td>İspanya</td>
                <td>Belçika</td>
                <td>Brezilya</td>
                <td>Portekiz</td>
            </tr>
        </tbody>

İlk satırımıza gruplarda yer alan ilk ülkeleri yazdık. Şimdi ikinci ülkeleri yazalım.

            <tr>
                <td>Ekvador</td>
                <td>İran</td>
                <td>Suudi Arabistan</td>
                <td>Avustralya</td>
                <td>Kosta Rika</td>
                <td>Kanada</td>
                <td>Sırbistan</td>
                <td>Gana</td>
            </tr>

Sıra geldi üçüncü ülkelere. Şimdi onları yazalım.

            <tr>
                <td>Senegal</td>
                <td>ABD</td>
                <td>Meksika</td>
                <td>Danimarka</td>
                <td>Almanya</td>
                <td>Fas</td>
                <td>İsviçre</td>
                <td>Uruguay</td>
            </tr>

Artık gruplarda yer alan son ülkeleri de yazabiliriz. Şimdi onu yapalım.

            <tr>
                <td>Hollanda</td>
                <td>Galler</td>
                <td>Polonya</td>
                <td>Tunus</td>
                <td>Japonya</td>
                <td>Hırvatistan</td>
                <td>Kamerun</td>
                <td>Güney Kore</td>
            </tr>

Tablomuzun en altına ise tablo ile ilgili açıklamaları yazabiliriz. Ben burada "Dünya kupası maçları 20 Kasım ile 18 Aralık tarihleri arasında yapılacaktır" mesajını görüntüleyeceğim. Tek satır ve tek sütun olacağı için 8 sütunu tek sütun haline getirmek için colspan özelliğini kullanacağım.

        <tfoot>
            <tr>
                <td colspan="8">
                    <small><em>*Dünya kupası maçları 
                                20 Kasım ile 18 Aralık 
                                tarihleri arasında yapılacaktır.
                    </em></small>
                </td>
            </tr>
        </tfoot>

Tablomuzun tasarım işlemlerini gerçekleştirdik. Projemizi kaydedip çalıştıralım. 


İlgili Makaleler
Web Tabanlı Uygulama Geliştirme Dersi İkinci Dönem İkinci Yazılı Çalışma Soruları
Visual Studio 2022 Programında Asp.Net Web Application Şablonu Görünmüyor Hatasını Düzeltme
Web Sayfasının Hangi Tarayıcıda Çalıştığını Bulma
Bir Otobüs Firmasına Ait Bilet Satış İşlemlerini Class(Sınıf) Tanımlayarak Yapan c# Form Uygulaması
ASP.NET Uygulamasında Metin Kutusunda Sadece Kredi/Banka Kartı Numarası Biçimine Nasıl İzin Verilir?
Visual Studio 2019 Programında c# İle Hazırlanan Web Projesini Local Sunucuda Yayınlama
RadioButton ile Cinsiyet Bilgisini Alan Asp.Net c# Uygulaması
Update Panel İçinde Button Click Çalışmıyor Hatasını Düzeltme
Ajax Modal Popup Kullanarak GridView İçindeki Bir Kaydı Listeleyip Güncelleme
Microsoft Visual Studio Live Share Nedir? Nasıl Kullanılır?
Asp.Net Programında Butonla GridView Nesnesine Yeni Bir Satır Ekleme
Visual Studio 2022 Programında Asp.Net Core Empty RazorPage Web Projesi Oluşturma
Web Uygulamalarında SqLite Kullanımı
Visual Studio 2022 Programında Asp.Net Core Web Projesi Oluşturma
Ayt 123 Sorusunu Core MVC Teknolojisini Kullanarak Çözümünü Bulma
Core Mvc Projesinde Birden Fazla Veriyi Tuple Nesnesiyle Gönderen Uygulama
SqlServer Veri Tabanında Tanımlı Tabloya Video Yükleme İşlemi
Asp.Net Platformunda Harici JSON Dosyasından Namaz Vakitlerini Alma
Core Mvc Projesinde SqlServer Kullanarak Üye Takibi Yapan Web Projesini Tasarlama1
Derslerden Alınan Notları TempData Kullanarak Listeleyen Core Mvc Uygulaması

Yorum Ekle
   
Kötü İyi