Felsefe tarihi üzerine bir slayt gösterisi hazırlıyorsunuz. "platon_akademisi.jpg" resmini, "images/tarih/" klasörü içinden yüklemek istiyorsunuz. Resmin, orijinal boyutlarını korumasını ancak sayfa düzenine uyum sağlaması için CSS tarafından şekillendirilebilmesi amacıyla genişlik ve yükseklik bilgilerini HTML'de belirtmemeniz gerekiyor. Aynı zamanda, resmin yüklenme sürecinde sayfa düzeninin kaymaması için tarayıcıya resmin en-boy oranını (\(aspect ratio\)) önceden söylemelisiniz. Genişliği 800, yüksekliği 450 piksel olan bu resim için uygun <img> etiketi nasıl yazılır?
💡 Modern web standartlarında, resim boyutlarını CSS ile kontrol etmek ve düzen kaymalarını önlemek için width, height ve src niteliklerinin yanı sıra style niteliği de kullanılabilir. Ancak bu sorunun istediği çözüm, tarayıcıya en-boy oranını bildirmek için width ve height niteliklerini kullanmak ve stil için CSS'i ayrıca tanımlamaktır.
src="images/tarih/platon_akademisi.jpg"width="800" height="450". Bu, CSS'te farklı bir boyut verilseniz bile oranın bozulmamasını sağlar.alt="Platon'un Akademisi'nin temsili resmi"✅ Sonuç olarak, oluşturulan HTML kodu şöyle olacaktır:
<img src="images/tarih/platon_akademisi.jpg" width="800" height="450" alt="Platon'un Akademisi'nin temsili resmi">
Bu kod, tarayıcıya resmin en-boy oranını (\( \frac{450}{800} = 0.5625 \)) bildirir ve olası bir düzen kaymasını (CLS) önlemeye yardımcı olur. Görsel stillendirme ise harici CSS dosyası ile yapılmalıdır.