<aside> 💡 Bu rapor Notion kullanılarak yazıldı. Notion’da okumak için *https://dawn-squash-710.notion.site/F-y-1-f2bc3a8b38b54cefa182c351b37b1e8a*

</aside>

<aside> 💡 Tüm sorular ayrı ayrı olacak şekilde GitHub içerisine kondu. Buradan kodlara ulaşmakla birlikte çalışan örneğini de görebilirsiniz.
GitHub : https://github.com/Pilestin/Web_Lab - https://github.com/Pilestin/Web_Lab

</aside>

Soru 1 : İstediğiniz sayıda satır ve sutun sayısı içeren, farklı CSS özellikleri kullanarak bir tablo oluşturacağınız Html/CSS kodunu yazıp, ekran görüntüsünü raporunuza ekleyiniz.

Bu soru için tablo içerisinde müzik adı , besteleyen kişi ve link olmak üzere 3 sütun x satırdan oluşan bir tablo yapılacaktır. Müzik olarak klasik müzikler bulunacak.

İlk olarak HTML iskeletini oluşturmalıyız

• Bu iskeleti hızlı bir şekilde oluşturmak için b4 yazıp Enter’a tıklayarak şablonu getirebiliriz.( VSCode içerisine Bootstrap eklentisi önceden yüklenmiş olmalı )
• Burada charset utf-8 yapıldı ( Türkçe karakterler için) ve alt satırda mobil ekranlar için içerik uygun hale getirildi. Ardından da bootstrap dahil edildi. Body içerisinde gördüğümüz import’lar da js için.
• Burada tek yapmamız gereken title içerisini doldurmak ve head içerisinde daha sonra kullanacağımızı style.css dosyasını dahil etmek. Bu dosyayı ayırarak karmaşıklığı azalttık.

Artık tablomuzu body içerisine ekleyebiliriz. Fakat bunu direk yapmadan önce bir container div’i ekleyelim. Bunu yaparken bs4 kullanacağız.

• Container kullandığımızı için içeriğimiz ortalandı.
• Table etikeri içerisinde başlık için thead , içerik satırları için tbody kullanırız. Her bir satır için ise tr kullanırız. Bu uygulama için 3 adet kolon olacağı için tr içerisine 3 adet th ekliyoruz ve kolon isimlerini veriyoruz. Daha sonrasında kullanım için id bilgileri de verdik. Böylece kolonların boyutunu sonrasında ayarlayabileceğiz.
• Ardından içerik satırları için şimdilik 2 satır(tr) ekleyelim. İçlerine dopal olarak 3 kolon olması için 3 td ekledik. Şimdilik 1 2 3 yazdık

Şu anda içeriğimiz bu şekilde.

Şimdi tabloları dolduralım. Gerekli yerlere id ve class atamaları yapalım.

• Burada satırlarımızı doldurduk. 3. kolon olan link kolonu için tıklanabilir olmasını istediğim için buraya a etiketi koyuldu. Referans olarak youtube video url’si verildi. Tıklanabilir olan yerde gözükmesi için ise play emojisi konuldu. Tabloda bu emoji ilgili kutusunda çok solda kalacağı için ortalanması gerekecek. Bu yüzden her bir link için td etiketine class=”link” ekliyorum. Bu class bilgisini daha sonra css dosyasında kullanacağız.

Şimdiki haliyle uygulamamızı görelim

Html dosya içerisinde herşeyi tamamladık. Şimdi bu içeriği css ile düzenlemeye geçebiliriz.

• Öncelikle tüm sayfaya eklenmesi için üstten margin ve arka plan rengi eklendi
• Tablonun boyutu %100 olarak ayarlandı
• Ardından tablonun kendisi ( dış çevre ) , satırları ve sütunları için border eklendi. Border 2px , düz çizgi , ve gri renkli. Border collapse özelliği seperate verilerek çizgilerin üst üste binmesi engellendi. Böylece kutucuklar oluştu. Son olarak da border-radius ile çerçeve yuvarlaklaştı.
• Sonrasında head ve body kısmı için font ve color ayarlamaları yapıldı. Burada önemli olan nokta td içerisine text_align : center eklenmedi. Çünkü sadece link bölümünün ortalanmasını istiyoruz.
• Ardından tablonun orta bölümündeki müzik ismi kısmı için boyut %55 ayarlandı.
• Son olarak ise link bölmesi ortalandı. Bunu td içerisindeki sınıfı link olan etiketler seçilerek yapıldı.

Ve uygulamamızın son halini görebiliriz.