معرفی و کاربرد تگ progress در HTML
معرفی و کاربرد تگ progress در HTML | درصد پیشرفت
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <progress> در HTML می پردازیم.
تگ <progress> در اچ تی ام ال
از تگ <progress> برای ایجاد نمودار درصد پیشرفت استفاده می شود، به عنوان مثال از تگ <progress> می توانید برای نمایش درصد تمام شده از یک پروژه، کار یا درصد راندمان و … استفاده لازم را به عمل آوردید.
پس دانستیم استفاده از تگ <progress> در سند HTML برای نشان دادن پیشرفت یک پروسه یا کار است.
تگ <progress> دو خاصیت value و max میگیرد، در خاصیت max در مقدار ماکزیمم عدد قرار میگرد، و در مقدار value هر عددی قرار بگیرد نسبت به مقدار max محاسبه و به همان اندازه نمودار پر می شود.
نکات مهم در مورد تگ <progress> در سند HTML
نکته ۱ :
از تگ <progress> به کمک دستورات زبان JavaScript برای نمایش پیشرفت کار استفاده می کنیم.
نکته ۲ :
از تگ <progress> برای نمایش دادن اندازه یا مقیاس استفاده نکنید (به عنوان مثال فضای دیسک استفاده شده و یا ارتباط از نتیجه پرس و جو و… ). برای این کار بهتر است از تگ meter در سند HTML استفاده کنید.
مثال در مورد تگ <progress> در اچ تی ام ال
[html]<progress value=”22″ max=”100″></progress>[/html]
بررسی تگ <progress> در HTML 4.01 و HTML5
تگ <progress> یک تگ جدید در HTML5 است. در حالی که در HTML4.01 و نسخه های قدیمی تر وجود نداشته است..
خصوصیات ویژه تگ <progress> در HTML5
ویژگی خصوصی تگ progress | مقدار | کاربرد در سند HTML |
max | number | مشخص می کند که در کل چه مقدار لازم است که پروسه کامل شود. |
value | number | مشخص می کند که چه مقدار از پروسه پیش رفته است. |
ویژگی های عمومی تگ <progress> در HTML
تگ <progress> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
رویدادهای عمومی تگ <progress> در HTML
تگ <progress> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.
پشتیبانی مرورگرها از تگ <progress> در اچ تی ام ال
در زیر مرورگرهای معتبر اینترنتی از اولین نسخه هایی که از تگ <progress> پشتیبانی می کنند، آمده است:
تگ | فایرفاکس | اینترنت اکسپلورر | گوگل کروم | سافاری | اپرا |
progress | 16.0 به بالا | 10.0 به بالا | 8.0 به بالا | 6.0 به بالا | 11.0 به بالا |
جهت دیدن تمام ردیف و ستون ها در حالت موبایلی جدول را به چپ و راست اسکرول کنید.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت با HTML5 و CSS3 پروژه محور
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
معرفی و کاربرد تگ progress در HTML | درصد پیشرفت – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید