HTML Dersleri 12 - Resimler

Bu derste HTML ile web sayfalarına resim eklemeyi, görsellerin nasıl kontrol edildiğini ve doğru görsel kullanımının sayfa yapısı ile SEO’ya etkisini öğreneceksin. Tüm anlatımlar örnek HTML kodlarıyla desteklenmiştir.

admin admin
Ekim 13, 2022 - 12:28 Updated: Ocak 8, 2026 - 23:03
0 136
HTML Dersleri 12 - Resimler
HTML Dersleri 12 - Resimler

HTML Resimler Nedir?

HTML resimler, web sayfalarına görsel içerik eklemek için kullanılır. Görseller, içeriği destekler, anlatımı güçlendirir ve kullanıcı deneyimini artırır. HTML’de resimler, özel bir etiket aracılığıyla sayfaya çağrılır.

HTML dosyasının içine görsel gömülmez; görsel dosya tarayıcıya yol bilgisiyle gösterilir.

HTML’de Resim Ekleme (img Etiketi)

HTML’de resim eklemek için img etiketi kullanılır. Bu etiket tekil bir etikettir ve kapanış etiketi yoktur.

Basit Resim Kullanımı Örneği

<img src="resim.jpg" alt="HTML dersleri için örnek görsel">

Bu örnekte:

  • src → Görselin dosya yolunu belirtir

  • alt → Görselin açıklamasını içerir

Görsel Dosya Yolları (Paths)

HTML’de görsel eklerken dosya yolunun doğru verilmesi çok önemlidir.

Aynı Klasördeki Görsel

<img src="logo.png" alt="Site logosu">

Alt Klasördeki Görsel

<img src="images/banner.jpg" alt="Banner görseli">

Harici (Başka Siteden) Görsel

<img src="https://example.com/resim.jpg" alt="Harici görsel">

Harici görseller çalışır ancak performans ve güvenlik açısından dikkatli kullanılmalıdır.

Resim Boyutlarını Ayarlama

HTML ile resimlerin genişliği ve yüksekliği kontrol edilebilir. Bu, sayfa düzeninin bozulmasını önler.

Genişlik ve Yükseklik Belirleme

<img src="urun.jpg" alt="Ürün görseli" width="300" height="200">

Boyut vermek:

  • Sayfa yüklenme dengesini artırır

  • Görsel taşmalarını önler

Alternatif Metin (alt) Nedir?

alt parametresi, görsel yüklenemediğinde gösterilen metindir. Aynı zamanda arama motorları ve ekran okuyucular için çok önemlidir.

Alt Metin Kullanımı Örneği

<img src="bilgisayar.jpg" alt="Masaüstü bilgisayar görseli">

Alt metin:

  • Görseli açıklamalı

  • Anahtar kelime doldurma amacıyla kullanılmamalı

  • Gerçekten ne olduğunu anlatmalıdır

Resmi Bağlantı Olarak Kullanma

HTML’de görseller bağlantı hâline getirilebilir.

Resim Üzerinden Link Verme

<a href="https://cilginyazilim.com"> <img src="buton.png" alt="Cilginyazilim ana sayfa"> </a>

Bu kullanım:

  • Banner

  • Buton

  • Yönlendirme görselleri

için oldukça yaygındır.

HTML Resimler ve Performans

Yanlış görsel kullanımı sayfa hızını ciddi şekilde düşürebilir.

Dikkat edilmesi gerekenler:

  • Gereksiz büyük görseller kullanma

  • Aynı sayfaya çok fazla görsel ekleme

  • Anlamsız dekoratif görsellerden kaçınma

HTML tarafında doğru kullanım, performansın ilk adımıdır.

HTML Resimler ve SEO İlişkisi

HTML resimler SEO’ya dolaylı katkı sağlar. Özellikle alt parametresi, arama motorlarının görselleri anlamasında büyük rol oynar.

SEO için:

  • Her görsele anlamlı alt yaz

  • Görsel içeriği metinle destekle

  • Görseli içerikle alakalı seç

Bu yaklaşım, sayfanın genel kalitesini artırır.

HTML Resim Kullanırken Dikkat Edilmesi Gerekenler

  • alt parametresi boş bırakılmamalı

  • Dosya yolları doğru olmalı

  • Görseller sayfa amacına uygun seçilmeli

  • Mobil uyumluluk düşünülmeli

Bu kurallar, profesyonel ve sürdürülebilir sayfalar oluşturmanı sağlar.

HTML resimleri öğrendikten sonra artık sayfa arka planlarının nasıl düzenlendiğini öğrenebiliriz. Bir sonraki ders olan HTML Background konusu, görsel düzenleme bilgisini bir adım ileri taşıyacaktır.

? HTML Dersleri 13 – Background
https://cilginyazilim.com/html-dersleri-13-background



Etiketler: