Neden?
Görseller bilgi taşır; bu bilgiyi herkesin anlayabileceği şekilde sunmak gerekir.

Ne öğreneceğiz?
Bu derste img, src, alt ve picture kullanımını öğreneceğiz.

Nasıl ilerleyeceğiz?
Önce kavramın amacını düşün. Ardından aşağıdaki örneği kendin yaz. Kodu kaydet, tarayıcıda aç ve küçük bir değişiklik yaparak sonucu gözlemle.

 Öğrenme kuralı : Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.

Derse başlamadan önce kendini yokla

• Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
  
• Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
  
• Uygulamayı kendi fikrimle nasıl değiştirebilirim?
  

Ders sonunda kontrol

• Kodu kendim, bakmadan tekrar yazabildim mi?
  
• Tarayıcıda sonucu test ettim mi?
  
• Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
  

Ders hedefi
Görsel ekleyebilecek, erişilebilir alternatif metin yazabilecek ve görsel bağlantılarını doğru kurabileceksiniz.

Görsel eklemek için <img> etiketi kullanılır:

src görselin konumunu, alt ise görselin açıklamasını belirtir. Görsel yüklenemezse veya ekran okuyucu kullanılıyorsa alt metni önem kazanır.

Görsel yalnızca dekoratifse alternatif metin boş bırakılabilir:

Görselin boyutlarını belirtebilirsiniz:

Bir görseli bağlantıya dönüştürmek için resmi <a> içine alın:

Birden fazla kaynak ve farklı ekran boyutları için <picture> kullanılabilir:

Bir şehir tanıtım sayfası oluştur. Şehrin en az iki görselini, görsellerin açıklamasını ve her görselin kaynağına giden bir bağlantıyı ekle.