HTML ile resim ekleme - nasıl çalışır?
Web sitenize HTML ile resim eklemek istiyorsanız img etiketini kullanın. Bunun tam olarak nasıl çalıştığını ve nelere dikkat etmeniz gerektiğini buradan okuyun.
HTML ile resim ekleme - temel bilgiler
- Gün ile
resim ekleyebilirsiniz. - Resim kaynağı şu etiket içinde verilir:
web sitesindeki "resimler" alt klasöründen "testbild.webp" dosyasını ekler. - URL yoluyla harici kaynaklar da mümkündür:
CHIP logosunu sunucularımızdan entegre eder.
Gömülü resimler için HTML özellikleri
İmg etiketine çok sayıda özellik eklenebilir:
- Web sitesindeki görüntünün boyutunu belirlemek için "genişlik" ve "yükseklik" kullanın: Görüntü
100 piksel kenar uzunluğunda kare olarak görüntülenir. - "Alt" ile, ilgili resim yüklenemezse görüntülenecek alternatif bir metin tanımlarsınız. HTML ile resim eklerken bu özelliği her zaman ayarlamanız gerekir.
- "Border" özelliği çerçevenin kalınlığını piksel cinsinden belirtir. İle bir resim
beş piksel ile nispeten kalın bir çerçeveye sahiptir. - Grafiği hizalamak için "hizala" seçeneğini kullanın. Bu özellik için değerler "alt", "üst", "orta", "sol", "sağ" ve "orta" dır.
- "Hspace" ve "vspace" ile görüntüye (yatay ve dikey) bir mesafe belirleyebilirsiniz.
Hangi biçimi kullanmalıyım?
HTML koduna ekleyebileceğiniz çeşitli görüntü formatları vardır.
- JPG: JPG biçimindeki resimler en çok web sayfaları için kullanılır. Bu format 16, 7 milyon rengi temsil eder.Ayrıca JPG çok iyi sıkıştırılabilir. Bu nedenle görüntü dosyası çok küçük yapılabilir, bu da hızlı bir yükleme süresi sağlar.
- PNG: PNG formatı ayrıca 16, 7 milyon renk görüntüleyebilir ve sıkıştırılabilir. JPG formatına göre avantaj, sıkıştırmanın kayıp olmadan mümkün olmasıdır.
- PNG formatında tanımlanan alanlar saydam olarak da görüntülenebilir. Bununla birlikte, çok eski tarayıcılarda asetat görüntüleme sorunları vardır.
- GIF: HTML ile hareketli resimler eklemek istiyorsanız, GIF formatı uygundur. Bu formatta sadece 256 renk gösterilir ve sıkıştırma herhangi bir ayar seçeneği olmadan otomatik olarak gerçekleşir.
- GIF formatı en küçük, hareketli grafikler veya logolar için uygundur. Logoların bir sayfaya uyumlu bir şekilde uymasını sağlamak için asetatlar PNG biçiminde GIF biçiminde kullanılabilir.
HTML örneği
- Bu, web sitemizdeki CHIP logosunu entegre eder.
- 100 piksel yüksekliğinde ve 200 piksel genişliğinde görüntülenir.
- Yüklenemezse, "CHIP-Logo" boş metin olarak görüntülenir.
- Resim iki piksel çerçeveyle çerçevelenir.
- Sağa hizalanır ve diğer yan öğelerden 50 piksel uzaklıktadır.