|
|
نام رنگها در HTML
در این صفحه شما یک جدول از اسامی رنگ هایی پیدا خواهید کردکه با بیشتر مرورگرها پشتیبانی می شوند.
توجه: فقط 16 نام رنگ با استاندارد W3C HTML 4.0 پشتیبانی می شوند. برای بقیه رنگ ها باید از مقادیر مبنای 16 آنها استفاده کرد.
| نام رنگ | مبنای 16 | رنگ |
|---|
| 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 |
|
| Feldspar |
#D19275 |
|
| 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 |
|
| LightGrey |
#D3D3D3 |
|
| LightGreen |
#90EE90 |
|
| LightPink |
#FFB6C1 |
|
| LightSalmon |
#FFA07A |
|
| LightSeaGreen |
#20B2AA |
|
| LightSkyBlue |
#87CEFA |
|
| LightSlateBlue |
#8470FF |
|
| 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 |
#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 |
|
| SlateGray |
#708090 |
|
| Snow |
#FFFAFA |
|
| SpringGreen |
#00FF7F |
|
| SteelBlue |
#4682B4 |
|
| Tan |
#D2B48C |
|
| Teal |
#008080 |
|
| Thistle |
#D8BFD8 |
|
| Tomato |
#FF6347 |
|
| Turquoise |
#40E0D0 |
|
| Violet |
#EE82EE |
|
| VioletRed |
#D02090 |
|
| Wheat |
#F5DEB3 |
|
| White |
#FFFFFF |
|
| WhiteSmoke |
#F5F5F5 |
|
| Yellow |
#FFFF00 |
|
| YellowGreen |
#9ACD32 |
|
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
نام رنگها در HTML ,
بازدید : 277
مقادیر رنگ های HTML
رنگ ها با ترکیب نورهای قرمز و سبز آبی نمایش داده می شوند.
مقدار رنگ ها
رنگ های HTML با استفاده از نوشتن یک عدد مبنای 16 از ترکیب مقدار رنگ های قرمز و سبز وآبی معرفی می شود. کمترین مقداری که می توان به یکی از منابع نوری داد صفر است (hex#00)بیشترین مقدار هم 255 است (hex#ff)
قرمز را خاموش کنید
اگر شما رنگ قرمز را بطور کامل خاموش کنید، 65536 رنگ متفاوت از ترکیب آبی و سبز وجود خواهد داشت.
قرمز را روشن کنید
با تنظیم کردن پارامتر قرمز به بیشترین مقدارش ، 65536 رنگ متفاوت از آبی و سبز وجود خواهد داشت.
16 میلیون رنگ متفاوت
ترکیب مقادیر قرمز و سبز آبی از صفر تا 255 بیش از 16 میلیون رنگ متفاوت (256*256*256) می دهد. بیشتر نمایشگرهای مدرن قادر به نمایش 16384 رنگ متفاوت هستند.اگر شما به جدول رنگ پایین نگاه کنید، شما نتایج مختلف تغییرات رنگ قرمز از صفر تا 255 را در حالی که سبز و آبی صفر هستند خواهید دید. برای دیدن لیست کامل 16384 رنگ متفاوت که بر پایه قرمز از صفر تا 255 هستند بر روی یکی از مقادیر مبنای 16 یا rgb زیر کلیک کنید.
| Red Light | HEX | RGB |
|---|
| |
#000000 |
rgb(0,0,0) |
| |
#080000 |
rgb(8,0,0) |
| |
#100000 |
rgb(16,0,0) |
| |
#180000 |
rgb(24,0,0) |
| |
#200000 |
rgb(32,0,0) |
| |
#280000 |
rgb(40,0,0) |
| |
#300000 |
rgb(48,0,0) |
| |
#380000 |
rgb(56,0,0) |
| |
#400000 |
rgb(64,0,0) |
| |
#480000 |
rgb(72,0,0) |
| |
#500000 |
rgb(80,0,0) |
| |
#580000 |
rgb(88,0,0) |
| |
#600000 |
rgb(96,0,0) |
| |
#680000 |
rgb(104,0,0) |
| |
#700000 |
rgb(112,0,0) |
| |
#780000 |
rgb(120,0,0) |
| |
#800000 |
rgb(128,0,0) |
| |
#880000 |
rgb(136,0,0) |
| |
#900000 |
rgb(144,0,0) |
| |
#980000 |
rgb(152,0,0) |
| |
#A00000 |
rgb(160,0,0) |
| |
#A80000 |
rgb(168,0,0) |
| |
#B00000 |
rgb(176,0,0) |
| |
#B80000 |
rgb(184,0,0) |
| |
#C00000 |
rgb(192,0,0) |
| |
#C80000 |
rgb(200,0,0) |
| |
#D00000 |
rgb(208,0,0) |
| |
#D80000 |
rgb(216,0,0) |
| |
#E00000 |
rgb(224,0,0) |
| |
#E80000 |
rgb(232,0,0) |
| |
#F00000 |
rgb(240,0,0) |
| |
#F80000 |
rgb(248,0,0) |
| |
#FF0000 |
rgb(255,0,0) |
سایه های خاکستری
رنگ های خاکستری با استفاده از مقادیر برابر منابع رنگی نمایش داده می شوند.برای آسان تر ساختن آن برای شما برای آنکه رنگ خاکستری را درست انتخاب کنید ما یک جدول از سایه های خاکستری برای شما جمع آوری کرده ایم.
| |
RGB(0,0,0) |
#000000 |
| |
RGB(8,8,8) |
#080808 |
| |
RGB(16,16,16) |
#101010 |
| |
RGB(24,24,24) |
#181818 |
| |
RGB(32,32,32) |
#202020 |
| |
RGB(40,40,40) |
#282828 |
| |
RGB(48,48,48) |
#303030 |
| |
RGB(56,56,56) |
#383838 |
| |
RGB(64,64,64) |
#404040 |
| |
RGB(72,72,72) |
#484848 |
| |
RGB(80,80,80) |
#505050 |
| |
RGB(88,88,88) |
#585858 |
| |
RGB(96,96,96) |
#606060 |
| |
RGB(104,104,104) |
#686868 |
| |
RGB(112,112,112) |
#707070 |
| |
RGB(120,120,120) |
#787878 |
| |
RGB(128,128,128) |
#808080 |
| |
RGB(136,136,136) |
#888888 |
| |
RGB(144,144,144) |
#909090 |
| |
RGB(152,152,152) |
#989898 |
| |
RGB(160,160,160) |
#A0A0A0 |
| |
RGB(168,168,168) |
#A8A8A8 |
| |
RGB(176,176,176) |
#B0B0B0 |
| |
RGB(184,184,184) |
#B8B8B8 |
| |
RGB(192,192,192) |
#C0C0C0 |
| |
RGB(200,200,200) |
#C8C8C8 |
| |
RGB(208,208,208) |
#D0D0D0 |
| |
RGB(216,216,216) |
#D8D8D8 |
| |
RGB(224,224,224) |
#E0E0E0 |
| |
RGB(232,232,232) |
#E8E8E8 |
| |
RGB(240,240,240) |
#F0F0F0 |
| |
RGB(248,248,248) |
#F8F8F8 |
| |
RGB(255,255,255) |
#FFFFFF |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
مقادیر رنگ های HTML ,
بازدید : 265
پس زمینه های HTML
یک پس زمینه خوب می تواند ظاهر یک سایت را واقعا عالی کند.
مثالها
رنگ زمینه و متن خوب
مثالی از رنگ زمینه و رنگ متن خوب که خواندن متن را آسان می کند.
رنگ زمینه و متن نامتناسب
این مثال نشان می دهد که اگر رنگ زمینه و متن صفحه نامناسب انتخاب شوند، خواندن آن چه اندازه مشکل می شود.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
پس زمینه ها
برچسب <body> دو موجودیت دارد که شما می توانید با استفاده از آن پس زمینه را تعیین کنید. پس زمینه می تواند یک رنگ یا تصویر باشد.
Bgcolor
موجودیت Bgcolor ، رنگ پس زمینه یک صفحه HTML را تعیین می کند.محتوای این موجودیت می تواند یک عدد مبنای 16 ، یک مقدار RGB یا نام یک رنگ باشد:
< body bgcolor="#000000" >
< body bgcolor="black" >
< body bgcolor="rgb(0,0,0)" >
خطوط بالا رنگ پس زمینه را به رنگ مشکی ست می کنند.
پس زمینه
موجودیت Background یک تصویر را برای پس زمینه یک صفحه HTML تعیین می کند . محتوای این موجودیت url تصویری است که شما می خواهید از آن استفاده کنید. اگر تصویر کوچکتر از پنجره مرورگرتان است ، تصویر خودش را تکرار می کند تا پنجره مرورگرتان را پرکند.
< body background="./content/fa/home/background/clouds.gif" >
< body background="http://www.html.ir/clouds.gif" >
url می تواند مرتبط باشد (مثل خط اول) ویا کامل باشد(مثل خط دوم).
توجه: اگر شما می خواهید از یک تصویر در پس زمینه استفاده کنید باید به خاطر داشته باشید:
- آیا تصویر پس زمینه زمان بارگیری را بهبود می بخشد؟
- آیا تصویر پس زمینه با تصاویر دیگر در صفحه خوب به نظر می رسد؟
- آیا تصویر پس زمینه با رنگ متن ها خوب به نظر می رسد؟
- آیا تصویر پس زمینه هنگامی که در صفحه تکرار می شود ، خوب به نظر می رسد؟
- آیا تصویر پس زمینه مرتبا تمرکز را از متن می گیرد؟
نکات پایه ای-اطلاعات مفید
bg color, background و موجودیت های متن در برچسب <body> در آخرین نسخه HTML بد دانسته شده است. کنسرسیوم شبکه گسترده جهانی(w3c) این موجودیت ها را از نظریه های خود حذف کرده.به جای آن از CSS باید استفاده کرد(برای معرفی طرح بندی و نمایش خواص عناصر).
مثالهای بیشتر
عکس زمینه خوب
در این مثال، مناسب بودن عکس زمینه و رنگ متن، که باعث خواناتر شدن متن شده، نشان داده شده است.
عکس زمینه خوب 2
این مثال نیز مانند مثال پیش نمونه دیگری از این تناسب خوب را نشان می دهد.
عکس زمینه نامناسب
نامناسب بودن عکس و رنگ متن، باعث سختی خواندن متن می شود. مثال را ببینید.
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
پس زمینه های HTML ,
بازدید : 267
| |
|
رنگ های HTML
رنگ ها با ترکیب منابع نوری قرمز ، سبز و آبی معرفی می شوند.
محتوای رنگ ها
رنگ ها با استفاده از نشان گذاری مبنای 16 برای ترکیب مقدار رنگ قرمز و سبز آبی معرفی می شوند. پایین ترین مقدار رنگی که می توان به یک منبع رنگی داد صفر است (hex #00) و بالاترین مقدار 255 است(hex #ff).
این جدول حاصل ترکیب منابع نوری قرمز و سبز و آبی را نشان می دهد:
| رنگ | مبنای 16 | 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) |
نام رنگ ها
یک کلکسیون از نام رنگ ها بوسیله بیشتر مرورگرها پشتیبانی می شود.
توجه: فقط 16 رنگ توسط استاندارد W3C HTML4.0 پشتیبانی می شود ( aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , yellow ). برای تمام رنگ های دیگر ، شما باید از مقدار شما باید از مقدار مبنای 16 رنگها استفاده کنید.
| رنگ | مبنای 16 | نام رنگ |
|---|
| |
#F0F8FF |
AliceBlue |
| |
#FAEBD7 |
AntiqueWhite |
| |
#7FFFD4 |
Aquamarine |
| |
#000000 |
Black |
| |
#0000FF |
Blue |
| |
#8A2BE2 |
BlueViolet |
| |
#A52A2A |
Brown |
رنگ های ایمن وب
چندین سال پیش که کامپیوترها فقط 256 رنگ متفاوت را پشتیبانی می کردند ، لیستی از 216 رنگ ایمن وب بعنوان استاندارد وب پیشنهاد شد. دلیل این پیشنهاد آن بود که سیستم عامل های مایکروسافت و Mac از 40 رنگ ثابت از پیش تعیین شده سیستمی استفاده می کردند.
جدول متقاطع 216 رنگ
این جدول متقاطع 216 رنگ ایمن وب در اصل برای اطمینان از اینکه همه کامپیوترها ، همه رنگ های آن را هنگامی که پالت رنگ 256 تایی اجرا می شود ، دقیق نشان خواهند داد ساخته شد.
| 000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
| 003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
| 006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
| 009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
| 00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
| 00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
| 330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
| 333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
| 336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
| 339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
| 33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
| 33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
| 660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
| 663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
| 666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
| 669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
| 66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
| 66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
| 990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
| 993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
| 996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
| 999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
| 99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
| 99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
| CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
| CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
| CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
| CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
| CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
| CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
| FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
| FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
| FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
| FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
| FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
| FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |
|
|
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
رنگ های HTML ,
بازدید : 265
عکس های HTML
با HTML شما می توانید در یک پرونده عکس نشان دهید.
مثالها
نمایش عکس
این مثال چگونگی نمایش عکس را نشان می دهد.
نمایش عکس از محلی دیگر
در صورتیکه عکس مورد نظر در محلی دیگر باشد(آدرسی در شبکه)، می توانید برای نمایش آن، از این مثال کمک بگیرید.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
برچسب Images و موجودیت Src
در HTML عکس ها با برچسب <img > معرفی می شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت هاست و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر:
<"img src="url >
url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "www.html.ir" دارای این url است:
http://www.html.ir/images/boat.gif
مرورگر تصویر را جایی قرار می دهد که بر چسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.
موجودیت Alt
موجودیت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:
<"img src="url" alt="Big Boat>
اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.
نکات پایه ای - اطلاعات مفید
اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.
مثالهای بیشتر
عکس زمینه
این مثال، روش نمایش عکسی به عنوان زمینه را نشان می دهد.
محل نمایش عکس
به کمک این مثال می توان محل نمایش عکس، نسبت به متنی که عکس درون آن قرار دارد، را تعیین کرد.
تعیین محل نمایش عکس در پاراگراف
می خواهید عکسی را درون یک پاراگراف نمایش دهید. برای تعیین محل آن نسبت به متن پاراگراف، به این مثال توجه کنید.
تغییر اندازه عکس
این مثال روش تعیین اندازه عکس را برای نمایش، نشان می دهد.
نمایش متن جایگزین
چگونه می توان برای یک عکس متن جایگزین انتخاب کرد. زمانیکه عکس داخل صفحه کامل بار نشده و یا زمانیکه کاربر علاقه ای به دیدن عکسهای صفحه ندارد، به کمک تعیین متن جایگزین، شرحی درباره ی عکس به کاربر داده می شود. به این مثال توجه کنید.
عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.
نقشه
این مثال، روش تقسیم یک عکس به نواحی مختلف(همانند یک نقشه) را نشان می دهد. هر یک از این نواحی، یک فراپیوند هستند.
نقشه (2)
در این مثال، باز هم عکس تبدیل به یک نقشه می شود. با این تفاوت که ما آدرس تک تک نقاط عکس را در اختیار داریم. در صورتی که اشاره گر را روی نقشه حرکت دهید، موقعیت آن روی میله وضعیت نمایش داده می شود.
برچسب های تصویر
| برچسب | توضیحات |
|---|
| <img> |
یک تصویر را معرفی می کند. |
| <map> |
یک تصویر نقشه را معرفی می کند |
| <area> |
داخل یک تصویر نقشه یک منطقه قابل کلیک را تعریف می کند |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
عکس های HTML ,
بازدید : 287
فرم ها و ورودی های HTML
فرم های HTML به منظور انتخاب انواع مختلف ورودی های کاربر استفاده می شوند.
مثالها
فیلد متنی
این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را در این فیلد بنویسد.
فیلد رمزعبور
گاهی نیاز است که مقداری که کاربر وارد می کند، دیده نشود. برای ایجاد چنین فیلد ورودی، از فیلد رمز عبور استفاده می کنیم. این مثال روش ساخت این فیلد را نشان می دهد.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
فرم ها
یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.
<form>
<input>
<input>
</form>
input
در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می شود.انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند.
فیلدهای متنی
فیلد متنی هنگامی استفاده می شود که شما می خواهید کاربر ، حروف ، اعداد و... را تایپ کند.
|
<form>
First name: <input type="text" name="firstname" >
<br>
Last name:
<input type="text" name="lastname" >
</form>
|
توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است.
دکمه های رادیویی
دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی انتخاب، یکی را انتخاب کند.
|
<form>
First name: <input type="radio" name="gender" value="male"> male
<br>
Last name:
<input type="radio" name="gender" value="female" > femail
</form> |
توجه کنید که فقط یک گزینه می تواند انتخاب شود.
چک باکس ها (check boxes)
چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی انتخاب ، یک یا چند گزینه را انتخاب کند.
|
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car" >
I have a car
</form> |
عنصر Action فرم و دکمه Submit
هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات ورودی دریافتی انجام می دهد.
<form name="input value" action="action1.asp">
username:
<input type="text" name="username">
<input type="submit" value="submit">
</form> |
|
اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد.آن صفحه به شما ورودی های دریافتی را نشان خواهد داد.
مثالهای بیشتر
چک باکس ها
روش ساخت فیلد چک باکس(انتخاب) در این مثال توضیح داده شده است. کاربر می تواند موارد مورد نظر خود را انتخاب کند.
دکمه رادیویی
دکمه های رادیویی مانند این مثال ساخته می شوند. از این دکمه ها برای انتخاب یک مورد از چند مورد استفاده می شود.
انتخاب کرکره ای ساده
این فیلد انتخابی، همانند دکمه رادیویی، برای انتخاب یک مورد از چند مورد، به کار می رود. با این تفاوت که فهرست عناصر بصورت کرکره، باز و بسته می شوند؛ و عنصر انتخابی فقط دیده می شود.
فیلد کرکره ای (2)
این مثال نیز فیلد کرکره ای را نمایش می دهد. با این تفاوت که برای این فیلد، یکی از مقادیر فهرست انتخابف به عنوان مقدار پیش فرض تعیین شده است.
ناحیه متنی
تفاوت این فیلد با فیلد متنی این است که در این فیلد، خطهای نا محدودی می توان وارد کرد. یک ورودی چند خطی. روش ساخت این فیلد در این مثال آمده است.
دکمه
این مثال روش ساخت دکمه را توضیح می دهد. نوشته روی دکمه را می توانید خودتان تعیین کنید.
مجموعه فیلدها
به کمک این سازه می توان حاشیه و عنوانی را برای یک یا چند فیلد ورودی تعیین کرد. این دسته بندی به کاربر کمک می کند که مجموعه اطلاعات مرتبط با هم را بهتر تشخیص دهد.
مثالهای فرم
فرم، فیلدهای ورودی و دکمه تایید(submit)
این مثال طریق اضافه کردن فرم و فیلدهای داخل آن را نشان می دهد. دکمه تایید محتوییات فرم را به آدرس action می فرستد.
فرم به همراه چک باکس
این مثال، فرمی به همراه فیلد چک باکس داخل آن تعریف می کند.
فرم به همراه دکمه های رادیویی
باز هم مثالی دیگر برای فرم. فرمی که در آن فیلد رادیویی وجود دارد.
ارسال نامه الکترونیکی به کمک فرم
در این مثال روش ارسال email به کمک فرم، نشان داده شده است. به موجودیت action فرم توجه کنید.
برچسب های فرم
| برچسب ها | توضیحات |
|---|
| <form> |
یک فرم برای ورودی کاربران معرفی می کند |
| <input> |
فیلد ورودی معرفی می کند |
| <textarea> |
یک ورودی متن چند خطی معرفی می کند |
| <label> |
یک برچسب برای ورودی ها معرفی می کند |
| <fieldset> |
یک مجموعه از فیلدها معرفی می کند |
| <legend> |
یک عنوان برای fieldset معرفی می کند |
| <select> |
یک لیست قابل انتخاب معرفی می کند |
| <optgroup> |
یک گروه از گزینه ها معرفی می کند |
| <option> |
یک گزینه در لیست باز شونده معرفی می کند |
| <button> |
یک دکمه را معرفی می کند |
| <isindex> |
توصیه می شود به جای آن از input استفاده کنید |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
فرم ها و ورودی های HTML ,
بازدید : 254
لیست های HTML
HTML از لیست های مرتب ، نامرتب و تعریفی پشتیبانی می کند.
مثالها
لیست بدون ترتیب
این مثال لیستی که در آن ترتیب اهمیت ندارد را نمایش می دهد.
لیست با ترتیب
در این مثال شما لیستی، دارای ترتیب می بینید.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
لیست های نامرتب یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک).یک لیست نامرتب با یک برچسب <ul> آغاز می شوند.هر کدام از اقلام لیست با برچسب <li> آغاز می شوند.
<ul>
<li> Cofee <ul>
<li> Milk <ul>
</ul> |
|
داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
لیست های مرتب یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام لیستبا برچسب <li> آغاز می شوند.
<ol>
<li> Cofee <ul>
<li> Milk <ul>
</ol> |
- Cofee
- Milk
|
داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
لیست های تعریفی یک لیست تعریفی ، لیستی از اقلام نیست. این لیست ، لیستی از عبارات و توضیحات آن عبارات است.یک لیست تعریفی با برچسب<dl> آغاز می شود.هر کدام از اقلام لیست تعریفی با برچسب <dt> آغاز می شود.هر تعریف در لیست تعریفی با برچسب <dd> آغاز می شود.
<dl>
<dt> Cofee </dt>
<dd> Black hot drink </dd>
<dt> Milk </dt>
<dd> White cold drink </dd>
</dl> |
- Cofee
- Black hot drink
- Milk
- White cold drink
|
داخل تعاریف یک لیست تعریفی (برچسب <dd>)شما می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید.
مثالهای بیشتر
نمایشهای گوناگون لیستهای مرتب
در این مثال صورتهای مختلف لیستهای مرتب را می بینید.
نمایشهای گوناگون لیستهای بدون ترتیب
این مثال نمایشهای مختلف لیستهای بدون ترتیب را نشان می دهد.
لیستهای تو در تو
چگونگی ساخت لیستهای تو در تو را در این مثال می بینید.
لیستهای تو در تو (2)
این مثال نیز گونه های دیگری از لیستهای تو در تو را نشان می دهد.
لیست تعریفی
این مثال روش ساخت لیست، که در آن مقدار و محتوای هر عنصر لیست تعریف می شوند را نشان می دهد.
برچسب Anchor
| برچسب ها | توضیحات |
|---|
| <ol> |
یک Anchor را معرفی می کند |
| <ul> |
یک Anchor را معرفی می کند |
| <li> |
یک Anchor را معرفی می کند |
| <dl> |
یک Anchor را معرفی می کند |
| <dt> |
یک Anchor را معرفی می کند |
| <dd> |
یک Anchor را معرفی می کند |
| <dir> |
یک Anchor را معرفی می کند |
| <menu> |
یک Anchor را معرفی می کند |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
لیست های HTML ,
بازدید : 295
جدول های HTML
به وسیله HTML شما می توانید جدول بسازید
مثالها
جدولها
این مثال به ما نشان می دهد که چگونه می توانیم یک جدول بکشیم.
حاشیه جدول
این مثال حاشیه های مختلف جدول را نشان می دهد.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
جدول ها
جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.
| row1,cel1 |
row1,cel2 |
| row2,cel1 |
row2,cel2 |
|
<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel1</td>
</tr>
</table> |
جدول ها و عنصر حاشیه
اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (border) استفاده کنید.
<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row2,cel1</td>
<td>row2,cel2</td>
</tr>
</table>
سر تیترها در جداول
سرتیترها در یک جدول با برچسب <th>مشخص می شوند.
|
| Another Heading | Heading |
|---|
| row1,cel2 |
row1,cel1 |
|
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
</table> |
سلول های خالی در جداول
سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.
| row1,cel2 |
row1,cel1 |
| |
row2,cel1 |
|
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td></td>
</tr>
</table> |
این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.
| row1,cel2 |
row1,cel1 |
| |
row2,cel1 |
|
<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td> </td>
</tr>
</table> |
نکته های پایه ای-اطلاعات مفید
عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.
مثالهای بیشتر
جدول بدون حاشیه
در این مثال یک جدول بدون حاشیه را می بینید.
سرتیترهای جدول
چگونگی نمایش سرتیترها را در جدول می بینید.
سلول خالی
این مثال طریق استفاده از " "، برای نمایش صحیح سلولهای خالی را نشان می دهد.
عنوان جدول
این مثال چگونگی عنوان دار کردن جدول را نشان می دهد.
توسعه سلول جدول به بیش از یک سطر یا ستون
در این مثال چگونگی ساخت سلولی که بیش از یک ستون یا سطر را می پوشاند را می بینید.
جدول در جدول
برای ساخت جدولی، درون یک جدول دیگر، به این مثال توجه کنید.
حاشیه خالی سلول
در این مثال، روش قرار دادن حاشیه خالی بین محتوای سلول و حاشیه ان را می آموزیم.
فاصله سلولها
برای تعیین فاصله بین سلولها به این مثال توجه کنید.
زمینه جدول
برای زمینه جدول می توان یک رنگ و یا یک عکس را انتخاب کرد. به این مثال توجه کنید.
زمینه برای یک سلول
همانند مثال قبل است با این تفاوت که این بار زمینه فقط برای یک سلول انتخاب می شود.
محل نمایش محتوای یک سلول
با استفاده از موجودیت "align"، می توان محل نمایش محتوای یک سلول را تعیین کرد. برای این منظور به این مثال توجه کنید.
تعین قاب دور جدول
به کمک موجودیت "frame"، میتوان نوع قاب دور جدول را تعیین کرد. نگاه کنید.
برچسب های جدول
| برچسب ها | توضیحات |
|---|
| <table> |
یک جدول معرفی می کند |
| <th> |
سرتیتر جدول معرفی می کند |
| <tr> |
یک سطر جدول معرفی می کند |
| <td> |
یک سلول جدول معرفی می کند |
| <caption> |
عنوان جدول معرفی می کند |
| <colgroup> |
یک گروه از ستون ها معرفی می کند |
| <col> |
یک مقدار موجودیت برای یک یا چند ستون معرفی می کند |
| <thead> |
سر یک جدول را معرفی می کند |
| <tbody> |
بدنه یک جدول را معرفی می کند |
| <tfoot> |
پاورقی جدول را معرفی می کند |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
جدول های HTML ,
بازدید : 209
قاب های HTML
به وسیله قابها شما می توانید بیش از یک صفحه وب را در یک پنجره مرورگر نشان دهید.
مثالها
قابهای عمودی
دراین مثال شما سه قاب عمودی با محتوای مختلف، می بینید.
قابهای افقی
این مثال، قابهای افقی را نمایش می دهد.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
قابها
هر پرونده HTML یک قاب نامیده می شود ، و هر قاب نیز مستقل از دیگر قاب هاست. بدی استفاده از قاب ها این است که :
- توسعه دهنده وب باید پیوسته رد بیشتر پرونده های HTML را داشته باشد.
- چاپ کردن کل صفحه مشکل است
برچسب Frameset
- برچسب <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
- هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.
برچسب Frame
- برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.
در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است. پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.
<frameset cols="25%,75%">
<frame src="frame_a.html">
<frame src="frame_b.html">
</frameset>
نکات پایه ای-اطلاعات مفید
اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.
مثالهای بیشتر
برچسب noframes
در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این برچسب، می توان نمایش مناسبی را ارایه کرد.
قابهای پیچیده(ترکیبی از قابهای عمودی و افقی)
این مثال، صفحه ای که در آن قبهای عمودی و افقی، با هم وجود دارند را نشان می دهد.
قابی با موجودیت noresize="noresize"
با کنترل این موجودیت، از تغییر اندازه قابها می توان جلوگیری کرد.
قاب محتوا
این مثال روش ساخت یک قاب محتوایی را نشان می دهد. صفحه از دو قاب اصلی ساخته شده که یکی ازآنها، فهرست و دیگری محتوای سرفصل انتخابی را نمایش می دهند. در قاب فهرست، سه فراپیوند به صورت زیر تعریف شده که موجودیت traget هر فرا پیوند به نام قاب محتوا اشاره می کند.
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
قاب محتوا، محتوای هر یک از این فراپیوندها را نمایش می دهد.
قاب درجا
این مثال روش استفاده از قابهای درجا را نشان می دهد(این قابها را می توان به طور مستقیم، داخل html استفاده کرد و دیگر نیازی به قاب بندی کل صفحه نیست).
پرش به قسمت خاصی در داخل یک قاب
به کمک این روش می توان به قسمتی از محتوای قاب، در هنگام نمایش پرش کرد. برای این منظور پس از آدرس محتوای قاب، فراپیوند محل مورد نظر را قرار می دهیم. به مثال توجه کنید.
پرش به محل خاص در صفحه دارای قاب محتوا
این مثال ترکیبی از مثال "قاب محتوا" و مثال "پرش" است.
برچسب های قاب
| برچسب ها | توضیحات |
|---|
| <frameset> |
یک مجموعه از قاب ها را معرفی می کند |
| <frame> |
یک زیر پنجره (قاب) را معرفی می کند |
| <noframes> |
برای مرورگر هایی که قاب ها را پشتیبانی نمی کنند ، بخش بدون قاب را معرفی می کند. |
| <iframe> |
یک زیر پنجره درون برنامه ای را معرفی می کند. |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
برچسب ها :
قاب های HTML ,
بازدید : 290
HTML برای پیوند به پرونده های دیگر در وب از فرا پیوندها استفاده می کند.
مثالها
ایجاد فراپیوند
این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.
عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
برچسب Anchor و موجودیت Href
HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor
<a href="url"> متنی که نمایش داده می شود </a>
در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.
این Anchor یک پیوند به html.ir را معرفی می کند:
<a href="http://www.html.ir"> html.ir را ملاقات کنید </a>
خط بالا شبیه این نشان داده خواهد شد :
html.ir را ملاقات کنید
موجودیت Target
با موجودیت هدف شما می توانید معرفی کنید که پرونده های پیوند داده شده کجا باز شوند. خط زیر پرونده ای را در یک پنجره مرورگر جدید باز خواهد کرد.
<a href="http://www.html.ir/" target="_blank"> html.ir را ملاقات کنید </a>
برچسب Anchor و موجودیت نام
موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. هنگامی که ما از یک Anchor نام دار استفاده می کنیم، می توانیم پیوندهایی بسازیم که مستقیما بتواندبه یک بخش خاص در صفحه برود. در ست به جای آنکه بگذاریم کاربر در صفحه بگردد. در پایین طریقه نوشتن یک Anchor نام دار آمده است.
<a name="lable">متنی که نوشته می شود</a>
از موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. نام یک Anchor می تواند هر متنی که شما بخواهید باشد.خط زیر یک Anchor نام دار را معرفی می کند.
<a name="tips"> بخش اطلاعات مفید </a>
شما باید توجه کنید که یک Anchor نام دار، در یک حالت خاص نشان داده نمی شود. برای پیوند مستقیم به بخش "Tips" یک علامت "#" و نام آن Anchor را به انتهای آن url اضافه کنید:
<a href="http://www.html.ir/links.html#Tips"> پرش به بخش اطلاعات مفید </a>
یک فرا پیوند به بخش نکات مفید از میان فایل "Links.html" شبیه به این خواهد بود
<a href="#Tips"> پرش به بخش نکات مفید </a>
نکات پایه ای - اطلاعات مفید
همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید
href="http://www.html.ir/links.html"
شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:
href="http://www.html.ir/links.html/"
از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ خطایی اتفاق نمی افتد.
مثالهای بیشتر
ارجاع به فراپیوند، در پنجره جدید
در این مثال، روش ساخت فراپیوندی نشان داده می شود، که در آن، کاربر پس از کلیک روی فراپیوند، صفحه فعلی را از دست نداده و پنجره جدیدی برای نمایش صفحه پیوندی، برای او، باز می شود. P>پیوند به محلی در همین متن
فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ فراپیندهای این مثال، چگونگی این کار را نشان می دهند.
شکستن حصار قاب
اگر صفحه شما، داخل یک قاب نمایش داده می شود، فرا پیوندهای آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.
فراپیوند Email
در صورتیکه آدرس فراپیوند شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.
فراپیوند Email (نوعی دیگر)
در این مثال نمونه دیگری از فراپیوند نوع mailto را می بینید.
برچسب Anchor
| برچسب ها | توضیحات |
|---|
| <a> |
یک Anchor را معرفی می کند |
درباره :
مطالب مفید فرهنگی ، هنری ، اینترنتی و ... ,
آموزش ,
بازدید : 260
|
|
