|
Ü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.
|