هدایت به بالای صفحه

اسکرول بار

بر چسب های مورد علاقه بازدید کنندگان : ریسورس‌پک , اخبار بازی , آموزش ادیت

ARMINIA

1

ARMINIA

1
سرور آیرون شاپ
کوتاه کننده لینک
سرور آیرون شاپ
کوتاه کننده لینک

آموزش تگ meter و progress، تگ بیست و هشتم، تگ آخر

سَلامٌ عَلَیکُم مُبَرِّجٌ

سلام برنامه نویس حرفه ای! بعد از این بسی رنج بردن در این سال بیست و هفت(27 مقالۀ گذشته)، اگر به اندازۀ کافی تمرین کرده باشی، فهمیدی که این html که انقدر زیباست، کمتر از یک صدم این دنیای برنامه نویسی بزرگه! شما هنوز به اندازه کافی با زبان های JS, PYTHON, CSS, PHP, DELPHI, C, AJAX, PERL, Oz, CLIPPER, RUBY و کلی زبون دیگه که اینها فقط زبون تحت وب هستند، آشنا نیستید چه برسه به اینکه بخواین تمامی زبون های برنامه نویسی حتی اسمشون رو بدونید!(صادق باشیم، من خودم از دلفی، چیزی سرم نمیشه!)

سوال: شما تا چه سطحی آمده اید؟!

شما تا چه سطحی از html آمده اید؟

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

اگر حس میکنید واقعا html تون در این سطحه و برنامه نویسیتون انقدر سطح پایینی داره، باید خوشحال باشید! اتفاقا اگر حس میکنید html تون صعیفه و یا اگر در بقیه بخش های برنامه نویسی، کیفیت مناسب دارید، اشتباه اومدید. نمی خوام بگم اینجا برای افرادی هست که چیزی از برنامه نویسی نمی فهمن، بلکه منظورم اینه که یک برنامه نویسی که واقعا هم خیلی حرفه ای هستش، اگر سطح برنامه نویسی خودش رو، هم سطح html شما ببینه، داره خودشو گول میزنه چون انقدر این کیهان برنامه نویسی، بزرگ و بی کرانه، که هیچ کسی نمیتونه به سطح کهکشانی برسه. توی این دنیای مادی هم اگر شما یک ثانیه فکر کنید به خارج از کهکشان راه شیری و اگر اعتقاد داشته باشید که محدوده مساحتی یا حجمی این جهان، بی نهایته، درک عقلی و روحی پیدا می کنید که چقدر این دنیا بزرگه، اما دنیای برنامه نویسی، در حوزه خودش، فراتر از جهان ما هست چون در این دنیا، جابجا کردن مرز های جغرافیایی حتی فقط کشور ها هم، کار خیلی سختیه اما در دنیای برنامه نویسی، هر کسی که فوق دکترای مهندسی کامپیوتر نرم افزار داشته باشه، میتونه یه زبان برنامه نویسی جدید رو تعریف کنه. پس دنیای برنامه نویسی، علاوه بر بزرگ بودنش، بزرگتر شدنش هم خیلی سادس پس جملۀ پایانی؛ پس هر وقت یه برنامه نویس معروف و لایق شدید، باز هم نگین من درصد پیشرفتم در برنامه نویسه به 100% رسیده، چون هیچوقت این برنامه نویسی به آخرین مرز نمیرسه و همیشه جای بزرگتر شدن داره. من هم این قول رو میدم!

تگ رو یاد بده بریم خونمون بابا!

خب ببخشید وقتتون رو گرفتم اما همه اینا برای یاد دادن دو تا تگ امروز بود! این پاراگرافی که چند ثانیه پیش خوندید، اشتباه نبود و باعث نشد وقتتون بره اما اون عکسای بالا، برای یاد گیری امروز بود! تگ meter، کارش اینه که یه نوار رنگی رو بسازه که بهش یه درصدی میدیم و اون هم برامون به صورت عکس های بالا خروجی میده. بازهم ببخشید که خیلی حرف زدم! البته باز هم مثل خیلی از تگ های دیگه، شما میتونید با استفاده تگ style، رنگ سبز نوار، اندازه bar و … رو تنظیم کنید.

کدها

meter

<!DOCTYPE html>
<html>
<body>
<label for="%bar_1">Remaining memory of your system:</label>
<meter id="%bar_1" value="0.6"></meter>
</body>
</html>

در این کد، برای نوشتن متنی قبل از نوار، تگ label رو که هیچوقت قرار نیست درس بدم چون همین الان قراره یاد بگیرید رو، باز میکنیم! در اون با استفاده از دستور for، یه نشونه ای برای متنمون میزاریم و درونش، متنمون رو مینویسیم.

در تگ meter هم با استفاده دستور id، برای اینکه تگ های label و meter رو به هم بشناسونیم و به هم ربط بدیم، همون نشونه رو براش مینویسیم که اینجا، نشونۀ ما، %bar_1 هست؛ بعد از اون در دستور value، درصدش رو مینویسیم که اینجا 0.6 به معنای 60% هست. یعنی شما برای درصد، باید یک عدد بزرگتر مساوی 0 و کوچکتر مساوی 1 به صورت اعشاری بنویسیم.(حتما نباید عددمون، تا یک رقم اعشار داشته باشه و شما تا هر عددی بخواین، میتونید اعشارش رو طولانی کنید)

نکته: خروجی این تگ در مرورگر های microsoft edge با ورژن 12 یا پایین تر، نمایش داده نمی شود!


progress

<!DOCTYPE html>
<html>
<body>
<progress value="44" max="100"></progress>
</body>
</html>

اینجا چون متنی مربوط به این نوار نداشتیم، نیازی هم نبود که از تگ id استفاده کنیم، فقط بهش value ای که الان داره رو میدیم و بهش میدیم تا کی ادامه بده که به کمک دستور max، این کار رو انجام میدیم. میتونیم با کمک javascript، بهش بگین که مثلا هر ثانیه، 1% جلو بره و 1 واحد به value اضافه بشه.

نکته: برای خروجی گرفتن از این تگ، دقت کنید که در هیچکدوم از این دستورها، نباید علامت % رو بزارید ولی خب چون HTML، زبونی هستش که هیچوقت باگ نداره و همیشه کد شما رو، به هر نحوری که شده خروجی میده، به جای 44 درصد، 0 درصد اون نوار رو براتون پر میکنه پس، این علامت رو استفاده نکنید!

یادگیری تگ label

این تگ با فونت و اندازه دقیقا مثل تگ p نمایش داده می شه ولی تفاوتی که داره، اینه که دستور های خاصی میتونیم درونش بنویسیم که مهم ترینش، همین دستور for هستش که برای نوشته های css، style یا چیزای دیگه ای مثل همین meter، میتونیم، بهشون id بدیم تا راحت تر رنگ، فونت، زیبایی یا … بهش بدیم یا تگ دیگه ای رو بهش وصل کنیم.

خداحافظ همگی!

خیلی خوشحالم که کمکتون کردم و اگر هر مشکلی با یادگیری یا حتی خود من دارید، نظرتون رو در بخش انتقادات یا کامنت های هر کدوم از پست های من که خواستید بگید تا مطلع بشم. برای درخواست زبان های جدید یا ارتباط به شخص بنده، اطلاعات زیر رو داشته باشید:

کوئرا | hadialikhani88@gmail.com | 09367172041


???

ممنون که برای خودتون وقت میزارید و ممنون که وقتتون رو اینجا میزارید! ابرای پست های مرتبط، یه سَری به این صفحه بزنید. انتقاد یا پیشنهادی هم اگر دارید، در بخش نظرات پایین همین صفحه نظرتون رو وارد کنید یا تو این صفحه، انتقاداتتون نسبت به سایت arminia رو بگید!

آموزش نصب

دیگر مقالات

ریسورس پک ددپول 64x

نقد وبررسی ریسورس پک ددپول (Deadpool) ریسورس پک Deadpool یک ماجراجویی جذاب برای بازی Minecraft است که بر پایه کاراکتری مشهور با همین نام ایجاد شده است. این ریسورس پک

ریسورس پک رویال بولو 16x

نقد و بررسی زیسورس پک رویال بولو (royal blue v2) ریسورس پک “Royal Blue” یک پکتج فوق‌العاده زیبا و جذاب برای بازی ماینکرفت است. این ریسورس پک به طور عمده

ریسورس پک کیوبیت 16x

نقد و بررسی ریسورس پک کیوبیت (qubit) ریسورس پک یک مجموعه از فایل‌ها است که به بازی Minecraft اضافه می‌شود. این ریسورس پک، تغییراتی را در بخش ظاهری بازی ایجاد

محمدهادی علیخانی

محمدهادی علیخانی

محمد هادی علیخانی، به صورت حرفه‌ای روی html کار کردم و الانم جزو تیم نویسندگان آرمینیا 7070 هستم!

این پست را با اطرافیان به اشتراک بذارید!

WhatsApp
Twitter

تبلیغات

باز هم دانلود کنید!

بقیه مطالب هم دنبال کنید!

نظرات

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
0
افکار شما را دوست داریم، لطفا نظر دهید.x
()
x