سرفصل مطالب : به کلس اچ تی ام ال مقدماتی خوش آمديد! يادگيری زبان 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
کاربرد