کارگاه آموزشی طراحی صفحات وب

وب WWW چیست؟
امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي را مشاهده مي کنيد که اين آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي را در اختيار شما قرار دهند.بيشتر اين آدرس ها با www آغاز شده که مخفف سه کلمه World Wide Web مي باشد. وب قسمتي از دنياي اينترنت است که شامل متن، عکس و تصوير يا حتي صدا مي باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر حرکت مي دهند. همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:
ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها ISP مي گويند.ISP مخفف Internet Service Providers است. سپس شما براي مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب Web browser داريد مانند: Internet explorer, Netscape Navigator, Opera, Mozilla تا کدهاي متني اين صفحات را ترجمه کرده و به صورت يک سري اطلاعات قابل فهم براي ما نمايش دهند. داخل اين مرورگرها کادري(Address bar) است که شما مي توانيد آدرس هاي اينترنتي را وارد کرده و پس از فشار دادن دکمه Enter برروي کيبورد منتظر نمايش يک وب سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه http درجلوي آدرس وارد شده اضافه مي گردد که مخفف HyperText Transport Protocol ميباشد، اين کلمه به مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد براي نمايش صفحه استفاده کند، چون پروتکلهاي مختلفي هست مانند: FTP که مخفف File Transfer Protocol .، نام فني آدرسهاي اينترنتي URL مي باشد که اين اصطلاح مخفف سه کلمه Universal Resource Locator است.
HTML چيست؟
زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان HyperText Markup Language يا همان HTML مي باشد.
: Hyperمتضاد نوشته هاي خطي( Linear ) است ، اگر شما با زبانهاي برنامه نويسي کامپيوتر آشنايي داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد و تا يک خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه اجرا شود ولي HTML اينطوري نيست و الگوي خطي ندارد شما هر کدي را مي توانيد هر جا که بخواهيد بنويسيد.
Text : به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود
Markup: عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد ولي جور ديگري نمايش داده مي شود.
Language : زبان
عناصر تشکيل دهندهHTML
براي شروع کدنويسي در HTML 4.01 اولين چيزي که بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است :

حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،
<! DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

حالت دوم براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند،
<! DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

و حالت سوم هم براي استفاده عنصر فريم Frame در صفحه است،
<! DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
فراموش نکنيد که نوشتن يکي از آنها اجباري است.
HTMLزبان وب ميباشد که داراي عناصر( elements ) گوناگوني است که بر روي هم تشکيل يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:
( texts & lists ) متنها و ليست ها : نوشته هاي داخل يک صفحه را در برميگيرد.
( images ) عکسها : عکس هاي داخل يک صفحه که زيبايي خاصي به وب سايتها مي بخشند
(tables) جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب کردن اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.
((forms فرمها : عناصري که بيننده سايت به کمک آنها مي تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده شود.
( (hyperlinks نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين عناصر، نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي باشد. مانند :www.yahoo.com
( frames ) چارچوبها : فريمها يا چارچوبها تنها عناصري هستند که با استفاده از آنها ما مي توانيم چند صفحه اينترنتي را در يک صفحه جاي دهيم. مانند
( multimedia ) چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ، اگرچه از ابتدا صوت و تصوير با HTML نبوده اما در حال حاضر بيشتر مرورگر هاي وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم وموزيک پخش کنيد.
( javascript ) جاوا اسکريپت : يک نوع زبان نوشتاري يا بهتر بگويم يک نوع کد است که ارتباط نزديکي با HTML دارد و البته آنها را بايد داخل کدهاي html بکار برد تا بتوانيد يک وب سايت حرفه اي با جذابيت بالا طراحي کنيد.
( JavaApplets ) جاوا اپلت : اپلتها برنامه هايي هستند که توسط زبان جاوا نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي باشد که با جاوا اسکريپت فرق دارد.
( style sheets ) استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک الگوي مشترک در بين صفحات را دارد. به طور مثال شما يک الگو براي رنگ متن مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي گذاريد.
( DHTML ) مخفف دو کلمهDynamic Html مي باشد که وظيفه آن روح بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي باشد، شما مي توانيد با هماهنگي کدهاي javascript و Dhtml يک وب سايت پويا و زنده طراحي کنيد.
تمامي اين عناصر elements که در بخش قبل ذکر شد مي توان همگي يا تک تک آنها را در ميان کدهاي html بکار برد. لازم بذکر است که کليه کدها و عناصر مربوط به زبان html توسط يک کنسرسيوم و انجمني به نام W3C تأييد و به رسميت شناخته مي شود. انجمن W3C که مخفف World Wide Web Consortium مي باشد، به غير از Html بر کدهاي Style sheet, xml, xhtml هم نظارت دارد. اين انجمن پس از بررسي کدهاي جديد آنها را در سايت رسمي خود www.w3.org اعلام مي نمايد. در حال حاضر آخرين نسخه html، نسخه html 4.01 ميباشد و بعد از آن نسخه هاي Xhtml به وب معرفي شده است.

هدف از ساخت وب سايت
قبل از هر کاري شما بايد هدف مشخصي داشته باشيد تا مصمم تر آن را دنبال کنيد، پس براي ساختن يک وب سايت هم هدف از ساخت آنرا مشخص کنيد به طور مثال موضوع آن چيست يا چه طرحي مي خواهيد داشته باشه با چه تعداد صفحه. بد نيست که نوع مخاطبين و بيننده ها را هم مشخص کنيد که چه کساني قرار است از سايت شما استفاده کنند. شما مي توانيد در ابتدا از يک سايت شخصي شروع کنيد، فکر کنم با پيشرفت تکنولوژي کامپيوتر و اينترنت در آينده نزديک هر کسي مانند شناسنامه بايد يک سايت براي معرفي خود داشته باشه. هميشه سعي کنيد تا مطالب را متناسب با مضمون سايت انتخاب کنيد و در هر قسمت يک هدف را دنبال کنيد که بيننده گيج و فراري نشود. اگر سايت شما شخصي است و در آن خاطرات ، عکسهاي خود يا دوستانتان را گذاشته ايد پس ديگرنبايد تبليغ محصولات توليدی را اضافه کنيد يا بالعکس.

کجا و چگونه سايت را راه اندازي کنيد
ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم domain مي گويند، اسم يک وب سايت از سه قسمت تشکيل مي شود: www که مخفف World Wide Web ميباشد، اسم منتخب شما يا همان Domain و در آخر پسوندهاي مشخص مانند:.com, .net, .org, .info
پس از انتخاب اسم که بايد يک هماهنگي با مطالب سايت داشته باشد، نوبت به ثبت آن ميرسد که شما مجبورهستيد با يک شرکت خدمات اينترنت قرار داد ببنديد، براي ثبت اسم و اجاره فضا تا اطلاعات شما را در اينترنت به معرض نمايش بگذارند. بعد از اينکه تنظيمات اوليه انجام شد، شما مي توانيد با استفاده از سرويسهايي مانند FTP که مخفف File Transfer Protocol ميباشد اطلاعات سايت را حذف ، اضافه يا تغيير دهيد که در مورد اين سرويس در بخش ديگري توضيح خواهم داد. البته سابتهايي هستند که شما ميتوانيد به طور رايگان سايت خود را راه اندازي کنيد اما معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما ميباشد و ديگر اينکه امکانات محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه اندازي يک وب سايت بسيار مناسب ميباشند.
اهميت طراحي وب سايت
يک وب سايت موفق در مرحله طراحي جان مي گيرد چون چند چيز مهم در اين قسمت مشخص ميشود مانند، قالب بندي، رنگ، محتوا ومديريت اطلاعات سايت. اگر ما درست کردن وب سايت را به ساختن يک خانه تشبيه کنيم، ميبينيد که انسان منطقي خانه را بدون نقشه و طرح نمي سازد، پس بياييد به اين قسمت اهميت بيشتري بدهيم تا در پايان کار احساس رضايت بکنيم. در ساخت يک خانه نکات مهم ديگري هم هست، ظاهر و نماي آن، مواد ومصالح که قرار است بکار برده شود، در ضمن به راحتي کساني که ميخواهند از آن استفاده کنند هم بايد فکر کرد. پس شما هم اين نکات را مد نظر داشته باشيد که ظاهر صفحات چه شکلي داشته باشد از چه رنگهايي استفاده کنيد و چه مطالبي را بکار بريد تا مخاطبين را مجذوب کرده وهمچنين بتوانند به کليه قسمتهاي سايت دسترسي داشته باشند در هربخشي که هستند. زمان بيشتري را صرف اين قسمت کنيد تا نيازي به تغييرات اساسي در آينده نداشته باشيد.
براي يادگيري HTML به چه چيزهايي نياز داريد
براي ديدن صفحاتي که طراحي مي کنيد نياز به يک مرورگر وب web browser داريد اگر شما اين صفحه را مي بينيد پس يکي از اين مرورگرها را داريد. اما براي نوشتن کدهاي html در حال حاضر به برنامه ساده notepad که درکليه سيستمهاي عامل ويندوز وجود دارد نياز داريد، برنامه هاي پيشرفته ديگري هم هست که محيط گرافيکي دارند مانند: Microsoft frontpage , Macromedia Dreamweaver ولي براي شروع بهتر است که از همان Notepad استفاده کنيد. پس مهمترين چيزي که نياز داريد کمي وقت و علاقه هست.

تاريخچه Html
HTML توسط Tim Berners-Lee در خلال دهه ۹۰ ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند. در نوامبر ۱۹۹۵ نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال ۱۹۹۶ انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در ۱۴ ژانويه ۱۹۹۷ انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد. در ۱۸ دسامبر ۱۹۹۷ نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C مورد تاييد قرار گرفت اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند. در تاريخ ۲۴ آوريل ۱۹۹۸ در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد. بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از راست به چپ نوشته ميشدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند. HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني ۴٫۰ دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است. HTML 4 زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در ۲۶ ژانويه ۲۰۰۰ اقدام به معرفي XHTML 1.0 کرد و در ۱۹ دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگيهايي که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفي XML را فراهم کند.

تگهاي HTML
اولين چيزي که براي برنامه نويسي html بايد بدانيد، اينست که تگ html چيست و چه کاري انجام ميدهد. تگهاي html دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده. بطور کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو علامت کد html نوشته ميشود، مانند:
<b>
اين يک تگ آغازين است و کد داخل آن به مرورگر ما ميفهماند که متن بعد از آن بايد بصورت حروف ضخيم و bold به بيننده صفحه نشان داده شود و بلافاصله متن مورد نظر را مينويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن بايد بصورت ضخيم نمايش داده شود،
<b> This is a bold text. </b>
همانطور که مشاهده ميکنيد، تگهاي پايان دهنده داراي يک علامت Slash ( / ) ميباشد. اما کار اين تگها چيست؟ مرورگرهاي وب مانند اينترنت اکسپلورر، به علامتهاي < > حساس هستند و به محض اينکه به آنها مي رسند کد داخل آنها را خوانده و عمليات لازم را بر روي متن بعد از آن انجام ميدهند تا به تگ پايان دهنده برسند. در حقيقت مرورگرها حکم مترجم را براي ما دارند و کليه تگها ونوشته هاي داخل آنها را بصورت اطلاعات منظم و قابل فهم در قالب يک صفحه وب براي ما ترجمه کرده و به نمايش ميگذارند. ما با وارد کردن تگهاي مناسب، کنترل نمايش صفحه وب را در مرورگرها به کنترل خود در مي آوريم پس بايد ياد بگيريد که تگهاي html را چگونه و در کجا بنويسيد. زبان html هم مانند هر زبان ديگري ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا مي شويد.

Source code
صفحات وب داراي مزيتي هستند و آن مشاهده کدهاي Html در مرورگر است که شما براحتي مي توانيد تگهاي عناصر تشکيل دهنده آن صفحه را ببينيد و با نحوه قرار گرفتن و تکنيکهاي بکار گرفته شده آشنا شويد. براي ديدن سورس کد يا همان کد تشکيل دهنده صفحه وب داخل منوي view در مرورگر مي شويد و بر روي گزينه Source کليک مي کنيد که بطور معمول برنامه Notepad باز شده و تگهاي Html را نشان مي دهد که در حال حاضر فهميدن آنها براي شما مشکل است ولي در آينده نزديک هيچ مشکلي براي درک کدها نخواهيد داشت.
در اين بخش شما اولين صفحه وب را خواهيد ساخت تا سادگي زبان html را لمس کنيد. براي شروع ابتدا برنامه Notepad ويندوز را باز کنيد، البته مي توانيد از هر برنامه ويرايشگر متن استفاده کنيد. سپس اين تگها را بنويسيد:
<html>
</html>
اين تگها به مرورگر وب ميفهماند که از کجا کدهاي html شروع و به کجا ختم ميشوند. پس بقيه تگها را ما بايد بين اين دو وارد کنيم. تگها را ما به دو دسته تقسيم ميکنيم: تگهاي قسمت سر head و تگهاي قسمت بدنه body ، بدين صورت:
<html>
<head>
</head>
<body>
</body>
</html>
فرق اين دو قسمت در اينست که هر اطلاعاتي داخل تگهاي قسمت سر head نوشته شود در صفحه مرورگر نشان داده نميشود ولي در قسمت بدنه body هر اطلاعاتي وارد شود در صفحه نمايش داده ميشود. خب دوستان اين ساختار کلي و اسکلت بندي يک صفحه وب هست که بايد هميشه آنرا در نظر داشته باشيد. حالا يک متني بين تگهاي بدنه body وارد کنيد، مثلاً
<html>
<head>
</head>
<body>
This is my first page!
</body>
</html>
نامگذاری و ذخيره کردن فايل
حالا کدنويسي ما تکميل شد و بايد اين فايل متني را ذخيره کنيم تا بتوانيم در مرورگر وب خود امتحانش کنيم. ابتدا منو File را باز کنيد و گزينه Save as را انتخاب کنيد، يک پنجره براي آدرس دهي و نامگذاري آن فايل باز ميشود که آدرس جايي که بايد ذخيره شود را مانند My Documents وارد کنيد. سپس در پايين پنجره باز شده در قسمت File Name اسم فايل را بنام Firstpage وارد کنيد و دقت کنيد تا در آخر اين اسم يک نقطه بگذاريد و پسوند html را بنويسيد و دکمه Save را بزنيد تا فايل متني ما بصورت يک فايل html ذخيره شود. دقت کنيد اگر ميخواهيد فايل شما در سيستم عامل DOS هم باز شود بايد پسوند .htm را در آخر اسم وارد کنيد. حالا به سراغ فايل ذخيره شده ميرويم، اگر در سيستم عامل ويندوز اينکار را انجام داده ايد، آن فايل بايد آيکون مرورگر اينترنت اکسپلورر را داشته باشد، روي فايل کليک کنيد تا باز شود، همانطور که مشاهده ميکنيد مرورگر وب شما باز ميشود تا اطلاعات آن صفحه را نمايش دهد. اگر داخل صفحه فقط نوشتهايي که بين تگ body وارد کرده ايد را مي بينيد پس بايد به شما تبريک بگويم و از اين به بعد بايد به خودتان بيشتر توجه کنيد. اگر هم غير از آن مي بينيد يا چيزي مشاهده نميکنيد، مراحل گفته شده را دوباره انجام دهيد. همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي <body>وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.

<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.
<p></p>
پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به <br> بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= ” ” ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات “left”, “center”, “right”, “justify”مقداردهي ميشود.
<p align=”left”>…</p>
<center></center>
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت، البته اين تگ را براي عناصر ديگر وب نيز ميتوان بکار برد.

<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد که يک متن با فاصله هاي زيادي نمايش داده شود يعني آنطور که ميخواهيد نشان داده شود از اين تگ استفاده ميکنيد.

<h1></h1>
به اين تگHeading مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود. اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف را نمايش ميدهند. در ضمن داراي خصوصيت ” “=align ميباشند و با left, center , right مقداردهي ميشود.

<hr>
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.
width=” “طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.
align=” ” که محل قرار گيري خط در يک سطر را کنترل ميکند.
color=” “رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد.
size=” ” اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد.مثال
<div></div>
اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت style=” ” در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد. در بخش Style Sheets درست کردن الگوها را توضيح خواهم داد.

<span></span>
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div متن را از بقيه جدا نميکند و داراي خصوصيت style=” ” ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود.
<marquee></marquee>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :
align=” “محل قرار گرفتن متن را تعيين ميکند که با کلمات top, middle, bottom مقدار دهي ميشود.

behavior=” “اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر حرکت ميکند، همچنين اگر برابر با slide باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.
bgcolor=” ” رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.
direction=” “جهت ورود متن به صفحه را کنترل ميکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پايين ميتواند وارد شود.
height=” “ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.
hspace=” ” حاشيه چپ و راست را کم وزياد ميکند.
loop=” “تعداد چرخش متن را کنترل ميکند.
scrolldelay=” ” سرعت حرکت متن را تعيين ميکند.
vspace=” ” حاشيه بالا و پايين متن را مشخص ميکند.
width=” ” عرض کادر را کنترل ميکند.

<– !…..–>
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد وارد کنيد .
<bdo></bdo>
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=” “ ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.
ليستها هم جزو عنصر متن در html ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم (Unordered list) وديگري ليستهاي توصيفي (Definition list) . شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:

<ol><li></ol>
براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيم تگ <ol>را که مخفف ordered list ميباشد را مينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ <li>را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده </ol>را می نويسيم.

اگر دقت کنيد به صورت پيش فرض اعداد ۱,۲,۳ به ابتداي گزينه هاي ليست مان اضافه ميشود. شما ميتوانيد خصوصيت type را به تگ <ol> اضافه کنيد و آنرا با A, a که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, i که با اعداد رومي است مقدار دهي کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل ميکنيد:
<ol type=”i”>
<li> Item 01
<li> Item 02
<li> Item 03
</ol>

<ul><li></ul>
اين تگ را unordered list مينامند و مانند تگهاي بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند که مانند بالا ميتوانيد از خصوصيت type که با کلمات” disc”, “circle”, “square” مقدار دهي ميشود استفاده کنيد.
<ul type=”disc”>
<li> Item 01
<li> Item 02
<li> Item 03
</ul>
شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته ميشود.
بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:
<ol type=”I”>
<li> Item 01 <ul type=”circle”> <li> Black <li> White </ul>
<li> Item 02 <ul type=”circle”> <li> Black <li> White </ul>
<li> Item 03 <ul type=”circle”> <li> Black <li> White </ul>
<li> Item 04 <ul type=”circle”> <li> Black <li> White </ul>
</ol>

<dl><dt><dd></dl>
آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که کلمه مشخص را با تگ <dt> و توصيف آنرا با <dd> بکار ميبرند.
<dl>
<dt> Html
<dd> HyperText Markup Language.
</dl>
لينک چيست؟
لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک <a></a> ميباشد که با خصوصيت href آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo متصل شود بدين صورت عمل ميکنيم،
<a href=”www.yahoo.com”>Yahoo website</a>
که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني <a href=” “>و تگ پايان دهنده </a> نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است . همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف ميباشند.
Absolute and Relative
لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:
<a href=”http://www.mysite.com/page01.htm”> Page01 </a>
به اين مدل لينک absolute ميگويند.
و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:
<a href=”htmlpages/Page01.htm”> Page01 </a>
به اين مدل relative مي گويند.
دقت کنيد وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما در صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،

<a href=”../page02.htm”> page02 </a>
به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مينويسيم ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:

<a href=”../../thispage.htm”> this page </a>
target
تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top , _parent قرار گيرد.
target=”_blank”
اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش ميدهد.
_self
اطلاعات صفحه مربوط به آن لينک در همان فريم که لينک قرار دارد نمايش داده ميشود.
_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.
_top
صفحه مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.

Anchor
يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم متصل ميکند که به آن anchor مي گويند. کاربردهاي گوناگوني دارد ولي بيشترين کاربرد اين نوع لينک براي مواقعي است که طول يک صفحه از سايت زياد شده و در انتهاي همان صفحه شما يک لينک مي گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان صفحه هدايت شود. براي اينکار دو سري تگ لازم است که بايد بنويسيد، يکي جايي است که ميخواهيد لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم بايد داخل همان صفحه تک باشد يعني در جاي ديگر بکار نبرده باشيد و تگ آن به اين صورت است:
<a name=”top”>
در بين دو علامت ” ” و به جاي کلمه top هر اسمي ميتوانيد بکار بريد اين نکته را در ذهن داشته باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد لينک است وبجاي نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مينويسيد:

<a href=”#top”>top of the page</a>
در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل absolute استفاده کنيد و آدرس کامل را بنويسيد:
<a href=”http://www.sitename.com/page01.html”> link to another site </a>
نکته: نوشتن پروتکل http:// اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.
mailto
علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل هم لينک درست کنيد که تگ آن به صورت زير ميباشد:
<a href=”mailto:email_address”> my email </a>
کلمه mailto: به مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:
<a href=”mailto:my_email@domain.com”> my_email@domain.com </a>
البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر بفهمد که اين آدرس ادامه دارد و بعد از علامت سوال کلمه subject= را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت & را بگذاريد وسپس کلمه body= را که نشانگر متن ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends به آدرس ايميل فرستاده شود:
<a href=”mailto:my_email@domain.com?subject=Test&body=Hello my friends”> my_email@domain.com </a>
توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook را براي آدرس ايميل خود تنظيم کنيد.
يکي از عناصري که باعث جذابيت در وب سايت ميشود عنصر عکس يا همان image است. عکسها زيبايي خاصي به صفحات ميبخشند ولي از طرف ديگر توليد دردسر هم ميکنند، اگر شما تعداد زيادي عکس در يک صفحه بگذاريد يا از عکسهايي با حجم زياد استفاده کنيد آن موقع است که بيننده بايد مدت طولاني را صرف کند تا صفحه سايت شما را به طور کامل ببيند و همين موضوع باعث از دست دادن يک بيننده و يک نمره منفي به حساب ميايد. همانطور که ميدانيد در کشور عزيزمان ايران سرعتهاي اينترنت خيلي پايين هست و ديدن صفحات سنگين بسيارعذاب آور است البته بماند که بعضي وقتها همان يک ذره سرعت هم نداريم. پس هميشه تا جايي که ميتوانيد صفحه را سبک کنيد تا براي بيننده خسته کننده نباشد. يک سايت موفق سايتي است که بيننده زياد داشته باشد.
فرمتهاي عکس در وب:
خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از:
.gif (Graphic Interchange Format)
.jpeg (Joint Photographic Experts Group)
.png (Portable Network Graphics)

عکسها با فرمت .gif بيشترين استفاده را در وب دارند و محبوبترين نوع عکس است. اين نوع فرمت ۲۵۶ رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آن animation, transparency, interlacing است . البته محبوبيت آن بيشتر براي حجم کم آن است.
Transparency به شفافيت يک عکس ميگويند که آنرا پشت نما هم مينامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما ميتوانيد تا تصوير ، متن يا رنگ زير آن عکس را ببينيد.
Interlacing گاهي وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعني خط به خط به عکس اضافه ميشود تا کامل بارگذاري شود.مثال
Animation عکسهاي متحرک را مي گويند وفقط اين فرمت هست که از متحرک سازي عکس حمايت ميکند.
عکسهايي با فرمت .jpeg حدود ۱۶ ميليون رنگ را پشتيباني ميکنند ، نسبت به فرمت .gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است ، تمام ويژگيهاي gif را دارد به غير از Animation. فرمت .png نسبت به قبليها جديدتر است و مخلوطي از آنهاست يعني کيفيت jpeg و حجم کم gif را دارد.
افزودن عکس به صفحه وب:
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد از خصوصيت src=” ” داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آن عکس نوشته ميشود ولي اگر ميخواهيد که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيد مانند:
<img src=”images/pic01.gif”>
<img src=”www.sitename.com/images/pic01.gif”>
Height, Width
اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طول height و عرض width ميباشد که توسط آنها اندازه يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel ميباشد، اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور مثال شما ميخواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه ۱۰۰×۱۰۰ فضا اشغال کند:
<img src=”images/pic01.gif” height=”100″ width=”100″>
اين نکته را در نظر داشته باشيد که سرعت کامل شدن عکس يعني download شدن آن در صفحه بستگي به حجم آن دارد نه اندازه عکس، پس ميتوانيد اندازه هاي يک عکس را اضافه کنيد ولي دقت کنيد که کيفيت عکس خراب نشود.
Alignment
شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=” “تعيين کنيد و ميتوانيد کلمات left,right,top,middle,bottom را براي اين خصوصيت بکار بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:
<img src=”images/pic01.gif” align=”middle”> This is a text
در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ<center> قبل از تگ <img> استفاده کنيد و بعد از آن </center> را بنويسيد:
<center><img src=”pic01.gif”></center>

Border
اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت border=” “ استفاده کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس هم ضخيم تر است به صورت پيش فرض border=”۰” است يعني هيچ کادري مشاهده نميشود.مثال
Alt
تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که قرار ميگيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس ميدهد؟ پس شما هم اينکار را انجام دهيد، خصوصيت alt=” ” را داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد ، زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس خبر دار ميشود.مثال
hspace, vspace
دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می کند، hspace=” “براي حاشيه چپ و راست عکس وvspace=” “ براي بالا و پايين. عددي را که وارد ميکنيد در مقياس پيکسل است.مثال
Image link
شما ميتوانيد يک عکس را به صورت لينک هم درست کنيد يعني هرگاه بيننده روي عکس کليک کرد به صفحه يا سايت ديگر هدايت شود. در بخش قبل با درست کردن لينک آشنا شديد، در اينجا شما بايد تگ لينک را قبل از تگ عکس بنويسيد و تگ پايان دهنده لينک را بعد از تگ عکس وارد ميکنيد، بدين صورت:
<a href=”www.sitename.com”><img src=”images/sitelogo.gif”></a>
ساخت نقشه تصويری ( image map )
Image map يکي از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به کمک ما ميايد. بطور مثال ما نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده سايت هرگاه روي يک استان کليک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختيار کاربر قرار دهد. اين حالت حجم عکس را افزايش نخواهد داد و بهتر است از عکسهايي با حجم بالا استفاده نکنيم عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهيد، سپس خصوصيت usemap=” ” را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.
<img src=”images/mypic.gif” usemap=”#map01″>
به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name=”map01″> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيت name=” ” مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:
Shape=” ” مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با “rect” قرار ميدهيم، اگر دايره circle بخواهيم برابر با “circle” و اگر چند ضلعي polygon بخواهيم برابر با “poly” قرار ميدهيم.
Coords=” “اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محور x, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.
Coords=”10,10,65,65″

همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
href=” ” که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.
<img src=”images/mypic.gif” usemap=”#map01″>
<map name=”map01″>
<area shape=”rect” coords=”25,25,55,50″ href=”page.htm”>
<area shape=”circle” coords=”124,243,40″ href= “www.yahoo.com”>
<area shape=”poly” coords=”22,30,76,90,147,199,289,270,140,111,44,67″ href=”pages/first.html”>
</map>
خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند