فراسوی اطلاعات
فراسوی اطلاعات

فراسوی اطلاعات

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


جدول رنگهای پایه اچتمل بر اساس مقادیر هگز


#EEEEEE   #DDDDDD   #CCCCCC   #BBBBBB   #AAAAAA   #999999  
#888888   #777777   #666666   #555555   #444444   #333333  
#000000   #000033   #000066   #000099   #0000CC   #0000FF  
#330000   #330033   #330066   #330099   #3300CC   #3300FF  
#660000   #660033   #660066   #660099   #6600CC   #6600FF  
#990000   #990033   #990066   #990099   #9900CC   #9900FF  
#CC0000   #CC0033   #CC0066   #CC0099   #CC00CC   #CC00FF  
#FF0000   #FF0033   #FF0066   #FF0099   #FF00CC   #FF00FF  
#003300   #003333   #003366   #003399   #0033CC   #0033FF  
#333300   #333333   #333366   #333399   #3333CC   #3333FF  
#663300   #663333   #663366   #663399   #6633CC   #6633FF  
#993300   #993333   #993366   #993399   #9933CC   #9933FF  
#CC3300   #CC3333   #CC3366   #CC3399   #CC33CC   #CC33FF  
#FF3300   #FF3333   #FF3366   #FF3399   #FF33CC   #FF33FF  
#006600   #006633   #006666   #006699   #0066CC   #0066FF  
#336600   #336633   #336666   #336699   #3366CC   #3366FF  
#666600   #666633   #666666   #666699   #6666CC   #6666FF  
#996600   #996633   #996666   #996699   #9966CC   #9966FF  
#CC6600   #CC6633   #CC6666   #CC3399   #CC66CC   #CC66FF  
#FF6600   #FF6633   #FF6666   #FF6699   #FF66CC   #FF66FF  
#009900   #009933   #009966   #009999   #0099CC   #0099FF  
#339900   #339933   #339966   #339999   #3399CC   #3399FF  
#669900   #669933   #669966   #669999   #6699CC   #6699FF  
#999900   #999933   #999966   #999999   #9999CC   #9999FF  
#CC9900   #CC9933   #CC9966   #CC9999   #CC99CC   #CC99FF  
#FF9900   #FF9933   #FF9966   #FF9999   #FF99CC   #FF99FF  
#00CC00   #00CC33   #00CC66   #00CC99   #00CCCC   #00CCFF  
#33CC00   #33CC33   #33CC66   #33CC99   #33CCCC   #33CCFF  
#66CC00   #66CC33   #66CC66   #66CC99   #66CCCC   #66CCFF  
#99CC00   #99CC33   #99CC66   #99CC99   #99CCCC   #99CCFF  
#CCCC00   #CCCC33   #CCCC66   #CCCC99   #CCCCCC   #CCCCFF  
#FFCC00   #FFCC33   #FFCC66   #FFCC99   #FFCCCC   #FFCCFF  
#00FF00   #00FF33   #00FF66   #00FF99   #00FFCC   #00FFFF  
#33FF00   #33FF33   #33FF66   #33FF99   #33FFCC   #33FFFF  
#66FF00   #66FF33   #66FF66   #66FF99   #66FFCC   #66FFFF  
#99FF00   #99FF33   #99FF66   #99FF99   #99FFCC   #99FFFF  
#CCFF00   #CCFF33   #CCFF66   #CCFF99   #CCFFCC   #CCFFFF  
#FFFF00   #FFFF33   #FFFF66   #FFFF99   #FFFFCC   #FFFFFF  

 

جدول رنگهای نامگذاری شده و مقادیر معادل هگز آن به ترتیب حروف الفباء


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
  Darkgreen
#006400
  Darkkhaki
#BDB76B
 
Darkmagenta
#8B008B
  Darkolivegreen
#556B2F
  Darkorange
#FF8C00
 
Darkorchid
#9932CC
  Darkred
#8B0000
  Darksalmon
#E9967A
 
Darkseagreen
#8FBC8F
  Darkslateblue
#483D8B
  Darkslategray
#2F4F4F
 
Darkturquoise
#00CED1
  Darkviolet
#9400D3
  Deeppink
#FF1493
 
Deepskyblue
#00BFFF
  Dimgray
#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
  Lightgreen
#90EE90
  Lightgrey
#D3D3D3
 
Lightpink
#FFB6C1
  Lightsalmon
#FFA07A
  Lightseagreen
#20B2AA
 
Lightskyblue
#87CEFA
  Lightslategray
#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
#688E23
 
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
  Slategray
#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
     

مرجع:  سایت شبکه رشد

درس 1 - ایجاد اولین سند HTML


بعد از خواندن این درس توانائیهای زیر را در ساخت صفحات وب بدست می آورید:
1- آشنایی و درک تگهای HTML
2- باز کردن محیط کاری متناسب برای ایجاد یک سند HTML
3- استفاده از یک Editor (ویرایشگر متنی )
4- وارد کردن مطالبی به عنوان توصیه بطوریکه در صفحه نشان داده نشود
5- باز کردن سند در Browser برای نمایش آن تحت وب

1- تگ های HTML

وقتی یک مرورگر وب صفحه ای مانند صفحه فوق که شما مطالعه می کنید را نشان می دهد، صفحه از یک فایل متنی خوانده میشود.
کدهای ویژه ای بکار برده شده اند که با علامات <> نشانه گذاری شده اند. قالب عمومی تگ های HTML بصورت فوق می باشد :
< نام تگ / >رشته کاراکتری < نام تگ >
(البته بعضی تگها بصورت فرد عمل می کنند )
مانند:

این تگ بیان می کند که مرورگر وب متنی را بصورت زیر نمایش می دهد :
What are HTML tags
- بعدا در مورد تگهای < Hn > توضیح بیشتری خواهیم داد.

تذکر :

مرورگر وب نسبت به استفاده از حروف بزرگ یا کوچک حساسیت ندارد.بر خلاف برنامه های کامپیوتر ، اگر شما ایرادی در HTML داشته باشید ، کامپیوتر شما دچار هنگ نمی شود و ایراد بسادگی با رفتن در داخل سند HTML بر طرف میشود. مرورگر شما ، دارای یک سند لغات کوچک می باشد . یکی از جنبه های جذاب HTML ، این است که اگر Browser شما نداند که تگی که در آن نوشته شده چیست ، آن را نادیده می گیرد. برای مثال :

مثلا تگ < H3 > < /H3 > مورد حمایت مرورگر قرار می گیرند . ولی با مرورگرهای فعلی < wiggle /> و < wiggle > حمایت نمی شوند . اگر ما برنامه نویس یک مرورگر وب بودیم عملکردی برای تگ < wiggle > در نظر می گرفتیم .

2- باز کردن محیط کاری

برای کامل کردن این بحث ، از ابتدا بهتر است که یک پنجره جدید ایجاد کنید. برای اینکه به شما اجازه می دهد که ضمن نگهداری پنجره فعلی ، پنجره ای جدید برای کار خودداشته باشید. شما خیلی راحت می توانید بین پنجره ها و اطلاعات مختلف گردش داشته باشید . مراحل ایجاد محیط کاری را در اینجا بیان می کنیم :
1- از منوی File مرورگر خود ، گزینه New Window را انتخاب کنید . پنجره دوم ظاهر می شود . اولین پنجره کتاب شماست و پنجره دوم محیط کاری برای تکمیل دروس HTML
2- فایل متنی خود را باز کنید
3- ایجاد سند HTMl
یک سند HTML شامل دو قسمت می باشد ( قسمت های تیتر و بدنه )
- قسمت تیتر ، شامل اطلاعاتی در مورد سندی که نشان داده می شود است .
- بدنه ، شامل کلیه مواردی می باشد که در یک صفحه وب نشان داده می شود .

نمونه یک سند HTML


استفاده از مطالبی که توضیح راجع به سند باشد و در صفحه نشان داده نمی شود

هر آنچه در صفحه نشان داده می شود
این تگ توضیحاتی دارد مبنی بر اینکه برای نوشتن این صفحه از کدام ورژن HTML استفاده شده است . تمامی مندرجات صفحه بین 2 دو تگ < HTML> و < html /> نوشته می شود . ابتدا < Head > و < head / > و سپس < body > و < body / > < ! …… > متنی که ما بین تگ فوق نوشته می شود ، در صفحه وب نمایش داده نمی شود، ولی این اطلاعات در اختیار کسی قرار می گیرد که Source یک صفحه وب را که در پشت صفحه وب قرار دارد می بیند .
وقتی صفحه وب شما دچار پیچیدگی می شود، این مطالب و کدها می تواند برای به روز کردن صفحه وب شما مفید باشد . اینجا به ذکر مراحل ایجاد سند HTML می پردازیم :
1- Editor متنی خود را باز کنید
2- و مطالب زیر را در آن وارد کنید :

موقعیت تگ < title > و < title /> داخل دو تگ < head > و < head /> می باشد و این که در صفحه نشان داده نمی شود پس کار آن چیست ؟
تگ < html > شناسه یگانه ای است برای هر سند HTML و در قسمت Title bar بار مرورگر شما نمایش داده می شود .
در درس 3 شما می آموزید که چگونه رشته کاراکتر را برای Title اضافه کنید و در صفحه وب شما ظاهر شود . ذکر این نکته ضروری است که دراین تگ توضیح اسم نویسنده و تاریخ ایجاد سند HTML ذکر می شود و شما می توانید هر نکته ای را درون این تگها نمایش دهید . ولی فقط در سند HTML قابل رویت می باشد و در صفحه وب شما قابل مشاهده نیست.
3- سند خود را به نام Lesson1.html ذخیره کنید و آن را در فولدر خاص مورد نظر خود نگهداری کنید .





تذکر ( برای استفاده کنندگان ویندوز 3.1 ) :

شما باید سند HTML خود را با نام HTM .نام فایل ذخیره کنید . بنابراین نام فایل شما در این مثال Lesson1.htm خواهد بود . نگران نباشید مرورگر شما به اندازه کافی هوشمند می باشد و می داند که آخر نام فایل شما HTM می باشد . HTM نیز یک فایل HTML می باشد .
استفاده کنندگان ویندوز 95 به بالا می توانند نام فایل را Lesson1.html قرار دهند . طبق مثال فوق با استفاده از این اسم و پسوند مرورگر فایل شما را مانند یک فایل HTML می خواند و آن را بصورت صفحه وب نشان می دهد .

نمایش سند در یک صفحه وب

1- بر گردید به مرورگر وب که برای محیط کاری از آن استفاده می کنید . از منوی File گزینه Open را انتخاب کنید .
2- از کادر محاوره ای که باز می شود ، سند مورد نظر ایجاد شده را باز کنید .
3- حال در Title bar مرورگر خواهید دید Lesson 1

چک کردن فایل

سند خود را با صفحه وبی که در پیش رو داریدمقایسه کنید، بعد از نگاه کردن نمونه از دکمه Toolbar back استفاده کنید تا مرورگر شما دوباره به این صفحه باز گردد . اگر سند شما با سند نمونه تفاوت داشت دوباره مروری بر مطالبی که وارد کردید داشته باشید . از اشتباهات معمولی که وجود دارد عدم مشاهده Titlebar می باشد . متنی که بین تگ های < title > و < title /> قرار داده شده در Title بار نشان داده نمی شود . از اشتباهات معمول دیگر برای کسانی است که از برنامه های پردازشگر لغات برای Type HTML استفاده می کنند و نمیتوانند آن را در مرورگر باز کنند .در این صورت صفحه آنها پر از کاراکترهای اضافی است .
اگر شما به دنبال یک Editor ساده و ارزان هستید پیشنهاد ما به شما Notepad می باشد

مرور عناوین

1- تگ های HTML چه هستند ؟
2- متن تگ Title در کجا قرار می گیرد؟
3- چه مراحلی را برای ایجاد یک سند HTML باید دنبال کرد ؟
4- چگونه یک تگ توضیح ایجاد می شود ؟
5- چگونه می توانید سند HTML خود را در مرورگر نمایش دهید ؟

یک تمرین :

یک سند HTML که شامل تگ Title باشد ایجاد کنید و سپس آن را در مرورگر نمایش دهید . "حال صفحه اول شما ساخته شد"