آموزش ساخت صفحه های html
امروز یک سری آموزش ساخت صفحه وب رو براتون گذاشتم.
برای دسترسی به ادامه مطلب بروید...
نظر فراموش نشود...
ساختار دستورات html
هر دستور html بین دو علامت< و >
قرار می گیرد و به این ترتیب متن از متن عادی متمایز می شود. اکثر دستورات html به صورت جفت هستند و شامل یک دستور آغازین و
یک دستور پایانی می شوند. قبل از دستورات پایانی / قرار می گیرد. بعضی از دستورات html نیز به صورت تکی هستند این دستورات به جای
اینکه با احاطه متن آنرا علامتگذاری کنند در واقع علامتی محسوب می شوند که مرورگر
در مواجهه با آنها دستور خاصی را انجام می دهد مثلا ً دستور <br> که به مرورگر می فهماند که بقیه متن را
باید در سطر بعدی بنویسد که این دستور به صورت تکی می باشد :
this is the first line <br> this is the
second line
همچنین بیشتر دستورات html
دارای یک یا چند ویژگی هستند با استفاده از این ویژگی می توان نحوه اجرای آن دستور
خاص را برای مرور گر تعیین کرد .
ممکن است این سئوال برایتان پیش بیاید که این دستورات html را کجا باید نوشت و آیا ویرایش گر خاصی مانند ویرایش گر زبان c و یا basic برای آن لازم است؟
در پاسخ باید گفت که برای تهیه یک سند html احتیاج به ویرایش گر به خصوصی نیست . در واقع از آنجا که یک سند html از حروف اسکی ( ascii) تشکیل شده است با استفاده از هر نوع ویرایش گر متن که در دسترس
داشته باشید می توانید یک سند html تهیه
کنید .مثلا می توانید برای این کار از note pad محیط ویندوز استفاده نمایید .
دستورات ساختار سند html
دستور < html > مشخص کننده شروع و
پایان یک سند می باشد دستور آغازین آن <html> باید در ابتدای هر سند html و قبل از هر چیز دیگری قرار داده شود به این ترتیب ابتدای تمامی
اسناد html به این شکل خواهد بود:
<html>
و دستور پایانی آن یا <html/>
نیز باید در انتهای هر سندhtml قرار
داده شود:
<html/>
سایر مطالب و اطلاعات موجود در یک سند html بین این دو دستور قرار خواهد گرفت.
مهمترین چیزی که در بالای صفحه قرار می گیرد تیتر صفحه وب است. برای تعیین تیتر،
باید از دستورات <title>
و </title> استفاده کرد که در بین
<head> و </head> قرار می گیرد وپس از آن <body> و </body> که در بینشان دستوراتمان را قرار داده ایم قرار می گیرد:
<html>
<head>
<title> عنوان </title>
<head/>
<body>
...
<body/>
<html/>
--- پس زمینه
برای قرار دادن رنگ در پس زمینه باید کد زیر را قرار دهید:
<body bgcolor="#عدد رنگ مورد نظر">
یا:
<style>
.body {background:#عدد
رنگ مورد نظر}
<style/>
عدد رنگ را می توان با استفاده از برنامه هایی مانند photoshop یا paint بدست
آورد.
برای قرار دادن عکس در پس زمینه می توان از کد زیر استفاده کرد:
<style>.body{background:
url('آدرس عکس مورد نظر')}</style>
یا
<body background="آدرس
عکس" bgproperties="fixed">
--- متن
_بوسیله دو دستور <p>
و<p/> می توان شروع و پایان
یک پاراگراف را تعیین کرد. به بیان دیگر مرورگر تمامی متنی را که بین این دو دستور
قرار داشته باشد را به صورت یک پاراگراف واحد در صفحه وب نمایش خواهد داد.
_از <br> برای تعیین خطوط جدید
به کار می رود ، در واقع وقتی مرورگر به این دستور برخورد می کند سطر موجود را رها
و به سطر بعدی می رود. این دستور فاقد <br/> میباشد.
_برای تعیین اندازه متن 6 رده تیتر در html در نظر گرفته شده است. رده اول بزرگترین اندازه و رده ششم معرف
کوچکترین اندازه متن است. که دستورات آن عبارتند از :
h1, h2 , h3 , h4
, h5 , h6
بعنوان مثال:
<h1>
متن مورد نظر
<h1/>
یا:
<h5 style="font-size:عدد;
font-family:نوع فونت;font-color:رنگ">
متن
<h5/>
_اگر بخواهیم از اول فونت غیر معمول بدهیم از دستور زیر استفاده می کنیم:
<basefont size="" color=""
face="">متن</basefont>
_برای وسط چین کردن متن یا هر چیز دیگری از دستور زیر می توان استفاده کرد :
<center>...</center>
_دستور زیر اجزا را چپ چین ، راست چین یا وسط چین می کند:
<div align="left or right
or center">...</div>
_برای تعریف قاب در اطراف نوشته ها از این دستور استفاده می کنیم:
<fieldset>...</fieldset>
_برای انکه تگی از حالت فعال خارج شود جلوی آن ! گذاشته می شود . مانند:
<! Template Designer: somayeh-davari
(http://somayeh-naz.blogfa.com)>
_دستور دیگری که به کمک آن می توانید کنترل دقیقتری بر روی نحوه به نمایش در آمدن
فونتها داشته باشید دستور <font>
می باشد. به وسیله این دستور می توانید اعمالی نظیر تغییر نوع حروف ، تغییر اندازه
و یا حتی تغییر آن به رنگ دلخواه را انجام دهید.
<font face="نام فونت" size="عدد" color="نام رنگ یا شماره آن" >متن</font>
_بوسیله این دستور می توان خط های افقی ترسیم نمود. برای جدا کردن قسمت های مختلف
متن از یکدیگر این دستور یک دستور تکی محسوب می شود و دستور پایانی به شکل <hr/> ندارد . با استفاده از دو ویژگی size و width این دستور می توان ضخامت و عرض خطوط را تعیین کرد .
عرض خطی که رسم می کنیم برابر دویست نقطه باشد . < hr
width = "200">
عرض خطی که رسم می کنیم برابر 50 درصد پنجره مرورگر باشد <" hr width="50%>
رسم یک خط افقی با ضخامت 5 نقطه < hr size="5" >
--- کاراکتر های ویژه
برای اینکه کاراکتر هایی مثل " <> و غیره را به صفحه خود اضافه کنید می
توانید از کد های خاصی استفاده کنید بعضی از این کد ها در زیر آورده شده است :
نام کاراکتر توصیف
" " کوتیشن
& & آمپر سنت
< < کوچکتر از
> > بزرگتر از
N/A; TM علامت تجاری
فضای غیر قابل شکستن
© © نماد حق نشر
® ® علامت تجاری ثبت شده
--- آراینده ها
در طراحی صفحه از دو نوع آراینده استفاده می شود :
1: آراینده فیزیکی
2: اراینده منطقی
_ آراینده های فیزیکی :
به وسیله این آراینده ها به مرورگر حکم می کنیم که متن را با دستوری که دلخواه ما
است نشان دهد و از بقیه متن متمایز کند .
برخی از این آراینده ها عبارتند از :
برای ضخیم کردن متن (Bold)
</B>متن _<B>
برای مورب کردن متن (Italic)
</I> متن_<I>
کشیدن خط زیر متن (Under line)
</U> متن _<U>
متن را مدل دستگاه ماشین تایپ قدیمی می نویسد. </Code> متن _<Code>
متن را بالاتر از خط زمینه می نویسد. </sup> متن _<sup>
متن را پایین تر از خط زمینه می نویسد. <sub> متن _</sub>
کشیدن خط روی متن </strick>
متن _<strick>
_ آراینده های منطقی :
آراینده هایی هستند که خود مرورگر در مورد نحوه به نمایش در آمدن آنها تصمیم می
گیرد و ما فقط ابلاغ می کنیم که می خواهیم قسمتی از متن را از بقیه متمایز کنیم .
برخی ازآراینده های منطقی عبارتند از :
متن را متمایز می کند که معمولاًََ معادل دستور <I> عمل می کند. </EM> متن_<EM>
معمولاً در پایان صفحه متن تشکر را در بین این دستور می نویسیم. </Cite> متن _<Cite>
برای نوشتن آدرس پستی یا الکترونیکی افراد </Address> متن _<Address>
متن را یک سایز بزرگتر می کند هر چه تعداد بیشتری قرار دهیم متن بزرگتر می شود.
</Big> متن _<Big>
متن را کوچک می کند. </Small>
متن _<Small>
متن را قوی تر می کند. </Stronge>
متن _<Stronge>
--- استفاده از تصاویر گرافیکی در صفحات وب
برای قرار دادن یک تصویر در صفحه وب باید از دستور IMG استفاده کنید. ویژگی SRC این دستور ، URL فایل
گرافیکی مورد نظر را مشخص می کند : < img src = " آدرس عکس " >
_ پسوند های مورد استفاده عکس در صفحات وب
پسوند های عکس مورد استفاده در صفحات HTML ممکن است JPG ، GIF یا PNG باشند .
GIF : عکس هایی با پسوند GIF را می توان به صورت انیمیشن در آورد . GIF حالت متحرک دارد و قادر به انیمیشن سازی است
میزان شفاافیت آن زیاد است و به هم بافتگی خاصی دارد اما درجه خلاصه سازی آن کم
است و اگر تنوع رنگ در فاصله کم ، زیاد باشد نمی توان خوب خلاصه سازی کرد .
JPG : می توان با عکس هایی با
پسوند JPG درجه خلاصه سازی در نظر
گرفت حجم فایل را به طور قابل ملاحظه ای می توان کم کرد ولی کیفیت عکس پس از پایین
آوردن حجم کم می شود ، خاصیت متحرک کردن و انیمیشن سازی ندارد .
PNG: این نوع عکس ها به علت
جدید بودن فرمت ذخیره سازیشان به ندرت در صفحات وب استفاده می شود . ابزار های
تولید GIF و JPG کار با این فایل ها را ساده تر از PNG نموده اند با این حال پیش بینی می شود فرمتی که در آینده برای
تصاویر وب به کار میرود PNG باشد
، چون تمامی قابلیت های مورد نیاز وب را تعمین می کند .
_ ویژگی ها :
به وسیله ویژگی ALT این
دستور می توان متنی را مشخص کرد تا کاربرانی که نمی توانند تصویر مزبور را دریافت
کنند ان متن را به جای آن مشاهده نمایند همچنین وقتی که روی عکس می روند این متن
برای آنها نمایان می شود :< img src =
" آدرس عکس " alt=
"متن " >
با استفاده از این ویژگی های width و Height این دستور می توان تصویر
را به اندازه دلخواه نمایش داد :
<img src="آدرس عکس" width="50" height="60">
دستور align نیز مکان عکس را برای
مرورگر تعیین می کند:
<img src="آدرس عکس" align="right or left or center">
--- استفاده از پیوند(link) در صفحات وب
برای ایجاد پیوند باید از دستور A
استفاده کنید. برای تعیین مقصدی که این پیوند به آنجا اشاره می کند از ویژگی href استفاده می شود .
انواع پیوند :
1. پیوندی به صفحات دیگر برقرار کرد .
2. پیوندی به یک قسمت از صفحه وب موجود برقرار کرد .
3. پیوند به outlook
4. پیوند یک فریم به فریم دیگر
_ پیوند از یک صفحه به صفحه دیگر:
مثلا هنگامی که کاربر روی عبارت link کلیک
نماید به صفحه link.com
میرود .
<a href="http://link.com">link</a>
_ پیوند از یک صفحه به خود صفحه :
<a href="#name">قسمت
پیوند داده شده</a>
در جایی از صفحه که می خواهیم به آنجا لینک شود دستور زیر قرار می گیرد :
<a name="#name"></a>
_ پیوند به outlook:
<a href="mailto:آدرس
پست الکترونیکی">آدرس ایمیل یا هر متن دلخواه دیگر</a>
این دستور که برای ارسال نامه به آدرس پست الکتریکی ذکر شده، ما را به outlook express پیوند می دهد .
_ پیوند فریم به فریم :
برای اینکه بتوان همانند شکل بالا از صفحه تست دو به تست سه پیوند انجام دهیم
ابتدا لازم است که در صفحه html اولی
در قسمت تعریف فریم ها برای هر سه صفحه یک نام جداگانه تعریف کنیم :
<frame src="test1.html"
name="t1">
و سپس در صفحه تست دو هنگامی که می خواهیم کلمه لینک فریم t3 را به صفحه test3.html متصل
کند ، باید دستور زیر را درون متن دو بنویسیم :
<a href="test3.html" target="t3">link</a>
به این ترتیب هنگامی که روی کلمه لینک کلیک کنیم صفحه test3 درون فریم t3 باز
می شود .
_ برای لینک کردن عکس باید دستور زیر نوشته شود :
<a href="..."><img src="آدرس
عکس"></a>
_ ویژگی target درتگ <A> :
اگر در اسناد پیوندی دارید و می خواهید مقصد پیوند را در یکی از زیر صفحه های صفحه
اصلی نمایش دهید از این ویژگی در
تگ <A> استفاده کنید. این
ویژگی می تواند مقادیر زیر را اختیار کند
top مقصد پیوند را در یک صفحه
کامل وب نمایش می دهد ، تمام زیر صفحه ها حذف می شوند .
blank مقصد پیوند را در پنجره
جدید نمایش میدهد .
self مقصد پیوند را در پنجره
موجود نمایش می دهد .
_ کنترل رنگ پیوند ها :
در صورتی که بخواهیم رنگ قسمتهای لینک شده تغییر کند از روش های موجود استفاده می
کنیم :
LINK: رنگی که شیئ لینک شده در
صفحه به خود اختصاص داده است .
ALINK: لحظه ای که موس را روی
قسمت لینک شده میبریم این رنگ را میگیرد .
VLINK: رنگ بعد از ویزیت لینک را
مشخص می کند .
می توان این سه حالت را تعریف کرد تا در هر کدام از حالت ها رنگ دلخواه ظاهر شود :
<body link="رنگ" alink="رنگ" vlink="رنگ">...</body>
--- طبقه بندی اطلاعات با استفاده از لیستها
به کمک HTML می توان حداقل سه نوع لیست
مفید ساخت که عبارتند از :
1. لیست های مرتب (شماره دار)
2. لیست های غیر مرتب (گلوله دار)
3. لیست های تعریف
_لیست های مرتب :
محتویات لیست را باید بین دو دستور <OL> و </OL>
قرار داد. مرورگر با رسیدن به دستور <OL> اطلاعات بین دو دستور آغازین و پایانی را به صورت لیست شماره
دار تنظیم می کند. هر کدام از اعضای لیست را بین <li> و </li>
می نویسیم :
<OL>
<li>...</li>
<li>...</li>
</OL>
اگر بخواهیم لیست ما با حروف الفبایی شروع شود فرمان <OL> را تغییر می دهیم :
حروف الفبایی یونانی <OL type="i">
حروف الفبای انگلیسی(A برای
حروف بزرگ و a برای حروف کوچک) <OL type="a">
شروع لیست از شماره 100 <OL start="100">
_ لیست های گلوله ای :
برای اینکه لیست مورد نظر با اشکال هندسی شروع شود اطلاعات را بین دو دستور <ul> و</ul> می نویسیم .
<ul>
<li>...</li>
</ul>
<ul type="circle">دایره
تو پر
<ul type="disc">دایره
تو خالی
<ul type="square">مربع
_ لیست های تعریف :
با استفاده از این دستور از ابتدا هر طور که بخواهیم لیست مورد نظر را آرایش می
دهیم.
<dl>
<dt>مطلب اول</dt>
<dd>توضیحات مربوط به مطلب
اول</dd>
<dt>مطلب دوم</dt>
<dd>توضیحات مربوط به مطلب
دوم</dd>
</dl>
طریقه نمایش:
مطلب اول
توضیحات مربوط به مطلب اول
مطلب دوم
توضیحات مربوط به مطلب دوم
--- استفاده از جداول برای سازماندهی اطلاعات
برای جدول سازی باید مطالب درون جرول را بین دو دستور <table> و </table>
قرار داد. هر سطر از جدول بین دو دستور <tr> و </tr>
جای می گیرد. در نهایت مطالب هر خانه از جدول در بین دستورات <td> و </td> قرار می گیرد.
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
_ویژگی های جدول:
1.می توان با استفاده از ویژگی Border
ضخامت حاشیه جدول را تعیین کرد. از Bordercolor و size برای
رنگ و اندازه Border می
توان استفاده کرد.
<table border="عدد" bordercolor="رنگ" size="عدد">
2. در حالت عادی خود مرورگر عرض و ترتفاع جداول را بر اساس مطالب داخل آن تعیین می
نماید اما شما می توانید عرض و ارتفاع جدولتان را خودتان معین کنید. برای این کار
باید از ویژگی های width و height استفاده کرد.
<table width="عدد" height="عدد">
3. با بکار بردن این ویژگی در تگ <table> می توان فاصله خانه های جدول را تعیین کرد.
<table cellspacing="عدد">
4. با بکار بردن این ویژگی در تگ <table> می توان فاصله بین محتویات خانه های جدول را با حاشیه خانه ها
تعیین کرد.
<table cellpadding="عدد">
5. با بکار بردن ویژگی Bordercolordark در
تگ <table> رنگ قسمت تیره حاشیه
را می توان تعیین کرد.
<table bordercolordark="رنگ">
6. با بکار بردن ویژگی Bordercolorlight در تگ <table>
رنگ قسمت روشن حاشیه را می توان تعیین کرد.
<table bordercolorlight="رنگ">
7. با بکار بردن ویژگی frame در
تگ <table> می توان نحوه نمایش
فریم (چهار چوب) جدول را تعیین کرد.
مقادیری که این ویژگی می گیرد به این شرح است :
above ترسیم حاشیه در ناحیه
بالای جدول
below ترسیم حاشیه در ناحیه
پایین جدول
border ترسیم حاشیه در ناحیه کنار
جدول
box ترسیم حاشیه در اطراف جدول
hsides ترسیم حاشیه در ناحیه بالا
و پایین جدول
lhs ترسیم حاشیه در ناحیه چپ
جدول
rhs ترسیم حاشیه در ناحیه راست
جدول
void ترسیم جدول بدون حاشیه
vsides ترسیم حاشیه در چپ و راست
جدول
8. با بکار بردن ویژگی rules در
تگ <table> می توان نحوه نمایش
خطوط بین خانه های جدول را تعیین کرد.
مقادیری که این ویژگی می گیرد عبارتند از :
all باعث ترسیم خط بین همه
ستونها و سطرهای جدول می شود
cols باعث ترسیم خط بین سطونهای
جدول می شود
groups باعث ترسیم خط دور کل جدول
می شود
none خطی بین خانه های جدول رسم
نمی کند
rows باعث ترسیم خط بین سطرهای
جدول می شود
9. با بکار بردن ویژگی Align در
تگ <table> می توان نحوه قرار
گیری جدول در صفحه وب را تعیین کرد. مقادیر این ویژگی عبارتند از : Right، Center ، Left
_ ویژگی های فوق را می توان در کنار هم در جدول قرار داد
در cell ها ( خانه های جدول) می
توان عکس ، پیوند و ... قرار داد کافی است دستور مورد نظر را در قسمت مربوطه وارد
کرد .
<td><a herf=" "><img src="پسوند نام
عکس"></a></td>
<caption> :
با استفاده از این ویژگی می توان تیتر و یا توضیحی در مورد جدول در بالا یا پایین
آن ذکر کرد
< caption>the
name of the table </caption>
_ با بکار بردن ویزگی valign در
<caption> می توان متنی که بین
<caption> و </caption> قرار می گیرد را در
بالا یا پایین جدول گنجاند . این ویژگی شامل مقادی buttom است .
اگر بخواهیم جدولی بسازیم که دارای عنوان باشد از دستورات زیر استفاده می کنیم . (
هر ستون دارای یک تیتر ).
<tr> <th>1</th><th>2</th></tr>
_ صفت های <td>
<td bgcolor="رنگ"background=" " colspan=" " rowspan=" " >
bgcolor :رنگ زمینه هر خانه جدول
background :می توان برای جدول پس
زمینه تعیین کرد
colspan: با استفاده از این ویژگی
می توان چندین خانه افقی از جدول را با هم ادغام نمود و یک خانه جدید ساخت .
مقادیر این ویژگی عدد می باشد .
rowspan : با استفاده از این ویژگی
می توان چندین خانه عمودی از جدول را با هم ادغام نمود و یک خانه جدید ساخت .
مقادیر این ویژگی عدد می باشد .
valign : با استفاده از این ویژگی
می توان مطالب خانه های جدول را در بالا ، پایین و یا مرکز قرار داد.
align: با استفاده از این ویژگی
می توان مطالب خانه های جدول را در چپ ، راست یا مرکز قرار داد.
<tbody>،<tfoot>
گاهی اوقات بدلیل طولانی بودن مطالب جدول هنگامی که چاپ ان بعلاوه تمام تیتر ها (header) ، محتویات اصلی (body) و پانویسها (footer) مورد نظر باشد ، بهتر است که هر قسمت توسط خطوط افقی جدا شود.
از تگ <tbody> برای جدا کردن بدنه
جدول و از تگ <tfoot>
برای جدا کردن پانویسها استفاده می شود.
--- تلاقی صفحات : ( روش ساختن زیر صفحه ها )
frame ها یا زیر صفحه ها قسمتی
از صفحات وب هستند که هر کدامن می توانند مانند web کامل عمل کند محتویات هر زیر صفحه سند html جداگانه دارد . برای ساختن یک صفحه وب که به چندین زیر صفحه تقسیم
شده باید یک سند html اصلی
ساخته شود سپس با استفاده از تگ های صفحه وب اصلی به چندین فریم تقسیم می شود.
1- از دستورات زیر به جای دستورات <body> و </body>
برای ساخت سند html اصلی
استفاده می شود .
<frameset>
...
</frameset>
صفحه را می توان به زیر صفحه های افقی ( rows) و عمودی ( cols) با
ذکر عدد برای تعیین ارتفاع و عرض صفحات بصورت pixels و درصد تقسیم کرد .
* نکته : بهتر است برای تعیین ارتفاع یا عرض صفحه یکی از اعداد را تعیین و برای
تعیین مقدار بعدی از * استفاده کنید .
< frameset cols="60%
,*">
* نکته : صفحه وب را می توان به بیش از دو صفحه تقسیم کرد ولی نمی توان از دو
ویژگی rows و cols همزمان استفاده کرد .
<frameset cols="100,200,*">
2- پس از اینکه بوسیله دستور frameset نحوه
تقسیم صفحه اصلی به زیر صفحه ها تعیین شد برای تعریف هر زیر صفحه از یک دستور frame استفاده می نماییم.
<frameset cols="60%">
تقسیم صفحه اصلی به دو زیر صفحه "> آدرس صفحه <frame src="
"> آدرس صفحه <frame src="
</frameset>
_ به وسیله ویژگی src
دستور frame آدرس یا نام فایل را که
سازنده محتویات زیر صفحه است مشخص می کنیم .
_ با استفاده از ویژگی name در
صورتیکه بخواهید مقصد یک پیوند را در این زیر صفحه نشان دهید می توانید نامی برای
زطیر صفحه اختصاص دهید .
_ ویژگی scrolling این
دستور نحوه به نمایش درآمدن میله های لغزان را در زیر صفحه مشخص می کند . اگر
برابر " yes"
باشد مرورگر میله های لغزان را برای زیر صفحه رسم می کند اگر برابر " no" باشد رسم نمی کند و اگر برابر " auto" باشد در صورت لازم این میله رسم خواهد
شد .
_ به کمک ویژگی noresize می
توان اجازه تغییر اندازه زیر صفحه از کاربران را گرفت
< frameset src="myfile.html"name="tl"noresize="no">
_ <noframe>
ممکن است بعضی از مرورگر ها فریم ها را نشناسند و کاربران زیر صفحه ها را نبینند
بوسیله این تگ میتوان مطالب را برای کاربران نمایش داد .
<html>
<head>
</head>
<frame src="a1.htm">
<frame src="a2.htm">
</frameset>
<noframe>
your browser can't view frames
</noframe>
</html>
در واقع مرورگرهایی که از فریم پشتیبانی نمی کنند مطالب بین <noframe> و </noframe> را تفسیر می کنند.
_ <marquee>:
برای ورود هر شی متحرک از این دستور استفاده می کنیم این دستور قابی ایجاد می کند
که متنهای وارد شده در آن می توانند با حالت های مختلف حرکت منند .
<marquee bgcolor=" " hspace=" "
vspace=" " width=" " width="
" height=" " behavior="alternate"> متن </marquee>
"scroll"
"slide"
_ behavior:
alternate: متن مورد نظر از یک طرف
وارد شده و با رسیدن به طرف دیگر قاب بر می گردد.
( از راست به چپ و از چپ به راست)
scroll: متن از یک طرف وارد و از
طرف دیگر خارج می شود .
slide: متن پس از آمدن و قرار
گرفتن در قاب می ایستد.
_ hspace: فاصله متن از کادر در
حالت افقی.
_ vspace: فاصله متن از کادر در
حالت عمودی.
_ loop: مشخص می کند متن چند بار
حرکت می کند . در حالت عادی بی نهایت بار حرکت می کند مگر اینکه مقدار صفت behavior برابر با slide شود.
_ scrollamount: مشخص می کند که فاصله هر
بار نمایش متن متحرک چند pixel باشد
.
_ scrolldelay: مشخص می کند که فاصله هر
بار نمایش متن متحرک چند میلی ثانیه باشد .
--- نقشه ها ( image maps )
نقشه ها تصاویری هستند که به چندین ناحیه تقسیم شده اند و کاربر با کلیک بر روی هر
یک از آنها می تواند به مقصدی خاص هدایت شود . در HTML 2 نوع نقشه داریم:
1- نقشه هایی که وابسته به server
هستند .
2- نقشه هایی که وابسته به client
هستند.
که به بررسی نقشه های وابسته به client می
پردازیم. برای بکارگیری نقشه ها در HTML
1- تصویر مورد نظر را انتخاب و مختصات نقاط خاص آن را مشخص می کنیم .
2- برای تصویر مورد نظر نامی را در نظر می گیریم که این عمل توسط ویژگی name از تگ <map> امکانپذیر است . توسط تگ <map> به مرورگر می فهمانیم که تصویر ما یک نقشه است.
<MAP name="mapl">
3- نقشه خود را به ناحیه های دلخواه تقسیم کنید برای اینکار از تگ <area> استفاده کنید:
<map name="map">
<area >
<area>
</map>
- در این مثال نقشه توسط تگ <area>
به 3 ناحیه تقسیم شده است .
4- برای هر یک از نواحی شکلی را در نظر بگیرید مثل مستطیل - چند ضلعی یا دایره که
برای انجام این عمل ویژگی shape را
در تگ <area> قرار دهید.
مقادیر این ویژگی عبارتند از rect
(مستطیل) - polygon (
چند ضلعی ) - circle
(دایره)
<map name="map">
<area shape="rect"></area>
<area shape="rect"></area>
<area shape="rect"></area>
</map>
5- مختصات نقاط ویژه را تعیین کنید . این کار توسط ویژگی coords تگ <area>
انجام می گیرد. اگر ناحیه خود را به شکل مستطیل در نظر گرفتید باید مختصات گوشه
بالای سمت چپ و گوشه پایین سمت راست را مشخص کنید .
<area shape="rect"coords=10,20,40,50>
در مورد دایره مشخصات مرکز شعاع را در ویژگی coords قرار دهید .
<area shape="circle"
coords=20,30,10>
_ در اینجا عدد10 شعاع و (20و30) مختصات مرکزدایره است .
در مورد چند ضلعی باید مختصات رئوس ذکر گردد .
<area shape="poly"
coords="20,10,90,40" href="x.html">
مقصد صفحه x.html است.
<map name="map1">
<area shape="rect" coords="20,10,90,40"
href="x.html">
<area shape="rect"
coords="100,10,170,40" href="y.html">
<area shape="rect"
coords="180,10,250,40" href="z.html">
</map>
مقصد ناحیه اول: x.html
مقصد ناحیه دوم: y.html
مقصد ناحیه سوم: z.html
پس از اینکه تصویر به نواحی مختلف تقسیم شد و مختصات نواحی تعیین گشت باید تصویر
را توسط تگ <img>
در سند قرار دهید .برای اینکه به مرورگر بفهمانید که این تصویر یک نقشه است و
اطلاعات مربوط به نقشه را از تگ <img> دریافت کند از ویژگی usemap استفاده کنید مقدار این ویژگی نام نقشه می باشد .
<img src="url"
usemap="#name">
و با انجام مراحل فوق تصویر به عنوان نقشه در سند قرار می گیرد.
source یک نقشه تصویری:
<html>
<head>
<title>client_side
image</title>
</head>
<body>
<map name="map1">
<area shape="rect"
coords="100,10,170,40" href="A.html">
<area shape="rect"
coords="180,10,250,40" href="B.html">
</map>
<h1>This
is a smple client imagemap</h1>
clicking on any letter will bring you to description of that letter
<img src="web.gif" usemap="#map1">
</body>
</html>
برخی کاربران ممکن است نقشه ها را به دلایلی دریافت نکنند بنابر این بهتر است نقشه
ها را درون پیوندی قرار داد که مقصد پیوند یک فایلی با پیغام خطا باشد
< A herf="error.html">
<img src="web.gif"usemap="map1">
--- انواع فرمها:
برای ساختن یک پرسش نامه باید از دو دستور <frome> و </frome>
استفاده کنید . سپس برای مشخص کردن هر جز آن باید از یک دستور <input> استفاده نمایید . از ویژگی name دستور form می توانید برای پرسشنامه خود یک نام برگزینید .
اطلاعات تکمیل شده پرسشنامه را می توان برای سرویسگر (server) فرستاد تا بر روی آنها عملیاتی انجام شود . به این منظور باید با
استفاده از ویژگی action در
فرم URL برنامه ای را که باید
عملیات مزبور را بر روی این اطلاعات انجام دهد ذکر نمایید اگر چه این برنامه
تقریبا به هر زبانی می تواند نوشته شود .
همچنین می توان با استفاده از ویژگی method دستور form روشی
را که این اطلاعات برای سرویسگر فرستاده می شوند تعیین کرد . مقادیر قابل قبول این
ویژگی get و post هستند . پیش فرض مرورگر ویژگی get است .
<form action="http://www.company.com/bin/cbin" method="get" name=" "></form>
_نکته: در صورتیکه بعداً بخواهید به این پرسشنامه ارجاعی داشته باشید(مثلاً به
وسیله یک تابع جاوا اسکریپت) استفاده از نام هر پرسشنامه از ایجاد اشتباه جلوگیری
می کند.
ابزارهای قابل استفاده در فرم ها
1. Checkbox:
ایجاد گزینه های انتخاب شونده که می توان همزمان دو یا چند مورد را در حالت انتخاب
شده داشت.با استفاده از دستور checked می
توان دکمه را در حالت انتخاب شده قرار داد.
<input type="Checkbox"checked>
2. Radiobutton: (دکمه های رادیویی)
ایجاد دکمه های انتخاب شونده که فقط یکی از آن ها را می توان انتخاب کرد. با
استفاده از دستور checked می
توان دکمه را در حالت انتخاب شده قرار داد.
<input type="Radio"checked>
3. Pulldown menu :(منوی باز شونده)
<select size="option+1">
<option>what
is your last name?
<option>what
is your first name?
</select>
با استفاده از صفت value در
دستور ایجاد منوی باز شونده میتوانیم مقداری تعیین کنیم تا هنگام ظاهر شدن فرم در
مرورگر این مقدار انتخاب شود.
4. Button :
<input type="Button" value="عنوان" name="button1">
اگر بخواهیم کلیدهایی را که ساخته ایم link نیز باشد باید کلمه disabled را به دستور اضافه کنیم. با این کار کلید از حالت فعال بیرون می
آید.
<a href="http://somayeh-naz.blogfa.com"><input type="Button" value="..."disabled></a>
در مورد کلیدها می توان از style
دستوری نیز استفاده کرد.
<input type="Button" ...
style="background-color:رنگ ; font-size:عدد; font-family:نوع فونت">
5. password
این دستور برای قرار دادن password در
صفحه ایجاد می شود که در آن *ستاره تایپ می کنند
کاراکتر هایی که در این جعبه تایپ می شوند به صورت ستاره نشان داده می شوند
<input type="password">
6.edit:
این دستور مستطیلی را ایجاد می کند که در آن می توان عدد یا حروف نوشت . ( مثل
قسمت id در email )
<input type="edit">
7.submit:
این دستور برای ارسال داده ها به برنامه تعریف شده در url فرم به کار می رود
<input type="bitton"value="submit">
<input type="submit">
تذکر : از آنجایی که مطالب پر شده توسط کاربر باید ارسال گردد بهتر است که به هر
کدام از این کلید ها یک نام اختصاص داده شود که بعدا از آن استفاده شود.
8.textarea:
در صورتی که بخواهید ورودیهای متن چند خطی ایجاد کنید باید از دستورات <textarea> و</textarea> استفاده کنید.
<textarea cols="" rows=""
name="" wrap="off/virtual"
scrolling="yes/no">
write your comments here.
</textarea>
1- با استفاده از ویژگی name یک
نام به آن اختصاص می دهیم.
2- با استفاده از ویژگی cols و rows این دستور می توانید تعداد سطرها و ستون هاس
مورد نظر را تعیین نمایید .
3- ویژگی scrolling اگر
برابر yes باشد کنار صفحه اسکرول
ایجاد می شود.
4- ویژگی wrap اگر در حالت off باشد متن دنبال هم نوشته می شود ولی اگر در
حالت virtual باشد scroll ایجاد نمی شود . در حالت
افقی متن با رسیدن به انتهای خط شکسته شده و به خط بعدی میرود .
تذکر : استفاده از دکمه های تصویری به جای submit
با استفاده از صفت type که
مقدارش " image
" تعیین میشود می توان از دگمه تصویری برای تحویل فرم استفاده کرد این دگمه
نه تنها فرم را تحویل میدهد بلکه مختصات جایی از تصویر را که کاربر کلیک کرده است
ارسال می نماید تصویر نیز با صفت src مشخص
می شود . اغلب صفاتی که برای دستور <img> بکار برده شدند برای این شکل از کاربرد <input>
قابل استفاده است .
همانند سایر کاربردهای دستور <input>
استفاده از name اهمیت دارد دستور زیر
مثالی از دگمه تحویل فرم است :
<input type="image" src="car.gif"
name="sales">
--- گرفتن فایل از روی اینترنت (Download)
<a hrfe="file.exe">download</a>
این دستور زمانی به کار میرود که برنامه ای را کاربر در سایت خود قرار دهد تا
کاربران بتوانند با save کردن
آن در سیستم خود از آن استفاده کنند .
نکته:
در قسمت href دستور فوق باید آدرس کامل
برنامه ذکر شود و نیز در هنگام upload کردن
برنامه به صورت فایل جداگانه ای همراه با صفحه upload گردد .
_علامت کپی رایت :
برای علامت کپی رایت در صفحه از این دستور استفاده می کنیم :
©
کافیست در جلوی این دستور تاریخ و اطلاعات مربوط به تولید ایجاد سایت را بنویسید
آنگاه متن نوشته شده در کنار علامت © قرار می گیرد که تاریخ و اطلاعات مربوط به
تولید سایت را نشان می دهد که در هر سایتی لازم است.
_ صدا (sound) :
<bg sound src=" نام فایل.mid" loop=" ">
با استفاده از این دستور که بعد از <html> یا بعد از <head> نوشته می شود می توان روی صفحات خود موسیقی یا هر صدای مورد
علاقه خود را ایجاد کرد
نکته: پسوند فایل مورد نظر باید mid
باشد.
loop: با این ویژگی تعداد دفعات
تکرار صدا را مشخص می کنیم که اگر برابر infinite باشد یعنی بینهایت بار تکرار شود .
_ ویدئو کلیپ
دستور وارد کردن ویدئو کلیپ (انیمیشن ) به فرم زیر می باشد :
<img dynsrc="نام کلیپ.avi" width=" " height="
">
دو صفت width و heigth طول و عرض ویدئو کلیپ را مشخص می کند.
--- style
برای اینکه کنترل بیشتری بر روی صفحات داشته باشیم می توانیم از شیوه نامه استفاده
کنیم که سه روش برای آن وجود دارد :
1. شیوه نامه های دستوری :
که شامل style های دستوراتی همچون <font> و <h> و ... می باشد.
تذکر : این نوع style فقط
در دستوری که در آن قرار داده شده است عمل می کند .
2. style صفحه ای :
برای استفاده از شیوه نامه صفحه ای از دستورات <style> و </style>
استفاده می شود که در بین دو دستور <head> و </head>
قرار می گیرد چون شکل های گوناگونی از شیوه نامه ها ممکن است مورد استفاده قرار
گیرند که متفاوت از فرمت استاندارد css
باشند . در دستور style <style> باید با استفاده از صفت type مشخص کنید که از چه فرمتی استفاده خواهید
کرد بنابر این برای استفاده از فرمت css صفت type را
به صورت type "text/css" در دستور style بکار ببرید. شایان ذکر است که بعضی از
مرورگر های قدیمی از شیوه نامه ها پشتیبانی نمی کنند در این صورت آنها را عیناً در
صفحه وب نمایش میدهند که این کار چندان جالبی نیست . برای جلوگیری از این وضعیت
شیوه نامه را داخل دستور توضیحات قرار می دهیم .
<html>
<head>
<title>title</title>
<style type="text/css">
<!
h1 {font-family:نوع فونت; font-size:سایز فونت;...}
p {font-family:نوع فونت; font-size:سایز فونت;...}
...
>
</style>
</head>
<body>
</body>
</html>
3. style فایلی :
در این فایل style
جداگانه ای تهیه شده و با نام دلخواه و پسوند css ذخیره می شود .
css. نام فایل سپس در صفحه ای
که به این style احتیاج داریم با دستورlink ارجا می کنیم به فایلی که آن style در آن قرار دارد و متن های ما بر اساس style ها نوشته می شود .
rel: رابطه بین فایل html و فایل حاوی شیوه نامه را نام گذاری می کند
.
href: تعیین می کند که چه فایلی
باید مورد استفاده قرار گیرد .
