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
Web Sayfalarına Youtube Videolarını Ekleme
2020 - 2021 Süper Lig Fikstür Çekimini Yapan BootStrap Html Uygulaması-1
Jquery Uygulamalarında Ajax İsteği Yapılınca Oluşabilecek Hataları Yakalama
Input Html Etiketinin Pattern Özelliği
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Puan Durumunu Div Etiketiyle Listeleyen Web Sayfası Uygulaması
Visual Studio 2022 Programında Takımlarımızın Uefa Avrupa Ligi Maç Özetlerini Gösteren Web Sayfası Uygulaması
Birden Fazla Tanımlanan Div Etiketlerini Aynı Sütunda Gösterme İşlemi Nasıl Yapılır
2022 Katar Dünya Kupasında Belirlenen Grupları Liste Etiketini Kullanarak Web Sayfasında Görüntüleme
2022 Katar Dünya Kupasında Belirlenen Grupları Table Etiketini Kullanarak Web Sayfasında Görüntüleme
Euro 2024 Avrupa Şampiyonası Eleme Gruplarını Table Etiketi Kullanarak Web Sayfasında Tasarlama
Failed to load resource: the server responded with a status of favicon.ico 404 (Not Found) Hatasını Düzeltme
Terminal ve Sunucu Tabanlı Web Projeleri Arasındaki Farklar
Web Sayfasına Eklenen Resmi Gösterip Gizleyen Uygulamayı Javascript Kodlarıyla Gerçekleştirme
Visual Studio 2022 Programında Table Etiketini Kullanarak Hesap Makinesi Tasarımını Web Sayfasında Yapma
Web Sayfalarında Kullanılan Yerleşim Elemanları
Html5 Canvas Nedir, Canvas Nasıl Kullanılır, Canvas Elementiyle Neler Yapılabilir
Jquery Ajax 200 OK JSON ParseError Hatasını Düzeltme
Web Sayfasında Tablo Etiketini Kullanarak Sözleşme Form Tasarımı Yapma
Listeleme Etiketleri
Web Sayfalarında İç İçe Çerçeve Oluşturma

Yorum Ekle
   
Kötü İyi