HTML ile Görüntü Elemanları

Hazırlayan: Emre ARIKBOGA

Bir HTML Sayfasına Nasıl Fotoğraf Ekleyebilirsiniz?

Bir HTML sayfasına fotoğraf eklerken <img> etiketini kullanırız. Bu etiket için kapanış etiketi (</img>) yazmanıza gerek yoktur. <img> etiketinin genel olarak iki özelliği vardır:

<img src=""> : Bu özellik ile fotoğrafın yolunu belirterek sayfaya eklersiniz.
<img alt=""> : Bu özellik ile fotoğraf için belirli bir metin oluşturursunuz.

NOT: Dikkat etmeniz gereken bir konu da fotoğrafınızın yolunu belirttiğinizde tarayıcı, fotoğrafı bu referans üzerinden temin etmeye çalışır. Eğer fotoğraf bu yol üzerinde mecvut değilse göreceğiniz tek şey kırık bir resim simgesi olacaktır. İşte burada da devreye alt niteliği girer ve resim için tanımladığınız yazı burada görünür.

Peki Fotoğrafın Boyutunu Nasıl Değiştirebilirsiniz?

Eklediğiniz fotoğrafın boyutu istediğinizden fazla/az yer kaplıyorsa ve yeniden boyutlandırmak istiyorsanız bazı alternatifler vardır. width , height ve style niteliklerini kullanarak fotoğraflarınızı yeniden boyutlandırabilirsiniz. İşte birkaç örnek:

<img src="resim1.jgp" alt="Oyuncak" style="width:150px;height:125px;">
<img src="resim1.jgp" alt="Telefon" width="500px" height="300px">

NOT: Her ne kadar fotoğrafınız uygun dursa da genişlik ve yüksekliğini belirtin. Çünkü aksi takdirde web sayfanız yüklenirken bazı problemler meydana gelebilir. Bunun önüne geçmek için her zaman fotoğrafınızın genişlik ve yüksekliğini belirttiğinizden emin olun.

Eklemek İstediğiniz Fotoğraf Başka Bir Klasörde İse Ne Yapmalısınız?

Eklemek istediğiniz fotoğraf HTML kodlarınızdan farklı bir klasörde olabilir. ''Peki bu klasöre nasıl erişip fotoğrafı eklerim?'' diyorsanız çözümü çok basit. Yine src niteliğini kullanırken eğik çizgi(/) kullanarak klasörünüze erişebilirsiniz. Örneğin:

<img src="/Fotoğraflar/resim1.jpg">

NOT: Ekleyeceğiniz klasörün paylaşılmış bir klasör(public) olması gerektiğini unutmayın. Aksi takdirde farklı bir cihazdan sitenize ulaşan bir kişi bu fotoğrafları görüntüleyemeyecektir. Bunun sebebi eklediğiniz klasörün yalnızca sizin cihazınızda olup erişiminin yalnızca sizde olmasıdır.

Farklı Bir Web Sayfasından Fotoğraf Ekleyebilir Misiniz?

Evet. Bunun için yine src niteliğini kullanacağız fakat kullanmak istediğiniz web sayfasının url'sini tam olarak yazmanız gerekiyor. Örneğin:

<img src="https://www.sayfam.com/images/resim.jpg"

Ancak unutmamanız gereken bir şey var. Bu web sayfasındaki fotoğrafın telif hakkı olabilir, bu sebeple izin almayı unutmayın. Ayrıca bu sayfadaki fotoğrafın kaldırılması durumunda sizin de sayfanızdan kalkabilir, dikkat ediniz.

Bir Html Sayfasına İnteraktif Bir Resim Nasıl Ekleyebilirsiniz?

Bir HTML sayfasına interaktif (etkileşimli) bir resim eklemek için <map>...</map>etiketini kullanırız. Bu etiket ile adı gibi aslında sayfamızda bir harita yaratıyoruz. Bu haritaya bir isim etiketi tanımlayarak fotoğrafımızda kullanacağız.

Bu harita üzerinde tıklamamız gereken bir alan belirlememiz gerekiyor. Bunun için de <area> etiketini kullanacağız. Peki alanı nasıl belirleyeceğiz? Bunun için etiketin bazı nitelikleri mevcut. <img> etiketinde src niteliğini kullandığımız gibi, <area> etiketinde ise coords niteliği sayesinde belirlediğimiz koordinatları kullanarak kendimize bir alan oluşturacağız.

<area> etiketinin başka bir niteliği olan shape ise belirli bir şekil kullanarak koordinatlarınız ile bu şekli oluşturur. Bu şekillerin bazıları şöyle:

rect : Dikdörtgen bir bölge tanımlamanızı sağlar.
circle : Dairesel bir bölge tanımlamanızı sağlar.
poly : Farklı sayıda kenarı olan bir çokgen tanımlamanızı sağlar.
default : Varsayılan olarak fotoğrafın tüm bölgesini tanımlamanızı sağlar.

Şimdi bir harita oluşturduğumuzu varsayarsak bu haritayı fotoğrafa nasıl yerleştireceğimize geçelim. Bunun için <img> etiketinde usemap niteliğini kullanmamız gerekecek. Haritaya bir isim etiketi tanımlayacağımızı söylemiştik hatırlıyorsanız. İşte bu etiketi kullanmanın tam sırası.

Örneğin:

</map>

Burada koordinatlarda kullandığımız ilk sayı x-eksenini, ikincisi y-eksenini ve diğer ikisi ise genişlik ve yüksekliğini belirtiyor. Böylece elimizde fotoğrafın 51 pixel solunda ve 45 pixel üzerinde 150x125 pixel bir bölge bulunuyor.

Farklı Boyuttaki Ekranlara Farklı Fotoğraf Nasıl Gösterebilirsiniz?

Bildiğiniz üzere birden fazla internet tarayıcısı bulunuyor. Bu tarayıcıların bazıları, bazen fotoğraf formatını desteklemeyebiliyor veya web sayfanızda telefon, bilgisayar gibi farklı boyuttaki ekranlara sahip cihazlarda farklı görünebiliyor.

Bunun önüne geçmek için <picture> etiketini kullanabilirsiniz. Bu etiket <img> etiketinden farklı olarak farklı ekranlara, başka fotoğraf kullanabilmenize ve fotoğrafınızı farklı formatlarda-tarayıcının desteklediği formatta-kullanabilmenize olanak sağlar.

Örneğin varsayalım ki Google Chrome tarayıcısına telefondan giriyorsunuz ve web sayfanızı açtınız. Sayfanıza eklediğiniz fotoğrafı bilgisayar ekranına uygun büyüklükte yüklemişseniz bu fotoğrafı, aynı büyüklükte olacak şekilde telefona yüklemenize gerek yok. İşte burada devreye source niteliği giriyor. Bu nitelik sayesinde tarayıcınız ekranınız ile eşleşen ilk fotoğrafı kullanarak diğerlerini yok sayacaktır. Bu sayede bilgisayar ekranı büyüklüğünde bir fotoğrafı telefonunuza yüklemeyerek gereksiz yer kaplamasından kaçınabilirsiniz.

Örneğin:

</picture>

Bu örnekte media niteliği ile minimum genişliği belirleyerek hangi fotoğrafın gösterileceğini belirledik. srcset niteliği ile aynı src niteliğinde olduğu gibi bir referans/kaynak belirterek fotoğrafımızı ekledik.

Page updated

Report abuse