HTML Resim

❮ Önceki Sonraki ❯

HTML belgelerinde metinlerin yanında bolca resim kullanılır.

HTML belgelerine .jpg, .gif ve .png formatında resimler ekleyebilirsiniz.

HTML Belgelerine Resim Eklemek

HTML belgelerine <img> elementi ile resim eklenir.

<img> pek çok özniteliğe sahiptir.

<img> boş HTML elementidir, yani kapanış etiketi yoktur.

<img> etiketinin en önemli özniteliği src özniteliğidir. Bu öznitelik ile resmin yolu belirtilir.

Bir resim HTML belgesine şu düzende eklenir:

Örnek

<img src="url" alt="açıklayıcı metin" style="width:genişlik;height:yükseklik;">

src içine resmin konumu nasıl yazılmalı?

Eğer resim html dosyanız ile aynı klasördeyse src="resim.png"

Eğer resim farklı bir klasördeyse src="/klasor/resim.png"

Eğer resim başka bir web sitesindeyse src="http://site.com/resim.png"

alt Özniteliği

alt özniteliği resim yüklenemediğinde ekranda görüntülenecek, resmin ne olduğuna dair bilgi girilecek bir özniteliktir.

Resim yüklenirken bir hata oluşursa, resim yüklenemezse, resmin olduğu bölümde bu yazı görüntülenir.

Böylelikle resmi göremeyen kullanıcılar bu yazı sayesinde resim hakkında bilgi sahibi olurlar.

Aynı zamanda arama motorları ve ekran okuyucu yazılımlar alt özniteliğinden bilgi alırlar.

Örnek

<img src="olmayanresim.gif" alt="HTML5 Logosu" style="width:128px;height:128px;">

Kendin Dene »

alt Özniteliği zorunludur!

alt özniteliği arama motorları, ekran okuyucular ve tarayıcılar için ek bilgi sağlar.

alt özniteliği olmadan resim görüntülenir fakat kullanmamak doğru bir yaklaşım değildir.

Resim Boyutlandırma: width(genişlik) ve height (yükseklik)

Bir resmin genişlik ve yüksekliğini style özniteliği ile ayarlayabilirsiniz.

Genişlik ve yükseklik değeri px yani pixel olarak verilir.

Örnek

<img src="/img/ice-age.jpg" style="width:100px; height:100px" alt="buz devri" />

Kendin Dene »

Alternatif olarak doğrudan width ve height öznitelikleri ile resmin genişlik ve yüksekliğini ayarlayabilirsiniz.

Burada değerler yine px cinsindendir.

Örnek

<img src="/img/ice-age.jpg" width="100" height="100"  alt="buz devri"/>

Kendin Dene »

Not: Bir resim eklediğinizde mutlaka genişlik ve yükseklik değerlerini belirtin.

Resmin genişlik ve yüksekliğini belirtmezseniz resim yüklenirken sayfada rahatsız edici bir titreme efekti oluşacaktır.

Hangisi doğru yaklaşım? style mi yoksa width-height kullanmak mı?

Doğrudan width-height kullanarak ya da style içinde width-heigh kullanarak resmin genişlik ve yüksekliğini ayarlamanın ikisi de HTML5 için geçerli bir yöntemdir.

Bizim önerimiz style ile bu değerlerin verilmesidir.

Hareketli Resimler

GIF uzantılı animasyonlu resimler HTML sayfaları için geçerli bir resim türüdür.

Web sitenizde hareketli resimler istiyorsanız .gif uzantılı dosyalar ekleyebilirsiniz.

HTML sayfalarına GIF eklemek .jpg ve .png eklemekten farklı değildir.

Örnek

<img src="/img/firewall.gif" style="width:445px;height:350px;" alt="Windows Firewall">

Kendin Dene »

Resmin Link Olarak Kullanılması

Bir resmi link olarak kullanmak istiyorsanız tek yapmanız gereken <a> etiketinin başlangıcı ile bitişi arasına resim kodunu eklemenizdir.

Örnek

<p>
HTML Öğrenmek için resme tıklayın!
</p>
<a href="/html">
 <img src="/img/firewall.gif" style="width:345px;height:250px;" alt="Windows Firewall">
</a>

Kendin Dene »

Resmi Sağa veya Sola Kaydırmak

CSS float özelliği ile bir resmi sağa veya sola kaydırabilirsiniz.

Örnek

<p><img src="/img/ice-age.jpg" alt="buz devri" style="float:right;width:50px;height:50px;">
Burada resim yazının sağına kayacaktır.</p>

<p><img src="/img/ice-age.jpg" alt="buz devri" style="float:left;width:50px;height:50px;">
Burada resim yazının soluna kayacaktır.</p>

Kendin Dene »

Resimlerle ilgili mutlaka bilmeniz gerekenler:

Resimlerin yüklenmesi vakit alabilir. Büyük boyutlu resimler daha yavaş yüklenir.
Çözünürlüğü yüksek olan resimlerin genişlik ve yüksekliğini width ve height ile ayarlamayın.
Örneğin 800x800 olan bir resmi daha küçük görünsün diye width:100px; height:100px gibi ayarlamayın.
Yüksek çözünürlüklü resimleri Photoshop, İrfanview gibi bir resim editörü ile küçültün.
Gerekmedikçe sayfanıza resim eklemeyin. Resimler web sitelerinin yavaş açılmasına sebep olur.
Web ortamında sadece .jpg, .png ve .gif kullanın.

❮ Önceki Sonraki ❯

Anlamadığınız bir konu mu var?

Konu ile ilgili sorunuzu uzmanim.net'e sorabilirsiniz: uzmanim.net'e sor!