آموزش تگ figcaption در html
تگ figcaption در html
فهرست موضوعات در این آموزش
تگ <figcaption> یک عنوان برای تگ figure تعریف می کند. این تگ می تواند به عنوان اولین یا آخرین عنصر داخل تگ <figure> قرار بگیرد.
استفاده از این تگ اختیاری است .
در جلسه گذشته آموزش تگ figure را به صورت کامل آمزوش دادیم در صورت که هنوز اون جلسه را مشاهده نکردی حتما اول ببیند.
آموزش تگ figure در html
تگ‌های معنادار
HTML در ابتدا به عنوان یک زبان نشانه‌گذاری طراحی شد، هدف اصلی آن توصیف کردن اسناد روی اینترنت بود. اما با گذشت زمان و پیشرفته‌تر شدن دنیای وب، HTML نیاز داشت که خود را با موضوعات جدیدتر وفق داده و تغییراتی در خود اعمال کند.
در زمانی که تنها هدف اینترنت انتشار مقالات علمی بود رفته رفته مردم عادی نیز قصد داشتند تا آن‌ها نیز با آن کار کنند. به دلیل آنکه در ابتدا اینترنت برای استفاده عامیانه طراحی نشد، توسعه‌دهندگان سعی کردند تا محیط وب را به نفع کاربران مختلف تغییر دهند.
اولین تلاش برای این موضوع از تگ table شروع شد، تگی که جدای از کاری که انجام می‌داد خود بیانگر حالتی بود که در آن قرار می‌گرفت. اما تگ‌های دیگر کمتر از هر زمانی این بیان مندی را در خودشان داشتند. برای مثال زمانی که قصد ایجاد یک سربرگ یا header در وبسایت را داشتیم تنها کاری که انجام می‌دادیم استفاده از تگ <div> همراه با id مشخصی بود. این اتفاق برای دیگر بخش‌های یک صفحه اینترنتی نیز می‌افتاد.
اما با ورود HTML5 همه این موضوعات تغییر پیدا کرد و در واقع وب غیر بیان مند به وب توضیحی یا توصیفی تبدیل شد.
آموزش تگ figcaption در html
تگ <figcaption> مانند بسیاری از تگ های html دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.
تگ <figure> نیز محتوای خود مانند تصاویر، نمودار ها، عکس ها، لیست کد و … را مشخص می کند.
در حالی که محتوای تگ <figure> با جریان اصلی سند مرتبط است، جایگاهی مستقل دارد و در صورتی که این تگ حذف شود، نباید تاثیری بر جریان اصلی بگذارد.
آموزش Figure & Figcaption
تگ <figure> برای حاشیه‌نویسی تصاویر، نمودارها، عکس‌ها، لیست کدها و غیره استفاده می‌شود. میتوانید از <figure> در رابطه با <figcaption> استفاده کنید تا یک عنوان برای محتوای <figure> خود تهیه کنید. تگ <figure> در HTML 5 معرفی شده است.
از تگ <figcaption> برای تهیه شرح در هنگام استفاده از تگ <figure> استفاده می‌شود. تگ <figcaption> به عنوان اولین یا آخرین فرزند از تگ <figure> والد خود استفاده می‌شود و در HTML5 معرفی شده است.
مثال :
|
1 2 3 4 5 |
<figure> <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset"> <figcaption>An elephant at sunset</figcaption> </figure> |
استایل :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto; } img { max-width: 220px; max-height: 150px; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } |
در این جلسه به آموزش کار با تگ figcaption در HTML پرداختیم و آموختیم که تگ figcaption به تعیین عنوان یا کپشن برای تگ figure می پردازد حالا این که تگ figure چیست موضوعی است که در جلسه گذشته آموزش دادیم.
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.