Bu yazıda web sitesine resim eklemenin yanı sıra hiç bilmediğiniz HTML resim ekleme yöntemleri hakkında bilgiler bulacaksınız. Bir HTML sayfasına resim eklemek için <img> etiketi kullanıldığını web sayfası geliştirmeyi öğrenen herkes duymuştur. Fakat sayfaları geliştirirken responsive (duyarlı) şekilde de HTML olarak resimlerin eklenebildiğini biliyor muydunuz? İşte bu yazıda resim ekleme ve resimleri responsive yapma üzerine bilgiler bulacaksınız.
HTML Resim Ekleme
İlk olarak <img> etiketi kullanımı ile başlayalım. Bir web sayfasına görsel bir medya eklemek için kullanılan etikettir. En basit kullanımı da şu şekildedir.
|
1 2 3 |
<img src="ornek-resim.jpg" alt="Resim ile ilgili açıklama"> |
Etiketin açılıp kapanmadığı dikkatinizi çekmiştir. <img> etiketi sadece açılış içermektedir. Ayrıca çok önemli iki tane de niteliğe sahiptir.
src: Resmin fiziksel yolunu gösterir ve resim yolu için URL adresi de alınabilir. Ayrıca base64 ile kodlanmış resim kodu da src niteliğinde kullanılabilir.
alt: Alt özniteliği, bir nedenden dolayı kullanıcı göremiyorsa (yavaş bağlantı nedeniyle, src özniteliğindeki bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa), görüntü için alternatif bir metin sağlar. (SEO için son derece önemlidir.)
Örnek 1: Sayfa ile aynı sitedeki bir resim dosyasına yol gösterme
|
1 2 3 |
<img src="ornek-resim.png" alt="site logo"> |
Örnek 2: gif formatında bir resme yol gösterme
|
1 2 3 |
<img src="hareketli.gif" alt="site logo"> |
Örnek 3: Harici bir URL’den resime yol gösterme
|
1 2 3 |
<img src="https://www.tasarimkodlama.com/wp-content/uploads/2018/11/tasarim_kodlama_uzun-e1542533974839.png" alt="site logo"> |
<picture> ve <source> Etiketi Kullanımı
HTML5 ile hayatımıza giren yeni etiketlerden bir tanesi de <picture> ve <source> etiketleri olmuştur. Bu etiketleri kullanarak farklı medya sorguları oluşturabiliyoruz. <picture> etiketi tanımlayıp, her ekran boyutuna göre farklı <source> etiketleri tanımlaması yapıyoruz. Tarayıcının tanımaması durumuna bağlı olarak da <img> etiketi tanımlamasını sona ekleyerek farklı ekran çözünürlüklerinde farklı boyutlarda resimler gösterme fırsatımız ortaya çıkıyor.
Örnek:
|
1 2 3 4 5 6 7 8 |
<picture> <source media="(min-width: 800px)" srcset="yildirim-800w.png"> <source media="(min-width: 480px)" srcset="yildirim-480w.png"> <source media="(min-width: 320px)" srcset="yildirim-320w.png"> <img src="yildirim-800w.png" alt="Flowers" style="width:auto;"> </picture> |
Farklı medya boyutlarına göre ilgili resim sunucudan çekilip kişinin ekranında gösterilmektedir. Yukarıdaki çalıştırdığımızda aşağıdaki gibi bir görünecektir.
Bu yazıda yer vermedik fakat <source> ve <img> etiketlerinin srcset niteliklerinde sadece farklı genişliklerin yanı sıra retina ekranlar gibi yüksek çözünürlüklü (HiDPI) ekranlar için de çözümler üretmek mümkün hale gelmektedir. Bu konu ile ilgili daha detaylı bilgi almak için bu yazıyı okumanızı tavsiye ederim.
merhabalar html bir yerde takıldım yardımcı olabilirmisiniz;
bir fotoğrafa link vermek yeni sayfada açtyırmak istiyorum ayrıca fotoğrafıda boyutlandırmak istiyorum aşağıdaki örneği yaptım çalışıyor sorunsuz fakat html eitörde kod hatası olarak kırmızı çarpı çıkıyor doğusu nasıl olmalıdır
https://twitter.com/" target=”_blank”