اموزش مقدماتی html (بخش چهارم)
آذر ۳۰م, ۱۳۸۸ | 
نویسنده: اموزش مقدماتی html
قسمت چهارم:
|
ی) فریمها ( Frames ) |
|
با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. در این درس با مفاهیم فریم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهید شد. |
با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. هر صفحه یا دریچه، فریم (frame) نامیده شده و فریمها کاملا مستقل از هم میباشند. محتوای هر فریم هم میتواند هر صفحه یا وب سایتی باشد. هر چند که فریمها طراحی سایتهای کوچک و متوسط را بسیار آسان میکنند ولی استفاده از آنها در کارهای حرفه ای توصیه نمیشود.(به جز در موارد خاص)
معایب استفاده از فریمها:
- موتورهای جستجو با صفحات طراحی شده با فریمها مشکل دارند.
- چاپ و print صفحاتی که از فریمها استفاده میکنند مشکل است.
- صفحاتی که از فریمها استفاده میکنند معمولا مبتدی بودن طراح سایت را نشان میدهد!!
تگ فریم (Frame) :
ادامه مطلب…
- کاربرد اصلی تگ <frame> تعیین source یا نام صفحه ای است که باید در فریم ها نمایش داده شود.
مثال زیر مجموعه ای از فریمها را که شامل دو فریم عمودی میباشند معرفی میکند. از سمت چپ فریم اول ۷۵ درصد و فریم دوم ۲۵ درصد از عرض پنجره مرورگر را به خود نمایش خواهند داد. در ادامه تعریف محتویات هر فریم، درون فریم اول فایل “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 |
عرض پنجره بر اساس پیکسل، درصد یا علامت * |
تعیین تعداد و اندازه ردیفها در فریم ست |
مثالهای زیر را در نظر بگیرید:
|
مثال ۱ |
مثال ۲ |
|
<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>
|
در مثال یک عرض فریم اول از سمت راست ۲۰۰ پیکسل تعیین شده و بقیه عرض پنجره که با علامت * مشخص میشود به فریم دوم اختصاص خواهد یافت.
در مثال دوم عرض پنجره با مقادیر درصدی به فریمها اختصاص یافته است.
در مورد شناسه rows دقیقا قراردادهای بالا برقرارند.
نکات کاربردی:
* اگر فریمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغییر اندازه (resize) خواهند بود و برای جلوگیری از تغییر اندازه فریمها توسط کاربر باید از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود.
* اگر میخواهید که فریمها scroll نشوند (بالا و پایین بردن صفحه توسط ماوس) باید در تگ frame مقدار شناسه scrolling را برابر “no” قرار دهید. (مقادیر ممکن “yes” ، “no” و “auto” میباشند.)
* اگر میخواهید که مرز بین فریمها نمایش داده نشوند باید در تگ frame مقدار شناسه frameborder را برابر “۰″ قرار دهید.
* درصد بسیار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتیبانی نمیکنند. برای این موارد باید از تگ <noframes> جهت نمایش صفحه جایگزین استفاده شود.
تگ های فریم
|
Start Tag |
Purpose |
کاربرد |
|
Defines a set of frames |
تعریف مجموعه ای از فریم ها |
|
|
Defines a sub window (a frame) |
تعریف یک فریم |
|
|
Defines a noframe section for browsers that do not handle frames |
تعریف جایگزین برای مرورگرهائی که از فریم ها پشتیبانی نمیکنند. |
|
|
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> |
|
مقدمه خلاصه ای از مقدمه فصل ۱ خلاصه ای از فصل۱ فصل ۲ خلاصه ای از فصل۲ |
<dl dir=”rtl” > <dt >مقدمه</dt> <dd>خلاصه ای از مقدمه</dd> <dt>فصل ۱</dt> <dd>خلاصه ای از فصل ۱</dd> <dt>فصل ۲</dt> <dd>خلاصه ای از فصل ۲</dd> </dl> |
داخل تگهای تشریح یعنی <dd> میتوانید از پاراگرافها، تگهای br ، تصاویر و حتی فهرستهای دیگر استفاده کنید. به شناسه dir در مثال بالا توجه کنید، امکان تعیین سمت و جهت نمایش متون در تمامی تگهای مربوط به فهرستها ممکن میباشد.
تگ های فهرست
|
Start Tag |
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 |
تعریف معنی و شرح اصطلاح در فهرستهای تعریفی |
مرجع : 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 آن توجه داشته باشید.لازم به یادآوری است که اغلب مرورگرها در حالت پیش فرض برای ورودیهای متن اندازه ۲۰ کاراکتر را در نظر میگیرند و اگر میخواهید که اندازه پیش فرض ورودیهای متن را تغییر دهید باید از شناسه ای به نام 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> |
همانطور که مشاهده میشود فقط امکان یکی از گزینه ها برای کاربر میسر است.
ورودیهای 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> |
شناسه 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 |
کاربرد |
|
Defines a form for user input |
تعریف فرم ورود اطلاعات |
|
|
Defines an input field |
تعریف ورودی از نوع Input |
|
|
Defines a text-area (a multi-line text input control) |
تعریف ورودی متن چند سطری یا text-area |
|
|
Defines a label to a control |
تعریف برچسب یا label |
|
|
Defines a fieldset |
تعریف fieldset |
|
|
Defines a caption for a fieldset |
تعریف عنوان برای fieldset ها |
|
|
Defines a selectable list (a drop-down box) |
تعریف فهرستهای انتخابی یا drop-down box |
|
|
Defines an option group |
تعریف option group ها |
|
|
Defines an option in the drop-down box |
تعریف گزینه ای از drop-down box ها |
|
|
Defines a push button |
تعریف دکمه فشاری، متفاوت با button تگ input |
مرجع : HTML 4.01 Specification – فهرست عناصر – فهرست شناسه ها
فارسی شده توسط: article-computer.blogfa.com/
ارسال در : آموزش | 
برچسب ها: اموزش اچ تی ام ال, اموزش طراحی سایت, اموزش طراحی وبلاگ, اموزش وب, کدنویسی وبسایت