026-32601

آشنایی با رنگ ها در اچ تی ام ال (HTML)

1 1 1 1 1 (1 Vote)

همانطور که در ماژول پیش دیدیم، برای تعریف یک رنگ در زبان اچ تی ام ال (html) می توان از کلید واژه های از پیش تعریف شده در این زبان استفاده کرد. نکته ای که در مورد این رنگ ها وجود دارد این است که تعداد آن ها محدود بوده و مسلماً رنگ های مد نظر ما را شامل نخواهد شد. برای این منظور از مقادیر Hexadecimal می توان استفاده نمود. به طور کلی این مقادیر شامل سه سری عدد دوتایی است که دو عدد اول نشانگر قرمز، دو عدد دوم نشانگر سبز و دو عدد سوم نشانگر آبی هستند. مقادیری که برای این اعداد می توان در نظر گرفت 16 گزینه است که از صفر تا عدد نه شروع شده سپس از حرف a تا حرف f ادامه می یابند (شاید کمی عجیب به نظر برسد اما با توضیحاتی که در ادامه خواهد آمد به طور حتم این مسئله روشن تر خواهد شد).
اگر جایگاه اول را به عدد صفر اختصاص دهیم، پس عدد نه جایگاه دهم را به خود اختصاص خواهد داد و حرف a جایگاه یازدهم، حرف b جایگاه دوازدهم، حرف c جایگاه سیزدهم، حرف d جایگاه چهاردهم، حرف e جایگاه پانزدهم و در نهایت حرف f جایگاه شانزدهم را به خود اختصاص خواهد داد و این در حالی است که عدد صفر ضعیف ترین مقدار و حرف f قوی ترین مقدار قلمداد می گردد (لازم به ذکر است که در مقادیر Hexadecimal هیچ فرقی مابین حروف بزرگ و کوچک وجود ندارد اما بهتر است که یا حروف بزرگ و یا حروف کوچک را مد نظر قرار داده و در کدهای خود همواره آن را مورد استفاده قرار دهیم).
برای استفاده از مقادیر Hexadecimal هموارد می بایست از علامت # استفاده کنیم که در برنامه نویسی اصطلاحاً به آن Pound Sign یا Hash Mark می گویند. حال ترتیب یک رنگ به صورت rrggbb# است. در واقع دو مقدار اول (rr) مسئول نگهداری مقادیر قرمز هستند (حرف r ابتدای Red به معنی "قرمز" است). حال اگر مقدار این دو را معادل با ff قرار دهیم این بدان معنا است که می خواهیم رنگ مد نظر ما صد درصد حاوی رنگ دانه های قرمز باشد. مقادیر (gg) مسئول نگهداری رنگ سبز هستند (حرف g ابتدای Green به معنی "قرمز" است). فرض کنیم در رنگی که قرار است بسازیم می خواهیم هیچ رنگدانه سبزی وجود نداشته باشد بنابراین مقدار آن را برابر با 00 قرار می دهیم. مقادیر (bb) هم همانطور که از نام آن پیدا است مسئول نگهداری رنگ آبی هستند (حرف b ابتدای کلمه Blue به معنی "آبی" است). مجدد مقدار آن را نیز برابر با 00 قرار می دهیم. به طور کلی رنگ مد نظر ما می بایست به صورت ff0000 # باشد. به طور خلاصه این رنگ حاوی صد درصد رنگ قرمز است ولی رنگ های سبز و آبی به هیچ وجه در آن استفاده نشده است. حال در کد زیر کلید واژه این مقدار را وارد می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body style="background:#ff0000;">
        <p>This is a paragraph</p>
    </body>
</html>

در این مرحله پس از ذخیره کردن فایل خود، مرورگر را به روز رسانی می کنیم:

قرمز کردن زنگ پس زمینه یک سند اچ تی ام ال html

می بینیم که کد ff0000# هم نتیجه همان رنگ red را ایجاد می کند.
برای آنکه کمی بیشتر تمرین کرده باشیم، می خواهیم رنگ سبز ایجاد کنیم. می دانیم که دو مقدار وسطی مرتبط با رنگ سبز هستند پس کد فوق را به صورت #00ff00 تغییر می دهیم. به عبارت دیگر این رنگ جدید به هیچ وجه دارای رنگدانه های قرمز نخواهد بود اما کاملا حاوی رنگدانه های سبز است و رنگدانه آبی هم ندارد. این کد را داخل سند اچ تی ام ال خود می نویسیم و مجدد مرورگر را به روز رسانی می کنیم:

سبز کردن رنگ پس زمینه در اچ تی ام ال html

می بینیم که رنگ صفحه به سبز تغییر یافت. حال می خواهیم رنگ پیچیده تری ایجاد کنیم. در واقع می خواهیم رنگ جدید ما کمی رنگدانه قرمز داشته باشد بنابراین دو مقدار اول را معادل با 44 قرار می دهیم و دو عدد مرتبط با رنگ سبز را برابر با 00 قرار می دهیم زیرا قصد داریم رنگ جدید ما عاری از هرگونه رنگدانه سبز باشد و در نهایت عددی مثل 77 را برای رنگ آبی در نظر می گیریم. در واقع رنگ جدید ما به صورت #440077 در خواهد آمد. اگر پیش از تست کردن صفحه وب سایت خود بخواهیم رنگ به دست آمده را حدس بزنیم می توانیم به این شکل استدلال کنیم: کمی رنگ قرمز به علاوه کمی بیشتر رنگ آبی مساوی است با رنگ بنفش:

تبدیل رنگ پس زمینه به زنگ بنفش

 به خاطر سپردن کدهای Hexadecimal کار بسیار پیچیده است چرا که با این روش می توان هزاران رنگ ساخت اما چنانچه به مکانیسم ساخت رنگ با این مقادیر تسلط پیدا کنیم به راحتی می توان رنگ دلخواه خود را ساخت. اما به عنوان یک قانون کلی می توان کد #ffffff را برای رنگ سفید و کد #000000 را برای رنگ سیاه به خاطر سپرد. علاوه بر این دانستن این نکته خالی از لطف نیست که هرگاه هر دو مقدار یکی باشند می توان یکی از آنها را نوشت. به عبارت دیگر از آنجا که هر شش گزینه رنگ سفید یکی هستند می توان از هر دو گزینه یکی را به عنوان نماینده در نظر گرفت. بنابراین کد #FFF هیچ فرقی با کد #FFFFFF نمی کند و یا کد #FF33DD هیچ فرقی با کد #F3D نمی کند.

لازم به ذکر است با چنین رویکردی می توان بیش از 16 میلیون رنگ مختلف ایجاد کرد.



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

نظراتی که به تعمیق بحث کمک می کند، در معرض ملاحظه و قضاوت دیگران قرار می گیرند. نظراتی که حاوی توهین، افترا و تهمت به دیگران باشد، منتشر نخواهد شد. لطفاً از نوشتن نظرات خود به صورت حروف لاتین (فینگلیش) خودداری نمایید.


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب