Görüntüler, dijital içeriğinizi yalnızca daha ilgi çekici ve akılda kalıcı kılmakla kalmaz, aynı zamanda onu daha paylaşılabilir hale getirir. BuzzSumo, bir milyondan fazla makalenin analizinde, her 75-100 kelimede bir görsel içeren makalelerin, daha az görsel içeren makalelere göre sosyal medya paylaşımlarının iki katını aldığını tespit etti.
Bu nedenle, image öğesinin ve source niteliğinin HTML’de nasıl çalıştığını anlamak önemlidir. Sıfırdan bir site oluştururken, önceden tasarlanmış bir şablonu özelleştirirken veya CMS’nizdeki bir web sayfasının kaynak kodunu değiştirirken kullanışlı olabilir.
Aşağıda bu çifte daha yakından bakalım.
Img kaynak HTML
HTML resim öğesi, bir resmi bir HTML belgesine gömmek için kullanılsa da, resmi teknik olarak web sayfasına eklemez. Aslında, görüntü öğesi teknik olarak kendi başına hiçbir şey yapmaz. Gerçekten sadece bir görüntüye referans için bir alan yaratır.
Önerilen makale: sosyal medya uygulamaları hakkında bilgi almak ve güncel sosyal medya haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
Bu referans, kaynak özniteliğinde bulunur. Kaynak özniteliği, resim dosyasının yolunu veya URL’sini içerir. Bu, resimlerin neden web sayfalarına teknik olarak bağlı olduğunu – gömülmediğini – açıklar.
Aşağıdaki örneğe bir göz atın.
Bu örnekte, HTML’de ilk resim öğesinin Pixabay’a bağlantı içeren bir kaynak özniteliğine sahip olduğunu görebilirsiniz. İkinci görüntü öğesinin kaynak özelliği yok.
Genişlik ve yükseklik özellikleri CSS’de belirtilir. Bu en iyi uygulama olarak kabul edilir çünkü genişlik ve yükseklik belirtilmezse resim yüklenirken sayfa titreyebilir.
Sonuç sekmesinde, ilk resim görünür ve 300 piksele 200 pikseldir. Ancak ikinci görüntü, 300 piksele 200 piksel ana hatlarıyla boş bir kutu olarak işlenir. Bunun nedeni, tarayıcının kaynak özniteliği olmadan hangi görüntünün oluşturulacağını bilmemesidir.
Aşağıdaki görüntü öğesinin ve kaynak özniteliğinin sözdizimine daha yakından bakalım.
HTML İmg Sözdizimi
Görüntü öğesinin sözdizimi şöyledir:
img öğesi, bir <img> etiketiyle başladığından ancak bir kapanış etiketine sahip olmadığından “boş öğe” olarak bilinir. Ancak yukarıdaki kodda da görebileceğiniz gibi img etiketi aslında boş değil.
İmg sözdizimini iki ana bileşenine ayıralım: kaynak özniteliği ve alt özniteliği.
<simge kaynağı=””>
Resim dosyasının yolunu veya URL’sini içerdiğinden kaynak özniteliği gereklidir. Bu kesme işaretleri arasına yerleştirilecektir. Kaynak özniteliği tanımlanmadan, tarayıcı görüntüyü bulup oluşturamaz.
<img alt=””>
Alt niteliği, resim hakkında açıklayıcı bilgiler sağlar. Source özniteliği gibi gerekli olmasa da, hem tarayıcılar hem de okuyucular için önemi nedeniyle alt özniteliği şiddetle tavsiye edilir.
Satır içi görüntüleri görüntüleyemeyen tarayıcılar, alt niteliğini içermediği sürece <img> öğesini yoksayar. Bu özellik, görsel yüklenmeyen tüm okuyucuların yanı sıra ekran okuyucu kullanan görme engelli okuyucular için de önemlidir. Her iki durumda da okuyucular, alt özelliği sayesinde görüntünün ne iletmesi gerektiğini anlayabilirler.
Sitenizdeki erişilebilirliği ve genel kullanıcı deneyimini iyileştirmenin yanı sıra, resim alt metni eklemek sitenizin SEO’sunu iyileştirebilir.
Resim Alt Metni: Nedir, Nasıl Yazılır ve SEO İçin Neden Önemlidir bölümünü okuyarak resim alt metninin önemi hakkında daha fazla bilgi edinebilirsiniz.
Görüntü kaynağını değiştir
Web sitenizdeki bir görseli değiştirmek isterseniz, görsel dosya yolunu veya URL’sini kaynak özniteliğinde değiştirebilirsiniz. Bu özelliği istediğiniz zaman değiştirebilirsiniz.
Yeni görüntünün, orijinal görüntünün yükseklik ve genişlik özelliklerini devraldığına dikkat etmek önemlidir. Bu nedenle, yeni görüntünün farklı bir boyutta olmasını istiyorsanız, yeni yükseklik ve genişlik özelliklerini belirtmeniz gerekir.
Img src Çalışmıyor
image element ve source niteliğini kullanırken bazı sorunlarla karşılaşabilirsiniz. Diyelim ki HTML dosyanıza bir resim eklediniz ve resim yerine bozuk bağlantı simgesini ve alt metni (aşağıda gösterilmiştir) gördünüz.
Resimlerin aslında web sayfalarına gömülmediğini unutmayın. Bu, bir web sayfası yüklendiğinde, tarayıcının görüntüyü bir web sunucusundan alması ve sayfada göstermesi gerektiği anlamına gelir. Kırık bağlantı simgesi, tarayıcının resmi bulamadığı anlamına gelir.
Resmi yeni eklediyseniz, kaynak özelliğine doğru resim URL’sini eklediğinizden emin olun. Herhangi bir yazım hatası veya eksik harf veya noktalama, bozuk bağlantı simgesiyle sonuçlanabilir. Aşağıdaki örnekte, ön uçta kırık bağlantı simgesiyle sonuçlanan src özniteliğinin kapanış kesme işaretini bıraktım.
Resmi sitenize daha önce eklediyseniz ve yakın zamanda bozuk bağlantı simgesinin görüntülendiğini fark ettiyseniz bu, kaynak özelliğinde belirtilen URL’nin artık doğru olmadığı anlamına gelir. Resim, alıntı yaptığınız web sayfasından kaldırılmış veya sitenizdeki farklı bir klasöre taşındığından dosya yolu artık doğru olmayabilir. Sorunu çözmek için yeni resim URL’sini bulmanız veya değiştirmeniz gerekir.
HTML İmg Öğesinin Gerekli Özniteliği
img src niteliği, temel bir kodlama kavramıdır. Her görüntü öğesi, tarayıcının doğru görüntüyü bulup gösterebilmesi için geçerli bir kaynak özniteliği gerektirir. Artık bu kavramı anladığınıza göre, zaten HTML ve CSS öğrenme yolundasınız.
Pazarlama Satış 