Html

Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Maç Özetlerini Gösteren Web Sayfası Uygulaması

Ülkemizi bu sene Avrupa liginde 2, Konferans liginde 2 olmak üzere 4 takım temsil etmektedir. Daha önceki uygulamamızda Fenerbahçe takımının yer aldığı B grubunda oynanan maçlara göre puan durumları ve takımların bayraklarını listelemiştik. Bu uygulamada ise bayrağa tıkladığımızda o takımın ülkesine ait marşı çalıştıracağız. Takıma tıkladığımızda ise oyanan maçları listeleyip tıkladığımız maçın özetini göstereceğiz.

İsmi UefaAvrupaLigi olan bir proje oluşturmuştuk. Bu projede B grubunda yer alan takımları ve puan durumlarını listelemiştik. Şimdi takımların logolarına basıldığında o takımın bağlı olduğu ülkenin milli marşını çaldıralım. Öncelikle ülkelerin milli marşlarını internetten indirelim. Daha sonra projeye audio isminde bir klasör ekleyelim. Milli marşları bu klasörün içine kopyalayalım. Ülkelerin milli marşlarını buradan indirebilirsiniz.

Fenerbahçenin logosuna tıkladığımızda İstiklal Marşını çaldıralım.

               <a href="/audio/istiklal-marsi.mp3">
                        <img style="width:24px;height:24px" 
                                 src="img/fenerbahce.png" 
                                 title="Türkiye Milli Marşı" />
               </a>

Rennes takımının logosuna tıklandığında Fransa marşını çaldıralım.

               <a href="/audio/fransa-milli-marsi.mp3">
                        <img style="width:24px;height:24px" 
                                 src="img/rennes.png" 
                                 title="Fransa Milli Marşı" />
               </a>

AEK takımının logosuna tıklandığında Yunanistan marşını çaldıralım.

               <a href="/audio/yunanistan-milli-marsi.mp3">
                        <img style="width:24px;height:24px" 
                                 src="img/aek.png" 
                                 title="Yunanistan Milli Marşı" />
               </a>

Dinamo Kiev takımının logosuna tıklandığında Ukrayna marşını çaldıralım.

               <a href="/audio/ukrayna-milli-marsi.mp3">
                        <img style="width:24px;height:24px" 
                                 src="img/ukrayna.png" 
                                 title="Ukrayna Milli Marşı" />
               </a>

Şimdi de takıma tıklayalım. Takımların şu ana kadar oynadığı maçları listeleyelim. Listeleme işlemlerini gerçekleştirmek için sayfa içi link özelliğinden yararlanacağız. Fenerbahçe takımına bastığımızda sayfanın altında takımımızın oynadığı maçları listeyeleceğiz. Öncelikle sonuçların listeleneceği kutuyu oluşturalım.

        <div style="width:500px; margin:5px auto; font-size:16px">
 
        </div>

Fenerbahçe isminin üzerine tıklanma işlemini gerçekelştirelim.

            <div><a href="#takim1">Fenerbahçe</a> </div>

Az önce oluşturduğumuz kutunun içine Fenerbahçe takımının maçlarının sonucunu yazalım.

            <div id="takim1">
                <h3>Maç Sonuçları</h3>
                <div>
                    <h5><ins>1. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Fenerbahçe 2 - 1 Dinamo Kiev
                    </p>
                </div>
                <div>
                    <h5><ins>2. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Rennes 2 - 2 Fenerbahçe
                    </p>
                </div>
                <div>
                    <h5><ins>3. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Fenerbahçe 2 - 0 AEK
                    </p>
                </div>
                <div>
                    <h5><ins>4. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        AEK 1 - 2 Fenerbahçe
                    </p>
                </div>
            </div>

Şimdi Rennes takımına ait işlemleri yapalım.

            <div>
                <a href="#takim2">Renees</a>
            </div>

.....................................

            <div id="takim2">
                <h3>
                    Maç Sonuçları
                </h3>

                <div>
                    <h5><ins>1. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        AEK 1 - 2 Rennes
                    </p>
                </div>
                <div>
                    <h5><ins>2. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Rennes 2 - 2 Fenerbahçe
                    </p>
                </div>
                <div>
                    <h5><ins>3. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Rennes 2 - 1 Dinamo Kiev
                    </p>
                </div>
                <div>
                    <h5><ins>4. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Dinamo Kiev 0 - 1 Rennes
                    </p>
                </div>
            </div>

Aek takımına ait işlemleri yapalım.

            <div>
                <a href="#takim3">AEK</a>
            </div>

..........................................

            <div id="takim3">
                <h3>
                    Maç Sonuçları
                </h3>

                <div>
                    <h5><ins>1. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        AEK 1 - 2 Rennes
                    </p>
                </div>
                <div>
                    <h5><ins>2. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Dinamo Kiev 0 - 1 AEK
                    </p>
                </div>
                <div>
                    <h5><ins>3. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Fenerbahçe 2 - 0 AEK
                    </p>
                </div>
                <div>
                    <h5><ins>4. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        AEK 1 - 2 Fenerbahçe
                    </p>
                </div>
            </div>

Dinamo Kiev takımına ait işlemleri yapalım.

            <div>
                <a href="#takim4">Dinamo Kiev</a>
            </div>

.......................................

            <div id="takim4">
                <h3>
                    Maç Sonuçları
                </h3>

                <div>
                    <h5><ins>1. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Fenerbahçe 2 - 1 Dinamo Kiev
                    </p>
                </div>
                <div>
                    <h5><ins>2. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Dinamo Kiev 0 - 1 AEK
                    </p>
                </div>
                <div>
                    <h5><ins>3. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Rennes 2 - 1 Dinamo Kiev
                    </p>
                </div>
                <div>
                    <h5><ins>4. Hafta</ins></h5>
                </div>
                <div>
                    <p>
                        Dinamo Kiev 0 - 1 Rennes
                    </p>
                </div>
            </div>

Projeyi kaydedip çalıştıralım. Takımların üzerine gelip tıkladığımızda ilgili takımın maç sonuçları ekranda görüntülenir. Şimdi oynanan bu maçların üzerine tıkladığımızda maçın özetini gösteren bir web sayfası oluşturalım. Maç özetlerini internetten izleteceğimiz gibi kendi projemizden de izletebiliriz. Burada maç özetleri telif hakları istediği için youtube kanalından maç özetlerini göstereceğiz. Hadi bu işi yapalım.

Fenerbahçe'nin ilk maçının özetini verelim.

                        <a href="https://www.youtube.com/watch?v=cdQBuwtmMEw" 
                                    target="_blank">
                                             Fenerbahçe 2 - 1 Dinamo Kiev
                        </a>

Şimdi ikinci maçın özetini verelim.

                        <a href="https://www.youtube.com/watch?v=BhCueyCLoaY" 
                                      target="_blank">
                                      Rennes 2 - 2 Fenerbahçe
                         </a>

Üçüncü maçın özetini verelim.

                        <a href="https://www.youtube.com/watch?v=oWBNWpSUvtc"
                           target="_blank">
                            Fenerbahçe 2 - 0 AEK
                        </a>

Dördüncü maçın özetini veelim.

                        <a href="https://www.youtube.com/watch?v=VXuX8tG7YAg"
                           target="_blank">
                            AEK 1 - 2 Fenerbahçe
                        </a>

Diğer takımların maçlarının özetlerini size bırakıyorum. Projeyi kaydedip çalıştırdığınızda maçların özetleri yeni sayfada görüntülenir.


İlgili Makaleler
Input Html Etiketinin Pattern Özelliği
Web Sayfalarına Youtube Videolarını Ekleme
TrendYol 2023 - 2024 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Terminal ve Sunucu Tabanlı Web Projeleri Arasındaki Farklar
Cimbomun Yer Aldığı 2023 Uefa Şampiyonlar Ligi A Grubundaki Takımları Table Etiketiyle Gösterimi
Web Tabanlı Uygulama Geliştirme Dersi Birinci Dönem Birinci Yazılı Çalışma Soruları
Visual Studio 2022 Programında Table Etiketini Kullanarak Hesap Makinesi Tasarımını Web Sayfasında Yapma
Form Bloğu İçinde Form ve Veri Giriş Özellikleri
Jquery Uygulamalarında Ajax İsteği Yapılınca Oluşabilecek Hataları Yakalama
Form Bloğu İçinde Kullanılan Meter Etiketi ve Özellikleri
Web Sayfasına Eklenen Resmi Gösterip Gizleyen Uygulamayı Javascript Kodlarıyla Gerçekleştirme
BootStrap Temayla Kullanıcı Adı ve Şifre Girişi Kontrolü
2022 Katar Dünya Kupasında Belirlenen Grupları Table Etiketini Kullanarak Web Sayfasında Görüntüleme
Failed to load resource: the server responded with a status of favicon.ico 404 (Not Found) Hatasını Düzeltme
Jquery Ajax 200 OK JSON ParseError Hatasını Düzeltme
Birden Fazla Tanımlanan Div Etiketlerini Aynı Sütunda Gösterme İşlemi Nasıl Yapılır
Form Bloğu İçinde Kullanılan fieldset ve legend Etiketleri
Form Elemanlarını Kullanarak Web Sayfasında Kayıt Formu Tasarımı
Form Bloğu İçinde Kullanılan TextArea Etiketi ve Özellikleri
Form Bloğu İçinde Kullanılan Progress Etiketi ve Özellikleri

Yorum Ekle
   
Kötü İyi