آموزش html

[reza_1001]

WWW
امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي را مشاهده مي کنيد که اين
آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي را در اختيار شما قرار
مي World Wide Web آغاز شده که مخفف سه کلمه www دهند.بيشتر اين آدرس ها با
باشد. وب قسمتي از دنياي اينترنت است که شامل متن، عکس و تصوير يا حتي صدا مي
باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر حرکت مي دهند.
همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:
ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها
است. سپس شما براي Internet Service Providers مخفف ISP. مي گويند ISP
داريد مانند: Web browser مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب
تا کدهاي متني Internet explorer, Netscape Navigator, Opera, Mozilla
اين صفحات را ترجمه کرده و به صورت يک سري اطلاعات قابل فهم براي ما نمايش
دهند.
است که شما مي توانيد آدرس هاي اينترنتي (Address bar) داخل اين مرورگرها کادري
برروي کيبورد منتظر نمايش يک وب Enter را وارد کرده و پس از فشار دادن دکمه
درجلوي آدرس وارد شده http سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه
ميباشد، اين کلمه به HyperText Transport Protocol اضافه مي گردد که مخفف
مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد براي نمايش صفحه استفاده
. File Transfer Protocol که مخفف FTP : کند، چون پروتکلهاي مختلفي هست مانند
Universal مي باشد که اين اصطلاح مخفف سه کلمه URL نام فني آدرسهاي اينترنتي
است. Resource Locator
چيست؟ HTML
زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام
آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان
مي باشد.حالا اجازه دهيد تا کلمه HTML يا همان HyperText Markup Language
به کلمه برايتان توضيح بدهم، البته انتظار يک معني دقيق و سليس را نداشته باشيد ولي
درحدي که براي من قابل فهم بود براي شما خواهم گفت.
است ، اگر شما با زبانهاي برنامه نويسي ( Linear ) متضاد نوشته هاي خطي : Hyper
کامپيوتر آشنايي داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد
و تا يک خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه
اينطوري نيست و الگوي خطي ندارد شما هر کدي را مي توانيد HTML اجرا شود ولي
هر جا که بخواهيد بنويسيد.
به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود. : Text
عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد ولي : Markup
جور ديگري نمايش داده مي شود.
L بالاخره اين هم يک نوع زبان و بايد يک چيزي پيدا کرد تا به حرف :Language
بخوره ديگه (-:
HTML عناصر تشکيل دهنده
گوناگوني است که بر روي ( elements ) زبان وب ميباشد که داراي عناصر HTML
هم تشکيل يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:
متنها و ليست ها : نوشته هاي داخل يک صفحه را در ( texts & lists ) •
برميگيرد.
عکسها : عکس هاي داخل يک صفحه که زيبايي خاصي به وب ( images ) •
سايتها مي بخشند.
جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب کردن ( tables ) •
اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.
فرمها : عناصري که بيننده سايت به کمک آنها مي تواند اطلاعاتي را ( forms ) •
وارد کرده تا ذخيره شده يا فرستاده شود.
نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين عناصر، ( hyperlinks ) •
نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي باشد.
مانند :
www.yahoo.com (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.yahoo.com)
چارچوبها : فريمها يا چارچوبها تنها عناصري هستند که با استفاده از ( frames ) •
آنها ما مي توانيم چند صفحه اينترنتي را در يک صفحه جاي دهيم. مانند
چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ، اگرچه ( multimedia ) •
نبوده اما در حال حاضر بيشتر مرورگر هاي HTML از ابتدا صوت و تصوير با
وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم وموزيک
پخش کنيد.
جاوا اسکريپت : يک نوع زبان نوشتاري يا بهتر بگويم يک نوع ( javascript ) •
html دارد و البته آنها را بايد داخل کدهاي HTML کد است که ارتباط نزديکي با
بکار برد تا بتوانيد يک وب سايت حرفه اي با جذابيت بالا طراحي کنيد.
جاوا اپلت : اپلتها برنامه هايي هستند که توسط زبان جاوا ( JavaApplets ) •
نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي
وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا
خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي باشد که با جاوا اسکريپت
فرق دارد.
استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک ( style sheets ) •
الگوي مشترک در بين صفحات را دارد. به طور مثال شما يک الگو براي رنگ متن
مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي گذاريد.
[/URL] مي باشد که وظيفه آن روح Dynamic Html مخفف دو کلمه : ( DHTML ) •
بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي باشد، شما مي توانيد با
يک وب سايت پويا و زنده طراحي کنيد. Dhtml و javascript هماهنگي کدهاي
WWW
امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي را مشاهده مي کنيد که اين
آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي را در اختيار شما قرار
مي World Wide Web آغاز شده که مخفف سه کلمه www دهند.بيشتر اين آدرس ها با
باشد. وب قسمتي از دنياي اينترنت است که شامل متن، عکس و تصوير يا حتي صدا مي
باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر حرکت مي دهند.
همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:
ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها
است. سپس شما براي Internet Service Providers مخفف ISP. مي گويند ISP
داريد مانند: Web browser مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب
تا کدهاي متني Internet explorer, Netscape Navigator, Opera, Mozilla
اين صفحات را ترجمه کرده و به صورت يک سري اطلاعات قابل فهم براي ما نمايش
دهند.
است که شما مي توانيد آدرس هاي اينترنتي (Address bar) داخل اين مرورگرها کادري
برروي کيبورد منتظر نمايش يک وب Enter را وارد کرده و پس از فشار دادن دکمه
درجلوي آدرس وارد شده http سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه
ميباشد، اين کلمه به HyperText Transport Protocol اضافه مي گردد که مخفف
مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد براي نمايش صفحه استفاده
. File Transfer Protocol که مخفف FTP : کند، چون پروتکلهاي مختلفي هست مانند
Universal مي باشد که اين اصطلاح مخفف سه کلمه URL نام فني آدرسهاي اينترنتي
است. Resource Locator
چيست؟ HTML
زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام
آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان
مي باشد.حالا اجازه دهيد تا کلمه HTML يا همان HyperText Markup Language
به کلمه برايتان توضيح بدهم، البته انتظار يک معني دقيق و سليس را نداشته باشيد ولي
درحدي که براي من قابل فهم بود براي شما خواهم گفت.
است ، اگر شما با زبانهاي برنامه نويسي ( Linear ) متضاد نوشته هاي خطي : Hyper
کامپيوتر آشنايي داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد
و تا يک خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه
اينطوري نيست و الگوي خطي ندارد شما هر کدي را مي توانيد HTML اجرا شود ولي
هر جا که بخواهيد بنويسيد.
به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود. : Text
عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد ولي : Markup
جور ديگري نمايش داده مي شود.
L بالاخره اين هم يک نوع زبان و بايد يک چيزي پيدا کرد تا به حرف :Language
بخوره ديگه (-:
HTML عناصر تشکيل دهنده
گوناگوني است که بر روي ( elements ) زبان وب ميباشد که داراي عناصر HTML
هم تشکيل يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:
متنها و ليست ها : نوشته هاي داخل يک صفحه را در ( texts & lists ) •
برميگيرد.
عکسها : عکس هاي داخل يک صفحه که زيبايي خاصي به وب ( images ) •
سايتها مي بخشند.
جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب کردن ( tables ) •
اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.
فرمها : عناصري که بيننده سايت به کمک آنها مي تواند اطلاعاتي را ( forms ) •
وارد کرده تا ذخيره شده يا فرستاده شود.
نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين عناصر، ( hyperlinks ) •
نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي باشد.
مانند :
[URL="http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.yahoo.com"]www.yahoo.com (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2FITJASB.Blogfa.com)
چارچوبها : فريمها يا چارچوبها تنها عناصري هستند که با استفاده از ( frames ) •
آنها ما مي توانيم چند صفحه اينترنتي را در يک صفحه جاي دهيم. مانند
چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ، اگرچه ( multimedia ) •
نبوده اما در حال حاضر بيشتر مرورگر هاي HTML از ابتدا صوت و تصوير با
وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم وموزيک
پخش کنيد.
جاوا اسکريپت : يک نوع زبان نوشتاري يا بهتر بگويم يک نوع ( javascript ) •
html دارد و البته آنها را بايد داخل کدهاي HTML کد است که ارتباط نزديکي با
بکار برد تا بتوانيد يک وب سايت حرفه اي با جذابيت بالا طراحي کنيد.
جاوا اپلت : اپلتها برنامه هايي هستند که توسط زبان جاوا ( JavaApplets ) •
نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي
وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا
خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي باشد که با جاوا اسکريپت
فرق دارد
استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک ( style sheets ) •
الگوي مشترک در بين صفحات را دارد. به طور مثال شما يک الگو براي رنگ متن
مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي گذاريد.
مي باشد که وظيفه آن روح Dynamic Html مخفف دو کلمه : ( DHTML ) •
بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي باشد، شما مي توانيد با
يک وب سايت پويا و زنده طراحي کنيد. Dhtml و javascript هماهنگي کدهاي
که در بخش قبل ذکر شد مي توان همگي يا تک تک ( elements) تمامي اين عناصر
بکار برد. لازم بذکر است که کليه کدها و عناصر مربوط به html آنها را در ميان کدهاي
تأييد و به رسميت شناخته مي W٣C توسط يک کنسرسيوم و انجمني به نام html زبان
مي باشد، به غير World Wide Web Consortium که مخفف W٣C شود. انجمن
هم نظارت دارد. اين انجمن پس از Style sheet, xml, xhtml بر کدهاي Html از
اعلام مي نمايد. در حال www.w٣.org (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.w%D9%A3.org) بررسي کدهاي جديد آنها را در سايت رسمي خود
به Xhtml ميباشد و بعد از آن نسخه هاي html نسخه ٤٫٠١ ،html حاضر آخرين نسخه
وب معرفي شده است.
هدف از ساخت وب سايت
قبل از هر کاري شما بايد هدف مشخصي داشته باشيد تا مصمم تر آن را دنبال کنيد، پس
براي ساختن يک وب سايت هم هدف از ساخت آنرا مشخص کنيد به طور مثال موضوع آن
چيست يا چه طرحي مي خواهيد داشته باشه با چه تعداد صفحه. بد نيست که نوع مخاطبين و
بيننده ها را هم مشخص کنيد که چه کساني قرار است از سايت شما استفاده کنند. شما مي
توانيد در ابتدا از يک سايت شخصي شروع کنيد، فکر کنم با پيشرفت تکنولوژي کامپيوتر و
اينترنت در آينده نزديک هر کسي مانند شناسنامه بايد يک سايت براي معرفي خود داشته
باشه. هميشه سعي کنيد تا مطالب را متناسب با مضمون سايت انتخاب کنيد و در هر قسمت
يک هدف را دنبال کنيد که بيننده گيج و فراري نشود. اگر سايت شما شخصي است و در آن
خاطرات ، عکسهاي خود يا دوستانتان را گذاشته ايد پس ديگرنبايد تبليغ محصولات توليدی
را اضافه کنيد يا بالعکس.
کجا و چگونه سايت را راه اندازي کنيد
مي گويند، اسم domain ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم
World Wide Web که مخفف www : يک وب سايت از سه قسمت تشکيل مي شود
.com, : و در آخر پسوندهاي مشخص مانند Domain ميباشد، اسم منتخب شما يا همان
.net, .org, .info
پس از انتخاب اسم که بايد يک هماهنگي با مطالب سايت داشته باشد، نوبت به ثبت آن
ميرسد که شما مجبورهستيد با يک شرکت خدمات اينترنت قرار داد ببنديد، براي ثبت اسم و
اجاره فضا تا اطلاعات شما را در اينترنت به معرض نمايش بگذارند. بعد از اينکه تنظيمات
File که مخفف FTP اوليه انجام شد، شما مي توانيد با استفاده از سرويسهايي مانند
ميباشد اطلاعات سايت را حذف ، اضافه يا تغيير دهيد که در Transfer Protocol
مورد اين سرويس در بخش ديگري توضيح خواهم داد.
البته سابتهايي هستند که شما ميتوانيد به طور رايگان سايت خود را راه اندازي کنيد اما
معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما ميباشد و ديگر اينکه امکانات
محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه اندازي يک وب سايت بسيار
است که اگر ايميل در www.geocities.com (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.geocities.com) مناسب ميباشند. يکي از اين سايتها
سايت ياهو داريد، فضاي رايگان در اختيارتان قرار ميدهد.
اهميت طراحي وب سايت
يک وب سايت موفق در مرحله طراحي جان مي گيرد چون چند چيز مهم در اين قسمت
مشخص ميشود مانند، قالب بندي، رنگ، محتوا ومديريت اطلاعات سايت. اگر ما درست
کردن وب سايت را به ساختن يک خانه تشبيه کنيم، ميبينيد که انسان منطقي خانه را بدون
نقشه و طرح نمي سازد، پس بياييد به اين قسمت اهميت بيشتري بدهيم تا در پايان کار
احساس رضايت بکنيم. در ساخت يک خانه نکات مهم ديگري هم هست، ظاهر و نماي آن،
مواد ومصالح که قرار است بکار برده شود، در ضمن به راحتي کساني که ميخواهند از آن
استفاده کنند هم بايد فکر کرد. پس شما هم اين نکات را مد نظر داشته باشيد که ظاهر
صفحات چه شکلي داشته باشد از چه رنگهايي استفاده کنيد و چه مطالبي را بکار بريد تا
مخاطبين را مجذوب کرده وهمچنين بتوانند به کليه قسمتهاي سايت دسترسي داشته باشند در
هربخشي که هستند. زمان بيشتري را صرف اين قسمت کنيد تا نيازي به تغييرات اساسي در
آينده نداشته باشيد.
به چه چيزهايي نياز داريد HTML براي يادگيري
داريد web browser براي ديدن صفحاتي که طراحي مي کنيد نياز به يک مرورگر وب
اگر شما اين صفحه را مي بينيد پس يکي از اين مرورگرها را داريد. اما براي نوشتن
که درکليه سيستمهاي عامل notepad در حال حاضر به برنامه ساده html کدهاي
ويندوز وجود دارد نياز داريد، برنامه هاي پيشرفته ديگري هم هست که محيط گرافيکي
ولي براي Microsoft frontpage , Macromedia Dreamweaver : دارند مانند
استفاده کنيد. پس مهمترين چيزي که نياز داريد Notepad شروع بهتر است که از همان
کمي وقت و علاقه هست.
در خلال دهه ٩٠ ميلادي همراه با گسترش وب، Tim Berners-Lee توسط HTML
معروفيت خاصي پيدا کرد. در آن زمان Mosaic شکوفا شد. اين زبان توسط مرورگر
در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در HTML
زمينه وب فعاليت داشتند.
HTML گسترش يافت و بلافاصله در همان سال HTML در نوامبر ١٩٩٥ نسخه ٢٫٠
شروع به فعاليت بر W٣C ٣٫٠ منتشر شد، ولي استقبالي از آن نشد. در سال ١٩٩٦ انجمن
HTML روي نسخه اين زبان کرد که حاصل کار آنها در ١٤ ژانويه ١٩٩٧ انتشار ٣٫٠٢
بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي
مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده
بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد
براي HTML شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور
اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي
کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.
در وب منتشر شد و در همين بين شرکتهاي HTML در ١٨ دسامبر ١٩٩٧ نسخه ٤٫٠
توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که
مورد تاييد قرار W٣C قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در
مرورگرها مجبور به تغيير شدند تا با HTML گرفت اما بعضي ديگر نه. با تغييرات
تحولات جديد سازگار شوند.
HTML در تاريخ ٢٤ آوريل ١٩٩٨ در اين نسخه تجديد نظر شد و حاصل آن پيدايش ٤٫٠١
برسميت شناخته شد و اين انجمن W٣C بود که با کمي تغيير و رفع يکسري مشکلات، در
استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد.
embeded objects, frames, با قابليت استفاده از HTML بطور کل مجموعه ٤
و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، scripting, style sheets
همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از
HTML محيط وب استفاده کنند. اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني
از زبانهايي بود که از راست به چپ نوشته ميشدند مانند زبان فارسي، که در اين نسخه با
به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا ISO پذيرفتن استاندارد ١٠٦٤٦
را منتقل کنند. HTML همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد
تفاوت کمي با نسخه اصلي خود يعني ٤٫٠ دارد اما در عوض هماهنگي HTML ٤٫٠١
دارد. در اصل XML و نسل بعدي يعني XHTML بيشتري با نسل جديد زبان وب يعني
XML با HTML است که براي هماهنگي و سازگاري XML اساس و مقدمه XHTML
منتشر شده است.
زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن HTML ٤
توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده
کرد و XHTML در ٢٦ ژانويه ٢٠٠٠ اقدام به معرفي ١٫٠ C٣W است. به همين منظور
در ١٩ دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با
را گسترش دهد و HTML بکارگيري ويژگيهايي که دارد دامنه استفاده از زبان محبوب
را فراهم کند. XML مقدمات معرفي
خسته نباشيد دوستان، در صفحات قبل تا حدودي با مقدمات راه اندازي يک وب سايت آشنا
شديد و آموختيد تا هدفتان را با محتواي سايت هماهنگ کنيد، همچنين به اهميت طراحي هم
پي برديد. اما حالا کاري که شما بايد انجام دهيد، کمي استراحت کنيد و يک نوشيدني براي
خود مهيا کنيد سپس نفس عميقي بکشيد و آماده باشيد تا اولين گام را براي معرفي خودتان به
عنوان يک طراح و برنامه نويس حرفه اي وب برداريد. ما ورود شما را به يکي از ساده
ترين و جذاب ترين رشته هاي آموزشي وب و کامپيوتر خوش آمد مي گوييم . پس از اينجا
جاي ديگر نرويد که بهترين مکان را براي آموزش برنامه نويسي تحت وب و طراحي سايت
پيدا کرده ايد. البته اين موضوع را شوخي کرديم، اين ديگه بستگي به شما دارد تا مطالب اين
سايت را تا چه حد قابل بدانيد.
HTML تگهاي
چيست و چه html بايد بدانيد، اينست که تگ html اولين چيزي که براي برنامه نويسي
دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده. بطور html کاري انجام ميدهد. تگهاي
کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو علامت
نوشته ميشود، مانند: html کد
<b>
اين يک تگ آغازين است و کد داخل آن به مرورگر ما ميفهماند که متن بعد از آن بايد
به بيننده صفحه نشان داده شود و بلافاصله متن مورد نظر bold بصورت حروف ضخيم و
را مينويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن بايد بصورت
ضخيم نمايش داده شود،
<b> This is a bold text. </b>
ميباشد. Slash ( / ) همانطور که مشاهده ميکنيد، تگهاي پايان دهنده داراي يک علامت
اما کار اين تگها چيست؟ مرورگرهاي وب مانند اينترنت اکسپلورر، به علامتهاي < >
حساس هستند و به محض اينکه به آنها مي رسند کد داخل آنها را خوانده و عمليات لازم را
بر روي متن بعد از آن انجام ميدهند تا به تگ پايان دهنده برسند. در حقيقت مرورگرها حکم
مترجم را براي ما دارند و کليه تگها ونوشته هاي داخل آنها را بصورت اطلاعات منظم و
قابل فهم در قالب يک صفحه وب براي ما ترجمه کرده و به نمايش ميگذارند. ما با وارد
کردن تگهاي مناسب، کنترل نمايش صفحه وب را در مرورگرها به کنترل خود در مي آوريم
هم مانند هر html را چگونه و در کجا بنويسيد. زبان html پس بايد ياد بگيريد که تگهاي
زبان ديگري ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا مي شويد.
Source code
در مرورگر است که شما Html صفحات وب داراي مزيتي هستند و آن مشاهده کدهاي
براحتي مي توانيد تگهاي عناصر تشکيل دهنده آن صفحه را ببينيد و با نحوه قرار گرفتن و
تکنيکهاي بکار گرفته شده آشنا شويد. براي ديدن سورس کد يا همان کد تشکيل دهنده صفحه
کليک مي کنيد Source در مرورگر مي شويد و بر روي گزينه view وب داخل منوي
را نشان مي دهد که در حال Html باز شده و تگهاي Notepad که بطور معمول برنامه
حاضر فهميدن آنها براي شما مشکل است ولي در آينده نزديک هيچ مشکلي براي درک کدها
نخواهيد داشت.
را لمس کنيد. html در اين بخش شما اولين صفحه وب را خواهيد ساخت تا سادگي زبان
ويندوز را باز کنيد، البته مي توانيد از هر برنامه Notepad براي شروع ابتدا برنامه
ويرايشگر متن استفاده کنيد. سپس اين تگها را بنويسيد:
<html>
</html>
شروع و به کجا ختم ميشوند. html اين تگها به مرورگر وب ميفهماند که از کجا کدهاي
پس بقيه تگها را ما بايد بين اين دو وارد کنيم. تگها را ما به دو دسته تقسيم ميکنيم: تگهاي
بدين صورت: ، body و تگهاي قسمت بدنه head قسمت سر
<html>
<head>
</head>
<body>
</body>
</html>
نوشته شود head فرق اين دو قسمت در اينست که هر اطلاعاتي داخل تگهاي قسمت سر
هر اطلاعاتي وارد شود body در صفحه مرورگر نشان داده نميشود ولي در قسمت بدنه
در صفحه نمايش داده ميشود.
خب دوستان اين ساختار کلي و اسکلت بندي يک صفحه وب هست که بايد هميشه آنرا در
وارد کنيد، مثلاً body نظر داشته باشيد. حالا يک متني بين تگهاي بدنه
<html>
<head>
</head>
<body>
This is my first page!
</body>
</html>
نامگذاری و ذخيره کردن فايل
الان کدنويسي ما تکميل شد و بايد اين فايل متني را ذخيره کنيم تا بتوانيم در مرورگر وب
را انتخاب کنيد، يک Save as را باز کنيد و گزينه File خود امتحانش کنيم. ابتدا منو
پنجره براي آدرس دهي و نامگذاري آن فايل باز ميشود که آدرس جايي که بايد ذخيره شود
وارد کنيد My Documents را مانند
وارد Firstpage اسم فايل را بنام File Name سپس در پايين پنجره باز شده در قسمت
را بنويسيد و دکمه html کنيد و دقت کنيد تا در آخر اين اسم يک نقطه بگذاريد و پسوند
ذخيره شود. html را بزنيد تا فايل متني ما بصورت يک فايل Save
را .htm هم باز شود بايد پسوند DOS دقت کنيد اگر ميخواهيد فايل شما در سيستم عامل
در آخر اسم وارد کنيد.
حالا به سراغ فايل ذخيره شده ميرويم، اگر در سيستم عامل ويندوز اينکار را انجام داده ايد،
آن فايل بايد آيکون مرورگر اينترنت اکسپلورر را داشته باشد، روي فايل کليک کنيد تا باز
شود، همانطور که مشاهده ميکنيد مرورگر وب شما باز ميشود تا اطلاعات آن صفحه را
وارد کرده ايد را مي بينيد body نمايش دهد. اگر داخل صفحه فقط نوشتهايي که بين تگ
پس بايد به شما تبريک بگويم و از اين به بعد بايد به خودتان بيشتر توجه کنيد. اگر هم غير
از آن مي بينيد يا چيزي مشاهده نميکنيد، مراحل گفته شده را دوباره انجام دهيد.
وارد کنيد بعد از <body> همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي
و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد .htm يا .html ذخيره آن فايل با پسوند
کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي
اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما
است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر
وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي
مي گويند. بهتر است formatting که شکل و آرايش حروف را کنترل ميکنند که به آنها
يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را Notepad که
امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.
<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود
که نيازي به تگ پايان دهنده هم ندارد.
مثال
<p></p>
بين خطوط ايجاد <br> پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به
ميباشد که محل قرارگيري پاراگراف را در " " =align ميکند. اين تگ داراي خصوصيت
مقداردهي "justify" ,"left", "center", "right" يک سطر کنترل ميکند و با کلمات
ميشود. مثال
<p/>...<"align="left p>
<center></center>
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت،
البته اين تگ را براي عناصر ديگر وب نيز ميتوان بکار برد.مثال
<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد که يک متن
با فاصله هاي زيادي نمايش داده شود يعني آنطور که ميخواهيد نشان داده شود از اين تگ
استفاده ميکنيد.مثال
<h١></h١>
مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود. Heading به اين تگ
اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين
left, ميباشند و با align=" " حد حروف را نمايش ميدهند. در ضمن داراي خصوصيت
مقداردهي ميشود.مثال center , right
<hr>
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم
جدا ميکند که داراي خصوصيات زير ميباشد.
طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان width=" "
مقدار دهي کرد.
که محل قرار گيري خط در يک سطر را کنترل ميکند. align=" "
رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد. color=" "
اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، size=" "
ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت
را به تگ اضافه کنيد ديگر سايه را نشان نميدهد.مثال noshade
<div></div>
آن قسمت از متن <br> اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ
در اين تگ توانايي اعمال style=" " را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت
يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را
که تعريف شود همان Style روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع
درست کردن الگوها را توضيح خواهم داد. Style Sheets را بکار ميبرد. در بخش
مثال
<span></span>
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف
ميباشد style=" " متن را از بقيه جدا نميکند و داراي خصوصيت div ميباشد چون مانند
که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود. مثال
<marquee></marquee>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ
مشکلي (IE) ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر
براي نمايش ندارد. خصوصيات اين تگ عبارتند از :
top, middle, bottom محل قرار گرفتن متن را تعيين ميکند که با کلمات align=" "
مقدار دهي ميشود.
scroll اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با behavior=" "
اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج
قرار دهيم ، متن از صفحه خارج نميشود و در عرض alternate ميشود و اگر برابر با
باشد ، متن از يکطرف وارد صفحه slide مرورگر حرکت ميکند، همچنين اگر برابر با
شده و در طرف ديگرميايستد.
رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا bgcolor=" "
مينويسيد.
left, right, top, جهت ورود متن به صفحه را کنترل ميکند و با کلمات direction=" "
که از چپ ، راست، بالا و پايين ميتواند وارد شود. down
را به عدد در مقياس پيکسل يا به درصد تعيين marquee ارتفاع کادر height=" "
ميکند.
حاشيه چپ و راست را کم وزياد ميکند. hspace=" "
تعداد چرخش متن را کنترل ميکند. loop=" "
سرعت حرکت متن را تعيين ميکند. scrolldelay=" "
حاشيه بالا و پايين متن را مشخص ميکند. vspace=" "
عرض کادر را کنترل ميکند. width=" "
مثال
<-- !.....-->
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده
شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد وارد
کنيد .
<bdo></bdo>
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت
يعني از راست به چپ مقدار دهي rtl يعني از چپ به راست و ltr ميباشد و با dir=” “
ميشود.
ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها html ليستها هم جزو عنصر متن در
(Ordered را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم
وديگري ليستهاي توصيفي (Unordered list) و ليست با ترکيب نا منظم list)
شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در . (Definition list)
ليست منظم است که در ديگري فقط نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها
در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:
<ol><li></ol>

[reza_1001]

براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در
ميباشد ordered list را که مخفف <ol> آغاز قسمتي که ميخواهيم ليست درست کنيم تگ
را مينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از
را می </ol> را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده <li> ليستمان تگ
نويسيم.
مثال
اگر دقت کنيد به صورت پيش فرض اعداد ١،٢،٣ به ابتداي گزينه هاي ليست مان اضافه
که به A, a اضافه کنيد و آنرا با <ol> را به تگ type ميشود. شما ميتوانيد خصوصيت
که با اعداد رومي است مقدار دهي I, i صورت حروف کوچک يا بزرگ انگليسي و يا با
کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت
تگ را کامل ميکنيد:
<ol type="i">
<li> Item ٠١
<li> Item ٠٢
<li> Item ٠٣
</ol>
مثال
<ul><li></ul>
مينامند و مانند تگهاي بالا براي درست کردن ليست در يک unordered list اين تگ را
صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده
” disc”, “circle”, که با کلمات type ميکند که مانند بالا ميتوانيد از خصوصيت
مقدار دهي ميشود استفاده کنيد. “square”
<ul type="disc">
<li> Item ٠١
<li> Item ٠٢
<li> Item ٠٣
</ul>
مثال
شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند
Nested list زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت
گفته ميشود.
بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و
سياه دارند:
<ol type=”I”>
<li> Item ٠١ <ul type="circle"> <li> Black <li> White </ul>
<li> Item ٠٢ <ul type="circle"> <li> Black <li> White </ul>
<li> Item ٠٣ <ul type="circle"> <li> Black <li> White </ul>
<li> Item ٠٤ <ul type="circle"> <li> Black <li> White </ul>
</ol>
مثال
<dl><dt><dd></dl>
آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که
بکار ميبرند. <dd> و توصيف آنرا با <dt> کلمه مشخص را با تگ
<dl>
<dt> Html
<dd> HyperText Markup Language.
</dl>
لينک چيست؟
لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که
بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس
شکل دست به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با
متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما به صفحات ديگر يا حتي
ميباشد که با خصوصيت <a></a> به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک
آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم href
متصل شود بدين صورت عمل ميکنيم، yahoo يک لينک درست کنيم که به سايت
<a href="www.yahoo.com">Yahoo website</a>
که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد
نوشته </a> و تگ پايان دهنده <a href=” “> فقط متني که مابين دو تگ آغاز کننده يعني
شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است
Yahoo website
همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط
شما ياد خواهيد گرفت تا اين خط را برداشته يا Style Sheet کشيده ميشود که در بخش
رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد،
همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات
مختلف يک وب سايت ميباشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف ميباشند.
Absolute and Relative
لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت
مانند:
<a href="http://www.mysite.com/page٠١.htm"> Page٠١ </a>
ميگويند. absolute به اين مدل لينک
و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم
آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است
متصل شود htmlpages در دايرکتوري بنام Page٠١.htm به يک صفحه به اسم
مجموعه کدي که بايد نوشته شود بدين صورت است:
<a href="htmlpages/Page٠١.htm"> Page٠١ </a>
مي گويند. relative به اين مدل
دقت کنيد دوستان وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود
دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما در
صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود
مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،
<a href="../page٠٢.htm"> page٠٢ </a>
به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در
تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه
را مينويسيم ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده
شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را
بنويسيم يعني بدين شکل:
<a href="../../thispage.htm"> this page </a>
target
تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که
مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره
_blank , نام دارد که بايد برابر با يکي از مقادير target جديد باز شود. اين خصوصيت
قرار گيرد. _self , _top , _parent
target="_blank"
اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش
ميدهد.
_self
اطلاعات صفحه مربوط به آن لينک در همان فريم که لينک قرار دارد نمايش داده ميشود.
_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.
_top
صفحه مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.
Anchor
يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم متصل ميکند که به آن
مي گويند. کاربردهاي گوناگوني دارد ولي بيشترين کاربرد اين نوع لينک براي anchor
مواقعي است که طول يک صفحه از سايت زياد شده و در انتهاي همان صفحه شما يک
لينک مي گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان صفحه هدايت
شود. براي اينکار دو سري تگ لازم است که بايد بنويسيد، يکي جايي است که ميخواهيد
لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم بايد داخل
همان صفحه تک باشد يعني در جاي ديگر بکار نبرده باشيد و تگ آن به اين صورت است:
<a name="top">
هر اسمي ميتوانيد بکار بريد اين نکته را در top در بين دو علامت " " و به جاي کلمه
ذهن داشته باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد
شما نامي را که انتخاب کرديد href لينک است وبجاي نوشتن آدرس فايل در خصوصيت
به اضافه علامت # را مينويسيد:
<a href="#top">top of the page</a>
در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل
استفاده کنيد و آدرس کامل را بنويسيد: absolute
<a href="http://www.sitename.com/page٠١.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= از موضوعي که نوشتيد علامت & را بگذاريد وسپس کلمه
ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال
به آدرس ايميل فرستاده Hello my friends و متن Test ميخواهيد که ايميل با موضوع
شود:
<a
href="mailto:my_email@domain.com?subject=Test&body=Hello

[reza_1001]

my friends"> my_email@domain.com </a>
توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض
را براي آدرس ايميل خود تنظيم کنيد. Outlook مديريت ايميل مانند نرم افزار
image يکي از عناصري که باعث جذابيت در وب سايت ميشود عنصر عکس يا همان
است. عکسها زيبايي خاصي به صفحات ميبخشند ولي از طرف ديگر توليد دردسر هم
ميکنند، اگر شما تعداد زيادي عکس در يک صفحه بگذاريد يا از عکسهايي با حجم زياد
استفاده کنيد آن موقع است که بيننده بايد مدت طولاني را صرف کند تا صفحه سايت شما را
به طور کامل ببيند و همين موضوع باعث از دست دادن يک بيننده و يک نمره منفي به
حساب ميايد. همانطور که ميدانيد در کشور عزيزمان ايران سرعتهاي اينترنت خيلي پايين
هست و ديدن صفحات سنگين بسيارعذاب آور است البته بماند که بعضي وقتها همان يک
ذره سرعت هم نداريم. پس هميشه تا جايي که ميتوانيد صفحه را سبک کنيد تا براي بيننده
خسته کننده نباشد. يک سايت موفق سايتي است که بيننده زياد داشته باشد.
فرمتهاي عکس در وب:
شرآت فن آوري اطلاعات جاسب HTML آموزش
http://ITJASB.Blogfa.com (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2FITJASB.Blogfa.com) ٥٧ of ١٨Page
خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در
وب بکار برده ميشوند، عبارتند از:
.gif (Graphic Interchange Format)
.jpeg (Joint Photographic Experts Group)
.png (Portable Network Graphics)
بيشترين استفاده را در وب دارند و محبوبترين نوع عکس است. اين .gif عکسها با فرمت
animation, نوع فرمت ٢٥٦ رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آن
است . البته محبوبيت آن بيشتر براي حجم کم آن است. transparency, interlacing
به شفافيت يک عکس ميگويند که آنرا پشت نما هم مينامند. اين ويژگي Transparency
است که يک عکس آنقدر شفاف است که شما ميتوانيد تا تصوير ، متن يا رنگ زير آن
عکس را ببينيد.
گاهي وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه Interlacing
بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل
خواهد شد يعني خط به خط به عکس اضافه ميشود تا کامل بارگذاري شود.مثال
عکسهاي متحرک را مي گويند وفقط اين فرمت هست که از متحرک سازي Animation
عکس حمايت ميکند.
حدود ١٦ ميليون رنگ را پشتيباني ميکنند ، نسبت به فرمت .jpeg عکسهايي با فرمت
را دارد gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است ، تمام ويژگيهاي .gif
نسبت به قبليها جديدتر است و مخلوطي از آنهاست .png فرمت .Animation به غير از
را دارد. gif و حجم کم jpeg يعني کيفيت
افزودن عکس به صفحه وب:
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ
و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد <img>
داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب src=" " از خصوصيت
سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با
پسوند مشخصه آن عکس نوشته ميشود ولي اگر ميخواهيد که عکسي را از وب سايت
ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار
گرفته و اسم کامل آن فايل را بنويسيد مانند:
<img src="images/pic٠١.gif">
<img src="www.sitename.com/images/pic٠١.gif">مثال
Height, Width
اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات
ميباشد که توسط آنها اندازه يک عکس را داخل صفحه width و عرض height طول
ميباشد، Pixel ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل
اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور
١٠٠ فضا اشغال × مثال شما ميخواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه ١٠٠
کند:
<img src="images/pic٠١.gif" height="١٠٠" width="١٠٠">
مثال
شدن آن download اين نکته را در نظر داشته باشيد که سرعت کامل شدن عکس يعني
در صفحه بستگي به حجم آن دارد نه اندازه عکس، پس ميتوانيد اندازه هاي يک عکس را
اضافه کنيد ولي دقت کنيد که کيفيت عکس خراب نشود.
Alignment
شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت
را براي اين left,right,top,middle,bottom تعيين کنيد و ميتوانيد کلمات align=” “
خصوصيت بکار بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:
<img src="images/pic٠١.gif" align="middle"> This is a text
مثال
قبل <center> در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ
را بنويسيد: </center> استفاده کنيد و بعد از آن <img> از تگ
<center><img src="pic٠١.gif"></center>
مثال
Border
استفاده border=” “ اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت
کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس
است يعني هيچ کادري مشاهده border=” هم ضخيم تر است به صورت پيش فرض ” ٠
نميشود.مثال
Alt
تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که
و اطلاعاتي را راجع به آن عکس tooltip قرار ميگيرد يک کادر متني کوچک باز شده بنام
را داخل تگ گذاشته و هر alt=" " ميدهد؟ پس شما هم اينکار را انجام دهيد، خصوصيت
متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد ،
زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون
مرورگرهايي وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس
خبر دار ميشود.مثال
hspace, vspace
دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می کند،
براي بالا و پايين. عددي vspace=” “ براي حاشيه چپ و راست عکس و hspace=” “
را که وارد ميکنيد در مقياس پيکسل است.مثال
Image link
شما ميتوانيد يک عکس را به صورت لينک هم درست کنيد يعني هرگاه بيننده روي عکس
کليک کرد به صفحه يا سايت ديگر هدايت شود. در بخش قبل با درست کردن لينک آشنا
شديد، در اينجا شما بايد تگ لينک را قبل از تگ عکس بنويسيد و تگ پايان دهنده لينک را
بعد از تگ عکس وارد ميکنيد، بدين صورت:
<a href="www.sitename.com"><img src="images/sitelogo.gif"></a>
بر روی لوگوی زير کليک کنيد تا به صفحه اصلی سايت هدايت شويد
در ضمن ميشود براي قسمتهاي مختلف يک عکس لينکهايي به جاهاي مختلف درست کرد.
به فرض مثال ما يک عکس از نقشه ايران داريم و ميخواهيم که روي هر استان کليک شود
مي گويند که در Image map ، آن قسمت لينک شود به صفحه مورد نظر. اين حالت را
بخش بعد آنرا توضيح خواهم داد.
( image map ) ساخت نقشه تصويری
يکي از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به Image map
کمک ما ميايد. بطور مثال ما نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده
سايت هرگاه روي يک استان کليک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه
را در اختيار کاربر قرار دهد. اين حالت حجم عکس را افزايش نخواهد داد و بهتر است از
عکسهايي با حجم بالا استفاده نکنيم که در اين مورد به قسمت عکسها رجوع کنيد.
درصفحه قراردهيد، سپس <img> خب حالا عکس مورد نظر را با استفاده از تگ
را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار usemap=" " خصوصيت
دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس
ميخواهيم بکار بريم. Image map را بصورت
<img src="images/mypic.gif" usemap="#map٠١">
به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي
وارد ميکنيم تا مرورگر بفهمد <map name="map نقشه را وارد کنيم.ابتدا تگ <" ٠١
مشخص ميشود که چه عکسي name=" " که نقشه آغاز شده و با استفاده از خصوصيت
قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که
هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي
مشخص ميشوند، <area> نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ
اين تگ داراي سه خصوصيت ميباشد:
مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر Shape=" "
بخواهيم circle قرار ميدهيم، اگر دايره rect" " باشد آنرا برابر با rectangle چهارگوش
قرار ميدهيم. poly" " بخواهيم برابر با polygon و اگر چند ضلعي "circle" برابر با
اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که Coords=" "
در مقياس پيکسل ميباشد. براي تشکيل يک لينک x, y مختصات هر نقطه بر اساس محور
به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين
ها و x آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور
ها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم. y ديگري
Coords="١٠،١٠،٦٥،٦٥"
همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع
را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي به تعداد
هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم. href=" "
<img src="images/mypic.gif" usemap="#map٠١">
<map name="map٠١">
<area shape="rect" coords="٢٥،٢٥،٥٥،٥٠" href="page.htm">
<area shape="circle" coords="١٢٤،٢٤٣،٤٠" href=
"www.yahoo.com">
<area shape="poly"
coords="٢٢،٣٠،٧٦،٩٠،١٤٧،١٩٩،٢٨٩،٢ ٧٠،١٤٠،١١١،٤٤،٦٧"
href="pages/first.html">
</map>
خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه
و ديگري که Photoshop براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند
برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با
کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و
را انجام داديم يک تگ و يک خصوصيت به اين کدها Image map مراحل تشکيل
اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را
قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت <img> قبل از
اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و <img> را به تگ ismap
status bar همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت
مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.
<a href=" # "><img src="image.gif" usemap="#newmap" ismap>
<map name="newmap">
</map>
</a>
فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره
برداريد.
تگ جدول
جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما
مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات
يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون
آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي
را پيدا ميکنيد که از اين عنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک
سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول
و <tr></tr> ميباشد. اما براي اضافه کردن رديف به يک جدول از <table></table>
استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت <td></td> براي ستون از تگ
ميباشد:
<table>
<tr><td>this is a table.</td></tr>
</table>
هر چه تگهاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم داشت.
مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول
داراي يک خانه ميباشد. يکي از ويژگيهاي جدول که محبوبيت آنرا زياد ميکند اينست که هر
خانه از آن ميتواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته
اندازه هاي هر خانه هم ميتواند متفاوت باشد.
border
خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت
آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين border=" "
خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان
نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن
که برابر با عدد هگز رنگ است تعيين ميشود. bordercolor=" " رنگ کادرهم با
frame=" " ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت border
void, above, اضافه کرده و آنرا برابر با يکي از کلمات <table> را به تگ
قرار دهيد تا کادر دور جدول را کنترل below, hsides, vsides,lhs, rhs, box
کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.
rule
ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه
ذخيره کنيد: Table.htm را باز کنيد و کد زير را وارد کرده و به اسم Notepad
<table border="٤" bordercolor="#ff٠٠٠٠">
<tr>
<td>cell ٠١</td><td>cell ٠٢</td>
</tr>
<tr>
<td>cell ٠٣</td><td>cell ٠٤</td>
</tr>
</table>
مثال
all, اضافه کنيد و هر بار يکي از کلمات <table> را به تگ rules=" " حالا خصوصيت
را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا none, groups, rows, cols
تاثير اين خصوصيت را ببينيد. مثال
Alignment
مينويسيد محل قرارگرفتن <td> که در تگ align=" " ميتوانيد با استفاده از خصوصيت
left, right, يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات
مقداردهي کنيد. مثال center, justify
height, width
هم اندازه طول و عرض يک جدول را ميتوان height=" " , width=" " با خصوصيات
کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد
که اين جدول نود درصد عرض يک width=" از درصد % هم استفاده کنيد مانند "٪ ٩٠
صفحه را اشغال ميکند. مثال
bgcolor
که با عدد هگز رنگها مقدار دهي bgcolor=" " براي تعيين رنگ زمينه يک جدول از
هم مي توانيد بکار <td> و <tr> ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي
بريد. مثال
cellspacing, cellpadding
دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين <table> تگ
خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين
و ديگري فاصله بين متن داخل يک خانه در cellspacing=" " خصوصيت اين است
اين وظيفه را cellpadding=" " جدول با لبه هاي چارچوب آن خانه است که خصوصيت
به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود. مثال
header: <th></th>
حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و
رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در
از تگ <td></td> هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ
استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم <th></th>
ظاهر شده و از بقيه متمايز ميشود. مثال
colspan, rowspan
گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد
تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب
colspan=" " و براي يک رديف از rowspan=" " خانه هاي يک ستون از خصوصيت
استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار <td> در تگ
ميدهيد.مثال
caption
بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ
مشخص ميکنند. اين <table></table> در ميان تگهاي <caption></caption>
top, bottom, left, center, ميباشد با کلمات align=" " تگ داراي خصوصيت
مقداردهي ميشود.مثال right
thead, tbody, tfoot
اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ
مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد.
براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي
رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين
قسمت بدنه را با ، <thead></thead> رديف، که قسمت سر را با
کنترل ميکنيم. اين تگ <tfoot></tfoot> و قسمت انتهايي را با <tbody></tbody>
نيز ميباشد.مثال align داراي خصوصيت
colgroup
ميتوانيد خصوصيات کليه ستونهاي يک <colgroup></colgroup> همچنين با تگ
جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي
نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را span=" " خصوصيت
تعيين ميکنيد. مثال
summery
که توصيفي از summery=" " هست بنام <table> يک خصوصيت ديگر نيز براي تگ
جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط
متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است
از آن استفاده کنيد.
به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم
Nested table درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روش
گفته ميشود.
فرم چيست؟
فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که
اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد
داخل يک صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع
name=” نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت
بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم <form> “در تگ
پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ
آنها را بکار برد. بعضي از اين اجزا عبارتند از: کادرهاي متني </form> پايان دهنده
radio وتک گزينه اي checkboxes قسمت انتخابات چند گزينه اي ،text fields
وپاک submit و دکمه هاي تأييد drop-down lists ليستهاي پايين کشيدني ، buttons
. reset کننده
action=” “, و با افزودن خصوصيات ASP, CGI فرمها توسط برنامه هايي نظير
اطلاعات وارده را پردازش کرده و به <form> در تگ method=” “, enctype=” “
وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور
به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.
(button) دکمه
کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از
فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين
دکمه ميپردازيم. براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:
name=” که داراي دو خصوصيت <button></button> روش اول: با استفاده از تگ
reset و يا submit براي مشخص کردن نوع دکمه که type=” “ “براي نامگذاري و
ميباشد . در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان
ميشود
<button name="button ٠١" type="submit"> OK </button>
OK
name=” که مانند روش اول دو خصوصيت <input> روش دوم: با استفاده از تگ
باشد و يا submit که ميتواند هم type=” “ در جلوي آن بيايد و button “که بايد کلمه
.reset
<input name="button" type="submit">
Submit Query Reset
فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد
در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما
نمايان ميشود. submit , reset دخالتي در اين کار نداريد و به صورت پيش فرض کلمه
البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل
را برابر با کلمه type=” “ يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت
آن را آدرس دهي ميکنيد: src=” “ قرار ميدهيد و با خصوصيت image
<input name="button" type="image" src="images/button٠١.gif">
دکمه بايد استفاده کرد. submit لازم بذکر است که در اين تکنيک فقط از حالت
text field, text area
خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ
<input name=” “ type=” “>
وخصوصياتش زياد کار داريم . ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل
کادرمتني ميتوانيم استفاده کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر
نباشد و کادر ما هم به صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما
داراي چندين رديف ميباشد.
در مدل اول ازاين تگ استفاده ميکنيم:
<input name="textfield ٠١" type="text”>
بيايد تا مرورگر بفهمد چه type=” “ بايد در جلوي خصوصيت text دقت کنيد که کلمه
که با عدد مقدار دهي size=” “ اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت
maxlength=” ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسط
“ حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.
Textfield :
اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي
استفاده کنيد تا هر متني که type=”password” بايد از type=”text” خصوصيت
وارد شود بصورت ستاره در مرورگر نمايش داده شود.
Password :
اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از
از name=” “ استفاده کنيد که جدا از خصوصيت <textarea></textarea> تگ
براي کنترل رديفها و ستونهاي کادر بکار ميبريد. cols=” “ , rows=” “ خصوصيات
this is a textarea example.
label
زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا
کنترل بيشتري روي <label> نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ
نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را
احاطه کنيد، بدين صورت:
<label> Name :
<input type="text" name="textfield٠١">
</label>
که اين کد به صورت زير ظاهر مي شود،
Name:
دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت
فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،
<label for="textfield٠١"> Name : </label>
<input type="text" name="textfield٠١">
Tab order
است که کاربرد زيادي در عنصر tabindex بنام html يکي از خصوصيات مفيد تگهاي
فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با
بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز Tab زدن دکمه
مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت
کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم،
کيبورد است. با اضافه کردن خصوصيت Tab بسيار سخت تر از حرکت با دکمه
به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم tabindex
تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که
مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:
<input type="text" name="field١" tabindex="١">
<input type="password" name="pass١" tabindex="٢">
<textarea name="area١" cols="١٠" rows="٥"
tabindex="٣"></textarea>
file field
گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به
را نوشت و خصوصيت <input> سرور فرستاده شود. براي اين حالت بايد در فرم، تگ
قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، file آنرا برابر با کلمه type
Browse مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام
نمايان مي کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است
وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل فرستاده
شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً
هم file field را نوشته و در تگ enctype="multipart/form-data"
به درستي txt را وارد کنيد که در اين حالت فايلهاي متني accept="text/plain"
فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.
فريم چيست؟
هنگاميکه بخواهيد دو يا سه صفحه را در يک صفحه جاي دهيد بايد از عنصر فريم يا
چارچوب استفاده کنيد. اين عنصر زماني کارآيي دارد که ميخواهيد يک قسمت، در همه
صفحات ثابت باشد. به طور مثال شما در سمت چب صفحه يک ليست ثابت داريد و
ميخواهيد هر وقت بيننده روي هر گزينه از اين ليست که کليک کرد توضيحات مربوط به آن
در سمت راست نمايان شود. پس ابتدا يک صفحه براي آن ليست درست کنيد و براي
اطلاعات هر گزينه هم يک صفحه بسازيد و آنها را در يک فريم بگذاريد.
مي گويند و به هر صفحه از frameset به مجموعه صفحات گنجانده شده در يک صفحه
يا يک چارچوب گفته ميشود. در ساختار اصلي کدها، ديگر تگ frame آن يک
قرارميگيرد، البته <frameset></frameset> نوشته نميشود و جاي آن تگ <body>
هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ
frameset بايد استفاده کنيد ولي هنگاميکه صفحات را در يک <body></body>
استفاده کرد، <frameset> از <body> ميگذاريد بايد در ساختار کد آن بجاي
<html>
<head>
</head>
<frameset>
</frameset>
</html>
فريمها بايد بر روي هر فريم کليک راست source code توجه داشته باشيد که براي ديدن
بايد frameset را انتخاب کنيد و براي مشاهده کدهاي يک view source کرده و گزينه
مرورگر اقدام نماييد. view از منو
cols, rows
مخلوطي از چند frameset هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک
<frameset> فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ
کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي
استفاده ميکنيم و اين خصوصيت را برابر با cols=” “ در صفحه قرار دهيم از خصوصيت
درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از
آنها ٣٠ ٪ صفحه را اشغال کند پس ديگري ٧٠ ٪ را اشغال خواهد کرد و تگ آن بدين
صورت ميشود:
<frameset cols=”٣٠٪،٧٠٪”>
دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي
استفاده ميکنيد. اما براي قراردادن دو صفحه يا rows=” “ داشته باشيد از خصوصيت
بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن frameset دوفريم در
براي هر کدام از فريمها به اين صورت است:
<frameset cols=”٥٠٪،٥٠٪”>
<frame src=”٠١.htm”>
<frame src=”index.html”>
</frameset>
مثال
آدرس دهي و نامگذاري
بايد آدرس صفحه را بنويسيد. src=” “ همانطور که ملاحظه ميفرماييد جلوي خصوصيت
بايد به اين تگ اضافه شود و src خصوصيت ديگري هم هست که به غير ازخصوصيت
است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي name=” “ آن
ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور
مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت
راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که
اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر
را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار target=” “ لينک خصوصيت
داد.
<frameset cols="٣٠٪،٧٠٪">
<frame name="left" src="htmlpages/٠١.html">
<frame name="right" src="htmlpages/index٠١.htm">
</frameset>
نمايش داده index٠١.htm ٠١ داشته باشيم و بخواهيم در .html اگر هم يک لينک در فايل
شود، طبق گفته هاي بالا:
<a href="htmlpages/info.html" target="right"> info.html </a>
مثال
frame border
درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده frameset شما اگر يک
رابه تگ border=” و يا ” ٠ frameborder="no" ايد، براي برداشتن اين کادر ميتوانيد
اضافه کنيد. <frameset>
مثال
noresize
در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم frameset هنگاميکه
drag را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با
noresize کردن کم يا اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت
بيافزاييد. <frame> رابه تگ
مثال
scrolling
هر فريم را کنترل ميکند، هر فريم داراي scroll bar خصوصيت ديگري هم هست که
ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد scroll
Yes,no,auto کنترل ميشود و آنرا برابر با کلمات scrolling=” “ که با خصوصيت
قرار دهيد.
مثال
noframes
بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان نمي
دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي
کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را
اضافه کنيد: frameset هميشه به
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي
مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات
وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل
صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد
خواهيد گرفت.
اهميت حجم فايل صوتي
فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي باشند که بايد در
انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين
صفحه وب کند تر و خسته کننده تر خواهد شد.
MIME
هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن نمي
باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط
اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد
مي گويند. MIME براي پخش آن فايل صدا بزنند که اين اطلاعات را
است. Multipurpose Internet Mail Extensions مخفف MIME
“File Not Found” ناشناخته مواجه شود، پيغام خطاي MIME زمانيکه مرورگر با يک
را در صفحه نمايش مي دهد.
فرمتهاي فايلهاي صوتي
يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال WAV
اين فرمت برابر است با MIME مي کند و در سيستم عامل ويندوز بکار مي رود. نوع
. audio/wav
است و خاصيت آن داشتن حجم UNIX, Linux اين فرمت متعلق به سيستمهاي عامل AU
. audio/basic اين فرمت برابر است با MIME کم و البته با کيفيت پايين تر، که نوع
است با کيفيت بالا و حجم بسيار Macintosh اين فرمت هم متعلق به کامپيوترهاي AIFF
. audio/aiff آن برابر است با MIME بالا. نوع
اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن MIDI
فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين
اين MIME مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع
است. audio/midi فرمت
افزودن فايل صوتي به زمينه صفحه
به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي <bgsound> با اضافه کردن تگ
را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به
برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط
مرورگراينترنت اکسپلورر نسخه هاي ٥٫٥ به پايين آنرا پشتيباني مي کنند. اين تگ داراي
براي کنترل تکرار دفعات loop براي آدرس دهي فايل صوتي و src ، دو خصوصيت
پخش مي باشد.
<bgsound src=”mymusic.mid” loop=”٢”>

[reza_1001]

افزودن فايل صوتي بصورت لينک
يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ
است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد <a>
ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه
را بزنيد آن فايل توسط خود مرورگر Yes ٦٫٠ ابتدا پيغامي ظاهر مي شود که اگر دکمه
براي آدرس دهي استفاده کنيد، فقط href پخش خواهد شد. در تگ لينک بايد از خصوصيت
دقت کنيد که پسوندها را درست بنويسيد.
<a href=”musics/mysong.wav”> music file </a>
مثال
object افزودن فايل صوتي از طريق
يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ
است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را <object>
بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد،
و data نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت
استفاده مي شود، همچنين از خصوصيت type آن فايل از خصوصيت MIME براي تعيين
براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که height, width
در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.
<object data=”musics/sound.wav” MIME=”audio/wav”>
Your browser doesn’t support this audio format.
</object>
مثال
ActiveX نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد
را بزنيد. Yes ظاهر خواهد شد که براي اجراي فايل بايد دکمه
Embed file
است. embed تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ
src نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت C٣W اين تگ استاندارد
براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت
loop و autostart مي توانيد استفاده کنيد. اين تگ داراي خصوصيات width ,height
مقدار دهي مي شوند. true يا false مي باشد که با کلمات
<embed src="godfather.mid" autostart="false"
loop="false" height="٤٠" width="١٥٠">
مثال
Streaming Audio
احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر
مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه
مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در
صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک
است که در صفحه بعد به آن مي Streaming Audio and Video استفاده از روش
پردازيم.
<!doctype>
برايتان توضيح دهم . همانطور که <head> در اين بخش ميخواهم در مورد تگهاي قسمت
head را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان Html ميدانيد تگهاي
نوشته <html></html> که هر دو مابين دو تگ اصلي body ديگري قسمت بدنه يا
ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط
يک DTD و آن <html> شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده
است و کار آن معرفي Document Type Definition صفحه وب ميباشد که مخفف
نوع تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور
ميباشد <!doctype> ،DTD خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه
و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از
مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.
HTML مخصوص به خود را دارد و نسخه هاي معتبر DTD يک HTML هر نسخه از
XHTML ميباشد و اگر از کدهاي Html ٢ و نسخه جديد آن ٤٫٠١ , ٣٫٢, عبارتند از: ٤
هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به
ميباشد . W٣C به عهده HTML , XHTML رسميت شناختن تگهاو نسخه هاي
HTML براي ٤٫٠ DTD
<!DOCTYPE html public “-//w٣c//DTD HTML ٤٫٠//en”>
XHTML و براي ١٫٠
<!DOCTYPE xhtml public “-//w٣c//DTD XHTML ١٫٠ strict//en”>
بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به
. head قسمت سر يا همان
<head></head>
مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود که در مرورگر نشان داده
نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود. اين
اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها
بيشتر توضيح خواهم داد.
تگهاي لازم براي اين قسمت به شرح زير ميباشند:
<title>, <base>, <meta>, <link>, <script>, <style>
<title></title>
نمايان خواهد شد. title bar بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر
دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و
همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال
نمايان ميشود.
<base>
در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ
استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت
لينکها، href=” “ ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت
اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.
<base href="http://www.sitename.com">
اجباري است. http دقت کنيد که نوشتن پروتکل
<meta>
متا تگها اطلاعات مربوط به موتورهاي جستجوگر را کنترل ميکنند. در اين تگها هر نوع
اطلاعات که براي جستجو نياز باشد را وارد ميکنيد ، مانند کلمات کليدي يا نام سازنده
سايت و يا تاريخ راه اندازي و از اين قبيل که در بخش سايتهاي جستجوگر بيشتر توضيح
خواهم داد. خصوصياتي را که در اين تگ ميتوانيد بکار بريد،
http-equiv=” “, name=” “ , content=” “
قرار دهيم http-equiv=”keyword” براي معرفي کلمات کليدي سايت بايد خصوصيت
وارد کنيم، content=” “ و کلمات مورد نظر را در خصوصيت
<meta http-equiv=”keyword” content=”html, web, amoozesh,
amouzesh”>
مرورگر را در اين قسمت معين کنيد که براي encoding همچنين ميتوانيد نوع رمزگذاري
استفاده کنيد که در قسمت فارسي نويسي توضيح utf- بکار بردن حروف فارسي بايد از ٨
خواهم داد.
<meta http-equiv=”content-type” content=”text/html;charset=utf-٨”>
اين تگ به مرورگر ميفهماند که بايد از حروف و علامتهاي يونيکد براي نمايش صفحه
استفاده کند. براي وارد کردن اطلاعات ديگر هم مانند زير عمل ميکنيد:
<meta name=”author” content=”your-name”>
اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا
هم ببينند، از اين تگ بايد استفاده کنيد: offline بصورت
<meta name=”pragma” content=”no-cache”>
يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن
مرورگر استفاده کرده و اين تگ را اضافه refresh اطلاعات را ببيند، از خاصيت
ميکنيد:
<meta http-equiv=”refresh” content=”٥”>
که آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک
صفحه ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد
<meta http-equiv=”refresh”
content=”٥;url=http://www.sitename.com/page٠١.htm”>
<link>
در آن style sheet اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند
صفحه استفاده کنيم،
<link rel=”stylesheet” href=”stylesheets_folder/menu.css”>
<script>
را در اين تگ کنترل ميکنيم که در بخش جاوا اسکريپت javascript کدهايي مانند
توضيح خواهم داد.
<style>
ميباشد که در بخش مربوطه توضيح داده شده است. Style sheet تگ مشخصه
که بخواهيد در صفحه وب نمايش داده شود بايد ما HTML همانطور که ميدانيد هر عنصر
اين HTML قرار گيرد. در کليه فايلهاي <body></body> يعني body بين تگ
تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد
را بکار بريد. <frameset>
دارد، خود داراي خصوصياتي HTML جدا از اهميتي که در فايلهاي body اما خود تگ
مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.
اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي bgcolor
توانيد از کد هگز رنگها ،
<body bgcolor=”#ccff٠٠”>
و يا نام رنگ را بکار بريد، مانند:
<body bgcolor=”black”>
مثال
نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين
حالت متن در صفحه محو خواهد شد.
توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه background
صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،
<body background=”images/filename.gif”>
توجه داشته باشيد که حجم عکس در سنگيني صفحه و پايين آمدن سرعت تکميل شدن آن
موثر است. هنگاميکه از اين خصوصيت استفاده مي کنيد آن عکس نسبت به اندازه اي که
StyleSheet دارد در صفحه تکرار مي شود تا فضاي آنرا بپوشاند که با استفاده از
تکرار آنرا مي توانيد کنترل کنيد.
مثال
هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر bgproperties
مي شود يعني به بالا و پايين يا چپ و راست حرکت مي scroll صفحه مانند عنصر متن
عکس در زمينه ثابت مي fixed کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با
ماند و عناصر بر روي آن حرکت مي کنند.
<body background=”../images/bg.jpg” bgproperties=”fixed”>
مثال
لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر
و اپرا قابل اجراست.
توسط اين خصوصيت حاشيه بالاي صفحه کنترل مي شود که مقدار آن topmargin
عدد در مقياس پيکسل مي باشد.
حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد leftmargin
آنرا برابر با عدد صفر قرار دهيد.
<body topmargin=”٠” leftmargin=”٠”>
مثال
اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت text
اضافه body رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ
کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.
<body text=”#٩٩ccff”>
مثال
اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند dir
و چپ به راست مانند حروف انگليسي که rtl فارسي که در اينصورت بايد برابر با مقدار
بکار body مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ ltr برابر با
صفحه مرورگر از سمت راست به چپ منتقل scroll قرار دهيد محل rtl بريد و آنرا برابر
مي شود.
اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد lang
که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي
را مي نويسيد. en و براي انگليسي fa
<body lang=”fa” dir=”rtl”>
مثال
در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد link
رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا
کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد
رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد
و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از alink از خصوصيت
استفاده مي کنيد. vlink خصوصيت
<body link=”#٩٩٠٠٠٠” alink=”#٠٠٩٩٠٠” vlink=”#٠٠٠٠٩٩”>
مثال
که مربوط به زبان جاوا اسکريپت مي باشد onload خصوصيات ديگري هم هست مانند
که در بخش مربوطه با آنها آشنا خواهيد شد.
٤٫٠١ و تفاوتهاي آن با نسخه ٤٫٠ Html
نسخه اصلاح شده ٤٫٠ ميباشد که براي هماهنگي با نسخه جديد HTML ٤٫٠١
باشد، در وب منتشر شد. اين نسخه با XML و نسل بعدي زبان وب که XHTML يعني
تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد
وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در
خواهم XHTML اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش
قوانين بکار برده شده در HTML گفت. بهتر است که شما بعد از فراگيري مجموعه ٤
را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده XHTML
ديگر توصيه نميشود وحتي بعضي از آنها ممنوع W٣C يکسري تگها از طرف انجمن
شدند.
آن فايل DTD اولين چيزيکه بايد رعايت کنيد HTML براي شروع کدنويسي در ٤٫٠١
است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده
نوشته <HTML> بايد قبل ازتگ DTD ممکن است اينچنين نباشد. همانطور که ميدانيد
شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از
تگهاي استاندارد و قابل قبول استفاده خواهد کرد:
<!DOCTYPE HTML PUBLIC
‘’-//W٣C//DTD HTML ٤٫٠١//EN”
“http://www.w٣.org/TR/html٤/strict.dtd”>
استفاده کنيد: DTD اگر در آن صفحه تگهاي از رده خارج هم بکار برده ايد بايد از اين مدل
<!DOCTYPE HTML PUBLIC
“-//W٣C//DTD HTML ٤٫٠١ Transitional//EN”
“http://www.w٣.org/TR/html٤/loose.dtd”>
استفاده ميکنيد اين مدل را بکار بريد: Frame همچنين اگر از عنصر
<!DOCTYPE HTML PUBLIC
“-//W٣C//DTD HTML ٤٫٠١ Frameset//EN”
“http://www.w٣.org/TR/html٤/frameset.dtd”>
آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگها ، پايان DTD بعد از مشخص کردن
دهنده داشته باشند. بعضي از تگها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود
اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان . <img>,<p> مانند
يعني/ را بگذارند. مانند: slash تگ و قبل از بستن تگ با علامت < بايد علامت
<img src=”…/images/mypic.gif” />
اين قبيل تگها را بدين صورت بکار بريد:
<meta/>, <br/>, <blockquote/>, <hr/>, <basefont/>, <Q/>, <li/>,
<dt/>, <dd/>, <img/>, <area/>, <frame/>, <input/>, <param/>,
<bgsound/>
بود يعني حالتيکه لينک به يکي از نقاط داخل Anchor در حالت <a> نکته: اگر تگ
بنويسيد. <a/> همان صفحه پيوند داده خواهد شد، بايد آنرا بصورت
سازگار شود. XHTML اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با
Xhtml آموزش
در EXtensible HyperText Markup Language که مخفف XHTML زبان
ميباشد که در HTML تاريخ ٢٦ ژانويه سال ٢٠٠٠ منتشر شد و به قول بعضيها همان ٥
واقع اينچنين نيست. اين زبان نسل جديد زبان وب ميباشد که داراي يکسري اصول و قوانين
را در مورد دستگاههاي کوچک الکترونيکي که به وب هم HTML خاص است تا کمبودهاي
متصل ميشوند مانند تلفنهاي همراه، را جبران کند.
اين وظيفه XHTML است که XML مدتي است که وب آماده معرفي زبان آينده خود يعني
نوشته شوند. هر مرورگر وب ، DTD بايد در HTML را بعهده دارد. در اين نسخه کدهاي
دارد و به همين دليل است که يکسري از دستورات نسخه هاي DTD داخل خود يک نوع
در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد HTML مختلف
ميخواهد يک W٣C خاص خود بکار بريد، چون انجمن DTD را در HTML دستورات
ها برقرار User-agent استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه
برنامه هاي تحت وب مانند مرورگرها را گويند. User-agent . شود
باشد تا برنامه XML بايد يک برنامه کاربردي تحت HTML پيشنهاد داده که W٣C
نويسان وب مجبور به رعايت استاندارد آن شوند.
و نوشتن آن ، بايد اصول و قوانين اين نسخه را هم XHTML براي DTD با قبول کردن
رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد.
براي نسخه DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD پس ابتدا از
لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي HTML هاي
براي حالتهاي DTD نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع XHTML
مختلف وجود دارد:
استفاده شده و براي XHTML حالت اول براي صفحه اي است که فقط از دستورات صحيح
پشتيباني ميکنند، CSS مرورگرهايي است که از
<! DOCTYPE HTML PUBLIC
“-//W٣C//DTD XHTML ١٫٠ Strict//EN”
“http://www.w٣.org/TR/xhtml١/DTD/xhtml١-strict.dtd”>
باشد و XHTML و HTML حالت بعدي براي صفحه اي است که مخلوطي از کدهاي
پشتيباني نميکنند هم آنرا نمايش دهند، CSS مرورگرهاييکه از
<! DOCTYPE HTML PUBLIC
“-//W٣C//DTD XHTML ١٫٠ Transitional//EN”
“http://www.w٣.org/TR/xhtml١/DTD/xhtml١-transitional.dtd”>
در صفحه است، Frame و حالت آخر هم براي استفاده عنصر فريم
<! DOCTYPE HTML PUBLIC
“-//W٣C//DTD XHTML ١٫٠ Frameset//EN”
“http://www.w٣.org/TR/xhtml١/DTD/xhtml١-frameset.dtd”>
فراموش نکنيد که نوشتن يکي از آنها اجباري است.
حالا نکاتي را که بايد در اين نسخه رعايت کنيد:
اجباري نبود در HTML که در </head></body> • نوشتن تگهاي
اجباري است. XHTML
<p>….</p>, <hr/>, : • وجود تگهاي پايان دهنده اجباري است مانند
<br/>
• کليه تگها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته
<body bgcolor=”#ffcc شود. مانند: <” ٤٥
• مقادير خصوصيات در تگها بايد بين دو علامت ”…“ قرار گيرند.
• ترتيب قرار گرفتن تگها داخل هم بايد رعايت شود،
<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
• دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط
از XHTML DTD فراخواني شوند ولي اگر ميخواهيد داخل <link> تگ
آنها استفاده کنيد بايد مانند زير عمل کنيد:
<script language=”JavaScript” type=”text/javascript”>
<![CDATA [
document.write(“ Hi Friends “);
] ]>
</script>
ديگر از تگ <-- ..… --!> براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت
نياز مانند زير عمل شود،
<[CDATA […comment…] ]>
نبود و سادگي زبان HTML همانطور که ميبينيد يکسري محدوديتهايي هست که در
که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض HTML
دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، W٣C به گفته
. Portability و Extensibility
استايل شيت ها يکي از مفيد ترين عنصر در وب ميباشند که يکي از مزيتهاي آن ساخت يک
فايل و الگوي مشترک و استفاده آن در کليه صفحات سايت مي باشد. همين امر که از تکرار
يک سري کد جلوگيري ميکند باعث محبوبيت اين عنصر در نزد طراحان وب شده است.
با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟
با اين عنصر شما ميتوانيد مدل، اندازه، رنگ و نوع آرايش متن ، رنگ زمينه و حاشيه
صفحات و جدولها ، تنظيمات ليستها و همچنين عکسها را کنترل کنيد.
style تعيين الگو و
بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style هر
يا انتخاب کننده ميگويند که ااگوي تعريف شده در تگ آغاز selector نسبت دهيم style
کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.
سپس h را مشخص و بنويسيم مانند ١ selector براي تعيين و تعريف يک الگو ابتدا بايد
خصوصيات و مقادير آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و
مقدار آن بين { } به اين ترتيب ميباشد:
ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،
h١ { color:green }
نسبت دهيم ، بعد از هر کدام يک ; selector اگر بخواهيم چند خصوصيت را به يک
ميگذاريم،
h١ { color:green; text-align:center }
style روشهاي تعريف ااگو و
ها را به سه روش ميتوان تعريف کرد: Style
• روش اول: به عنوان يک الگوي خارجي که اطلاعات در يک فايل نوشته
داخل قسمت <link> ذخيره ميشود که در تگ .css ميشود و با پسوند
آدرس دهي و فراخوانده ميشود. head
نوشته و جاسازي کنيم که head را ميتوانيم در قسمت style : • روش دوم
مشخص ميشوند. <style></style> با تگهاي
به عنوان خصوصيت در يک تگ و مقدار style • روش سوم: با قرار دادن
دهي آن. مانند تگ زير:
<div style=”color:green”>
تعيين شود، آن الگويي که به تگ style به چند روش selector نکته: اگر براي يک
نزديکتر است اجرا خواهد شد، پس طبق اين اصل روش سوم نسبت به بقيه موثرتر است.
ها ويا خصوصيات آنها نيست. به مثال زير selector در ضمن هيچ محدوديتي در تعيين
توجه کنيد:
<style>
body { color:yellow; background-color:red }
h١,h٢, h٣, p { color:green }
</style>
class تعريف الگو از طريق
به روشهاي اول يا دوم تعريف ميشود، اما شما نميخواهيد که آن style گاهي اوقات يک
انتخاب ميکنيد ، selector الگو در همه جا اعمال شود، پس مياييد يک اسم واحد براي
يک نقطه ميگذاريد و اسمي را مينويسيد. پس از selector بدين ترتيب که بلافاصله بعد از
را مينويسيم و برابر class=” “ اين کار در هر تگي که نياز به آن الگو هست خصوصيت
با آن اسم قرار ميدهيم،
<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>
<link> در تگ css فراخواني فايل
زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام style sheet ارزش واقعي
صفحات از آن بهره ببريد. براي اين منظور شما فقط از طريق روش اول ميتوانيد اينکار را
notepad ها را در برنامه ويرايشگر متن مانند style انجام دهيد، بدين ترتيب که
ذخيره کرده و در دايرکتوري اصلي وب .css مينويسيد و سپس آن فايل را با پسوند
است. Cascading Style Sheet مخفف css . سايتتان قرار ميدهيد
selector نيست و فقط <style></style> نکته: در اين روش نيازي به نوشتن تگهاي
ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف
شده در آن فايل در صفحات اعمال نخواهند شد.
ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني style sheet پس از ذخيره فايل
قرار دهيد و سه head را در قسمت <link> کنيد، براي انجام اين عمل بايد تگ
است که برابر با کلمه rel=” “ خصوصيت مربوط به آنرا وارد کنيد. خصوصيت
مقداردهي ميشود و در آخر text/css وبا type=” " قرار ميدهيد و سپس stylesheet
فايل را آدرس دهي ميکنيد، href=” “ با خصوصيت
<link rel=”stylesheet” type=”text/css” href=” <“ آدرس فايل
اين تگ نيازي به پايان دهنده ندارد.
بررسی و امتحان کردن صفحات
تمام HTML يا ويرايشگرهاي notepad را در برنامه html زمانيکه شما نوشتن کدهاي
و با استفاده از .html يا .htm کرديد، بعد از ذخيره کردن آن فايل با يکي از پسوندهاي
مرورگر وب خود آنرا امتحان کنيد تا نتيجه کارتان را مشاهده و اگر مشکلي هم داشت
برطرف شود. مشکلاتي مانند نمايش نادرست صفحه يا حتي غلطهاي ديکته اي که زياد هم
به چشم ميخورند.
شما اين صفحات را قبل از اينکه روي سرور بگذاريد تا ديگران هم ببينند، بر روي
استفاده کرده ايد نياز CGI يا ASP کامپيوتر خود ميتوانيد امتحان کنيد ولي اگر از فايلهاي
به يک وب سرور براي چک کردن آنها داريد. شرکت مايکروسافت دو نرم افزار دارد که
توسط آنها ميتوانيد يک وب سرور درست کنيد و اينگونه فايلها را هم مشاهده کنيد. يکي از
است و بر روي ويندوزهاي Internet Information Services که مخفف IIS آنها
است Personal Web Server که مخفف PWS نصب ميشود و ديگري XP ٢٠٠٠ و
اجرا ميشود. ME و بر روي ويندوزهاي ٩٨ و
سعي کنيد هر صفحه را در مرورگرهاي مختلف چک کنيد که معروفترين آنها عبارتند از:
Internet Explorer ( IE ), Netscape Navigator ( NN ), Opera, Mozilla
چون بعضي از تگها در همه مرورگرها اجرا نميشوند و همچنين اينرا در نظر داشته باشيد
که سيستمهاي عامل هم با يکديگر فرق دارند. بطور مثال فونتها و طرز نمايش صفحه داخل
فرق ميکند. Macintosh با Windows در سيستم عامل Netscape مرورگر
موجود ميباشند که با کمک آنها ميتوانيد عيب هاي HTML validator برنامه هايي بنام
صفحات را پيدا کنيد. بطور مثال اگر تگ پايان دهنده اي را فراموش کرديد آنرا پيدا کرده و
بعضي از آنها حتي آن مشکل را رفع هم ميکنند. اگر از ويرايشگرهايي مانند
استفاده ميکنيد، خود Macromedia Dreamweaver يا Microsoft FrontPage
اين نرم افزارها برايتان عيب يابي ميکنند و نيازي به برنامه اضافي براي اين کار نداريد.
مراجعه کنيد براي تأييد http://validator.w٣.org (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fvalidator.w%D9%A3. org) همچنين شما ميتوانيد به آدرس
صفحات وب سايتتان که مزيت اين آدرس در اين است که بعد از رفع عيوب احتمالي، به
شما اجازه استفاده از لوگوي مخصوص خودشان را در اين زمينه ميدهند که نمايانگر بي
ميباشد که وظيفه تأييد و W٣C نقص بودن صفحات ميباشد. اين سايت زير نظر انجمن
را بعهده دارند. HTML, XHTML, CSS, … اعلان کدهاي
از نکاتيکه هنگام چک کردن يک صفحه نبايد فراموش کنيد ، امتحان کردن لينکها است تا
همه آنها به آدرس درست پيوند داده شوند. يکسري برنامه هم در اين زمينه وجود دارد که به
گفته ميشود. site-management tools آنها
بخاطر بسپاريد که يک طراح و برنامه نويس حرفه اي وب قبل از اينکه سايت خود را در
سرور اصلي راه اندازي کند تا ديگران به آن دسترسي داشته باشند، بايد از همه لحاظ
صفحات را تست کند و حتي بعد از راه اندازي يک مدت را براي امتحان کامل توسط
متخصصان و افراد عادي در نظر بگيرد و سپس اقدام به تبليغ سايت بين بينندگان و کاربران
کند. البته باز هم ممکن است مشکلاتي وجود داشته باشد که آنها را بعهده بينندگان بگذاريد تا
با نظرات خود شما را مطلع کنند.
و راه اندازي سايت upload
بعد از آماده کردن صفحات سايت و رفع ايراد آنها حالا نوبت به راه اندازي و برپايي وب
سايتتان رسيده است. براي اينکار نياز به يک فضاي امن در يک سرور داريد. سرور، يک
کامپيوتر متصل به اينترنت است که محتواي وب سايت شما بر روي هارد ديسک آن قرار
يا ميزباني وب ميگويند. يکبار تنظيمات اوليه web hosting خواهد گرفت که به اين عمل
توسط متخصصان انجام ميشود و از آن به بعد تمام کسانيکه به اينترنت دسترسي دارند
کنيد، upload ميتوانند سايت شما را هم ببينند. شما بايد فايلهاي خود را بر روي سرور
بر عکس Upload . يعني اطلاعات را از کامپيوتر خود به کامپيوتر اصلي بفرستيد
است که در دانلود اطلاعات را از کامپيوتر ديگري جمع آوري کرده download اصطلاح
و در کامپيوتر خود ذخيره مي کنيد.
پيدا کردن سرور مناسب
کردن صفحات نياز به يافتن يک فضاي مناسب با امنيت بالا داريد. بطور upload براي
اين فضا را به شما اجاره خواهند داد. (ISP) معمول شرکتهاي سرويس دهنده اينترنت
براي برپايي يک سايت معمولي نياز به ٥ الي ٢٠ مگابايت فضا داريد. سايتهايي هم هستند
که اين فضا را بطور رايگان دراختيار شما مي گذارند که در عوض تبليغات خود را در
است. www.geocities.com (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.geocities.com) صفحات سايت شما جاي ميدهند. يکي از اين سايتها
در نظر داشته باشيد که شرکتهاي اينترنتي زيادي با قيمتهاي متفاوت وجود دارند که شما بايد
قيمتها را نسبت به امکاناتيکه در اختيار شما قرار ميدهند، بسنجيد و سپس اقدام به اجاره فضا
کنيد.
Domain Registartion ثبت اسم و دامنه سايت
پس از پيدا کردن سرور مناسب نوبت به ثبت اسم وب سايت ميرسد که اين کار شامل هزينه
اضافي ميباشد و ميتوانيد در همان شرکتي که ميزباني سايت شما را به عهده دارد، آنرا به
ثبت برسانيد. البته اسم مورد نظر شما نبايد از قبل رزرو شده باشد. سايتهايي وجود دارند که
اسم مورد نظر خود را ميتوانيد در آن جستجو کنيد تا اگر آن اسم رزرو نشده باشد، اقدام به
ميباشد. www.register.com (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.register.com) ثبت آن کنيد. يکي از اين سايتها
FTP کردن فايلها توسط Upload
چند روش براي انتقال محتواي سايت شما بر روي سرور وجود دارد. بهترين راه استفاده از
ميباشد. براي استفاده از اين File Transfer Protocol که مخفف FTP پروتکل
Cute سرويس برنامه هايي هست که اينکار را براي ما انجام ميدهند. معروفترين برنامه ها
ميباشند. يکي از امکاناتي که شرکت ميزبان در اختيار شما بايد قرار WS FTP و FTP
يا همان کلمه رمز را به password دهد همين سرويس ميباشد که مشخصات لازم مانند
وارد کرده و به دايرکتوري مشخص FTP شما ميدهند و شما اطلاعات لازم را در برنامه
در سرور وصل ميشويد. زمانيکه اين ارتباط برقرار شود بايد عمل انتقال فايلها را انجام داد
داراي دو پنجره ميباشند که يکي محتواي کامپيوتر خودتان را و FTP که بيشتر برنامه هاي
ديگري دايرکتوري رزرو شده در سرور را نشان ميدهد. عمل انتقال فايلها به دو روش انجام
که مخصوص انتقال فايلهاي داراي متن مانند خود صفحات ASCII ميشود، يکي بصورت
که مخصوص انتقال فايلهاي گرافيکي، صوتي و Binary و ديگري بصورت HTML
تصويري ميباشد. دقت کنيد که اگر اشتباه انتخاب کنيد فايلها خراب شده و قابل استفاده
نميباشند ، اما نگران اين موضوع نباشيد، داخل برنامه هاي مربوطه گزينه اي هست که
بطور اتوماتيک اينکار را انجام ميدهد و فقط شما بايد آنرا فعال کنيد.
و تنظيمات مربوط به سرور، صفحه اصلي سايت شما در اختيار upload پس از عمل
بينندگان قرار خواهد گرفت که از طريق همان صفحه به تمام سايت شما دسترسي خواهند
داشت.
براي بکار بردن رنگها در صفحه وب و عناصر مربوط به آن، مي توانيم از دو
نوع مقداردهي در خصوصيتها استفاده کنيم. يکي بکار بردن نام رنگ که در زير
نام رنگهايي را که در حال حاضر مي توانيد بکار بريد، W٣C مطابق با استاندارد
ليست شده است
Black="#٠٠٠٠٠
٠"
Maroon
=
Green =
"#٠٠٨٠٠
Navy =
"#٠٠٠٠٨
"#٨٠٠٠٠
٠"
٠" ٠"
Silver="#C٠C٠
C٠"
Red =
"#FF٠٠٠
٠"
Lime =
"#٠٠FF٠

[reza_1001]

=
"#٠٠٠٠F
F"
Gray="#٨٠٨٠٨
٠"
Purple =
"#٨٠٠٠٨
٠"
Olive =
"#٨٠٨٠٠
٠"
Teal =
"#٠٠٨٠٨
٠"
White="#FFFF
FF"
Fuchsia
=
"#FF٠٠F
F"
Yellow =
"#FFFF٠
٠"
Aqua =
"#٠٠FFF
F"
اما نوع ديگر مقداردهي، استفاده از کد هگز رنگها است. اين کد تشکيل شده از ٦
کاراکتر که هر کدام از آنها مي تواند يکي از مقادير زير باشد:
٠،١،٢،٣،٤،٥،٦،٧،٨،٩,A,B,C,D,E,F
#FF که اين شش کاراکتر بهمراه علامت # مي آيند، بدين شکل: ٠٠٩٩
مي باشد (Blue) و آبي (Green) سبز (Red) اين مقدار نمايانگر سه رنگ قرمز
در نظر FF مي گويند. اگر هگز يک رنگ را ٠٠٩٩ RGB که اصطلاحاً به آنها
مقدار ترکيبي رنگ قرمز، ٠٠ مقدار ترکيبي رنگ سبز و ٩٩ مقدار FF ، بگيريم
پر رنگ ترين حالت را FF رنگ آبي را نشان مي دهد که ٠٠ کمرنگ ترين و
کاملاً رنگ قرمز را نشان مي دهد. FF نمايش مي دهند. بطور مثال ٠٠٠٠
از ترکيب اين ٦ کاراکتر مي توانيد ١٦٫٧ ميليون رنگ بسازيد. اما فقط ٢٥٦ رنگ
هست که سازگار با کليه سيستمهاي عامل و مرورگرها است يعني رنگهاي غير از
آنها در سيستمهاي مختلف با هم فرق دارند. به جدول زير دقت کنيد فقط رنگهاي
palette- ٠٠،٣٣،٦٦،٩٩ تشکيل شده اند که به آنها ,CC,FF سازگار از ترکيب
مي گويند. safe colors
بهتر است براي بکارگيري رنگها از خصوصيات استايل W٣C نکته: بنا بر اعلام
شيت ها استفاده کنيد چون در آينده نزديک خصوصيات رنگها در عناصر کاربردي
نخواهد داشت و از رده خارج مي شوند. همچنين از حروف بزرگ در مقداردهي
رنگها استفاده کنيد و علامت # را فراموش نکنيد.
FFFشماره نام علامت علامت
علامت
" &quot; &#٣٤;
& &amp; &#٣٨;
< &lt; &#٦٠;
> &gt; &#٦٢;
&nbsp; &#١٦٠;
¡ &iexcl; &#١٦١;
¤ &curren; &#١٦٤;
¢ &cent; &#١٦٢;
€ &euro; &#٨٣٦٤;
£ &pound; &#١٦٣;
¥ &yen; &#١٦٥;
¦ &brvbar; &#١٦٦;
§ &sect; &#١٦٧;
¨ &uml; &#١٦٨;
© &copy; &#١٦٩;
ª &ordf; &#١٧٠;
« &laquo; &#١٧١;
¬ &not; &#١٧٢;
­ &#١٧٣;
® &reg; &#١٧٤;
™ &trade;
¯ &macr; &#١٧٥;
° &deg; &#١٧٦;
± &plusmn; &#١٧٧;
² &sup٢; &#١٧٨;
³ &sup٣; &#١٧٩;
´ &acute; &#١٨٠;
μ &micro; &#١٨١;
¶ &para; &#١٨٢;
· &middot; &#١٨٣;
¸ &cedil; &#١٨٤;
¹ &sup١; &#١٨٥;
º &ordm; &#١٨٦;
» &raquo; &#١٨٧;
¼ &frac١٤; &#١٨٨;
½ &frac١٢; &#١٨٩;
¾ &frac٣٤; &#١٩٠;
¿ &iquest; &#١٩١;
× &times; &#٢١٥;
÷ &divide; &#٢٤٧;
À &Agrave; &#١٩٢;
Á &Aacute; &#١٩٣;
 &Acirc; &#١٩٤;
à &Atilde; &#١٩٥;
Ä &Auml; &#١٩٦;
Å &Aring; &#١٩٧;
Æ &AElig; &#١٩٨;
Ç &Ccedil; &#١٩٩;
È &Egrave; &#٢٠٠;
É &Eacute; &#٢٠١;
Ê &Ecirc; &#٢٠٢;
Ë &Euml; &#٢٠٣;
Ì &Igrave; &#٢٠٤;
Í &Iacute; &#٢٠٥;
Î &Icirc; &#٢٠٦;
Ï &Iuml; &#٢٠٧;
Ð &ETH; &#٢٠٨;
Ñ &Ntilde; &#٢٠٩;
Ò &Ograve; &#٢١٠;
Ó &Oacute; &#٢١١;
Ô &Ocirc; &#٢١٢;
Õ &Otilde; &#٢١٣;
Ö &Ouml; &#٢١٤;
Ø &Oslash; &#٢١٦;
Ù &Ugrave; &#٢١٧;
Ú &Uacute; &#٢١٨;
Û &Ucirc; &#٢١٩;
Ü &Uuml; &#٢٢٠;
Ý &Yacute; &#٢٢١;
Þ &THORN; &#٢٢٢;
ß &szlig; &#٢٢٣;
à &agrave; &#٢٢٤;
á &aacute; &#٢٢٥;
â &acirc; &#٢٢٦;
ã &atilde; &#٢٢٧;
ä &auml; &#٢٢٨;
å &aring; &#٢٢٩;
æ &aelig; &#٢٣٠;
ç &ccedil; &#٢٣١;
è &egrave; &#٢٣٢;
é &eacute; &#٢٣٣;
ê &ecirc; &#٢٣٤;
ë &euml; &#٢٣٥;
ì &igrave; &#٢٣٦;
í &iacute; &#٢٣٧;
î &icirc; &#٢٣٨;
ï &iuml; &#٢٣٩;
ð &eth; &#٢٤٠;
ñ &ntilde; &#٢٤١;
ò &ograve; &#٢٤٢;
ó &oacute; &#٢٤٣;
ô &ocirc; &#٢٤٤;
õ &otilde; &#٢٤٥;
ö &ouml; &#٢٤٦;
ø &oslash; &#٢٤٨;
ù &ugrave; &#٢٤٩;
ú &uacute; &#٢٥٠;
û &ucirc; &#٢٥١;
ü &uuml; &#٢٥٢;
ý &yacute; &#٢٥٣;
þ &thorn; &#٢٥٤;
ÿ &yuml; &#٢٥٥;
OE &OElig; &#٣٣٨;
oe &oelig; &#٣٣٩;
Š &Scaron; &#٣٥٢;
š &scaron; &#٣٥٣;
Ÿ &Yuml; &#٣٧٦;
ˆ &circ; &#٧١٠;
˜ &tilde; &#٧٣٢;
Α &Alpha; &#٩١٣;
Β &Beta; &#٩١٤;
Γ &Gamma; &#٩١٥;
Δ &Delta; &#٩١٦;
E &Epsilon; &#٩١٧;
Z &Zeta; &#٩١٨;
H &Eta; &#٩١٩;
Θ &Theta; &#٩٢٠;
I &Iota; &#٩٢١;
K &Kappa; &#٩٢٢;
Λ &Lambda; &#٩٢٣;
M &Mu; &#٩٢٤;
N &Nu; &#٩٢٥;
Ξ &Xi; &#٩٢٦;
O &Omicron; &#٩٢٧;
Π &Pi; &#٩٢٨;
P &Rho; &#٩٢٩;
Σ &Sigma; &#٩٣١;
T &Tau; &#٩٣٢;
Y &Upsilon; &#٩٣٣;
Φ &Phi; &#٩٣٤;
X &Chi; &#٩٣٥;
Ψ &Psi; &#٩٣٦;
Ω &Omega; &#٩٣٧;
α &alpha; &#٩٤٥;
β &beta; &#٩٤٦;
γ &gamma; &#٩٤٧;
δ &delta; &#٩٤٨;
ε &epsilon; &#٩٤٩;
ζ &zeta; &#٩٥٠;
η &eta; &#٩٥١;
θ &theta; &#٩٥٢;
ι &iota; &#٩٥٣;
κ &kappa; &#٩٥٤;
λ &lambda; &#٩٥٥;
μ &mu; &#٩٥٦;
ν &nu; &#٩٥٧;
ξ &xi; &#٩٥٨;
ο &omicron; &#٩٥٩;
π &pi; &#٩٦٠;
ρ &rho; &#٩٦١;
ς &sigmaf; &#٩٦٢;
σ &sigma; &#٩٦٣;
τ &tau; &#٩٦٤;
υ &upsilon; &#٩٦٥;
φ &phi; &#٩٦٦;
χ &chi; &#٩٦٧;
ψ &psi; &#٩٦٨;
ω &omega; &#٩٦٩;
– &ndash; &#٨٢١١;
— &mdash; &#٨٢١٢;
‘ &lsquo; &#٨٢١٦;
’ &rsquo; &#٨٢١٧;
‚ &sbquo; &#٨٢١٨;
“ &ldquo; &#٨٢٢٠;
” &rdquo; &#٨٢٢١;
„ &bdquo; &#٨٢٢٢;
† &dagger; &#٨٢٢٤;
‡ &Dagger; &#٨٢٢٥;
… &hellip; &#٨٢٣٠;
‰ &permil; &#٨٢٤٠;
′ &prime; &#٨٢٤٢;
″ &Prime; &#٨٢٤٣;
‹ &lsaquo; &#٨٢٤٩;
› &rsaquo; &#٨٢٥٠;
⎯ &oline; &#٨٢٥٤;
⁄ &frasl; &#٨٢٦٠;
← &larr; &#٨٥٩٢;
↑ &uarr; &#٨٥٩٣;
→ &rarr; &#٨٥٩٤;
↓ &darr; &#٨٥٩٥;
↔ &harr; &#٨٥٩٦;
∩ &cap; &#٨٧٤٥;
∞ &infin; &#٨٧٣٤;
∫ &int; &#٨٧٤٧;
≈ &asymp; &#٨٧٧٦;
≠ &ne; &#٨٨٠٠;
≡ &equiv; &#٨٨٠١;
≤ &le; &#٨٨٠٤;
≥ &ge; &#٨٨٠٥;
√ &radic; &#٨٧٣٠;
Σ &sum; &#٨٧٢١;
Π &prod; &#٨٧١٩;
∂ &part; &#٨٧٠٦;
◊ &loz; &#٩٦٧٤;
♠ &spades; &#٩٨٢٤;
♣ &clubs; &#٩٨٢٧;
♥ &hearts; &#٩٨٢٩;
♦ &diams; &#٩٨٣٠;
search در اين بخش ميخواهم در مورد سايت هاي جستجو يا موتورهاي جستجوگر
و اهميت آنها براي سايت شما صحبت کنيم. هر هدفي را که از ساخت يک وب engines
سايت دنبال ميکنيد ، تا زمانيکه سايت شما شناخته نشده باشد، به آن هدف نخواهيد رسيد.
بطور معمول ، هدف از ساخت يک وب سايت يا اطلاع رساني است يا کسب درآمد و يا
ميتواند هر دو آنها باشد که به نظر من اين آخري از همه بهتر است. در هر حال شما بعد از
راه اندازي سايتتان نياز به يک تبليغات گسترده براي جلب بيننده بيشتر داريد، اين نکته را
هميشه در ذهن بسپاريد، هر چه بيننده وب سايت شما بيشتر باشد، موفقيت شما بيشتر خواهد
بود، هر بيننده برابر با يک امتياز و يا شايد هم بيشتر.
يکي از اساسي ترين راههاي جذب بيننده، ثبت صفحات سايت در موتورهاي جستجوگر
است، چون هر کسي در هر کجا که باشد ميتواند سايت شما را پيدا search engines
کند.
موتور جستجوگر چيست؟
AltaVista, Mama, Yahoo, ، در حال حاضر تعداد زيادي سايت جستجوگر مانند
spider, web داريم که هر کدام از اينها توسط برنامه هاي گردشگر بنام Google
مرتب در وب بدنبال صفحات جديد و يا تغييريافته ميگردند و به محض crawler, robot
خود، ليست ميکنند Database پيدا کردن آنها، اطلاعات مورد نظر را در پايگاه داده اي
تا در موقع لزوم و بهنگام جستجو در اختيار کاربران قرار دهند. زمانيکه شما بدنبال يک
در آن سايتها مي گرديد، اطلاعات پايگاه داده اي آنها را جستجو keyword کلمه کليدي
ميکنيد و سپس نزديکترين مطالب به کلمه کليدي را براي شما نمايان ميکنند که هر چه آن
کلمه دقيق تر باشد، شما به مطلب مورد نظر زودتر و راحت تر دسترسي پيدا ميکنيد.
ليست ميشود؟ Database چگونه صفحات در پايگاه داده اي
ها و يا يک برنامه گردشگر ديگر بطور اتوماتيک گردش خود را شروع robot هنگاميکه
robots.txt ميکند، به محض يافتن يک سايت جديد در وب ابتدا به سراغ فايلي بنام
و بدنبال آن اطلاعات نوشته شده در متاتگها را جمع HEAD ميگردد، سپس مطالب قسمت
آوري ميکند و پس از يک پردازش دقيق با استفاده از يک الگوريتم مخصوص، صفحات را
در پايگاه داده اي خود ذخيره و ليست ميکند.
چيست؟ robots.txt فايل
يک فايل متني است که اين فايل را ميتوانيد در سرور و در دايرکتوري وب robots.txt
سايت خود قرار دهيد تا تنظيمات گردش برنامه هاي گردشگر را در آن کنترل کنيد و در
حقيقت زحمت اين برنامه ها را کم کنيد. اما اطلاعاتي که در اين فايل بايد قرار گيرد الگوي
خاصي دارد که در زير به آن اشاره شده و در آن سطح دسترسي گردشگرها را با ذکر
نامشان معين ميکنيد،
User-agent:
Disallow:
ذخيره ميکنيد. txt اين دو خط را در فايل متني وارد و آنرا با پسوند
به برنامه هايي ميگويند که براي وب ساخته ميشوند تا در اختيار کاربران User-agent
ها از اين قبيل هستند و هر سايت crawler ها و robot قرار گيرند و گردشگر ها مانند
Googlebot جستجو يک گردشگر با اسم مشخص دارد، مانند سايت گوگل که بنام
معروف است. براي تعيين سطح دسترسي بايد نام برنامه را در خط اول بنويسيد و در خط
دوم هم نام فايلها يا دايرکتوري هاييکه نبايد ليست شوند را مينويسيد. اگر بطور کل
نميخواهيد سايت شما ليست شود طبق دستور زير عمل ميکنيد:
User-agent: *
Disallow: /
مراجعه www.robotstxt.org (http://www.pnu.daneshjuha.org/redirector.php?url=http%3A%2F%2Fwww.robotstxt.org) به سايت robots.txt براي اطلاعات بيشتر در مورد
کنيد.
براي موتورهاي جستجو meta tags نقش متاتگها
مطالبي را آموختيد. در اين قسمت نقش آنها را HEAD شما درباره ساخت متاتگها در بخش
ها ياد خواهيد گرفت. گردشگرها بيشتر به متاتگها حساس هستند تا search engine در
اطلاعاتي را در اختيارشان قرار دهند. اطلاعاتي را که شما در متاتگها بايد وارد کنيد به
شرح زير ميباشند:
keywords • معرفي کلمات کليدي
کوتاهي درباره سايت که در بعضي از سايتهاي جستجو Description • توصيف
عمل نميکند.
معروف است. Generator • معرفي برنامه سازنده سايت که به اسم
معروف است. Author • معرفي سازنده و طراح سايت که بنام
• مشخص کردن کپي رايت .
• تعيين تاريخ انقضا صفحات اگر مرتب در حال تغيير هستند.
( index ) هر موتور جستجوگر اصول و قوانين خاص خود را براي ليست و ذخيره کردن
دارد که متا تگها در اين مورد نقش ( Page Ranking ) سايت شما و تعيين رتبه آن
اساسي دارند و شما در انتخاب و تعيين آنها بايد بسيار دقت کنيد. بطور مثال بکار بردن
انتخاب نموده ايد در متن داخل همان صفحه در keyword کلماتيکه در متا تگها به عنوان
صفحه بسيار موثر خواهد بود. page ranking رتبه بندي
چيست؟ ( Page Ranking ) منظور از رتبه بندي
اگر شما داخل يکي از سايتهاي جستجو مانند گوگل بدنبال کلمه اي گشته باشيد متوجه ميشويد
که بعضي از سايتها در همان صفحه هاي اول هستند ولي بقيه در صفحه هاي آخر، که اين
ترتيب بر اساس رتبه بندي يک سايت است که آن سايت در ابتدا نشان داده شود يا در آخر
ليست باشد. اگر اصول و قوانين رتبه بندي يک موتور جستجو را رعايت کنيد ، سايت شما
هم بعد از مدتي در صفحات ابتدايي نمايش داده خواهد شد.
با آرزوی بهترین سایت ها برای شما.........
reza_1001