:سرفصل مطالب

به کالس اچ تی ام ال مقدماتی خوش آمديد!

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

style sheet استاندارد اچتمل بوده و نکته بسيار مهم اين نسخه جداسازی فرمت بندی و انتقال آن به 4 ها ميباشد. الزم به توضيح است که که تاکيد دروس و مقاالت اين راهنما بر فارسی نويسی مطابق

بهمراه مثالهایHTMLاستاندارد يونيکد بوده و اولين مجموعه دروس آموزشی ما شامل آموزش مقدماتی متعدد فارسی نويسی خواهد بود. ادامه اين بخش به شرح سرفصل مطالب ارائه شده خواهد پرداخت:

درس بعدی

سرفصل مطالب کالس اچتمل مقدماتی :

مقدمه & Elementsدر اين درس با ويژگيهای فايلهای اچتمل، اجزا تشکيل دهنده آن يعنی عناصر و تگ ها )

Tags .و نحوه ايجاد يک فايل ساده و نمايش آن در صفحه مرورگرتان آشنا خواهيد شد )

HTML & WWW ( ، اينترنت، مرورگرها وWorld Wide Webدر اين درس با مفاهيم وب ) تار عنکبوت جهانی يا

( و سرويسWeb Browsersاستانداردهای وب آشنا خواهيد شد. همچنين با تفاوتهای مرورگرهای وب ) ( آشنا خواهيد شد. Web Serversدهنده های وب )

( عناصرElements ) tags ها تشکيل ميشود و برای ايجاد عناصر از تگ ها يا elementيک متن و يا فايل اچتمل از عناصر يا

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

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

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

بپردازيد. فــارسی نويسی

در اين درس با فارسی نويسی، فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنالين و فارسیاين سايت آشنا خواهيد شد.

( فرمت دهیFormatting ) بودن و ياboldوظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ) مثال توپر و

آشنا خواهيد شد. همچنين يادformatingايتاليک بودن ( ميباشد و در اين درس با اين گروه از تگهای را ببينيد. page يا اصل کدهای اچتمل يک صفحه يا sourceخواهيد گرفت که چگونه

( نهادهاEntities ) ( اچتمل مانند )>( و يا )<( دارای معنی خاصی ) مثال نويسه >Characterگروهي از نويسه های )

شروع يک تگ را نشان ميدهد. ( در استاندارد اچتمل بوده و برای نمايش آنها در صفحاتتان مستقيما قابل چگونگیCharacter Entitiesمصرف نميباشند. در اين فصل با اين نويسه ها آشنا شده و با کمک

استفاده از اين گروه از نويسه ها را فرا خواهيد گرفت.

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

خواهيد شد.

( جداولTables ) در جداول وborder ، سلولها يا خانه ها، مرز يا row ( ، رديف يا Tableدر اين درس با مفاهيم جدول )

آشنا خواهيد شد. TABLE ، TD , TRعناصر مرتبط مخصوصا

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

شد.

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

( فرمهاForms ) ( قادر به دريافت اطالعات از بازديدکنندگان صفحاتتان و يا تبادلformاز طريق استفاده از تگ های فرم )

اطالعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود ( و ... شده وradio-buttons( ، راديو باتونها )check-boxes( ، چک باکسها )text fieldsاطالعات متن )

( را خواهيد داشت. اينreset( و يا حذف )submit buttonهمچنين امکان گذاشتن دکمه های ارسال ) و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطالعات ازinput و formفصل با شرح تگ های

آنها خواهد پرداخت.

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

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

چيست؟HTMLيک فايل

HTML .را "اچ تی ام ال" و يا اچتمل بخوانيد HTML برگرفته از حروف اول Hyper Text Markup Language .ميباشد يک فايلHTML فايلی از نوع text ميباشد که متشکل از markup tagها

ميباشد. مرورگر ياBrowser از روی markup tagها می فهمد که چگونه بايد صفحه

را نمايش بدهد. يک فايلHTML بايد دارای انشعاب htm و يا html .باشد يک فايلHTML فايلی از نوع textميباشد که با هر اديتور ساده ای قابل ايجاد

است. ( وظيفه اصلی تگ های اچتملmarkup tagsبيان چگونگی نمايش اطالعات )

ميباشد.

ميخواهيد که يک فايل اچتمل بسازيد؟

SimplaeText کارها از Mac را باز کرده )Notepadاگر از ويندوز مايکروسافت استفاده ميکنيد،

: ) . کنيد تايپ آن در را زير متن و کنند استفاده

<html><head><title<Title of page>/title>/<head><body>

This is my first html page. >b<This text is bold>/b>/<body>

/<html>

:\ ذخيره کنيد.c در درايو test.htmlسپس فايل را با نام مثال

تان ) معموال اينترنت اکسپلورر و يا نتسکيپ نويگيتور (Browerبرای ديدن فايل اچتمل باال در مرورگر يا فايل باال را از روی محل ذخيره شده بخوانيد. ) به آدرسFile/Open fileکافی است که از روی منوی

( c:\test.html توجه کنيد، مثال Addressفايل در قسمت يکی از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روی کامپيوتر شما

لينک فايلی شبيه فايل ذخيره شدهیکذخيره شده باشند و يا اينکه از اينترنت خوانده شوند. با کليک روی توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ) به

(. توجه کنيدAddressآدرس فايل در قسمت

توضيح مثال باال

< ميباشد. از روی اين تگ، مرورگر نوع متن يعنی اچتمل بودنش را يافته وhtmlاولين تگ مثال باال تگ >/< انتهای متن اچتمل را ميبابد.htmlاز روی >

" متن اچتملHeader information/< اطالعات شناسنامه ای يا "head< و تگ >headمتن بين تگ > صفحه کهTitle/< تيتر و يا title< و >titleبوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهای >

" ميباشد در باالی مرورگر نمايش داده خواهد شد. Title of pageدر اين مثال عبارت "

/< تنها اطالعاتی است که توسط مرورگرنمايش دادهbody< و انتهای آن يعنی تگ >bodyمتن بين تگ >خواهند شد.

و يا توپر نمايش داده خواهند شد. Bold/< بصورت b< و انتهای آن يعنی تگ >bمتن بين تگ >

؟html يا htmانشعاب فايل

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

( HTML Editorsنکته ای در مورد اديتورهای اچتمل )

امکانClaris Home Page و يا FrontPageبا وجوديکه با استفاده از اديتورهای اختصاصی اچتمل مانند " وجودWhat You See Is What You Get يا "WYSIWYGنوشتن و طراحی صفحات اچتمل بصورت

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

( :FAQبيشترين سواالت پرسيده شده )

فايلم را درست کردم ولی هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟ ( ذخيره کرده ايد. در ضمن مطمئن شويد کهhtml يا htmمطمئن شويد که فايل را با انشعاب درست )

مرورگرتان چک کنيد.( Address کرده ايد.) نام و مسير فايل را در قسمت Openهمان فايل را

هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات دادهشده مشاهده نميشود، مشکل کجاست؟

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

و در نت اسکيپView/Refresh يا F5 کنيد. در اينترنت اکسپلورر کليد Refresh/Reloadمرورگرتان Ctrl+R يا View/Reload .اينکار را انجام خواهند داد

استفاده کنم؟Netscape Navigator و Internet Explorerآيا ميتوانم از هر دو مرورگر

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

را داونلود کنم؟ Netscape Navigator و Internet Explorerکجا ميتوانم آخرين نسخه از مرورگرهای

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 ) عناصر

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

( HTML Tagsتگ های اچتمل )

با کمک تگ های اچتمل عناصر و ياElements .ساخته ميشوند تعريف شده است. عنصر80در زبان اچتمل حدود ( تگ های اچتمل بوسيله دو نويسهchar .و > ساخته ميشوند > )< تگ های اچتمل معموال بصورت زوج ظاهر ميشوند، مانندb<test>/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<This text is bold>/b>/<body>/<html>

: اچتمل*** عنصر يک از ای نمونه

<b<This text is bold>/b>

/< پايان می يابد. محتوای اينb< شروع شده و با تگ >bعنصر اچتمل باال با تگ > < نمايشb" است. الزم به ذکر است که کاربرد تگ >This text is boldعنصر عبارت "

متون است. boldتوپر يا

: ) الحال*** ) معلوم اچتمل عنصر يک دوم مثال

<body>This is my first homepage. >b<This text is bold>/b>

/<body>

/< پايان می يابد.body< شروع شده و با تگ >bodyعنصر اچتمل باال با تگ >همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ >

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

( Tag Attributesشناسه های يک تگ )

ميگويند و وظيفهAttributeتگ ها ميتوانند حاوی اطالعات اضافی ديگر باشند، به اين اطالعات شناسه يا < شناسه ای به نامbody ميباشد. مثال در مورد تگ >Elementآنها بيان ديگر اطالعات يک عنصر يا

bgcolor( وجود دارد که رنگ زمينه متن backgroundرا تعيين ميکند برای نمونه اگر ميخواهيد که رنگ ) زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :

<body bgcolor="black >"

width، height ، align< دارای چهار شناسه مختلف با نامهای bodyدر مثال زير تگ > ميباشد. 0 و center، 60، 100 و مقادير borderو <table border="0" width="100" height="60" align="center > "

....../<table >

" نوشته ميشوند و هميشه به تگ شروع يکname=valueشناسه ها به صورت کلی "مقدار=نام" يا " شناسه ها قيد نشوند از مقاديرElement اضافه ميشوند و نهايتا اگر در يک عنصر يا Elementعنصر يا

نوشته نشود از رنگbgcolor اگر شناسه body آنها استفاده خواهد شد مثال در تگ defaultقراردادی يا سفيد برای زمينه صفحه استفاده خواهد شد.

مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردیکه مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

(Basic Tags ) تگ های اصلی

های اچتمل هستند و در اين فصل با عناصر و تگelements ( اجزا تشکيل دهنده عناصر يا tagsتگ ها ) های پايه و مهم:

<hr< , <br< , <h1< .... <h6< , <!-- comment --< , <p< آشنا خواهيد شد . يکی از بهترين روش های يادگيری تگ های اچتمل ديدن مثالها و تغيير آنها ميباشد و با

کمک اديتور اختصاصی ما و با استفاده از امکانات فارسی نويسی آن به صورت آنالين ميتوانيد به مطالعه و يادگيری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کليک روی دکمه "نمايش نتايج" به مشاهده نتايج

بپردازيد

مثالها :

مثالی ساده از يک صفحه اچتمل " در صفحه مرور گر نمايش داده ميشود و در واقع محتواHellow Worldدر اين مثال بسيار ساده جمله "!

تماما نمايش داده خواهد شد. bodyو متن عنصر

پاراگرافهای ساده:< و بصورت پاراگرافی pچگونگی نمايش متون با کمک تگ >

نمايش متون فارسی: مراجعه کنيد. فصل فارسی نويسیچگونگی نمايش متون فارسی. برای جزئيات بيشتر به

مثالهای بيشتر:

( Headingsسر تيترها ) < معرف بزرگترينh1< تعيين ميشوند. >h6< تا >h1سر تيترها با کمک تگ های >

. h6سر تيتر و > به< مرورگر است تيتر سر کوچکترين معرفسطر يک اتوماتيک بصورت تيتر سر يک نمايش هنگام

. کرد خواهد اضافه تيتر سر هر از بعد و قبل خالی<h1<This is a heading>/h1><h2<This is a heading>/h2><h3<This is a heading>/h3><h4<This is a heading>/h4><h5<This is a heading>/h5><h6<This is a heading>/h6>

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

( Paragraphsپاراگرافها )

. pپاراگرافها با کمک تگ > هنگام< به مرورگر ميشوند معرفیخالی سطر يک اتوماتيک بصورت پاراگراف يک نمايش

. کرد خواهد اضافه آن از بعد و قبل<p<This is a paragraph>/p ><p<This is another paragraph>/p>

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

(Line Breaksسطر جديد )

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

نميباشد.

<p<This >br< is a para>br<graph with line breaks>/p>

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

(Commentsکامنت ها در اچتمل )

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

نظر commentو شرحتان را درون عالئم >-- و --!< قرار دهيد. مرور تگ های در راو شرح فقط و داد نخواهد نمايش را آنها محتوی و نگرفته

در احتماال که افرادی ديگر و نويس برنامه برای توضيحات( . به بود خواهد مفيد کرد خواهند کار اچتمل کد با آينده

) ! ابتدا "!" در آنهم و يکی فقط کنيد توجه نويسه محل

--!<This is a comment>--

و نحوه استفاده از آن commentsمثالی در مورد

چند نکته کاربردی:

توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت )اکسپلورر، نت اسکيپ، ..( و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند

و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و1024X76 و 800x600حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش

آن را امتحان کنيد. 8

از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد ( و خطهای خالی متن درspaceداد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی )

صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

None Breakingبرای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی )Space استفاده کنيد. در بخش ) (Entitiesنهادها ) .به اين مطلب بيشتر پرداخته خواهد شد

فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه ( خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله ياspaceتبديل به يک فاصله )

space .نمايش داده خواهد شد

< استفادهbr< خالی استفاده نکنيد و به جای آن از تگ >pبرای ايجاد يک سطر جديد هيچگاه از يک تگ >کنيد..

مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش..<( نام برد. h<( و سرتيترها )>pخواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف )>

سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلفHorizontal Roler< يا hrتگ >مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.

مثالهای بيشتر:

باز هم مثال پاراگرافهااين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.

ترازبندی پاراگراف ها نشان ميدهد. درalign ای به نام attributeاين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.

" (align="center )

رفتن سر سطر جديد< را در يک متن اچتمل نشان ميدهد. brاين مثال نحوه استفاده از تگ >

سر تيترها< را در يک متن اچتمل نشان ميدهد. h1< .... >h6اين مثال نحوه استفاده از تگهای >

ترازبندی سر تيترها نشان ميدهد. در اينalign ای به نام attributeاين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا

حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد. " (align="center )

نمايش خطوط افقی< ميباشد. brاين مثال نحوه نمايش خطوط افقی با استفاده از تگ >

commentاستفاده از در کدهای اچتمل را نمايش ميدهد. commentاين مثال نحوه استفاده از

تعيين رنگ زمينه صفحه با نامbody ( عنصر attributeاين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های )

bgcolor( .نشان ميدهد Background Color )" (bgcolor ="blue )

تگهای اصلی در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده

موجود است و همچنينAttributesاست. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا

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

:

Start TagPurposeکاربرد

<html>Defines a html documentنشان شروع متن اچتمل

<body>Defines the document's body تعيين بدنه و قسمت اصلی صفحه

اچتمل

<h1<->h6>

Defines heading 1 to heading 6 تعريف سر تيترهایh1 تا h6

<p>Defines a paragraphتعريف پاراگراف

<br>Inserts a single line breakرفتن سر خط جديد

<hr>Defines a horizontal ruleنمايش خط افقی

>--!<Defines a comment in the HTML

source codecommentنوشتن شرح و

فارسی نويسی در اين درس با فارسی نويسی، فارسی سازی و استاندارد يونيکد و نحوه استفاده از اديتور آنالين و فارسی

نيز معرفی خواهد شدdir و شناسه http-equivاين سايت آشنا خواهيد شد. همچنين متاتگ

سؤاالت مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:- چگونه فارسی بنويسم ؟ - چگونه فارسی بخوانم؟

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

دو نکته بسيار مهم در مورد فارسی نويسی: روش کدگزاری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 (ltr از چپ به راست )defaultجهت نمايش متون التين به صورت پيش فرض و

ميباشد.در مورد متون و جمالت فارسی بايد با کمک روشی جهت نمايش پيش فرض را direction يا همان dir ی به نام attributeبه "راست به چپ" تغيير دهيد. شناسه يا

اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text - .چپ به راست dir="rtl" , Right-to-left text - .راست به چپ

کافی استdiv يا pمثال برای نمايش جمله فارسی "سالم بر دنيای وب!" با کمک عناصر که به يکی از شکلهای زير عمل شود:

<p dir="rtl >"سالم بر دنيای وب/< p ><div dir="rtl >"سالم بر دنيای وب/< div >

ميسر بوده و به عنوان نمونه ميتوانdirدر بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه از عناصر زير نام برد:

<p< , >div< , >html< , >body< , >table< , >tr< , >td< , >h1 ... h6< , >input< , >pre< , >select< , >span ... , >

مثالهای زير نحوه ترازبندی متون فارسی را به نمايش ميگذارند و برای مطالعه بيشتر در مورد ترازبندی هم برای مطالعهlang و شناسه BDO ، Span مراجعه کنيد. )عناصر به اين صفحهمتون "راست به چپ"

مفيد ميباشند.(

مثالهای فارسی نويسی:سالم بی وفا : 1مثال

نوع کدگزاری را تعيين ميکند و در اينجا با کمکhttp-equiv توجه کنيد. متا تگ div و تگ headبه بخش و جهتdirection به معنای dir جهت نوشتن مطالب )از راست به چپ يا بلعکس( تعيين ميگردد. divتگ

ميباشد. left to right معادل ltr و right to left مخفف rtlبوده و

متن ها و پاراگراف بندی : 2مثال جهت نوشتن مطالب )از راست به چپ يآ بلعکس( تعيينdir توجه کنيد. با کمک شناسه p و divبه عناصر ميگردد.

متون فارسی و التين در کنار هم : 3مثال آن dir و شناسه divمثالی کاملتر با راهنمای استفاده از عنصر

html در عنصر dirشناسه : 4مثال بکار ببريد جهت نمايش تمامی متون از راست به چپ شده و برایhtml را در عنصر dirاگر شناسه

را استفاده کنيد. همچنين در اين حالتdir="ltrنوشتن از چپ به راست بايد به صورت موردی شناسه " مرورگر در سمت چپ صفحه نمايش داده خواهد شد. در صورت استفادهScrool downماسماسک!

ماسماسک همان سمت راست خواهد ماند. body در عنصر dirشناسه

مثال کامل : 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 Formatted يا preنمايش متون از قبل شکل دهی شده با کمک عنصر

بهترين انتخاب ميباشد. preبرای نمايش اشعار فارسی استفاده از عنصر

عناصر ديگر شکل دهی متن , code , kbd , tt , samp , var , del و ... با کمک عناصر deleted، underlineنمايش متون

ins

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

oاگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در را انتخاب کرده وPage Source يا Source مرورگرتان حالت Viewمنوی

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

o( اگر صفحه مورد نظر از مجموعه فريمهاFramesetاستفاده کرده باشد برای ) ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش باال به مشاهده

سورس کدهای اچتمل پرداخته )الزم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.( و سپس برای ديدن کد اچتمل اختصاصی هر

" کرده و کدView Source" روی هر صفحه "Right Clickصفحه بايد پس از "اچتمل هر فريم را جداگانه ببينيد.

o اگر طراح سايت با کمکJava Script،مانع ديدن سورس توسط شما ميشود Tools/Internet Options.../Security/Custom Levelابتدا در منوی

مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده )disable !!!و سپس مراحل باال را تکرار کنيد )

چند نکته کاربردی:

I. در استفاده ازUnderlineدقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .

II. به كارگيري تگهايEM و STRONG كه جايگزين تگهاي I و Bهستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش

داده خواهد شد . III.به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده

شروع شده است ، به همين خاطر تگU بعد از عنصر STRONGمي كنيد عنصر قرار مي گيرد. Uخاتمه دهنده آن قبل از تگ خاتمه دهنده

<U<version >STRONG<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 Tag

Purpose کاربرد

<code> Defines computer code text نمايش کدهای برنامه نويسی

<kbd> Defines keyboard text  نمايش متن بصورت صفحه کليدی

<samp>Defines sample computer

codeنمايش کدهای نمونه برنامه نويسی

<tt> Defines teletype text نمايش تله تايپ

<var> Defines a variable نمايش متغييرها

<pre> Defines preformatted text نمايش متون از قبل فرمت شده

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

Character Entities

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

Characterنميباشند. در اين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با کمک Entities.فرا خواهيد گرفت

Character Entities characterدر اچتمل بعضی از نويسه ها دارای معنی خاصی بوده و برای نمايش آنها در صفحاتتان بايد از

entities ها استفاده کنيد. يک character entities :از سه قسمت تشکيل ميشود

)&( ampersand- نويسه 1 entity يا نويسه # و سپس شماره عددی entity- نام 2 );( semicolon - و نهايتا نويسه 3

استفاده کنيد. در اين;60&# يا از ;lt&برای مثال برای نمايش نويسه < دو روش وجود دارد، بايد از شماره عددی آن ميباشد. 60 و entity نام ltمثال

در مقابل استفاده از شماره عددی آن سهولت يادآوری آن از روی نامشentityمزيت استفاده از نام ها را قبول ندارند ولیEntityميباشد و عيب آن اين است که تمامی مرورگرها نام گذاريهای موجود برای

ها بهentity ها را بخوبی ميشناسند. توجه داشته باشيد که entityدر عوض همگی شماره های عددی ميباشند. Case Sensitiveکوچک و بزرگي حروف حساس هستند و در واقع

ميباشد و نام رسمی آنBlank يا Space در اچتمل، نويسه فاصله يا character entityپر کاربردترين non-breaking space( ميباشد. همانطور که ميدانيد مرورگرها فاصله های اضافی را در نظر نگرفته

truncate spaces تای آنرا ناديده ميگيرند و برای نمايش فاصله های9 نويسه فاصله، 10( و مثال از استفاده کنيد. ;nbsp&اضافی بايد از

ها Character Entitiesفهرست پرکاربردترين

Result (نمايش)

Description (شرح)

Entity Name (نام)

Entity Number( شماره (عددی

 non-breaking

space&nbsp;&#160;

<less than&lt;&#60;

>greater than&gt;&#62;

&ampersand&amp;&#38;

"quotation mark&quot;&#34;

'apostrophe  &#39;

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

ResultDescriptionEntity NameEntity Number

¢cent&cent;&#162;

£pound&pound;&#163;

¥yen&yen;&#165;

§section&sect;&#167;

©copyright&copy;&#169;

®registered trademark&reg;&#174;

×multiplication&times;&#215;

÷division&divide;&#247;

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

(HTML Links ) پيوندهای اچتمل

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

( ميشوند. اصطالحLinkدر محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل ) ( قرار دارد. در يک متن معمولیLinear( در مقابل متن خطی )Hyper Textابرمتن )

(Hyperخواندن به شکل خطی و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط ) با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک

ميسر ميگردد. Anchor يا Aعنصری معلوم الحال! به نام

مثالها

ايجاد پيوندها با کمک متن را در يک متن اچتمل نشان ميدهد. Linkاين مثال چگونگی ايجاد يک پيوند، لينک يا

ايجاد پيوندها با کمک تصاوير( نشان ميدهد. image را با کمک يک تصوير )Linkاين مثال چگونگی ايجاد يک پيوند، لينک يا

مثالهای بيشتر

href و شناسه Anchorتگ

. < aبرای ايجاد پيوند به صفحات ديگر از تگ > پيوندها ميشود استفادهديگر صفحات صفحه، همان از ديگری بخش به ميتواننداشاره ... و ها فيلم حتی يا صوتی فايلهای تصاوير، وب،

کنند. : است زير قرار به پيوند يک کلی فرم

<a href="url"<Some Text</a<

ميباشد بکار رفتهurl برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن >a>در مثال باال تگ hyerlink که همان hrefاست. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام

referenceميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی )و يا تصويری ( که توسط مرورگر نمايش داده خواهد شد

قرار داده ميشود و هر چند که در مثال>a>/ و >a>و بازديدکننده روی آن کليک خواهد کرد ميان تگهای " است ولی ميتواند حتی يک تصوير باشد. Some Textباال اين بخش متن "

: google.comبرای نمونه کد اچتمل زير پيوندی به سايت کرد خواهد ايجاد

<a href="http://www.google.com/"<Visit Google Site</a<

و مرورگر پيوند باال را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به خواهد رفت. Googleسايت

Visit Google Site

در پيوندها:targetشناسه

امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال باال پس از کليک روی پيوند،targetبا کمک شناسه را باز کرده و جايگزين سایت فعلی خواهد شد. اگر ميخواهيد که مرورگرgoogle.comمرورگر سايت

" برای آن استفاده کنيد . مثالblank و مقدار "_targetپيوند را در صفحه ای جديد باز کند بايد از شناسه

: google.comزير سبب باز شدن سايت شد خواهد جديدی پنجره در

<a href="http://www.google.com/" target="_blank"<Visit Google Site</a<

Visit Google Siteخوتان آزمايش کنيد :

:Nameشناسه

ميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميانnameبا کمک شناسه را فراهم ميکنند. در اينصورت مثال برای رفتن به آخر يک متن ديگرpageقسمتهای مختلف يک صفحه يا

که Scrool downنيازی به است کافی و نيست صفحه تمامی کردنميکند اشاره صفحه آخر به که پيوندی روی بازديدکننده

. کند کليکمرحله دو شامل شده نامگذاری پيوندهای از استفاده

است: عنوان- ) 1 به قسمت اين شده نامگذاری پيوند يک ايجاد

: ). کرد خواهد کار لنگر : است زير قرار به شده گذاری نام پيوند يک کلی فرم

<a name="label"<Text to be displayed</a<

تعيين نام برای پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نامnameوظيفه شناسه و متنی که بعنوان پيوند نمايش داده ميشود عبارت "labelالتينی ميتواند باشد. در فرم کلی باال، نام پيوند

Text to be displayed خواهد بود. مثال زير به ايجاد يک پيوند نامگذاری شده با نام "top

ميپردازد:

<a name="top"<Here is top of my page!</a< - ايجاد يک پيوند به پيوند نامگذاری شده ديگر: 2

hrefبرای دادن لينک به پيوندی نام گذاری شده، کافی است که پيوندی معمولی ايجاد کرده و در قسمت مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاری شده را درج کنيد. مثال زير ايجادurlآن ابتدا

: topپيوندی است که به لينک نامگذاری شده ای به نام ميکند اشاره

<a href="default.aspx#top"< Goto Top! </a<

خواهد رفت. index.htm صفحه topدر اثر کليک روی پيوند باال مرورگر مستقيما به ابتدای بخش

و # urlلگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد نويسه فقط و نيست : است کافی پيوند نام سپس

<a href="#top"< Goto Top! </a<

چند نکته کاربردی در مورد پيوندها:

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

مورد از پيوندهای نامگذاری شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟!

* اگر مرورگر نتواند يک پيوند نامگذاری شده را بيابد ابتدای صفحه مقصد را نمايش خواهد داد.

مثالهای بيشتر

باز کردن پيوند در پنجره ای جديد اين مثال نحوه ايجاد پيوندهائی که در پنجره ای جديد باز ميشوند را نشان ميدهد. در اين حالت

بازديدکنندگان سايتتان را از دست نخواهيد داد.

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

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

رهائی از شر فريم ها_ و نحوه رهائی از فريم ها را شرح خواهد داد. top و مقدار targetاين مثال کاربرد شناسه

mailtoنحوه ايجاد يک پيوند برای باز کردن برنامه مديريت ايميل ها را نشان ميدهد. درmailtoاين مثال نحوه ايجاد يک پيوند از نوع

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

mailtoمثالی کاملتر در مورد body و cc ، bcc، subjectمثال از ارسال ايميل با امکان تعيين مقادير

Start TagPurpose کاربرد عنصرAnchor

<a>Defines an

anchor در يک صفحهAnchorتعريف يک پيوند يا

اچتمل

Target Attributes کاربرد حالتهای مختلف شناسهtarget

target="_blank".مرورگر پيوند را در يک پنجره جديد باز ميکند

target="_self"مرورگر پيوند را همان پنجره باز ميکند. )حالت پيش فرض يا default )

target="_parent" مرورگر پيوند را فريمparentباز ميکند. )کاربرد در مبحث فريمها(

target="_top"مرورگر پيوند را در فريم مادر و اصلی باز ميکند.)روشی خوب برای نجات از شر فريمها (

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

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

(Tables ) جداول

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

میباشندlayoutالمانهای آرایش و

مثالها:

جداول، آرايه هامثال ساده ای برای ايجاد جداول

مرز جداول در تعيين مرز جداول borderنقش شناسه

مثالهای بيشتر

جدولها

<tr< استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ >tableبرای تعريف جداول از تگ > تشکيل گرديده که باcell از يک يا چند سلول، خانه يا rowتعريف ميشوند، تشکيل ميشود. هر رديف يا

table data و table row به ترتيب خالصه شده tr و td< ايجاد ميشوند. نام های tdکمک تگ >ميباشند.

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

مثال زير جدولی است با دو سطر و سه ستون :

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

نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl>"<tr><td> سلول 1رديف ،1/<td><td> سلول 1رديف ،2/<td><td> سلول 1رديف ،3/<td>/<tr>

،1رديف 1سلول

،1رديف 2سلول

،1رديف 3سلول

،2رديف ،2رديف ،2رديف

<tr><td> سلول 2رديف ،1/<td><td> سلول 2رديف ،2/<td><td> سلول 2رديف ،3/<td>/<tr>/<table>

3سلول 2سلول 1سلول

:dir و borderجدولها و شناسه در مثال باال شناسهborderمرز جدول را مشخص

مرزی با ضخامت يک پيکسل را نمايش1ميکند، مقدار خواهد داد و مقدار صفر جدول را بدون مرز نمايش

خواهد داد. توجه داشته باشيد که حالت پيش فرض يعنی ، جداول بدون مرز راborderجدولی بدون شناسه

نمايش خواهد داد. در مثال باال شناسهdir يا direction و مقدار rtl

برای آن، سبب تعيين نمايش جهت متون از راست به تعريف شدهtableچپ خواهد شد و چو ن در داخل تک

است به تمامی سلولهای جدول اعمال خواهذ شد. ساده ترين جدول ممکن در اچتمل، جدولی است با

يک سطر و يک ستون!

(Headingsسرستون در جداول )

< تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداولthسرستونها در جداول با کمک تگ >نمايش ميدهد:

کد اچتمل جدولی با سه سطر و سه

ستوننمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl>"

<tr><th> ا <th>/سرستون<th> 2سرستون/<th><th> 3سرستون/<th>/<tr><tr><td> سلول 1رديف ،1/<td><td> سلول 1رديف ،2/<td><td> سلول 1رديف ،3/<td>

3سرستون 2سرستون سرستون ا ،1رديف 1سلول

،1رديف 2سلول

،1رديف 3سلول

،2رديف 1سلول

،2رديف 2سلول

،2رديف 3سلول

/<tr><tr><td> سلول 2رديف ،1/<td><td> سلول 2رديف ،2/<td><td> سلول 2رديف ،3/<td>/<tr>/<table>

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

(Empty Cellsخانه های خالی در جداول )

اگر محتوای خانه ای از يک جدول خالی باشد چه چيزی بايد نمايش داده شود؟ بسته به مرورگری که استفاده ميکنيد نتيجه نمايش متفاوت است و مثال در مثال زير خانه خالی جدول بدون مرز نمايش داده

خواهد شد:

کد اچتمل جدولی با دو سطرو دو ستون

نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl>"<tr><td> سلول 1رديف ،1/<td><td> سلول 1رديف ،2/<td>/<tr><tr><td> سلول 2رديف ،1/<td><td<>/td>/<tr>/<table>

،1رديف 1سلول

،1رديف 2سلول

،2رديف 1سلول

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

داد:

کد اچتمل جدولی با دو سطرو دو ستون

نمايش جدول روبرو توسط مرورگر

<table border="1" dir="rtl>"<tr><td> سلول 1رديف ،1/<td><td> سلول 1رديف ،2/<td>/<tr><tr><td> سلول 2رديف ،1/<td><td<&nbsp;>/td>/<tr>

،1رديف 1سلول

،1رديف 2سلول

،2رديف 1سلول

 

/<table>

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

چند نکته اساسی در مورد جداول: در جداول، رديفها، خانه ها و سر ستونها از تعداد

زيادی از شناسه ها ميتوانيد استفاده کنيد که شرح همگی آنها از حوصله اين دوره مقدماتی خارج است و

توصيه ميشود که از مثالهای زير و جدول واقع در انتهای اين صفحه برای مطالعه هر چه بيشتر در مورد جزئيات

شناسه ها استفاده شود. شناسهdirقابل استفاده در بسياری از تگها ) مثال

table ، tr ، td ، th ميباشد. با کمک شناسه ) dirو برای آن، جهت نمايش متون فارسی ازrtlمقدار

"راست به چپ" تعيين ميگردد. توجه داشته باشيد که وtr به table به صورت موروثی از dirمقدار شناسه

th و از tr و th به tdخواهد رسيد.مثال برای تعيين برای تمامی خانه های يک جدول کافی استrtlمقدار

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

ميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص را موردی تعيين کنيد. dirشناسه

مثالهای بيشتر

مرز در جداول را در نمايش جداول نشان ميدهد. borderاين مثال کاربرد شناسه

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

captionعنوان جداول و تگ در تعريف جداول captionمثالی در مورد تگ

توسعه سطری يا ستونی در جداول در جداول rowspan و colspanمثالی در مورد شناسه های

جدولی با محتويات مختلفمحتوی يک خانه جدول تقريبا ميتواند هر عنصر اچتملی باشد.

فاصله گذاری بين خانه های جداول( cellspacingاين مثال نحوه ايجاد فاصله بين خانه های جدول را نشان ميدهد.)

اليه گذاری خانه های جدول( cellpaddingاين مثال نحوه ايجاد فاصله خالی بين خانه های جدول و مرز آنها را نشان ميدهد.)

تعيين رنگ زمينه يا تصوير زمينه کل يک جدول background و bgcolorتعيين رنگ زمينه يا تصوير زمينه سراسری جداول با کمک شناسه های

تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه از جدول background و bgcolorتعيين رنگ زمينه يا تصوير زمينه در خانه های جداول با کمک شناسه های

تراز بندی محتوا در خانه های جداول" را نشان ميدهد. alignاين مثال نحوه ترازبندی محتوای خانه های جداول با کمک شناسه "

در جداولframeشناسه جهت تعيين شکل مرز جداول. table" در المان frameمثالی در مورد کاربرد شناسه "

تراز بندی محتوا در خانه های جداول" را نشان ميدهد. valign" و "alignاين مثال نحوه ترازبندی محتوای خانه های جداول با کمک شناسه "

جداول تگهایStart TagPurposeکاربرد

<table<Defines a tableتعريف جدول

<th<Defines a table header

تعريف سرستون درجداول

<tr<Defines a table row

تعريف رديف ها درجداول

<td<Defines a table cell

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

<caption<Defines a table caption

تعريف عنوان جدول

(Frames ) فريمها

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس آشنا خواهيد شد.Frameset و Frame ( و تگ های مربوطه مخصوصا تگهای Frameبا مفاهيم فريم )

مثالها:

مجموعه فريمهای عمودی frame و framesetمثالی در مورد ايجاد مجموعه فريمهای عمودی توسط تگ های

مجموعه فريمهای افقی frame و framesetمثالی در مورد ايجاد مجموعه فريمهای افقی توسط تگ های

مثالهای بيشتر

(Framesفريمها )

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا ( ناميده شده و فريمها کامال مستقل از هم ميباشند. محتوای هر فريم هم ميتواند هرframeدريچه، فريم )

صفحه يا وب سايتی باشد. هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولیاستفاده از آنها در کارهای حرفه ای توصيه نميشود.)به جز در موارد خاص(

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

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

ميدهد!!

( Framesetتگ فريم ست )< تگframeset .به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد >< هر تگframeset .مجموعه ای از رديفها يا ستونها را تعريف ميکند > داخل هر فريم ميتواندframeset .ديگری قرار دهيد با کمک شناسه هایrows و cols .ابعاد و نسبت هر فريم تعيين ميگردد < تگframeset< درون تگهای >html< و >htmlقرار ميگيرد.)نيازی به >/

نيست.( frameset هنگام معرفی يک bodyقيد تگ

( Frameتگ فريم )< کاربرد اصلی تگframe تعيين >sourceيا نام صفحه ای است که بايد در

فريم ها نمايش داده شود.

مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه25 درصد و فريم دوم 75اول

" و درون فريم دوم فايل "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برای نمايش مثال باال به سه فايل نياز داريد، باال.

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

کارکردمقدار شناسهشناسه

cols عرض پنجره بر اساس پيکسل، درصد يا

*عالمت تعيين تعداد و اندازه ستونها در فريم

ست

rows عرض پنجره بر اساس پيکسل، درصد يا

*عالمت تعيين تعداد و اندازه رديفها در فريم

ست

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

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

<html><frameset cols="*,200>"   <frame src="frame_2.html>"   <frame src="frame_1.html>"/<frameset>/<html>

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

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

در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است. دقيقا قراردادهای باال برقرارند. rowsدر مورد شناسه

نکات کاربردی:

( خواهندresize* اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه ) در داخل تگ >noresizeبود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام

frame مثال < استفاده شود. در اينnoresize .نميتوانيد که فريمها را تغيير اندازه بدهيد

مقدارframe نشوند )باال و پايين بردن صفحه توسط ماوس( بايد در تگ scroll* اگر ميخواهيد که فريمها " ميباشند.( در اينauto" و "yes" ، "no" قرار دهيد. )مقادير ممکن "no را برابر "scrollingشناسه

نيستند. scroll صفحات قابل scrollingمثال

راframeborder مقدار شناسه frame* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ ( frameborderمثال " قرار دهيد. )0برابر "

پشتيبانی نميکنند. برای اينframeset و frame* درصد بسيار کمی از مرورگرها از تگهای مربوط به < جهت نمايش صفحه جايگزين استفاده شود. noframesموارد بايد از تگ >

مثالهای بيشتر

مجموعه فريمهای مرکبمثالی در مورد ايجاد مجموعه ای مرکب از فريمهای عمودی و افقی

مثالی کاربردی در مورد فريمها در اين مثال کاربردی با کمک سه فريم امکان نمايش صفحات مختلف به آسانی فراهم ميشود. فريم افقی و باالئی سرتيتر و نام اصلی سايت را نمايش خواهد داد و فريم سمت راست لينکهای مهم صفحه را در بر

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

( و سه صفحه اچتمل برای فريمهای باالئی، سمت چپ و راست احتياج خواهد بود. framesetفريمها)

(Inline frameفريمهای شناور و يا درجا )(، فريمی درون يک صفحه اچتمل iframeمثالی در مورد فريمهای شناور و درجا )

(Inline frameمثالی کاربردی در مورد فريمهای درجا ) صفحه اچتمل مختلف 7( با کمک iframeمثالی کاربردی در مورد فريمهای شناور و درجا )

شوخی با فريم های شناور بازديدکنندگان سايت به آنها :\cمثالی در مورد نمايش درايو لوکال )مثال

فريمها و پيوندهای نامگذاری شده مثالی کامل در مورد فريمها و پيوندهای نامگذاری شده و نحوه استفاده از آنها در طراحی سايتی ساده

متشکل از چهار فايل اچتمل

فريمها و پيوندهای نامگذاری شده کامل frameهمان مثال باال در صفحه کامل مرورگر با شناسه های کامل در تگ

تگ های فريم

Start TagPurposeکاربرد<frameset>

Defines a set of framesتعريف مجموعه ای از فريم ها

<frame>Defines a sub window )a

frame(تعريف يک فريم

<noframes>

Defines a noframe section for browsers that do not handle

frames

تعريف جايگزين برای مرورگرهائيکه از فريم ها پشتيبانی نميکنند.

<iframe>Defines an inline sub window

)frame((inlineتعريف فريم های درجا )

(Lists ) فهرستها

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

آشنا خواهد کرد.

مثالها:

فهرستهای نامرتبمثالی بسيار ساده در مورد فهرستهای نامرتب

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

مثالهای بيشتر

(unordered listفهرستهای نامرتب)

فهرستهائی هستند از يک يا چند قلم اطالعات که معموال با دايرهای کوچک و سياه رنگ در شروع نمايش

<li< شروع شده و هر رقم اطالعات با تگ >ulداده ميشوند. يک فهرست از نوع نامرتب با تگ > . ميگردد مشخص

HTML codeنمايش توسط مرورگر<ul><li<Red>/li><li<Blue>/li><li<Green>/li>/<ul>

Red Blue

Green

<ul dir="rtl> "<li>قهوه/<li><li>شير/<li><li>چای/<li>/<ul>

قهوه شير

چای

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

فهرستها ممکن ميباشد.

(ordered listفهرستهای مرتب)

اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقالم اطالعاتی از < شروعolاعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ >

. liشده و همانند فهرستهای نامرتب هر رقم اطالعات با تگ > ميگردد< مشخص

HTML codeنمايش توسط مرورگر<ol><li<Red>/li><li<Blue>/li><li<Green>/li>/<ol>

1.Red 2.Blue

3.Green

<ol dir="rtl> "<li>قهوه/<li><li>شير/<li><li>چای/<li>/<ol>

قهوه .1شير .2

چای .3

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

فهرستها ممکن ميباشد.

(definition listفهرستهای تعريفی)

فهرست تعريفی فهرستی است از اصطالح ها و تشريح و توصيف آنها.

< و >dt< شروع شده و هر ذوج اصطالح و تعريف مربوط به آن با تگهای >dlفهرستهای تعريفی با >

dd . ميشوند< تعريف

HTML codeنمايش توسط مرورگر<dl><dt<HTTP>/dt><dd<Hypertext Transfer Protocol>/dd><dt<FTP>/dt><dd<File Transfer Protocol>/dd><dt<IP>/dt><dd<Internet Protocol>/dd>/<dl>

HTTP Hypertext Transfer

Protocol FTP

File Transfer Protocol IP

Internet Protocol

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

مقدمه خالصه ای از مقدمه

1فصل 1خالصه ای از فصل

2فصل

<dd> فصل از ای <dd>/2خالصه/<dl> 2خالصه ای از فصل

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

مربوط به فهرستها ممکن ميباشد.

مثالهای بيشتر

انواع فهرستهای مرتب جهت تعيين نوع نمايش فهرست typeمثالی در مورد فهرستهای مرتب به همراه استفاده از شناسه

انواع فهرستهای نامرتب جهت تعيين نوع نمايش فهرست typeمثالی در مورد فهرستهای نامرتب به همراه استفاده از شناسه

فهرستهای تودرتومثالی در مورد فهرستهای ترکيبی. اعضای فهرست ميتوانند از فهرستهای ديگر تشکيل شوند.

فهرستهای تعريفی dirمثالی در مورد فهرستهای تعريفی به همراه استفاده از شناسه

تگهای فهرست

Start Tag

Purposeکاربرد

<ol>Defines an ordered listتعريف فهرستهای مرتب

<ul>Defines an unordered

listتعريف فهرستهای نامرتب

<li>Defines a list itemتعريف يک آيتم و قلم از يک فهرست

<dl>Defines a definition listتعريف فهرستهای تعريفی

<dt>Defines a definition termتعريف اصطالح در فهرستهای تعريفی

<dd>Defines a definition

description تعريف معنی و شرح اصطالح در فهرستهای

تعريفی

(Forms ) فرمها

< و چند تگ مرتبط قادر به دريافت اطالعات از بازديدکنندگانformاز طريق استفاده از عنصر > صفحاتتان و يا تبادل اطالعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش

-radio( ، راديو باتونها )check-boxes( ، چک باکسها )text fieldsباکسهای ورود اطالعات متن )

buttons( و ... شده و همچنين امکان گذاشتن دکمه های ارسال )submit button( و يا حذف )reset) و ... به چگونگی ايجاد ارتباط با بازديدکنندگانinput و formرا خواهيد داشت. اين فصل با شرح تگ های

و گرفتن اطالعات از آنها بصورت التين و يا فارسی خواهد پرداخت. ،ASP از قبيل cgiتوجه داشته باشيد که برای پردازش اطالعات دريافتی از کاربر بايد با يکی از زبانهای

perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.

مثالها:

Text fieldsوروديهای متن يا ها کاربران قادر به وارد کردن و تايپ متنtext field ها . با کمک text fieldمثالی ساده در مورد ايجاد

خواهند شد.

Password fieldsوروديهای رمز عبور يا

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

مثالهای بيشتر

(Formsفرمها )

تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطالعات پرداخته اند و هيچکدام به گرفتن و اخذ < معرفی ميشوند، طراح سايت را قادر به جمعformاطالعات از کاربر نپرداخته اند. فرمها که با تگ >

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

/< قرار ميگيرند. form< و >formمربوط به فرمها بايد درون تگهای >

درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک radio و drop-down(، منوهای Textarea(، عناصر ورود متنهای چند سطری )text fieldsسطری)

buttons ... و

Inputتگ

< نام برد. در اين تگ شناسه ایinputبه عنوان پر مصرف ترين تگ مربوط به ورود اطالعات بايد از تگ > به تعيين نوع اطالعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند: typeبه نام

text , checkbox , radio , password , hidden , submit , reset , button , file , image های کاربردی خواهيم پرداخت: typeدر ادامه به شرح بعضی از

( Text Fieldsوروديهای متن )

"textاگر ميخواهيد که بازديدکننده اطالعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار " . ميشود استفاده

نمايش توسط مرورگرکد اچتمل<form>

First name :First name :

<input type="text" name="firstname>"<br>

Last name :<input type="text" name="lastname>"/<form>

Last name :

<form dir="rtl> ":نـــــــــــــــام

<input type="text" name="firstname>"<br>

خانوادگی :نام<input type="text" name="lastname>"/<form>

: نـــــــــــــــام

: خانوادگی نام

< چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسطformتوجه داشته باشيد که تگ > آن توجه داشته باشيد.الزمrtl و مقدار dirمرورگر نمايش داده خواهند شد. در مثال فارسی باال به شناسه

کاراکتر را در نظر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>

Male

Female

<form dir="rtl>"<input type="radio" name="sex" value="male >"مرد<br><input type="radio" name="sex" value="female >"زن/<form>

مرد

زن

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

Checkboxesوروديهای

اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "

checkbox برای شناسه "type : کنيد استفاده

نمايش توسط مرورگرکد اچتمل<form>

I have a bike

<input type="checkbox" name="bike>"I have a bike

<br><input type="checkbox" name="car>"

I have a car/<form>

I have a car

<form dir="rtl>"<input type="checkbox" name="bike>"

دارم دوچرخه<br><input type="checkbox" name="car>"

دارم ماشين/<form>

دوچرخه دارم

ماشين دارم

& Form's Action Attribute در فرمها ) Submit و دکمه Actionشناسه Submit Button)

استفاده ميشودSubmit Buttonدر فرمها برای ارسال اطالعات کسب شده از دکمه ای به نام ارسال يا " ، اطالعات درون فرم به فايلی ديگر ارسال خواهند شد.Submitو در اثر کليک کاربر بروی اين دکمه "

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

، ASP، Perl مانند cgi برنامه ها و اسکريپت هائی نوشته شده با ربانهای actionمعموال فايلهای بخش PHP .و ... بوده و وظيفه آنها دريافت اطالعات فرمها و سپس پردازش آنها ميباشد

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

نمايش توسط مرورگرکد اچتمل<form name="input" action="form_action.cgi>"

Username :<input type="text" name="user>"<input type="submit" value="Submit>"/<form>

Username :

<form name="input" action="form_action.cgi" dir="rtl>"

کاربر نام<input type="text" name="user>"<input type="submit" value="Submit>"/<form>

نام کاربر

در مثال باال در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطالعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه

action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgiدر سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.

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

باTextarea و Text fieldهمانطور که در مثالهای باال مشاهده کردید در مورد المانهای میتوان سمت و جهت ورود اطالعات را "از راست به چپ" تعیین کنید.dirکمک شناسه

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

نویسه های تایپ شده التین خواهند بود!، در اینگونه موارد چه باید کرد؟ معموال برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو

روش زیر استفاده میکنند: استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی قابل

استفاده توسط دیگران نیست!! استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلیJavaScript

قابل مشاهده و استفاده توسط دیگران است!

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

اسکریپتی مذکور را شرح خواهد داد:

فارسی ساز جاوا اسکریپتی ها Textfieldمثالی در مورد نحوه استفاده از فارسی ساز جاوا اسکریپتی در یک فرم متشکل از

مثالهای بيشتر

Inputحالتهای مختلف ورودی و مقادير مختلف برای آن ميتوان انواع مختلف اطالعات را از وبگردtype و با کمک شناسه inputدر تگ

گرفت.

Checkboxes ها Checkboxمثالی در مورد نحوه تعريف فرمی متشکل از

Radiobuttons ها Radiobuttonمثالی در مورد نحوه تعريف فرمی متشکل از

فهرست کرکره ای ساده ها drop down boxمثالی در مورد نحوه تعريف فرمی متشکل از

فهرست کرکره ای ديگر ها با تعيين پيش گزينه drop down boxمثالی در مورد نحوه تعريف فرمی متشکل از

Textarea ، ناحيه ای برای ورود بيش از يک سطر متنTextareaمثالی در مورد نحوه تعريف فرمی متشکل از

)نکته: استفاده از اديتور ما برای اين مثال امکان پذير نيست! اگر گفتيد چرا!؟(

buttonتعريف فرمی با کمک دکمه يا buttonمثالی در مورد نحوه تعريف فرمی با کمک دکمه يا

ترسيم مرز در اطراف فرم مثالی در مورد نحوه تعريف فرمی دلخواه و ترسيم مرزی بدور آن به همراه تعيين عنوانی برای فرم با

Fieldsetکمک عنصر

ارسال ايميل با کمک فرمهامثالی در مورد نحوه ارسال ايميل با کمک فرمها

ساختن فهرستی از سايتهای مورد عالقه مثالی در مورد نحوه استفاده از تگ فرم و منوهای کرکره ای و کمی جاوا اسکريپت برای ساخت فهرستی

از سايتها

تگهای فرم

Start TagPurposeکاربرد<form>Defines a form for user inputتعريف فرم ورود اطالعات

<input>Defines an input field تعريف ورودی از نوعInput

<textarea>

Defines a text-area )a multi-line text input control(

تعريف ورودی متن چند سطری ياtext-area

<label>Defines a label to a control تعريف برچسب ياlabel

<fieldset>Defines a fieldset تعريفfieldset

<legend>Defines a caption for a fieldset تعريف عنوان برایfieldsetها

<select>Defines a selectable list )a

drop-down box(-dropتعريف فهرستهای انتخابی يا

down box

<optgroup>

Defines an option group تعريفoption groupها

<option>Defines an option in the drop-

down box drop-downتعريف گزينه ای از

boxها

<button>Defines a push button تعريف دکمه فشاری، متفاوت با

button تگ input

(Images ) تصاوير

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

مثالها:

درج تصوير imgنحوه درج تصاوير با کمک تگ

درج تصويری واقع در فضای آدرسی ديگر درج تصويری واقع در دايرکتوريی غير از آدر س صفحه اچتمل و يا تصويری واقع در فضای آدرسی ديگر

سايتها

مثالهای بيشتر

source يا src و شناسه imgتگ

< از نوع تگهای خالی است، بدينimg< تعريف ميکنند. تگ >imgدر زبان اچتمل تصاوير را با کمک تگ >/< نيست. img بوده و دارای تگ انتهائی يا >attributeمعنا که فقط دارای يک يا چند شناسه و

URL نام دارد و مقدار اين شناسه آدرس يا source يا srcمهمترين شناسه برای درج و تعريف يک تصوير تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه

اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.

شکل ساده درج يک تصوير:

<img src="url<"

آدرس اينترنتی تصوير ميباشد و مثال اگر تصويری که قرار است که در صفحه درج شود در همانurlمقدار راme.jpg فقط نام تصوير يعنی url ، کافی است که به جای me.jpgدايرکتوری قرار دارد و نامش

کامل آنرا بنويسيد. مثال تصوير لوگو سايتurlبنويسيد و اگر تصوير در سايتی ديکر قرار دارد google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در اين urlنام

قرار دارد. google.com قرار داشته و روی وب سايت images بوده، در دايرکتوری logo.gifتصوير

img در تگ height و widthشناسه های

تصوير height و widthکاربرد شناسه های نمايش ارتفاع و عرض تعيينابتدا. مرورگر نکنيد، استفاده ها شناسه اين از اگر است

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

و شکل تغيير به ميتوانيد تصوير عرض و طول واقعیتر کشيده يا و بزرگتر کوچکتر، مثال آنرا و بپردازيد آن ابعاد

. ابعاد قيد با را تصويری درج نحوه زير مثال دهيد نمايش : ميدهد شرح آن

<img src="http://www.google.com/images/logo.gif" width="276" height="110< "

قيد کنيد، اينکار سبب کمک بهheight و widthتوصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های مرورگر در تسريع شروع نمايش صفحه خواهد شد.)در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير

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

" يا متن جايگزين alternate text يا "Altشناسه

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

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شما قرار میدهند و در یکی از سؤالهای این FTP کرده )با کمک Uploadبنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را

آدرس جدید تصویر را قید کنید. img از تگ srcیا روشهاس دیگر ( و سپس در شناسه

چند نکته مهم:

فايل11 تصوير استفاده شده باشد، مرورگر بايد 10اگر در يک صفحه اچتمل از تصوير( 10را لود کند.) خود صفحه به عالوه

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

28 کيلوبايت برای کسی که از مودمی با سرعت 50لود تصويری با حجمkbps ثانيه طول خواهد کشيد. 15استفاده ميکند حداقل

برای ديدن مشخصات تصاوير در وب کافی است که روی تصويرRight click آدرس،ابعاد و ظرفيت تصوير را ببينيد. properitiesکرذه و سپس در بخش

برای ذخيره تصاوير در وب کافی است که روی تصويرRight clickکرذه و " آنرا ذخيره کنيد. Save picture asسپس در بخش "

مثالهای بيشتر

تصاوير زمينه body در تگ backgroundمثالی در مورد نحوه تعيين تصاوير زمينه با کمک شناسه

ترازبندی تصاويراين مثال نحوه ترازبندی تصاوير در کنار متون را نشان ميدهد.

تصاوير شناور در متنآزاد گذاشتن تصوير در سمت چپ يا راست

نمايش تصاوير در ابعاد مختلف و نمايش تصاوير در ابعاد مختلف height و widthمثالی در مورد استفاده از شناسه های

نمايش متن جايگزين برای تصاوير altمثالی در مورد استفاده از شناسه

استفاده از تصاوير هنگام ايجاد پيوند هامثالی در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها

هاimage mapايجاد . در اين مثال هر بخش از نواحی تعريف شده قابل کليک بوده و بهimage mapمثالی در مورد ايجاد

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

تگ های تصاوير

Start Tag

Purposeکاربرد

<img>Defines an imageدرج تصوير

<map>Defines an image map تعريفImage mapيا ؟؟؟

<area>Defines an area inside an image

map Imageتعريف ناحيه ای در داخل

map