شکل (figure)
تگ «شکل (figure)» یک محتوای مستقل می سازد؛ مثل عکس، نمودار، یا کد. سپس، با figcaption برایش عنوان می گذاریم. بنابراین فهم محتوا آسان تر می شود. همچنین جابه جایی شکل، متن اصلی را به هم نمی ریزد.
figure چیست و چرا مهم است؟
«شکل (Figure)» یک بسته کامل است. محتوایش مستقل است. بنابراین حذفش، جریان متن را نمی شکند. همچنین همراه عنوان، معنی دقیق تری منتقل می کند.
نمونه پایه: شکل با عنوان
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
استایل دهی figure و figcaption
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>
تنظیمات پیش فرض CSS
مرورگرها figure را بلوکی نشان می دهند. بنابراین بالا و پایین، فاصله می گیرد.
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
گام های سریع ساخت شکل
- ابتدا یک <figure> بساز.
- سپس رسانه اصلی را داخلش بگذار.
- بعد، یک <figcaption> برای عنوان اضافه کن.
- در پایان، استایل دلخواه را تنظیم کن.
نکته: برای عکس ها، ویژگی alt را دقیق بنویس.
همچنین می توانی درباره عنوان شکل به صفحه عنوان شکل (figcaption) بروی. برای درج تصویر هم صفحه img مفید است.
جمع بندی سریع
- figure محتوای مستقل را گروه بندی می کند.
- حذف figure متن را نمی شکند.
- figcaption عنوان شکل را می نویسد.
- استایل دهی ساده و قابل کنترل است.