Bugün herhangi bir web sayfasına online bakın ve bazı ortak noktaları paylaştıklarını fark edeceksiniz. Paylaşılan özelliklerden biri de resim. Doğru görseller bir web sitesinin sunumuna çok şey katıyor. Bir şirketin logosu gibi bu görüntülerden bazıları, siteye marka yardımında bulunur ve bu dijital varlığı fiziksel şirketinize bağlar.
Web sayfanıza resim, simge veya grafik eklemek için etiketi bir sayfanın HTML kodunda kullanmanız gerekir. HTML’deki IMG etiketini, grafiğin tam olarak görüntülenmesini istediğiniz yere yerleştirirsiniz. Sayfanın kodunu oluşturan web tarayıcısı, sayfa görüntülendiğinde bu etiketi uygun grafikle değiştirir. Şirketimizin logo örneğine dönersek, bu resmi sitenize nasıl ekleyebileceğiniz aşağıda açıklanmıştır:
Görüntü öznitelikleri
Yukarıdaki HTML koduna bakarak, öğenin iki özellik içerdiğini göreceksiniz. Her biri görüntü için gereklidir.
İlk özellik "src" dir. Bu tam anlamıyla sayfada görüntülenmek istediğiniz görüntü dosyasıdır. Örneğimizde "logo.png" adında bir dosya kullanıyoruz. Bu, web tarayıcısının siteyi görüntülediğinde göstereceği grafiktir.
Ayrıca, bu dosya adından önce "/ images /" gibi ek bilgiler ekledik. Bu dosya yolu. İlk eğik çizgi, sunucunun dizinin köküne bakmasını söyler. Ardından "görüntüler" adlı bir klasör ve son olarak "logo.png" isimli dosyaya bakacaktır. Bir sitenin tüm grafiklerini saklamak için "resimler" adlı bir klasör kullanmak oldukça yaygın bir uygulamadır, ancak dosya yolunuz sitenizle alakalı olan her şeye değişecektir.
İkinci gerekli özellik "alt" metindir. Bu, resmin bir nedenle yüklenmemesi durumunda gösterilen "alternatif metin" dir. Örneğimizde "Şirket Logosu" nu okuyan bu metin, resim yüklenemediğinde görüntülenecektir. Bu neden olur? Çeşitli nedenleri:
- Yanlış dosya yolu
- Yanlış dosya adı veya yazım hatası
- Iletim hatası
- Dosya sunucudan silindi
Bunlar, belirtilen görüntümüzün neden eksik olabileceğine dair birkaç olasılık. Bu durumlarda, alt metnimiz yerine görüntülenir.
Alt metin, görüntüyü görme engelli bir ziyaretçiye "okumak" için ekran okuyucu yazılımı tarafından da kullanılır. Resmi, bizim yaptığımız gibi göremediğinden, bu metin, resmin kendisinin ne olduğunu bilmelerini sağlar. Bu nedenle, alt metnin gerekmesi ve neden resmin ne olduğunu açıkça belirtmesi gerek!
Alt metnin yaygın bir yanlış anlaşılması, bunun arama motoru amaçları için kullanılmasıdır. Bu doğru değil. Google ve diğer arama motorları, resmin ne olduğunu belirlemek için bu metni okurken (hatırlayın, görüntünüzü "göremez"), yalnızca arama motorlarına hitap etmek için alt metin yazmamalısınız. İnsanlara yönelik açık bir alt metin yazar. Ayrıca, arama motorlarına hitap eden etikete bazı anahtar kelimeler de ekleyebiliyorsanız, bu iyi bir şeydir, ancak her zaman grafik metnini göremeyen herkes için resmin ne olduğunu belirterek alt metnin birincil amacına hizmet ettiğinden emin olun.
Diğer Öznitelikler
IMG etiketinin, web sayfanıza bir grafik eklediğinizde kullanımda görebileceğiniz iki diğer özelliği de vardır: genişlik ve yükseklik. Örneğin, Dreamweaver gibi bir WYSIWYG editörü kullanırsanız, bu bilgi sizin için otomatik olarak eklenir. İşte bir örnek:
WIDTH ve HEIGHT özellikleri, tarayıcıya görüntünün boyutlarını bildirir. Tarayıcı, yerleşimde ne kadar alan ayırdığını bilir ve görüntü indirilirken sayfadaki sonraki öğeye geçebilir. Bu bilgiyi HTML'nizde kullanmayla ilgili sorun, her zaman görüntünüzün o boyutta görüntülenmesini istemeyebileceğinizdir. Örneğin, boyutlandırma, ziyaretçilerin ekranına ve cihaz boyutuna bağlı olarak değişen bir web siteniz varsa, resimlerinizin de esnek olmasını istersiniz. HTML'nizde sabit boyutun ne olduğunu belirtirseniz, duyarlı CSS medya sorguları ile geçersiz kılmayı çok zor bulacaksınız . Bu nedenle, stil (CSS) ve yapının (HTML) ayrılmasını sağlamak için, HTML kodunuza width ve height niteliklerini eklememeniz önerilir.
Bir not: Bu boyutlandırma talimatlarını kapalı bırakırsanız ve CSS'de bir boyut belirtmezseniz, tarayıcı görüntüyü varsayılan olarak yerel boyutunda gösterecektir.
Jeremy Girard tarafından düzenlendi