آموزش HTML – سیستم رنگ‌بندی و لینک‌ها (۵)

در جلسه قبل با خاصیت Style به خوبی آشنا شدیم و همچنین توانستیم که از ابزارهای قالب‌دهی متون استفاده کنیم. کامنت گذاری را نیز به خوبی یاد گرفتیم.

اما حال نیاز است که یاد بگیریم چگونه از سیستم رنگ‌بندی HTML استفاده کنیم و همچنین با لینک‌ها آشنا شویم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

 

سیستم رنگ‌بندی در HTML

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

۱. نام رنگ‌ها

۲. استفاده از سیستم Hexadecimal

۳. استفاده از RGB

 

برای آنکه هرکدام این حالت‌ها را تست کنیم و بتوانیم در عمل کار آن‌ها را ببینیم. باید با خاصیت style و دستور color آشنایی خوبی داشته باشید. ما در مطلب قبلی این موضوع را بحث کردیم، پس پیشفرض را بر این قرار می‌دهیم که شما کار با این موارد را بلد هستید.

 

 

نام رنگ‌ها

یک روش ساده اما بسیار محدود برای سیستم رنگ‌بندی استفاده از نام رنگ‌ها است. به این صورت که اگر شما به رنگ قرمز نیاز داشته باشید کافی‌ست نام آن را بنویسید: red. به کدهای زیر دقت کنید:

همانطور که می‌بینید من از نام رنگ قرمز برای مقدار دهی color استفاده کردم. اما این سیستم بسیار محدود است. چرا؟! پاسخ بسیار ساده است. تصور کنید که من یک رنگ قرمز را می‌خوام که میزان غلظت رنگی آن کم باشد، خب در این صورت من باید از چه اسمی استفاده کنم؟ آیا چنین نامی را داریم؟ جواب خیر است.

حالت دیگری را تصور کنید که من در آن بخوام چند رنگ را با همدیگر مخلوط بکنم. در این حالت چه؟ باز هم سیستم رنگ‌بندی براساس نام نمی‌تواند درست عمل بکند. به همین دلیل ما باید دنبال جایگزین دیگری باشیم.

 

Hexadecimal

هگزادسیمال یا سیستم ۱۶ تایی اعداد به ما این قابلیت را می‌دهد تا کمی بیشتر از ۶ میلیون رنگ را استفاده کنیم. استفاده از این سیستم بسیار ساده است. در یک سیستم ۱۶تایی از اعداد ما با اعداد ۰ تا ۹ و a تا f سر و کار داریم. حال ما در این سیستم قابلیت ترکیب رنگی سه رنگ اصلی یعنی Red Green Blue یا قرمز سبز آبی را داریم.

برای مقدار دهی به میزان هرکدام از این رنگ‌ها ما می‌توانیم از اعداد سیستم ۱۶ تایی استفاده بکنیم. مقدار f یعنی خیلی خیلی آبی (حداکثر) و مقدار ۰ یعنی خالی از آبی (حداقل).

برای درک بهتر این موضوع به کد زیر نگاه کنید:

مقابل خاصیت color مقدار #۰۰۰۰ff قرار گرفته که به معنی رنگ آبی است. چگونه؟

در سیستم رنگ‌دهی هگزادسیمال ۶ عدد وجود دارد که هر دو عدد از سمت چپ نمایانگر یک رنگ از سه رنگ اصلی هستند. از سمت چپ به راست، دو عدد اول قرمز، دو عدد میانی سبز و دو عدد آخر آبی هستند. وقتی که مقدار دو عدد اول ۰۰ باشد به این معناست که رنگ قرمز وجود نداشته باشد، برای دو عدد میانی نیز به همین صورت، اما وقتی دو عدد آخر برابر ff (حالت حداکثر) باشد به این معنی است که رنگ برابر با آبی باشد.

یک عدد پیچیده‌تر و یک رنگ متفاوت‌تر:

با مشاهده تصویر زیر بسیار بهتر می‌توانید موضوع ترکیب این سه رنگ را درک کنید:

استفاده از RGB

در سیستم رنگ‌بندی RGB دقیقا همان فلسفه مورد قبلی پیاده‌سازی می‌شود، با این تفاوت که سیستم عدد گذاری در این حالت متفاوت است. در این سیستم ما از اعداد بین ۰ تا ۲۵۵ استفاده می‌کنیم. به مثال زیر برای تولید رنگ آبی توجه کنید:

میزان شفافیت

در برخی سیستم‌های رنگ‌بندی ما می‌توانیم یک گزینه یا پارامتر دیگر را نیز تنظیم کنید. این پارامتر میزان شفافیت یا Opaciy است. این مقدار عددی بین ۰ تا ۱ است. این مقدار به صورت پیشفرض برابر با ۱ است اما می‌توانید آن را تا حدی کاهش دهید که کاملا المان شما محو شود. برای مثال اگر این مقدار برابر ۰ باشد هیچ چیزی در صفحه مشاهده نمی‌شود. برای اینکار نیاز است که حرف a را به انتهای rgb اضافه کنید و همچنین یک مقدار چهارم در پرانتز قرار دهید. به مثال زیر توجه کنید:

می‌توانید از مقادیر .۱, .۲, .۳ … .۹ استفاده کنید.

 

لینک

لینک‌ها در HTML تحت عنوان Hyperlink یا ابر لینک شناخته می‌شوند. چرا بدینگونه است؟ دلیل این است که لینک‌ها در HTML علاوه بر فایل می‌توانند به صفحات دیگر اشاره کنند. یعنی شما روی یک لینک کلیک می‌کنید و این لینک شما را به یک صفحه html دیگر ارجاع می‌دهد. این کار باعث می‌شود که یک شبکه از لینک‌ها شکل بگیرد که ما آن را ابر لینک می‌نامیم.

برای پیاده‌سازی یک لینک ما از تگ a استفاده می‌کنیم. ساختار این تگ به صورت زیر است:

Href = یکی از خاصیت‌های تقریبا منحصر به فردی است که برای تگ‌هایی که نیاز به آدرس دهی دارند استفاده می‌شود. مقدار خاصیت href برابر آن فایل و یا صفحه‌ای است که شما می‌خواهید کاربر با کلیک روی لینک به آن دسترسی پیدا کند.

هر متنی که در بین <a> و </a> قرار بگیرد به عنوان متن لینک شناخته می‌شود. کاربر در زمان کلیک روی آن به لینک متصل می‌شود.

می‌توانید برای لینک‌های‌تان عنوان نیز در نظر بگیرید. عنوان به این معنا که کاربر قبل از کلیک روی لینک می‌تواند از محتوای آن خبردار شود. این کار با استفاده از خاصیت title انجام می‌شود. به مثال زیر توجه کنید.

این کد را اجرا کنید. حال قبل از کلیک روی متن تنها چند لحظه ماوس را روی لینک نگه دارید. در این حالت یک کادر برای شما ظاهر می‌شود که حاوی متن مربوط به قسمت title است.

خاصیت title یک خاصیت منحصر به فرد نیست و تقریبا برای بیشتر تگ‌ها موجود است.

 

باز شدن لینک در پنجره‌های مختلف

لینک شما این قابلیت را دارد که به صورت‌های مختلفی باز شود. برای اینکار نیاز است که از خاصیت target استفاده کنید. به مثال زیر توجه کنید:

حال کد بالا را اجرا کنید و روی لینک کلیک نمایید. در این حالت لینک شما در یک صفحه یا پنجره جدید باز می‌شود.

_blank یکی از مقادیر است که باعث می‌شود لینک در صفحه جدیدی باز شود اما حالت‌های دیگری نیز وجود دارد که می‌توانید در زیر آن‌ها را مشاهده کنید.

_self: باعث می‌شود که لینک در همان تب باز شود. به صورت پیشفرض این مقدار فعال است.

_parent: این مقدار باعث می شود که لینک در فریم مادر باز شود.

_top: با استفاده از این مقدار، لینک در یک پنجره کاملا جدید باز می‌شود.

 

نتیجه‌گیری

در این قسمت از آموزش HTML ما یک مقوله بسیار مهم در HTML به نام سیستم رنگ‌بندی را بررسی کردیم و بعد از آن سراغ لینک‌ها در HTML و شیوه پیاده‌سازی آن رفتیم.