آموزش زبان HTML (جلسه ۲۲)

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

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

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

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

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

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

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

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

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

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

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

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان