فیلم آموزشی رنگ در HTML

در ابتدای این فیلم آموزشی با دستور و مفهوم رنگ در HTML آشنا می شویم.

سپس کدهای رنگ در HTML را بیان می کنیم و رنگ متن در HTML را به صورت کامل بررسی می کنیم.

در ادامه این فیلم تغییر رنگ در html را با مثال و نمونه شرح می دهیم.

همچنین کد رنگ RGB و کد رنگ cmyk را تعریف می کنیم.

رنگ در HTML

مقدمه: فیلم آموزش رنگ ها در HTML

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

آموزش دوره HTML را با معرفی زبان HTML و تاریخچه ی آن شروع کردیم.

برای دسترسی به کلیه فیلم های آموزش HTML می توانید از این لینک استفاده کنید.

در ادامه این آموزش با کد رنگ ها در HTML به صورت مفهومی آشنا می شویم. سپس رنگ متن در HTML را خواهیم گفت.

همچنین نحوه تغییر رنگ در HTML بیان می کنیم.

در تمامی این بخش ها ما با استفاده از inspector مروگر کروم، کد رنگ ها را آموزش می دهیم.

این ویدئو آموزشی، در واقع بخشی از دوره حرفه ای وبمستران وردپرس می باشد که کمی متفاوت تر از سایر دوره هایی است که تا کنون در سطح وب فارسی برگزار شده است.

بعضی از قسمت های این دوره، به صورت رایگان در سایت وبمستر وردپرس در دسترس عموم خواهد بود و سایر آن ها را می توانید با مراجعه به سایت کلوپ وبمستران وردپرس ، دریافت نمایید.

توجه: پیشنیاز برای یادگیری HTML

در نظر داشته باشید برای اینکه بتوانید بر مفاهیم HTML مسلط شوید، باید بدانید که وب از چه اجزایی ساخته شده است و چگونه کار می کند.

در واقع می توان گفت برای وبمستر حرفه ای شدن و وارد شدن به سایر مباحث همچون HTML می باید بر مفاهیم وب و نحوه کار اجزا آن باهم آشنا شوید. به همین منظور، پیشنیاز درک بهتر این دوره، دوره آموزش مقدمات وب می باشد.

برای این منظور می توانید به بخش آموزش مقدمات وب در سایت کلوپ وبمستران وردپرس مراجعه کرده و در این دوره رایگان شرکت نمایید.

دوره آموزشی HTML کاربردی برای وبمستران

در کمتر از ۹ ساعت مثل یک برنامه نویس حرفه ای به HTML مسلط شوید!!!

اگر وبمستر، سئوکار، دیجیتال مارکتر یا صاحب کسب و کار آنلاین هستید، اولین چیزی که باید با آن آشنا باشید، یادگیری HTML می باشد. در غیر این صورت از پس هیچ کدام از کارهای وبمستری خود بر نخواهید آمد. برای ثبت نام در دوره کاربردی HTML در کمتر از ۹ ساعت، از لینک روبرو استفاده کنید.
دوره آموزشی HTML کاربردی برای وبمستران

نمایش فیلم آموزشی کد رنگ ها در برنامه نویسی

در ادامه می توانید فیلم آموزشی رایگان کد رنگ ها را که به همراه توضیح و مثال می باشد، در زیر مشاهده فرمایید. در صورتی که نیاز به دانلود آن دارید، می توانید از لینک های پایین صفحه استفاده نمایید:

تگ در HTML

توجه : پیشنیاز آموزش « رنگ ها در HTML »

برای درک بهتر کدهای رنگ در HTML، باید بدانید که تگ در HTML چیست و ساختار کلی آن به چه شکلی می باشد. اگر با تگ در HTML آشنایی ندارید جای نگرانی ندارد، می توانید به قسمت دوم از سری آموزش های HTML مراجعه کرده یا از طریق لینک روبرو با تگ head در HTML آشنا شوید.

تگ در HTML

فیلم آموزشی رنگ ها در HTML، دارای بخش هایی به شرح زیر می باشد:

  • معرفی رنگ ها

  • کد رنگ ها

  • نحوه تغییر رنگ

رنگ در HTML

در این بخش قصد داریم به معرفی رنگ ها در HTML بپردازیم و بگوییم به چند روش می توان از کدهای رنگ استفاده نمود.

دلیل استفاده از رنگ ها در HTML چیست؟

رنگ ها در انتقال احساسات و ایجاد ارتباط بهتر با کاربر در وب سایت نقش بسزایی دارند. اگر طراح سایت هستید قطعا با روش های استفاده از رنگ ها در CSS و HTML آشنایی دارید.

HTML تا کنون ۱۴۰ رنگ را ساپورت می کند. رنگ ها در عوض کردن پس زمینه (background)، رنگ متن، رنگ کادر (border) کاربرد دارند.

ممکن است رنگی را که ما می خواهیم انتخاب کنیم در این ۱۴۰ رنگ نباشد، می توانیم برای تعریف رنگ از مدل هایی که برای تعریف رنگ در کامپیوتر موجود هست استفاده کنیم.

رنگ ها در HTML به چندین روش تعریف می شوند:

  • اسم رنگ (color name)

  • مقدار هگزا دسیمال (HEX value)

  • کد RGB یا RGB value

  • کد رنگ cmyk

  • کد رنگ HSL

  • کد رنگ HSV

کد رنگ در HTML

کدهای رنگ در HTML

اسم رنگ (Color Name)

در انتخاب رنگ به روش اسم رنگ (color name) کافی است فقط اسم رنگ مورد نظر را در کدهای HTML بیاوریم، برای مثال اگر بخواهیم از رنگ سبز و زرد استفاده کنیم باید اسم این دو رنگ یعنی green و yellow را در سند HTML قرار دهیم.

رنگ ها باید داخل تگ body قرار بگیرد. تگ body را در قسمت ششم مجموعه آموزش HTML ارائه کردیم.

<body>

<p style="background-color:yellow;">
wpwebmaster.ir
</p>

<p style="background-color:green;">
wpwebmaster.club
</p>

</body>

wpwebmaster.ir

wpwebmaster.club

مقدار هگزا دسیمال HEX

چگونه می توانید رنگ هگزا دسیمال(HEX) را در HTML اضافه کنید؟

در HTML یک رنگ را می توان به صورت هگزا دسیمال Hexadecimal (عدد در مبنای ۱۶) تعریف کرد که از یک کد ۶ کاراکتری تشکیل شده است.

در ابتدا باید از یک علامت شارپ (#) استفاده کنیم سپس RR رنگ (قرمز) ، GG رنگ (سبز) و BB رنگ (آبی) که هر کدام از این مقدارها بین ۰۰ و FF می باشند. (RRGGBB#)

اگر کدها تکراری باشد، فقط ۳ تا از کاراکترها نوشته می شود. مانند (FFF#)

این کد به ۳ شکل حروف، اعداد و ترکیبی از اعداد و حروف نوشته می شود. به صورت زیر:

<body>

<p style="background-color:#69cee6;">
wpwebmaster.ir
</p>

<p style="background-color:#cd8af5;">
wpwebmaster.club
</p>

</body>

wpwebmaster.ir

wpwebmaster.club

کد رنگ RGB

رنگ RGB در HTML چیست؟

همانطور که بیان کردیم سه طیف اصلی رنگ ها، قرمز، سبز و آبی می باشند که رنگ های دیگر ترکیبی ازین ۳ رنگ می باشد.

کد رنگ RGB مدلی است که برای تولید رنگ در مانیتورهای کامپیوتر بکار گرفته می شد. در ابتدار RGB و سپس از SRGB استفاده شد.

کد RGB دارای ۳ بخش اصلی است و هر کدام ازین بخش ها می توانند بین ۰ تا ۲۵۵ مقداردهی شوند. (rgb(red,green,blue

برای نمونه، (rgb(255, 0, 0 رنگ قرمز را نمایش می دهد.

برای نمایش رنگ مشکی باید همه پارامترها را ۰ قرار دهیم مانند: (rgb(0,0,0.

برای نمایش رنگ سفید باید همه پارامترها را ۲۵۵ قرار دهیم مانند: (rgb(255,255,255.

<body>

<p style="background-color:rgb(255, 185, 0);">
wpwebmaster.ir
</p>

<p style="background-color:rgb(252, 51, 145);">
wpwebmaster.club
</p>

</body>

wpwebmaster.ir

wpwebmaster.club

کد رنگ RGB

کد رنگ RGBA

کد رنگ RGBA چیست؟

کد رنگ RGBA در حقیقت همان کد رنگ RGB می باشد که فقط یک پارامتر آلفا به آن اضافه شده که میزان شفافیت یا transparency رنگ را تعیین می کند.

آلفا alpha می تواند مقداری بین ۰٫۰ (کمترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را به خود اختصاص دهد.

<body>

<p style="background-color:rgba(0, 255, 0, 0.2);">وبمستر وردپرس</p>
<p style="background-color:rgba(0, 255, 0, 0.4);">وبمستر وردپرس</p>
<p style="background-color:rgba(0, 255, 0, 0.8);">وبمستر وردپرس</p>
<p style="background-color:rgba(0, 255, 0, 1);">وبمستر وردپرس</p>

</body>

وبمستر وردپرس

وبمستر وردپرس

وبمستر وردپرس

وبمستر وردپرس

کد رنگ cmyk

در کد رنگ cmyk هر رنگ از ۴ طیف رنگی اصلی تشکیل شده که شامل رنگ های آبی یا فیروزه ای (cyan)، صورتی یا ارغونی (magenta)، زرد (yellow) و سیاه (black) می باشد و این کد حروف اول این چهار رنگ است.
کد رنگ cmyk

کد رنگ HSL

کد رنگ HSL چیست؟

کد رنگ HSL مخفف کلمات Hue و Saturation و Lightness می باشد. در واقع با استفاده از این کد می توان رنگ، اشباع رنگ و روشنایی را تعیین کرد. (hsl(hue, saturation, lightness فرم کلی کد رنگ HSL می باشد.

Hue: رنگ را روی دایره ۳۶۰ درجه تعیین می کند.

Saturation: میزان اشباع رنگ را به شکل % نمایش می دهد، هرچه به سمت داخل دایره برویم کم رنگ تر و هرچه به سمت بیرون دایره برویم پر رنگ تر می شود.

Lightness: میزان روشنایی رنگ را به شکل % نمایش می دهد که ۰ درصد بیانگر سیاه و  ۱۰۰ درصد بیانگر سفید می باشد.

<body>

<p style="background-color:hsl(28, 100%, 55%);">
wpwebmaster.ir
</p>

<p style="background-color:hsl(59, 100%, 55%);">
wpwebmaster.club
</p>

</body>

wpwebmaster.ir

wpwebmaster.club

کد رنگ HSL چیست؟
HSL چیست

کد رنگ HSLA

کد رنگ HSLA در واقع همان کد رنگ HSL می باشد که فقط یک مقدار آلفا به آن اضافه شده که میزان شفافیت یا transparency رنگ را تعیین می کند.

آلفا alpha می تواند مقداری بین ۰٫۰ (کمترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را به خود اختصاص دهد.

<body>

<p style="background-color:hsla(325, 100%, 42%, 0.2);">وبمستر وردپرس</p>
<p style="background-color:hsla(352, 100%, 42%, 0.4);">وبمستر وردپرس</p>
<p style="background-color:hsla(352, 100%, 42%, 0.6);">وبمستر وردپرس</p>
<p style="background-color:hsla(352, 100%, 42%, 1);">وبمستر وردپرس</p>

</body>

وبمستر وردپرس

وبمستر وردپرس

وبمستر وردپرس

وبمستر وردپرس

کد رنگ HSL

کد رنگ HSV

کد رنگ HSV چیست؟

کد رنگ HSV مخفف کلمات Hue و Saturation و Value می باشد. در واقع با استفاده از این کد می توان رنگ، اشباع رنگ و ارزش رنگ را مشخص نمود. (hsv(hue, saturation, Value فرم کلی کد رنگ HSV می باشد.

Hue: رنگ را روی دایره ۳۶۰ درجه تعیین می کند.

Saturation: میزان اشباع رنگ را به شکل % نمایش می دهد، هرچه به سمت داخل دایره برویم کم رنگ تر و هرچه به سمت بیرون دایره برویم پر رنگ تر می شود.

Value: میزان ارزش رنگ را به شکل % نمایش می دهد که ۰ درصد بیانگر سیاه و  ۱۰۰ درصد بیانگر سفید می باشد.

کد رنگ HSV
مدل رنگ HSV چیست

رنگ Gradient در HTML

چگونه می توان یک رنگ Gradient ساخت؟

رنگ گریدینت (Gradient) از ترکیب چند رنگ به وجود می آید مثلا برای یک عنصر می توان چند رنگ مشخص کرد.

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

<body>

<p style="background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);">وبمستر وردپرس</p>
<p style="background: linear-gradient(90deg, rgba(47,255,39,1) 0%, rgba(156,2,251,1) 50%, rgba(254,255,0,1) 100%);">وبمستر وردپرس</p>
<p style="background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);">وبمستر وردپرس</p>

</body>

وبمستر وردپرس

وبمستر وردپرس

وبمستر وردپرس

نتیجه گیری برای فیلم آموزش «رنگ در HTML»

در این بخش به معرفی رنگ ها در HTML می پردازیم و کد رنگ ها را شرح می دهیم.

همچنین نحوه تغییر رنگ در HTML را معرفی می کنیم و کاربرد رنگ را با مثال توضیح می دهیم.

کدهای رنگ در HTML را به صورت جزیی بررسی می کنیم.

ممکن است به نظر شما بعضی از موارد درست نبوده و یا شما موارد بیشتری را بدانید که ما فراموش کرده ایم تا در این فیلم آموزشی، قرار دهیم.

اگر شما از این موارد آگاه هستید، حتما در بخش نظرات عنوان کنید تا آن را به این مقاله اضافه کنیم. در ضمن اگر این مقاله را مفید دیدید، حتما آن را به دوستان خود معرفی کرده یا در شبکه های اجتماعی به اشتراک بگذارید.

نظر شما در مورد این مقاله چیست؟

در ساخت و تهیه این مطلب فیلم آموزش مقدمات وبمستری از مراجع زیر استفاده شده است. شما می توانید با مراجعه به آن ها، اطلاعات بیشتری را بدست آورید:

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس