فهرست مطالب

مروری بر وب WWW

امروزه شما به هر سمتي بنگريد آدرس‌هاي اينترنتي را مشاهده مي‌کنيد که اين آدرس‌ها شما را به صفحاتي در اينترنت هدايت مي‌کنند تا اطلاعاتي را در اختيار شما قرار دهند. بيشتر اين آدرس‌ها با WWW آغاز شده که مخفف سه کلمه World Wide Web مي‌باشد. وب قسمتي از دنياي اينترنت است که شامل متن، عکس و تصوير يا صدا مي‌باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر هدايت مي‌كنند.

براي دسترسي به اين صفحات نياز به چند چيز داريد:

ابتدا شما بايد مشترک يکي از شرکت‌هاي سرويس‌دهنده اينترنت شويد که به اين شرکت‌ها ISP[1] مي‌گويند. سپس شما براي مشاهده صفحات نياز به يک برنامه مرورگر وب Web browser داريد مانند: Internet explorer, Netscape Navigator, Opera, Mozilla تا کدهاي متني اين صفحات را ترجمه کرده و به صورت يک سري اطلاعات قابل فهم براي ما نمايش دهند.

داخل اين مرورگرها کادري به نام (Address bar) است که شما مي‌توانيد آدرس‌هاي اينترنتي را وارد کرده و پس از فشار دادن دکمه Enter بر روي صفحه كليد منتظر نمايش يک وب سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه http در جلوي آدرس وارد شده اضافه مي‌گردد که مخفف HyperText Transport Protocol مي‌باشد، اين کلمه به مرورگر مي‌فهماند، اين آدرس از چه پيوند و پروتكلي مي‌خواهد براي نمايش صفحه استفاده کند، چون پروتکل‌هاي مختلفي مانند FTP[2] نيز وجود دارد. نام فني آدرسهاي اينترنتي URL (Universal Resource Locator) مي‌باشد.

HTML چيست؟

داخل صفحات يک وب سايت اجزاي گوناگوني ديده مي‌شود که تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي‌کند که به اين زبانHTML يا HyperText Markup Language گويند.

عناصر تشکيل دهنده HTML:

HTML زبان وب مي‌باشد که داراي عناصر گوناگوني است که با هم تشکيل يک صفحه از سايت را مي‌دهند. اين عناصر عبارتند از:

· ( texts & lists ) متن‌ها و ليست‌ها : نوشته‌هاي داخل يک صفحه را در برمي‌گيرد.

· ( images ) عکسها : عکس‌هاي داخل يک صفحه که زيبايي خاصي به وب سايتها مي‌بخشند.

· ( ( tables جدول‌ها : جدول‌ها بهترين عنصر براي سازماندهي و مرتب کردن اطلاعات هستند که نقش اساسي در طراحي يک سابت دارند.

· ( ( forms فرم‌ها : عناصري که بيننده سايت به کمک آنها مي‌تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده شود.

· ( ( hyperlinks نقطه پيوند : البته اين معني اصلي لغت نمي‌باشد و اين عناصر، نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي‌باشد. مانند : http://www.yahoo.com/

· ( frames ) چارچوب‌ها : فريم‌ها يا چارچوب‌ها تنها عناصري هستند که با استفاده از آنها مي‌توان چند صفحه اينترنتي را در يک صفحه جاي داد.

· ( multimedia ) چند رسانه‌اي : به آن صوت و تصوير هم گفته مي‌شود، اگرچه از ابتدا صوت و تصوير با HTML نبوده اما در حال حاضر بيشتر مرورگرهاي وب از آن پشتيباني مي‌کنند و مي‌توان در وب سايت فيلم و موزيک پخش کرد.

· ( javascript ) جاوا اسکريپت : يک نوع زبان نوشتاري يا به عبارت بهتر يک نوع کد است که ارتباط نزديکي با HTML دارد و البته آنها را بايد داخل کدهاي html بکار برد تا بتوانيد يک وب سايت حرفه‌اي با جذابيت بالا طراحي کنيد.

· ( JavaApplets ) جاوا اپلت : اپلت‌ها برنامه‌هايي هستند که توسط زبان جاوا نوشته مي‌شوند و مي‌توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازي‌ها زبان برنامه نويسي جاوا خود يک زبان مجزا و داراي محبوبيت خاصي در دنيا مي‌باشد که با جاوا اسکريپت فرق دارد.

· ( style sheets ) استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک الگوي مشترک در بين صفحات را دارد. به عنوان مثال مي‌توان يک الگو براي رنگ متن ساخت و سپس آنرا بين صفحاتي به اشتراک گذاشت.

· ( DHTML ) : مخفف دو کلمه Dynamic Html مي‌باشد که وظيفه آن روح بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي‌باشد، شما مي‌توانيد با هماهنگي کدهاي javascript و Dhtml يک وب سايت پويا و زنده طراحي کنيد.

مقدمه ای برای طراحی سايت

تمامي عناصر((elements مذکور را مي‌توان با هم يا تک تک در ميان کدهاي html بکار برد. لازم بذکر است که کليه کدها و عناصر مربوط به زبان html توسط انجمني به نام W3C (World Wide Web Consortium) تأييد و به رسميت شناخته مي‌شود. انجمن W3C به غير از Html بر کدهاي xhtml ، xml و Style sheet هم نظارت دارد. اين انجمن پس از بررسي کدهاي جديد آنها را در سايت رسمي خود http://www.w3.org/ اعلام مي‌نمايد. در حال حاضر آخرين نسخه html، نسخه html 4.01 مي‌باشد و بعد از آن نسخه‌هاي Xhtml به وب معرفي شده است.

هدف از ساخت وب سايت

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

کجا و چگونه سايت را راه اندازي کنيد

ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم Domain مي‌گويند، اسم يک وب سايت از سه قسمت تشکيل مي‌شود: WWW که مخفف World Wide Web مي‌باشد، اسم منتخب شما يا همان Domain و در آخر پسوندهاي مشخص مانند:.com, .net, .org, .info

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

البته سابت‌هايي هستند که شما مي‌توانيد به طور رايگان سايت خود را راه‌اندازي کنيد اما معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما مي‌باشد و ديگر اينکه امکانات محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه‌اندازي يک وب سايت بسيار مناسب مي‌باشند. يکي از اين سايت‌ها http://www.geocities.com/ است که اگر ايميل در سايت ياهو داريد، فضاي رايگان در اختيارتان قرار مي‌دهد.

اهميت طراحي وب سايت

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

براي يادگيري HTML به چه چيزهايي نياز داريد

براي ديدن صفحاتي که طراحي مي‌کنيد نياز به يک مرورگر وب Web Browser داريد. اما براي نوشتن کدهاي html در حال حاضر به برنامه ساده Notepad که درکليه سيستم‌هاي عامل ويندوز وجود دارد نياز داريد، برنامه‌هاي پيشرفته ديگري هم هست که محيط گرافيکي دارند مانند: Microsoft frontpage, Macromedia Dreamweaver ولي براي شروع بهتر است که از همان Notepad استفاده کنيد.

تاريخچه Html

HTML توسط Tim Berners-Lee در خلال دهه 90 ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي‌شد که آن بستگي داشت به سازنده فايل و انجمن‌هايي که در زمينه وب فعاليت داشتند.

در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستم‌هاي عامل متفاوت داشت. در تمام نسخه‌هاي اين زبان، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه‌گذاري کرده بودند جلب شود و برنامه‌هاي توليد شده براي وب بتوانند مدت طولاني‌تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده‌تري، در وب توسعه يافت تا در کليه سيستم‌هاي اطلاع‌رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.

در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکت‌هاي توليدکننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند.

در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب توصيه کرد.

بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدول‌ها و فرم‌ها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهم‌ترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبان‌هايي بود که از راست به چپ نوشته مي‌شدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي‌ شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند.

HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني 4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.

HTML 4 زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در 26 ژانويه 2000 اقدام به معرفي XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگي‌هايي که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفي XML را فراهم کند.

تگ‌هاي HTML

اولين چيزي که براي برنامه نويسي html بايد دانست، اينست که تگ html چيست و چه کاري انجام مي‌دهد. تگ‌هاي html دو نوع هستند، تگ‌هاي آغازين و تگ‌هاي پايان دهنده. بطور کل تگ‌ها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص مي‌شوند و بين اين دو علامت کد html نوشته مي‌شود، مانند:

<b>

اين يک تگ آغازين است و کد داخل آن به مرورگر ما مي‌فهماند که متن بعد از آن بايد بصورت حروف ضخيم و bold به بيننده صفحه نشان داده شود و بلافاصله متن مورد نظر را مي‌نويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن بايد بصورت ضخيم نمايش داده شود،

همانطور که مشاهده مي‌کنيد، تگ‌هاي پايان دهنده داراي يک علامت 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 وارد کنيد

Save into My Documents

سپس در پايين پنجره باز شده در قسمت File Name اسم فايل را بنام Firstpage وارد کنيد و دقت کنيد تا در آخر اين اسم يک نقطه بگذاريد و پسوند html را بنويسيد و دکمه Save را بزنيد تا فايل متني ما بصورت يک فايل html ذخيره شود.

File name

دقت کنيد اگر مي‌خواهيد فايل شما در سيستم عامل DOS هم باز شود بايد پسوند .htm را در آخر اسم وارد کنيد.

حالا به سراغ فايل ذخيره شده مي‌رويم، اگر در سيستم‌عامل ويندوز اينکار را انجام داده‌ايد، آن فايل بايد آيکون مرورگر اينترنت را داشته باشد، روي فايل کليک کنيد تا باز شود، همانطور که مشاهده مي‌کنيد مرورگر وب شما باز مي‌شود تا اطلاعات آن صفحه را نمايش دهد. اگر داخل صفحه فقط نوشته‌هايي که بين تگ body وارد کرده‌ايد را مي‌بينيد موفق شده‌ايد در غير اينصورت مراحل گفته شده را دوباره انجام دهيد.

افزودن متن به صفحه

همانطور که در بخش قبل گفته شد، هر متني را بين تگ‌هاي <body> وارد کنيد بعد از ذخيره آن فايل با پسوند html يا htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگ‌هاي اين عنصر کنترل نمايش نوشته‌ها را بدست مي‌گيريم تا همان چيزي که مورد نظر ماست نشان داده شوند. تگ‌هاي متن را مي‌توان به دو دسته تقسيم کرد، تگ‌هاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگ‌هايي که شکل و آرايش حروف را کنترل مي‌کنند که به آنها formatting مي‌گويند. بهتر است که با Notepad يا هر برنامه ويرايشگر متن که داريد هر کدام از اين تگ‌ها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.

<br>

براي خط بندي از اين تگ استفاده مي‌شود و متن بعد از آن به يک خط پايين‌تر منتقل مي‌شود که نيازي به تگ پايان دهنده هم ندارد.

<p> </p>

پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به <br> بين خطوط ايجاد مي‌کند. اين تگ داراي خصوصيت " " = align مي‌باشد که محل قرارگيري پاراگراف را در يک سطر کنترل مي‌کند و با کلمات right ، center ، left و justify مقداردهي مي‌شود.

>p align="left<" >/p<

<center> </center>

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

<pre> </pre>

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

<hn> </hn>

به اين تگ Heading مي‌گويند و براي مشخص کردن سرفصلها و تيترها بکار مي‌رود. در اين تگ n از عدد يک تا شش درجه‌بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف را نمايش مي‌دهند. در ضمن داراي خصوصيت " "=align مي‌باشند و با right، center و left مقداردهي مي‌شود.

<hr>

اين تگ روي خود متن کاري صورت نمي‌دهد و فقط با ترسيم يک خط افقي آنها را از هم جدا مي‌کند که داراي خصوصيات زير مي‌باشد.

width=" " طول خط را کنترل مي‌کند که هم با عدد در مقياس پيکسل و هم با درصد مي‌توان مقداردهي کرد.

align=" " که محل قرارگيري خط در يک سطر را کنترل مي‌کند.

color=" " رنگ خط که مي‌توانيد اسم رنگ يا کد هگزا رنگ را بنويسيد.

size=" " اين خصوصيت ضخامت خط را تعيين مي‌کند که هرچه عدد بزرگتر باشد، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه مي‌باشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نمي‌دهد.

<div> </div>

اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا مي‌کند و به خط بعد منتقل مي‌کند. خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را مي‌دهد. بطور مثال هرگاه کاربر نشانگر موس را روي آن متن ببرد، نوشته‌ها خط دار شود، البته هر نوع Style که تعريف شود همان را بکار مي‌برد.

<span> </span>

اين تگ هم مانند تگ بالا مي‌باشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف مي‌باشد چون مانند div متن را از بقيه جدا نمي‌کند و داراي خصوصيت style=" " مي‌باشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود.

<marquee> </marquee>

متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير مي‌باشد، البته اين تگ ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :

align=" " محل قرار گرفتن متن را تعيين مي‌کند که با کلمات top، middle و bottom مقداردهي مي‌شود.

behavior=" " اين خصوصيت نحوه حرکت متن را کنترل مي‌کند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم، متن از صفحه خارج نمي‌شود و در عرض مرورگر حرکت مي‌کند، همچنين اگر برابر با slide باشد، متن از يکطرف وارد صفحه شده و در طرف ديگر مي‌ايستد.

bgcolor=" " رنگ زمينه آن تگ را مشخص مي‌کند که يا نام رنگ يا کد هگزاي آنرا مي‌نويسيد.

direction=" " جهت ورود متن به صفحه را کنترل مي‌کند و با کلمات top، down، right و left که از بالا، پايين، راست و چپ مي‌تواند وارد شود.

height=" " ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين مي‌کند.

hspace=" " حاشيه چپ و راست را کم و زياد مي‌کند.

loop=" " تعداد چرخش متن را کنترل مي‌کند.

scrolldelay=" " سرعت حرکت متن را تعيين مي‌کند.

Scrollmount=" " مقدار حرکت بر حسب پیکسل را تعيين مي‌کند.

vspace=" " حاشيه بالا و پايين متن را مشخص مي‌کند.

width=" " عرض کادر را کنترل مي‌کند.

<-- !.....-->

از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نمي‌خواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده مي‌کنيد که بجاي نقطه چين هر متني را مي‌توانيد وارد کنيد.

<bdo> </bdo>

اين تگ فقط مخصوص نوشتن متن از طرف چپ يا راست که داراي خصوصيت dir=" " مي‌باشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقداردهي مي‌شود.

آرايش و شكل‌دهي حروف (Formatting texts)

در قسمت قبل با تگ‌هايي آشنا شديم که کنترل کلي نمايش متن را به عهده داشتند و در اين بخش تگ‌هايي را مي‌آموزيم که کنترل نمايش حروف از لحاظ اندازه، ضخامت، نوع آرايش و قرارگيري آنها در کلمه را بعهده دارند که به اين نوع تگ‌ها formatting مي‌گويند.

<font> </font>

براي مشخص‌کردن نوع يا شکل حروف، رنگ و يا اندازه آنها از اين تگ استفاده مي‌کنيم که داراي خصوصيات زير مي‌باشد.

face=" " اين خصوصيت نوع فونت را تعيين مي‌کند که بايد برابر با يکي از فونت‌هاي استاندارد سيستم عامل قرار دهيد.

size=" " اندازه هر حرف را تعيين مي‌کند که از اعداد يک تا هفت با علامت مثبت به نشانه افزاينده و با علامت منفي به نشانه کاهش سايز استفاده مي‌شود.

color=" " براي کنترل و تعيين رنگ حروف اين تگ را مي‌توان بکار برد.

<small> </small> و <big> </big>

براي تعيين اندازه حروف در يک حد خاص از اين تگ‌ها استفاده مي‌شود.

<b> </b>

متن بين آنها بصورت توپر bold ظاهر مي‌شود.

<i> </i>

براي نوشتن حروف بصورت کج italic اين تگ را بکار مي‌بريم.

<u> </u>

اين تگ خطي زير کلمات خواهد کشيد.

<s> </s>

گاهي اوقات نياز داريم که روي يک حرف يا کلمه خط بکشيم، در اينصورت اين تگ را بکار خواهيم برد، همچنين از تگ <strike> مي‌توان بجاي آن استفاده کرد.

نکته: تگ‌هايي مانند <b>، <i>، <u> و <s> را physical مي‌نامند يعني متن بکار رفته در آنها بصورت آنچه که انتظار داريم نمايان مي‌شوند اما در مقابل، تگ‌هاي logical هم هستند که تنظيمات مرورگرها در آنها موثر خواهند بود.

<sup> </sup>

حروف يا اعداد بين آنها بالاتر از سطر ظاهر خواهند شد، مانند عدد توان در رياضيات.

<sub> <sub>

حروف يا اعداد پايين‌تر از سطر نوشته مي‌شوند، مانند عدد ظرفيت در فرمولهاي شيمي.

<tt> </tt>

نوشته بين آنها بصورت حروف تايپي ظاهر مي‌شود و خاصيت آن در اينست که کليه حروف به يک اندازه جا اشغال مي‌کنند.

<em> </em>

اين تگ مانند تگ <i> عمل ميکند و جزو تگ‌هاي Logical است.

<strong> </strong>

اين تگ هم مانند <b> عمل مي‌کند و در ضمن logical است.

نکته: مزيت استفاده تگ‌هاي logical به تگ‌هاي physical در اينست که در کليه مرورگرها به نمايش در مي‌آيند ولي در بعضي از مرورگرها ممکن است تگ physicalعمل نکند.

<cite> </cite>

براي جمله‌هاي نقل قول مي‌توان از اين تگ استفاده کرد که مانند <i> عمل مي‌کند و logical هم هست.

<blockquote> </blockquote>

اين تگ مانند <p> وظيفه پاراگراف‌بندي را به عهده دارد با اين تفاوت که حاشيه بيشتري را در نظر مي‌گيرد و اگر براي دو دفعه متوالي استفاده شود، پاراگراف دوم با حاشيه دو برابر نسبت به اولي نمايان مي‌شود. در ضمن براي خطوط ساده از <q> مي‌توان استفاده کرد.

<acronym> </acronym>

کاربرد اين تگ براي مختصرنويسي است يعني اگر يک کلمه مانند HTML داريد با استفاده از آن مي‌توانيد کلمات کامل را در يک کادر کوچک به اسم tooltip قرار دهيد و هنگامي که کاربر موس را روي آن کلمه ببرد اين کادر باز شده و آنها را نمايش دهد.کلمات کامل را بايد در خصوصيت title=" " قرار دهيد.

<acronym title="radiodetecting and ranging"> RADAR </acronym>

<abbr> </abbr>

اين تگ هم مانند تگ بالا است با اين تفاوت که در مرورگر چيزي را نمايش نمي‌دهد.

<code> </code>

اگر شما نياز داشتيد تا داخل يک صفحه از وب در مورد کد زبانهاي برنامه نويسي صحبت کنيد، مي‌توانيد آنها را بين اين دو تگ قرار دهيد، همچنين براي متغيرها هم از تگ <var></var> مي‌توان استفاده کرد.

<dfn> </dfn>

اين تگ نمايانگر کلمه definition و براي توصيف يک متن بکار مي‌رود که آن متن بصورت مايل ظاهر خواهد شد.

<kbd> </kbd>

اين هم نمايانگر کلمه keyboard است که حروف را بصورت ساده و تايپي نشان مي‌دهد.

<samp> </samp>

نمايانگر کلمه sample است و براي نمايش نمونه کار توليد شده از يک برنامه بکار مي‌رود.

<del> </del>

با استفاده از اين تگ يک خط روي متن بين آنها کشيده مي‌شود که بطور معمول با تگ <ins> بکار مي‌رود. اين تگ داراي دو خصوصيت منحصر مي‌باشد، cite=" " که مي‌تواند آدرس يک فايل باشد تا توضيحي راجع به علت حذف آن مطلب بدهد و date=" " که تاريخ و زمان حذف را معين مي‌کند.

<ins> </ins>

اين تگ هم بطور معمول با <del> بکار برده مي‌شود و براي مشخص‌کردن يک مطلب وارد شده است که داراي خصوصيات درج شده در تگ <del> نيز مي‌باشد و همچنين اين دو تگ داراي خصوصيت title=" " هم مي‌باشند که در آن يک پيغام براي بيان علت حذف يا اضافه مطلب مي‌توان نوشت.

طرز ساختن ليست‌ها

ليست‌ها هم جزو عنصر متن در html مي‌باشند که بطور كلي سه نوع ليست وجود دارد، يکي ليست‌هاي با ترکيب منظم (Ordered list) و ليست با ترکيب نامنظم (Unordered list) و ديگري ليست‌هاي توصيفي (Definition list). شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط نقطه‌هاي توپر هست که ترتيبي را نمي‌توان براي آنها در نظر گرفت. تگ‌هاي اين ليست‌ها به شرح زير مي‌باشند:

<ol><li></ol>

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

اگر دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه‌هاي ليست مان اضافه مي‌شود. شما مي‌توانيد خصوصيت type را به تگ <ol> اضافه کنيد و آنرا با A, a که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, iکه با اعداد رومي است مقداردهي کنيد. به طور مثال اگر مي‌خواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل مي‌کنيد:

<li> Item 01

<li> Item 02

<li> Item 03

</ol>

<ul><li></ul>

اين تگ را unordered list مي‌نامند و مانند تگ‌هاي بالا براي درست کردن ليست در يک صفحه مي‌باشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع‌هاي توپر استفاده مي‌کند که مانند بالا مي‌توانيد از خصوصيت type که با کلمات square، circle و disc مقداردهي مي‌شود استفاده کنيد.

<li> Item 01

<li> Item 02

<li> Item 03

</ul>

شما مي‌توانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته مي‌شود.

بر فرض ليستي داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:

<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> نوشته شود در مرورگر به شکل لينک ظاهر مي‌شود و قابل کليک است.

Yahoo website

همانطور که مشاهده مي‌کنيد به صورت پيش فرض رنگ لينک‌ها آبي بوده و زير آنها خط کشيده مي‌شود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد. لينک‌ها را مي‌توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينک‌هاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت مي‌باشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف مي‌باشند.

Absolute and Relative

لينک‌هاي داخلي به دو صورت نوشته مي‌شوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:

به اين مدل لينک absolute ميگويند.

و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مي‌نويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:

به اين مدل relative مي‌گويند.

دقت کنيد وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين‌تر از اين صفحه قرار دارد اينگونه عمل مي‌شود اما اگر لينک ما در صفحه‌اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي‌توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم ( .. ) استفاده کنيم،

به طور ساده مي‌توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مي‌نويسيم ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول مي‌توانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:

target

تگ لينک خصوصيتي دارد که توسط آن مي‌توانيد محل باز شدن و يا نمايش صفحه اي که مي‌خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank، _self، _parent و _top قرار گيرد.

target="_blank"

اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش مي‌دهد.

_self

اطلاعات صفحه مربوط به آن لينک در همان فريم که لينک قرار دارد نمايش داده مي‌شود.

_parent

صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد، نه در پنجره جديد.

_top

صفحه مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.

Anchor

يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم متصل مي‌کند که به آن anchor مي‌گويند. کاربردهاي گوناگوني دارد ولي بيشترين کاربرد اين نوع لينک براي مواقعي است که طول يک صفحه از سايت زياد شده و در انتهاي همان صفحه شما يک لينک مي‌گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان صفحه هدايت شود. براي اينکار دو سري تگ لازم است که بايد بنويسيد، يکي جايي است که مي‌خواهيد لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم بايد داخل همان صفحه تک باشد يعني در جاي ديگر بکار نبرده باشيد و تگ آن به اين صورت است:

در بين دو علامت " " و به جاي کلمه top هر اسمي مي‌توانيد بکار بريد اين نکته را در ذهن داشته باشيد که اين تگ در مرورگر ظاهر نمي‌شود. اما تگ ديگري که نياز است خود کد لينک است و بجاي نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مي‌نويسيد:

در مورد لينک‌هاي خارجي يعني لينک‌هايي که به سايت‌هاي ديگر وصل مي‌شوند بايد از مدل 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 به آدرس ايميل فرستاده شود:

my_email@domain.com </a>

توجه داشته باشيد که اگر مي‌خواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook را براي آدرس ايميل خود تنظيم کنيد.

قرار دادن عکس در صفحه وب

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

فرمتهاي عکس در وب:

عکس‌ها داراي فرمت‌هاي زيادي مي‌باشند ولي فرمت‌هايي که در وب بکار برده مي‌شوند، عبارتند از:

.gif (Graphic Interchange Format)

.jpeg (Joint Photographic Experts Group)

.png (Portable Network Graphics)

عکس‌ها با فرمت .gif بيشترين استفاده را در وب دارند و محبوب‌ترين نوع عکس است. اين نوع فرمت 256 رنگ را پشتيباني مي‌کند و از ويژگي‌هاي ديگر آن animation، transparency و interlacing است. البته محبوبيت آن بيشتر براي حجم کم آن است.

Transparency به شفافيت يک عکس مي‌گويند که آنرا پشت‌نما هم مي‌نامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما مي‌توانيد تصوير، متن يا رنگ زير آن عکس را ببينيد.

Interlacing گاهي وقت‌ها شما منتظر مي‌شويد تا يک عکس به دليل اندازه بزرگ بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعني خط به خط به عکس اضافه مي‌شود تا کامل بارگذاري شود.

Animation عکس‌هاي متحرک را مي‌گويند و فقط اين فرمت هست که از متحرک‌سازي عکس حمايت مي‌کند.

عکس‌هايي با فرمت jpeg حدود 16 ميليون رنگ را پشتيباني مي‌کنند، نسبت به فرمت gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است، تمام ويژگي‌هاي gif را دارد به غير از Animation. فرمت png نسبت به قبلي‌ها جديدتر است و مخلوطي از آنهاست يعني کيفيت jpeg و حجم کم gif را دارد.

افزودن عکس به صفحه وب:

مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس‌دهي آن بايد از خصوصيت src=" "داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آن عکس نوشته مي‌شود ولي اگر مي‌خواهيد که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيد مانند:

Height, Width

اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طول height و عرض width مي‌باشد که توسط آنها اندازه يک عکس را داخل صفحه مي‌توانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel مي‌باشد، اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر مي‌شود. بطور مثال شما مي‌خواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه 100×100 فضا اشغال کند:

اين نکته را در نظر داشته باشيد که سرعت کامل شدن عکس يعني download شدن آن در صفحه بستگي به حجم آن دارد نه اندازه عکس، پس مي‌توانيد اندازه‌هاي يک عکس را اضافه کنيد ولي دقت کنيد که کيفيت عکس خراب نشود.

Alignment

شما مي‌توانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=" "تعيين کنيد و مي‌توانيد کلمات left، right، top، middle و bottom را براي اين خصوصيت بکار بريد. بر فرض مي‌خواهيد که يک متن بعد از عکس و در وسط قرار گيرد:

<img src="images/pic01.gif" align="middle"> This is a text

در ضمن اگر مي‌خواهيد خود عکس در وسط صفحه قرار گيرد بايد از تگ<center> قبل از تگ <img> استفاده کنيد و بعد از آن </center> را بنويسيد:

Border

اگر مايل هستيد براي عکس کادر بگذاريد مي‌توانيد از خصوصيت border=" " استفاده کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد، کادر دور عکس هم ضخيم‌تر است به صورت پيش فرض border="0" است يعني هيچ کادري مشاهده نمي‌شود.

Alt

تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که قرار مي‌گيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس مي‌دهد؟ پس شما هم اينکار را انجام دهيد، خصوصيتalt=" " را داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد، زيرنشانگر نمايان مي‌شود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي وجود دارند که عکس را نمايش نمي‌دهد پس با اينکار بيننده از حضور آن عکس باخبر مي‌شود.

hspace, vspace

دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می‌کند، hspace=" " براي حاشيه چپ و راست عکس وvspace=" " براي بالا و پايين عددي را که وارد مي‌کنيد در مقياس پيکسل است.

Image link

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

بر روی لوگوی زير کليک کنيد تا به صفحه اصلی سايت هدايت شويد

در ضمن مي‌شود براي قسمت‌هاي مختلف يک عکس لينک‌هايي به جاهاي مختلف درست کرد. به فرض مثال ما يک عکس از نقشه ايران داريم و مي‌خواهيم که روي هر استان کليک شود، آن قسمت لينک شود به صفحه مورد نظر. اين حالت را 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=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد مي‌کنيم.

</map>

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

</map>

</a>

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

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

تگ جدول

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

<table>

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

</table>

هر چه تگ‌هاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم داشت. مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول داراي يک خانه مي‌باشد. يکي از ويژگي‌هاي جدول که محبوبيت آنرا زياد مي‌کند اينست که هر خانه از آن مي‌تواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته اندازه‌هاي هر خانه هم مي‌تواند متفاوت باشد.

border

براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادر درست مي‌کند البته اگر اين خصوصيت را برابر با صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم‌تري خواهيم داشت، در ضمن رنگ کادر هم با bordercolor=" " که برابر با عدد هگزاي رنگ است تعيين مي‌شود. border ويژگي‌هاي ديگري هم دارد، به طور مثال شما مي‌توانيد خصوصيت frame=" " را به تگ <table> اضافه کرده و آنرا برابر با يکي از کلمات void، above، below، hsides، vsides، lhs، rhs و boxقرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان مي‌کنند.

rule

ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:

حالا خصوصيت rules=" "را به تگ <table> اضافه کنيد و هر بار يکي از کلمات all، none، groups، rows و cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد.

Alignment

مي‌توانيد با استفاده از خصوصيت align=" "که در تگ <td> مي‌نويسيد محل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که مي‌توانيد اين خصوصيت را با کلمات left، right، center و justify مقداردهي کنيد.

height, width

با خصوصيات width=" " و height=" "هم اندازه طول و عرض يک جدول را مي‌توان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما مي‌توانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال مي‌کند.

bgcolor

براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ‌هاي <tr> و <td> هم مي‌توانيد بکار بريد. مثال

cellspacing, cellpadding

تگ <table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها مي‌توانيد فاصله بين خانه‌هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه‌ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه‌هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله‌ها بيشتر خواهد بود.

header: <th></th>

حالا که با درست کردن رديف و ستون در جدول آشنا شديد، مي‌توانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود.

colspan, rowspan

گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه‌هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده مي‌کنيد و مقدار آنرا برابر با تعداد خانه‌هايي که بايد يکي شوند، قرار مي‌دهيد.

caption

بطور معمول هر جدول داراي يک اسم و يا يک توضيح مي‌باشد که آنرا با تگ <caption></caption> در ميان تگ‌هاي <table></table> مشخص مي‌کنند. اين تگ داراي خصوصيت align=" " مي‌باشد با کلمات top، bottom، right، center و left مقداردهي مي‌شود.

thead, tbody, tfoot

اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما مي‌توانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديف‌ها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه‌هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه‌هاي آخرين رديف، که قسمت سر را با <thead></thead>، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل مي‌کنيم. اين تگ داراي خصوصيت align نيز مي‌باشد.

colgroup

همچنين با تگ <colgroup></colgroup> مي‌توانيد خصوصيات کليه ستون‌هاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز مي‌باشد که توسط آن تعداد ستون‌هايي که بايد کنترل شوند را تعيين مي‌کنيد.

summery

يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول مي‌باشد ولي در جايي نمايش داده نمي‌شود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش مي‌دهند و يا مرورگرهاي مخصوص افراد ناتوان، مفيد مي‌باشد که بهتر است از آن استفاده کنيد.

به اين موضوع هم توجه داشته باشيد که شما مي‌توانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته مي‌شود.

ساخت اجزای فرم

فرم چيست؟

فرم‌ها تنها عنصري هستند که بيننده سايت مي‌تواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده مي‌شود. شما مي‌توانيد داخل يک صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرم‌ها را با استفاده از خصوصيت name=" " در تگ <form> بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرم‌ها داراي اجزاي متفاوتي با وظيفه مشخص مي‌باشند که بايد قبل از تگ پايان دهنده </form> آنها را بکار برد. بعضي از اين اجزا عبارتند از: کادرهاي متني text fields، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي radio buttons، ليست‌هاي پايين کشيدني drop-down lists و دکمه‌هاي تأييد submit و پاک کنندهreset .

فرم‌ها توسط برنامه‌هايي نظير ASP, CGI و با افزودن خصوصيات action=" "، method=" " و enctype=" " در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته مي‌شود.

دکمه (button)

کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي‌فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش مي‌شوند. پس ابتدا به ساختن اين دکمه مي‌پردازيم. براي ساختن دکمه‌ها در يک فرم به دو روش مي‌توانيم عمل کنيم:

روش اول: با استفاده از تگ <button></button> که داراي دو خصوصيت name=" "براي نامگذاري و type=" " براي مشخص کردن نوع دکمه که submit و يا reset مي‌باشد. در بين تگ آغازکننده و پايان دهنده هر چه نوشته شود در ظاهر دکمه نمايان مي‌شود.

روش دوم: با استفاده از تگ <input> که مانند روش اول دو خصوصيت name=" " که بايد کلمه button در جلوي آن بيايد وtype=" " که مي‌تواند هم submit باشد و يا reset.

تفاوت اين دو روش در اين است که شما در روش اول هر نوشته‌اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده مي‌شود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit و reset نمايان مي‌شود. البته مي‌توانيد بجاي دکمه‌هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيتtype=" " را برابر با کلمه image قرار مي‌دهيد و با خصوصيت src=" " آن را آدرس‌دهي مي‌کنيد:

لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.

text field, text area

بعد از ساختن دکمه‌ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ

وخصوصياتش زياد کار داريم . ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل کادرمتني ميتوانيم استفاده کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر نباشد و کادر ما هم به صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما داراي چندين رديف ميباشد.

در مدل اول ازاين تگ استفاده ميکنيم:

دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=” “ که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “ حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.

اگر قرار باشد که بيننده داخل اين کادر خطي، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.

اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea> استفاده کنيد که جدا از خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي کادر بکار ميبريد.

label

زمانيکه شما اجزاي فرم را اضافه مي‌کنيد، مي‌توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي‌توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:

که اين کد به صورت زير ظاهر مي‌شود،

دراين تگ، توسط خصوصيت for مي‌توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،

Tab order

يکي از خصوصيات مفيد تگ‌هاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي‌شود که مي‌توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگ‌هاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي‌توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:

file field

گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي‌کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي‌کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain" را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي‌شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.

Checkbox

براي درست کردن انتخاب چند گزينه اي checkboxes بايد type=”checkbox” قرار دهيم . براي مواقعي که ما ميخواهيم بيننده يک يا چند گزينه را انتخاب کند از آن استفاده ميکنيم. براي هر گزينه در اين قسمت بايد يکبار اين کد را نوشت و اگر ميخواهيد به صورت پيش فرض يک گزينه تيک خورده باشد بايد کلمه checked را به تگ اضافه کنيد:

<input name="chkbox01" type="checkbox"> Item 01
<input name="chkbox01" type="checkbox"> Item 02
<input name="chkbox01" type="checkbox" checked> Item 03

radio button

براي انتخاب تک گزينه اي از type=”radio” استفاده ميشود و به آنها radio button ميگويند، در مواردي کاربرد دارد که کاربر حق انتخاب يک گزينه را دارد.

drop-down list

يکي ديگر از اجزاي فرم، ليستهاي انتخابي است که در مرورگر بشکل ليستهاي پايين آمدني (drop-down list) ظاهر ميشوند. با تگ <select> آغاز ميشود و براي هر گزينه داخل اين ليست بايد تگ <option> را بنويسيد و در انتهاي آنها تگ پايان دهنده اين ليست يعني </select> را مينويسيم. در ليست ساخته شده، بيننده و کاربر ميتواند يک گزينه را انتخاب کند ولي اگر خصوصيت multiple را به تگ <select> اضافه کنيد، کاربر ميتواند با پايين نگه داشتن دکمه‌هاي Ctrl يا Shift بر روي کيبورد، چند گزينه را از آن ليست بطور همزمان انتخاب کند.

تگ select داراي خصوصيت size هم ميباشد که اگر آنرا برابر با عدد يک قرار دهيم بصورت زير ظاهر ميشود که در اين حالت بهتر است خصوصيت multiple را حذف کنيد. بصورت پيش فرض اولين گزينه در ليست نمايان ميشود ولي اگر خصوصيت selected را به يکي ديگراز تگ‌هاي option اضافه کنيد، در مرورگر آن گزينه نمايش داده ميشود.

fieldset

بمنظور مرتب کردن و نظم دادن به اجزاي داخل يک فرم ميتوان از تگ<fieldset>در ابتداي کد يکي از اجزاي مورد نظراستفاده کرد و در انتهاي همان کد تگ</fieldset>را نوشت که بااين تگ يک کادر مستطيل نازک دور آن درست خواهد شد و اجزاي يک فرم را از هم جدا خواهد کرد. شما حتي ميتوانيد براي آن قسمت يک اسم بگذاريد که در بالاي آن کادر در مرورگر نمايان ميشود که براي اين کار بعد از تگ<fieldset>بايد تگ<legend> NAME </legend>را بکار برد که هر اسمي را ميتوانيد بجاي کلمهNAMEبکار بريد.

<form>
<fieldset>
<legend> Radio Button fieldset </legend>
<input name="rb" type="radio"> Item 01
<input name="rb" type="radio"> Item 02
<input name="rb" type="radio"> Item 03
<input name="rb" type="radio"> Item 04
</fieldset>
</form>

hidden field

بعضي اوقات، لازم ميشود تا اطلاعاتي از فرم به سرور فرستاده شود که در مرورگر نبايد ديده شود. براي اين منظور بايد تگ input را نوشته و خصوصيت type را برابر با hidden قرار دهيم، خصوصيت name را هم مقداردهي مي‌کنيم با يک نام دلخواه و غيرتکراري، همچنين خصوصيت value را نوشته و هر مقداري که به آن نسبت دهيم بصورت پنهاني به سرور فرستاده خواهد شد.

disable elements

اگر يکي از اجزاي فرم را به هردليلي نياز نداشته باشيد اما حذف هم نمي‌خواهيد کنيد مثلاً در آينده مي‌خواهيد آنرا بکار گيريد، مي‌توانيد با افزودن خصوصيت disabled به تگ مورد نظر، آنرا موقتاً غيرفعال کنيد و با حذف آن خصوصيت از تگ دوباره آنرا فعال کنيد. با فراگيري زبان جاوااسکريپت استفاده از اين خصوصيت در کنترل اجزاي فرم، بيشتر کاربرد خواهد داشت.

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

نحوه جمع آوری اطلاعات از فرمها

هنگاميکه دکمه تاييد يک فرم زده مي‌شود اطلاعات وارد شده از صفحه عبور کرده و به سرور ( کامپيوتري که فايلهاي وب سايت شما بر روي آن قرار دارد ) فرستاده مي‌شوند تا پردازش شود. در اين قسمت بايد با دو خصوصيت action و method در تگ <form> آشنا شويد. اين دو خصوصيت مشخص مي‌کنند که اطلاعات چگونه و به کجا بايد فرستاده شوند.

در خصوصيت action آدرس فايلي که اطلاعات را تجزيه تحليل مي‌کند و بر روي سرور قرار دارد وارد مي‌شود که بطور معمول يا برنامه CGI و يا فايلهاي ASP است. CGI مخفف Common Gateway Interface است که فايلهاي آن با استفاده از زبان Perl, C ويا VB نوشته مي‌شوند و ASP مخفف Active Server Page است که يک زبان قوي تحت وب است که متعلق به شرکت مايکروسافت مي‌باشد. شما حتي مي‌توانيد اطلاعات گرفته شده از يک فرم را به آدرس ايميل هم بفرستيد که در اين حالت بايد خصوصيت action را برابر با”mailto:“ قرار دهيد.

در خصوصيت method تعيين مي‌شود که اطلاعات گرفته شده از فرم چگونه و به چه صورت به برنامه و فايل پردازشگر اطلاعات برسد. به دو روش اطلاعات را مي‌توان به سرور فرستاد، يکي روش get و ديگري روش post مي‌باشد. اين دو روش تفاوتي با هم دارند که روش دوم يعني post استفاده بيشتري دارد. در روش اول بايد خصوصيت method=” “ را برابر با کلمه get قرار دهيم که پس از وارد کردن اطلاعات و زدن دکمه تاييد فرم، مطالب وارد شده، به انتهاي آدرس درمرورگراضافه مي‌شود که از لحاظ امنيتي روش خوبي نيست اما در روش دوم اينگونه عمل نمي‌شود و در ضمن روش post با بيشتر مرورگرها سازگارتر است. خصوصيت ديگري هم هست که در تگ <form> بکار مي‌رود و براي بالا بردن امنيت يک فرم است که اطلاعات گرفته شده از فرم را رمزدار کرده و به سرور مي‌فرستد که اين خصوصيت enctype=”application/x-www.form.urlencodeed “ است .

اما همانطور که گفته شد براي فرستادن اطلاعات يک فرم از طريق ايميل به آدرسي مشخص، بايد خصوصيت action=” “ را برابر با mailto: قرار داد و همچنين method=” “ را برابر با post و در خصوصيت enctype=” “ اصطلاح multipart/form-data را مي‌نويسيم تا هر قسمت از اطلاعات وارد شده در فرم بصورت يک فايل متني جداگانه به ايميل پيوست شود و يا برابر با text/plain قرار ميدهيم. براي وارد کردن آدرس ايميل بايد آنرا در جلوي کلمه “mailto:” نوشت، بدين صورت:

دقت کنيد که بعد از زدن دکمه تاييد فرم پيغامي ظاهر شده که بيننده را از فرستادن يک ايميل مطلع مي‌کند و سپس برنامه پيش فرض ايميل کاربر باز مي‌شود .

امروزه يکي از بهترين و پرکاربرد ترين برنامه براي جمع آوري و پردازش اطلاعات از يک فرم، زبان ASP مي‌باشد که در بخش مربوطه مي‌توانيد مطالب مورد نظر و چگونگي ارتباط با بينندگان سايت را از طريق فرم بياموزيد.

استفاده از فريم

فريم چيست؟

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

به مجموعه صفحات گنجانده شده در يک صفحه frameset مي‌گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود. در ساختار اصلي کدها، ديگر تگ <body> نوشته نميشود و جاي آن تگ <frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ <body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي <body>از <frameset> استفاده کرد،

توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.

cols, rows

هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset> کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:

دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:

آدرس دهي و نامگذاري

همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “ است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “ را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.

اگر هم يک لينک در فايل 01.html داشته باشيم و بخواهيم درindex01.htm نمايش داده شود، طبق گفته‌هاي بالا:

frame border

شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ <frameset> اضافه کنيد.

noresize

هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ <frame> بيافزاييد.

scrolling

خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي scroll ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto قرار دهيد.

noframes

بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي‌کنند و فريم‌ها را نشان نمي‌دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي‌کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را هميشه به frameset اضافه کنيد:

<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>

نحوه ساخت iframe

در اين قسمت به يک مدل ديگري از فريم مي‌پردازيم که به آن Inline Frame يا iframe مي‌گويند. در اين مدل يک فريم با ابعاد مشخص داخل يک صفحه معمولي HTML قرار ميگيرد و مانند يک کادر در هر کجاي آن صفحه مي‌تواند باشد حتي در وسط . تگ کلي آن،

است که شما اين تگ را در هر قسمت از کد html مي‌توانيد بگذاريد و نيازي به تگ <frameset> نيست. کليه خصوصياتي را که براي فريم بکار مي‌رود براي iframe هم کاربرد دارد و فقط width=” “ و height=” “ هم به آن ميتوانيد اضافه کنيد تا ابعاد iframe را کنترل کنيد. فراموش نکنيد که از name=” “ استفاده کنيد تا نام آنرا براي ساختن لينک بکار بريد.

شما در يک صفحه مي‌توانيد چندين iframe داشته باشيد البته ناگفته نماند که اين عنصر در مرورگرهاي قديمي به غير از اينترنت اکسپلورر نمايش داده نمي‌شود.

به مثال زير توجه فرماييد:

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

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

اهميت حجم فايل صوتي

فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي‌باشند که بايد در انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين صفحه وب کند تر و خسته کننده تر خواهد شد.

MIME

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

MIME مخفف Multipurpose Internet Mail Extensions است.

زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي‌دهد.

فرمتهاي فايلهاي صوتي

WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي‌کند و در سيستم عامل ويندوز بکار مي‌رود. نوع MIME اين فرمت برابر است با audio/wav .

AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .

AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .

MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت‌هاي موسيقي را ذخيره و پخش مي‌کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.

افزودن فايل صوتي به زمينه صفحه

با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي‌توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي‌کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه‌هاي 5.5 به پايين آنرا پشتيباني مي‌کنند. اين تگ داراي دو خصوصيت، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي‌باشد.

افزودن فايل صوتي بصورت لينک

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

مثال

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

افزودن فايل صوتي از طريق object

يکي از بهترين راههايي که مي‌توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي‌توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي‌شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.

نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.

Embed file

تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي‌شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي‌توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي‌باشد که با کلمات false يا true مقدار دهي مي‌شوند.

Streaming Audio

احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي‌دهند و به خاطر مشکلات امنيتي، مرورگرها فايلها را پخش نمي‌کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي‌توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي‌پردازيم.

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

اما در اين صفحه مي‌پردازيم به فرمتهاي فايلهاي تصويري و معرفي تکنولوژي که توسط آن بتوانيد فايلهاي صوتي و تصويري با حجم بالا را در وب سايت قرار دهيد.

فرمتهاي فايلهاي تصويري

MPEG اين فرمت مخفف کلمات Motion Picture Experts Group است که در بيشتر سيستمها قابل اجرا مي‌باشد. نوع MIME اين فرمت video/mpeg است.

AVI اين فرمت متعلق به سيستم عامل ويندوز مي‌باشد و نوع MIME آن برابر است با video/avi .

QuickTime (MOV) اين فرمت مخصوص سيستم‌هاي Macintosh مي‌باشد که اگر مرورگري در سيستمهاي ديگر Plug-in اين فرمت را داشته باشد آنرا پخش خواهد کرد و نوع MIME آن video/quicktime مي‌باشد.

Advanced Streaming Format (ASF) اين فرمت متعلق به شرکت مايکروسافت است که MIME آن video/asf مي‌باشد.

Streaming Audio and Video

اين يک تکنولوژي است که فايلها در هنگام دانلود شدن هم قابل پخش هستند، يعني هنگاميکه فايلهاي صوتي يا تصويري در حال دانلود شدن در سيستم هستند، در همان لحظه هم مي‌توانيد آنها را مشاهده کنيد يا به آنها گوش دهيد قبل از اينکه بطور کامل در سيستم ذخيره شوند.

همانطور که مي‌دانيد يک فايل صوتي يا تصويري سنگين ممکن است چندين ساعت طول بکشد تا دانلود شود، اما براي غلبه بر اين مشکل تکنولوژي streaming audio and video بوجود آمد و در پي آن برنامه‌هايي نظير RealAudio, QuickTime, Microsoft’s streaming format عرضه شد. اين فرمتها قادر به پخش فايل در هنگام دانلود شدن هستند، بدين ترتيب که مقداري از اينگونه فايلها ابتدا در محلي از حافظه بنام بافر Buffer ذخيره شده و از آنجا پخش مي‌شود. هنگاميکه آن مقدار در حال اجرا است، مقدار ديگري از فايل در بافر ذخيره و پخش مي‌شود که به همين ترتيب ادامه پيدا مي‌کند تا کل فايل بطور کامل دانلود شود. البته اين نوع فرمتها، برنامه کاربردي مخصوص خود را مي‌خواهند و معروفترين برنامه‌ها RealOne.Player است که اين محصول فرمت RealAudio يعني ra براي فايل صوتي و RealVideo براي پخش فايلهاي تصويري را پشتيباني مي‌کند. فرمتهاي ديگر هم مانند ASF متعلق به شرکت مايکروسافت و QuickTime براي سيستمهاي Macintosh از اين تکنولوژي استفاده مي‌کنند.

شما مي‌توانيد از برنامه‌هاي ويرايشگر صوتي مانند Sound Forge و تصويري مانند Adobe Premiere براي تبديل به اين تکنولوژي استفاده کنيد.

اگر مايل هستيد از فرمتهاي Real Audio, Real Video در سايت خود استفاده کنيد بايد به چند نکته توجه کنيد، ابتدا مطمئن شويد که سرور ميزبان سايت شما از اين تکنيک پشتيباني مي‌کند و در آن يکسري تنظيمات بايد انجام شود، مثلاً براي فرمت Real Audio دو نوع MIME بايد در سرور تعريف شود:

audio/x-pn-realaudio (files with a .ra or .ram file extension)
audio/x-pn-realaudio-plugin (files with a .rpm file extension)

سپس بايد يک برنامه براي تبديل فرمتهاي مختلف به اين فرمت و يک برنامه براي پخش اين نوع فرمت در سيستم خود داشته باشيد که مي‌توانيد آنها را از وب سايت http://www.real.com فراهم کنيد و در آخر هم يک فايل بنام متا فايل Meta File بايد درست کنيد براي ذخيره واستفاده از بافر، بدين ترتيب که، ابتدا يک برنامه ويرايشگر متن مانند Notepad را باز کرده وداخل آن آدرس فايل بر روي سايت خود را مي‌نويسيد، بطور مثال اگر نام فايل realtest.ra است و در دايرکتوري realaudiofile قرار دارد بايد خط زير را وارد کنيد بدون هيچ چيز اضافه،

http://www.yourdomain.com/realaudiofile/realtest.ra

سپس اين فايل متني را با نام دلخواه و با پسوند .ram ذخيره کرده و همراه با فايل صوتي مورد نظر به سرور خود منتقل کنيد. فقط دقت کنيد که براي فراخواني آن فايل بايد يک لينک بسازيد که متا فايل مربوطه را صدا کند نه خود فايل صوتي يا تصويري.

نکته: بيننده سايت بايد برنامه مخصوص پخش اين گونه فرمت را در سيستم خود داشته باشد. اگر MIME به درستي تعريف نشده باشد، فقط متن داخل متا فايل نمايش داده خواهد شد و دقت کنيد تا هنگام منتقل کردن فايلهاي صوتي و تصويري توسط برنامه FTP اگر تنظيمات را به صورت دستي انجام ميدهيد حتماً از گزينه Binary استفاده کنيد.

تگ‌های قسمت Head

<!doctype>

در اين بخش ميخواهم در مورد تگ‌هاي قسمت <head> برايتان توضيح دهم . همانطور که ميدانيد تگ‌هاي Html را به دو بخش اصلي تقسيم کرديم، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده <html>و آن DTD يک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگ‌ها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD، <!doctype> ميباشد و مانند بقيه تگ‌ها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.

هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه‌هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگ‌هاو نسخه‌هاي HTML , XHTML به عهده W3C ميباشد .

DTD براي HTML 4.0

<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>

و براي XHTML 1.0

<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>

بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگ‌هاي مربوط به قسمت سر يا همان head .

مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود که در مرورگر نشان داده نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود. اين اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها بيشتر توضيح خواهم داد.

تگ‌هاي لازم براي اين قسمت به شرح زير ميباشند:

بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.

<base>

در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.

دقت کنيد که نوشتن پروتکل http اجباري است.

<meta>

متا تگ‌ها اطلاعات مربوط به موتورهاي جستجوگر را کنترل ميکنند. در اين تگ‌ها هر نوع اطلاعات که براي جستجو نياز باشد را وارد ميکنيد، مانند کلمات کليدي يا نام سازنده سايت و يا تاريخ راه اندازي و از اين قبيل که در بخش سايتهاي جستجوگر بيشتر توضيح خواهم داد. خصوصياتي را که در اين تگ ميتوانيد بکار بريد،

http-equiv=” “, name=” “ , content=” “

براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword” قرار دهيم و کلمات مورد نظر را در خصوصيت content=” “ وارد کنيم،

همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.

اين تگ به مرورگر ميفهماند که بايد از حروف و علامتهاي يونيکد براي نمايش صفحه استفاده کند. براي وارد کردن اطلاعات ديگر هم مانند زير عمل ميکنيد:

اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:

يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:

که آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک صفحه ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد

<link>

اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،

کدهايي مانند javascript را در اين تگ کنترل ميکنيم که در بخش جاوا اسکريپت توضيح خواهم داد.

<style>

تگ مشخصه Style sheet ميباشد که در بخش مربوطه توضيح داده شده است.

خصوصيات تگ Body

همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.

اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي‌باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.

bgcolor اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي‌توانيد از کد هگز رنگها،

و يا نام رنگ را بکار بريد، مانند:

مثال

نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.

background توسط اين خصوصيت بجاي رنگ مي‌توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،

توجه داشته باشيد که حجم عکس در سنگيني صفحه و پايين آمدن سرعت تکميل شدن آن موثر است. هنگاميکه از اين خصوصيت استفاده مي‌کنيد آن عکس نسبت به اندازه اي که دارد در صفحه تکرار مي‌شود تا فضاي آنرا بپوشاند که با استفاده از StyleSheet تکرار آنرا مي‌توانيد کنترل کنيد.

bgproperties هنگاميکه عکسي به زمينه اضافه مي‌شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي‌شود يعني به بالا و پايين يا چپ و راست حرکت مي‌کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي‌ماند و عناصر بر روي آن حرکت مي‌کنند.

لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.

topmargin توسط اين خصوصيت حاشيه بالاي صفحه کنترل مي‌شود که مقدار آن عدد در مقياس پيکسل مي‌باشد.

leftmargin حاشيه سمت چپ صفحه را کنترل مي‌کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.

text اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگ‌ها تکرار نکنيد، مي‌توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.

dir اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي‌باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي‌شود.

lang اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي‌نويسيد.

link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي‌بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي‌نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي‌کنيد.

خصوصيات ديگري هم هست مانند onload که مربوط به زبان جاوا اسکريپت مي‌باشد که در بخش مربوطه با آنها آشنا خواهيد شد.

Html 4.01 و تفاوتهاي آن با نسخه 4.0

HTML 4.01 نسخه اصلاح شده 4.0 مي‌باشد که براي هماهنگي با نسخه جديد يعنيXHTML و نسل بعدي زبان وب که XML باشد، در وب منتشر شد. اين نسخه با تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگيري مجموعه HTML 4 قوانين بکار برده شده در XHTML را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده يکسري تگ‌ها از طرف انجمن W3C ديگر توصيه نميشود وحتي بعضي از آنها ممنوع شدند.

براي شروع کدنويسي در HTML 4.01 اولين چيزيکه بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگ‌هاي استاندارد و قابل قبول استفاده خواهد کرد:

<!DOCTYPE HTML PUBLIC
‘’-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

اگر در آن صفحه تگ‌هاي از رده خارج هم بکار برده ايد بايد از اين مدل DTD استفاده کنيد:

<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

همچنين اگر از عنصر Frame استفاده ميکنيد اين مدل را بکار بريد:

<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

بعد از مشخص کردن DTD آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگ‌ها، پايان دهنده داشته باشند. بعضي از تگ‌ها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود مانند <img>,<p> . اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > بايد علامت slash يعني/ را بگذارند. مانند:

اين قبيل تگ‌ها را بدين صورت بکار بريد:

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

اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با XHTML سازگار شود.

آموزش Xhtml

زبان XHTML که مخفف EXtensible HyperText Markup Language در تاریخ 26 ژانویه سال 2000 منتشر شد و به قول بعضيها همان HTML 5 میباشد که در واقع اینچنین نیست. این زبان نسل جدید زبان وب ميباشد که داراي یکسري اصول و قوانین خاص است تا کمبودهايHTML را در مورد دستگاههاي کوچک الکترونیکي که به وب هم متصل ميشوند مانند تلفنهاي همراه، را جبران کند.

مدتي است که وب آماده معرفي زبان آينده خود يعني XML است که XHTML اين وظيفه را بعهده دارد. در اين نسخه کدهايHTML بايد در DTD نوشته شوند. هر مرورگر وب، داخل خود يک نوع DTD دارد و به همين دليل است که يکسري از دستورات نسخه‌هاي مختلف HTML در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد دستورات HTML را در DTD خاص خود بکار بريد، چون انجمن W3C ميخواهد يک استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه User-agent‌ها برقرار شود. User-agent برنامه‌هاي تحت وب مانند مرورگرها را گويند.

W3C پيشنهاد داده که HTML بايد يک برنامه کاربردي تحت XML باشد تا برنامه نويسان وب مجبور به رعايت استاندارد آن شوند.

با قبول کردن DTD برايXHTML و نوشتن آن، بايد اصول و قوانين اين نسخه را هم رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد.

پس ابتدا از DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD براي نسخه‌هاي HTML لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي XHTML نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع DTD براي حالتهاي مختلف وجود دارد:

حالت اول براي صفحه اي است که فقط از دستورات صحيح 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”>

فراموش نکنيد که نوشتن يکي از آنها اجباري است.

حالا نکاتي را که بايد در اين نسخه رعايت کنيد:

نوشتن تگ‌هاي</head></body> که در HTML اجباري نبود در XHTML اجباري است.

وجود تگ‌هاي پايان دهنده اجباري است مانند: <p>….</p>, <hr/>, <br/>

کليه تگ‌ها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته شود. مانند: <body bgcolor=”#ffcc45”>

مقادير خصوصيات در تگ‌ها بايد بين دو علامت “…” قرار گيرند.

ترتيب قرار گرفتن تگ‌ها داخل هم بايد رعايت شود،

<b><i> TEXT </b></i> روش غلط

<b><i> TEXT </i></b> روش صحيح

بعضي از خصوصيات در HTML نياز به مقداردهي نداشتند اما در XHTML آنها را بايد مقداردهي کنيم،

<input type=”radio” checked> روش غلط

<input type=”radio” checked=”checked”> xhtml روش صحيح در

در تگ <pre> فقط از متن بايد استفاده کنيد و داخل آن از تگ‌هاي ديگر نميتوانيد استفاده کنيد.

يک فرم را داخل فرم ديگر نبايد بکار بريد.

دستورات فايل CSS بايد به صورت حروف کوچک نوشته شوند و بهتر است که براي Style sheet از فايل خارجي استفاده کنيد.

کليه خصوصياتي را که ميتوان با style sheet کنترل کرد از خصوصيات HTML آنها بهتر است استفاده نشود.

دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط تگ <link> فراخواني شوند ولي اگر ميخواهيد داخل XHTML DTD از آنها استفاده کنيد بايد مانند زير عمل کنيد:

ديگر از تگ  براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت نياز مانند زير عمل شود،

<[CDATA […comment…] ]>

همانطور که ميبينيد يکسري محدوديتهايي هست که در HTML نبود و سادگي زبان HTML که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض به گفته W3C دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، Extensibility و Portability

آموزش استایل شیت (Cascading Style Sheet)

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

با استایل شیت چه کارهایی میتوانید انجام دهید؟

با این عنصر شما میتوانید مدل، اندازه، رنگ و نوع آرایش متن، رنگ زمینه و حاشیه صفحات و جدولها، تنظیمات لیستها و همچنین عکسها را کنترل کنید.

تعیین الگو و style

هر style باید برای یک تگ خاص تعریف شود . به محتوای داخل تگی که میخواهیم یک style نسبت دهیم selector یا انتخاب کننده میگویند که الگوی تعریف شده در تگ آغاز کننده یک عنصر تا تگ پایان دهنده آن تاثیر خواهد داشت.

برای تعیین و تعریف یک الگو ابتدا باید selector را مشخص و بنویسیم مانند h1 سپس خصوصیات و مقادیر آنها را بین دو علامت { } بگذاریم که طرز نوشتن خصوصیت و مقدار آن بین { } به این ترتیب میباشد:

ابتدا خصوصیت را نوشته سپس علامت : میگذاریم و بعد مقدار مشخصه آنرا مینویسیم،

h1 { color:green }

اگر بخواهیم چند خصوصیت را به یک selector نسبت دهیم، بعد از هر کدام یک ; میگذاریم،

h1 { color:green; text-align:center }

روشهای تعریف الگو و style

Style‌ها را به سه روش میتوان تعریف کرد:

روش اول: به عنوان یک الگوی خارجی که اطلاعات در یک فایل نوشته میشود و با پسوند .css ذخیره میشود که در تگ <link> داخل قسمت head آدرس دهی و فراخوانده میشود.

روش دوم: style را میتوانیم در قسمت head نوشته و جاسازی کنیم که با تگ‌های<style></style> مشخص میشوند.

روش سوم: با قرار دادن style به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر:

نکته: اگر برای یک selector به چند روش style تعیین شود، آن الگویی که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه مؤثرتر است. در ضمن هیچ محدودیتی در تعیین selector‌ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید:

تعریف الگو از طریق class

گاهی اوقات یک style به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector انتخاب میکنید، بدین ترتیب که بلافاصله بعد از selector یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر تگی که نیاز به آن الگو هست خصوصیت class=” “ را مینویسیم و برابر با آن اسم قرار میدهیم،

<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>

فراخوانی فایل css در تگ <link>

ارزش واقعی style sheet زمانی به چشم میاید که یکبار آنرا تعریف کنید و در تمام صفحات از آن بهره ببرید. برای این منظور شما فقط از طریق روش اول میتوانید اینکار را انجام دهید، بدین ترتیب که style‌ها را در برنامه ویرایشگر متن مانند notepad مینویسید و سپس آن فایل را با پسوند .css ذخیره کرده و در دایرکتوری اصلی وب سایتتان قرار میدهید. css مخفف Cascading Style Sheet است.

نکته: دراین روش نیازی به نوشتن تگ‌های<style></style> نیست و فقط selector‌ها و خصوصیات را مینویسید. در صورت رعایت نکردن این موضوع الگوهای تعریف شده در آن فایل در صفحات اعمال نخواهند شد.

پس از ذخیره فایل style sheet میتوانید برای هر صفحه که میخواهید آنرا فراخوانی کنید، برای انجام این عمل باید تگ <link> را در قسمت head قرار دهید و سه خصوصیت مربوط به آنرا وارد کنید. خصوصیت rel=” “ است که برابر با کلمه stylesheet قرار میدهید و سپس type=” " وبا text/css مقداردهی میشود و در آخر با خصوصیت href=” “ فایل را آدرس دهی میکنید،

این تگ نیازی به پایان دهنده ندارد.

خصوصيات استايل شيت

در اين قسمت ميپردازيم به خصوصيات style‌ها که ابتدا از عنصر متن شروع ميکنيم که در تگ‌هاي <p><div><span> بيشتر کاربرد دارد.

Style براي عنصر متن

text-align محل قرارگيري متن در يک سطر را کنترل ميکند و با justify, left, center, right مقداردهي ميشود.

text-indent براي دندانه دار کردن متن بکار ميرود و با عدد مقدار دهي ميشود که اگر در مقياس پيکسل باشد بعد از عدد بايد px نوشته شود مانند: text-indent:20px و اگر با درصد مقداردهي شود بايد علامت % را بگذاريد.

letter-spacing اندازه بين حروف را کنترل ميکند که براي حروف فارسي مناسب نيست و با عدد مقداردهي ميشود که بعد از عدد px يا em نوشته ميشود که در em بين حروف فاصله اي به اندازه حرف m توليد ميشود.

line-height براي کنترل فاصله خطوط از هم بکار ميرود و با عدد سپس px مقداردهي ميشود.

font-family براي تعيين نوع فونت بکار ميرود که در اين خصوصيت ميتوانيد چندين فونت را قرار دهيد که اگر سيستم بيننده سايت يک از آن فونتها را نداشت از ديگري استفاده کند، بدين صورت:font-family:Arial, Tahoma, Times New Roman

font-style آرايش فونت را از لحاظ اريب بودن تعيين ميکند که ميتوانيد از normal, italic, oblique استفاده کنيد.

font-weight آرايش حروف را از لحاظ ضخامت تعيين ميکند که به دو روش مقدار ميدهيد، با کلمات lighter, normal, bold, bolder و يا با اعداد بين 100 تا 900 .

font-size اندازه حروف را به سه مدل کنترل ميکند : در مدل absolute sizes از کلمات xxsmall, small, medium, large, xlarge, xxlarge در مدل relative sizes از smaller, larger استفاده ميکنيم و در مدل font-point-size اعداد 1 تا 12 قرار ميدهيم که بعد از عدد pt بايد بنويسيم .

نکته: شما ميتوانيد چند خصوصيت بالا را که مربوط به font ميباشد را يکجا بصورت خلاصه تعريف کنيد که در اين حالت نيازي به نوشتن خصوصيات نيست و فقط مقادير آنها را به ترتيب زير مينويسم:

font-style,font-weight,font-size,font-family

کلمه font را به عنوان selector مينويسيم و مقاديرخصوصيات را به ترتيب بالا با رعايت فاصله دربين { } قرار ميدهيم،

font { italic bold 20pt “Arial” Tahoma }

Color رنگ متن را تعيين ميکند که هم اسم رنگ و يا کد هگز رنگ را مينويسيد.

text-decoration اين خصوصيت وظيفه کشيدن خط براي حروف را دارد که ميتوان از underline براي کشيدن خط زير حروف، از overline در بالاي حروف، line-through بر روي حروف استفاده کرد و اگر نيازي به کشيدن خط نيست از none استفاده ميشود، همچنين blink که براي چشمک زدن حروف بکار ميرود ولي مرورگر اينترنت اکسپلورر آنرا نمايش نميدهد.

text-transform اين خصوصيت حروف را براي بعضي از زبانها مانند انگليسي کوچک و بزرگ ميکند و کاربردي براي فارسي ندارد. مقادير مربوط به آن none, capitalize, uppercase, lowercase است.

Style براي زمينه صفحه و يا جدولها

background-color توسط اين خصوصيت رنگ زمينه را کنترل ميکنيد که اسم رنگ يا مقدار مخلوط سه رنگ قرمز، سبزوآبي را که rgb مينامند مينويسيد براي هر رنگ از عدد 0 تا عدد 255 در نظر گرفته شده است. Style=”background-color: rgb(10,255,0)” داخل پرانتز عدد 10 نمايانگر رنگ قرمز و 255 رنگ سبز و 0 رنگ آبي است که شما هم بايد به همين ترتيب بنويسيد.

background-image توسط اين خصوصيت ميتوانيد يک عکس به زمينه صفحه يا جدول اضافه کنيد.

background-image: { url ( www.sitename.com/images/image.gif ) }

background-repeat زمانيکه بوسيله خصوصيت بالا يک عکس به زمينه صفحه يا يک جدول اضافه ميکنيد، آن عکس نسبت به اندازه اي که دارد آنقدر تکرار ميشود تا زمينه صفحه را پر کند اما توسط اين خصوصيت ميتوانيد تکرار آن را کنترل کنيد که اگر مقدار را repeat-x قرار دهيد فقط يک رديف بصورت افقي تکرار ميشود و اگر repeat-y باشد بصورت عمودي و no-repeat باشد همان عکس فقط ديده ميشود بدون تکرار.

background-attachment اگر مقدار اين خصوصيت را fixed قرار دهيد عکسي که در زمينه صفحه است ثابت ميماند و عناصر و محتواي صفحه با scroll کردن بالا و پايين خواهند شد ولي اگر مقدار را scroll بگذاريم همراه با بقيه عناصر حرکت ميکند.

background-position به کمک اين خصوصيت محل قرارگيري عکس در زمينه صفحه را تعيين ميکنيد که مقادير آن عبارتند از، top,bottom,center,left,right

نکته: شما ميتوانيد همه خصوصيات مربوط به زمينه background يا چند تا از آنها را بطور يکجا تعريف کنيد که با اين موضوع آشنا هستيد. و اما ترتيب قرار گرفتن آنها بدين صورت است،

background-color,background-image,background-repeat,

background-attachment,background-position

به مثال زير دقت بفرماييد:

background: { green url(image.gif) no-repeat fixed bottom }

style=” background: green url(image.gif) no-repeat scroll bottom right “

style براي حاشيه margin

margin براي افزودن حاشيه به کناره‌هاي عناصر داخل صفحه مانند پاراگرافها، عکسها يا حتي خود صفحه بکار ميرود که توسط اين خصوصيت حاشيه را در چهار طرف با دادن مقادير عددي بر حسب پيکسل و يا درصد ميتوانيد کنترل کنيد. به اين نکته توجه فرماييد که اگر براي هر طرف مقادير متفاوت ميخواهيد بکاربريد پس بايد چهار مقدار با فاصله از هم بنويسيد مانند: margin:20px 45px 40px 100px که اولين عدد از سمت چپ مربوط به حاشيه بالاي عنصر و بترتيب براي راست، پايين و چپ محاسبه ميشود. و يا ميتوانيد دو عدد بکار بريد که مقدار اول حاشيه بالا و پايين و مقدار دوم حاشيه چپ و راست را کنترل ميکند و همچنين اگر حاشيه‌ها بايد بمقدار مساوي باشند فقط يک عدد کافي است.

padding اين خصوصيت هم مانند margin عمل ميکند.

Style براي کادر border

border اين خصوصيت عناصر صفحه را داخل يک کادر قرار ميدهد که در سه قسمت مقدار دهي ميشود، اولين مقدار مدلهاي مختلف کادر را تعيين ميکند که مقادير آن عبارتند از: none, dotted, dashed, solid, double, groove, ridge, inset, outset دومين مقدار مربوط به تعيين ضخامت کادر است که با thin, medium, thick و يا با عدد بهمراه px و آخرين مقدار رنگ کادر را کنترل ميکند، مانند:

style=” border: groove thin green”

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

margin-top: 40px
padding-left: 100px
border-bottom: dotted

Style براي کنترل طول height و عرض width

height, width همانطور که ميدانيد اين دو خصوصيت براي کنترل ابعاد يک عنصر مانند جدول و يا يک عکس بکار ميروند که با عدد بر حسب پيکسل و با علامت مشخصه px و يا با درصد مقدار دهي ميشوند در ضمن شما ميتوانيد مقدار auto هم قرار دهيد که آن عنصردر اندازه حقيقي خود ظاهر شود.

Style براي قرار گرفتن دو عنصر در کنار هم alignment

float اين خصوصيت مانند align عمل ميکند و با none, left, right مقداردهي ميشود محل قرار گيري دو عنصر را در کنار هم کنترل ميکند.

clear اين خصوصيت برعکس float است و مشخص ميکند که در کدام طرف يا در هر دو سمت هيچ عنصري نباشد که با none, left, right, both هم مقداردهي ميشود.

Style براي ليستها lists

list-style-type نوع ترتيب قرارگرفتن ليستها را کنترل ميکند که عدد يا علامت ابتداي هر گزينه در ليست بيايد که ميتوانيد از مقادير none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha استفاده کنيد.

list-style-image اگر بخواهيد بجاي مقادير بالا از عکس دلخواه خودتان براي علامتهاي ابتداي گزينه‌ها استفاده کنيد ميتوانيد اين خصوصيت را بکار بريد.

list-style-image: url ( images/bullet.gif )

list-style-position اين خصوصيت گزينه‌هاي ليست را دندانه دار ميکند و با inside, outside مقدار دهي ميشود که بصورت پيش فرض براي ليستها outside در نظر گرفته ميشود.

نکته: بهتر است در اين خصوصيات تگ li را به عنوان selector انتخاب کنيد و همچنين اين سه خصوصيت را ميتوانيد بصورت خلاصه و يکجا بکار بريد

li { list-style: circle url(bullet.gif) inside }

همانطور که مشاهده ميکنيد ترتيب قرار گرفتن مقادير ابتدا type سپس image و در آخر position است.

Style براي scrollbar

اگر شما بخواهيد رنگ scrollbar مرورگر را تغيير دهيد ميتوانيد style زير را به قسمت head صفحه اضافه کنيد:

البته متناسب با رنگ آميزي صفحه ميتوانيد نام رنگها را تغيير دهيد. در هر عنصر ديگري که از scrollbar استفاده ميشود هم ميتوانيد با اضافه کردن خصوصيت style=” “ به تگ مربوطه، رنگ آنرا کنترل کنيد. بطور مثال براي تغيير رنگ scrollbar در textarea داخل يک فرم، بصورت زير عمل ميکنيد:

Style براي نشانگر موس cursor

بيشتر مواقع نشانگر موس بصورت يک فلش است که براي تغيير دادن شکل آن در صورت نيازاز خصوصيات زير استفاده کنيد:

cursor: auto نشانگر بصورت معمول نمايش داده ميشود.

cursor: crosshair بشکل علامت مثبت است.

cursor: default شکل پيش فرض خود را دارد.

cursor: hand مانند لينکها شکل دست بخود ميگيرد.

cursor: e-resize بصورت فلش شرقي غربي است.

cursor: n-resize فلش شمالي جنوبي است.

cursor: ne-resize فلش شمالشرقي به جنوبغربي.

cursor: nw-resize برعکس حالت بالا.

cursor: help يک علامت سوال اضافه ميکند.

cursor: move فلش در چهارجهت .

cursor: text بشکل نشانگر برروي متن است.

cursor: wait شکل ساعت شني براي انتظار را اضافه ميکند.

فارسي نويسي در وب

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

خب دوستان براي راه اندازي يک وب سايت فارسي ابتدا بايد سيستم عاملي داشته باشيد که فارسي ساز داشته باشد و يا مانند ويندوز XP, 2000 سازگار با زبان فارسي باشد تا توانايي تايپ فارسي را داشته باشيد، در ضمن بهتر است که از برنامه‌هايي نظيرMS Word يا FrontPage از مجموعه آفيس مايکروسافت استفاده کنيد چون ميتوانيد مستقيم فارسي بنويسيد و آنرا بصورت فايلhtml ذخيره کنيد. با هر برنامه اي که راحت هستيد، متن را وارد کنيد و سپس به سورس source صفحه برويد و تگ زير را در قسمتHead وارد کنيد،

اين تگ، encoding مرورگر را براي استفاده از حروف و علامتهاي يونيکد تنظيم ميکند. براي ديدن و تنظيم encoding يک صفحه بصورت دستي بايد وارد منوي view در مرورگر شويد و برروي Encoding رفته واز ليست باز شده گزينه مورد نظر را انتخاب کنيد. اما وظيفه آن، تنظيم مرورگر بيننده براي نمايش صحيح حروف و علامتهاي بکار گرفته شده دروب سايت شما است چون هر کدام از آنها علامت و فونت خاص خود را دارند. تا بحال با يک نامه فارسي درايميل خود برخورد کرده ايد که يکسري حروف عجيب و غريب داشته باشد؟ اگر جوابتان بله است از اين به بعد وارد encoding شويد و آنرا روي Utf-8 بگذاريد.

خب حالا نوبت به انتخاب فونت رسيده که يک فونت مناسب بايد استاندارد بوده و خاصيت يونيکد را هم داشته باشد. بهترين فونتها در سيستم عامل ويندوز که مناسب فارسي نويسي هستند عبارتند از:

Arial, Tahoma, Times New Roman

پس از انتخاب فونت، بهتر است که خصوصيات lang=”fa”, dir=”rtl” را به تگ‌هايي مانند <body>, <font>, <p>, <div>, <span> اضافه کنيد که خصوصيت lang=” ” مشخص کننده زبان بکار گرفته شده و fa نمايانگر فارسي farsi است و همينطور خصوصيت dir=”rtl” که جهت نوشتن را تعيين ميکند و rtl نمايانگر راست به چپright to left است.

نکته: اگر خصوصيت dir=”rtl” را در تگ <body> بکار بريد، محل قرار گرفتن scroll bar در مرورگر از طرف راست به طرف چپ منتقل ميشود که اين خاصيت فقط در مرورگر اينترنت اکسپلورر IE عمل ميکند.

ممکن است شما بعد از ذخيره صفحه با يک مشکلي برخورد کنيد که بيشتر در مرورگرهاي نسخه قديمي مانند IE 5.5 به پايين مشاهده ميشود و آن ديدن حرف ي بزرگ در وسط کلمه بجاي نوع کوچک است مانند: ا ي نترنت که براي برطرف کردن آن دو راه وجود دارد:

اولين راه قرار دادن نسخه جديد فونت بکار گرفته شده در سايت براي دانلود کردن آن توسط بيننده وب سايت و نصب آن که هر کسي شايد بدرستي نتواند آنرا انجام دهد و اما راه حل دوم، ابتدا صفحه مورد نظر را در برنامه FrontPage باز کنيد و به قسمتHTML در پايين برنامه رفته که در اين قسمت سورس کد را خواهيد ديد و کدی را حذف و بجاي آن کد ي را قرار ميدهيد و سپس صفحه جديد را دوباره ذخيره ميکنيد. دقت کنيد، در صورتي حروف فارسي را به اين شکل خواهيد ديد که encoding برابر با windows-1252 باشد، يعني:

يک نکته ديگر را بخاطر بسپاريد که اگر عنوان صفحه را فارسي تايپ کنيد يعني در قسمت<title> در بعضي از مرورگرها نمايش داده نخواهد شد

بررسی و امتحان کردن صفحات

زمانيکه شما نوشتن کدهاي html را در برنامه notepad يا ويرايشگرهايHTML تمام کرديد، بعد از ذخيره کردن آن فايل با يکي از پسوندهاي .htm يا .html و با استفاده از مرورگر وب خود آنرا امتحان کنيد تا نتيجه کارتان را مشاهده و اگر مشکلي هم داشت برطرف شود. مشکلاتي مانند نمايش نادرست صفحه يا حتي غلطهاي ديکته اي که زياد هم به چشم ميخورند.

شما اين صفحات را قبل از اينکه روي سرور بگذاريد تا ديگران هم ببينند، بر روي کامپيوتر خود ميتوانيد امتحان کنيد ولي اگر از فايلهاي ASP يا CGI استفاده کرده ايد نياز به يک وب سرور براي چک کردن آنها داريد. شرکت مايکروسافت دو نرم افزار دارد که توسط آنها ميتوانيد يک وب سرور درست کنيد و اينگونه فايلها را هم مشاهده کنيد. يکي از آنها IIS که مخفف Internet Information Services است و بر روي ويندوزهاي 2000 و XP نصب ميشود و ديگري PWS که مخفف Personal Web Server است و بر روي ويندوزهاي98 و ME اجرا ميشود.

سعي کنيد هر صفحه را در مرورگرهاي مختلف چک کنيد که معروفترين آنها عبارتند از:

Internet Explorer ( IE ), Netscape Navigator ( NN ), Opera, Mozilla

چون بعضي از تگ‌ها در همه مرورگرها اجرا نميشوند و همچنين اينرا در نظر داشته باشيد که سيستمهاي عامل هم با يکديگر فرق دارند. بطور مثال فونتها و طرز نمايش صفحه داخل مرورگر Netscape در سيستم عامل Windows با Macintosh فرق ميکند.

برنامه‌هايي بنام HTML validator موجود ميباشند که با کمک آنها ميتوانيد عيب‌هاي صفحات را پيدا کنيد. بطور مثال اگر تگ پايان دهنده اي را فراموش کرديد آنرا پيدا کرده و بعضي از آنها حتي آن مشکل را رفع هم ميکنند. اگر از ويرايشگرهايي مانند Microsoft FrontPage يا Macromedia Dreamweaver استفاده ميکنيد، خود اين نرم افزارها برايتان عيب يابي ميکنند و نيازي به برنامه اضافي براي اين کار نداريد.

همچنين شما ميتوانيد به آدرس http://validator.w3.org مراجعه کنيد براي تأييد صفحات وب سايتتان که مزيت اين آدرس در اين است که بعد از رفع عيوب احتمالي، به شما اجازه استفاده از لوگوي مخصوص خودشان را در اين زمينه ميدهند که نمايانگر بي نقص بودن صفحات ميباشد. اين سايت زير نظر انجمن W3C ميباشد که وظيفه تأييد و اعلان کدهايHTML, XHTML, CSS, … را بعهده دارند.

از نکاتيکه هنگام چک کردن يک صفحه نبايد فراموش کنيد، امتحان کردن لينکها است تا همه آنها به آدرس درست پيوند داده شوند. يکسري برنامه هم در اين زمينه وجود دارد که به آنها site-management tools گفته ميشود.

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

upload و راه اندازي سايت

بعد از آماده کردن صفحات سايت و رفع ايراد آنها حالا نوبت به راه اندازي و برپايي وب سايتتان رسيده است. براي اينکار نياز به يک فضاي امن در يک سرور داريد. سرور، يک کامپيوتر متصل به اينترنت است که محتواي وب سايت شما بر روي هارد ديسک آن قرار خواهد گرفت که به اين عمل web hosting يا ميزباني وب ميگويند. يکبار تنظيمات اوليه توسط متخصصان انجام ميشود و از آن به بعد تمام کسانيکه به اينترنت دسترسي دارند ميتوانند سايت شما را هم ببينند. شما بايد فايلهاي خود را بر روي سرور upload کنيد، يعني اطلاعات را از کامپيوتر خود به کامپيوتر اصلي بفرستيد. Upload بر عکس اصطلاح download است که در دانلود اطلاعات را از کامپيوتر ديگري جمع آوري کرده و در کامپيوتر خود ذخيره مي‌کنيد.

پيدا کردن سرور مناسب

براي upload کردن صفحات نياز به يافتن يک فضاي مناسب با امنيت بالا داريد. بطور معمول شرکتهاي سرويس دهنده اينترنت (ISP) اين فضا را به شما اجاره خواهند داد. براي برپايي يک سايت معمولي نياز به 5 الي20 مگابايت فضا داريد. سايتهايي هم هستند که اين فضا را بطور رايگان دراختيار شما مي‌گذارند که در عوض تبليغات خود را در صفحات سايت شما جاي ميدهند. يکي از اين سايتها www.geocities.com است.

در نظر داشته باشيد که شرکتهاي اينترنتي زيادي با قيمتهاي متفاوت وجود دارند که شما بايد قيمتها را نسبت به امکاناتيکه در اختيار شما قرار ميدهند، بسنجيد و سپس اقدام به اجاره فضا کنيد.

ثبت اسم و دامنه سايت Domain Registartion

پس از پيدا کردن سرور مناسب نوبت به ثبت اسم وب سايت ميرسد که اين کار شامل هزينه اضافي ميباشد و ميتوانيد در همان شرکتي که ميزباني سايت شما را به عهده دارد، آنرا به ثبت برسانيد. البته اسم مورد نظر شما نبايد از قبل رزرو شده باشد. سايتهايي وجود دارند که اسم مورد نظر خود را ميتوانيد در آن جستجو کنيد تا اگر آن اسم رزرو نشده باشد، اقدام به ثبت آن کنيد. يکي از اين سايتها www.register.com ميباشد.

Upload کردن فايلها توسط FTP

چند روش براي انتقال محتواي سايت شما بر روي سرور وجود دارد. بهترين راه استفاده از پروتکل FTP که مخفف File Transfer Protocol ميباشد. براي استفاده از اين سرويس برنامه‌هايي هست که اينکار را براي ما انجام ميدهند. معروفترين برنامه‌ها Cute FTP و WS FTP ميباشند. يکي از امکاناتي که شرکت ميزبان در اختيار شما بايد قرار دهد همين سرويس ميباشد که مشخصات لازم مانند password يا همان کلمه رمز را به شما ميدهند و شما اطلاعات لازم را در برنامه FTP وارد کرده و به دايرکتوري مشخص در سرور وصل ميشويد. زمانيکه اين ارتباط برقرار شود بايد عمل انتقال فايلها را انجام داد که بيشتر برنامه‌هاي FTP داراي دو پنجره ميباشند که يکي محتواي کامپيوتر خودتان را و ديگري دايرکتوري رزرو شده در سرور را نشان ميدهد. عمل انتقال فايلها به دو روش انجام ميشود، يکي بصورت ASCII که مخصوص انتقال فايلهاي داراي متن مانند خود صفحات HTML و ديگري بصورت Binary که مخصوص انتقال فايلهاي گرافيکي، صوتي و تصويري ميباشد. دقت کنيد که اگر اشتباه انتخاب کنيد فايلها خراب شده و قابل استفاده نميباشند، اما نگران اين موضوع نباشيد، داخل برنامه‌هاي مربوطه گزينه اي هست که بطور اتوماتيک اينکار را انجام ميدهد و فقط شما بايد آنرا فعال کنيد.

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

موتورهای جستجو

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

يکي از اساسي ترين راههاي جذب بيننده، ثبت صفحات سايت در موتورهاي جستجوگر search engines است، چون هر کسي در هر کجا که باشد ميتواند سايت شما را پيدا کند.

موتور جستجوگر چيست؟

در حال حاضر تعداد زيادي سايت جستجوگر مانند، AltaVista, Mama, Yahoo, Google داريم که هر کدام از اينها توسط برنامه‌هاي گردشگر بنام spider, web crawler, robot مرتب در وب بدنبال صفحات جديد و يا تغييريافته ميگردند و به محض پيدا کردن آنها، اطلاعات مورد نظر را در پايگاه داده ايDatabase خود، ليست ميکنند تا در موقع لزوم و بهنگام جستجو در اختيار کاربران قرار دهند. زمانيکه شما بدنبال يک کلمه کليديkeyword در آن سايتها مي‌گرديد، اطلاعات پايگاه داده اي آنها را جستجو ميکنيد و سپس نزديکترين مطالب به کلمه کليدي را براي شما نمايان ميکنند که هر چه آن کلمه دقيق تر باشد، شما به مطلب مورد نظر زودتر و راحت تر دسترسي پيدا ميکنيد.

چگونه صفحات در پايگاه داده اي Database ليست ميشود؟

هنگاميکه robot‌ها و يا يک برنامه گردشگر ديگر بطور اتوماتيک گردش خود را شروع ميکند، به محض يافتن يک سايت جديد در وب ابتدا به سراغ فايلي بنام robots.txt ميگردد، سپس مطالب قسمت HEAD و بدنبال آن اطلاعات نوشته شده در متاتگ‌ها را جمع آوري ميکند و پس از يک پردازش دقيق با استفاده از يک الگوريتم مخصوص، صفحات را در پايگاه داده اي خود ذخيره و ليست ميکند.

فايل robots.txt چيست؟

robots.txt يک فايل متني است که اين فايل را ميتوانيد در سرور و در دايرکتوري وب سايت خود قرار دهيد تا تنظيمات گردش برنامه‌هاي گردشگر را در آن کنترل کنيد و در حقيقت زحمت اين برنامه‌ها را کم کنيد. اما اطلاعاتي که در اين فايل بايد قرار گيرد الگوي خاصي دارد که در زير به آن اشاره شده و در آن سطح دسترسي گردشگرها را با ذکر نامشان معين ميکنيد،

User-agent:

Disallow:

اين دو خط را در فايل متني وارد و آنرا با پسوند txt ذخيره ميکنيد.

User-agent به برنامه‌هايي ميگويند که براي وب ساخته ميشوند تا در اختيار کاربران قرار گيرند و گردشگرها مانند robot‌ها و crawler‌ها از اين قبيل هستند و هر سايت جستجو يک گردشگر با اسم مشخص دارد، مانند سايت گوگل که بنام Googlebot معروف است. براي تعيين سطح دسترسي بايد نام برنامه را در خط اول بنويسيد و در خط دوم هم نام فايلها يا دايرکتوري‌هاييکه نبايد ليست شوند را مينويسيد. اگر بطور کل نميخواهيد سايت شما ليست شود طبق دستور زير عمل ميکنيد:

User-agent: *

Disallow: /

براي اطلاعات بيشتر در مورد robots.txt به سايت www.robotstxt.org مراجعه کنيد.

نقش متاتگ‌ها meta tags براي موتورهاي جستجو

شما درباره ساخت متاتگ‌ها در بخش HEAD مطالبي را آموختيد. در اين قسمت نقش آنها را در search engine‌ها ياد خواهيد گرفت. گردشگرها بيشتر به متاتگ‌ها حساس هستند تا اطلاعاتي را در اختيارشان قرار دهند. اطلاعاتي را که شما در متاتگ‌ها بايد وارد کنيد به شرح زير ميباشند:

معرفي کلمات کليدي keywords

توصيف Description کوتاهي درباره سايت که در بعضي از سايتهاي جستجو عمل نميکند.

معرفي برنامه سازنده سايت که به اسم Generator معروف است.

معرفي سازنده و طراح سايت که بنام Author معروف است.

مشخص کردن کپي رايت .

تعيين تاريخ انقضا صفحات اگر مرتب در حال تغيير هستند.

هر موتور جستجوگر اصول و قوانين خاص خود را براي ليست و ذخيره کردن ( index ) سايت شما و تعيين رتبه آن ( Page Ranking ) دارد که متا تگ‌ها در اين مورد نقش اساسي دارند و شما در انتخاب و تعيين آنها بايد بسيار دقت کنيد. بطور مثال بکار بردن کلماتيکه در متا تگ‌ها به عنوان keyword انتخاب نموده ايد در متن داخل همان صفحه در رتبه بنديpage ranking صفحه بسيار موثر خواهد بود.

منظور از رتبه بندي ( Page Ranking ) چيست؟

اگر شما داخل يکي از سايتهاي جستجو مانند گوگل بدنبال کلمه اي گشته باشيد متوجه ميشويد که بعضي از سايتها در همان صفحه‌هاي اول هستند ولي بقيه در صفحه‌هاي آخر، که اين ترتيب بر اساس رتبه بندي يک سايت است که آن سايت در ابتدا نشان داده شود يا در آخر ليست باشد. اگر اصول و قوانين رتبه بندي يک موتور جستجو را رعايت کنيد، سايت شما هم بعد از مدتي در صفحات ابتدايي نمايش داده خواهد شد.

در بخش بعدي مطالبي را در مورد بهترين و معروفترين سايت جستجو يعني گوگل جمع آوري کردیم که براي ثبت و رتبه بندي سايت شما بسيار مفيد است.

ثبت سايت در گوگل

طرح ساخت اين سايت توسط دو دانشجو بنامهاي Larry Page و Sergey Brin در يکي از خوابگاههاي دانشگاه استانفورد پي ريزي شد و بعد از مدتي به بزرگترين و محبوبترين موتور جستجو (search engine) در دنيا تبديل شد که در حال حاضر بيش از هشت ميليارد صفحه وب را در پايگاه داده اي (database) خود جمع آوري کرده که توسط يک الگوريتم منحصر بفرد و با سرعت بسيار بالا خدمات جستجو را براي کاربران انجام ميدهد تمام اين فرآيندها داخل يک شبکه با بيش از هزار کامپيوتر انجام ميشود. البته اين سايت به غير از جستجو، خدمات ديگري هم انجام ميدهد که ميتوانيد به آدرس www.google.com مراجعه کنيد.

ثبت سايت در Google

يکي از راههاي بالا بردن ترافيک يک سايت، ثبت آن در گوگل ميباشد که براي اينکار شما ميتوانيد به آدرس www.google.com/addurl.html مراجعه و سايت خود را ثبت کنيد. دقت کنيد که داخل فرم مخصوص در آن صفحه آدرس کامل سايت را بهمراه پيشوند http:// بايد وارد کنيد و در ضمن نيازي به ثبت همه صفحات نيست و فقط صفحه اصلي يا همان homepage کافي است چون گردشگر گوگل بنام Googlebot بقيه محتواي سايت را از همان صفحه اول پيدا ميکند. پس فراموش نکنيد که صفحه اصلي شما بايد به همه نقاط سايت لينک داشته باشد.

بعد از ثبت سايت ممکن است مدتي در حدود يکماه طول بکشد تا در جستجوها صفحات شما نمايش داده شود.

رتبه بندي صفحات يک سايت ( Page Ranking )

يکي از نکاتي که خيلي بايد دقت کنيد، رعايت کردن اصول و قوانين گوگل ميباشد تا صفحات سايت شما در رتبه‌هاي اوليه هنگام جستجو قرار گيرد. پس از يافتن سايت شما توسط Googlebot، صفحات تجزيه تحليل ميشوند و در يک الگوريتم، رتبه ميگيرند. براي بالا بردن اين رتبه، نکات زير را بايد رعايت کنيد:

نکات لازم در مورد طراحي

صفحات سايت بايد داراي لينکهاي منظم باشد تا دسترسي را به کليه نقاط سايت آسان کند.

بطور حتم يک صفحه بنام site map ( نقشه سايت ) درست کنيد و کليه لينکهاي سايت را در آن قرار دهيد و اگر بيشتر از صد لينک داريد، بقيه را در يک صفحه ديگر قرار دهيد.

داخل هر صفحه از مطالبي استفاده کنيد که با عنوان صفحه و کلمات کليدي( keywords ) مرتبط باشد.

کلمات کليدي را که در متاتگ مشخص کرده ايد بايد در همان صفحه بکار برده شود.

بطور حتم از نشان دادن کلمات کليدي، بصورت متن استفاده کنيد بجاي بکار بردن تصوير.

در خصوصيت alt تگ‌ها از توضيحات مرتبط با عنوان صفحه و محتواي صفحه استفاده کنيد.

اصول بکار بردن صحيح کدهايHTML را رعايت کنيد.

صفحات پويا ( dynamic pages ) يعني صفحاتيکه در آدرس آنها علامت ? است، براحتي صفحات معمولي ليست نميشوند.

در هر صفحه کمتر از صد لينک بکار بريد .

نکات فني

گردشگر گوگل ( Googlebot ) با جاوااسکريپت، کوکي‌ها، session ID، DHTML ويا Flash مشکل دارد.

از وجود If-Modified-Since HTTP header در وب سرور سايت خود اطمينان حاصل کنيد چون اين ويژگي تغييرات سايت شما را به گردشگرها اعلان ميکند.

از فايل متنيrobots.txt در دايرکتوري سايت خود استفاده کنيد و دقت کنيد که از Googlebot crawler در آن فايل جلوگيري نشده باشد.

با متخصصين سرور مشورت کنيد تا از نرم افزارهاييکه از فعاليت گردشگرها جلوگيري ميکند، استفاده نشود.

پس از رعايت کردن اين نکات به آدرس http://www.google.com/addurl.html مراجعه کنيد و سايت خود را در آن ثبت کنيد.

نکات ديگري هم هست که توسط متخصصان سايت گوگل توصيه ميشود،

صفحات را براي استفاده کاربر بسازيد نه براي موتورهاي جستجو.

از حقه‌هايي براي بالا بردن رتبه سايت دوري کنيد.

از گذاشتن لينک سايتهايي که در رتبه بندي شما اثر منفي دارند بپرهيزيد، مانند سايتهايي که روي اصول طراحي نشده اند و يا فعاليتهاي غيرقانوني انجام ميدهند مثل web spammer‌ها.

از بکارگرفتن برنامه‌هايي که بصورت غيرقانوني سايت شما را ثبت و رتبه آنرا بالا ميبرند دوري کنيد مانند برنامه WebPosition Gold .

از لينکها يا متنهاي پنهان استفاده نکنيد.

صفحات را با متنهاي بيربط پر نکنيد.

از بکار بردن متنهاي تکراري يا تکرار صفحات با يک مضمون پرهيز کنيد.

براي يافتن سريعترسايت شما، لينک خود را در سايتهاي معروف قرار دهيد.

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

علامت	نام علامت	شماره علامت
"	"	"
&	&	&
<	<	<
>	>	>

¡	¡	¡
¤	¤	¤
¢	¢	¢
€	€	€
£	£	£
¥	¥	¥
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
™	™
¯	¯	¯
°	°	°
±	±	±
²	²	²
³	³	³
´	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
×	×	×
÷	÷	÷
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	Æ	Æ
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	Ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	Þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ
Œ	&OElig;	Œ
œ	&oelig;	œ
Š	&Scaron;	Š
š	&scaron;	š
Ÿ	&Yuml;	Ÿ
ˆ	&circ;	ˆ
˜	&tilde;	˜
Α	Α	Α
Β	Β	Β
Γ	Γ	Γ
Δ	Δ	Δ
E	Ε	Ε
Z	Ζ	Ζ
H	Η	Η
Θ	Θ	Θ
I	Ι	Ι
K	Κ	Κ
Λ	Λ	Λ
M	Μ	Μ
N	Ν	Ν
Ξ	Ξ	Ξ
O	Ο	Ο
Π	Π	Π
P	Ρ	Ρ
Σ	Σ	Σ
T	Τ	Τ
Y	Υ	Υ
Φ	Φ	Φ
X	Χ	Χ
Ψ	Ψ	Ψ
Ω	Ω	Ω
α	α	α
β	β	β
γ	γ	γ
δ	δ	δ
ε	ε	ε
ζ	ζ	ζ
η	η	η
θ	θ	θ
ι	ι	ι
κ	κ	κ
λ	λ	λ
μ	μ	μ
ν	ν	ν
ξ	ξ	ξ
ο	ο	ο
π	π	π
ρ	ρ	ρ
ς	&sigmaf;	ς
σ	σ	σ
τ	τ	τ
υ	υ	υ
φ	φ	φ
χ	χ	χ
ψ	ψ	ψ
ω	ω	ω
–	–	–
—	—	—
‘	‘	‘
’	’	’
‚	&sbquo;	‚
“	“	“
”	”	”
„	&bdquo;	„
†	&dagger;	†
‡	&Dagger;	‡
…	…	…
‰	&permil;	‰
′	′	′
″	″	″
‹	&lsaquo;	‹
›	&rsaquo;	›
‾	&oline;	‾
⁄	&frasl;	⁄
←	←	←
↑	↑	↑
→	→	→
↓	↓	↓
↔	↔	↔
∩	∩	∩
∞	∞	∞
∫	∫	∫
≈	≈	≈
≠	≠	≠
≡	&equiv;	≡
≤	≤	≤
≥	≥	≥
√	√	√
∑	∑	∑
∏	∏	∏
∂	∂	∂
◊	&loz;	◊
♠	&spades;	♠
♣	&clubs;	♣
♥	&hearts;	♥
♦	&diams;	♦

Black="#000000"	Maroon = "#800000"	Green = "#008000"	Navy = "#000080"
Silver="#C0C0C0"	Red = "#FF0000"	Lime = "#00FF00"	Blue = "#0000FF"
Gray="#808080"	Purple = "#800080"	Olive = "#808000"	Teal = "#008080"
White="#FFFFFF"	Fuchsia = "#FF00FF"	Yellow = "#FFFF00"	Aqua = "#00FFFF"

FFFFFF	FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00	66FFFF	66FFCC	66FF99	66FF66	66FF33	66FF00
FFCCFF	FFCCCC	FFCC99	FFCC66	FFCC33	FFCC00	66CCFF	66CCCC	66CC99	66CC66	66CC33	66CC00
FF99FF	FF99CC	FF9999	FF9966	FF9933	FF9900	6699FF	6699CC	669999	669966	669933	669900
FF66FF	FF66CC	FF6699	FF6666	FF6633	FF6600	6666FF	6666CC	666699	666666	666633	666600
FF33FF	FF33CC	FF3399	FF3366	FF3333	FF3300	6633FF	6633CC	663399	663366	663333	663300
FF00FF	FF00CC	FF0099	FF0066	FF0033	FF0000	6600FF	6600CC	660099	660066	660033	660000
CCFFFF	CCFFCC	CCFF99	CCFF66	CCFF33	CCFF00	33FFFF	33FFCC	33FF99	33FF66	33FF33	33FF00
CCCCFF	CCCCCC	CCCC99	CCCC66	CCCC33	CCCC00	33CCFF	33CCCC	33CC99	33CC66	33CC33	33CC00
CC99FF	CC99CC	CC9999	CC9966	CC9933	CC9900	3399FF	3399CC	339999	339966	339933	339900
CC66FF	CC66CC	CC6699	CC6666	CC6633	CC6600	3366FF	3366CC	336699	336666	336633	336600
CC33FF	CC33CC	CC3399	CC3366	CC3333	CC3300	3333FF	3333CC	333399	333366	333333	333300
CC00FF	CC00CC	CC0099	CC0066	CC0033	CC0000	3300FF	3300CC	330099	330066	330033	330000
99FFFF	99FFCC	99FF99	99FF66	99FF33	99FF00	00FFFF	00FFCC	00FF99	00FF66	00FF33	00FF00
99CCFF	99CCCC	99CC99	99CC66	99CC33	99CC00	00CCFF	00CCCC	00CC99	00CC66	00CC33	00CC00
9999FF	9999CC	999999	999999	999933	999900	0099FF	0099CC	009999	009966	009933	009900
9966FF	9966CC	996699	996666	996633	996600	0066FF	0066CC	006699	006666	006633	006600
9933FF	9933CC	993399	993366	993333	993300	0033FF	0033CC	003399	003366	003333	003300
9900FF	9900CC	990099	990066	990033	990000	0000FF	0000CC	000099	000066	000033	000000