Html Not Defteri Ile Web Sitesi Yapımı Resim Ekleme

HTML ile Web Sitesine Resim Ekleme: Kapsamlı Bir Kılavuz

Web siteleri, görsellerle zenginleştirildiğinde daha ilgi çekici ve kullanıcı dostu hale gelir. Resimler, metni tamamlayabilir, bilgiyi görsel olarak iletebilir ve genel kullanıcı deneyimini iyileştirebilir. HTML kullanarak web sitenize kolayca resim ekleyebilirsiniz.

Resim Ekleme Etiketi: `<img>`

Resimleri web sayfalarına eklemek için <img> etiketini kullanırız. Bu etiket, aşağıdaki özniteliklere sahiptir:

src: Resmin kaynağını (URL veya dosya yolu) belirtir.
alt: Resmin alternatif metnini belirtir. Bu metin, resim yüklenmediğinde veya kullanıcılar görsel engelli olduğunda görüntülenir.
width: Resmin genişliğini piksel cinsinden belirtir.
height: Resmin yüksekliğini piksel cinsinden belirtir.

Resim Ekleme Adımları

Resimleri HTML kullanarak web sitenize eklemek için şu adımları izleyin:

Resim dosyasını yükleyin: Resminizi web sitenizin sunucusuna yükleyin.
Resmin URL’sini veya dosya yolunu alın: Resmin URL’sini veya sunucudaki dosya yolunu kopyalayın.
HTML kodunu yazın: Aşağıdaki HTML kodunu kullanarak <img> etiketini oluşturun:

html <img src="resim_urlsi_veya_dosya_yolu" alt="resim_alternatif_metni">

HTML kodunu web sitenize ekleyin: <img> etiketini, resmin görünmesini istediğiniz web sayfasının HTML koduna ekleyin.

Örnek

Aşağıdaki örnek, “logo.png” adlı bir logo resmini web sayfasının sol üst köşesine ekler:

html <img src="logo.png" alt="Şirket Logosu" style="float: left;">

İpuçları

Alternatif metin kullanın: Alternatif metin, resimlerin erişilebilirliğini artırır ve arama motorları tarafından dizine eklenmesine yardımcı olur.
Resim boyutlarını optimize edin: Web sitenizin yükleme hızını artırmak için resim boyutlarını optimize edin.
Resimleri sıkıştırın: Resimleri sıkıştırmak, dosya boyutlarını azaltmaya ve yükleme sürelerini iyileştirmeye yardımcı olur.
Resimleri duyarlı hale getirin: Duyarlı resimler, farklı ekran boyutlarına uyacak şekilde otomatik olarak ölçeklenir.
Resimleri önceden yükleyin: Resimleri önceden yükleyerek, kullanıcıların sayfayı kaydırdıklarında resimlerin daha hızlı yüklenmesini sağlayabilirsiniz.