آموزش تگ figure در HTML

17 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ figure در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ figure در HTML به صورت کامل آشنا بشید.

تگ figure در HTML

کاربرد تگ figure در زمانی است که میتوانیم با استفاده از آن عکس ها، نمودارها ، شکل ها و… را در یک صفحه ی وب تعریف کنیم.

تگ figcaption کمکل تگ figure است که  در داخل این تگ قرار میگیرد و کاربردش هم این است که میتوانیم یک عنوان یا کپشن برای تگ figure مان تعریف کنیم.

مثال از تگ figure در HTML

در دوره آموزشی html css پروژه محور به چند تا از مثال های این تگ میپردازیم تا درک بهتری از این تگ داشته باشید.

مثال اول : استفاده خالی از figure یعنی بدون استفاده از تگ مکمل و حتی استایل.

<body> 
 <figure style="text-align:center;">
   <img src="files/ali-daei.jpg">
 </figure>
</body>

مثال دوم : قرار دادن کپشن برای تگ figure با استفاده از تگ figcaption

<body>
 <figure style="text-align:center;">
   <img src="files/ali-daei.jpg">
   <figcaption>علی دایی در سال 2019</figcaption>
 </figure>
</body>

آخرین مثال : استایل دادن به تگ figure با بهره گیری از کد های CSS

figure{
  border:3px #000 solid;
  padding:4px;
  margin:10px auto;
  max-width:500px;
  overflow:auto;
  text-align:center;
}
 
figcaption{
  background-color:#123456;
  color:#fff;
  font-style:italic;
  padding:5px;
  text-align:center;
}

راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

پشتیبانی مرورگرها از تگ figure

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ figure در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

پشتیبانی تگ figure از صفات و رویدادهای عمومی

تگ figure قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • میتوانیم برای قرار دادن کپشن برای تگ figure از تگ figcaption استفاده کنیم و یک عنوان یا کپشن مشخص برای تگ مورد نظرمان مشخص کنیم.

دستورات پیش فرض CSS

اغلب مرورگرها تگ figure را بشکل کد های CSS مانند نمونه های زیر نمایش میدهند که شما عزیزان میتوانید با استفاده از این تگ ها طرح مد نظر خود را پیاده سازی کنید.

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید