FrontEnd Developer RoadMap - HTML 5 Tutorial 23 Img Etiketi - Sayfaya Resim Eklemek

Merhabalar, bu yazımda sayfalarımıza nasıl resim ekleyebiliriz bunu göreceğiz.

HTML’de görüntüler <img> etiketi ile tanımlanır. <img> etiketi niteliksiz bir anlam ifade etmez ve kendi kendine kapanan bir etiket türüne örnektir. Img etiketi bir inline elementtir. Yani resimleri alt alta yerleştirmek isterseniz bunun için bildiğiniz farklı yolları kullanmanız gerekir.

Img etiketi src attribute’u sayesinde resmin yolunu gösterebilir.

Src source kaynak ifadesinin kısaltılmasıdır.

Temel Yapı

<img src="">

1 Web’den Görsel Adresini Vererek Resim Yüklemek

Internet’te var olan bir resim adresini alıp src etiketine değer olarak verelim ve resmi yükleyelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <img src="https://images.unsplash.com/photo-1662128680429-a04fdd7e6b95?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">

    <br><br>

</body>
</html>

Çıktıya bir bakalım.

Bu şekilde bir boyutlandırma yapmadan resmi yüklersek. Resim orjinal boyutlarında sayfada gözükecektir.

width ve heigth attribute’larına pixel cinsinden değerler vererek görselin boyutu ayarlanabilir.

<img src="https://images.unsplash.com/photo-1662123138878-351bf40a66ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80" width="30px" height="30px">

Bu şekilde boyutlandırmanın 2 değeri de verilirse orantısız bir boyutlandırma olur.

Ancak sadece bir attribute değerini verirsek o verilen değer alınır diğeri verilen bu değere göre orjinal boyutundaki en boy oranı korunarak işlenir.

<img src="https://images.unsplash.com/photo-1662123138878-351bf40a66ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80" height="30px">

    <img src="https://images.unsplash.com/photo-1662123138878-351bf40a66ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80" width="30px" >

2 Proje Dosyamızda Bulunan Bir Resmi Gösterme

Şimdi proje dosyamızın içine Images diye bir klasör yaratalım ve içine 2 tane görsel koyalım.

 <img src="Images/Images1.jpg" width="100px"> <br><br>

 <img src="Images/Images2.jpg" width="100px"> <br><br>

Görsellerimizin ne ile ilgili olduğunu Google ya da farklı indexleyici sayfalar anlayamaz. Biz bunu alt attribute’u sayesinde görselin ne ile alakalı olduğunu anlatabiliriz.

Ve bu standart olarak kullanılması tavsiye edilir. Her görselimizin alt etiketiyle ne ile ilgili olduğu anlatılmalıdır.

<img src="Images/Images2.jpg" width="100px" alt="shadow"> <br><br>

Img’ye ait diğer attribute ve değerlerini aşağıdan okuyabilirsiniz.

Nitelik	Değeri	Açıklama
alt	metin	Görsel için alternatif bir metin oluşturur.
crossorigin	anonymous use-credentials	Görselin başka bir web sayfasından erişim izini.
height	pixels	Görseli belirli bir yükseklik boyutuna ayarlar.
width	pixels	Görseli belirli bir genişlik boyutuna ayarlar.
ismap	ismap	Bir görüntüyü sunucu tarafında image-map (görüntü haritası) olarak belirtir.
longdesc	URL	Görselin ayrıntılı açıklamasında URL belirtir.
sizes		Farklı sayfa düzenleri için görsel boyutlarını belirtir.
src	URL	Görselin URL adresini belirtir.
srcset	URL	Farklı durumlarda kullanılacak görselin adresini belirtir.
usemap	#mapname	Görseli kullanıcı tarafında image-map (görüntü haritası) olarak belirtir.