آموزش مقدماتی HTML
پنج شنبه 10 بهمن 1392 12:21 AM
آموزش مقدماتی HTML
|
ی) فريمها ( Frames ) |
|
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهيد شد. |
فريمها ( Frames ):
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتوای هر فريم هم ميتواند هر صفحه يا وب سايتی باشد. هر چند که فريمها طراحی سايتهای کوچک و متوسط را بسيار آسان ميکنند ولی استفاده از آنها در کارهای حرفه ای توصيه نميشود.(به جز در موارد خاص)
معايب استفاده از فريمها:
تگ فريم (Frame) :
مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 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 |
عرض پنجره بر اساس پيکسل، درصد يا علامت * |
تعيين تعداد و اندازه رديفها در فريم ست |
مثالهای زير را در نظر بگيريد:
|
مثال 1 |
مثال 2 |
|
<html> <frameset cols="*,200"> <frame src="frame_2.html"> <frame src="frame_1.html"> </frameset> </html> |
<html> <frameset cols="25%,50%,25%"> <frame src="frame_3.html"> <frame src="frame_2.html"> <frame src="frame_1.html"> </frameset> </html> |
در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهای بالا برقرارند.
نکات کاربردی:
* اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود.
* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.)
* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد.
* درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.
تگ های فریم
|
Start Tag |
Purpose |
کاربرد |
|
<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) |
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
ک) فهرستها ( Lists )
اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهای مرتب(ordered) ، نامرتب(unordered) و فهرستهای تعريفی(definition lists) و تگ های مربوطه يعنی li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد.
فهرستهای نامرتب(unordered list)
فهرستهائی هستند از يک يا چند قلم اطلاعات که معمولا با دايرهای کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
|
نمايش توسط مرورگر |
HTML code |
|
<ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul> |
|
<ul dir="rtl" > <li>قهوه</li> <li>شير</li> <li>چای</li> </ul> |
داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.
فهرستهای مرتب(ordered list)
اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
|
نمايش توسط مرورگر |
HTML code |
|
<ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol> |
|
<ol dir="rtl" > <li>قهوه</li> <li>شير</li> <li>چای</li> </ol> |
داخل تگهای <li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامی تگهای مربوط به فهرستها ممکن ميباشد.
فهرستهای تعريفی(definition list)
فهرست تعريفی فهرستی است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهای تعريفی با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهای <dt> و <dd> تعريف ميشوند.
|
نمايش توسط مرورگر |
HTML code |
|
HTTP Hypertext Transfer Protocol FTP File Transfer Protocol IP Internet Protocol |
<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> |
|
مقدمه خلاصه ای از مقدمه فصل 1 خلاصه ای از فصل1 فصل 2 خلاصه ای از فصل2 |
<dl dir="rtl" > <dt >مقدمه</dt> <dd>خلاصه ای از مقدمه</dd> <dt>فصل 1</dt> <dd>خلاصه ای از فصل 1</dd> <dt>فصل 2</dt> <dd>خلاصه ای از فصل 2</dd> </dl> |
داخل تگهای تشريح يعنی <dd> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد. به شناسه 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 |
تعريف معنی و شرح اصطلاح در فهرستهای تعريفی |
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
ل) فرمها ( Forms )
از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسی خواهد پرداخت.
توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.
فرمها (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" استفاده ميشود.
|
نمايش توسط مرورگر |
کد اچتمل |
|
First name:
|
<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> |
توجه داشته باشيد که تگ <form> چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد.
وروديهای Radio Buttons
اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد:
|
نمايش توسط مرورگر |
کد اچتمل |
|
Male |
<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> |
همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است.
وروديهای Checkboxes
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد:
|
نمايش توسط مرورگر |
کد اچتمل |
|
I have a bike |
<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> |
شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)
در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.
تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
|
نمايش توسط مرورگر |
کد اچتمل |
|
Username:
|
<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> |
در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.
ورود متن فارسی در عناصری مانند Text field يا Text area:
همانطور که در مثالهای بالا مشاهده کردید در مورد المانهای Text field و Textarea با کمک شناسه dir میتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعیین کنید. ولی اگر کاربری ویندوز فارسی نداشته باشد، از کامپیوترهای مکینتاش استفاده کند و یا سیستمش را فارسی نکرده باشد قادر به ورود اطلاعات به زبان فارسی نخواهد بود و نویسه های تایپ شده لاتین خواهند بود!، در اینگونه موارد چه باید کرد؟
معمولا برنامه نویسان وب برای فراهم ساختن امکان ورود متن فارسی از یکی از دو روش زیر استفاده میکنند:
استفاده از اپلتهای جاوا با این مزیت که سورس و کد اصلی فارسی سازی قابل استفاده توسط دیگران نیست!!
استفاده از زبان جاوا اسکریپت و با این عیب که سورس و کد اصلی JavaScript قابل مشاهده و استفاده توسط دیگران است!
تگهای فرم
|
Start Tag |
Purpose |
کاربرد |
|
<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 |
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
