تبلیغات
شهدای دفاع مقدس شهر ترکالکی - مرجع کد رنگ ها برای زبان (88)











 

 





 مرجع کد رنگ ها برای زبان HTML


نوعی از مقداردهی رنگ‌ها، استفاده از کد هگز رنگها است. این کد تشکیل شده از 6 کاراکتر که هر کدام از آنها می تواند یکی از مقادیر زیر باشد:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

که این شش کاراکتر بهمراه علامت # می آیند، بدین شکل: #FF0099

این مقدار نمایانگر سه رنگ قرمز (Red) سبز (Green) و آبی (Blue) می باشد که اصطلاحاً به آنها RGB می گویند. اگر هگز یک رنگ را FF0099 در نظر بگیریم، FF مقدار ترکیبی رنگ قرمز، 00 مقدار ترکیبی رنگ سبز و 99 مقدار رنگ آبی را نشان می دهد که 00 کمرنگ ترین و FF پر رنگ ترین حالت را نمایش می دهند. بطور مثال FF0000 کاملاً رنگ قرمز را نشان می دهد.

با ترکیب این 16 کاراکتر می توانید 16.7 میلیون رنگ بسازید. اما فقط 256 رنگ هست که سازگار با کلیه سیستمهای عامل و مرورگرها است یعنی رنگهای غیر از آنها در سیستمهای مختلف با هم فرق دارند. به جدول زیر دقت کنید فقط رنگهای سازگار از ترکیب 00,33,66,99,CC,FF تشکیل شده اند که به آنها palette-safe colors   می گویند. 

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

FFFFFFFFFFCCFFFF99FFFF66FFFF33FFFF0066FFFF66FFCC66FF9966FF6666FF3366FF00
FFCCFFFFCCCCFFCC99FFCC66FFCC33FFCC0066CCFF66CCCC66CC9966CC6666CC3366CC00
FF99FFFF99CCFF9999FF9966FF9933FF99006699FF6699CC669999669966669933669900
FF66FFFF66CCFF6699FF6666FF6633FF66006666FF6666CC666699666666666633666600
FF33FFFF33CCFF3399FF3366FF3333FF33006633FF6633CC663399663366663333663300
FF00FFFF00CCFF0099FF0066FF0033FF00006600FF6600CC660099660066660033660000
CCFFFFCCFFCCCCFF99CCFF66CCFF33CCFF0033FFFF33FFCC33FF9933FF6633FF3333FF00
CCCCFFCCCCCCCCCC99CCCC66CCCC33CCCC0033CCFF33CCCC33CC9933CC6633CC3333CC00
CC99FFCC99CCCC9999CC9966CC9933CC99003399FF3399CC339999339966339933339900
CC66FFCC66CCCC6699CC6666CC6633CC66003366FF3366CC336699336666336633336600
CC33FFCC33CCCC3399CC3366CC3333CC33003333FF3333CC333399333366333333333300
CC00FFCC00CCCC0099CC0066CC0033CC00003300FF3300CC330099330066330033330000
99FFFF99FFCC99FF9999FF6699FF3399FF0000FFFF00FFCC00FF9900FF6600FF3300FF00
99CCFF99CCCC99CC9999CC6699CC3399CC0000CCFF00CCCC00CC9900CC6600CC3300CC00
9999FF9999CC9999999999999999339999000099FF0099CC009999009966009933009900
9966FF9966CC9966999966669966339966000066FF0066CC006699006666006633006600
9933FF9933CC9933999933669933339933000033FF0033CC003399003366003333003300
9900FF9900CC9900999900669900339900000000FF0000CC000099000066000033000000

 


===============================================

در این بخش از آموزش css به توضیح ویژگی مرجع نام و شماره رنگ ها در CSS میپردازیم.

  Colors Value

رنگ ها در css  با روش های زیر مقدار دهی میشوند.

  1. Hexadecimal colors
  2. RGB colors
  3. RGBA colors
  4. HSL colors
  5. HSLA colors
  6. color names

Color Name

نام رنگHEXColor
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  
DarkGray  #A9A9A9  
DarkGrey  #A9A9A9  
DarkGreen  #006400  
DarkKhaki  #BDB76B  
DarkMagenta  #8B008B  
DarkOliveGreen  #556B2F  
Darkorange  #FF8C00  
DarkOrchid  #9932CC  
DarkRed  #8B0000  
DarkSalmon  #E9967A  
DarkSeaGreen  #8FBC8F  
DarkSlateBlue  #483D8B  
DarkSlateGray  #2F4F4F  
DarkSlateGrey  #2F4F4F  
DarkTurquoise  #00CED1  
DarkViolet  #9400D3  
DeepPink  #FF1493  
DeepSkyBlue  #00BFFF  
DimGray  #696969  
DimGrey  #696969  
DodgerBlue  #1E90FF  
FireBrick  #B22222  
FloralWhite  #FFFAF0  
ForestGreen  #228B22  
Fuchsia  #FF00FF  
Gainsboro  #DCDCDC  
GhostWhite  #F8F8FF  
Gold  #FFD700  
GoldenRod  #DAA520  
Gray  #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  
LightGray  #D3D3D3  
LightGreen  #90EE90  
LightPink  #FFB6C1  
LightSalmon  #FFA07A  
LightSeaGreen  #20B2AA  
LightSkyBlue  #87CEFA  
LightSlateGray  #778899  
LightSlateGrey  #778899  
LightSteelBlue  #B0C4DE  
LightYellow  #FFFFE0  
Lime  #00FF00  
LimeGreen  #32CD32  
Linen  #FAF0E6  
Magenta  #FF00FF  
Maroon  #800000  
MediumAquaMarine  #66CDAA  
MediumBlue  #0000CD  
MediumOrchid  #BA55D3  
MediumPurple  #9370DB  
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  #DB7093  
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  
SlateGray  #708090  
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  


================================================

تفاوت xhtml وhtml در چیست؟

xhtml ورژن سخت گیرانه تر و واضح تری از همان html هست
و مخفف این کلماته:
EXtensible HyperText Markup Language
extensible یعنی توسعه پذیر، و
بنابراین می تونیم بگیم این ورژن نسبت به html بیشتر قابل توسعه دادنه.
xhtml تقریبا همون html ورژن 4.0.1 هست که مجددا با xml طراحی شده.
با همه ی مرورگرها ساپورت می شه.
xhtml در واقع html ی است که به عنوان یک برنامه کاربردی xml معرفی شده
تفاوتهای اصلی که با هم دارند:
-در xhtml همه ی عناصر حتما باید به درستی تو در تو قرار بگیرند.
در حالی که در html ممکن هست گاهی عبارات تو در تو را جابجا بنویسیم
و اشکالی نداشته باشه.
 اینه که می گیم xhtml سخت گیرانه تر برخورد می کنه. مثلا این عبارت:
 text در html بی اشکاله در حالی که xhtml به اون ایراد می گیره
و جای تگها رو باید عوض کرد.
-در xhtml حتما باید عناصر خالی، یک تگ بسته شدن داشته باشند.
اما ممکنه در html در مواردی این مساله بدون اشکال باشه.
در xhtml عناصر خالی هم باید بسته بشن.
-در xhtml اسم تگها و صفات حتما باید با حروف کوچیک نوشته بشن.
در غیر اینصورت اشتباه تلقی می شه.
-و مورد آخر اینکه همه xhtml document ها باید یک عنصر ریشه داشته باشند.
حالا نکاتی را که باید در این نسخه رعایت کنید:
نوشتن تگهای که در HTML اجباری نبود در XHTML اجباری است.
مقادیر خصوصیات در تگها باید بین دو علامت "…"قرار گیرند.
اگر مقدار خصیصه ای با نام آن یکسان باشد، در HTML می توانید از آن صرف نظر کنید.
 ولی در XHTML باید مقادیر تمام خصیصه ها را به طور صریح مشخص نمایید.
موفق باشید

====================================


ویژوال بیسیک کد رنگ را به صورت BBGGRR ذخیره می کند ؛ ما باید قالب رنگ را  به RRGGBB# تبدیل کنیم ؛ یعنی جای کد رنگ قرمز با آبی باید عوض شود.

تابع زیر اینکار را انجام می دهد:

  1. Function VB2HTMLColor(color As Long) As String
  2.     Dim aux As String
  3.     aux = Right("00000" & Hex(color)6)
  4.     VB2HTMLColor = "#" & Right(aux, 2) & Mid(aux, 32) & Left(aux, 2)
  5. End Function



=========================================


یک فایل HTML چیست؟

  • HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
  • یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
  • بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
  • یک فایل HTML باید دارای پسوند html. یا html. باشد
  • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود


======================================

آیا می خواهید یکبار امتحان کنید؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.






This is my first home page. This text is bold

فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان  مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.


========================================

مثال تشریح شده

اولین برچسب در فایل HTML شما ، است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب


=====================================


ابتدا درمورد زبان طراحی صفحات وب htmlتوضیح می دهیم ولی بیشتر به جزییات وتوضیحات نظری در مورد زبان html تكیه نمی كنم از ابتدا به اصل مطلب اشاره می كنم

  • مقدمه
    در این درس با ویژگیهای فایلهای اچتمل، اجزا تشکیل دهنده آن یعنی عناصر و تگ ها ( Elements & Tags ) و نحوه ایجاد یک فایل ساده و نمایش آن در صفحه مرورگرتان آشنا خواهید شد.

  • HTML & WWW
    در این درس با مفاهیم وب ( تار عنکبوت جهانی یا World Wide Web ) ، اینترنت، مرورگرها و استانداردهای وب آشنا خواهید شد. همچنین با تفاوتهای مرورگرهای وب ( Web Browsers ) و سرویس دهنده های وب ( Web Servers ) آشنا خواهید شد.

  • عناصر ( Elements )
    یک متن و یا فایل اچتمل از عناصر یا element ها تشکیل میشود و برای ایجاد عناصر از تگ ها یا tags استفاده میشود. در این فصل با عناصر و تگ ها آشنا خواهید شد.

  • تگ های اصلی ( Basic Tags )
    تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و یکی از بهترین روش های یادگیری اچتمل دیدن مثالها و تغییر آنها میباشد. در این فصل با تگ های پایه و مهم آشنا شده و با کمک ادیتور اختصاصی ما و با امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها بپردازید.

  • فــارسی نویسی
    در این درس با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی این سایت آشنا خواهید شد.

  • فرمت دهی ( Formatting )
    وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا توپر و bold بودن و یا ایتالیک بودن ) میباشد و در این درس با این گروه از تگهای formating آشنا خواهید شد. همچنین یاد خواهید گرفت که چگونه source یا اصل کدهای اچتمل یک صفحه یا page را ببینید.

  • نهادها ( Entities )
    گروهی از نویسه های ( Character ) اچتمل مانند (<) و یا (>) دارای معنی خاصی ( مثلا نویسه < شروع یک تگ را نشان میدهد. ) در استاندارد اچتمل بوده و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمیباشند. در این فصل با این نویسه ها آشنا شده و با کمک Character Entities چگونگی استفاده از این گروه از نویسه ها را فرا خواهید گرفت.

  • پیوندها ( Links )
    در این درس با پیوندها ( Links ) ، شناسه های مرتبط مخصوصا href و نحوه به کار گیری آنها آشنا خواهید شد.

  • جداول ( Tables)
    در این درس با مفاهیم جدول ( Table ) ، ردیف یا row ، سلولها یا خانه ها، مرز یا border در جداول و عناصر مرتبط مخصوصا TABLE ، TD , TR آشنا خواهید شد.

  • فریمها ( Frames )
    در این درس با مفاهیم فریم ( Frame ) و عناصر مربوطه مخصوصا Frame و Frameset آشنا خواهید شد.

  • فهرستها ( Lists )
    این درس شما را با نحوه نمایش فهرستها ( List ) ، انواع فهرستها و تگ های مربوطه آشنا خواهد ساخت.

  • فرمها ( Forms )
    از طریق استفاده از تگ های فرم ( form ) قادر به دریافت اطلاعات از بازدیدکنندگان صفحاتتان و یا تبادل اطلاعات بین صفحات مختلف خواهید شد. با کمک این گروه از تگ ها قادر به نمایش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، رادیو باتونها (radio-buttons) و ... شده و همچنین امکان گذاشتن دکمه های ارسال (submit button) و یا حذف (reset) را خواهید داشت. این فصل با شرح تگ های form و input و ... به چگونگی ایجاد ارتباط با بازدیدکنندگان و گرفتن اطلاعات از آنها خواهد پرداخت.

  • تصاویر ( Images )
    در این درس با عنصر img و چگونگی نمایش تصاویر و همچنین تنظیم محل آنها آشنا خواهید شد.

  • پس زمینه ( Background )
    در این درس با چگونگی نمایش تصاویر و یا تعیین رنگ پس زمینه آشنا خواهید شد.


  • منابع :

    1- گروه نرم افزاری پارس سافت

    2 - آفتابگردان

    3 -  Color Codes






    تمامی حقوق این وبلاگ محفوظ است | طراحی : پیچک