آموزش تگ figure در HTML

آموزش تگ 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 پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
پشتیبانی تگ figure از صفات و رویدادهای عمومی
تگ figure قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- میتوانیم برای قرار دادن کپشن برای تگ figure از تگ figcaption استفاده کنیم و یک عنوان یا کپشن مشخص برای تگ مورد نظرمان مشخص کنیم.
دستورات پیش فرض CSS
اغلب مرورگرها تگ figure
را بشکل کد های CSS مانند نمونه های زیر نمایش میدهند که شما عزیزان میتوانید با استفاده از این تگ ها طرح مد نظر خود را پیاده سازی کنید.
figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید