Ders_17 HTML Görselleri (Images)

HTML Görsel Ekleme Kodunun Kalıbı

Html görseli derken, çoğunlukla bir resim dosyası kastedilir.

Html sayfasına bir görsel eklemek için <img> tagı kullanılır.

<img> tagı boş bir tagdır, belli özellikler eklenerek çalışır hale getirilir ve bitiş tagı yoktur.

<img> tagına bir src özelliği ekleyerek, görselin url'sini (adresini) bu özelliğe atarız.

<img src="resmim.jpg" alt="bu bir resimdir">

alt Özelliği

alt özelliği, resmin yüklenmesinde bir sorun oluştuğunda, resim alanında görünecek olan metindir. Ayrıca bir ekran okuyucu programı, sayfamızı okurken, resmi alt özelliğine atadığımız metin ile okur.

alt özelliği, gerekli bir özelliktir, ihmal edilmemelidir.

Görselin Boyutları (width ve height özellikleri)

Bir görselin, genişlik (width) ve yükseklik (height) özelliklerini her zaman belirtmelisiniz. Aksi taktirde, sayfanız yüklenirken titremeler olacaktır.

Bu özelliklere atadığımız değerlerin birimi varsayılan olarak pixeldir (px).

<img src="smile.gif" alt="gülen surat resmi" width="150" height="150">

Yukarıdaki iki eleman arasında bir fark yoktur.

Width-Height mı Style mı?

HTML5'de, bir resmin boyutlarını, hem style özelliği içinde, hem de style kullanmadan, doğrudan width ve height olarak belirleyebiliyoruz.

Aşağıdaki örneğe dikkat edelim:

<!DOCTYPE html>
<html>
<head>

<style>
img {
width:100%;
}
</style>

</head>
<body>
<img src="html5_1.gif" alt="HTML5 resmi" style="width:128px;height:128px;">
<img src="html5_2.gif" alt="HTML5 resmi" width="128" height="128">
</body>
</html>

Yukarıdaki örnekte, html5_2.gif resmi, head tagları arasında belirtilen stili alcaktır ve tüm sayfaya yayılackatır (width:100%).

Fakat html5_1.gif resmi, kendi içinde style özeliğini bulundurduğu için, head tagları arasında ilan edilen width stilinden etkilenmeyecek, kendi stiline göre şekillenecektir.

Farklı Klasörlerdeki Görseller

src özelliğinde, sadece resim dosyasının adı belirtildiğinde (src="resmim.jpg" gibi), web tarayıcısı, resim dosyasını, html dosyasının bulunduğu klasörde arar.

Bununla birlikte, resim dosyalarının farklı bir klasörde derlenmesi bir gelenektir.

Örneğin html dosyamızın bulunduğu klasörün içine, bütün resim dosyalarımızı depolamak için, images adında başka bir klasör açarız ve resmim.jpg doyasını da bu klasör içine kaydederiz.

Bu defa, bu resmi çağırırken, src özelliğine sadece dosyanın adını yazmak yeterli olmayacaktır. Doğru kod şöyledir:

<img src="/images/resmim.jpg" alt="burada resmim var" style="width:150px;height:150px;">

Yukarıda görüldüğü gibi, src özelliğine sadece resim dosyasının adını değil src="/klasör/resim_dosya" kalıbına göre url'sini atadık.

Animasyon Görselleri

gif standartları, canlandırılımış görseller oluşturmamıza da izin verir. Yani animasyon görselleri genellikle gif uzantılıdır.

Sayfamıza bir animasyon dosyası eklemekle bir resim dosyası eklemek arasında bir fark yoktur.

images klaseründe anim.gif adlı bi animasyon dosyamız oldsun. Bu dosyayı sitemize aşağıdaki şekilde ekleyebiliriz:

Bir Web Sunucusundan Görsel Alma

Bazı web siteleri görsellerini başka internet sitelerinden alır. Bu durumda yapılması gereken tek şey, resim dosyasının url'sini koplayayıp, src özelliğine değer olarak atamaktır.

Yukarıdaki kod, www.w3schools.com sitesindeki bir jpg dosyasını çağırır ve html sayfasına ekler.

Görsellere (img) Link Atama

Bir resim veya video dosyasına da link verebiliriz. Kullanıcalar bu görsellere tıkladığında verdiğim url adresine yönlendirilecektir.

Yukarıda bir gif resmi elemanı verilmiştir. Bu kod, html dosyamızla aynı adreste (url) kayıtlı resmim.gif adlı bir resim dosyasını sayfamızda gösterir.

Bu resim elemanını olduğu gibi <a> ve </a> link tagları arasına koyarsak, bu resmi hem göstermiş hem de resme link vermiş oluruz. Yani:

<img src="resmim.gif" alt="Burada bir resim vardır" style="width:42px; height:42px; border:0">

</a>

border:0 kodu, IE9 ve daha eski sürümlerinde, resme otomatik bir çerçeve konmasını engellemek için eklenir.

Görsellerde Float (yerleşim veya dilim) Özelliği

Bir metin ile o metne ait bir görseli bir arada kullanmak durumunda kalırsak, float özelliğine ihtiyacımız olabilir.

Birden fazla resim dosyasını veya html elemanını (div gibi) sağdan sola veya soldan sağa dizmemiz gerektiğinde de float özelliği bu işi halledecektir.

<p>
<img src="smile.gif" alt="Gülümseyen surat" style="float:right;width:42px;height:42px;">
Resim dosyası metnin sağ tarafına yerleşecektir. Resim dosyası metnin sağ tarafına yerleşecektir. Resim dosyası metnin sağ tarafına yerleşecektir.Resim dosyası metnin sağ tarafına yerleşecektir.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir. Resim dosyası, görselin sol tarafına yerleşecektir.
</p>

Ayrıntılar için CSS derslerimizi takip edebilirsiniz.

Görsel Haritaları (map)

<map> tagi ile bir görsel haritası (image-map) hazırlayabiliriz.

Bir görsel haritası, tıklanabilir bölgeler içeren bir resimdir, diyebiliriz.

Bir tıklanabilir bölge oluşturmak için <map> ve </map> tagları arasına <area> tagi tanımlamamız gerekir. <area> tagında ilan ettiğimiz özellikler bizim tıklanabilir bölgemiz olacaktır ve bu tagın bitiş tagı yoktur.

Aşağıdaki örneğe dikkat edelim:

Yukarıdaki map elemanın adı gezegenharitasi olarak belirlenmiştir.

arae elemanındaki shape özelliği ile tıklanacak bölgenin geometrik şekli belirlenir.

shape="rect" ifadesi tıklanacak bölgenin bir dikdörtgen (rectangle) olacağını ifade eder.

shape="circle" ifadesi tıklanacak bölgenin bir daire (circle) olacağını ifade eder.

arae elemanındaki coords özelliği ile, tıklanacak geometrik şeklin koordinatları verilir. Bu koordinatlar, resmin sol üst köşesine göre belirlenir. Resmin sol üst köşesinin koordinatı 0,0 kabul edilir ve bu nokta başlangıç noktası olur.

Yani geometrik şekil üzerindeki bir noktanın koordinatı, önce yataya göre sonra düşeye göre pixel cinsinden 0,0 noktasına olan uzaklığı yazılarak verilir.

Örneğin, 50,100 noktası, resmin sol üst köşesinden 50 pixel solda, 100 pixel aşağıdadır.

Piksel, varsayılan birimdir, belirtmek zorunlu değildir.

Eğer bir diktörtgen oluşturacağımızı ilan etmişsek, coords özelliğine sırasıyla, dikdörtgenin sol üst köşesinin (mesela 0,0) ve sağ alt köşesinin koordinatlarını (mesela 82,126) yazmalıyız. (coords="0,0,82,126")

Eğer bir daire oluşturacağımızı ilan etmişsek, coords özelliğine öncelikle dairenin merkez noktasını koordinatlarını (mesela 90,58) ve daha sonra da bu dairenin yarıçapını (mesela 3) yazmalıyız. (coords="90,58,3")

area elemanındaki href özelliği ise koordinatları verilen bölgeye tıklandığında gidilecek dosyayı ilan eder, yani linktir.

<map> elamanı bu şekilde hazırlandıktan sonra sıra, bu koortinatları hangi resimde uygulayacağımızı ilan etmeye gelir. Bu da oldukça kolaydır:

<map> elemanına verdiğimiz name=gezegenharitasi özelliği tam da bu iş için lazımdır. name özelliğine atadığımız değeri (gezegenharitasi), <img> tagının içine usemap="#haritaAdi" kalıbına göre eklersek o resimde, bu haritayı kullanmış oluruz. Artık o <img> elemanı tıklanabilir bir haritaya sahip olacaktır.

Aşağıdaki kod; gezegenler.gif resmine yukarıda hazırladığımız gezegenharitasi adlı haritayı uygular:

sonraki ders için tıklayınız

DERSİMİZ KOD - HTML