آشنایی با Css ,Html

Amir Shahbazzadeh · بعد از ظهر 22:26:22 - 06/27/11

[b• ساختار دستورات html
• دستورات ساختار سند html
• پس زمينه
• متن
• کاراکتر هاي ويژه
• آراينده ها
• استفاده از تصاوير گرافيکي در صفحات وب
• استفاده از پيوند(link) در صفحات وب
• طبقه بندي اطلاعات با استفاده از ليستها
• استفاده از جداول براي سازماندهي اطلاعات
• تلاقي صفحات : ( روش ساختن زير صفحه ها )
• نقشه ها ( image maps )
• انواع فرمها
• گرفتن فايل از روي اينترنت (Download)
• style [/b]
________________________________________

ساختار دستورات html
هر دستور html بين دو علامت< و > قرار مي گيرد و به اين ترتيب متن از متن عادي متمايز مي شود. اکثر دستورات html به صورت جفت هستند و شامل يک دستور آغازين و يک دستور پاياني مي شوند. قبل از دستورات پاياني / قرار مي گيرد. بعضي از دستورات html نيز به صورت تکي هستند اين دستورات به جاي اينکه با احاطه متن آنرا علامتگذاري کنند در واقع علامتي محسوب مي شوند که مرورگر در مواجهه با آنها دستور خاصي را انجام مي دهد مثلا ً دستور
که به مرورگر مي فهماند که بقيه متن را بايد در سطر بعدي بنويسد که اين دستور به صورت تکي مي باشد :
this is the first line
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/> مي توان شروع و پايان يک پاراگراف را تعيين کرد. به بيان ديگر مرورگر تمامي متني را که بين اين دو دستور قرار داشته باشد را به صورت يک پاراگراف واحد در صفحه وب نمايش خواهد داد.
_از
براي تعيين خطوط جديد به کار مي رود ، در واقع وقتي مرورگر به اين دستور برخورد مي کند سطر موجود را رها و به سطر بعدي مي رود. اين دستور فاقد
ميباشد.
_براي تعيين اندازه متن 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:META4U-meta (http://META4U.com)>
_دستور ديگري که به کمک آن مي توانيد کنترل دقيقتري بر روي نحوه به نمايش در آمدن فونتها داشته باشيد دستور <font> مي باشد. به وسيله اين دستور مي توانيد اعمالي نظير تغيير نوع حروف ، تغيير اندازه و يا حتي تغيير آن به رنگ دلخواه را انجام دهيد.
<font face="نام فونت" size="عدد" color="نام رنگ يا شماره آن" >متن</font>
_بوسيله اين دستور مي توان خط هاي افقي ترسيم نمود. براي جدا کردن قسمت هاي مختلف متن از يکديگر اين دستور يک دستور تکي محسوب مي شود و دستور پاياني به شکل
ندارد . با استفاده از دو ويژگي 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 ميرود .
link
_ پيوند از يک صفحه به خود صفحه :
<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>
...

Amir Shahbazzadeh · بعد از ظهر 22:29:16 - 06/27/11

ممکن است بعضي از مرورگر ها فريم ها را نشناسند و کاربران زير صفحه ها را نبينند بوسيله اين تگ ميتوان مطالب را براي کاربران نمايش داد .
<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 را به دستور اضافه کنيم. با اين کار کليد از حالت فعال بيرون مي آيد.
<input type="Button" value="..."disabled>
در مورد کليدها مي توان از 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> [/b][/b]
3. style فايلي :
در اين نوشته هstyle جداگانه اي تهيه شده و با نام دلخواه و پسوند css ذخيره مي شود .
css. نام فايل سپس در صفحه اي که به اين style احتياج داريم با دستورlink ارجا مي کنيم به فايلي که آن style در آن قرار دارد و متن هاي ما بر اساس style ها نوشته مي شود .
rel: رابطه بين فايل html و فايل حاوي شيوه نامه را نام گذاري مي کند .
href: تعيين مي کند که چه فايلي بايد مورد استفاده قرار گيرد .

پلاگین توسعه و ویرایش زبان های برنامه نویسی CSS, HTML, and JavaScript با Firebug نویسنده Amir Shahbazzadeh در مرورگر فاير فاكس, Firefox Browser	0 ارسال 1475 مشاهده	آخرین ارسال: قبل از ظهر 02:34:22 - 08/23/13 توسط Amir Shahbazzadeh
اموزش جامع html نویسنده mohammad a در زبان های برنامه نویسی	1 ارسال 2560 مشاهده	آخرین ارسال: بعد از ظهر 15:02:22 - 10/20/11 توسط mohammad a
معرفی کامل HTML نویسنده Zohreh Gholami در زبان های برنامه نویسی	4 ارسال 3228 مشاهده	آخرین ارسال: قبل از ظهر 11:58:31 - 09/06/11 توسط Zohreh Gholami
کد HTML گوگل پلاس(Google +1) نویسنده Amir Shahbazzadeh در زبان های برنامه نویسی	0 ارسال 3121 مشاهده	آخرین ارسال: بعد از ظهر 19:45:33 - 08/04/11 توسط Amir Shahbazzadeh
ریدایرکت مستقیم یک صفحه با استفاده از کد اچ تی ام ال HTML نویسنده متا در زبان های برنامه نویسی	0 ارسال 1630 مشاهده	آخرین ارسال: بعد از ظهر 15:26:32 - 08/08/17 توسط متا
(JavaScript )معرفی کدهای جاوا اسکریپت, HTML و... نویسنده Amir Shahbazzadeh در زبان های برنامه نویسی	59 ارسال 14288 مشاهده	آخرین ارسال: بعد از ظهر 20:18:02 - 08/04/11 توسط Amir Shahbazzadeh
تبدیل اسناد پی دی اف به اچ تی ام ال با Free PDF to HTML Converter نویسنده Amir Shahbazzadeh در نرم افزار تبدیل فرمت فایل, File Converter	0 ارسال 2544 مشاهده	آخرین ارسال: بعد از ظهر 18:14:51 - 04/27/14 توسط Amir Shahbazzadeh

آشنایی با Css ,Html

Amir Shahbazzadeh

Amir Shahbazzadeh

اشتراک پست

ارسال های مرتبط

پلاگین توسعه و ویرایش زبان های برنامه نویسی CSS, HTML, and JavaScript با Firebug

اموزش جامع html

معرفی کامل HTML

کد HTML گوگل پلاس(Google +1)

ریدایرکت مستقیم یک صفحه با استفاده از کد اچ تی ام ال HTML

(JavaScript )معرفی کدهای جاوا اسکریپت, HTML و...

تبدیل اسناد پی دی اف به اچ تی ام ال با Free PDF to HTML Converter