گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.
مثال:
در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML embed Tag <title>
<head>
<body>
<embed src="/html/yourfile.mid"` width="100%" height="60">
<noembed><img src="yourimage.gif" alt="Alternative Media"><noembed>
<embed>
<body>
<html>
در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.
می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML embed Tag<title>
<head>
<body>
<embed src="/html/yourfile.swf" width="200" height="200">
<noembed><img src="yourimage.gif" alt="Alternative Media"><noembed>
<embed>
<body>
<html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML embed Tag<title>
<head>
<body>
<bgsound src="/html/yourfile.mid">
<noembed><img src="yourimage.gif"><noembed>
<bgsound>
<body>
<html>
این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند.
اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه گذاری جهانی برای موسیقی.
HTML 4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر، تعیین کند.
در اینجا چند مثال در این رابطه می بینید.
مثال:
شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.
<object data="data/test.htm" type="text/html" width="300" height="200">
alt : <a href="data/test.htm">test.htm<a>
</object>
در اینجا اگر مرورگر برچسب object را پشتیبانی نکند، ویژگی alt وارد تصویر می شود.
مثال:
شما می توانید یک سند PDF را در یک سند HTML اجرا کنید.
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
alt : <a href="data/test.pdf">test.htm<a>
</object>
مثال:
شما می توانید با استفاده از برچسب < param> برخی پارامترهای متناسب با سند را مشخص کنید. در اینجا مثالی از اجرای فایل wavرا می بینید.
<object data="data/test.wav" type="audio/x-wav" width="200" height="20">
<param name="src" value="data/test.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="data/test.wav">test.wav<a>
</object>
مثال:
شما می توانید یک سند flash مانند زیر اجرا کنید.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="penguin"
codebase="someplace/swflash.cab" width="200" height="300">
<param name="movie" value="flash/penguin.swf" />
<param name="quality" value="high" />
<img src="penguin.jpg" width="200" height="300" alt="Penguin" />
</object>
مثال:
شما می توانید یک سند java applet وارد سند HTML کنید.
<object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width="200" height="200">
<param name="code" value="applet.class">
</object>
ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.
برای مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید.
وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form> مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد
< form action="Script URL" method="GET|POST"> form elements like input, textarea etc.< /form>علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید .
انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم HTML از آنها استفاده کنید.
سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند .
این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input> مربوط به HTML ایجاد می شوند.
مثال:
در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.
این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input> مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.
در اینجا مثالی از ورودی تک خطی پسوورد می بینید که برای گرفتن پسورد کاربر استفاده می شود.
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.
زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea> ایجاد میشوند.
مثال:
در اینجا مثالی را می بینید از یک ورودی متن چند خطی که برای ارائه ی توصیفات آیتم استفاده می شود.
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
در زیر لیستی از ویژگی های برچسب < textarea> ارائه شده اند.
چک باکس ها زمانی استفاده می شوند که بیشتر از یک گزینه قرار است انتخاب شود. آنها نیزبا استفاده از برچسب < input>ایجاد می شوند، اما نوع ویژگی به checkbox تنظیم می شود.
در اینجا مثالی از کد HTML را مشاهده می کنید برای یک فرم با دو چک باکس.
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
در زیر لیستی از ویژگی های برچسب < checkbox> را می بینید:
دکمه های رادیو زمانی استفاده میشوند که بین چندین گزینه تنها یک گزینه باید انتخاب شود. این کنترل ها نیز با برچسب < input> ایجاد میشوند، اما نوع ویژگی با radio تنظیم می شود.
در اینجا مثالی از کد HTML می بینید برای یک فرم با دو دکمه ی رادیو.
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="radio" name="maths" value="on"> Maths
<input type="radio" name="physics" value="on"> Physics
</form>
</body>
</html>
در زیر لیستی از ویژگی های دکمه ی رادیو را می بینید.
یک Select Boxکه منوی رو به پایین نیز نامیده می شود، گزینه ای را برای ارائه ی گزینه های مختلف به شکل یک لیست رو به پایین ارائه می دهد، که کاربر می تواند از آن یک یا بیشتر از یک گزینه را انتخاب کند.
در اینجا مثالی از کد HTML برای یک فرم با یک جعبه ی رو به پایین می بینید.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>
در زیر لیستی از ویژگی های برچسب < select> را می بینید.
در زیر لیستی از ویژگی های مهم برچسب < option> ارائه شده است.
اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند، به یک کنترل فایل آپلود احتیاج خواهید داشت، که Select Boxنیز نامیده می شود. این ویژگی با استفاده از برچسب < input> نیز ایجاد می شود، اما نوع ویژگی با file تنظیم می شود.
در اینجا مثالی را می بینید از کد HTML برای یک فرم با یک فایل آپلود باکس.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
در زیر لیستی از ویژگی های فایل آپلود باکس را می بینید.
راه های مختلفی برای ایجاد دکمه های قابل کلیک شدن وجود دارد. شما با استفاده از برچسب < input> و با تنظیم نوع ویژگی آن به button دکمه های قابل کلیک شدن ایجاد کنید. نوع ویژگی می تواند مقادیر زیر را بگیرد.
در اینجا مثالی از کد HTML برای یک فرم با سه نوع دکمه را می بینید.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>
کنترل های مخفی شده فرم برای پنهان کردن داده در داخل صفحه ای استفاده می شوند که بعدا می توانند به سرور ارسال شوند. این کنترل در داخل کد مخفی شده و روی صفحه ی حقیقی ظاهر نمی شود. برای مثال فرم مخفی شده ی زیر برای حفظ شماره ی صفحه ی جاری استفاده می شود. وقتی که کاربر روی next page کلیک کند، مقدار کنترل مخفی شده به سرور وب ارسال شده و در آنجا تصمیم خواهد گرفت که بر اساس انتقال صفحه ی جاری، کدام صفحه نمایش داده خواهد شد.
در اینجا مثالی از کد HTML برای نمایش کاربرد کنترل مخفی شده می بینید.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
آموزش طراحی سایت - رنگ در html
رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.
رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.
در زیر سه روش متفاوت برای تنظیم رنگ در صفحه ی وب خود مشاهده می کنید:
اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.
می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.
در اینجا نام 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>
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>
مقدار این رنگ با استفاده از ویژگی 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 دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.
اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.
ویژگی 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>
تاکنون مشاهده کردیم که چگونه با استفاده از متن، یک لینک هایپرتکست ایجاد کنیم و همچنین فرا گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون فرا خواهیم گرفت که چگونه با استفاده از تصاویر هایپرلینک ایجاد کنیم.
مثال:
استفاده از تصویر به عنوان هایپرلینک بسیار ساده می باشد. لازم است که یک تصویر را در داخل هایپرلینک در محل تصویر قرار دهیم، همانطور که در زیر نشان داده شده است.
<!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 یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.
در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی 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 را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.
این تصاویر به وسیله ی ویژگی 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 مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های نختلف استفاده کنید.