آموزش اجتیمل

‫سرفصل مطالب ‪:‬‬ ‫به کلس اچ تی ام ال مقدماتی خوش آمديد!‬ ‫يادگيری زبان ‪ HTML‬بسيار ساده است‪.‬در اين درسها ياد خواهيد گرفت که چگونه با کمک ‪HTML‬‬ ‫صفحاتتان را ساخته و وب سايت شخصی فارسی و يا وبلگتان را راه اندازی کنيد‪ .‬مبنای اين دروس نسخه‬ ‫‪ 4‬استاندارد اچتمل بوده و نکته بسيار مهم اين نسخه جداسازی فرمت بندی و انتقال آن به ‪style sheet‬‬ ‫ها ميباشد‪ .‬لزم به توضيح است که که تاکيد دروس و مقالت اين راهنما بر فارسی نويسی مطابق‬ ‫استاندارد يونيکد بوده و اولين مجموعه دروس آموزشی ما شامل آموزش مقدماتی ‪ HTML‬بهمراه مثالهای‬ ‫متعدد فارسی نويسی خواهد بود‪ .‬ادامه اين بخش به شرح سرفصل مطالب ارائه شده خواهد پرداخت‪:‬‬ ‫درس بعدی‬ ‫سرفصل مطالب کلس اچتمل مقدماتی ‪:‬‬ ‫مقدمه‬ ‫در اين درس با ويژگيهای فايلهای اچتمل‪ ،‬اجزا تشکيل دهنده آن يعنی عناصر و تگ ها ( & ‪Elements‬‬ ‫‪ ) Tags‬و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد‪.‬‬

‫‪HTML & WWW‬‬ ‫در اين درس با مفاهيم وب ( تار عنکبوت جهانی يا ‪ ، ) World Wide Web‬اينترنت‪ ،‬مرورگرها و‬ ‫استانداردهای وب آشنا خواهيد شد‪ .‬همچنين با تفاوتهای مرورگرهای وب ( ‪ ) Web Browsers‬و سرويس‬ ‫دهنده های وب ( ‪ ) Web Servers‬آشنا خواهيد شد‪.‬‬

‫‪Elements‬‬

‫)‬ ‫عناصر (‬ ‫يک متن و يا فايل اچتمل از عناصر يا ‪ element‬ها تشکيل ميشود و برای ايجاد عناصر از تگ ها يا ‪tags‬‬ ‫استفاده ميشود‪ .‬در اين فصل با عناصر و تگ ها آشنا خواهيد شد‪.‬‬

‫‪Basic Tags‬‬

‫)‬ ‫تگ های اصلی (‬ ‫تگ ها ( ‪ ) tags‬اجزا تشکيل دهنده عناصر يا ‪ elements‬های اچتمل هستند و يکی از بهترين روش های‬ ‫يادگيری اچتمل ديدن مثالها و تغيير آنها ميباشد‪ .‬در اين فصل با تگ های پايه و مهم آشنا شده و با کمک‬ ‫اديتور اختصاصی ما و با امکانات فارسی نويسی آن به صورت آنلين ميتوانيد به مطالعه و يادگيری مثالها‬ ‫بپردازيد‪.‬‬ ‫فــارسی نويسی‬ ‫در اين درس با فارسی نويسی‪ ،‬فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنلين و فارسی‬ ‫اين سايت آشنا خواهيد شد‪.‬‬

‫‪Formatting‬‬

‫)‬ ‫فرمت دهی (‬ ‫وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثل توپر و ‪ bold‬بودن و يا‬ ‫ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهای ‪ formating‬آشنا خواهيد شد‪ .‬همچنين ياد‬ ‫خواهيد گرفت که چگونه ‪ source‬يا اصل کدهای اچتمل يک صفحه يا ‪ page‬را ببينيد‪.‬‬

‫‪Entities‬‬

‫)‬ ‫نهادها (‬ ‫گروهي از نويسه های ( ‪ ) Character‬اچتمل مانند (<) و يا (>) دارای معنی خاصی ( مثل نويسه <‬ ‫شروع يک تگ را نشان ميدهد‪ ) .‬در استاندارد اچتمل بوده و برای نمايش آنها در صفحاتتان مستقيما قابل‬ ‫مصرف نميباشند‪ .‬در اين فصل با اين نويسه ها آشنا شده و با کمک ‪ Character Entities‬چگونگی‬ ‫استفاده از اين گروه از نويسه ها را فرا خواهيد گرفت‪.‬‬

‫‪Links‬‬

‫)‬ ‫پيوندها (‬ ‫در اين درس با پيوندها ( ‪ ، ) Links‬شناسه های مرتبط مخصوصا ‪ href‬و نحوه به کار گيری آنها آشنا‬ ‫خواهيد شد‪.‬‬

‫‪Tables‬‬

‫)‬ ‫جداول (‬ ‫در اين درس با مفاهيم جدول ( ‪ ، ) Table‬رديف يا ‪ ، row‬سلولها يا خانه ها‪ ،‬مرز يا ‪ border‬در جداول و‬ ‫عناصر مرتبط مخصوصا ‪ TABLE ، TD , TR‬آشنا خواهيد شد‪.‬‬

‫فريمها ( ‪Frames‬‬

‫)‬

‫در اين درس با مفاهيم فريم ( ‪ ) Frame‬و عناصر مربوطه مخصوصا ‪ Frame‬و ‪ Frameset‬آشنا خواهيد‬ ‫شد‪.‬‬

‫‪Lists‬‬

‫)‬ ‫فهرستها (‬ ‫اين درس شما را با نحوه نمايش فهرستها ( ‪ ، ) List‬انواع فهرستها و تگ های مربوطه آشنا خواهد ساخت‪.‬‬

‫‪Forms‬‬

‫)‬ ‫فرمها (‬ ‫از طريق استفاده از تگ های فرم ( ‪ ) form‬قادر به دريافت اطلعات از بازديدکنندگان صفحاتتان و يا تبادل‬ ‫اطلعات بين صفحات مختلف خواهيد شد‪ .‬با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود‬ ‫اطلعات متن (‪ ، )text fields‬چک باکسها (‪ ، )check-boxes‬راديو باتونها (‪ )radio-buttons‬و ‪ ...‬شده و‬ ‫همچنين امکان گذاشتن دکمه های ارسال (‪ )submit button‬و يا حذف (‪ )reset‬را خواهيد داشت‪ .‬اين‬ ‫فصل با شرح تگ های ‪ form‬و ‪ input‬و ‪ ...‬به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلعات از‬ ‫آنها خواهد پرداخت‪.‬‬

‫‪Images‬‬

‫)‬ ‫تصاوير (‬ ‫در اين درس با عنصر ‪ img‬و چگونگی نمايش تصاوير و همچنين تنظيم محل آنها آشنا خواهيد شد‪.‬‬

‫‪Background‬‬

‫)‬ ‫پس زمينه (‬ ‫در اين درس با چگونگی نمايش تصاوير و يا تعيين رنگ پس زمينه آشنا خواهيد شد‪.‬‬

‫يک فايل ‪ HTML‬چيست؟‬

‫•‪ HTML‬را "اچ تی ام ال" و يا اچتمل بخوانيد‪.‬‬ ‫•‪ HTML‬برگرفته از حروف اول ‪ Hyper Text Markup Language‬ميباشد‪.‬‬ ‫•يک فايل ‪ HTML‬فايلی از نوع ‪ text‬ميباشد که متشکل از ‪ markup tag‬ها‬ ‫ميباشد‪.‬‬ ‫•مرورگر يا ‪ Browser‬از روی ‪ markup tag‬ها می فهمد که چگونه بايد‬ ‫صفحه را نمايش بدهد‪.‬‬ ‫•يک فايل ‪ HTML‬بايد دارای انشعاب ‪ htm‬و يا ‪ html‬باشد‪.‬‬ ‫•يک فايل ‪ HTML‬فايلی از نوع ‪ text‬ميباشد که با هر اديتور ساده ای قابل‬ ‫ايجاد است‪.‬‬ ‫•وظيفه اصلی تگ های اچتمل ( ‪ ) markup tags‬بيان چگونگی نمايش‬ ‫اطلعات ميباشد‪.‬‬ ‫ميخواهيد که يک فايل اچتمل بسازيد؟‬ ‫اگر از ويندوز مايکروسافت استفاده ميکنيد‪ Notepad ،‬را باز کرده (‪ Mac‬کارها از ‪ SimplaeText‬استفاده‬ ‫کنند‪ ) .‬و متن زير را در آن تايپ کنيد‪:‬‬ ‫<‪>html‬‬ ‫<‪>head‬‬ ‫<‪>title<Title of page>/title‬‬ ‫<‪>head/‬‬ ‫<‪>body‬‬ ‫‪>This is my first html page. >b/b‬‬ ‫<‪>body/‬‬ ‫<‪>html/‬‬ ‫سپس فايل را با نام مثل ‪ test.html‬در درايو ‪ \:c‬ذخيره کنيد‪.‬‬

‫برای ديدن فايل اچتمل بال در مرورگر يا ‪ Brower‬تان ( معمول اينترنت اکسپلورر و يا نتسکيپ نويگيتور )‬ ‫کافی است که از روی منوی ‪ File/Open file‬فايل بال را از روی محل ذخيره شده بخوانيد‪ ( .‬به آدرس‬ ‫فايل در قسمت ‪ Address‬توجه کنيد‪ ،‬مثل ‪)c:\test.html‬‬ ‫يکی از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد‪ ،‬چه اين صفحات روی کامپيوتر شما‬ ‫ذخيره شده باشند و يا اينکه از اينترنت خوانده شوند‪ .‬با کليک روی یک لينک فايلی شبيه فايل ذخيره شده‬ ‫توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به‬ ‫آدرس فايل در قسمت ‪ Address‬توجه کنيد‪) .‬‬

‫توضيح مثال بال‬ ‫اولين تگ مثال بال تگ <‪ >html‬ميباشد‪ .‬از روی اين تگ‪ ،‬مرورگر نوع متن يعنی اچتمل بودنش را يافته و‬ ‫از روی <‪ >/html‬انتهای متن اچتمل را ميبابد‪.‬‬ ‫متن بين تگ <‪ >head‬و تگ <‪ >/head‬اطلعات شناسنامه ای يا "‪ "Header information‬متن اچتمل‬ ‫بوده و نمايش داده نخواهند شد‪ .‬در اين مثال با کمک تگهای <‪ >title‬و <‪ >/title‬تيتر و يا ‪ Title‬صفحه که‬ ‫در اين مثال عبارت "‪ "Title of page‬ميباشد در بالی مرورگر نمايش داده خواهد شد‪.‬‬ ‫متن بين تگ <‪ >body‬و انتهای آن يعنی تگ <‪ >/body‬تنها اطلعاتی است که توسط مرورگرنمايش داده‬ ‫خواهند شد‪.‬‬ ‫متن بين تگ <‪ >b‬و انتهای آن يعنی تگ <‪ >/b‬بصورت ‪ Bold‬و يا توپر نمايش داده خواهند شد‪.‬‬

‫انشعاب فايل ‪ htm‬يا ‪ html‬؟‬ ‫اغلب مرورگرها هر دو نوع انشعاب را به خوبی ميشناسند ولی ترجيحا به هنگام ذخيره فايلهای اچتمل از‬ ‫‪ html‬استفاده کنيد‪ (.‬استفاده از انشعابهای سه حرفی مانند ‪ htm‬مربوط به قديم و سيستم عاملهائی‬ ‫چون ‪ DOS‬بودند‪).‬‬

‫نکته ای در مورد اديتورهای اچتمل ( ‪) HTML Editors‬‬ ‫با وجوديکه با استفاده از اديتورهای اختصاصی اچتمل مانند ‪ FrontPage‬و يا ‪ Claris Home Page‬امکان‬ ‫نوشتن و طراحی صفحات اچتمل بصورت ‪ WYSIWYG‬يا "‪ "What You See Is What You Get‬وجود‬ ‫دارد اما توصيه ميشود که از اديتورهای معمولی متن برای تهيه صفحات خود استفاده کرده‪ ،‬عملکرد تگها را‬ ‫شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد‪.‬‬

‫بيشترين سوالت پرسيده شده ( ‪: ) FAQ‬‬ ‫فايلم را درست کردم ولی هنوز نميتوانم آنرا در صفحه مرورگرم ببينم‪ ،‬مشکل کجاست؟‬ ‫مطمئن شويد که فايل را با انشعاب درست (‪ htm‬يا ‪ ) html‬ذخيره کرده ايد‪ .‬در ضمن مطمئن شويد که‬ ‫همان فايل را ‪ Open‬کرده ايد‪ (.‬نام و مسير فايل را در قسمت ‪ Address‬مرورگرتان چک کنيد‪).‬‬ ‫هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده‬ ‫شده مشاهده نميشود‪ ،‬مشکل کجاست؟‬ ‫به خاطر بال بردن سرعت‪ ،‬هميشه مرورگرها از نسخه های موجود در ‪ Cache‬يا حافظه موقت خود برای‬ ‫خواندن صفحات استفاده ميکنند‪.‬برای وادار کردن مرورگر به خواندن اصل صفحه کافی است که در‬ ‫مرورگرتان ‪ Refresh/Reload‬کنيد‪ .‬در اينترنت اکسپلورر کليد ‪ F5‬يا ‪ View/Refresh‬و در نت اسکيپ‬ ‫‪ Ctrl+R‬يا ‪ View/Reload‬اينکار را انجام خواهند داد‪.‬‬

‫آيا ميتوانم از هر دو مرورگر ‪ Internet Explorer‬و ‪ Netscape Navigator‬استفاده کنم؟‬ ‫بله‪ ،‬فقط اگر از استاندارد يونيکد برای فارسی نويسی استفاده ميکنيد‪ ،‬برای ديدن درست صفحات فارسی‬ ‫بايد از نسخه ‪ Internet Explorer 5‬و به بال و در مورد ‪ Netscape Navigator‬از نسخه ‪ 6.2‬و به بال‬ ‫استفاده کنيد‪.‬‬ ‫کجا ميتوانم آخرين نسخه از مرورگرهای ‪ Internet Explorer‬و ‪ Netscape Navigator‬را‬ ‫داونلود کنم؟‬ ‫‪ Internet Explorer‬اينجاست و ‪ Netscape Navigator‬اينجا‪.‬‬

‫‪HTML & WWW‬‬ ‫در اين درس با مفاهيم وب‪ ،‬اينترنت‪ ،‬مرورگرها و استانداردهای وب آشنا خواهيد‬ ‫شد‬ ‫منظور از وب چيست؟‬

‫‪‬وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا‪ ،‬شبکه ای از شبکه ها‪.‬‬ ‫‪‬اينترنت‪ ،‬وب‪ WWW ، web ،‬يا ‪ World Wide Web‬همگی يک چيزند‪.‬‬ ‫‪‬تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند‪.‬‬ ‫‪‬کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل ‪ HTTP‬با‬ ‫هم ارتباط برقرار ميکنند ‪.‬‬ ‫نحوه کارکرد وب چگونه است؟‬

‫‪‬اطلعات وب داخل فايلهائی به نام ‪ Web Pages‬و يا صفحات وب قرار دارند‪.‬‬ ‫‪‬اين فايلها يا صفحات روی ‪ Web Server‬يا کامپيوترهای سرويس دهنده وب‬ ‫ذخيره شده اند‪.‬‬ ‫‪‬برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا ‪Web Browser‬‬ ‫استفاده ميشود‪.‬‬ ‫‪‬دو مرورگر ‪ Internet Explorer‬و ‪ Netscape Navigator‬جزو معروفترين‬ ‫مرورگرها حساب ميشوند‪.‬‬ ‫‪‬مرورگر ‪ Internet Explorer‬متعلق به شرکت مايکروسافت و مرورگر‬ ‫‪ Netscape Navigator‬متعلق به شرکت نت اسکيپ ميباشد‪.‬‬ ‫مرورگرها چگونه به خواندن صفحات وب ميپردازند؟‬

‫‪‬يک مرورگر با کمک يک ‪ Request‬درخواستی برای خواندن يک صفحه از وب‬ ‫سرور ميکند‪.‬‬ ‫‪‬اين ‪ Request‬يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل ‪HTTP‬‬ ‫بوده و شامل آدرس صفحه مورد نظر ميباشد‪.‬‬ ‫‪‬آدرس يک صفحه وب چيزی شبيه ‪http://www.internet.com/faq.html‬‬ ‫است‪ .‬بخش ‪ http://‬نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند‪،‬‬ ‫‪ www.internet.com‬نام دومين يا ‪ Domain‬است و ‪ faq.html‬نام صفحه‬ ‫ای است که بايد خوانده شود‪.‬‬

‫مرورگرها چگونه صفحات وب را نمايش ميدهند؟‬

‫‪‬چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد‪.‬‬ ‫‪‬مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به‬ ‫نمايش صفحات ميپردازند‪.‬‬ ‫‪‬وظيفه اصلی تگ های اچتمل ( ‪ ) HTML tags‬بيان چگونگی نمايش اطلعات‬ ‫ميباشد‪.‬‬ ‫‪‬يک تگ اچتمل چيزی شبيه <‪ >p‬اين تگ پاراگراف است! <‪ >p/‬است‪.‬‬ ‫چه کسانی استاندارد های وب را تعيين ميکند؟‬

‫‪‬تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ‬ ‫ندارد‪.‬‬ ‫‪ World Wide Web Consortium‬يا ‪ W3C‬متولی تعيين استانداردهای وب‬ ‫است‪.‬‬ ‫‪ HTML, CSS and XML‬از مهمترين استانداردهای تصويب شده وب‬ ‫ميباشند‪.‬‬ ‫‪‬آخرين استاندارد ‪ HTML‬استاندارد ‪ XHTML 1.0‬ميباشد ‪.‬‬ ‫عناصر ( ‪) Elements‬‬ ‫يک فايل اچتمل متنی از نوع ‪ text‬است که از عناصر يا ‪ element‬ها تشکيل ميشود و برای ايجاد عناصر از‬ ‫تگ ها يا ‪ tags‬استفاده ميشود‪ .‬در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد‪.‬‬ ‫تگ های اچتمل (‪)HTML Tags‬‬

‫•با کمک تگ های اچتمل عناصر و يا ‪ Elements‬ساخته ميشوند‪.‬‬ ‫•در زبان اچتمل حدود ‪ 80‬عنصر تعريف شده است‪.‬‬ ‫•تگ های اچتمل بوسيله دو نويسه (‪ > )char‬و < ساخته ميشوند‪.‬‬ ‫•تگ های اچتمل معمول بصورت زوج ظاهر ميشوند‪ ،‬مانند <‪>b/b‬‬ ‫•تگ اول در يک زوج تگ مثل <‪ >b‬تگ شروع و تگ دوم مثل <‪ >/b‬تگ پايانی‬ ‫نام دارد‪.‬‬ ‫•متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا ‪element‬‬ ‫‪ content‬ناميده ميشود‪ ،‬مثل "‪"test‬‬ ‫•تگ های اچتمل را ميتوانيد بوسيله حروف لتين کوچک (‪ )lower case‬و يا‬ ‫بزرگ (‪ )upper case‬بنويسيد و ‪ case sensitive‬نيستند‪ .‬برای مثال دو تگ‬ ‫<‪ >b‬و <‪ >B‬معادل هم هستند ولی شديدا توصيه ميشود که به خاطر‬ ‫سازگاری با ‪ XHTML‬از حروف کوچک استفاده شود‪.‬‬ ‫عناصر اچتمل (‪)HTML Elements‬‬ ‫مثال بخش مقدمه را در نظر بگيريد‪:‬‬ ‫<‪>html‬‬

‫<‪>head‬‬ ‫<‪>title<Title of page>/title‬‬ ‫<‪>head/‬‬ ‫<‪>body‬‬ ‫‪>This is my first html page. >b/b‬‬ ‫<‪>body/‬‬ ‫<‪>html/‬‬ ‫*** نمونه ای از يک عنصر اچتمل‪:‬‬ ‫<‪>b/b‬‬

‫عنصر اچتمل بال با تگ <‪ >b‬شروع شده و با تگ <‪ >/b‬پايان می يابد‪ .‬محتوای اين‬ ‫عنصر عبارت "‪ "This text is bold‬است‪ .‬لزم به ذکر است که کاربرد تگ <‪ >b‬نمايش‬ ‫توپر يا ‪ bold‬متون است‪.‬‬ ‫*** مثال دوم يک عنصر اچتمل (معلوم الحال) ‪:‬‬ ‫<‪>body‬‬ ‫‪>This is my first homepage. >b/b‬‬ ‫<‪>body/‬‬

‫عنصر اچتمل بال با تگ <‪ >body‬شروع شده و با تگ <‪ >/body‬پايان می يابد‪.‬‬ ‫همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد‪.‬وظيفه تگ <‬ ‫‪ >body‬تعيين بدنه اصلی يا ‪ body‬يک متن اچتمل است‪.‬لزم به يادآوری است که تنها‬ ‫اطلعات بخش <‪ >body‬يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد‪.‬‬ ‫شناسه های يک تگ (‪)Tag Attributes‬‬ ‫تگ ها ميتوانند حاوی اطلعات اضافی ديگر باشند‪ ،‬به اين اطلعات شناسه يا ‪ Attribute‬ميگويند و وظيفه‬ ‫آنها بيان ديگر اطلعات يک عنصر يا ‪ Element‬ميباشد‪ .‬مثل در مورد تگ <‪ >body‬شناسه ای به نام‬ ‫‪ bgcolor‬وجود دارد که رنگ زمينه متن (‪ )background‬را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ‬ ‫زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد ‪:‬‬

‫<‪>"body bgcolor="black‬‬ ‫در مثال زير تگ <‪ >body‬دارای چهار شناسه مختلف با نامهای ‪width، height ، align‬‬ ‫و ‪ border‬و مقادير ‪ center، 60، 100‬و ‪ 0‬ميباشد‪.‬‬ ‫<‪> "table border="0" width="100" height="60" align="center‬‬ ‫‪......‬‬ ‫<‪>table/‬‬ ‫شناسه ها به صورت کلی "مقدار=نام" يا "‪ "name=value‬نوشته ميشوند و هميشه به تگ شروع يک‬ ‫عنصر يا ‪ Element‬اضافه ميشوند و نهايتا اگر در يک عنصر يا ‪ Element‬شناسه ها قيد نشوند از مقادير‬ ‫قراردادی يا ‪ default‬آنها استفاده خواهد شد مثل در تگ ‪ body‬اگر شناسه ‪ bgcolor‬نوشته نشود از رنگ‬ ‫سفيد برای زمينه صفحه استفاده خواهد شد‪.‬‬ ‫مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی‬ ‫که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود‪.‬‬

‫تگ های اصلی ( ‪) Basic Tags‬‬ ‫تگ ها ( ‪ ) tags‬اجزا تشکيل دهنده عناصر يا ‪ elements‬های اچتمل هستند و در اين فصل با عناصر و تگ‬

‫های پايه و مهم‪:‬‬ ‫<‪
‫مثالها ‪:‬‬ ‫مثالی ساده از يک صفحه اچتمل‬ ‫در اين مثال بسيار ساده جمله "!‪ "Hellow World‬در صفحه مرور گر نمايش داده ميشود و در واقع محتوا‬ ‫و متن عنصر ‪ body‬تماما نمايش داده خواهد شد‪.‬‬ ‫پاراگرافهای ساده‪:‬‬ ‫چگونگی نمايش متون با کمک تگ <‪ >p‬و بصورت پاراگرافی‬ ‫نمايش متون فارسی‪:‬‬ ‫چگونگی نمايش متون فارسی‪ .‬برای جزئيات بيشتر به فصل فارسی نويسی مراجعه کنيد‪.‬‬ ‫مثالهای بيشتر‪:‬‬

‫سر تيترها (‪)Headings‬‬ ‫سر تيترها با کمک تگ های <‪ >h1‬تا <‪ >h6‬تعيين ميشوند‪ >h1< .‬معرف بزرگترين‬ ‫سر تيتر و <‪ >h6‬معرف کوچکترين سر تيتر است‪ .‬مرورگر به هنگام نمايش يک سر تيتر‬ ‫بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد‪.‬‬ ‫<‪heading>/h1‬‬ ‫<‪heading>/h2‬‬ ‫<‪heading>/h3‬‬ ‫<‪heading>/h4‬‬ ‫<‪heading>/h5‬‬ ‫<‪heading>/h6‬‬

‫‪a‬‬ ‫‪a‬‬ ‫‪a‬‬ ‫‪a‬‬ ‫‪a‬‬ ‫‪a‬‬

‫‪is‬‬ ‫‪is‬‬ ‫‪is‬‬ ‫‪is‬‬ ‫‪is‬‬ ‫‪is‬‬

‫‪>h1h2h3h4h5h6
‫مثال بال در صفحه مرورگر بدين شکل نمايش داده خواهد شد‪.‬‬ ‫پاراگرافها (‪)Paragraphs‬‬ ‫پاراگرافها با کمک تگ <‪ >p‬معرفی ميشوند‪.‬مرورگر به هنگام نمايش يک پاراگراف‬ ‫بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد‪.‬‬ ‫<‪>p/p‬‬ ‫<‪>p/p‬‬

‫مثال بال در صفحه مرورگر بدين شکل نمايش داده خواهد شد‪.‬‬ ‫سطر جديد (‪)Line Breaks‬‬

‫برای رفتن سر سطر جديد از تگ <‪ >br‬استفاده ميشود‪.‬در اينحالت يک پاراگراف جديد‬ ‫ايجاد نميشود‪ .‬تگ <‪ >br‬از نوع تگ های خالی بوده و دارای تگ انتهائی (مثل <‪) >/br‬‬ ‫نميباشد‪.‬‬ ‫<‪>pbr< is a para>br/p‬‬

‫مثال بال در صفحه مرورگر بدين شکل نمايش داده خواهد شد‪.‬‬ ‫کامنت ها در اچتمل (‪)Comments‬‬

‫برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد‪ .‬برای اينکار بايد متن‬ ‫و شرحتان را درون علئم <‪ --‬و ‪ >!--‬قرار دهيد‪ .‬مرور تگ های ‪ comment‬را در نظر نگرفته و محتوی‬ ‫آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمال در آينده با‬ ‫کد اچتمل کار خواهند کرد مفيد خواهد بود‪( .‬به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)‬ ‫-- This is a comment --‬‬

‫مثالی در مورد ‪ comments‬و نحوه استفاده از آن‬ ‫چند نکته کاربردی‪:‬‬ ‫توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر‪ ،‬نت اسکيپ‪ ).. ،‬و به دليل تفاوت دقت‬ ‫نمايش صفحه نمايش کامپيوترها‪ ،‬صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند‬ ‫و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و‬ ‫حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش ‪ 800x600‬و‬ ‫‪ 1024X768‬آن را امتحان کنيد‪.‬‬ ‫از نظر فاصله و سطر بندی‪ ،‬متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد‬ ‫داد متفاوت خواهد بود‪.‬هميشه به ياد داشته باشيد که فاصله های اضافی (‪ )space‬و خطهای خالی متن در‬ ‫صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد‪.‬‬ ‫برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (‪None Breaking‬‬ ‫‪ )Space‬استفاده کنيد‪ .‬در بخش ( ‪ ) Entities‬نهادها به اين مطلب بيشتر پرداخته خواهد شد‪.‬‬ ‫فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه‬ ‫تبديل به يک فاصله (‪ )space‬خواهد شد‪ .‬در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا‬ ‫‪ space‬نمايش داده خواهد شد‪.‬‬ ‫برای ايجاد يک سطر جديد هيچگاه از يک تگ <‪ >p‬خالی استفاده نکنيد و به جای آن از تگ <‪ >br‬استفاده‬ ‫کنيد‪..‬‬ ‫مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش‬ ‫خواهند داد‪ .‬برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<‪ )>p‬و سرتيترها (<‪ )>..h‬نام برد‪.‬‬ ‫تگ <‪ >hr‬يا ‪ Horizontal Roler‬سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف‬ ‫مطالب اين صفحات با کمک اين تگ از هم جدا شده اند‪.‬‬

‫مثالهای بيشتر‪:‬‬ ‫باز هم مثال پاراگرافها‬ ‫اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد‪.‬‬ ‫ترازبندی پاراگراف ها‬ ‫اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا ‪ attribute‬ای به نام ‪ align‬نشان ميدهد‪ .‬در‬ ‫اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد‪.‬‬ ‫( "‪) align="center‬‬ ‫رفتن سر سطر جديد‬ ‫اين مثال نحوه استفاده از تگ <‪ >br‬را در يک متن اچتمل نشان ميدهد‪.‬‬ ‫سر تيترها‬ ‫اين مثال نحوه استفاده از تگهای <‪ >h1< .... >h6‬را در يک متن اچتمل نشان ميدهد‪.‬‬

‫ترازبندی سر تيترها‬ ‫اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا ‪ attribute‬ای به نام ‪ align‬نشان ميدهد‪ .‬در اين‬ ‫حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد‪.‬‬ ‫( "‪) align="center‬‬ ‫نمايش خطوط افقی‬ ‫اين مثال نحوه نمايش خطوط افقی با استفاده از تگ <‪ >br‬ميباشد‪.‬‬ ‫استفاده از ‪comment‬‬ ‫اين مثال نحوه استفاده از ‪ comment‬در کدهای اچتمل را نمايش ميدهد‪.‬‬ ‫تعيين رنگ زمينه صفحه‬ ‫اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (‪ ) attribute‬عنصر ‪ body‬با نام‬ ‫‪ bgcolor‬نشان ميدهد‪)Background Color( .‬‬ ‫( "‪) bgcolor ="blue‬‬

‫تگهای اصلی‬ ‫در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده‬ ‫است‪ .‬توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا ‪ Attributes‬موجود است و همچنين‬ ‫به شناسه های کنارگذاشته شده (‪ )Deprecated‬در نسخه های آينده اچتمل توجه داشته باشيد و سعی‬ ‫کنيد که از آنها استفاده نکنيد‪.‬‬

‫‪:‬‬

‫‪Purpose Start Tag‬‬ ‫‪Defines a html document‬‬ ‫<‪>html‬‬ ‫<‪>body‬‬ ‫<‪h1<-‬‬ ‫‪>>h6‬‬ ‫<‪>p‬‬ ‫<‪>br‬‬ ‫<‪>hr‬‬

‫‪Defines the document's body‬‬

‫کاربرد‬ ‫نشان شروع متن اچتمل‬ ‫تعيين بدنه و قسمت اصلی صفحه‬ ‫اچتمل‬

‫‪ Defines heading 1 to heading 6‬تعريف سر تيترهای ‪ h1‬تا ‪h6‬‬ ‫تعريف پاراگراف‬ ‫رفتن سر خط جديد‬ ‫نمايش خط افقی‬

‫‪Defines a paragraph‬‬ ‫‪Inserts a single line break‬‬ ‫‪Defines a horizontal rule‬‬ ‫‪Defines a comment in the HTML‬‬ ‫نوشتن شرح و ‪comment‬‬ ‫--‬‬ ‫‪source code‬‬ ‫فارسی نويسی‬ ‫در اين درس با فارسی نويسی‪ ،‬فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنلين و فارسی‬ ‫اين سايت آشنا خواهيد شد‪ .‬همچنين متاتگ ‪ http-equiv‬و شناسه ‪ dir‬نيز معرفی خواهد شد‬ ‫سؤالت مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد‪:‬‬ ‫ چگونه فارسی بنويسم ؟‬‫ چگونه فارسی بخوانم؟‬‫‪ -‬چگونه صفحات اچتمل فارسی را نمايش دهم؟‬

‫دو نکته بسيار مهم در مورد فارسی نويسی‪:‬‬

‫روش کدگزاری ‪UTF-8‬‬ ‫اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش‬ ‫کدگزاری ‪ UTF-8‬اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلينش‬ ‫از آن استفاده ميکند‪.‬نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا‬ ‫‪ encoing‬صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام ‪http-equiv‬‬ ‫در بخش ‪ head‬صفحات اچتمل به شکل زير استفاده شود‪:‬‬ ‫<‪<"meta http-equiv="Content-Type" content="text/html; charset=utf-8‬‬

‫در اينصورت مرورگر يا ‪ Browser‬قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری‬ ‫(‪ )Encoding‬را تشخيص داده و ديگر مثل نيازی به تعيين دستی (دراکسپلورور ‪: 5‬‬ ‫‪ ) View/Encoing/Unicode / UTF-8‬نوع ‪ Encoing‬توسط بازديدکننده سايت نخواهد‬ ‫بود‪.‬‬ ‫شناسه يا ‪ attribute‬ی به نام ‪dir‬‬ ‫جهت نمايش متون لتين به صورت پيش فرض و ‪ default‬از چپ به راست (‪)ltr‬‬ ‫ميباشد‪.‬در مورد متون و جملت فارسی بايد با کمک روشی جهت نمايش پيش فرض را‬ ‫به "راست به چپ" تغيير دهيد‪ .‬شناسه يا ‪ attribute‬ی به نام ‪ dir‬يا همان ‪direction‬‬ ‫اين کار را برای شما انجام ميدهد‪ .‬اين شناسه دارای دو مقدار ممکن ميباشد ‪:‬‬ ‫‪ - .dir="ltr" , Left-to-right text‬چپ به راست‬ ‫‪ - .dir="rtl" , Right-to-left text‬راست به چپ‬

‫مثل برای نمايش جمله فارسی "سلم بر دنيای وب!" با کمک عناصر ‪ p‬يا ‪ div‬کافی است‬ ‫که به يکی از شکلهای زير عمل شود‪:‬‬ ‫<‪ >"p dir="rtl‬سلم بر دنيای وب <‪>p/‬‬ ‫<‪ >"div dir="rtl‬سلم بر دنيای وب <‪>div/‬‬ ‫در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه ‪ dir‬ميسر بوده و به عنوان نمونه ميتوان‬ ‫از عناصر زير نام برد‪:‬‬ ‫<‪p< , >div< , >html< , >body< , >table< , >tr< , >td< , >h1 ... h6< , >input< ,‬‬ ‫‪... , >>pre< , >select< , >span‬‬ ‫مثالهای زير نحوه ترازبندی متون فارسی را به نمايش ميگذارند و برای مطالعه بيشتر در مورد ترازبندی‬ ‫متون "راست به چپ" به اين صفحه مراجعه کنيد‪( .‬عناصر ‪ BDO ، Span‬و شناسه ‪ lang‬هم برای مطالعه‬ ‫مفيد ميباشند‪).‬‬

‫مثالهای فارسی نويسی‪:‬‬ ‫مثال ‪ : 1‬سلم بی وفا‬ ‫به بخش ‪ head‬و تگ ‪ div‬توجه کنيد‪ .‬متا تگ ‪ http-equiv‬نوع کدگزاری را تعيين ميکند و در اينجا با کمک‬ ‫تگ ‪ div‬جهت نوشتن مطالب (از راست به چپ يا بلعکس) تعيين ميگردد‪ dir .‬به معنای ‪ direction‬و جهت‬ ‫بوده و ‪ rtl‬مخفف ‪ right to left‬و ‪ ltr‬معادل ‪ left to right‬ميباشد‪.‬‬ ‫مثال ‪ : 2‬متن ها و پاراگراف بندی‬ ‫به عناصر ‪ div‬و ‪ p‬توجه کنيد‪ .‬با کمک شناسه ‪ dir‬جهت نوشتن مطالب (از راست به چپ يآ بلعکس) تعيين‬ ‫ميگردد‪.‬‬

‫مثال ‪ : 3‬متون فارسی و لتين در کنار هم‬ ‫مثالی کاملتر با راهنمای استفاده از عنصر ‪ div‬و شناسه ‪ dir‬آن‬ ‫مثال ‪ : 4‬شناسه ‪ dir‬در عنصر ‪html‬‬ ‫اگر شناسه ‪ dir‬را در عنصر ‪ html‬بکار ببريد جهت نمايش تمامی متون از راست به چپ شده و برای‬ ‫نوشتن از چپ به راست بايد به صورت موردی شناسه "‪ dir="ltr‬را استفاده کنيد‪ .‬همچنين در اين حالت‬ ‫ماسماسک! ‪ Scrool down‬مرورگر در سمت چپ صفحه نمايش داده خواهد شد‪ .‬در صورت استفاده‬ ‫شناسه ‪ dir‬در عنصر ‪ body‬ماسماسک همان سمت راست خواهد ماند‪.‬‬ ‫مثال ‪ : 5‬مثال کامل‬ ‫نحوه استفاده شناسه ‪ dir‬در عنصرهای مختلف‬

‫لزم به ذکر است که برای فارسی نويسی از کدهای ‪ java script‬موجود در اين آدرس که ابزارهای برنامه‬ ‫نويسی فراهم شده توسط شورای عالی انفورماتيك و دانشجويان دانشگاه صنعتی هستند‪ ،‬استفاده شده‬ ‫است و توصيه ميشود که پروژه ‪ farsiweb.info‬را فراموش نکرده زيرا که استاندارد آينده فارسی نويسی‬ ‫اينترنتی در ايران خواهد شد‪.‬‬

‫فرمت دهی ( ‪) Formatting‬‬ ‫وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثل ضخیم و ‪ bold‬بودن و يا‬ ‫مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهای ‪ formating‬آشنا خواهيد شد‪:‬‬ ‫<‪b< , >big< , >code< , >del< , >em< , >i< , >ins< , >kbd< , >pre< , >s< ,‬‬ ‫‪>samp< , >small< , >strike< , >strong< , >sub< , >sup< , >tt< , >u< , >var‬‬ ‫مثالهای شکل دهی متون (‪)Text Formatting‬‬ ‫در مثالهای زير نحوه استفاده از عناصر و تگهای شکل دهی متون شرح داده شده اند‪:‬‬ ‫شکل دهی متون‬ ‫شکلهای مختلف نمايش متون با کمک عناصر ‪b , strong , big , em , i , small , sub , sup‬‬ ‫متون از قبل شکل دهی شده‬ ‫نمايش متون از قبل شکل دهی شده با کمک عنصر ‪ pre‬يا ‪pre Formatted‬‬ ‫برای نمايش اشعار فارسی استفاده از عنصر ‪ pre‬بهترين انتخاب ميباشد‪.‬‬ ‫عناصر ديگر شکل دهی متن‬ ‫نمايش متون ‪ deleted، underline‬و ‪ ...‬با کمک عناصر ‪code , kbd , tt , samp , var , del ,‬‬ ‫‪ins‬‬

‫نحوه ديدن سورس کدهای اچتمل (‪)HTML Source‬‬

‫‪o‬اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که‬ ‫در منوی ‪ View‬مرورگرتان حالت ‪ Source‬يا ‪ Page Source‬را انتخاب کرده‬ ‫و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما‬ ‫برای استفاده های بعدی ميباشد‪.‬‬ ‫‪o‬اگر صفحه مورد نظر از مجموعه فريمها (‪ )Frameset‬استفاده کرده باشد‬ ‫برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بال به‬ ‫مشاهده سورس کدهای اچتمل پرداخته (لزم به توضيح است که در اين حالت‬

‫فقط تعاريف کلی فريمها قرار دارند‪ ).‬و سپس برای ديدن کد اچتمل‬ ‫اختصاصی هر صفحه بايد پس از "‪ "Right Click‬روی هر صفحه "‪View‬‬ ‫‪ "Source‬کرده و کد اچتمل هر فريم را جداگانه ببينيد‪.‬‬ ‫‪o‬اگر طراح سايت با کمک ‪ Java Script‬مانع ديدن سورس توسط شما ميشود‪،‬‬ ‫ابتدا در منوی ‪Tools/Internet Options.../Security/Custom Level‬‬ ‫مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (‬ ‫‪ )disable‬و سپس مراحل بال را تکرار کنيد!!!‬ ‫چند نکته کاربردی‪:‬‬

‫‪.I‬‬ ‫‪.II‬‬ ‫‪.III‬‬

‫در استفاده از ‪ Underline‬دقت كنيد چون در اكثر مرورگرها‪ ،‬پيوندها با اين‬ ‫خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند ‪.‬‬ ‫به كارگيري تگهاي ‪ EM‬و ‪ STRONG‬كه جايگزين تگهاي ‪ I‬و ‪ B‬هستند ‪ ،‬اين‬ ‫اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش‬ ‫داده خواهد شد ‪.‬‬ ‫به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد‪ ،‬همان گونه كه مشاهده‬ ‫مي كنيد عنصر ‪ STRONG‬بعد از عنصر ‪ U‬شروع شده است ‪ ،‬به همين خاطر تگ‬ ‫خاتمه دهنده آن قبل از تگ خاتمه دهنده ‪ U‬قرار مي گيرد‪.‬‬ ‫<‪>USTRONG<2.0>/STRONG<>/U‬‬

‫تگهای فرمت دهی متون‬

‫‪Start Tag‬‬ ‫‪Purpose‬‬ ‫کاربرد‬ ‫<‪>b‬‬ ‫‪Defines bold text‬‬ ‫نمايش توپر‬ ‫<‪>big‬‬ ‫‪Defines big text‬‬ ‫نمايش در اندازه بزرگ‬ ‫<‪>em‬‬ ‫‪Defines emphasized text‬‬ ‫نمايش بصورت تاکيد شده‬ ‫<‪>i‬‬ ‫‪Defines italic text‬‬ ‫نمايش ايتاليک يا کج‬ ‫<‪>small‬‬ ‫‪Defines small text‬‬ ‫نمايش در اندازه کوچک‬ ‫<‪>strong‬‬ ‫‪Defines strong text‬‬ ‫نمايش قوی ؟!‬ ‫<‪>sub‬‬ ‫‪Defines subscripted text‬‬ ‫نمايش پايين تر از خط افقی‬ ‫<‪>sup‬‬ ‫‪Defines superscripted text‬‬ ‫نمايش بالتر از خط افقی‬ ‫<‪>ins‬‬ ‫‪Defines inserted text‬‬ ‫نمايش به صورت خط زير‬ ‫<‪>del‬‬ ‫‪Defines deleted text‬‬ ‫نمايش به صورت خط خورده‬ ‫‪>s< Deprecated. Use >del< instead‬‬ ‫از رده خارج‬ ‫‪>strike< Deprecated. Use >del< instead‬‬ ‫از رده خارج‬ ‫‪>u< Deprecated. Use styles instead‬‬ ‫از رده خارج‬ ‫‪Start‬‬ ‫‪Purpose‬‬ ‫کاربرد‬ ‫‪Tag‬‬ ‫‪>code< Defines computer code text‬‬ ‫نمايش کدهای برنامه نويسی‬ ‫<‪>kbd‬‬ ‫‪Defines keyboard text‬‬ ‫نمايش متن بصورت صفحه کليدی‬ ‫<‪>samp‬‬ ‫‪Defines sample computer‬‬ ‫نمايش کدهای نمونه برنامه نويسی‬

‫نمايش تله تايپ‬ ‫نمايش متغييرها‬ ‫نمايش متون از قبل فرمت شده‬

‫‪code‬‬ ‫‪Defines teletype text‬‬ ‫‪Defines a variable‬‬ ‫‪Defines preformatted text‬‬

‫<‪>tt‬‬ ‫<‪>var‬‬ ‫<‪>pre‬‬

‫مرجع ‪ - HTML 4.01 Specification :‬فهرست عناصر ‪ -‬فهرست شناسه ها‬

‫‪Character Entities‬‬ ‫در استاندارد اچتمل گروهی از نويسه ها (‪ )Character‬دارای معنی خاصی بوده ( مثل نويسه < شروع يک‬ ‫تگ و نويسه > انتهای يک تگ را نشان ميدهد‪ ) .‬و برای نمايش آنها در صفحاتتان مستقيما قابل مصرف‬ ‫نميباشند‪ .‬در اين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با کمک ‪Character‬‬ ‫‪ Entities‬فرا خواهيد گرفت‪.‬‬ ‫‪Character Entities‬‬ ‫در اچتمل بعضی از نويسه ها دارای معنی خاصی بوده و برای نمايش آنها در صفحاتتان بايد از ‪character‬‬ ‫‪ entities‬ها استفاده کنيد‪ .‬يک ‪ character entities‬از سه قسمت تشکيل ميشود‪:‬‬ ‫‪ -1‬نويسه ‪)&( ampersand‬‬ ‫‪ -2‬نام ‪ entity‬يا نويسه ‪ #‬و سپس شماره عددی ‪entity‬‬ ‫‪ - 3‬و نهايتا نويسه ‪);( semicolon‬‬ ‫برای مثال برای نمايش نويسه > دو روش وجود دارد‪ ،‬بايد از &‪ ;lt‬يا از &‪ ;60#‬استفاده کنيد‪ .‬در اين‬ ‫مثال ‪ lt‬نام ‪ entity‬و ‪ 60‬شماره عددی آن ميباشد‪.‬‬ ‫مزيت استفاده از نام ‪ entity‬در مقابل استفاده از شماره عددی آن سهولت يادآوری آن از روی نامش‬ ‫ميباشد و عيب آن اين است که تمامی مرورگرها نام گذاريهای موجود برای ‪ Entity‬ها را قبول ندارند ولی‬ ‫در عوض همگی شماره های عددی ‪ entity‬ها را بخوبی ميشناسند‪ .‬توجه داشته باشيد که ‪ entity‬ها به‬ ‫کوچک و بزرگي حروف حساس هستند و در واقع ‪ Case Sensitive‬ميباشند‪.‬‬ ‫پر کاربردترين ‪ character entity‬در اچتمل‪ ،‬نويسه فاصله يا ‪ Space‬يا ‪ Blank‬ميباشد و نام رسمی آن‬ ‫‪ non-breaking space‬ميباشد‪ .‬همانطور که ميدانيد مرورگرها فاصله های اضافی را در نظر نگرفته (‬ ‫‪ )truncate spaces‬و مثل از ‪ 10‬نويسه فاصله‪ 9 ،‬تای آنرا ناديده ميگيرند و برای نمايش فاصله های‬ ‫اضافی بايد از &‪ ;nbsp‬استفاده کنيد‪.‬‬

‫فهرست پرکاربردترين ‪ Character Entities‬ها‬ ‫‪Result‬‬ ‫(نمايش)‬

‫<‬ ‫>‬ ‫&‬ ‫"‬ ‫'‬

‫‪Description‬‬ ‫(شرح)‬ ‫‪non-breaking‬‬ ‫‪space‬‬ ‫‪less than‬‬ ‫‪greater than‬‬ ‫‪ampersand‬‬ ‫‪quotation mark‬‬ ‫‪apostrophe‬‬

‫چند ‪ Character Entitie‬با کاربردهای کمتر‬

‫‪( Entity Number Entity Name‬شماره‬ ‫عددی)‬ ‫(نام)‬ ‫&‪;nbsp‬‬

‫&‪;#160‬‬

‫&‪;lt‬‬ ‫&‪;gt‬‬ ‫&‪;amp‬‬ ‫&‪;quot‬‬

‫&‪;#60‬‬ ‫&‪;#62‬‬ ‫&‪;#38‬‬ ‫&‪;#34‬‬ ‫&‪;#39‬‬

‫‪Description Result‬‬ ‫‪cent‬‬ ‫‪¢‬‬ ‫‪pound‬‬ ‫‪£‬‬ ‫‪yen‬‬ ‫‪¥‬‬ ‫‪section‬‬ ‫§‬ ‫‪copyright‬‬ ‫©‬ ‫‪registered trademark‬‬ ‫®‬ ‫‪multiplication‬‬ ‫×‬ ‫‪division‬‬ ‫÷‬

‫‪Entity Name‬‬ ‫&‪;cent‬‬ ‫&‪;pound‬‬ ‫&‪;yen‬‬ ‫&‪;sect‬‬ ‫&‪;copy‬‬ ‫&‪;reg‬‬ ‫&‪;times‬‬ ‫&‪;divide‬‬

‫‪Entity Number‬‬ ‫&‪;#162‬‬ ‫&‪;#163‬‬ ‫&‪;#165‬‬ ‫&‪;#167‬‬ ‫&‪;#169‬‬ ‫&‪;#174‬‬ ‫&‪;#215‬‬ ‫&‪;#247‬‬

‫برای ديدن فهرست کل ‪ character entities‬ها سری به اين صفحه بزنيد‪.‬‬

‫پيوندهای اچتمل ( ‪) HTML Links‬‬ ‫در اين درس با پيوندها ( ‪ ، ) Links‬تگ های مربوطه مخصوصا تگ ‪ Anchor‬يا ‪ A‬و نحوه به کار گيری آنها‬ ‫آشنا خواهيد شد‪ .‬همچنين شناسه های بسيار مهم ‪ href ،target‬و ‪ name‬تشريح خواهند شد‪.‬‬

‫در محيط وب‪ ،‬صفحات اچتمل با کمک پيوندها به يکديگر متصل (‪ )Link‬ميشوند‪ .‬اصطلح‬ ‫ابرمتن (‪ )Hyper Text‬در مقابل متن خطی (‪ )Linear‬قرار دارد‪ .‬در يک متن معمولی‬ ‫خواندن به شکل خطی و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط (‪)Hyper‬‬ ‫با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد‪.‬اين کار با کمک‬ ‫عنصری معلوم الحال! به نام ‪ A‬يا ‪ Anchor‬ميسر ميگردد‪.‬‬ ‫مثالها‬ ‫ايجاد پيوندها با کمک متن‬ ‫اين مثال چگونگی ايجاد يک پيوند‪ ،‬لينک يا ‪ Link‬را در يک متن اچتمل نشان ميدهد‪.‬‬ ‫ايجاد پيوندها با کمک تصاوير‬ ‫اين مثال چگونگی ايجاد يک پيوند‪ ،‬لينک يا ‪ Link‬را با کمک يک تصوير (‪ )image‬نشان ميدهد‪.‬‬ ‫مثالهای بيشتر‬

‫تگ ‪ Anchor‬و شناسه ‪href‬‬ ‫برای ايجاد پيوند به صفحات ديگر از تگ <‪
‫<‪
‫برای نمونه کد اچتمل زير پيوندی به سايت ‪ google.com‬ايجاد خواهد کرد‪:‬‬

‫<‪
‫شناسه ‪ target‬در پيوندها‪:‬‬ ‫با کمک شناسه ‪ target‬امکان تعيين مقصد پيوند جديد فراهم ميشود‪ .‬در مثال بال پس از کليک روی پيوند‪،‬‬ ‫مرورگر سايت ‪ google.com‬را باز کرده و جايگزين سایت فعلی خواهد شد‪ .‬اگر ميخواهيد که مرورگر‬ ‫پيوند را در صفحه ای جديد باز کند بايد از شناسه ‪ target‬و مقدار "_‪ "blank‬برای آن استفاده کنيد ‪ .‬مثال‬ ‫زير سبب باز شدن سايت ‪ google.com‬در پنجره جديدی خواهد شد‪:‬‬

‫<‪a href="http://www.google.com/" target="_blank"
‫شناسه ‪: Name‬‬ ‫با کمک شناسه ‪ name‬ميتوانيد پيوندها را نام گذاری کنيد‪.‬پيوندهای نامگذاری شده امکان حرکت ميان‬ ‫قسمتهای مختلف يک صفحه يا ‪ page‬را فراهم ميکنند‪ .‬در اينصورت مثل برای رفتن به آخر يک متن ديگر‬ ‫نيازی به ‪ Scrool down‬کردن تمامی صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر‬ ‫صفحه اشاره ميکند کليک کند‪.‬‬ ‫استفاده از پيوندهای نامگذاری شده شامل دو مرحله است‪:‬‬ ‫‪ -1‬ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد‪: ).‬‬ ‫فرم کلی يک پيوند نام گذاری شده به قرار زير است‪:‬‬

‫<‪
‫<‪
‫<‪
‫<‪
‫مثالهای بيشتر‬ ‫باز کردن پيوند در پنجره ای جديد‬ ‫اين مثال نحوه ايجاد پيوندهائی که در پنجره ای جديد باز ميشوند را نشان ميدهد‪ .‬در اين حالت‬ ‫بازديدکنندگان سايتتان را از دست نخواهيد داد‪.‬‬ ‫ارجاع به قسمت ديگری از صفحه‬ ‫با کمک اين مثال نحوه تعريف پيوندهای نام گذاری شده را فراگرفته و چگونگی ارجاع به قسمتهای مختلف‬ ‫يک صفحه اچتمل را فرا خواهيد گرفت‪.‬‬ ‫رهائی از شر فريم ها‬ ‫اين مثال کاربرد شناسه ‪ target‬و مقدار ‪ _top‬و نحوه رهائی از فريم ها را شرح خواهد داد‪.‬‬ ‫نحوه ايجاد يک پيوند ‪mailto‬‬ ‫اين مثال نحوه ايجاد يک پيوند از نوع ‪ mailto‬برای باز کردن برنامه مديريت ايميل ها را نشان ميدهد‪ .‬در‬ ‫اين حالت اگر بازديدکننده سايت برنامه های مربوط به ارسال و مديريت ايميل ها را نصب کرده باشد‬ ‫ميتواند به ارسال ايميل بپردازد‪.‬‬ ‫مثالی کاملتر در مورد ‪mailto‬‬ ‫مثال از ارسال ايميل با امکان تعيين مقادير ‪ cc ، bcc، subject‬و ‪body‬‬

‫‪Start Tag‬‬

‫‪Purpose‬‬ ‫‪Defines an‬‬ ‫‪anchor‬‬

‫‪Target Attributes‬‬ ‫‪"target="_blank‬‬ ‫‪"target="_self‬‬

‫کاربرد حالتهای مختلف شناسه ‪target‬‬ ‫مرورگر پيوند را در يک پنجره جديد باز ميکند‪.‬‬ ‫مرورگر پيوند را همان پنجره باز ميکند‪( .‬حالت پيش فرض يا‬ ‫‪)default‬‬ ‫مرورگر پيوند را فريم ‪ parent‬باز ميکند‪( .‬کاربرد در مبحث‬ ‫فريمها)‬ ‫مرورگر پيوند را در فريم مادر و اصلی باز ميکند‪(.‬روشی خوب‬ ‫برای نجات از شر فريمها )‬

‫<‪ rel="nofollow">a‬‬

‫‪"target="_parent‬‬ ‫‪"target="_top‬‬

‫کاربرد عنصر ‪Anchor‬‬ ‫تعريف يک پيوند يا ‪ Anchor‬در يک صفحه‬ ‫اچتمل‬

‫برای مطالعه بيشتر در مورد شناسه ‪ target‬سری به اين صفحه بزنيد‪.‬‬ ‫مرجع ‪ - HTML 4.01 Specification :‬فهرست عناصر ‪ -‬فهرست شناسه ها‬

‫جداول ( ‪)Tables‬‬ ‫در اين درس با المان جدول ( ‪ ، ) Table‬سلولها يا خانه ها‪ ،‬مرز و ‪ border‬در جداول و تگ های مربوطه‬ ‫مخصوصا تگهای ‪ TABLE ، TD , TR‬آشنا خواهيد شد‪ .‬توجه داشته باشید که جداول یکی از مهمترین‬ ‫المانهای آرایش و ‪ layout‬میباشند‬

‫مثالها‪:‬‬ ‫جداول‪ ،‬آرايه ها‬ ‫مثال ساده ای برای ايجاد جداول‬ ‫مرز جداول‬ ‫نقش شناسه ‪ border‬در تعيين مرز جداول‬ ‫مثالهای بيشتر‬

‫جدولها‬ ‫برای تعريف جداول از تگ <‪ >table‬استفاده ميشود‪ .‬يک جدول از يک يا چند سطر که با کمک تگ <‪>tr‬‬ ‫تعريف ميشوند‪ ،‬تشکيل ميشود‪ .‬هر رديف يا ‪ row‬از يک يا چند سلول‪ ،‬خانه يا ‪ cell‬تشکيل گرديده که با‬ ‫کمک تگ <‪ >td‬ايجاد ميشوند‪ .‬نام های ‪ td‬و ‪ tr‬به ترتيب خلصه شده ‪ table row‬و ‪table data‬‬ ‫ميباشند‪.‬‬ ‫محتوی يک سلول ميتواند متن‪ ،‬تصوير‪ ،‬فهرستها‪ ،‬جداول ديگر‪ ،‬پاراگرافها و ‪ ...‬باشد‪.‬‬ ‫مثال زير جدولی است با دو سطر و سه ستون ‪:‬‬

‫کد اچتمل جدولی با دو نمايش جدول روبرو توسط‬ ‫مرورگر‬ ‫سطر و سه ستون‬ ‫<‪>"table border="1" dir="rtl‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<1‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<2‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<3‬‬ ‫<‪>tr/‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<1‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<2‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<3‬‬ ‫<‪>tr/‬‬ ‫<‪>table/‬‬

‫رديف ‪،1‬‬ ‫سلول ‪1‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪1‬‬

‫رديف ‪،1‬‬ ‫سلول ‪2‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪2‬‬

‫رديف ‪،1‬‬ ‫سلول ‪3‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪3‬‬

‫جدولها و شناسه ‪ border‬و ‪: dir‬‬ ‫در مثال بال شناسه ‪ border‬مرز جدول را مشخص‬ ‫ميکند‪ ،‬مقدار ‪ 1‬مرزی با ضخامت يک پيکسل را نمايش‬ ‫خواهد داد و مقدار صفر جدول را بدون مرز نمايش‬ ‫خواهد داد‪ .‬توجه داشته باشيد که حالت پيش فرض يعنی‬

‫جدولی بدون شناسه ‪ ، border‬جداول بدون مرز را‬ ‫نمايش خواهد داد‪.‬‬ ‫در مثال بال شناسه ‪ dir‬يا ‪ direction‬و مقدار ‪rtl‬‬ ‫برای آن‪ ،‬سبب تعيين نمايش جهت متون از راست به‬ ‫چپ خواهد شد و چو ن در داخل تک ‪ table‬تعريف شده‬ ‫است به تمامی سلولهای جدول اعمال خواهذ شد‪.‬‬ ‫ساده ترين جدول ممکن در اچتمل‪ ،‬جدولی است با‬ ‫يک سطر و يک ستون!‬ ‫سرستون در جداول (‪)Headings‬‬ ‫سرستونها در جداول با کمک تگ <‪ >th‬تعريف ميشوند‪ .‬مثال زير نحوه تعريف سرستونها را در جداول‬ ‫نمايش ميدهد‪:‬‬

‫کد اچتمل جدولی با‬ ‫نمايش جدول روبرو توسط مرورگر‬ ‫سه سطر و سه‬ ‫ستون‬ ‫<"‪table border="1‬‬ ‫‪>"dir="rtl‬‬ ‫<‪>tr‬‬ ‫<‪>th‬سرستون ا<‪>th/‬‬ ‫<‪>th‬سرستون ‪>th/<2‬‬ ‫<‪>th‬سرستون ‪>th/<3‬‬ ‫<‪>tr/‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<1‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<2‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<3‬‬ ‫<‪>tr/‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<1‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<2‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<3‬‬ ‫<‪>tr/‬‬ ‫<‪>table/‬‬

‫سرستون ا‬ ‫رديف ‪،1‬‬ ‫سلول ‪1‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪1‬‬

‫سرستون ‪ 2‬سرستون ‪3‬‬ ‫رديف ‪،1‬‬ ‫رديف ‪،1‬‬ ‫سلول ‪3‬‬ ‫سلول ‪2‬‬ ‫رديف ‪،2‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪3‬‬ ‫سلول ‪2‬‬

‫همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهای معمولی جداول تعريف ميشوند و فقط به جای ‪td‬‬ ‫از ‪ th‬استفاده شده و لی در نمايش محتوای سر ستونها ‪ bold‬يا توپر نمايش داده خواهند شد‪.‬‬

‫خانه های خالی در جداول (‪)Empty Cells‬‬ ‫اگر محتوای خانه ای از يک جدول خالی باشد چه چيزی بايد نمايش داده شود؟ بسته به مرورگری که‬ ‫استفاده ميکنيد نتيجه نمايش متفاوت است و مثل در مثال زير خانه خالی جدول بدون مرز نمايش داده‬ ‫خواهد شد‪:‬‬

‫کد اچتمل جدولی با دو سطر نمايش جدول روبرو توسط‬ ‫مرورگر‬ ‫و دو ستون‬ ‫<‪>"table border="1" dir="rtl‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<1‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<2‬‬ ‫<‪>tr/‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<1‬‬ ‫<‪>td<>/td‬‬ ‫<‪>tr/‬‬ ‫<‪>table/‬‬

‫رديف ‪،1‬‬ ‫سلول ‪1‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪1‬‬

‫رديف ‪،1‬‬ ‫سلول ‪2‬‬

‫در اينگونه موارد برای رفع مشکل کافی است که از ‪ );non-breaking space ) ‬يا همان نويسه و‬ ‫کاراکتر قاصله و بلنک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش‬ ‫خواهد داد‪:‬‬

‫کد اچتمل جدولی با دو سطر نمايش جدول روبرو‬ ‫توسط مرورگر‬ ‫و دو ستون‬ ‫<‪>"table border="1" dir="rtl‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<1‬‬ ‫<‪>td‬رديف ‪ ،1‬سلول ‪>td/<2‬‬ ‫<‪>tr/‬‬ ‫<‪>tr‬‬ ‫<‪>td‬رديف ‪ ،2‬سلول ‪>td/<1‬‬ ‫<‪>td< >/td‬‬ ‫<‪>tr/‬‬ ‫<‪>table/‬‬

‫رديف ‪،1‬‬ ‫سلول ‪1‬‬ ‫رديف ‪،2‬‬ ‫سلول ‪1‬‬

‫رديف ‪،1‬‬ ‫سلول ‪2‬‬

‫توجه داشته باشيد که اينبار مرزهای خانه خالی جدول بدرستی ترسيم گرديده اند‪.‬‬

‫چند نکته اساسی در مورد جداول‪:‬‬ ‫در جداول‪ ،‬رديفها‪ ،‬خانه ها و سر ستونها از تعداد‬ ‫زيادی از شناسه ها ميتوانيد استفاده کنيد که شرح‬ ‫همگی آنها از حوصله اين دوره مقدماتی خارج است و‬ ‫توصيه ميشود که از مثالهای زير و جدول واقع در انتهای‬ ‫اين صفحه برای مطالعه هر چه بيشتر در مورد جزئيات‬ ‫شناسه ها استفاده شود‪.‬‬ ‫شناسه ‪ dir‬قابل استفاده در بسياری از تگها ( مثل‬ ‫‪ ) table ، tr ، td ، th‬ميباشد‪ .‬با کمک شناسه ‪ dir‬و‬ ‫مقدار ‪ rtl‬برای آن‪ ،‬جهت نمايش متون فارسی از‬

‫"راست به چپ" تعيين ميگردد‪ .‬توجه داشته باشيد که‬ ‫مقدار شناسه ‪ dir‬به صورت موروثی از ‪ table‬به ‪ tr‬و‬ ‫‪ th‬و از ‪ tr‬و ‪ th‬به ‪ td‬خواهد رسيد‪.‬مثل برای تعيين‬ ‫مقدار ‪ rtl‬برای تمامی خانه های يک جدول کافی است‬ ‫که فقط شناسه مزبور را در تگ ‪ table‬قيد کنيد و نيازی‬ ‫به قيد آن در تمامی خانه های جدول نيست‪ .‬البته‬ ‫ميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص‬ ‫شناسه ‪ dir‬را موردی تعيين کنيد‪.‬‬ ‫مثالهای بيشتر‬ ‫مرز در جداول‬ ‫اين مثال کاربرد شناسه ‪ border‬را در نمايش جداول نشان ميدهد‪.‬‬ ‫تعيين جهت نمايش متن در خانه های يک جدول‬ ‫اين مثال کاربرد شناسه ‪ dir‬است در تعيين جهت نمايش متن در خانه های يک جدول‪.‬‬ ‫عنوان جداول و تگ ‪caption‬‬ ‫مثالی در مورد تگ ‪ caption‬در تعريف جداول‬ ‫توسعه سطری يا ستونی در جداول‬ ‫مثالی در مورد شناسه های ‪ colspan‬و ‪ rowspan‬در جداول‬ ‫جدولی با محتويات مختلف‬ ‫محتوی يک خانه جدول تقريبا ميتواند هر عنصر اچتملی باشد‪.‬‬ ‫فاصله گذاری بين خانه های جداول‬ ‫اين مثال نحوه ايجاد فاصله بين خانه های جدول را نشان ميدهد‪)cellspacing(.‬‬ ‫ليه گذاری خانه های جدول‬ ‫اين مثال نحوه ايجاد فاصله خالی بين خانه های جدول و مرز آنها را نشان ميدهد‪)cellpadding(.‬‬ ‫تعيين رنگ زمينه يا تصوير زمينه کل يک جدول‬ ‫تعيين رنگ زمينه يا تصوير زمينه سراسری جداول با کمک شناسه های ‪ bgcolor‬و ‪background‬‬ ‫تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه از جدول‬ ‫تعيين رنگ زمينه يا تصوير زمينه در خانه های جداول با کمک شناسه های ‪ bgcolor‬و ‪background‬‬ ‫تراز بندی محتوا در خانه های جداول‬ ‫اين مثال نحوه ترازبندی محتوای خانه های جداول با کمک شناسه "‪ "align‬را نشان ميدهد‪.‬‬ ‫شناسه ‪ frame‬در جداول‬ ‫مثالی در مورد کاربرد شناسه "‪ "frame‬در المان ‪ table‬جهت تعيين شکل مرز جداول‪.‬‬ ‫تراز بندی محتوا در خانه های جداول‬ ‫اين مثال نحوه ترازبندی محتوای خانه های جداول با کمک شناسه "‪ "align‬و "‪ "valign‬را نشان ميدهد‪.‬‬

‫کاربرد‬ ‫تعريف جدول‬ ‫تعريف سرستون در‬ ‫جداول‬ ‫تعريف رديف ها در‬ ‫جداول‬ ‫تعريف سلول يا خانه‬ ‫های يک جدول‬

‫‪Purpose‬‬ ‫‪Start Tag‬‬ ‫‪Defines a table‬‬ ‫<‪
‫با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد‪ .‬در اين درس‬ ‫با مفاهيم فريم ( ‪ ) Frame‬و تگ های مربوطه مخصوصا تگهای ‪ Frame‬و ‪ Frameset‬آشنا خواهيد شد‪.‬‬

‫مثالها‪:‬‬ ‫مجموعه فريمهای عمودی‬ ‫مثالی در مورد ايجاد مجموعه فريمهای عمودی توسط تگ های ‪ frameset‬و ‪frame‬‬ ‫مجموعه فريمهای افقی‬ ‫مثالی در مورد ايجاد مجموعه فريمهای افقی توسط تگ های ‪ frameset‬و ‪frame‬‬ ‫مثالهای بيشتر‬

‫فريمها (‪)Frames‬‬ ‫با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد‪ .‬هر صفحه يا‬ ‫دريچه‪ ،‬فريم (‪ )frame‬ناميده شده و فريمها کامل مستقل از هم ميباشند‪ .‬محتوای هر فريم هم ميتواند هر‬ ‫صفحه يا وب سايتی باشد‪ .‬هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی‬ ‫استفاده از آنها در کارهای حرفه ای توصيه نميشود‪(.‬به جز در موارد خاص)‬ ‫معايب استفاده از فريمها‪:‬‬

‫•موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند‪.‬‬ ‫•چاپ و ‪ print‬صفحاتی که از فريمها استفاده ميکنند مشکل است‪.‬‬ ‫•صفحاتی که از فريمها استفاده ميکنند معمول مبتدی بودن طراح سايت را‬ ‫نشان ميدهد!!‬ ‫تگ فريم ست (‪)Frameset‬‬ ‫•تگ <‪ >frameset‬به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد‪.‬‬

‫•هر تگ <‪ >frameset‬مجموعه ای از رديفها يا ستونها را تعريف ميکند‪.‬‬ ‫•داخل هر فريم ميتواند ‪ frameset‬ديگری قرار دهيد‪.‬‬ ‫•با کمک شناسه های ‪ rows‬و ‪ cols‬ابعاد و نسبت هر فريم تعيين ميگردد‪.‬‬ ‫•تگ <‪ >frameset‬درون تگهای <‪ >html‬و <‪ >/html‬قرار ميگيرد‪(.‬نيازی‬ ‫به قيد تگ ‪ body‬هنگام معرفی يک ‪ frameset‬نيست‪).‬‬ ‫تگ فريم (‪)Frame‬‬ ‫•کاربرد اصلی تگ <‪ >frame‬تعيين ‪ source‬يا نام صفحه ای است که بايد در‬ ‫فريم ها نمايش داده شود‪.‬‬ ‫مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند‪ .‬از سمت چپ فريم‬ ‫اول ‪ 75‬درصد و فريم دوم ‪ 25‬درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد‪ .‬در ادامه‬ ‫تعريف محتويات هر فريم‪ ،‬درون فريم اول فايل "‪ "frame_left.html‬و درون فريم دوم فايل "‬ ‫‪ "frame_right.html‬نمايش داده خواهد شد‪.‬‬ ‫<‪>html‬‬ ‫<‪>"frameset cols="75%,25%‬‬ ‫<‪>"frame src="frame_left.html‬‬ ‫<‪>"frame src="frame_right.html‬‬ ‫<‪>frameset/‬‬ ‫<‪>html/‬‬ ‫برای نمايش مثال بال به سه فايل نياز داريد‪ frame_left.html ،frame_right.html ،‬و فايل کد اچتمل‬ ‫بال‪.‬‬

‫شناسه های ‪ cols‬و ‪ rows‬در تگ ‪frameset‬‬

‫شناسه مقدار شناسه‬ ‫عرض پنجره بر اساس پيکسل‪ ،‬درصد يا‬ ‫‪cols‬‬ ‫علمت *‬ ‫عرض پنجره بر اساس پيکسل‪ ،‬درصد يا‬ ‫‪rows‬‬ ‫علمت *‬

‫کارکرد‬ ‫تعيين تعداد و اندازه ستونها در فريم‬ ‫ست‬ ‫تعيين تعداد و اندازه رديفها در فريم‬ ‫ست‬

‫مثالهای زير را در نظر بگيريد‪:‬‬

‫مثال ‪2‬‬ ‫<‪>html‬‬ ‫<‪>"frameset cols="25%,50%,25%‬‬ ‫<‪>"frame src="frame_3.html‬‬ ‫<‪>"frame src="frame_2.html‬‬ ‫<‪>"frame src="frame_1.html‬‬ ‫<‪>frameset/‬‬ ‫<‪>html/‬‬

‫نمايش توسط مرورگر‬

‫مثال ‪1‬‬ ‫<‪>html‬‬ ‫<‪>"frameset cols="*,200‬‬ ‫<‪>"frame src="frame_2.html‬‬ ‫<‪>"frame src="frame_1.html‬‬ ‫<‪>frameset/‬‬ ‫<‪>html/‬‬

‫نمايش توسط مرورگر‬

‫در مثال يک عرض فريم اول از سمت راست ‪ 200‬پيکسل تعيين شده و بقيه عرض پنجره که با علمت *‬ ‫مشخص ميشود به فريم دوم اختصاص خواهد يافت‪.‬‬ ‫در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است‪.‬‬ ‫در مورد شناسه ‪ rows‬دقيقا قراردادهای بال برقرارند‪.‬‬

‫نکات کاربردی‪:‬‬ ‫* اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (‪ )resize‬خواهند‬ ‫بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام ‪ noresize‬در داخل تگ <‬ ‫‪ >frame‬استفاده شود‪ .‬در اين مثال ‪ noresize‬نميتوانيد که فريمها را تغيير اندازه بدهيد‪.‬‬ ‫* اگر ميخواهيد که فريمها ‪ scroll‬نشوند (بال و پايين بردن صفحه توسط ماوس) بايد در تگ ‪ frame‬مقدار‬ ‫شناسه ‪ scrolling‬را برابر "‪ "no‬قرار دهيد‪( .‬مقادير ممکن "‪ "yes" ، "no‬و "‪ "auto‬ميباشند‪ ).‬در اين‬ ‫مثال ‪ scrolling‬صفحات قابل ‪ scroll‬نيستند‪.‬‬ ‫* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ ‪ frame‬مقدار شناسه ‪ frameborder‬را‬ ‫برابر "‪ "0‬قرار دهيد‪( .‬مثال ‪) frameborder‬‬ ‫* درصد بسيار کمی از مرورگرها از تگهای مربوط به ‪ frame‬و ‪ frameset‬پشتيبانی نميکنند‪ .‬برای اين‬ ‫موارد بايد از تگ <‪ >noframes‬جهت نمايش صفحه جايگزين استفاده شود‪.‬‬

‫مثالهای بيشتر‬ ‫مجموعه فريمهای مرکب‬ ‫مثالی در مورد ايجاد مجموعه ای مرکب از فريمهای عمودی و افقی‬ ‫مثالی کاربردی در مورد فريمها‬ ‫در اين مثال کاربردی با کمک سه فريم امکان نمايش صفحات مختلف به آسانی فراهم ميشود‪ .‬فريم افقی‬ ‫و بالئی سرتيتر و نام اصلی سايت را نمايش خواهد داد و فريم سمت راست لينکهای مهم صفحه را در بر‬ ‫گرفته و امکان ‪ navigation‬را فراهم ميسازد و نهايتا فريم اصلی و سمت چپ صفحات مختلف سايت را‬ ‫به نمايش خواهد گذاشت‪ .‬توجه داشته باشيد که برای اين مثال حداقل به يک فايل برای معرفی مجموعا‬ ‫فريمها(‪ )frameset‬و سه صفحه اچتمل برای فريمهای بالئی‪ ،‬سمت چپ و راست احتياج خواهد بود‪.‬‬ ‫فريمهای شناور و يا درجا (‪)Inline frame‬‬ ‫مثالی در مورد فريمهای شناور و درجا (‪ ،)iframe‬فريمی درون يک صفحه اچتمل‬ ‫مثالی کاربردی در مورد فريمهای درجا (‪)Inline frame‬‬ ‫مثالی کاربردی در مورد فريمهای شناور و درجا (‪ )iframe‬با کمک ‪ 7‬صفحه اچتمل مختلف‬ ‫شوخی با فريم های شناور‬ ‫مثالی در مورد نمايش درايو لوکال (مثل ‪ \:c‬بازديدکنندگان سايت به آنها‬ ‫فريمها و پيوندهای نامگذاری شده‬ ‫مثالی کامل در مورد فريمها و پيوندهای نامگذاری شده و نحوه استفاده از آنها در طراحی سايتی ساده‬ ‫متشکل از چهار فايل اچتمل‬ ‫فريمها و پيوندهای نامگذاری شده کامل‬ ‫همان مثال بال در صفحه کامل مرورگر با شناسه های کامل در تگ ‪frame‬‬

‫تگ های فريم‬

‫‪Purpose Start Tag‬‬ ‫<‪frameset‬‬ ‫‪Defines a set of frames‬‬ ‫>‬ ‫‪Defines a sub window )a‬‬ ‫<‪>frame‬‬ ‫‪)frame‬‬ ‫‪Defines a noframe section for‬‬ ‫<‪noframes‬‬ ‫‪browsers that do not handle‬‬ ‫>‬ ‫‪frames‬‬ ‫‪Defines an inline sub window‬‬ ‫<‪>iframe‬‬ ‫‪))frame‬‬

‫کاربرد‬ ‫تعريف مجموعه ای از فريم ها‬ ‫تعريف يک فريم‬ ‫تعريف جايگزين برای مرورگرهائي‬ ‫که از فريم ها پشتيبانی نميکنند‪.‬‬ ‫تعريف فريم های درجا (‪)inline‬‬

‫فهرستها ( ‪) Lists‬‬ ‫اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهای مرتب(‪ ، )ordered‬نامرتب(‬ ‫‪ )unordered‬و فهرستهای تعريفی(‪ )definition lists‬و تگ های مربوطه يعنی ‪ li ، ol ، ul ، dl ، dt‬و ‪dd‬‬ ‫آشنا خواهد کرد‪.‬‬

‫مثالها‪:‬‬ ‫فهرستهای نامرتب‬ ‫مثالی بسيار ساده در مورد فهرستهای نامرتب‬ ‫فهرستهای مرتب‬ ‫مثالی در مورد فهرستهای مرتب و نحوه نمايش متون فارسی‬ ‫مثالهای بيشتر‬

‫فهرستهای نامرتب(‪)unordered list‬‬ ‫فهرستهائی هستند از يک يا چند قلم اطلعات که معمول با دايرهای کوچک و سياه رنگ در شروع نمايش‬ ‫داده ميشوند‪ .‬يک فهرست از نوع نامرتب با تگ <‪ >ul‬شروع شده و هر رقم اطلعات با تگ <‪>li‬‬ ‫مشخص ميگردد‪.‬‬

‫‪HTML code‬‬ ‫<‪>ul‬‬ ‫<‪>li/li‬‬ ‫<‪>li/li‬‬ ‫<‪>li/li‬‬ ‫<‪>ul/‬‬ ‫<‪> "ul dir="rtl‬‬ ‫<‪>li‬قهوه<‪>li/‬‬ ‫<‪>li‬شي<‪>li/‬‬ ‫<‪>li‬چای<‪>li/‬‬ ‫<‪>ul/‬‬

‫نمايش توسط مرورگر‬ ‫•‪Red‬‬ ‫•‪Blue‬‬ ‫•‪Green‬‬ ‫•قهوه‬ ‫•شير‬ ‫•چای‬

‫داخل تگهای <‪ >li‬ميتوانيد از پاراگرافها‪ ،‬تگهای ‪ ، br‬تصاوير و حتي فهرستهای ديگر استفاده کنيد‪ .‬به‬ ‫شناسه ‪ dir‬در مثال بال توجه کنيد‪ ،‬امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به‬ ‫فهرستها ممکن ميباشد‪.‬‬

‫فهرستهای مرتب(‪)ordered list‬‬ ‫اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلم اطلعاتی از‬ ‫اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند‪ .‬يک فهرست از نوع مرتب با تگ <‪ >ol‬شروع‬ ‫شده و همانند فهرستهای نامرتب هر رقم اطلعات با تگ <‪ >li‬مشخص ميگردد‪.‬‬

‫نمايش توسط مرورگر‬ ‫‪Red.1‬‬ ‫‪Blue.2‬‬

‫‪HTML code‬‬ ‫<‪>ol‬‬ ‫<‪>li/li‬‬ ‫<‪>li/li‬‬ ‫<‪>li/li‬‬ ‫<‪>ol/‬‬ ‫<‪> "ol dir="rtl‬‬ ‫<‪>li‬قهوه<‪>li/‬‬ ‫<‪>li‬شي<‪>li/‬‬ ‫<‪>li‬چای<‪>li/‬‬ ‫<‪>ol/‬‬

‫‪Green.3‬‬ ‫‪.1‬قهوه‬ ‫‪.2‬شير‬ ‫‪.3‬چای‬

‫داخل تگهای <‪ >li‬ميتوانيد از پاراگرافها‪ ،‬تگهای ‪ ، br‬تصاوير و حتي فهرستهای ديگر استفاده کنيد‪ .‬به‬ ‫شناسه ‪ dir‬در مثال بال توجه کنيد‪ ،‬امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به‬ ‫فهرستها ممکن ميباشد‪.‬‬

‫فهرستهای تعريفی(‪)definition list‬‬ ‫فهرست تعريفی فهرستی است از اصطلح ها و تشريح و توصيف آنها‪.‬‬ ‫فهرستهای تعريفی با <‪ >dl‬شروع شده و هر ذوج اصطلح و تعريف مربوط به آن با تگهای <‪ >dt‬و <‬ ‫‪ >dd‬تعريف ميشوند‪.‬‬

‫‪HTML code‬‬ ‫<‪>dl‬‬ ‫<‪>dt/dt‬‬ ‫<‪>dd/dd‬‬ ‫<‪>dt/dt‬‬ ‫<‪>dd/dd‬‬ ‫<‪>dt/dt‬‬ ‫<‪>dd/dd‬‬ ‫<‪>dl/‬‬ ‫>‬

‫<‪"dl dir="rtl‬‬ ‫<‪> dt‬مقدمه<‪>dt/‬‬ ‫<‪>dd‬خلصه ای از مقدمه<‪>dd/‬‬ ‫<‪>dt‬فصل ‪>dt/<2‬‬ ‫<‪>dd‬خلصه ای از فصل ‪>dd/<1‬‬ ‫<‪>dt‬فصل ‪>dt/<2‬‬ ‫<‪>dd‬خلصه ای از فصل ‪>dd/<2‬‬ ‫<‪>dl/‬‬

‫نمايش توسط مرورگر‬ ‫‪HTTP‬‬ ‫‪Hypertext Transfer‬‬ ‫‪Protocol‬‬ ‫‪FTP‬‬ ‫‪File Transfer Protocol‬‬ ‫‪IP‬‬ ‫‪Internet Protocol‬‬ ‫مقدمه‬ ‫خلصه ای از مقدمه‬ ‫فصل ‪1‬‬ ‫خلصه ای از فصل ‪1‬‬ ‫فصل ‪2‬‬ ‫خلصه ای از فصل ‪2‬‬

‫داخل تگهای تشريح يعنی <‪ >dd‬ميتوانيد از پاراگرافها‪ ،‬تگهای ‪ ، br‬تصاوير و حتي فهرستهای ديگر استفاده‬ ‫کنيد‪ .‬به شناسه ‪ dir‬در مثال بال توجه کنيد‪ ،‬امکان تعيين سمت و جهت نمايش متون در تمامی تگهای‬ ‫مربوط به فهرستها ممکن ميباشد‪.‬‬

‫مثالهای بيشتر‬ ‫انواع فهرستهای مرتب‬ ‫مثالی در مورد فهرستهای مرتب به همراه استفاده از شناسه ‪ type‬جهت تعيين نوع نمايش فهرست‬ ‫انواع فهرستهای نامرتب‬ ‫مثالی در مورد فهرستهای نامرتب به همراه استفاده از شناسه ‪ type‬جهت تعيين نوع نمايش فهرست‬ ‫فهرستهای تودرتو‬ ‫مثالی در مورد فهرستهای ترکيبی‪ .‬اعضای فهرست ميتوانند از فهرستهای ديگر تشکيل شوند‪.‬‬ ‫فهرستهای تعريفی‬ ‫مثالی در مورد فهرستهای تعريفی به همراه استفاده از شناسه ‪dir‬‬

‫تگهای فهرست‬

‫‪Start‬‬ ‫‪Tag‬‬ ‫<‪>ol‬‬ ‫<‪>ul‬‬ ‫<‪>li‬‬ ‫<‪>dl‬‬ ‫<‪>dt‬‬ ‫<‪>dd‬‬

‫‪Purpose‬‬

‫کاربرد‬

‫‪ Defines an ordered list‬تعريف‬ ‫‪ Defines an unordered list‬تعريف‬ ‫تعريف‬ ‫‪Defines a list item‬‬ ‫‪ Defines a definition list‬تعريف‬ ‫‪ Defines a definition term‬تعريف‬ ‫تعريف‬ ‫‪Defines a definition‬‬ ‫تعريفی‬ ‫‪description‬‬

‫فهرستهای مرتب‬ ‫فهرستهای نامرتب‬ ‫يک آيتم و قلم از يک فهرست‬ ‫فهرستهای تعريفی‬ ‫اصطلح در فهرستهای تعريفی‬ ‫معنی و شرح اصطلح در فهرستهای‬

‫فرمها ( ‪) Forms‬‬ ‫از طريق استفاده از عنصر <‪ >form‬و چند تگ مرتبط قادر به دريافت اطلعات از بازديدکنندگان‬ ‫صفحاتتان و يا تبادل اطلعات بين صفحات مختلف خواهيد شد‪ .‬با کمک اين گروه از تگ ها قادر به نمايش‬ ‫باکسهای ورود اطلعات متن (‪ ، )text fields‬چک باکسها (‪ ، )check-boxes‬راديو باتونها (‪radio-‬‬ ‫‪ )buttons‬و ‪ ...‬شده و همچنين امکان گذاشتن دکمه های ارسال (‪ )submit button‬و يا حذف (‪)reset‬‬ ‫را خواهيد داشت‪ .‬اين فصل با شرح تگ های ‪ form‬و ‪ input‬و ‪ ...‬به چگونگی ايجاد ارتباط با بازديدکنندگان‬ ‫و گرفتن اطلعات از آنها بصورت لتين و يا فارسی خواهد پرداخت‪.‬‬ ‫توجه داشته باشيد که برای پردازش اطلعات دريافتی از کاربر بايد با يکی از زبانهای ‪ cgi‬از قبيل ‪ASP،‬‬ ‫‪ perl، PHP، CFM ، JSP‬يا ‪ Java‬آشنائی داشته باشيد‪ .‬مثالهای ‪ cgi‬مدرسه وب از ربان اسکريپت ‪Perl‬‬ ‫استفاده ميکنند‪.‬‬

‫مثالها‪:‬‬ ‫وروديهای متن يا ‪Text fields‬‬ ‫مثالی ساده در مورد ايجاد ‪ text field‬ها ‪ .‬با کمک ‪ text field‬ها کاربران قادر به وارد کردن و تايپ متن‬ ‫خواهند شد‪.‬‬

‫وروديهای رمز عبور يا ‪Password fields‬‬ ‫مثالی ساده در مورد ايجاد ‪ password field‬ها ‪ .‬با کمک ‪ password field‬ها کاربران قادر به ورود رمز‬ ‫عبور يا پسورد خواهند شد‪.‬‬ ‫مثالهای بيشتر‬

‫فرمها (‪)Forms‬‬ ‫تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلعات پرداخته اند و هيچکدام به گرفتن و اخذ‬ ‫اطلعات از کاربر نپرداخته اند‪ .‬فرمها که با تگ <‪ >form‬معرفی ميشوند‪ ،‬طراح سايت را قادر به جمع‬ ‫آوری و اخذ اطلعات از بازديدکننده سايت خواهند کرد‪ .‬عنصر فرم و گروهی از عناصر و تگهای درون آن به‬ ‫دريافت و ارسال اطلعات به سمت وب سرور کمک خواهند کرد و لزم به ذکر است که تمامی تگهای‬ ‫مربوط به فرمها بايد درون تگهای <‪ >form‬و <‪ >/form‬قرار ميگيرند‪.‬‬ ‫درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک‬ ‫سطری(‪ ،)text fields‬عناصر ورود متنهای چند سطری (‪ ،)Textarea‬منوهای ‪ drop-down‬و ‪radio‬‬ ‫‪ buttons‬و ‪...‬‬

‫تگ ‪Input‬‬ ‫به عنوان پر مصرف ترين تگ مربوط به ورود اطلعات بايد از تگ <‪ >input‬نام برد‪ .‬در اين تگ شناسه ای‬ ‫به نام ‪ type‬به تعيين نوع اطلعات ورودی اختصاص دارد‪ .‬مقادير ممکن برای اين شناسه به قرار زيرند‪:‬‬ ‫‪text , checkbox , radio , password , hidden , submit , reset , button , file , image‬‬ ‫در ادامه به شرح بعضی از ‪ type‬های کاربردی خواهيم پرداخت‪:‬‬

‫وروديهای متن (‪)Text Fields‬‬ ‫اگر ميخواهيد که بازديدکننده اطلعاتی از قبيل متن‪ ،‬اعداد و ‪ ...‬را وارد کند از شناسه ای با مقدار "‪"text‬‬ ‫استفاده ميشود‪.‬‬

‫کد اچتمل‬ ‫<‪>form‬‬ ‫‪:First name‬‬ ‫<‪>"input type="text" name="firstname‬‬ ‫<‪>br‬‬ ‫‪:Last name‬‬ ‫<‪>"input type="text" name="lastname‬‬ ‫<‪>form/‬‬ ‫<‪> "form dir="rtl‬‬ ‫نـــــــــــــــام‪:‬‬ ‫<‪>"input type="text" name="firstname‬‬ ‫<‪>br‬‬ ‫نام خانوادگی‪:‬‬ ‫<‪>"input type="text" name="lastname‬‬ ‫<‪>form/‬‬

‫نمايش توسط مرورگر‬ ‫‪:First name‬‬ ‫‪:Last name‬‬

‫نـــــــــــــــام‪:‬‬ ‫نام خانوادگی‪:‬‬

‫توجه داشته باشيد که تگ <‪ >form‬چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط‬ ‫مرورگر نمايش داده خواهند شد‪ .‬در مثال فارسی بال به شناسه ‪ dir‬و مقدار ‪ rtl‬آن توجه داشته باشيد‪.‬لزم‬ ‫به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه ‪ 20‬کاراکتر را در نظر‬

‫ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام ‪size‬‬ ‫استفاده کنيد‪.‬‬

‫وروديهای ‪Radio Buttons‬‬ ‫اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند‪ ،‬از مقدار "‪ "radio‬برای‬ ‫شناسه ‪ type‬استفاده کنيد‪:‬‬

‫نمايش توسط‬ ‫مرورگر‬

‫کد اچتمل‬ ‫<‪>form‬‬ ‫<‪input type="radio" name="sex" value="male"< Male‬‬ ‫<‪>br‬‬ ‫<‪input type="radio" name="sex" value="female"< Female‬‬ ‫<‪>form/‬‬ ‫<‪>"form dir="rtl‬‬ ‫<‪ >"input type="radio" name="sex" value="male‬مرد‬ ‫<‪>br‬‬ ‫<‪ >"input type="radio" name="sex" value="female‬زن‬ ‫<‪>form/‬‬

‫‪Male‬‬ ‫‪Female‬‬

‫مرد‬ ‫زن‬

‫همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است‪.‬‬

‫وروديهای ‪Checkboxes‬‬ ‫اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند‪ ،‬از مقدار "‬ ‫‪ "checkbox‬برای شناسه ‪ type‬استفاده کنيد‪:‬‬

‫کد اچتمل‬ ‫<‪>form‬‬ ‫<‪>"input type="checkbox" name="bike‬‬ ‫‪I have a bike‬‬ ‫<‪>br‬‬ ‫<‪>"input type="checkbox" name="car‬‬ ‫‪I have a car‬‬ ‫<‪>form/‬‬ ‫<‪>"form dir="rtl‬‬ ‫<‪>"input type="checkbox" name="bike‬‬ ‫دوچرخه دارم‬ ‫<‪>br‬‬ ‫<‪>"input type="checkbox" name="car‬‬ ‫ماشي دارم‬ ‫<‪>form/‬‬

‫نمايش توسط مرورگر‬ ‫‪I have a bike‬‬ ‫‪I have a car‬‬

‫دوچرخه دارم‬ ‫ماشين دارم‬

‫شناسه ‪ Action‬و دکمه ‪ Submit‬در فرمها ( & ‪Form's Action Attribute‬‬ ‫‪)Submit Button‬‬ ‫در فرمها برای ارسال اطلعات کسب شده از دکمه ای به نام ارسال يا ‪ Submit Button‬استفاده ميشود‬ ‫و در اثر کليک کاربر بروی اين دکمه "‪ ، "Submit‬اطلعات درون فرم به فايلی ديگر ارسال خواهند شد‪.‬‬ ‫برای تعيين مقصد ارسال اطلعات بايد درون تگ ‪ form‬از شناسه ای به نام ‪ action‬استفاده کنيد‪ .‬مقدار‬ ‫شناسه ‪ action‬آدرس يا ‪ url‬فايلی است که به دريافت و سپس پردازش اطلعات دريافتی خواهد پرداخت‪.‬‬ ‫معمول فايلهای بخش ‪ action‬برنامه ها و اسکريپت هائی نوشته شده با ربانهای ‪ cgi‬مانند ‪ASP، Perl ،‬‬ ‫‪ PHP‬و ‪ ...‬بوده و وظيفه آنها دريافت اطلعات فرمها و سپس پردازش آنها ميباشد‪.‬‬

‫تعيين مقدار "‪ "submit‬برای شناسه ‪ type‬سبب نمايش دکمه ‪ Submit‬يا ارسال خواهد گرديد‪.‬‬

‫کد اچتمل‬ ‫<‪>"form name="input" action="form_action.cgi‬‬ ‫‪:Username‬‬ ‫<‪>"input type="text" name="user‬‬ ‫<‪>"input type="submit" value="Submit‬‬ ‫<‪>form/‬‬ ‫<"‪form name="input" action="form_action.cgi‬‬ ‫‪>"dir="rtl‬‬ ‫نام کاربر‬ ‫<‪>"input type="text" name="user‬‬ ‫<‪>"input type="submit" value="Submit‬‬ ‫<‪>form/‬‬

‫نمايش توسط مرورگر‬ ‫‪:Username‬‬

‫نام کاربر‬

‫در مثال بال در باکس ورودی متن‪ ،‬کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد‪ .‬مرورگر به محض‬ ‫کليک دکمه ارسال‪ ،‬اطلعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه‬ ‫‪ action‬تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان ‪ Perl‬با نام ‪ form_action.cgi‬در‬ ‫سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت‪.‬‬

‫ورود متن فارسی در عناصری مانند ‪ Text field‬يا ‪:Text area‬‬

‫همانطور که در مثالهای بال مشاهده کردید در مورد المانهای ‪ Text field‬و ‪ Textarea‬با‬ ‫کمک شناسه ‪ dir‬میتوان سمت و جهت ورود اطلعات را "از راست به چپ" تعیین کنید‪.‬‬ ‫ولی اگر کاربری ویندوز فارسی نداشته باشد‪ ،‬از کامپیوترهای مکینتاش استفاده کند و یا‬ ‫سیستمش را فارسی نکرده باشد قادر به ورود اطلعات به زبان فارسی نخواهد بود و‬ ‫نویسه های تایپ شده لتین خواهند بود!‪ ،‬در اینگونه موارد چه باید کرد؟‬ ‫معمول برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو‬ ‫روش زیر استفاده میکنند‪:‬‬ ‫استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی قابل‬ ‫استفاده توسط دیگران نیست!!‬ ‫استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی ‪JavaScript‬‬ ‫قابل مشاهده و استفاده توسط دیگران است!‬ ‫مدرسه وب بر اساس دستورالعملهای "پروژه فارسی وب" از روش دوم استفاده کرده و از کد جاوا‬ ‫اسکریپت فراهم شده توسط این پروژه استفاده ميکند‪ .‬مثال زير نحوه استفاده از کد فارسی ساز جاوا‬ ‫اسکریپتی مذکور را شرح خواهد داد‪:‬‬ ‫فارسی ساز جاوا اسکریپتی‬ ‫مثالی در مورد نحوه استفاده از فارسی ساز جاوا اسکریپتی در یک فرم متشکل از ‪ Textfield‬ها‬

‫مثالهای بيشتر‬ ‫حالتهای مختلف ورودی ‪Input‬‬ ‫در تگ ‪ input‬و با کمک شناسه ‪ type‬و مقادير مختلف برای آن ميتوان انواع مختلف اطلعات را از وبگرد‬ ‫گرفت‪.‬‬ ‫‪Checkboxes‬‬ ‫مثالی در مورد نحوه تعريف فرمی متشکل از ‪ Checkbox‬ها‬

‫‪Radiobuttons‬‬ ‫مثالی در مورد نحوه تعريف فرمی متشکل از ‪ Radiobutton‬ها‬ ‫فهرست کرکره ای ساده‬ ‫مثالی در مورد نحوه تعريف فرمی متشکل از ‪ drop down box‬ها‬ ‫فهرست کرکره ای ديگر‬ ‫مثالی در مورد نحوه تعريف فرمی متشکل از ‪ drop down box‬ها با تعيين پيش گزينه‬ ‫‪Textarea‬‬ ‫مثالی در مورد نحوه تعريف فرمی متشکل از ‪ ، Textarea‬ناحيه ای برای ورود بيش از يک سطر متن‬ ‫(نکته‪ :‬استفاده از اديتور ما برای اين مثال امکان پذير نيست! اگر گفتيد چرا!؟)‬ ‫تعريف فرمی با کمک دکمه يا ‪button‬‬ ‫مثالی در مورد نحوه تعريف فرمی با کمک دکمه يا ‪button‬‬ ‫ترسيم مرز در اطراف فرم‬ ‫مثالی در مورد نحوه تعريف فرمی دلخواه و ترسيم مرزی بدور آن به همراه تعيين عنوانی برای فرم با‬ ‫کمک عنصر ‪Fieldset‬‬ ‫ارسال ايميل با کمک فرمها‬ ‫مثالی در مورد نحوه ارسال ايميل با کمک فرمها‬ ‫ساختن فهرستی از سايتهای مورد علقه‬ ‫مثالی در مورد نحوه استفاده از تگ فرم و منوهای کرکره ای و کمی جاوا اسکريپت برای ساخت فهرستی‬ ‫از سايتها‬

‫تگهای فرم‬

‫کاربرد‬ ‫‪Purpose Start Tag‬‬ ‫تعريف فرم ورود اطلعات‬ ‫<‪Defines a form for user input >form‬‬ ‫تعريف ورودی از نوع ‪Input‬‬ ‫<‪Defines an input field >input‬‬ ‫<‪ Defines a text-area )a multi-line textarea‬تعريف ورودی متن چند سطری يا‬ ‫‪text-area‬‬ ‫‪)text input control‬‬ ‫>‬ ‫تعريف برچسب يا ‪label‬‬ ‫<‪Defines a label to a control >label‬‬ ‫تعريف ‪fieldset‬‬ ‫<‪Defines a fieldset >fieldset‬‬ ‫<‪ Defines a caption for a fieldset >legend‬تعريف عنوان برای ‪ fieldset‬ها‬ ‫تعريف فهرستهای انتخابی يا ‪drop-‬‬ ‫‪Defines a selectable list )a‬‬ ‫<‪>select‬‬ ‫‪down box‬‬ ‫‪)drop-down box‬‬ ‫<‪optgroup‬‬ ‫تعريف ‪ option group‬ها‬ ‫‪Defines an option group‬‬ ‫>‬ ‫‪ Defines an option in the drop‬تعريف گزينه ای از ‪drop-down‬‬‫<‪>option‬‬ ‫‪ box‬ها‬ ‫‪down box‬‬ ‫تعريف دکمه فشاری‪ ،‬متفاوت با‬ ‫<‪Defines a push button >button‬‬ ‫‪ button‬تگ ‪input‬‬

‫تصاوير ( ‪) Images‬‬ ‫در اين درس با تگ ‪ ، img‬شناسه ‪ src‬و ‪ ، alt‬تگهای ‪ Map‬و ‪ Area‬و چگونگی نمايش تصاوير و همچنين‬ ‫تنظيم محل آنها در سندهای اچتمل آشنا خواهيد شد‪.‬‬

‫مثالها‪:‬‬ ‫درج تصوير‬ ‫نحوه درج تصاوير با کمک تگ ‪img‬‬ ‫درج تصويری واقع در فضای آدرسی ديگر‬ ‫درج تصويری واقع در دايرکتوريی غير از آدر س صفحه اچتمل و يا تصويری واقع در فضای آدرسی ديگر‬ ‫سايتها‬ ‫مثالهای بيشتر‬

‫تگ ‪ img‬و شناسه ‪ src‬يا ‪source‬‬ ‫در زبان اچتمل تصاوير را با کمک تگ <‪ >img‬تعريف ميکنند‪ .‬تگ <‪ >img‬از نوع تگهای خالی است‪ ،‬بدين‬ ‫معنا که فقط دارای يک يا چند شناسه و ‪ attribute‬بوده و دارای تگ انتهائی يا <‪ >/img‬نيست‪.‬‬ ‫مهمترين شناسه برای درج و تعريف يک تصوير ‪ src‬يا ‪ source‬نام دارد و مقدار اين شناسه آدرس يا ‪URL‬‬ ‫تصوير ميباشد‪ .‬تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه‬ ‫اچتمل‪ ،‬در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند‪.‬‬

‫شکل ساده درج يک تصوير‪:‬‬ ‫<‪<"img src="url‬‬ ‫مقدار ‪ url‬آدرس اينترنتی تصوير ميباشد و مثل اگر تصويری که قرار است که در صفحه درج شود در همان‬ ‫دايرکتوری قرار دارد و نامش ‪ ، me.jpg‬کافی است که به جای ‪ url‬فقط نام تصوير يعنی ‪ me.jpg‬را‬ ‫بنويسيد و اگر تصوير در سايتی ديکر قرار دارد ‪ url‬کامل آنرا بنويسيد‪ .‬مثل تصوير لوگو سايت‬ ‫‪ google.com‬دارای ‪ url‬ی برابر ‪ http://www.google.com/images/logo.gif‬است‪.‬در اين ‪ url‬نام‬ ‫تصوير ‪ logo.gif‬بوده‪ ،‬در دايرکتوری ‪ images‬قرار داشته و روی وب سايت ‪ google.com‬قرار دارد‪.‬‬

‫شناسه های ‪ width‬و ‪ height‬در تگ ‪img‬‬ ‫کاربرد شناسه های ‪ width‬و ‪ height‬تعيين عرض و ارتفاع نمايش تصوير است‪ .‬اگر از اين شناسه ها‬ ‫استفاده نکنيد‪ ،‬مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد‪.‬‬ ‫با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و‬ ‫آنرا مثل کوچکتر‪ ،‬بزرگتر و يا کشيده تر نمايش دهيد‪ .‬مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح‬ ‫ميدهد‪:‬‬

‫<"‪img src="http://www.google.com/images/logo.gif‬‬ ‫‪< "width="276" height="110‬‬ ‫توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های ‪ width‬و ‪ height‬قيد کنيد‪ ،‬اينکار سبب کمک به‬ ‫مرورگر در تسريع شروع نمايش صفحه خواهد شد‪(.‬در واقع با قيد ابعاد تصوير‪ ،‬مرورگر قبل از لود تصوير‬

‫ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامی‬ ‫تصاوير مرورگر شروع به نمايش قالب و چارچوب کلی صفحه خواهد کرد‪).‬‬

‫شناسه ‪ Alt‬يا "‪ "alternate text‬يا متن جايگزين‬ ‫اگر مرورگر به هر دليلی نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائی باشد که فقط‬ ‫متن را نمايش ميدهند‪ ،‬متن و ‪ text‬ی که با کمک شناسه ‪ alt‬تعيين شده است نمايش داده خواهد شد‪.‬‬ ‫همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروی يک تصوير‪ ،‬متن تعيين شده توسط شناسه ‪alt‬‬ ‫نمايش داده خواهد شد‪ .‬با کمک ‪ alt‬اطلعات اضافی مربوط به تصوير قابل نمايش ميباشد‪.‬مثال زير نحوه‬ ‫درج تصويری را با قيد متن جايگزين آن شرح ميدهد‪:‬‬ ‫<‪<"img src="images/AkseAlaki_88_31.jpg" alt="Fake Pic‬‬

‫وبلگها و اضافه کردن تصاویر‪:‬‬ ‫اگر وبلگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است‬ ‫که پیش آید‪:‬‬ ‫الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در‬ ‫سایتی دیگر قرار دارد استفاده کنید‪ .‬در این حالت از آدرس مستقیم تصویر در شناسه‬ ‫‪ src‬استفاده کنید‪ ،‬مانند ‪:‬‬ ‫<‪img src="http://www.google.ca/images/hp0.gif" width=258‬‬ ‫‪> height=78‬‬ ‫در این مثال تصویر روی سایت ‪ google.ca‬قرار داشته و لزومی به ذخیره آن توسط‬ ‫شما نیست‪.‬‬ ‫ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است‪ .‬در این‬ ‫حالت چون اغلب سیستم های وبلگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا‬ ‫تصویرتان را با کمک ‪ FTP‬یا روشهای دیگر به روی سایتی دیگر منتقل کنید‪ .‬شرکتهای‬ ‫مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلعات و تصاویر در اختیار‬ ‫شما قرار میدهند و در یکی از سؤالهای این ‪ FAQ‬فهرست این شرکتها را میتوانید ببینید‪.‬‬ ‫بنابراین ابتدا فضائی در وب تهیه کرده‪ ،‬سپس تصویرتان را ‪ Upload‬کرده (با کمک ‪FTP‬‬ ‫یا روشهاس دیگر ) و سپس در شناسه ‪ src‬از تگ ‪ img‬آدرس جدید تصویر را قید کنید‪.‬‬ ‫چند نکته مهم‪:‬‬

‫•اگر در يک صفحه اچتمل از ‪ 10‬تصوير استفاده شده باشد‪ ،‬مرورگر بايد ‪11‬‬ ‫فايل را لود کند‪ (.‬خود صفحه به علوه ‪ 10‬تصوير)‬ ‫•استفاده از تصاوير‪ ،‬سرعت لود شدن صفحات را پايين می آورد‪.‬با احتياط از‬ ‫تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد‪.‬‬ ‫•لود تصويری با حجم ‪ 50‬کيلوبايت برای کسی که از مودمی با سرعت‬ ‫‪ 28kbps‬استفاده ميکند حداقل ‪ 15‬ثانيه طول خواهد کشيد‪.‬‬ ‫•برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير ‪Right click‬‬ ‫کرذه و سپس در بخش ‪ properities‬آدرس‪،‬ابعاد و ظرفيت تصوير را ببينيد‪.‬‬ ‫•برای ذخيره تصاوير در وب کافی است که روی تصوير ‪ Right click‬کرذه و‬ ‫سپس در بخش "‪ "Save picture as‬آنرا ذخيره کنيد‪.‬‬

‫مثالهای بيشتر‬ ‫تصاوير زمينه‬ ‫مثالی در مورد نحوه تعيين تصاوير زمينه با کمک شناسه ‪ background‬در تگ ‪body‬‬ ‫ترازبندی تصاوير‬ ‫اين مثال نحوه ترازبندی تصاوير در کنار متون را نشان ميدهد‪.‬‬ ‫تصاوير شناور در متن‬ ‫آزاد گذاشتن تصوير در سمت چپ يا راست‬ ‫نمايش تصاوير در ابعاد مختلف‬ ‫مثالی در مورد استفاده از شناسه های ‪ width‬و ‪ height‬و نمايش تصاوير در ابعاد مختلف‬ ‫نمايش متن جايگزين برای تصاوير‬ ‫مثالی در مورد استفاده از شناسه ‪alt‬‬ ‫استفاده از تصاوير هنگام ايجاد پيوند ها‬ ‫مثالی در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها‬ ‫ايجاد ‪ image map‬ها‬ ‫مثالی در مورد ايجاد ‪ . image map‬در اين مثال هر بخش از نواحی تعريف شده قابل کليک بوده و به‬ ‫پيوندی اختصاصی اشاره ميکند‪.‬‬

‫تگ های تصاوير‬

‫‪Start‬‬ ‫‪Tag‬‬ ‫درج تصوير‬ ‫<‪Defines an image >img‬‬ ‫تعريف ‪ Image map‬يا ؟؟؟‬ ‫<‪Defines an image map >map‬‬ ‫‪ Defines an area inside an image‬تعريف ناحيه ای در داخل ‪Image‬‬ ‫<‪>area‬‬ ‫‪map‬‬ ‫‪map‬‬ ‫‪Purpose‬‬

‫کاربرد‬