آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100رنگ در html
آموزش طراحی سایت - رنگ در html
رنگهای HTML
رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.
- bgcolor رنگی را برای زمینه ی صفحه تنظیم می کند.
- text رنگی را برای متن تنظیم می کند.
- alink رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.
- link رنگی را برای متن لینک شده تنظیم می کند.
رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.
روش های کدگذاری رنگ HTML
در زیر سه روش متفاوت برای تنظیم رنگ در صفحه ی وب خود مشاهده می کنید:
- Color names - می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.
- Hex codes - یک کد شش رقمی که نشان دهنده ی مقدار آبی، قرمز و سبز سازنده ی رنگ، می باشد.
- Color decimal or percentage values- این مقدار با استفاده از ویژگی rgb( ) تعیین می شود.
اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.
رنگ های HTML – نام رنگ
می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.
16 رنگ استاندارد W3C
در اینجا نام 16 رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
مثال:
در اینجا مثال هایی را میبینید از تنظیم زمینه ی یک برچسب HTML به وسیله ی نام رنگ.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text="blue" bgcolor="green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor="black">
<tr>
<td>
<font color="white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
رنگ های HTML – کدهای Hex
آموزش html css
color | Color HEX |
| #000000 |
| #FF0000 |
| #00FF00 |
| #0000FF |
| #FFFF00 |
| #00FFFF |
| #FF00FF |
| #C0C0C0 |
| #FFFFFF |
در زیر مثال هایی را می بینیند از تنظیم زمینه ی یک برچسب HTML به وسیله ی کد رنگ در هگزادسیمال.
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text="#0000FF" bgcolor="#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor="#000000">
<tr>
<td>
<font color="#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
رنگ های HTML – مقادیر RGB
مقدار این رنگ با استفاده از ویژگی rgb( ) مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین 0 و 255 یا یک درصد باشد.
همه ی مرورگرها ویژگی ( )rgb را پشتیبانی نمی کنند، بنابراین توصیه می شود از آن استفاده نکنید.
در زیر لیستی از رنگ ها با مقادیر RGB را مشاهده می کنید.
در اینجا مثال هایی را مشاهده می کنید از تنظیم زمینه ی یک برچسب HTML به وسیله ی برچسب rgb() با کد رنگ.
نمونه سه
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor="rgb(0,0,0)">
<tr>
<td>
<font color="rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>
در زیر لیستی از 216 رنگ را مشاهده می کنید که تصور می شود سالم ترین و مستقل ترین رنگ های کامپیوتر باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF متفاوت می باشند و توسط همه ی کامپیوترهای دارای پالت رنگ 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 | FFFFF |
پس زمینه در html
پس زمینه در html
background در html
به طور پیش فرض رنگ زمینه ی صفحه ی وب شما سفید می باشد. ممکن است این زمینه را دوست نداشته باشید، اما نگرانی وجود ندارد. HTML دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.
- زمینه ی HTML با رنگ ها.
- زمینه ی HTML با تصاویر.
اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.
زمینه ی HTML با رنگها
ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.
< tagname bgcolor="color_value" ...>
این color- value می تواند به هرکدام از فرمت های زیر ارائه شود
<!-- Format 1 - Use color name -->< table bgcolor="lime">
<!-- Format 2 - Use hex value -->< table bgcolor="#f1f1f1"><!-- Format 3 - Use color value in RGB terms -->< table bgcolor="rgb(0,0,120)">
مثال:
در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor="yellow" width="100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor="#6666FF" width="100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor="rgb(255,0,255)" width="100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>
زمینه ی HTML با تصاویر
آموزش html css
ویژگی background همچنین می تواند برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه های جدول، استفاده شود. شما می توانید یک تصویر را به عنوان زمینه ی صفحه و یا جدول HTML خود استفاده کنید. در زیر ترکیب استفاده از ویژگی background را با هر عنصر HTML می بینید.
توجه:
ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.
< tagname background="Image URL" ...>
متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.
مثال:
در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">
<tr>
<td>
This background is filled up with HTML image.
</td>
</tr>
</table>
</body>
</html>
زمینه های طرح دار و شفاف
شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.
مثال:
در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.
نمونه سه
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattrern -->
<table background="/images/pattern1.jpg" width="20%" height="100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattrern -->
<table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>
آموزش Iframes در html
آموزش طراحی سایت - آموزش Iframes در html
آموزش Iframes
شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.
در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.
نمونه یک
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>
ویژگی های برچسب < iframe>
بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.
آموزش قابها در html
آموزش طراحی سایت - آموزش قابها در html
قاب های HTML
قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.
نقطه ضعف های چارچوب ها:
در استفاده از چارچوب ها نقاط ضعفی وجود دارد، بنابراین هرگز توصیه نمی شود در صفحات وب خود از این چارچوب ها استفاده کنید.
برخی دستگاه های کوچکتر نمی توانند این چارچوب ها را در خود داشته باشند، زیرا صفحه آنها آنقدر بزرگ نیست که تقسیم شود.
گاهی اوقات صفحه ی شما در یک کامپیوتر متفاوت به خاطر وضوح تصویر متفاوت، طور دیگری نمایش داده می شود.
ممکن است دکمه ی بازگشت مرورگر آنطوری که کاربر انتظار دارد کار نکند.
هنوز مرورگرهایی هستند که فن آوری چارچوب را پشتیبانی نمی کنند.
ایجاد چارچوب ها:
برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.
مثال:
در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.
نمونه یک
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Frames</title>
</head>
<frameset rows="25%,50%,25%">
<frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
<frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
<frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
ویژگی های برچسب < frameset>:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.
ویژگی های برچسب < frame>
مرورگرهایی که frame ها را پشتیبانی می کنند
اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.
نام frame و ویژگی های target
یکی از محبوب ترین موارد استفاده از frame قرار دادن نوارهای مسیریابی در یک frame و سپس بارگذاری صفحات اصلی در یک frame مجزا می باشد.
مثال:
اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:
نمونه دو
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
<frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
<frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.
نمونه سه
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
</body>
</html>
در زیر محتوای فایل main.htm را مشاهده می کنید.
نمونه چهار
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:
آموزش لینک های عکس در html
آموزش طراحی سایت - آموزش لینک های عکس در html
آموزش Image Link
تاکنون مشاهده کردیم که چگونه با استفاده از متن، یک لینک هایپرتکست ایجاد کنیم و همچنین فرا گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون فرا خواهیم گرفت که چگونه با استفاده از تصاویر هایپرلینک ایجاد کنیم.
مثال:
استفاده از تصویر به عنوان هایپرلینک بسیار ساده می باشد. لازم است که یک تصویر را در داخل هایپرلینک در محل تصویر قرار دهیم، همانطور که در زیر نشان داده شده است.
نمونه یک
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tahlildadeh.com" target="_self">
<img src="http://tahlildadeh.com/banner/012.jpg" alt="tahlildadeh" border="0" />
</a>
</body>
</html>
این ساده ترین راه ایجاد هایپرلینک با استفاده از تصاویر می باشد.
تصاویر حساس به ماوس
استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.
- Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.
- Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.
Server side image maps
آموزش html css
در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.
نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://tahlildadeh.com/Temp/Html/Exp1.html" target="_self">
<img ismap src="http://tahlildadeh.com/Temp/Html/logo.png" alt="tahlildadeh" border="0" />
</a>
</body>
</html>
سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.
/cgi-bin/ismap.cgi?20,30
از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.
شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.
Client side image maps
این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.
نمونه سه
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<img src="http://tahlildadeh.com/banner/012.jpg" width="250" height="150" alt="Tahlildadeh" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,40,126" href="http://tahlildadeh.com/banner/02.jpg">
<area shape="circle" coords="90,58,20" href="http://tahlildadeh.com/banner/04.jpg">
<area shape="circle" coords="124,78,20" href="http://tahlildadeh.com/banner/05.jpg">
</map>
</body>
</html>
سیستم مختصات
مقدار حقیقی مختصات کانلا به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند.
rect = x1 , y1 , x2 , y2
x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.
circle = xc , yc , radius
xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.
poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn
جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های نختلف استفاده کنید.