آموزش Semantic meter

آموزش Semantic meter

Meter یک عنصر جدید در HTML5  می باشد که مقدار یک دامنه ی شناخته شده را به عنوان وسیله ی اندازه گیری نشان می دهد. کلمه ی کلیدی در اینجا دامنه ی دامنه ی شناخته شده می باشد، که بدبن معناست که شما فقط زمانی اجازه ی استفاده از آن را دارید که کاملا از مقدار حداقل و مقدار حداکثر آگاه باشید.

علاوه بر این نباید از این مقیاس اندازه گیری برای نشان دادن یک پیشروی، مثلا پیشروی ۸۰ درصد استفاده کنید زیرا یک عنصر پیشروی در HTML5 وجود دارد.

آموزش Semantic meter آموزش Semantic meter آموزش Semantic meter Semantic meter

آموزش Semantic meter

در نگارش فقط گوگل کروم ۸ و اپرا ۱۱ عنصر meter را در یک مقیاس انداره گیری قابل رویت اجرا می کنند. بنابراین مشخص کردن مقدار متنی بین برچسب های meter مفید می باشد، و مرورگرها meter را به عنوان یک مقیاس اندازه گیری که بتواند به سادگی مقدار را در یک متن ساده نشان دهد، اجرا نمی کنند.

بدون تلاش شما برای مشخص کردن مقدار متنی بین برچسب های meter، یوزر تنها یک فضای خالی در مرورگرها خواهد دید که meter را پشتیبانی نمی کنند.

Browsers

Render meter element as gauge

IE 9 Beta

 

Firefox 13

 

Safari 5

 

Chrome 8

Opera 11

اگر مرورگری ندارید که از این عنصر پشتیبانی کند، تصویر زیر نشان می دهد که در اپرا ۱۱ چگونه به نظر می رسد:

علاوه بر ویژگی های min و max و value ویژگی های دیگری وجود دارند که می توانید برای اجرای وسیله ی اندازه گیری خود استفاده کنید.

Attributes

Descriptions

value

نیاز است که برای استفاده از عنصر meter مقدار را به عدد مشخص کنید. این یک امر لازم می باشد. عدد می تواند یک عدد صحیح یا ممیزی باشد.

min

حداقل مقدار یک meter، اگر مشخص نباشد، ۰ خواهد بود.

max

بیشترین مقدار یک meter، اگر مشخص نباشد، ۱ خواهد بود.

low

این گزینه انتخابی است، مگر اینکه شما تمایل داشته باشید مقدار پایین دامنه را نشان دهید.

high

این گزینه انتخابی است، مگر اینکه شما تمایل داشته باشید مقدار بالای دامنه را تعریف کنید.

optimum

این گزینه کاملا انتخابی است و برای مشخص کردن یک نقطه ی مطلوب در یک دامنه به کار می رود.

آموزش  Semantic progress

عنصر جدید پیشروی به نظر می رسد شبیه به عنصر meter باشد و برای نشان دادن پیشروی یک عمل ایجاد شده است. پیشروی می تواند یا مشخص باشد یا نا مشخص. یعنی اینکه شما می توانید از عنصر پیشروی برای نشان دادن یک پیشروی استفاده کنید که حتی نمی دانید چقدر از کار مربوط به آن باقی مانده است.

گیج کننده به نظر می رسد، چطور می توانید بدون اینکه بدانید پایان کجاست، میزان پیشروی را بگویید.

اولین امکان، کار هنوز حتی شروع هم نشده، بنابراین یا ۰ درصد است یا ۰٫۰۰۰۱ درصد که اصلا مطرح نیست.

دومین امکان اینکه، مقدار حقیقی پیشروی از طرف برخی سرورها یا فرایندهای آپدیت کردن آن در انتظار است.

یکی از استفاده های عنصر پیشروی، نشان دادن پیشروی فایل دانلود می باشد.

برای مشخص کردن پیشروی، همیشه می توانید مقدار پیشروی را در قسمت value تنظیم کنید. یک ویژگی max وجود دارد که می توانید حداکثر مقدار پیشروی را نشان دهید. در مقایسه با عنصر meter، ویژگی min وجود ندارد، چرا که همیشه حداقل میزان پیشروی ۰ می باشد.

در نگارش نیز فقط اپرا ۱۱ و گوگل کروم ۸ عنصر پیشروی را در قالب یک نوار پیشروی پشتیبانی می کنند.

Browsers

Progress element support

IE 9 Beta

 

Firefox 13

Safari 5

 

Chrome 8

Opera 11

آموزش Semantic section

ویژگی های خوانده های W3C – عنصر بخش (section) یک بخش کلی از یک داکیومنت یا یک برنامه را مشخص می کند. در این متن، بخش گروه بندی معنایی محتوا با یک تیتر می باشد.

در تصویر زیر قسمت های مشخص شده بهترین استفاده برای <section> را نشان می دهند.

image-axd آموزش Semantic meter آموزش Semantic meter image

شما نباید از عنصر بخش برای موارد زیر استفاده کنید.

  1. برای یک محتوای منسجم. شما نباید از بخش برای محتوا در RSS feed استفاده کنید. اگر درحال ایجاد وب سایت وبلاگ می باشید از عنصر sectionبرای ورودی وبلاگ خود استفاده نکنید، بلکه باید از عنصر آرتیکل استفاده کنید. به هرحال یک عنصر آرتیکل می تواند دارای عناصر section نیز باشد.
  2. صرفا به هدف لی اوت. از عنصر <div> به عنوان ظرف عمومی به هدف طراحی استفاده کنید.

تقسیم بندی محتوا

  • همیشه زیرمجموعه ای از نزدیک ترین پیش گام آن مانند <body>، <article> یا یک عنصر <section> دیگر می باشد.
  • اوت خود را دارد که می تواند از داکیومنت های اصلی مستقل باشند. شما به استفاده از h1 تا h6 در داخل عنصر بخش تشویق می شوید، بدون اینکه در مورد آنچه در بیرون بخش اتفاق افتاده اذیت شوید.
  • می توانند <header>، <hgroup> و <footer> خود را داشته باشند.

 

آموزش HTML آموزش طراحی وب

دیدگاه خود را بیان کنید