HTML ile Sayfaya Resim Ekleme
HTML'de sayfaya resim eklemek için <img> etiketi kullanılır. Resimlerin doğru şekilde görünmesi ve erişilebilir olması için bazı ek öznitelikler de kullanılabilir.1. Temel Resim Ekleme
Bir resim eklemek için src (kaynak) özniteliğini kullanırız:
HTML:
<img src="resim.png" />Bu kod, sayfanıza "resim.png" dosyasını ekler.
2. Resme Başlık (Tooltip) Ekleme
Kullanıcı fareyi resmin üzerine getirdiğinde başlık göstermek için title özniteliğini kullanabilirsiniz:
HTML:
<img src="resim.png" title="Resim Başlığı" />3. Alternatif Metin (Alt) Ekleme
Resim yüklenemediğinde veya görme engelli kullanıcılar için alt açıklaması eklemek önemlidir:
HTML:
<img src="resim.png" alt="Bu bir örnek resimdir." />4. Resim Boyutunu Ayarlama
Resmin genişliğini (width) ve yüksekliğini (height) belirleyebilirsiniz:
HTML:
<img src="resim.png" width="100" height="100" />Alternatif olarak, CSS kullanarak boyutları ayarlayabilirsiniz:
HTML:
<img src="resim.png" style="width:100px; height:100px;" />5. Resime Bağlantı (Link) Ekleme
Resme tıklandığında bir sayfaya yönlendirmek için <a> etiketi kullanılır:
HTML:
<a href="https://www.wf.com.tr/">
<img src="logo.png" alt="WF Webmaster Forumu" style="width:100px; height:100px;">
</a>Bu kod, logo.png resmine tıklanınca WF web sitesine yönlendirme yapar.
6. Tam Örnek Kod
Aşağıdaki kod, tüm özellikleri içeren bir örnektir:
HTML:
<a href="https://www.wf.com.tr/">
<img src="logo.png" alt="WF Webmaster Forumu" title="WF Webmaster Forumunu ziyaret edin" style="width:150px; height:150px;">
</a>
Resim ekleniyor, Bağlantı veriliyor, Başlık ekleniyor, Alternatif metin ekleniyor, Boyut ayarlanıyor.Sonuç
HTML ile
Kod:
<img>
Kod:
<a>Daha fazla HTML ve Webmaster bilgisi için sitemize kayıt olabilir, HTML - CSS - XML bölümünü inceleyebilirsiniz.