|
Uluslararası bir futbol şenliği 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ı liste etiketi yardımıyla web sayfasında görüntüleyeceğiz. Kupada 8 grup ve her grupta 4 takım yer almaktadır. Bunlar 1 ile başlayan 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 DunyaKupasi2022 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ı htmli 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 h1 etiketiyle 2022 Dünya Kupası mesajını görüntüleyelim. <p> etiketiyle de Bu sene Dünya kupası Katar'da yapıacaktır açıklamasını gösterelim.
<!--h1 etiketiyle 2022 Dünya Kupası mesajını görüntüleyelim.-->
<h1>2022 Dünya Kupası</h1>
<!--p etiketiyle de Bu sene Dünya kupası
Katar'da yapıacaktır açıklamasını gösterelim.-->
<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>
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 A grubuna ait takımları sırasız liste elemanı kullanarak listeleyelim.
<h6>A GRUBU</h6>
<ol>
<li>Katar</li>
<li>Ekvador</li>
<li>Senegal</li>
<li>Hollanda</li>
</ol>
B grubunu sırasız liste elamanı olarak ve küçük harfli a, b, c, d başlıklarını kullanarak listeleyelim.
<h6>B GRUBU</h6>
<ol type="a">
<li>İngiltere</li>
<li>İran</li>
<li>ABD</li>
<li>Galler.</li>
</ol>
C grubunu sıralı liste elemanı olarak ve başlıkları kare olacak şekilde listeleyelim.
<h6>C GRUBU</h6>
<ul type="square">
<li>Arjantin</li>
<li>Suudi Arabistan</li>
<li>Meksika</li>
<li>Polonya</li>
</ul>
D grubunu sıralı liste elemanı olarak ve başlıkları içi boş çember olacak şekilde listeleyelim.
<h6>D GRUBU</h6>
<ul type="circle">
<li>Fransa</li>
<li>Avustralya</li>
<li>Danimarka</li>
<li>Tunus</li>
</ul>
E grubunu sırasız liste elamanı olarak ve küçük harfli roma rakamları olan i, ii, iii, iv başlıklarını kullanarak listeleyelim.
<h6>E GRUBU</h6>
<ol type="i">
<li>İspanya</li>
<li>Kosta Rika</li>
<li>Almanya</li>
<li>Japonya</li>
</ol>
F grubunu sıralı liste elemanı olarak ve başlıkları içi dolu disk olacak şekilde listeleyelim.
<h6>F GRUBU</h6>
<ul type="disc">
<li>Belçika</li>
<li>Kanada</li>
<li>Fas</li>
<li>Hırvatistan</li>
</ul>
G grubunu tanım listesi etiketlerini kullanarak listeleyelim.
<dl>
<dt>G GRUBU</dt>
<dd>Brezilya</dd>
<dd>Sırbistan</dd>
<dd>İsviçre</dd>
<dd>Kamerun</dd>
</dl>
H grubunu tanım listesi etiketlerini kullanarak listeleyelim.
<dl>
<dt>H GRUBU</dt>
<dd>Portekiz</dd>
<dd>Gana</dd>
<dd>Uruguay</dd>
<dd>Güney Kore</dd>
</dl>
Projeyi kaydedip çalıştıralım. Dünya kupasında yer alacak ülkelerin farklı listeleme etiketleriyle listelendiğini görürsünüz.
|