دانلود رایگان ویدیوی راهنمای ساخت نوار پیشرفت Progress Bar

فیلم آموزش ساخت ProgressBar در سی شارپ به زبان فارسی

سی شارپ (C#) یک زبان برنامه نویسی شی گرا است که توسط شرکت مایکروسافت ساخته شده و ترکیبی از قابلیتهای خوب ++C و avaJ است.اگر با این دو زبان آشنایی دارید این شانس را دارید زبان سی شارپ را راحت یاد بگیرید. این زبان به قدری راحت است که هم کسانی که قبلا برنامه نویسی نکرده اند و هم دانش آموزان می توانند راحت آن را یاد بگیرند.

همان طور که میدانید ایجاد یک نوار پیشرفت با همان ProgressBar یکی از موارد پر کاربرد در ساخت نرم افزار به زبان #C است . برای کاربران یک نرم افزار دانستن اینکه میزان پیشرفت یک عملیات در نرم افزار چقدر است امر مهمی محسوب میشود و همچنین ProgressBar به نرم افزار شما زیبایی میدهد . پس ساخت ProgressBar امر مهمی در ساخت یک نرم افزار به زبان سی شارپ به حساب می آید.

در این فیلم ویدوئویی شما نحوه ایجاد یک کنترل سفارشی ProgressBar را با UserControl فرا خواهید گرفت .

آنچه شما در فیلم آموزش ProgressBar در سی شارپ یاد خواهید گرفت :

– نحوه ایجاد یک کنترل سفارشی

– آموزش  User Control

– ایجاد ProgressBar در سی شارپ به صورت عمودی و افقی

» دانلود فیلم آموزش ساخت ProgressBar در سی شارپ – قسمت اول

» دانلود فیلم آموزش ساخت ProgressBar در سی شارپ – قسمت دوم

دانلود سورس آموزش ساخت ProgressBar در سی شارپ

نوار پیشرفت و یا Progress Bar چیست? و چه کاربردی دارد؟

سلام و تشکر از شما دوستان و استاد عزیز

نوار پیشرفت و یا Progress Bar چیست ؟

ما انسان ها در ذات خودمون و به صورت ناخودآگاه مقداری کنجکاوی داریم . به عنوان مثال شما برای یک مصاحبه کاری به یک شرکت طراحی وب دعوت میشید . در اونجا مسول مربوطه با شما صحبت هایی انجام میده و شما فرم درخواست اشتغال رو تکمیل میکنید و به شما در آخر مصاحبه اعلام میشه که فرم شما بررسی و در صورتی که جزء اولویت های ما باشید باهاتون تماس میگیرم !

از زمانی که شما از اون شرکت خارج میشید تا زمانی که با شما تماس برقرار بشه برای همکاری بیشتر ، شما مدام از خودتون سوال میکنید که آیا من مورد پذیرششون هستم ؟ فکر میکنی کی باهام تماس بگیرن ؟ اصلا رزومه منو مطالعه کردند ؟ و سوالات عجیب و غریب دیگه و اگر به صورت مجازی یک نوار نمایشگری بود که روند بررسی رزومه شما رو روز به روز به شما اطلاع میداد مسلما شما روزهارو به راحتی می گذروندید تا زمان نتیجه . در دنیای کامپیوتر و دنیای مجازی ، این مسئله حقیقت پیدا کرده و شما با هر عملیات در ویندوز و یا وب با یک نوار پیشرفت و یا Progress Bar رو به رو میشید که به شما میزان پیشرفت عملیات و یا اون پروسه رو نشون میده .

یا به عبارت بهتر منظور از نوار پیشرفت و یا Progress Bar المنتی هست که در وب سایت ها برای به نمایش گذاشتن مقدار انجام شدن یا نشدن عملیات مربوطه مورد استفاده قرار میگیره .

این مسئله در مرورگرها نیز قبلا وجود داشت و میزان پیشرفت در بازشدن وب سایت مربوطه رو به شما نمایش میداد همینطور در وب سایت هایی که به صورت Ajax اطلاعات رو بارگزاری میکنند کاربرد بسیار زیادی داره چون اولا شما به مخاطب احترام گذاشتید که از روند انجام عملیات اونو هر لحظه مطلع میکنید و اینکه به مخاطب اطلاع رسانی میکنید که تا چه میزان از زمان می بایست منتظر باشه تا عملیات مربوطه انجام بشه .

این المنت از اهمیت بالایی در صفحاتی که قرار هست عملیاتی در اونها و در پشت پرده سایت انجام بشه برخوردار هست که البته به شکل ها و طرح های متنوعی طراحی و پیاده سازی میشن . در زیر میتونید ۲۵ نمونه خلاقانه از این المنت رو مشاهده و از طریق سایت های premiumpixels.com و ۳۶۵psd.com برخی از اونها رو دانلود کنین .لازم به توضیحه که این فایل های PSD به صورت رایگان در اینترنت توسط طراح ارائه شده و از لحاظ کپی رایت هیچ ممنوعیتی نداره .

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

متوقف کردن متن یا تصویر متحرک هنگام ایستادن موس در تگ marquee

برای اینکار باید این قطعه کد رو به تگ <marque> در HTML اضافه کنیم

onmouseover="this.stop();" onmouseout="this.start();

به عنوان مثال می توان از این کد به این روش استفاده کرد :

<marquee onmouseover="this.stop();" onmouseout="this.start();">
your content
</marquee>

البته ممکن است توی همه ی مرورگر ها از جمله اینترنت اکسپلورر کار نکنه که باید  از کد jquery زیر استفاده کنید.

تغییر رنگ زرد ( پیش فرض ) تگ mark در html 5

<Mark>

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

به مثال زیر دقت کنید :

<p>In 2009, Facebook made a bold grab to own everyone’s content, forever. This is the text they put in their terms of service:

You hereby grant Facebook an <mark>irrevocable, perpetual,

non-exclusive, transferable, fully paid, worldwide license</mark> (with the

right to sublicense) to <mark>use, copy, publish</mark>, stream, store,

retain, publicly perform or display, transmit, scan, reformat, modify, edit,

frame, translate, excerpt, adapt, create derivative works and distribute

(through multiple tiers), <mark>any user content you post</mark>

</p>

نتیجه در مرورگر :

این تگ معمولا برای علامت زدن کلمات مهم تر در یک متن استفاده می شود. در ضمن شما می توانید با استفاده از css، رنگ زرد را به رنگ دلخواهتان تغییر دهید به طور مثال :

mark {

  background-color: #f00;

  color: #fff;

  padding: 0 5px;

  border-radius: 5px;

}

نتیجه در مرورگر :

با تشکر از استاد قالیجایی

چرا باید از DOCTYPE در HTML استفاده کنیم؟

آیا تا به حال در مورد سایت یا وبلاگ خود به مشکلاتی حل نشدنی برخورده اید که با وجود صرف ساعت ها وقت و انرژی نتوانسته باشید آنها را حل کنید؟ البته که در بیشتر موارد این چنین بوده، صرف نظر از اینکه یک برنامه نویس با تجربه یا یک کاربر عادی وب باشیم، همه به نوعی با این نوع مشکلات روبرو شده ایم و کماکان می شویم، برخی از این مسائل به دلایلی مثل خطا در کدنویسی یا جا انداختن تگ ها به فرض در ترسیم یک جدول (table) ممکن است رخ دهند، یا گاهی خطا در کدهای جاوا اسکریپت، تنظیمات نادرست خاصیت ها در css، خطاهای سرور و… ممکن است باعث ایجاد اختلال در عملکرد مورد انتظار سایت یا وبلاگمان شود، اما از همه اینها گذشته یک مورد به ظاهر ساده اما بعضا دردسرساز را هم نباید از قلم انداخت و آن دستور <DOCTYPE> در صفحات html است، این یادداشت نگاهی خواهد داشت به چرایی و چگونگی استفاده از این دستور در صفحات وب.

دستور DOCTYPE چیست؟

پیش از هر چیز بد نیست تعریفی از این دستور داشته باشیم، دستور DOCTYPE در واقع جزئی از تگ های html نیست، بلکه یک دستور راهنما برای مرورگرهای وب است، از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از زبان پایه ی وب یعنی HTML یا (HyperText Markup Language) را ارائه نموده که هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند اندک هستند، اما این موضوع سبب می شود که مرورگرهای وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند و لذا به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند، لذا برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای DOCTYPE استفاده می شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند.

استفاده از DOCTYPE اجباری یا اختیاری؟

در واقع استفاده از دستور DOCTYPE در صفحات وب اجباری نیست، بدین معنی که اگر هم از آن استفاده نشود، صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم (مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی (Validation) نیز معتبر نیستند (که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو تاثیر منفی خواهد داشت)؛ برای اعتبار سنجی کدهای خود، می توانید به آدرس http://validator.w3.org مراجعه کنید.

انواع و ساختار مختلف دستور DOCTYPE

همانطور که پیش تر گفتیم، استفاده از دستور DOCTYPE در نسخه های HTML 4.01 و XHTML 1.0 اجباری است، اما هر کدام از این نسخه ها از سه نوع مختلف از این دستور برای سه هدف متفاوت استفاده می کنند.
– استاندارد HTML 4.01 Strict
در این نسخه، مرورگر از استاندارد یک فایل با نام strict.dtd پیروی می کند و طبق آن، استفاده از Cascading Style Sheets یا همان CSS برای کدنویسی استاندار، مجاز بوده و توصیه شده، در مقابل استفاده از تگ فرم ست (frameset)، نوشتن متون در خارج از چارچوب تگ های استاندارد، استفاده از عناصری مانند bgcolor، استفاده از برخی تگ های HTML قبیح دانسته شده (مانند Font) و… به لحاظ استاندارد کدنویسی مجاز نیست.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

– استاندارد HTML 4.01 Transitional
نسخه Transitional در مقایسه با استاندارد Strict محدودیت کمتری دارد و استفاده از تگ های ایجاد کننده استایل (مانند bgcolor، background و…) در آن مجاز است (البته تا آنجا که می شود بهتر است از css به جای استایل html استفاده شود)، این استاندارد برای سازگاری با مرورگرهای قدیمی که از css پشتیبانی نمی کنند نیز مناسب است، البته استفاده از تگ فرم ست (frameset) در این نسخه نیز مجاز نمی باشد.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

– استاندارد HTML 4.01 Frameset
دستورالعمل فایل DTD در این نسخه، دقیقا مشابه نسخه HTML 4.01 Transitional است، با این تفاوت که در اینجا استفاده از تگ frameset مجاز است، تگ frameset برای صفحاتی به کار می رود که مبتنی بر frame یا صفحات خارجی هستند و با قرار دادن frame ها در درون تگ frameset، امکان فرمت بندی و تنظیم موقعیت سطرها و ستون ها (rows و columns) میسر می شود، به مثال زیر توجه کنید:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | استفاده از تگ frameset در html</title>
<!-- http://webgoo.ir -->
</head>
<frameset cols="30%,40%,30%" rows="33%,33%,33%" border="1">
<frame src="frame-1.htm" frameborder="1">
<frame src="frame-2.htm" frameborder="1">
<frame src="frame-3.htm" frameborder="1" >
</frameset>
</html>

همان طور که ملاحظه می کنید، این صفحه خود از سه فرم متفاوت استفاده می کند و در ضمن در آن از تگ body استفاده نشده است.
– استاندارد XHTML 1.0 Strict
در کنار زبان HTML ساده، زبانی ترکیبی (از HTML و XML) با نام XHTML یا (Extensible HyperText Markup Language) وجود دارد که در آن، زبان HTML ساده توسعه یافته و با XML ترکیب شده است، از آنجایی که HTML ساده خود از استاندارد SGML یا (Standard Generalized Markup Language) پیروی می کند و به این خاطر نسبت به XML محدودیت هایی دارد، استفاده از XHTML که به دلیل استفاده از XML با سیستم های مختلف سازگارتر است، توسط W3C توصیه شده است.
در استاندارد XHTML 1.0 Strict تقریبا تمام موارد HTML 4.01 Strict به طور یکسان هستند، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند (به طور مثال تگ های یکتا باید با یک / بسته شوند مانند </ br>).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

– استاندارد XHTML 1.0 Transitional
این استاندارد نیز مشابه HTML 4.01 Transitional است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

– استاندارد XHTML 1.0 Frameset
این استاندارد نیز مشابه  HTML 4.01 Frameset است،  ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

استفاده از DOCTYPE در HTML5

از آنجایی که نسخه HTML5 از استاندارد SGML یا (Standard Generalized Markup Language) پیروی نمی کند، لذا به فایل های DTD احتیاجی ندارد و تنها در سند HTML5 کافی است  DOCTYPE را به شکل زیر استفاده کنیم:

<!DOCTYPE html>

به طور مثال این یک نمونه از نسخه HTML5 است:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | نمونه ای از یک سند html5</title>
<!-- http://webgoo.ir -->
</head>
<body>
<P>HTML5</P>
</body>
</html>

نوشتن برنامه دانلود winzip در html

در سوالی ، از طرف استاد معین شده بود که برنامه ای را در html بنویسید که توسط آن بشود برنامه winzip  را دانلود نموده و بر روی سیستم نصب نمود در ادامه به توضیحات موارد می پردازیم :

گاهی اوقات نیاز داریم تا فایلی را روی سایت خود قرار داده تا کاربران سایتمان بتوانند آن فایل را دانلود نمایند. برای این منظور اولین کاری که می بایست انجام دهیم این است که فولدری در سایت خود ایجاد کنیم تا مسئول ذخیره سازی کلیه فایل هایی باشد که قرار است دانلود شوند. برای این منظور همانند تصویر زیر در دایرکتوری اصلی سایت خود یک فولدر تحت عنوان resources به معنی “منابع” ایجاد می کنیم:

حال یک فایل زیپ داخل این فولدر قرار می دهیم سپس اقدام به ویرایش کد خود می نماییم (نام فایل زیپی که در این آموزش در نظر گرفته ایم file.zip می باشد):

همانطور که در کد فوق می بیینم داخل تگ body یک تگ p قرار داده ایم که حاوی متن Link to download می باشد. سپس با استفاده از تگ a این پاراگراف را به یک لینک تبدیل کرده ایم. همانطور که در مقدار در نظر گرفته شده برای Attribute یی تحت عنوان href مشاهده می شود، ابتدا آدرس فولدر resources را نوشته سپس نام فایل زیپ را می نویسیم. اکنون پس از ذخیره کردن فایل خود، مرورگر را به روز رسانی می کنیم:

همانطور که در تصویر فوق می بینیم پس از کلیک کردن روی لینک موجود در سایت، پنجره ای نمایان خواهد شد که این امکان را به ما می دهد تا فایل مد نظر را دانلود کنیم.
حال چنانچه بخواهیم یک فایل پی دی اف را داخل سایت خود قرار دهیم که کابران بتوانند آن را در مرورگر خود مشاهده کنند، ابتدا یک فایل پی دی اف تحت عنوان file.pdf داخل فولدر resources قرار می دهیم سپس کد خود را به صورت زیر بازنویسی می کنیم:

همانطور که می بینیم صرفاً نام فایل را به file.pdf تغییر داده و متن لینک را نیز به Show PDF تغییر می دهیم و پس از به روز رسانی مرورگر با تصویر زیر مواجه خواهیم شد:

حال با کلیک روی لینک فایل پی دی اف در خود مرورگر نمایش داده خواهد شد:

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

معرفی 5 ابزار برای ساخت Progress Bar

در این نوشته قصد دارم شما رو با ۵ ابزار آنلاین Loading ساز آشنا کنم برای آشنایی با این ۵ ابزار جالب با من همراه باشید :

استفاده کنندگان از نرم افزار فتوشاپ مسلما توانایی طراحی و ایجاد تصاویر loading رو دارند و میتونن بهترین ها رو برای وب سایت خودشون طراحی و ایجاد کنند اما خب این روند هم زمان بر هست هم نیازمند ایده مناسبه که شاید همیشه برای هر طراحی فراهم نباشه . به همین خاطر ما از ابزارهای آنلاینی مثل این ۵ ابزار بی نظیر که به شما معرفی میکنم استفاده میکنیم که هم ساده تر به نتیجه میرسه هم میتونیم از کیفیت بالاتری بهرمند بشیم .

لطفا ۱ نکته رو فراموش نکنید !

تصویر Loading شامل ۲ حالت هست :

• حالت اول : نوار پیشرفت یک تصویر ثابت  هست که صرفا به شما اطلاع میدهد  اطلاعاتی در حال بارگزاری می باشد.
• حالت دوم : نوار پیشرفت هوشمند بوده و به همان میزانی که اطلاعات بارگزاری میشود به همان میزان پیشرفت را نشان میدهد.

بسیاری از وب سایت ها از این دو حالت بنا به نیاز استفاده خواهند کرد . بسیار خب بهتره بریم سراغ معرفی این ابزار های ارزشمند :

۱: ابزار cssload.net

این وب سایت علاوه بر سایر امکاناتی که در اختیار شما قرار میده ، انواع تصاویر Loading رو هم در خودش جای داده تا شما بتونید با انتخاب طرح لودینگ مورد نظرتون به شخصی ساز اون بپردازین . با انتخاب هر طرح میتونید رنگ المنت اصلی ، رنگ پس زمینه ، اندازه تصویر خروجی و میزان سرعت انیمیشن رو تعیین کنین . پس از انجام تنظیمات میتونید خروجی رو دریافت کنین . خروجی به صورت کد CSS و HTML در اختیار شما قرار میده . همینطور -moz- و -webkit- و -o- و -ms- رو هم پشتیبانی میکنه .

۲ : ابزار loading.io

وب سایتی حرفه ای در ساختن تصاویر لودینگ با امکانات فراوان و بیش از ۳۵ تصویر متنوع پیش فرض . در این وب سایت شما پارامتر های زیادی رو میتونید تعیین و شخصی سازی کنین مانند ، تعیین ابعاد تصویر لودینگ ، رنگ تصویر لودینگ ، سرعت تصویر ، رنگ پس زمینه ، theme رنگی پیشنهادی و مهم تر از اون امکان خروجی به صورت GIF و SVG و CSS به صورت همزمان. همینطور با عضویت و ایجاد حساب کاربری در این سایت میتونید تصاویر ساخته شده خودتون رو همیشه در حساب داشته باشید و تصاویر جدیدی رو هم در اون ذخیره و نگهداری کنین .

۳ : ابزار ajaxload.info

این وب سایت که از وب سایت های بسیار قدیمی در این زمینه هست بر خلاف cssload صرفا به شما یک تصویر GIF ارائه میکنه . شما در این سایت میتونید از بیش از ۳۰ طرح مختلف استفاده کنین و براساس نیازتون رنگ تصویر لودینگ و رنگ پس زمینه رو تعیین کنین . همونطور که گفتم متاسفانه این سایت کد CSS در اختیار شما قرار نمیده .

۴ : ابزار loadinfo.net

این وب سایت بیش از ۵۰ تصویر متفاوت لودینگ رو در اختیار شما قرار میده و نیز همانند ajaxload صرفا یک تصویر به شما ارائه میکنه ولی در شخصی سازی اون بیشتر دستتون باز هست و میتونید پارامتر هایی مثل رنگ اصلی تصویر لودینگ ، رنگ پس زمینه ، تعیین Flip بودن یا نبودن تصویر ، انتخاب ابعاد تصویر از ۱۶ پیکسل تا ۴۸ پیکسل و همینطور سرعت انیمیشن رو از ۵ fpss تا ۵۰ fps تعیین کنین .

۵ : ابزار loadergenerator.com

این وب سایت نیز همانند دو نمونه قبل و در تعداد تصاویر کمتری به شما خروجی GIF ارائه میکنه . تنها پارامتری که در این وب سایت اضافه تر از نمونه هاش گذشته هست امکان rotate یا چرخش تصویر مورد نظر هست .

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

کدهای رنگ قابل استفاده در html را بیان کنید ؟

:: اگر کدهای html یا CSS رو نگاه کرده باشید ، در قسمت هایی که برای تنظیم رنگ متن ، پس زمینه ، حاشیه و … وجود داره معمولا رنگ رو با یک کد خاص به کار بردند . چیزی شبیه rrggbb# . امروز می خوام با توجه به سوالی که استاد محترمان آقای قالیجایی مطرح نمودند به صورت کامل و مفصل در مورد نام و کد رنگ ها در زبان های html و CSS صحبت کنم.
:: معمولا رنگ ها رو به سه طریق در میان کدهای html و css استفاده می کنند . این سه شیوه رو براتون در جدول زیر آوردم :

شیوه استفاده	مثال	توضیح
استفاده از نام رنگ	black سیاه red قرمز	از 147 نام رنگ تعریف شده در CSS و Html استفاده می شود
استفاده از کد ترکیبی (عدد دهدهی)	rgb(0,0,0) سیاه rgb(255,0,0) قرمز	در این روش از کد رنگ به صورت (rgb(r,g,b است که r و g و b به ترتیب شدت رنگ های قرمز ، سبز و آبی را نشان می دهند و که هر کدام مقادیری بین 0 تا 255 را می توانند بپذیرند و هر چه عدد انتخاب شده بیشتر باشد شدت آن رنگ در ترکیب قرمز سبز آبی رنگ بیشتر است .
استفاده از کد ترکیبی (عدد مبنای 16)	#000000 سیاه #FF0000 قرمز	در این روش که بدلیل کوتاه و ساده بودن کد رنگ بیشترین استفاده رو داره رنگ به صورت rrggbb# نشان داده می شود و تنها تفاوت آن با روش قبل استفاده از اعداد مبنای 8 (HexaDecimal) به جای اعداد دهدهی است . که rr و gg و bb به ترتیب مقدار عددی شدت رنگ های قرمز ، سبز و آبی رو نشون میده و مقادیر هگزادسیمال بین 00 تا FF که معادل همون 0 تا 255 دهدهی هست رو میتونه بگیره .

:: نکته در مورد اعداد مبنای 16 یا همون Hexadecimal
:: رقم های اعداد مبنای r ، از 0 هستند تا r-1 . مثلا در مبنای پرکاربرد 10 که روزانه ازش استفاده می کنید ، رقم ها 0 تا 9 هستند . و مبنای 16 دارای ارقام 0 تا 15 هست . برا اینکه ابهامی در خوندن اعداد مبنای 16 پیش نیاد ، رقم های 10 تا 15 رو در مبنای 16 با حروف الفبای لاتین از A تا F نشون میدن . اگر اینکار صورت نمی گرفت در خواندن اعداد مبنای 16 ابهامات زیادی بود . مثلا عدد 112 رو به سه شکل می شد تفسیر کرد . اینکه از سه رقم 1 و 1 و 2 ایجاد شده یا از دو رقم 11 و 2 و یا اینکه از دو رقم 1 و 12 !!! وقتی از حروف به جای ارقام بزرگتر از 9 در مبنای 16 استفاده کنیم این سه تفسیر رو به صورت سه عدد 112 و B2 و 1C داریم که اعداد کاملا واضح و مشخصی در سیستم مبنای 16 هستند .
:: پس شانزده رقم مبنای 16 عبارتند از 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , F , E , D , C , B , A

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

رنگ	کد رنگ HEX	کد رنگ RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

:: به طور مثال در جدول فوق کد رنگ مشکی 000000# هست . یعنی هیچ رنگی موجود نیست (سیاهی !) . و وقتی که همه ی رنگ ها مقدارشون حداکثر باشه سفید (FFFFFF#) رو داریم !

:: نام های استاندارد تعریف شده برای رنگ ها در CSS و HTML
برای تعداد ‍147 رنگ در CSS و HTML نام استاندارد تعریف شده که اونها رو با رنگ و کد معادلشون در زیر می بینید :

نام رنگ	HEX Code	رنگ
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGrey	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
Darkorange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGrey	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGrey	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Grey	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGrey	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGrey	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370D8
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#D87093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGrey	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

:: رنگ ها کاربرد زیادی در صفحات وب دارند . معمولا بیشتر از کدهای HEX برای ایجاد رنگ ها استفاده می شه و از نام رنگها به خاطر اینکه حفظ کردن و به یاد آوردنشون سخته استفاده نمیشه .

در پایان از راهنمایی های استاد تشکر می کنم