Html learning1

eliza · 2010 , August 17

آموزش اچ تي ام ال - Html learning (برنامه نويسي تحت وب)
در این قسمت شما را با زبان html -hyper text markup language به صورت کاملا ساده و گیرا آشنا می کنم ، تا به راحتی قادر باشید تغییرات مورد نظر خود را در قالبهای وبلاگ و همچنین انواع کدها انجام دهید ، یادتان باشد زبان اچ تی ام ال یک زبان برنامه نویسی نیست بلکه یک زبان واسط است که اگر شما بخواهید یک حرفه ای در زمینه طراحی وب گردید حتما باید آن را فراگیرید ، امیدوارم مطالب درج شده در این قسمت شما را در طراحی وب یاری نماید.

درس اول (شناختن دستورات کلی)
در صفحات اینترنتی هر صفحه از اجزایی تشکلی شده است ولی مهمترین پارامترهایی که باید باشند عبارتند از:
<html>
<head>
<body>

پارامتر

<html>

که این دستورات بصورت :

<

html> در شروع دستور و <html/> در پایان دستر مورد استفاده قرار میگرند. کلا تمامی دستورات در HTML با <> شروع و با </>به پایان می رسند.

پارامتر

<head>

دستور <

html> در شروع صفحه باید باشد و زمانی که کلیه دستورات تمام شد باید آن را ببندیم یعنی دستور <html/>

بعد آن دستور

<head> می باشد که مهمترین صفت هر صفحه در نتایج موتورهای جستجو می باشد. حتما شما هم تا به حال جستجویی در گوگل انجام داده اید اگر دقت کرده باشید بیشتر نتایج که در گوگل لیست می گردند همان عنوان صفحه ایست که بعد از مراجعه به آن سایت در بالای پنجره می بینیم. پس ما باید حتما به صفحه اینترنتی خود عنوانی را اختصاص دهیم.

مثال:<

head>test<head/> در این مثال صفحه ما عنوان test را به خود می گیرد.

البته دستورات دیگری هم در این قسمت وجود دارند که من به مهمترین آنها اشاره می کنم :

کدهای متا : این دستورات برای شناسایی بعضی مشخصات سایت شما به موتورهای جستجوگر به کار می رود مثل کشور ، زبان ، نویسنده و قانون کپی رایت سایت و ....

با استفاده از دستور

info:eliza.com می توانید توضیح (Description) سایت خود را ملاحظه نمایید.(در این جا به جای eliza.com آدرس سایت و یا وبلاگ خود را تایپ نمایید.)

این ها نکاتی هستند که متاسفانه در هیچ کتاب و یا سایتی وجود ندارند ، پس بهتر است شما اینها را خوب یاد بگیرید.

پارامتر <Body>

در این پارامتر سگمنت اصلی صفحه مشخص می شود ، که محتوای صفحه را در بر دارد صفحات مشخصه آن عبارت است از:

Background

: تصویری که پشت متن (پس زمینه) به نمایش در می آید.

BgColor

: رنگی که در پشت زمینه به نمایش در می آید.

(صفت هایی که در زیل آمده اند را می توان به عنوان

Style کلی در صفحات و یا فایل CSS برای کنترل بیشتر ایجاد کرد.)

توضیح :

CSS فایلی می باشد که با قید دستوری در صفحات می توان نوع فونت ، رنگ را در تمامی صفحات تغییر داد. با ویرایش این فایل می توان به راحتی یک ویژگی مثلا رنگ لینک ها را به تمامی صفحات اعمال کرد.

Text

: رنگ متن

Link

: رنگ پیوند های بازدید نشده

Alink

: رنگ پیوند های فعال
Vlink:رنگ پیوند های بازدید شده

دستورات کلی:

<P>

نشان یک پاراگراف است و می تواند دستوراتی همچون align یعنی موقعیت متن را به خود بگیرد ، حتما شما با برنامه Word کار کرده اید در این برنامه می توان وضعیت متون را مشخص نمود.(راست چین - وسط چین - چپ چین)

در این جا هم همانند برنامه ورد می توانید این کار را براحتی توسط نرم افزار فرونت پیج انجام دهید

مثال: کلمه TEST را در یک پاراگراف در وسط صفحه قرار گیرد؟

<p align="center">TEST</p>

به جای

P می توانیم از دستور DIV هم استفاده کنیم .(فرق این دستور با P این است که P بیشتر برای ایجاد پاراگراف جدید برای متون و DIV برای تقسیم بندی متن به همراه تصویر کاربرد دارد)

همین مثال با دستور

DIV:

<Div align="center">TEST</Div>

دستور BR: این دستور یک خط جدید ایجاد می کند.(توجه: این دستور جزو دستوراتی است که نیاز به تگ بسته ندارد و تکی استفاده می گردد)

اندازه های متون :

از جمله دستوراتی که کاربرد کمتری نسبت به بقیه دستورات هست دستورات مربوط به دسته بندی اندازه متون می باشد.

<H1>

تا <H6> این دستور در برنامه ورد هم وجود دارد استفاده آن برای متون باعث نمایش دادن متون در همان ادازه تعریف شده می باشد.

مثال:کلمه Book را بصورت سربرگ بزرگ نمایش دهید؟

پاسخ:

<H1>Book</H1>

دستور

Font:

این دستور باعث سفارشی کردن نوع متون ، رنگ اندازه می گردد.

توجه: بهتر است برای متون یک

Style تعریف گردد تا اینکه برای هر متن ما بخواهیم به طور مجزا تمامی پارامترها را تعریف کنیم ، این کار باعث حجیم شدن صفحات و استاندارد نبودن آنها می شود.

مثال: کلمه

Eliza را با فونت Tahoma ، اندازه 2 و رنگ سرمه ای بر روی صفحه ایجاد کنید.

پاسخ:

<fontColor="#000080" face="Tahoma" size="2">Eliza</font>

eliza · 2010 , August 17

Html learning2

درس دوم (استفاده از دستورات برای اسکریپت نویسی)

به دلیل زیاد بودن دستورات و تنوع کاربرد آنها من سعی کردم دستوراتی که برای ساخت و ویرایش یک وب سایت ساده لازم است را به شما آموزش دهم تا بیش تر به دردتان بخورد.

چگونگی ایجاد یک فرامتن در صفحات وب(Hyper link):

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

<a href="http://Eliza.com/" title="Eliza">Eliza</a>

در این دستور پارامتر
<a href برای ساخت فرامتن و همچنین title برای ایجاد یک متن بصورت توضیح Tooltip برای فرامتن می باشد. آدرس صفحه مقصد که قرار است زمانی که کاربر کلیک کرد وارد آن شود هم مابین href="" قرار می گیرد. متن مورد نظر هم که قرار ایت بصورت فرامتن درآید مابین درستورات قرار می گیرد.

با اجرای دستور بالا این کد بصورت زیر نمایش داده می شود.

چگونگی قرار دادن تصویر در یک وب سایت :

چگونه میتوان یک عکس را در وبلاگ و یا وبسایت خود قرار دهیم ؟

پاسخ : این کار به راحتی با افزودن یک دستور ساده امکان پذیر می باشد.

<img src="http://eliza.com/FileName.jpg" border="0" height="100" width="400">
که در این دستور src فایل را مشخص می کند ، توجه کنید که این آدرس همان آدرس فایل آپلود شده در اینترنتی باید باشد وگرنه بصورت یک ضربدر نشان داده خواهد شد. پارامتر border هم بهتر است صفر باشد تا حاشیه آبی رنگ دور عکس نمایش داده نشود. دستورات height و width هم برای ارتفاع و پهنای عکس برای نمایش دادن می باشد که به دلخواه قابل تغییر است.

eliza · 2010 , August 17

Html learning3

نحوه ساختن جدولها (tables)

تگ جدول
جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد که از اين عنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول <table></table> ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ <td></td> استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت ميباشد:

<table>
<tr><td>this is a table.</td></tr>
</table>

هر چه تگهاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم داشت. مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول داراي يک خانه ميباشد. يکي از ويژگيهاي جدول که محبوبيت آنرا زياد ميکند اينست که هر خانه از آن ميتواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته اندازه هاي هر خانه هم ميتواند متفاوت باشد.
<A name=border>border
خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن<A style="TEXT-DECORATION: none" href="color.htm" target=_blank> رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعيين ميشود. border ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" " را به تگ <table> اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.
rule
ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:

<A href="examples/table.htm" target=_blank>مثال
حالا خصوصيت rules=" "را به تگ<table> اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد. مثال
Alignment
ميتوانيد با استفاده از خصوصيت align=" "که در تگ <td>مينويسيد محل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center, justify مقداردهي کنيد. <A href="examples/tablealign.htm" target=_blank>مثال
height, width
با خصوصيات height=" " , width=" " هم اندازه طول و عرض يک جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال ميکند. <A href="examples/tablesize.htm" target=_blank>مثال
bgcolor
براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي <tr> و <td> هم مي توانيد بکار بريد. <A href="examples/tablebgcolor.htm" target=_blank>مثال
cellspacing, cellpadding
تگ <table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود. <A href="examples/tablespacing.htm" target=_blank>مثال
header: <th></th>
حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود. <A href="examples/tableheader.htm" target=_blank>مثال
colspan, rowspan
گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد.<A href="examples/tablespan.htm" target=_blank>مثال
caption
بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ <caption></caption> در ميان تگهاي <table></table> مشخص ميکنند. اين تگ داراي خصوصيت align=" " ميباشد با کلمات top, bottom, left, center, right مقداردهي ميشود.<A href="examples/tablecaption.htm" target=_blank>مثال
thead, tbody, tfoot
اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد.<A href="examples/tablerowgroup.htm" target=_blank>مثال
colgroup
همچنين با تگ <colgroup></colgroup> ميتوانيد خصوصيات کليه ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد. <A href="examples/tablecolgroup.htm" target=_blank>مثال
summery
يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد.
به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته ميشود.

eliza · 2010 , August 17

Html learning4

صدا و تصوير در وب

با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.
اهميت حجم فايل صوتي
فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي باشند که بايد در انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين صفحه وب کند تر و خسته کننده تر خواهد شد.
<A name=MIME>MIME
هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن نمي باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد براي پخش آن فايل صدا بزنند که اين اطلاعات را MIME مي گويند.
MIME مخفف Multipurpose Internet Mail Extensions است.
زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.
<A name=format>فرمتهاي فايلهاي صوتي
WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .
AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .
AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .
MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.
<A name=bg>افزودن فايل صوتي به زمينه صفحه
با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.

<A name=link>افزودن فايل صوتي بصورت لينک
يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.

<a href=”musics/mysong.wav”> music file </a>

<A href="examples/sound01.htm" target=_blank>مثال
افزودن فايل صوتي از طريق object
يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.

<A href="examples/sound02.htm" target=_blank>مثال
نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.
Embed file
تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.

<A href="examples/embed.htm" target=_blank>مثال
Streaming Audio
احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.

eliza · 2010 , August 17

HTML LEARNING5(ساخت نقشه تصويری ( image map ))

ساخت نقشه تصويری ( image map )

Image map يکي از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به کمک ما ميايد. بطور مثال ما نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده سايت هرگاه روي يک استان کليک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختيار کاربر قرار دهد. اين حالت حجم عکس را افزايش نخواهد داد و بهتر است از عکسهايي با حجم بالا استفاده نکنيم که در اين مورد به قسمت عکسها رجوع کنيد.
خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.

به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name="map01"> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيتname=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:
Shape=" " مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect" قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly" قرار ميدهيم.
Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محور x, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.

Coords="10,10,65,65"

همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
href=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.

خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.

فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره برداريد.

Html learning1

eliza

متخصص بخش

eliza

متخصص بخش

eliza

متخصص بخش

eliza

متخصص بخش

eliza

متخصص بخش