HTML figure Etiketi Nedir Ve Nasıl Kullanılır?

HTML figure elementi, external (harici) ve internal (dahili) elemanlar için bir alan oluşturur. Bu oluşturulan alana container (taşıyıcı) denilir. Örneğin text ve resim dosyalarının birbirleriyle uyumu yakalamaları için figure elementi kullanılabilir.

<figure> … </figure> elementinin kullanımı aşağıdaki gibidir.

<figure>

<!– burasi external & internal elemanlar alanidir. –>

</figure>

HTML figure elementi ile basit bir örnek yapalım. Örneğimiz aşağıdaki gibi olacaktır.

<!DOCTYPE html>
<head>
<title>Figure Örnek!</title>
<meta charset="utf-8">
</head>
<body>
<!-- figure elementinin kapsam alani icerisinde; external &amp; internal herhangi bir kaynak eklenebilir. -->
<figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <br>
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <br>
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <br>
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
<!-- text'in altina herhangi bir resim dosyasini ekledik. -->
<img src="rocky.jpg" alt="rocky" />
</figure>
</body>
</html>

Yukarıdaki örneğimize ait olan ekran çıktısını alalım.

HTML figure etiketi

Yukarıdaki ekran çıktımızda görüldüğü üzere; figure elementine herhangi bir müdahalede bulunmadan kendi container’ını oluşturdu ve text & resim dosyasını kendine göre konumlandırdı. Gerçekten çok kullanışlı bir yapıya sahiptir.

HTML figure etiketi konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/html/

Sosyal Medya Hesaplarımız

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: