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

آموزش کامل کار با رنگ ها در HTML در صفحات وب


رنگ ها در طراحی وب سایت بسیار مهم هستند، زیرا انتخاب درست آنها باعث می شود تا ظاهر و احساس خوبی به سایت شما بدهند.

شما می توانید با استفاده از تگ <body> رنگ های مختلفی را برای لایه های مختلفی از صفحه تعیین کنید یا می توانید رنگ هایی را برای تگ هایی مجزا با استفاده از ویژگی bgcolor تنظیم کنید.

برچسب <body> دارای ویژگی های زیر است که می تواند برای تنظیم رنگ های مختلف استفاده شود -

  • Bgcolor - یک رنگ برای پس زمینه صفحه تنظیم می کند.
  • text - یک رنگ برای بدنه ی متن تنظیم می کند.
  • alink - رنگی برای لینک های فعال (active links) یا لینک های انتخاب شده (selected links) تنظیم می کند.
  • link - یک رنگ برای متن لینک ایجاد می کند.
  • vlink - یک رنگ برای لینک های بازدید شده (visited links) - یعنی متن لینک شده ای که قبلا روی آن کلیک کرده اید.

روش های کد سازی رنگ در  HTML

سه روش مختلف برای تعیین رنگ در صفحه وب وجود دارد.

  • Color names (نام رنگ) - شما می توانید نام رنگ را به طور مستقیم مشخص کنید. مانند  green ، blue و red.
  • Hex codes (کدهای هگزا) - یک کد شش رقمی که نشان دهنده مقدار قرمز، سبز و آبی ست، که رنگ از آنها تشکیل شده است.
  • Color decimal or percentage values (مقدار دهدهی یا درصد رنگ) - این مقدار با استفاده از ویژگی rgb () مشخص می شود.

حالا ما این روش های رنگ گذاری را یک به یک مشاهده می کنیم.

رنگ های HTML - نام رنگ

شما می توانید مستقیما نام رنگ را برای تنظیم متن یا رنگ پس زمینه مشخص کنید.در W3C ، 16 نام رنگ اصلی ذکر شده است که با اعتبار سنج HTML ارزیابی می شود، اما بیش از 200 نام رنگ مختلف وجود دارد که توسط مرورگرهای اصلی پشتیبانی می شود.

16 رنگ استاندارد W3C

در زیر لیستی از 16 نام رنگ استاندارد  W3C می بینید که توصیه می شود از آنها استفاده کنید.

 

Black

 

Gray

 

Silver

 

White

 

Yellow

 

Lime

 

Aqua

 

Fuchsia

 

Red

 

Green

 

Blue

 

Purple

 

Maroon

 

Olive

 

Navy

 

Teal

مثال

در زیر مثال هایی برای تنظیم رنگ پس زمینه یک تگ HTML، بوسیله ی نامِ رنگ بیان شده است -

<!DOCTYPE html>

<html>



   <head>

      <title>HTML Colors by Name</title>

   </head>

           

   <body text = "blue" bgcolor = "green">

      <p>Use different color names for for body and table and see the result.</p>

     

      <table bgcolor = "black">

         <tr>

            <td>

               <font color = "white">This text will appear white on black background.</font>

            </td>

         </tr>

      </table>

   </body>

  

</html>

رنگ های HTML - کد هگزا (Hex Codes)

hexadecimal یک نمایش 6 رقمی از یک رنگ است. دو رقم اول (RR) یک مقدار قرمز را نشان می دهد، دو رقم بعدی یک مقدار سبز (GG) را نشان می دهد و آخرین مقدار متعلق به رنگ آبی (BB) می باشد.

مقدار hexadecimal می تواند از هر نرم افزار گرافیکی مثل Adobe Photoshop، Paintshop Pro یا MS Paint گرفته شود.

قبل از هر کد hexadecimal یک علامت #  قرار می گیرد. در زیر لیستی از چند رنگ با استفاده از نمادگذاری hexadecimal را مشاهده می کنید.

 

color

Color HEX

 

#000000

 

#FF0000

 

#00FF00

 

#0000FF

 

#FFFF00

 

#00FFFF

 

#FF00FF

 

#C0C0C0

 

#FFFFFF

 

مثال

در زیر، نمونه هایی برای تنظیم رنگِ پس زمینه تگ HTML ، توسط کد رنگ به صورت هگزادسیمال را مشاهده می کنید -

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Colors by Hex</title>
   </head>
            
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

رنگ های HTML - مقادیر RGB

این مقدار رنگ با استفاده از ویژگی rgb () مشخص می شود. این ویژگی دارای سه مقدار است، مقادیری برای رنگِ قرمز، سبز و آبی. این مقادیر می تواند یک عدد صحیح بین 0 و 255 یا یک درصد باشد.

توجه - تمام مرورگرها از ویژگی rgb () رنگ ها پشتیبانی نمی کنند، بنابراین توصیه می شود که از آن استفاده نکنید.

در زیر یک لیست برای نمایش چند رنگ با استفاده از مقادیر RGB آورده شده است.

Color

Color RGB

 

rgb(0,0,0)

 

rgb(255,0,0)

 

rgb(0,255,0)

 

rgb(0,0,255)

 

rgb(255,255,0)

 

rgb(0,255,255)

 

rgb(255,0,255)

 

rgb(192,192,192)

 

rgb(255,255,255)

مثال

در زیر مثال هایی برای تنظیمِ رنگِ پس زمینه تگ HTML توسط کد رنگ با استفاده از مقدار rgb () آورده شده است -

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Colors by RGB code</title>
   </head>
            
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

رنگ های امن مرورگر

در اینجا لیستی از 216 رنگ است که به نظر می رسد امن ترین و مستقل ترین رنگ های کامپیوتر می باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF هستند و توسط تمام رایانه های دارای 256 پالت رنگ پشتیبانی می شوند.

 

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

 

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 3 , تعداد قسمت ها: 25 , سطح: صفر تا صد

این فصل در یک نگاه:

فصل سوم…

آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

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

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید