` etiketlerini kullanırsınız. Bir dizi `

` elemanı oluşturacağız ve bunlar resimleri içerecek. ### Resimler Kapanış etiketi gerektirmeyen bir HTML etiketi `` etiketidir, çünkü `src` elemanı, sayfanın öğeyi işlemek için ihtiyaç duyduğu tüm bilgileri içerir. Uygulamanızda `images` adında bir klasör oluşturun ve [kaynak kod klasöründeki](../../../../3-terrarium/solution/images) tüm resimleri buraya ekleyin; (14 bitki resmi var). ### Görev Bu bitki resimlerini `` etiketleri arasına iki sütun halinde ekleyin: ```html

``` > Not: Span'lar ve Div'ler. Div'ler 'blok' elemanlar olarak kabul edilirken, Span'lar 'satır içi' elemanlardır. Bu div'leri span'lara dönüştürürseniz ne olur? Bu işaretlemeyle, bitkiler artık ekranda görünüyor. Ancak oldukça kötü görünüyor, çünkü henüz CSS ile stillendirilmediler; bunu bir sonraki derste yapacağız. Her resmin, bir resmi göremediğiniz veya işleyemediğiniz durumlarda görünen alternatif bir metni (alt text) vardır. Bu, erişilebilirlik için eklenmesi önemli bir özelliktir. Gelecekteki derslerde erişilebilirlik hakkında daha fazla bilgi edineceksiniz; şimdilik, alt özelliğinin, bir kullanıcı bir resmi herhangi bir nedenle göremediğinde (yavaş bağlantı, src özelliğinde bir hata veya bir ekran okuyucu kullanıyorsa) alternatif bilgi sağladığını unutmayın. ✅ Her resmin aynı alt etikete sahip olduğunu fark ettiniz mi? Bu iyi bir uygulama mı? Neden veya neden değil? Bu kodu geliştirebilir misiniz? --- ## Anlamsal işaretleme Genel olarak, HTML yazarken anlamlı 'anlamsallık' kullanmak tercih edilir. Bu ne anlama gelir? Bu, HTML etiketlerini, tasarlandıkları veri türünü veya etkileşimi temsil etmek için kullanmanız gerektiği anlamına gelir. Örneğin, bir sayfadaki ana başlık metni bir `

` etiketi kullanılarak yazılmalıdır. Açılış `` etiketinizin hemen altına şu satırı ekleyin: ```html

My Terrarium

``` Başlıkların `

` ve sırasız listelerin `
` olarak işlenmesi gibi anlamsal işaretleme kullanmak, ekran okuyucuların bir sayfada gezinmesine yardımcı olur. Genel olarak, düğmeler `

` etiketinin üzerine şu işaretlemeyi ekleyin: ```html

``` ✅ Bu işaretlemeyi eklemenize rağmen ekranda hiçbir şeyin görünmediğini fark ettiniz mi? Neden? --- ## 🚀Meydan Okuma HTML'de hala eğlenceli olan bazı eski 'eski' etiketler var, ancak [bu etiketler](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) gibi kullanımdan kaldırılmış etiketleri işaretlemenizde kullanmamalısınız. Yine de, `` etiketini kullanarak h1 başlığını yatay olarak kaydırabilir misiniz? (Eğer yaparsanız, sonrasında kaldırmayı unutmayın.) ## Ders Sonrası Test [Ders sonrası testi](https://ff-quizzes.netlify.app/web/quiz/16) ## Gözden Geçirme ve Kendi Kendine Çalışma HTML, webi bugünkü haline getiren 'denenmiş ve doğru' yapı taşı sistemidir. Eski ve yeni etiketler hakkında biraz bilgi edinerek tarihini öğrenin. Bazı etiketlerin neden kullanımdan kaldırıldığını ve bazılarının neden eklendiğini anlayabilir misiniz? Gelecekte hangi etiketler tanıtılabilir? Web ve mobil cihazlar için siteler oluşturmayı [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) üzerinden öğrenin. ## Ödev [HTML pratiği yapın: Bir blog taslağı oluşturun](assignment.md) --- **Feragatname**: Bu belge, [Co-op Translator](https://github.com/Azure/co-op-translator) adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlama veya yanlış yorumlamalardan sorumlu değiliz.