YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • img, figure, figcaption, details, summary etiketleri Web Sitesine Resim Ekleme
img, figure, figcaption, details, summary etiketleri Web Sitesine Resim Ekleme - img, img etiketi, figure, figure etiketi, figcaption, figcaption etiketi, details, details etiketi, summary, summary etiketi, html, html dersleri, web sitesine resim ekleme, html resim ekleme, #09
Ahmet Aydın - 11/01/2021 - 51 Görüntülenme

img, figure, figcaption, details, summary etiketleri Web Sitesine Resim Ekleme

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML’de img etiketi, figure etiketi, figcaption etiketi, details etiketi ve summary etiketi yapılarını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

img Etiketi

Web sayfamıza resim eklemek için kullandığımız etikettir. img etiketi singleton yapıda yani tek kullanımlık etikettir. Kapatma etiketi yoktur. img etiketini oluşturalım ve img ifadesinden sonra bir boşluk bırakıp src = “” ifadesini yazalım.

src Niteliği

img etiketi içerisinde kullandığımız src niteliği ile web sayfamıza eklemek istediğimiz resmin konumunu belirtiyoruz.

Örnek: src = “img/header.jpg”

Yukarıdaki örnekte, HTML dosyam ile aynı dizinde bulunan img klasörü içerisindeki header.jpg adlı resim dosyasını web sayfama eklemek istediğimi belirtmiş oluyorum. Şimdi de bu ifadeden sonra bir boşluk bırakalım ve alt = “” ifadesini yazalım.

alt Niteliği

Resmin yüklenmediği durumlarda resim ile alakalı bir ifadenin yazdırılması için kullanılan niteliktir.

Örnek: alt = “Çalışma Odası”

Yukarıdaki örnekte alt niteliğine Çalışma Odası değerini verdim. Böylelikle resmin yüklenmediği durumlarda bu ifade resmin yerine yazılacaktır. alt niteliği, arama motorları için de önem arz etmektedir. Bu sebepten dolayı alt niteliğine değer verilmesini önermekteyim.

figure Etiketi

Bir makale veya yazıda ele aldığımız konuyu resim, şema gibi çizimlerle desteklemek istediğimizde kullanabileceğimiz etikettir. Bu gibi durumlarda img etiketini figure etiketinin içerisinde kullanıyoruz.

figure etiketini oluşturalım ve figure etiketinin açma ve kapatma etiketleri arasında img etiketi sayesinde bir resim ekleyelim. Bu işlemi gerçekleştirdiğimizde dosyamızı kaydedip tarayıcıda gözlemlediğimizde resmin girintili bir şekilde geldiğini görebiliriz.

figcaption Etiketi

Bir makale veya yazıyı figure etiketinin açma ve kapatma etiketleri arasında bir resim ile desteklediğimizde bu resme başlık veya alt açıklama tanımlamak için kullanılan etikettir. figure etiketinin açma ve kapatma etiketleri arasında bulunan img etiketinin altında figcaption etiketini oluşturalım. figcaption etiketinin açma ve kapatma etiketleri arasında ilgili resmi temsil edecek bir alt açıklama yazabiliriz.

Örnek: Resim1. Kayıt Öncesi

details Etiketi

Bir ifadenin ayrıntıları için kullanabileceğimiz etikettir. Tek başına kullanıldığında Ayrıntılar başlığı altında açılıp kapanan bir yapı oluşturur. İfadenin ayrıntıları ise details etiketinin açma ve kapatma etiketleri arasında yazılır. details etiketini oluşturup, açma ve kapatma etiketleri arasında bir ifade yazalım. Dosyamızı kaydedip tarayıcıda gözlemlediğimizde ilgili konumda Ayrıntılar başlığıyla bir yapı oluşturulacaktır. Ayrıntılar ifadesine tıkladığımızda details etiketinin açma ve kapatma etiketleri arasında bulunan ifade bize gösterilecektir.

summary Etiketi

Özet tanımlamak için kullanılan etikettir. details etiketinin içerisinde ayrıntının başlığını veya özetini tanımlamak için kullanılabilir. Yukarıda oluşturduğumuz details etiketinin açma ve kapatma etiketlerinin arasına girelim ve summary etiketini oluşturalım. summary etiketinin açma ve kapatma etiketleri arasında ayrıntıları temsil eden bir başlık veya özet yazalım. Bu değişiklikleri yaptıktan sonra dosyamızı kaydedelim ve tarayıcıda açalım. summary etiketinin açma ve kapatma etiketleri arasında yazdığımız ifadenin Ayrıntılar ifadesinin yerine getirildiğini gözlemleyebiliriz. Yine bu ifadeye tıkladığımızda details etiketinin açma ve kapatma etiketleri arasında bulunan ifade bize gösterilercektir.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML’de img etiketi, figure etiketi, figcaption etiketi, details etiketi ve summary etiketi yapılarını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...