آموزش Html؛ آموزش کار با رنگ ها در HTML

در جلسه هفتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با رنگ ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه رنگ در HTML، رنگ Background، رنگ متن، رنگ کادر و مقدار رنگ‌ ها را خواهیم داشت. با ما همراه باشید…

آموزش کار با رنگ ها در HTML

رنگ‌های HTML با استفاده از نام‌های از پیش تعیین شده یا مقادیر RGB، HEX، HSL، RGBA و HSLA مشخص می‌شوند. در HTML، یک رنگ را می‌توان با استفاده از نام آن مشخص کرد. HTML از ۱۴۰ نام استاندارد رنگ پشتیبانی می‌کند:

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

پیشنمایش

 

آموزش کار با رنگ پشت زمینه در اچ تی ام ال (background color for HTML)

شما می‌توانید برای عناصر HTML یک رنگ پشت زمینه یا background انتخاب کنید که نمونه کد آن را در زیر مشاهده می‌کنید

پیشنمایش

 

آموزش کار با رنگ متن در اچ تی ام ال ( Text Color for Html )

در HTML می‌توان برای متن خود یک رنگ مشخص انتخاب کرد. نمونه و کد مربوط به آن را در زیر مشاهده می‌کنید

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

پیشنمایش

 

آموزش کار با رنگ کادر در اچ تی ام ال (Border Color for Html)

اگر بخواهید پیرامون یک متن کادری را قرار دهید می‌توانید برای شاخص تر کردن کادر برای آن یک رنگ انتخاب کنید

پیشنمایش

 

آموزش کار با مقدار رنگ ها در اچ تی ام ال (Color Values for Html)

در HTML، رنگ ها می‌توانند با مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر rgBA و مقادیر HSLA مشخص شوند. در زیر نمونه رنگ «Tomato» نرمال را مشاهده می‌کنید

در اینجا هم نمونه رنگ Tomato را با ۵۰ درصد شفافیت مشاهده می‌کنید

پیشنمایش

 

آموزش کار با مقدار RGB در اچ تی ام ال (RGB Value for Html)

در HTML می‌توان با استفاده از فرمول زیر یک رنگ را به عنوان یک مقدار RGB تعریف کرد. RGB سرواژه کلمات «Red، Green و Blue» است. هر یک از پارامترهای قرمز، سبز، آبی شدت رنگ را بین بازه ۰- ۲۵۵ تعریف می‌کند. برای مثال rgb(255, 0, 0) به صورت رنگ قرمز نمایش داده می‌شوند چون رنگ قرمز بالاترین مقدار را داشته و بقیه صفر تعریف شده‌اند. برای نمایش رنگ سیاه، تمام پارامترها باید صفر تعیین شوند مانند rgb(0, 0, 0). برای نمایش رنگ سفید تمام پارامترها باید ۲۵۵ تعیین شوند مانند rgb(255, 255, 255). در ادامه چند نمونه را مشاهده می‌کنید

پیشنمایش

 

سایه خاکستری اغلب با استفاده از تعیین مقادیر مساوی برای هر سه منبع رنگ ایجاد می‌شود

پیشنمایش

 

آموزش کار با مقدار HEX در اچ تی ام ال (HEX Value for Html)

در HTML مقدار رنگ را می‌توان با استفاده از یک مقدار هگزادسیمال به شکل #rrggbb تعریف کرد که در آن rr نماد رنگ قرمز (red)، gg نماد رنگ سبز (green) و bb نماد رنگ آبی (blue)، مقادیری بین 00 و ff (مشابه ۰- ۲۵۵) هستند. برای مثال #ff0000 به صورت رنگ قرمز نمایش داده می‌شود، چون به قرمز بالاترین مقدار (ff) داده شده و بقیه پایین‌ترین مقدار (00) را دارند.

پیشنمایش

 

سایه خاکستری معمولا با استفاده از تعریف مقادیر مساوی برای سه منبع رنگ به دست می‌آید

پیشنمایش

 

آموزش کار با مقدار HSL در اچ تی ام ال (HSL Value for Html)

در HTML یک رنگ را می‌توان با استفاده از ته رنگ، غلظت و روشنایی به شکل HSL یا همان Hue، Saturation‌ و Lightness، مشخص کرد. ته رنگ یا hue درجه‌ ۰ تا ۳۶۰ روی چرخه رنگ است که مقدار ۰ نشان‌دهنده رنگ قرمز، مقدار ۱۲۰ مقدار رنگ سبز و ۲۴۰ معرف رنگ آبی است. غلظت یا Saturation به معنی یک مقدار درصدی است که %0 به معنی سایه‌ی خاکستری و %100 به معنی رنگ کامل است. روشنایی یا Lightness هم به صورت درصدی تعریف می‌شود که %0 به رنگ سیاه، %50 نه روشن و نه تیره و %100 نشان‌دهنده رنگ سفید است

پیشنمایش

 

آموزش کار با غلظت رنگ در اچ تی ام ال (Saturation for Html)

غلظت را می‌توان به عنوان شدت یک رنگ تعریف کرد. ۱۰۰ درصد یعنی یک رنگ خالص که هیچ‌گونه سایه خاکستری ندارد. ۵۰ درصد یعنی ۵۰ درصد سایه خاکستری وجود دارد اما هنوز می‌توانید رنگ اصلی را تشخیص دهید. صفر درصد یعنی خاکستری کامل و شما دیگر نمی‌توانید رنگ اصلی را ببینید

پیشنمایش

 

روشنایی در Html

روشنایی یک رنگ را می‌توان به صورت میزان نوری که می‌خواهید به یک رنگ بدهید تعریف کرد؛ به این صورت که صفر درصد یعنی عدم وجود نور (سیاه)، ۵۰ درصد یعنی ۵۰ درصد نور (نه روشن و نه تیره) و ۱۰۰ درصد به معنی روشنایی کامل (سفید) است.

 

پیشنمایش

 

سایه‌های خاکستری اغلب از طریق قرار دادن مقادیر ته رنگ و غلظت روی صفر و تنظیم روشنایی بین صفر تا صد برای به دست آوردن سایه‌های تیره‌تر یا روشن‌تر ایجاد می‌شوند

 

آموزش کار با مقدار RGBA در اچ تی ام ال (RGBA Value for Html)

مقادیر رنگ‌های RGBA در واقع بسط یافته‌ی مقادیر رنگ‌های RGB به همراه یک کانال آلفا هستند که کدری یک رنگ را مشخص می‌کند. مقدار رنگ RGBA به صورت rgba (red, green, blue, alpha) مشخص می‌شود. پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون هیچ‌گونه شفافیت) است

پیشنمایش

 

آموزش کار با مقدار HSLA در اچ تی ام ال (HSLA Value for Html)

مقادیر رنگ‌های HSLA هم بسط یافته‌ي مقادیر رنگ‌های HSL با یک کانال آلفا است که کدری رنگ را مشخص می‌کند. مقدار یک رنگ HSLA به صورت hsla (hue, saturation, lightness, alpha) تعریف می‌شود. پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون هیچ‌گونه شفافیت) است:

پیشنمایش

منبع : W3Schools

 

لیست جلسات قبل آموزش Html

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.