Resim (Image) Etiketi Kullanımı
HTML ile web sayfalarımıza fotoğraf eklemek için image <img> etiketi kullanılır. <img> etiketi eklenecek resmin yolunu belirtmek için src özelliğini alır. Src özelliğine verilecek değer ya bir URL’e ait olabilir veya kendi hosting’inizin klasör yapısı içindeki bir resim dosyası olabilir. Ayrıca verilecek bir alt (alternatif text) özelliği ve alacağı string bir değer için resmin bir hata sonucu yüklenememesi gibi durumlarda resmin bulunduğu alanda bağlantısı kopuk resmin yanında bulunacak olan metindir. Ayrıca bu metin resmin ismi ile birlikte SEO (search engine optimization/arama motoru optimizasyonu) için önemli bir değerdir.
<img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Ana Sayfa Logosu">
Resimlerde Genişlik ve Yükseklik
Resim <img> etiketi içerisine yazılacak olan bir width özelliği ile resmin genişliğini ayarlayabilirsiniz. Vereceğiniz değerler pixel veya yüzde cinsinden olmalıdır. Ancak dikkat edilmelidir ki yüzde değeri kullanmak resminizin sayfa genişliğine göre yüzdesidir. Örnek olarak width=”50%” değeri resminizin boyutunu sayfanızın yarısına kadar gelecek şekilde büyütür veya küçültür. Resminizin yükseklik değerlerini ayarlamak için height özelliği kullanılır. <img> etiketi içinde hem genişlik hem de yükseklik değeri aynı anda kullandığınızda resmin orjinal genişlik yükseklik oranı bozulacaktır. Sadece width özelliğine değer atandığı zamanlarda verilen genişlik değerine göre yükseklik değeri de otomatik olarak küçülür veya büyür. Genişlik ve yükseklik değeri verileceği durumlarda resimdeki genişlik yükseklik oranının bozulacağını unutmayınız.
<img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="50px"> <img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="50%" height="200px">
Resimlere Link veya Bağlantı Atamak
Herhangi bir farklı özelliği yoktur, eğer <img> etiketinizi hyperlink etiketi içinde tanımlarsanız resminizde bir link veya bağlantı haline gelmiş olacaktır.
<a href="http://google.com.tr"> <img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" </a>
Map ve Area Özelliği
Resimlerinize hyperlink atamanız durumunda resmin tüm alanı link alanı haline dönüşecektir. Eğer resmin herhangi bir yerine cliklenilmesi durumunda resim sizi tanımlanan bağlantıya gönderecektir. <img> etiketleri için kullanılan <map> ve <area> etiketleri ile resmin içindeki koordinatlarla belirlediğimiz bir alanı sadece link haline getirebiliriz. Eklediğimiz <area> etiketi kadar belirlenen alanı bir resim üzerinden birçok bağlantıya link verebiliriz.
<!DOCTYPE html> <html> <head> <title>HTML Dersleri 8 | Resimler ile Çalışmak</title> </head> <body> <!-- ## <img src=""> image etiketi ## alt="" Özelliği (Alternatif Metin) ## width="" Özelliği (Genişlik) ## height="" Özelliği (Yükseklik) ## usemap="#resim" Özelliği (Resim içinde harita açmak) ## <map name="resim"></map> Etiketi ## <area shape="" coords="" href=""> Etiketi ## coords için rect (rectangle/dikdörtgen) ve circle (daire) özelliğinin koordinat şeması anlatımı --> <img src="https://www.esencan.net/wp-content/uploads/2018/04/pixel.png" alt="Ders 8 Sunu Resmi" usemap="#resim"> <map name="resim"> <area shape="rect" coords="100,150,150,200" href="http://www.google.com.tr"> <area shape="circle" coords="150,100,25" href="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> </map> </body> </html>
Bu derse ait anlatım videosunu izlemek için tıklayınız.
Bir önceki “HTML Dersleri Ders#7 | Tablo İşlemleri” konulu yazımı görmek için tıklayınız..
Son Yorumlar