برنامه نويسي مبتني بر وب

1. برنامه نويسي مبتني بر وب راهنماي عملي طراحي و كدنويسي وب سايت مهدي عليرضانژاد

2. فهرست مطالب • مقدمه • فصل اول : طراحي وبلاگ • فصل دوم : اصول طراحي وب سايتهاي اينترنتي • فصل سوم : ساختار HTML • فصل چهارم : آموزش زبان JavaScript • فصل پنجم : فنآوري ASP • فصل ششم : معرفي فنآوري ASP.NET

3. مقدمه • سرويس وب(WWW)شبكه جهاني اينترنت،همانند انتشارات گوتنبرگ دوران قبل است و هر کس ميتواند وب سايت خود را طراحي نموده و با استفاده از اينترنت به تمام مردم دنيا ارائه دهد. • برخي از اهداف وبسايتها شامل : • هدف كلي از ايجاد يک وب سايت، اطلاعرساني و خدمات رساني ميباشد. • اطلاعرساني(درمورد اخبار و رويدادهاي سازمان، برنامهها، آييننامهها، دستورالعملها، اعلام زمان امتحانات، اعلام برنامههاي پرورشي و...) • ارائه خدمات متنوع • آموزش راه دور و کلاسهاي مجازي • ايجاد ارتباط ميان افراد • ايجاد انجمنهاي علمي جهت افزايش معلومات افراد و ... • امور تجاري با امکان خريد و فروش روي خط(Online) • ارائه اطلاعات شخصي افراد

4. فصل اول: طراحي وبلاگ • وبلاگ (کاغذهاي شيشهاي) • سايتهاي وبلاگ، سرويس وبلاگ و محيطي مناسب براي نگارش، ثبت و انتشار روز نوشته ها، خاطرهها، مقاله ها، اخبار، مطالب طنز و ... را به زبان فارسي ارائه ميدهند. • براي ساخت يک وبلاگ به چه امکاناتي نياز است؟ • با توجه به مراکز ارائه دهنده خدمات وبلاگ، راهاندازي وبلاگ در کمتر از چند دقيقه امکان پذير خواهد بود. براي اين کار کافيست که به يکي از ارائهدهندگان اين سرويس که اکثراً رايگان ميباشند مراجعه کنيد و مراحل ثبت نام (عضويت در سايت ) را دنبال کنيد .

5. طراحي وبلاگ(ادامه) • سايت بلاگفا براي کاربران خود امکانات و شرايط زير را بصورت رايگان و در محيطي فارسي فراهم مي‌سازد.» اختصاص يک آدرس اينترنتي http://Yourname.blogfa.com ))»ارسال و انتشار آسان مطالب در وبلاگ» درج آسان تصاوير، پيوندها و تغيير در رنگ يا اندازه نوشته ها» معرفي سايتهاي مورد علاقه و مديريت آسان فهرست پيوندها» امکان درج نامحدود پيوندهاي روزانه» امکان انتخاب و استفاده از طرحها و قالبهاي متنوع براي وبلاگ» امکان طراحي اختصاصي قالب و يا تغيير در قالب ، رنگها و طرح وبلاگ» امکان درج تصوير نويسنده يا لوگو وبلاگ» امکان درج توضيحاتي درباره معرفي نويسنده و وبلاگ» امکان استفاده چندين نويسنده از يک وبلاگ (وبلاگ گروهي)» امکان موضوع بندي مطالب بلاگ و دسترسي به آرشيو موضوعي» امکان درج ادامه مطلب و نمايش متن کامل پست در يک صفحه ديگر» امکان تاييد نظرات خوانندگان جهت نمايش توسط نويسنده وبلاگ» امکان مشاهده وبلاگهاي دوستان براساس زمان بروز رساني

6. طراحي وبلاگ(ادامه) • همه ساله مسابقاتي ملي در زمينه طراحي وبلاگ با اهداف متفاوت(پرسش مهر، پيامبر اعظم، قالبهاي وبلاگ و ...) برگزار ميگردد که براي داوري از ملاک هاي زير استفاده ميشود :

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

8. اصول طراحي وب سايتهاي اينترنتي(ادامه) • قوانين تصويب شده در مورد وبسايت و استانداردهاي آن براساس طرح دفتر توسعه فناوري اطلاعات و ارتباطات كشور • سازمان مديريت و برنامهريزي کشور طي بخشنامهي ضوابط الزامي و پيشنهادي در خصوص وبسايتهاي دستگاههاي دولتي را اعلام نمود: • اتوماسيون فعاليتهاي اختصاصي و عمومي دستگاههاي دولتي(راهاندازي وبسايت) • مقررات و ضوابط شبکههاي اطلاعرساني رايانهاي(ISP) • ضوابط الزامي و پيشنهادي وبسايتهاي دولتي

9. اصول طراحي وب سايتهاي اينترنتي(ادامه) • خلاصهاي از ضوابط الزامي : • 1- آرام دستگاه 2- معرفي دستگاه • 3- تشکيلات کلي دستگاه 4- معرفي واحدهاي وابسته • 5- شرح وظايف دستگاه و و احدهاي وابسته 6- اطلاعات آماري دستگاه • 7- اخبار و رويدادهاي دستگاه • 8- اطلاعات تماس با دستگاه و واحدهاي وابسته : آدرس پستي، تلفن، فاکس، پست الکترونيکي • 9- فرمهاي کاغذي مورد عمل و استفاده در دستگاه • 10- مجموعه قوانين، مقررات، آئين نامه ها و ضوابط مربوط به دستگاه • 11- فهرست عناوين خدمات قابل قبول ارائه دستگاه به مردم و ديگر نهادها • 12- دو زبانه بودن اطلاعات عمومي سايت اينترنتي 13- موتور جستجوي سايت اينترنتي • 14- لينک به سايتهاي اينترنتي مرتبط با فعاليتهاي دستگاه (Link) • 15- شمارشگر مراجعان به وب سايت (Counter)16- نظرسنجي و بازخورد • 17- نقشه سايت ((SiteMap

10. اصول طراحي وب سايتهاي اينترنتي(ادامه) • ضوابط پيشنهادي • براي ايجاد يک وب سايت بهتر است سه قسمت زير مد نظر قرار گيرد : • طراحي • ساختار • محتوا • در صورت رعايت سه قسمت فوق ويژگيهاي زير محقق گردد : • وجود منوي دائم در تمام سطوح سايت • سرعت مناسب دسترسي به سايت • کيفيت محتواي سايت • افزايش تعداد لينکها به سايتهاي ديگر، • طراحي بخش پرسش‌هاي متداول (FAQ)

11. اصول طراحي وب سايتهاي اينترنتي(ادامه) • ضوابط استانداردسازي وب سايتها • وقتي يک وبسايت طراحي ميگردد، از آن انتظار ميرود که با انواع نرمافزارهااز قبيل سيستمهايعامل، مرورگرهاي وب و ... و همچنين با انواع سخت افزارها مانند کامپيوترهاي شخصي، کامپيوترهاي دستي، گوشيهاي موبايل و.... کار کند. • وبسايتها بايد استانداردهاي زير را رعايت كنند : • سادگي در بروزرساني ساختار و يا طراحي وبسايت • قابليت استفاده ساده و مناسب از وبسايت • بارگذاري سريع صفحات وب سايت (حداكثر 10 ثانيه با مودم 56kb/s) • استفاده هوشمندانه از فنآوريهاي وب با توجه به اهداف وبسايت • توانايي وبسايت در انتقال آسان مفهوم و هدف خود

12. اصول طراحي وب سايتهاي اينترنتي(ادامه) • نکات و پيشنهادات کلي در طراحي وب سايت • 1- هدف وب سايت • اطلاعرساني • ارائه خدمات مختلف • آموزش و کلاسهاي مجازي • ايجاد ارتباط ميان افراد • ايجاد انجمنهاي علمي جهت افزايش معلومات افراد و ... • 2- نشاني اينترنتي (Domain) • آدرس اينترنتي متشکل از دو بخش نام دامنه و پسوند ميباشد. • 3- انتخاب ميزبان مناسب (  Web Hosting) • عمده شرايطي که يک ميزبان بايد داشته باشد، عبارتند از : • امنيت بالا • سرعت مناسب(استفاده از پهناي باند مناسب) • تهيه نسخه پشتيبان روزانه • پشتيباني از ابزارهاي رايج برنامه نويسي و...

13. اصول طراحي وب سايتهاي اينترنتي(ادامه) • نکات و پيشنهادات کلي در طراحي وب سايت(ادامه) • 4- ارائه خدمات • 5- دسته بندي اطلاعات • 6- فعال بودن وبسايت از نظر علمي • 7- نظارت و به روزرساني مستمر • 8- معرفي وبسايت به افراد • 9- معرفي وبسايت به موتورهاي جستجو • 10- توانايي دسترسي به ديگر وبسايتهاي اينترنتي

14. اصول طراحي وب سايتهاي اينترنتي(ادامه) • الزامات و پيشنهادات مربوط به نحوه طراحي وبسايت • 1- نوع قلم ( Font) • براي مشاهده صفحات وب سايت به زبان فارسي بايد به نوع قلم انتخابي(قلم Tahoma) توجه داشت، همچنين لازم است صفحات با استاندارد يونيکد (Unicode) ذخيره شوند. • 2- اصلاح و صحت اطلاعات • 3- قدرت وضوح نمايشگر (600 x 800يا 768 x 1024 ) • 4- قالب بندي صفحات •  جهت قالببندي يکپارچه صفحات و سادگي تغييرات از شيوه نامه آبشاري (CSS ) استفاده گردد • 5- پويا(Dynamic) بودن صفحات • صفحات  ميتوانند بصورت ايستا (اطلاعات ثابت ) يا پويا (اطلاعات متغير و مرتبط با پايگاه داده) طراحي شوند. در صورتي که صفحات به صورت پويا طراحي گردند، امکان بروزرساني اطلاعات براحتي و با صرف کمترين زمان و هزينه قابل انجام است.

15. اصول طراحي وب سايتهاي اينترنتي(ادامه) • الزامات و پيشنهادات مربوط به نحوه طراحي وبسايت (ادامه) • 6- سبکهاي بروز رساني(دو روش ) • Desktop • Web Based • 7-  استفاده مناسب از رنگها8- نسخه انگليسي • 9- مشخص نمودن زبان اصلي وبسايت 10- منوي دائم  • 11- معادل متني براي اشياء غيرمتني (صوت، تصوير، انيميشن، اپلت و... ) • 12- سرعت مناسب بالا آمدن سايت13- عدم استفاده از چارچوب • 14-طبقهبندي و کيفيت اطلاعات 15- وجود نسخه چاپي • 16- موتورهاي جستجو

16. اصول طراحي وب سايتهاي اينترنتي(ادامه) • خلاصه فرآيند ساخت يك وبسايت • مشخص نمودن هدف وبسايت • نمودار ساختار وبسايت • آمادهسازي محتواي • انتخاب طرح اوليه براي تمام صفحات • انتخاب طرح رنگ اصلي و فونتها • ساخت و پيوند صفحات • انتخاب نام مناسب براي وبسايت • ثبت ناموبسايت در اينترنت • يافتن يك شركت ميزبان مناسب • ارسال(Upload) وبسايت در وب سرور ميزبان • معرفي وبسايت به موتورهاي حستجوگر(Google , YAHOO , MSN)

17. اصول طراحي وب سايتهاي اينترنتي(ادامه) • تکامل(نسلهاي) صفحات وب سايت • ديويد سيگل(David siegel) تکامل صفحات وب را از به سه دوره تقسيم ميکند: • نسل اول بيشتر به شکل صفحات داراي طول زياد حاوي متن پيوسته و فهرستهاي پرسش به قسمتهاي مختلف صفحه بودند. • نسل دوم صفحات حاوي متن ، تصاوير مابين متن و رنگهاي مختلف بودند. • نسل سوم (نسل فعلي) صفحه وب بعنوان يک بوم نقاشي نگاه ميشود که با متن، تصوير و فضاي خالي شکل گرفته است.

18. اصول طراحي وب سايتهاي اينترنتي(ادامه) • انواع قالب وب سايت • صفحه با رسم جداول • صفحه با فايلهاي گرافيکي شفاف • صفحه با استفاده از قابها (Frames ) • صفحه با استفاده از تعيين موقعيت (تگ Layer) • انواع ساختار وب سايت • الف) ساختار ساده (خطي) • ب) بصورت ترتيبي (سريال ) • ج) ساختار غيرترتيبي (با قابليت دستيابي هر صفحه در هر زمان از هر صفحه ديگر ) • د) ساختار سلسله مراتبي

19. اصول طراحي وب سايتهاي اينترنتي(ادامه) • بايدها و نبايدها در طراحي وب سايت • استفاده از شمارشگرها • متن چشمك زن را فراموش كنيد • عنوان صفحات وب بايد معني دار باشند • كاربران را براي مشاهده وب سايت، مجبور به دانلود يك مرورگر جديد يا Plug Inخاص نكنيد • از قاب استفاده نكنيد • هيچگاه سعي نكنيد با حقه، رتبه وب سايت را در موتورهاي جستجوگر افزايش دهيد • اطاقهاي چت خالي باعث فرار كاربران ميشود • از Flash به موقع استفاده كنيد • استفاده از صفحات "در دست ساخت" خودداري كنيد • از موسيقي زمينه در صفحات وب استفاده نكنيد • از تگ پيمايش(Marquee) براي متحرك نمودن متن استفاده نكنيد • ساختار صفحات وب را در سرتاسر وب سايتثابت نگاه داريد

20. اصول طراحي وب سايتهاي اينترنتي(ادامه) • بايدها و نبايدها در طراحي وب سايت(ادامه) • از ساختن پنجره هاي Pop-up خودكار پرهيز كنيد • از روشهاي استاندارد براي پيمايش بين صفحات (پيمايش سمت راست - چپ - بالا) استفاده نماييد نه غيرمعمول (دايره- مكعب) • پنجره مرورگر بازديدكننده را بطور خودكار تغيير اندازه ندهيد • صفحات وب طراحي شده در درجه وضوح 800 x 600قابل رويت باشد • بازديدكننده را از يك صفحه به صفحه ديگر تغيير مسير ندهيد، مگر در شرايط خاص • يك صفحه "Page Not Found" 404(صفحه حذف شده،تغييرنام يافته و ...) با توضيحات كامل فارسي براي وب سايت خود بسازيد • صفحه نقشه سايت (SiteMap) با پيوند به تمام صفحات وب سايت بسازيد • صفحات وب را در اندازه 60KB (حداكثر10 ثانيهزمان بازديد) بسازيد • همه مطالب را در ترازبندي وسط چين صفحه وب قرار ندهيد(عناوين اصلي مناسبتر است)

21. اصول طراحي وب سايتهاي اينترنتي(ادامه) • بايدها و نبايدها در طراحي وب سايت(ادامه) • براي كار روي صفحات وب فقط به جاوا اسكريپت تكيه نكنيد • از پس زمينه هاي شلوغ در صفحات وب استفاده نكنيد • در پيوندها، اگر آدرس URLبه صفحه خاصي اشاره نميكند، با علامت / به پايان برسانيد • متن صفحات وب را تماما با حروف بزرگ تايپ نكنيد • تعداد كلماتي را كه بصورت ايتاليك تايپ ميشوند بايد اندك باشند • تعداد كلماتي را كه بصورت برجسته (Bold) تايپ ميشوند بايد اندك باشند • از تگهاي<h6> و <h5>(تگها اندازه متن را كوچكتر و برجسته تر از پيش فرض مرورگر ميكنند) استفاده نكنيد • كادرهاي آبي رنگ اطراف گرافيكهاي پيوند شده را غيرفعال نماييد • براي تمام تصاوير اصلي، عبارت مناسب قرار دهيد (با خاصيت alt) • گرافيكهاي پيوند شده، شبيه به كليد عمل كنند (سايه دار و سه بعدي به نظر آيند) • از تعداد رنگهاي محدود در وب سايت استفاده كنيد

22. اصول طراحي وب سايتهاي اينترنتي(ادامه) • اسکريپت و زبانهاي اسکريپتي • زبانهاي اسکريپتي براي ارائه تحولات و ايجاد پويايي در صفحات وب ايجاد شدند. اين زبانها از روي زبانهاي برنامه نويسي برداشت شدند و بهمين دليل داراي تشابه بسياري با هم هستند. اين زبانها در اصل نمونه کوچک شده زبانهاي اصلي خود هستند. تعدادي از فرمانها و امکانات زبانهاي بزرگ در اين زبان ها حذف شده اند. • VB Script • اين زبان نمونه کوچک شده زبانVisual Basicاست. کاربرد آن در نوشتن برنامه هاي سمت سرور (Server-side) است که بر اساس تکنولوژي ASP صورت ميگيرد. اين زبان به عنوان زبان پيش فرض براي طراحي صفحات ASP است. • JAVA Script • اين زبان ساختاري شبيه زبان C دارد و بيشتر براي ايجاد افکت بر روي مرورگرها و کامپيوتر کاربر(سمت کاربر يا Client-side ) استفاده ميشود.اين زبان نيز قابليتهاي استفاده به صورت سمت سرور را داراست.

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

24. اصول طراحي وب سايتهاي اينترنتي(ادامه) • طرحي نمادين از صفحه اصلي(Home Page) وب سايتهاي معتبر

25. فصل سوم : ساختار HTML • زبانHTML(Hyper Text Markup Language) زبان علامت گذاري ابرمتن ، زبان ساخت صفحات وب ميباشد . • امکان قالببندي متن، اضافه نمودن صدا، تصوير، انيميشن و ويديو را فراهم ميكند و آنها بصورت متن ذخيره مينمايد • داراي دو خاصيت اساسي است : • ابرمتن: امکان افزودن پيوند به صفحات وب • عموميت: سندهاي HTML بصورت کدهاي ASCII و يا فايلهاي متني ذخيره مي شوند، پس هر کامپيوتر مي تواند صفحه وب را بخواند و هر مرورگري هم ميتواند آنرا پردازش نموده و اجرا کند • براي طراحي يک سند HTML از هر ويراستار متني نظير Notepad و غيره ميتوان استفاده نمود. • استفاده از ابزارهاي نرم افزاري طراحي صفحات وب نظيرVisual Interdevيا Front Page از شركت مايكروسافت يا Dream Weaverاز شركت مايكرو مديا مي باشد.

26. ساختار HTML (ادامه) • از ويژگيهاي مهم HTML : • سادگي ايجاد ابرمتن (Hyper Link) توسط طراح سايت • سادگي استفاده از ابرمتنتوسط کاربر • قابليت حمل • يادگيري آسان براي همه سنين • ابزارهاي قابل تهيه آسان، رايگان و پرقدرت مانند مرورگرها • کم حجم بودن • روي کليه بسترها(سخت افزار و سيستم عامل) قابل اجرا مي باشد

27. ساختار HTML (ادامه) • زبان HTML، داراي سه نوع نشان(Mark up) است: • الف) عنصر (Element) • ب)خصيصه/صفت (Attribute) • ج) مقادير (Value) • تگ (Tag) دستوري است که مرورگر وب براي نمايش محتواي صفحات وب از آن استفاده ميکند و بين دو علامت < و > قرار مي گيرد .</tag>…<tag> • کليه مرورگرها ((IE –Netscape-operaبعنوان مفسر تگهاي HTML ميباشند و در صورت بروز خطا از تگ ناشناخته صرف نظر ميکنند و فقط کد آنرا بصورت متن نمايش مي دهند . • در جديدترين نسخه HTML قابليتهاي استفاده از ActiveXControl – FrameCSS2 - JavaApplet - PlugIn و جهت تايپ متن(راست به چپ) و متون غير انگليسي و رفع مشکل DeadLink و ... افزوده شد .

28. ساختار HTML (ادامه) • قالب اصلي كليه صفحات وب <HTML> <HEAD> <TITLE> My Title </TITLE> </HEAD> <BODY> <! – In This Section Can Write HTML Commands or Content and Status --> </BODY> </HTML> • زبان HTML بعنوان يك زبان فرمت آزاد (Free Format) محسوب ميشود.

29. ساختار HTML (ادامه) • تگ <HTML> : شروع صفحه وب • قالب:</HTML>... <HTML> • تگ <HAED> : درج سر صفحه • قالب: </HEAD> 000 <HEAD> • شرح: درج عنوان توسط تگ TITLE و خصوصيات صفحه نظير زبان، كد گذاري HTML • تگ <BODY> • هدف: بدنه صفحه وب شامل دستورات يا تگها، محتوي صفحه و نحوه نمايش محتوي صفحه • قالب: </BODY> 000<BODY>

30. ساختار HTML (ادامه) • نامگذاري صفحه وب • اولين صفحه وب سايت (Home Page)راindex يا defaultنامگذاري نماييد . <HTML> <HEAD> <TITLE> My Title </TITLE> </HEAD> <BODY> <! -- In This … --> Home Page </BODY> </HTML>

31. ساختار HTML (ادامه) • تگ پاراگراف • متن پاراگرافها را بين تگ <P>و </P>قرار مي دهيم. بعبارتي در HTML كليد Enter پايان دهنده پاراگراف نيست. • قالب: </p> 000 <P> <P> Home Page </P> • صفت (Attribute) • در برخي از تگ هاي HTML تعدادي صفت وجود دارد كه در صورت استفاده از آنها بايد به آنها مقدار (Value)نسبت داد. در مثال بعد ALIGN بعنوان صفت و Center بعنوان مقدار نسبت داده شده است.

32. ساختار HTML (ادامه) • ترازبندي (Alignment) محتوي صفحه • متن و تصوير را ميتوان راست چين، چپ چين يا وسط چين نمائيد و از تگ <P> استفاده ميشود. • براي تراز راست از ALIGN="right"، تراز وسط از ALIGN="center"و تراز چپ از ALIGN="left"و براي تنظيم دو طرف از ALIGN="justify"استفاده كنيد. • مثال <P ALIGN="center"> به وب سايت خوش آمديد </P>

33. ساختار HTML (ادامه) • قالب بندي متن (Text Formatting) • متون را با تگ هاي <B> ، <I> و <U> ميتوان برجسته (Bold)، مورب (Italic)يا زيرخط‌دار نمود. • تگ <B> • قالب: </B> متن <B> • تگهاي <I> ، <U> دقيقاً ساختار تگ <B> را دارند. • مثال) نام Home Pageرا وسط چين ، برجسته، مورب و زيرخط دار كنيد. <P ALIGN="center"> <I> <B> <U> Home Page </U></B></I></P>

34. ساختار HTML (ادامه) • تگ‌هاي متداخل (Netsed Tags) • هر تگ ميتواند در داخل تگ ديگر قرار گيرد ولي تگهاي متقاطع امكان پذير نيست،يعني تا تگ داخل بسته نشود تگ بيروني بسته نخواهد شد. • مثال. نام Home Pageرا بصورت چپ چين و برجسته نمايش دهيد. <P ALIGN="left"> <B> Home Page </B> </P> • توصيه ميشود كه تگ هاي متداخل متقاطع نشوند.

35. ساختار HTML (ادامه) • رنگ زمينه صفحاتوب: • تگ <body> داراي دو شناسه مهم براي تعيين رنگ و تصوير پس زمينه ميباشد. • شناسه bgcolor براي رنگ پس زمينه • مقدار رنگ پس زمينه ميتواند نام رنگ (مثل black)، مقدار آن بر اساس استاندارد RGB و يا حتي مقدار كد مبناي 16 باشد. <body bgcolor="black"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="#00FFA6“>

36. ساختار HTML (ادامه) • تصوير زمينه در صفحاتوب: • تگ <body> داراي دو شناسه مهم براي تعيين رنگ و تصوير پس زمينه ميباشد. • شناسه Background براي تصوير پس زمينه • براي تعيين تصوير پس زمينه صفحه وب از شناسه background استفاده ميشودمقدار اين شناسه URL يا آدرس تصوير ميباشد. • اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدي که تمام صفحه نمايش از تصوير زمينه پوشانده شود. <body background="bg.gif"> <body background="http://www.khaterat.com/images/bg.gif">

37. ساختار HTML (ادامه) • اگر از تصاوير پس زمينه در صفحات وب استفاده ميکنيد به نکات مهم زير توجه کنيد : • هرتصويري با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد. • از تصاوير بزرگتر از ده کيلوبايت به هيچ وجه استفاد نکنيد، در غيراينصورت سرعت بارگذاري صفحه بشدت پايين خواهد آمد. • از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد. • از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد. • در وضوح مختلف براي ديدن و آزمايش تصاوير پس زمينه بپردازيد. • پرمصرفترين رنگهاي زمينه وب سايتها، رنگهاي سفيد، سياه و خاکستري ميباشند. • اغلب سايتهاي وب از تصاوير پس زمينه استفاده نمي کنند

38. ساختار HTML (ادامه) • قلم (Font) • قلم متن را ميتوان تغيير داد. قلم داراي صفات نام قلم، اندازه قلم، سبك قلم، رنگ قلم و جلوه ميباشد. • صفت نام قلم • براي تغيير نام قلم از تگ <FONT…>و صفت FACE استفاده كنيد. "> نام قلم <FONT FACE=“ • مثال <FONT FACE="Tahoma"> Home Page </FONT>

39. ساختار HTML (ادامه) • قلم (Font) • صفت اندازه قلم • براي تعيين اندازه قلم از تگ <FONT> و صفت SIZE بصورت زير استفاده كنيد. <FONT SIZE=”3"> • مثال) <FONT FACE ="Tahoma" SIZE="5"> Home Page … </FONT>

40. ساختار HTML (ادامه) • قلم (Font) • صفت رنگ قلم • براي انتخاب رنگ قلم ميتوانيد از صفت COLOR با مقدار بصورت نام يا كد مبناي 16 استفاده كنيد. • مثال <FONT COLOR="red"> Home Page </FONT> <FONT COLOR="#960FC8"> Home Page </FONT>

41. ساختار HTML (ادامه) • تصاوير (Picture) • تصاوير نوعي اطلاعات در قالب محتوي صفحه وب محسوب ميشوند و داراي پنج ويژگي مهم شامل : • نوع فايل گرافيكي (Format) • رنگ (Color) • شفافيت(Transparency) • سرعت(Speed) • متحرك سازي(Animation) است. • فايلهاي گرافيكي داراي انواع مختلفي از حيث محتوي اطلاعات داخلي ميباشند

42. ساختار HTML (ادامه) • استفاده از تصاوير در صفحات وب • براي قراردادن تصوير در صفحه وب از تگ <IMG>استفاده كنيد. • قالب تگ : > " ارتفاع" HEIGHT= عرض" WIDTH=" نام و مسير" SRC="ضخامت كادر حاشيه " BORDER=" شرح <IMG ALT=“ • تگ <IMG>تك خاتمه ندارد. • مثال <P ALIGN="center"> <IMG BORDER ="2" SRC="c:\picture\g1.JPG WIDTH = "288" HEIGHT = "216"> </P>

43. ساختار HTML (ادامه) • تگ <A> • هدف: ايجاد پيوند(Link) روي متن يا تصوير به صفحات وب (بخشي از صفحه جاري يا Bookmark، صفحه‌اي ديگر از سايت جاري يا سايتهاي ديگر يا اسناد ديگر يا آدرس پست الكترونيكي(. • قالب: "> مسير يا آدرس يا ... <A HREF=" متن يا تگ تصوير </A> • مثال( ايجاد پيوند روي متن و ظاهر شدن وب سايت ديگر. <P ALIGN="center"> <A HREF="http://www.google.com/"> Link </A> </P>

44. ساختار HTML (ادامه) • پيوند تصوير كوچك به تصوير بزرگتر • تصاوير بزرگتر در هنگام بارگذاري به زمان بيشتري نياز دارند. براي كاهش زمان بارگذاري تصوير بهتر است ابتدا تصوير كوچكتري از تصوير اصلي تهيه نمود و در صفحه وب قرار داد و با ايجاد يك پيوند (Link) تصوير بزرگ را در صفحه ديگري از وب نمايش داد. • مثال( ايجاد پيوند روي تصوير كوچك C:\Picture\smal.JPGو ظاهر شدن تصوير بزرگ C:\Picture\big.JPG <A HREF=“c:/picture/big.jpg"> <IMG BORDER="0" SRC="c:picture/small.jpg" WIDTH="200“ HEIHT="200“ ALT=“Iran"> </A>

45. ساختار HTML (ادامه) • نقشههاي تصويري • يک تصوير را به بخشهاي کوچکتر مرزبندي ميکند که هر قطعه از آن بصورت پيوندي باشد و به قسمتي از همان سايت و حتي سايتهاي ديگر هدايت کند.(مانند نقشه يک کشور و مشاهده آب و هواي هر استان). • تگ <map> • براي ايجاد نقشههاي تصويري بكار ميرود، به كمك تگ <area > و صفتshape با سه مقدار poly (چندضلعي) ، circle (دايره) و rect (چهارگوش) قسمت مورد نظر تصوير را مرزبندي ميكند و مقادير صفت Coordsمختصات نقاط دوبعدي نواحي مرزبندي را مشخص ميکنند . <img src="image.gif" usemap="#map_name"> • image.gif نام تصوير و map_name اتصال آن ميباشد .

46. ساختار HTML (ادامه) • مثال) <html> <head> <title>Untitled Document</title> </head>  <body> <img src="soroosh.jpg" width="354" height="472" border="0" usemap="#Map"> <map name="Map"> <area shape="poly" coords="181,141,163,192,171,210,212,209,219,184,205,143" href="#" alt="soroosh"> <area shape="poly" coords="157,231,169,250,200,252,212,246,221,232,189,227" href="#" alt="lip"> <area shape="circle" coords="143,155,13" href="#" alt="eay"> <area shape="circle" coords="231,161,13" href="login.htm" alt="eay"> <area shape="rect" coords="148,206,233,231" href="help.gif" alt="sibil"> </map> </body> </html>

47. ساختار HTML (ادامه) • متاتگها • متاتگها گروهي از tagها که در بخش <head> صفحات جاي گرفته ، اطلاعات شناسنامهاي صفحه را بيان کرده يا فراميني به مرورگر داده ميشود. • تعدادي از پرمصرفترين اين گروه به شرح زير است: " keywords” • موتورهاي جستجو از روي اين کلمات کليدي وب سايت را پيدا مي كنند "description” • شرحي کوتاه و خلاصه از صفحه و محتوايش "Content-Type” • اين تگ مشخص کننده نحوه رمزگزاري صفحه است مثلاّ charset=utf-8 "refresh” • اين تگ ميتوانيد کاربر را به صفحه ديگري هدايت کنيد ويا صفحه را مجدداْ به روز درآوريد "robots” • اين تگ نحوه برحورد يک روبوت را با صفحه مشخص ميکند.

48. ساختار HTML (ادامه) • متاتگها(ادامه) • مثال) کاربرد سه نوع متا تگ مختلف <head> <title> آموزش</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="description" content="khaterat.com - learn www in persian"> <meta name="keywords" content"آموزش,خاطرات"> </head> Arbic(windows) <meta http-equiv="content-type" content="text/html; charset=windows-1256">

49. ساختار HTML (ادامه) • جدولها (Table) • براي تعريف جدول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر با تگ <tr>و هر سطر از يک يا چند ستون با تگ <td> ايجاد ميشود. محتوي يک ستون ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها باشد. <table > <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> <td>رديف 1، سلول 3</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td>رديف 2، سلول 2</td> <td>رديف 2، سلول 3</td> </tr> </table>

50. ساختار HTML (ادامه) • جدولها و شناسه Border و Dir • شناسه border مرز يا حاشيه جدول را مشخص ميکند، مقدار صفر جدول را بدون مرز نمايش خواهد داد. ت • شناسه dir و مقدار rtlسبب تعيين جهت متون از راست به چپ خواهد شد و چون در تگtable تعريف شده است به تمامي سلولهاي جدول اعمال خواهد شد. <table border="1" dir="rtl"> • سرستون در جداول (Headings) • براي نمايش سرستونها در جداول، از تگ <th> استفاده ميشوند. <th>سرستون ا</th>