Html Resim Ekleme ve Html Resme Link Verme

Web sitelerini yaparken hem okunabilirliği arttırmak hem de görselliği arttırarak kullanıcı etkileşimini iyileştirmek için sayfalarımıza resim, video vb.. eklemeler yaparız. Sadece düz metinlerden oluşan sayfalar tasarım açısından şık durmazlar. Ayrıca yapılan birçok araştırmada da sitenizi ziyaret eden kullanıcıların düz metinden oluşan sayfalarda çok fazla zaman geçirmeden sayfanızı terk ettiği belirtiliyor. İşte bu yazımızda önce html resim ekleme daha sonra ise html resme link verme işlemlerini nasıl yapabileceğimizi öğreneceğiz. 

HTML RESİM EKLEME

 ⇒  Sayfalarımıza resim eklemek için <img> etiketini kullanıyoruz. Sadece bu etiketi kullanmamız yetmiyor. Bu etiket ile birlikte bazı attribute’larıda kullanmamız gerekiyor. 

Aşağıdaki attribute’ları kullanarak html resim ekleme işlemlerimizi gerçekleştiriyoruz.

► src attribute : Bu attribute ile resim nerde bulunuyor ise onun yolunu belirtiyoruz. En basit haliyle resim şu şekilde eklenir;

Resmimiz bilgisayarda da yüklü olabilir internet ortamında da. Duruma göre yolunu belirtmemiz gerekiyor. İki durum için de ayrı ayrı örnek verelim.

► alt attribute : Eğer resmin yolu yanlış yazılmış veya resim herhangi bir nedenden dolayı görüntülenemezse, resmin yerine alt attribute’una yazmış olduğumuz metin görüntülenecektir.

Örneğin resmimiz bir araba resmi ise, alt attribute’una araba ile ilgili birşeyler yazarsak resim görüntülenemediğinde alt attribute’unun değeri sayesinde neyle ilgili bir resim olduğunu anlayabiliriz. Mümkün olabildiğince alt attribute’unu kullanmaya çalışın. Çünkü arama motorlarının resim hakkında bilgi sahibi olması için alt attribute’u gerekiyor. Böylece arama motorlarında daha üst sıralarda çıkabiliriz.

► width ve height attribute’ları : Bu attribute’lar ile resimlere genişlik ve yükseklik değerleri verebiliriz. Örneğin;

Burada resmin genişliğini 200px, yüksekliğini ise 150px yapmış olduk.

Önemli : Bu değerleri verdiğimiz takdirde sayfalarımızın yüklenme süresi olumlu anlamda etkilenecektir. Bunlar belirtilmediğinde resimlerin genişlik ve yükseklik değerleri bilinmediğinden web sayfası biraz daha geç yüklenebilir.

► title attribute : Bu attribute ile resim hakkında ek bilgiler tanımlayabiliriz. Resmin üzerine fare ile gelindiğinde bu bilgiler bir tooltip ile kullanıcıya gösterilir. Örneğin;

Burada resmin üzerine fare ile geldiğimizde title değerini bize tooltip ile gösterecektir.

Evet html resim ekleme bu şekilde yapılıyor. Şimdi de html resme link verme nasıl yapılıyor ona bakalım.

HTML RESME LİNK VERME

Linkler sadece düz metinlerden oluşmaz. Herhangi bir html etiketine de link verebiliriz. Burdaki konumuz html resme link verme olduğu için resimler üzerinde link vermeyi gerçekleştireceğiz.

 ⇒  Bunun için link vermek istediğimiz resmi <a> etiketi içerisinde yazmamız gerekiyor. Bunu yazdıktan sonra resme tıklandığında hangi adrese gitmesini istiyorsak, a etiketinin href attribute’una bu adresi yazmamız gerekiyor. 

Bu örnekte resme tıklandığı zaman bizi Google‘ın sayfasına yönlendirecektir. Çünkü a etiketinin href attribute’una  http://www.google.com/ yazdık.

Önemli : .gif uzantılı yani hareketli resimler de html sayfalarında kullanılabilir.

Önemli : Resimler yüklenirken biraz zaman aldığı için web sitelerinin açılış hızlarını etkilerler. Bu yüzden sayfalarımızda kullanacağımız resim sayısına dikkat etmeliyiz.  

Önemli : Yüksek çözünürlükteki resimler sitemizin açılış hızını olumsuz etkileyeceği için olabildiğinde resimleri optimize ederek kullanmaya çalışmalıyız. Tabi burada optimize ederken resmin kalitesini de çok fazla bozmamak gerekiyor.

<picture> ETİKETİNİ KULLANMA

Bu etiket ile cihazların (bilgisayar, tablet, telefon vb..) ekran boyutuna göre daha esnek bir şekilde resimleri ekleyebiliriz.

Kullanımı şu şekilde;

Gördüğünüz gibi öncelikle <picture> etiketi yazılır ve sonrasında <source> etiketi ile resimler eklenir.

► <source> etiketinin media attribute’unda koşul olarak ekran genişliklerini veriyoruz. srcset attribute’unda ise bu şart sağlanırsa hangi resim kullanılacaksa o resmin yolunu yazıyoruz.

Son olarak en alta <img> etiketiyle resmin orjinalini yazıyoruz. Çünkü olur da tarayıcı <picture> etiketini desteklemezse <img> etiketi ile verdiğimiz resim görüntülenecektir.

Şimdi de yukarda yazdığımız kodun ne anlama geldiğine bakalım. Burda diyoruz ki;

Eğer ekran genişliği 768px den büyükse, orta-resim.jpg resmini görüntüle.

Eğer ekran genişliği 480px ile 768px arasında ise, kucuk-resim.jpg resmini görüntüle.

Eğer tarayıcı <picture> etiketini desteklemiyorsa, buyuk-resim.jpg resmini görüntüle.  

Evet html resim ekleme ve html resme link verme işlemlerini öğrendik. Web sayfalarımıza resim ekledikten sonra Css özelliklerini kullanarak çok daha etkili sayfalar oluşturabiliriz. Resim eklerken kullandığımız Css özellikleri hakkında bilgi edinmek isterseniz Css Dersleri 4 – Background Kullanımı yazımı okuyabilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +