در جلسه قبل لیستی از تگ های جدید اضافه شده به html5 را ارائه کردیم ، در این جلسه به توضیح مهمترین تگ های HTML5 پرداخته و روش استفاده از آنها را نشان می دهیم.
تگ < article >
از تگ < article > برای تعیین یک هدر یا عنوان ( متن مجزا از سایر محتویات صفحه ) استفاده می شود .
موارد مختلف استفاده از تگ < article > ، می تواند موارد زیر باشد :
- عنوان پست ها در فروم ها .
- عنوان مطالب جدید در وبلاگ ها .
- عناوین خبری در سایت های خبری .
تگ < bdi >
عبارت bdi مخفف واژه Bi-directional Isolation ، به معنای جدا سازی بی جهت یا ساختار نیافته است .
از تگ 9 برای جدا سازی و فرمت دادن به یک متن که با سایر متون اطراف خود فرق دارد ، استفاده می شود .
از این تگ معمولا برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد ، استفاده می شود .
برای مثال فرض کنید که یک پاراگراف دارید به زبان انگلیسی . حال عبارت یا واژه ای فارسی در میان این متن قرار دارد . تفاوت زبان دو نوشته ، ممکن است باعث نمایش ناصحیح متن پاراگراف شود . با قرار دادن متن فارسی در یک تگ < bdi > ، آن را از سایر متن ایزوله کرده و مانع از بروز اشکال احتمالی در نمایش آن می شوید .
تگ < details >
از تگ < details > برای تعیین توضیحات اضافه درباره یک موضوع استفاده می شود ، که کاربر می تواند بر طبق نیاز و انتخاب خود ، آن را مخفی یا نمایان سازد .
به عبارت دیگر تگ < details > ، برای ایجاد یک منو یک منوی متحرک استفاده شده ، که کاربر می تواند آن را با کلیک باز و بسته نماید . هر نوع متن یا تگ دیگر را می توان درون تگ < details > ، تعیین نمود .
نکته مهم : اگر خاصیت open را برای تگ < details > تعیین نکنید ، محتویات درونی آن به صورت پیش فرض مخفی خواهد بود .
نکته مهم 2 : از تگ < summary > برای تعیین محتویانت درونی تگ < details > ، استفاده می شود .
هنگامی که کاربر بر روی عنوان تگ < details > کلیک نماید ، این محتویات مخفی و نمایان می شوند .
تگ < fiqure >
از تگ < fiqure > ، برای تعیین یک محتوی مجزا مثل عکس ، دیاگرام ها ، لیست ها و … بروی صفحه استفاده می شود .
کاربردی که این تگ می تواند داشته باشد ، این است که نحوه و محل قرار گیر عنصر و محتویات درون آن را به صورت مستقل و مجزا از سایر محتویات صفحه تعیین می کند .
بنابراین اگر عنصر حذف شود ، در جریان و چیدمان کلی صفحه ، تغییر یا مشکل خاصی به وجود نخواهد آمد .
تگ < figcaption >
از تگ < figcaption > ، برای تعیین یک عنوان یا توضیح برای تگ < fiqure > استفاده می شود .
این عنوان هم می تواند در ابتدا و هم در انتهای عنصر مادر قرار داده شود .
شکل کلی تعریف یک تگ < figcaption > بصورت زیر است :
| syntax |
<figure> ….. figure محتویات تگ ….. <figcaption> عنوان یا توضیح مورد نظر </figcaption> </figure> |
تگ < mark >
از تگ < mark > می توان برای برجسته و یا علامت زدن رنگی نوشته استفاده کرد .
متنی که بین تگ باز و بسته < mark > قرار بگیرد ، معمولا رنگ زردی به عنوان پس زمینه آن نشان داده می شود .
تگ < meter >
از این تگ برای نمایش یک مقدار اندازه گیری عددی یا درصدی بصورت گرافیکی استفاده می شود . به عبارت دیگر از این تگ برای نمایش یک درجه یا نمودار بر روی صفحه استفاده می شود .
برای مثال بوسیله این تگ می توان درصد کل استفاده از فضای دیسک را نمایش داد . نحوه کار این تگ به این صورت است که شما یک مقدار حداکثر و حداقل را برای آن تععین می کنید . این دو مقدار بصورت یک نمودار نمایش داده می شود . سپس مقدار اصلی تگ را تعیین کرده که باید بین مقدار حداکثر و حداقل باشد .
شکل کلی استفاده از یک تگ < meter > بصورت زیر است :
| syntax |
<meter value = ” value ” min = ” value ” max = ” value ” > </meter> |
توضیح خواص تگ < meter >
| توضیح خواص | |
| توضیح | خاصیت |
| این خاصیت مقداری که تگ باید بر روی نمودار یا شکل نمایش دهد ، را تعیین می کند .
این مقدار مقدار واقعی تگ بوده و حتما باید تعیین شود . |
value |
| این خاصیت حداقل مقدار تگ را تعیین می کند . | min |
| این خاصیت حداکثر مقدار تگ را تعیین می کند . | max |
| این خاصیت کمترین مقداری که انتظارش می رود تا تگ داشته باشد را تعیین می کند . این مقدار باید از خاصیت min بیشتر بوده و از خاصیت های max و high کمتر باشد .
تعیین این خاصیت اختیاری است . |
low |
| این خاصیت بیشترین مقداری که انتظار می رود تا تگ داشته باشد را تعیین می کند .این مقدار باید از خاصیت min و low بیشتر و از خاصیت max کمتر باشد .
تعیین این خاصیت اختیاری است . |
high |
| این خاصیت id فرمی را تعیین می کند که تگ <meter> به آن تعلق دارد . تعیین این خاصیت اختیاری است . |
id |