وباکا

آموزش تخصصی برنامه نویسی وب

در جلسه قبل لیستی از تگ های جدید اضافه شده به 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

 

مطالب مرتبط

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب