آموزش کاربرد تگ progress در HTML

0 دیدگاه 167 آموزش html

آموزش کاربرد تگ progress در HTML

فهرست موضوعات در این آموزش

بنام خدا سلام خدمت شما تمام دوست و همراهان همیشگی وب سایت پاسخ وردپرس در خدمت شما هستم با یکی دیگه از جلسات آموزش html در این جلسه آموزش کاربرد تگ progress در HTML خدمت به صورت آموزش خواهیم داد پس تا آخر همراه پاسخ وردپرس باشید .

از تگ <progress> برای ایجاد نمودار درصد پیشرفت استفاده می شود، به عنوان مثال از تگ <progress> می توانید برای نمایش درصد تمام شده از یک پروژه، کار یا درصد راندمان و … استفاده لازم را به عمل آوردید.

پس دانستیم استفاده از تگ <progress> در سند HTML برای نشان دادن پیشرفت یک پروسه یا کار است.

تگ <progress> دو خاصیت value و max میگیرد، در خاصیت max در مقدار ماکزیمم عدد قرار میگرد، و در مقدار value هر عددی قرار بگیرد نسبت به مقدار max محاسبه و به همان اندازه نمودار پر می شود.

مثال در مورد تگ <progress>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>replywp.com</title>
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://replywp.com/footer-tag-in-html/" target="_blank" rel="nofollow" class="IRPP_button"><!-- INLINE RELATED POSTS 1/3 //--><style> .IRPP_button , .IRPP_button .postImageUrl , .IRPP_button .centered-text-area { min-height: 86px; position: relative; } .IRPP_button , .IRPP_button:hover , .IRPP_button:visited , .IRPP_button:active { border:0!important; } .IRPP_button { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #3498DB; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_button:active , .IRPP_button:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_button .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 30%; } .IRPP_button .centered-text-area { float: left; width: 70%; padding:0; margin:0; } .IRPP_button .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_button .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 80%;display: inline-block;float: right; } .IRPP_button .ctaButton { background: #2980B9; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; margin: 18px 14px 18px 14px; moz-border-radius: 3px; padding: 12px 0; text-align: center; text-decoration: none; text-shadow: none; webkit-border-radius: 3px; position: absolute;float: left;padding: 5px 3%;width: auto;left: 0;top: 8px; } .IRPP_button:hover .ctaButton { background: #3498DB; } .IRPP_button .centered-text { display: table; height: 86px; padding:0; margin:0; padding-left: 0px!important; top: 0;width: 100%; } .IRPP_button .IRPP_button-content { display: table-cell; margin: 0; padding: 0; padding-right: 10px; position: relative; vertical-align: middle; width: 100%; } .IRPP_button:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text"><div class="IRPP_button-content"><div class="postTitle">آموزش تگ footer در html</div><div class="ctaButton">یک آموزش جذاب دیگه!</div></div></div></div><div data-bg="https://replywp.com/wp-content/uploads/2022/11/تگ-footer-در-html-300x300.jpg" class="postImageUrl rocket-lazyload" style=""></div></a></div>
</head>
<body>
    <progress value="50" max="100"></progress>
</body>
</html>

<!DOCTYPE html>

<head>

<title>replywp.com</title>

</head>

<body>

</body>

</html>

صفتها (Attributes)

max
مقدار کل پیشرفتی که باید انجام شود را مشخص می کند.

value
مقدار پیشرفتی که انجام شده است را مشخص می کند.

ویژگی های عمومی تگ <progress> در HTML

تگ <progress> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

رویدادهای عمومی تگ <progress> در HTML

تگ <progress> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.

پشتیبانی مرورگرها از تگ <progress> در اچ تی ام ال

تمام مرورگرها از این تگ html پشتیبانی می کنند.

دانلود فایل این جلسه

برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.

آموزش نرم افزار های مورد نیاز طراحی وب سایت

در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .

آموزش و کاربرد تگ title در HTML

یک آموزش جذاب دیگه!

طراحی وب

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

آموزش css html آموزش HTML5 CSS3

در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.

آموزش html

میانگین رتبه 5/5 تعداد رای : 2

آموزش کاربرد تگ progress در HTML