آموزش HTML

پاسخ : آموزش HTML

[h=2]جدول های HTML[/h] تگ < th > :
از اين تگ برای ايجاد يک سر عنوان ( Header ) در بالای ستون های يک جدول استفاده می شود . متنی که قرار است به عنوان سر عنوان قرار بگيرد ، در درون تگ باز و بسته < th > تعريف شده و معمولا به صورت درشت ( Bold ) توسط مرورگر نمايش داده می شود .
تگ سر عنوان بايد در اولين سطر جدول قرار گرفته و برای هر ستون به طور مجزا تعريف شوند .
مثال : جدول زير دارای 2 ستون است که برای هر ستون آن يک سر عنوان ( Header ) مجزا تعريف شده است :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] < table width = "400px" border = "1" >
< tr >
< th >
Header 1
< /th >
< th >
Header 2
< /th >
< /tr >
< tr >
< td >
ستون 1
< /td >
< td >
ستون 2
< /td >
< /tr >
< /table > [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] [TABLE="width: 400"]
[TR]
[TH] Header 1 [/TH]
[TH] Header 2 [/TH]
[/TR]
[TR]
[TD] ستون 1 [/TD]
[TD] ستون 2 [/TD]
[/TR]
[/TABLE]
[/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خصوصيات تگ Th
[/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] abbr [/TD]
[TD="class: prbody"] متن
Text [/TD]
[TD="class: prbody"] با استفاده از اين خاصيت می توان يک عبارت خلاصه شده در مورد محتويات خانه جدول تعيين کرد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] align [/TD]
[TD="class: prbody"] left
right
center
Justify
Char [/TD]
[TD="class: prbody"] نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
4) Justify : در کل عرض شی گسترش داده می شود .
5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] axis [/TD]
[TD="class: prbody"] نام
Text [/TD]
[TD="class: prbody"] يک نام را برای خانه جدول تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] bgcolor [/TD]
[TD="class: prbody"] نام رنگ
color name [/TD]
[TD="class: prbody"] رنگ پس زمينه خانه جدول را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] char [/TD]
[TD="class: prbody"] کاراکتر
Character [/TD]
[TD="class: prbody"] کاراکتری که قرار است متن دورن خانه جدول حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] charoff [/TD]
[TD="class: prbody"] Pixel
درصد % [/TD]
[TD="class: prbody"] میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون خانه جدول را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] colspan [/TD]
[TD="class: prbody"] عدد
Number [/TD]
[TD="class: prbody"] تعداد خانه های که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به قسمت توضيحات colspan برويد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] height
[/TD]
[TD="class: prbody"] pixel
[/TD]
[TD="class: prbody"] میزان ارتفاع خانه جدول را تعيين می کند . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] nowrap
[/TD]
[TD="class: prbody"] nowrap
[/TD]
[TD="class: prbody"] تعيين می کند که اگر پهنای خانه جدول از پهنای متن درون آن کمتر بود ، خطوط متن شکسته شده و برای هم اندازه شدن با پهنای خانه جدول به بخش های کوچکتر تقسيم شوند يا خير . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] rowspan
[/TD]
[TD="class: prbody"] عدد
Number [/TD]
[TD="class: prbody"] تعداد سطرهايی که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به قسمت توضيحات rowspan برويد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] scope [/TD]
[TD="class: prbody"] Col
Colgroup
Row
Rowgroup [/TD]
[TD="class: prbody"] مشخص می کند که اين خانه جدول اطلاعاتی را راجع به بقيه سطری که آن را در برگرفته ( Row ) ، يا بقيه ستونی که اين خانه جز آن است ( Col ) ، يا گروه سطرهايی که آن خانه را در بر گرفته اند ( Rowgroup ) و يا گروه ستون هايی که اين خانه جزء آن است ( Colgroup ) شامل می شود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] valign [/TD]
[TD="class: prbody"] top
bottom
middle
baseline [/TD]
[TD="class: prbody"] نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند .
- top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
- bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
- middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] width [/TD]
[TD="class: prbody"] pixel
% درصد [/TD]
[TD="class: prbody"] ميزان پهنا و عرض جدول را تعيين می کند . [/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش HTML

[h=2]جدول های HTML[/h] تگ های < thead > , < tbody > , < tfoot > :
اين تگ ها برای دسته بندی سطرهای يک جدول به کار می روند .
تگ < thead > برای ايجاد و دسته بندی سطر سر عنوان ( Header ) استفاده می شود . تگ < tbody > شامل محتويات و بدنه اصلی جدول شده و تگ < tfoot > هم برای عنوان انتهايی جدول مورد استفاده قرار می گيرد .
نکته : امروز به دليل پشتيبانی نامناسب مرورگرها و عدم کارائي از اين تگ ها کمتر استفاده می شود .
نکته 2 : هر يک از تگ های فوق فقط در درون تگ < table > قابل استفاده بوده و حتما بايد دارای حداقل يک تگ < tr > باشند .
نکته 3 : در هنگام استفاده از اين تگ ها ، بايد به ترتيب قرار گيری آنها در درون تگ < table > به شرح زير دقت کرد :
1 . < thead > 2 . < tbody > 3 . < tfoot >
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خصوصيات تگ های thead , tbody , tfoot[/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت[/TD]
[TD="class: prname"] نوع خاصيت[/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] align[/TD]
[TD="class: prbody"] left
right
center
Justify
Char[/TD]
[TD="class: prbody"] نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
4) Justify : در کل عرض شی گسترش داده می شود .
5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] char[/TD]
[TD="class: prbody"] کاراکتر
Character[/TD]
[TD="class: prbody"] کاراکتری که قرار است متن دورن سطر حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] charoff[/TD]
[TD="class: prbody"] Pixel
درصد %[/TD]
[TD="class: prbody"] میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] valign[/TD]
[TD="class: prbody"] top
bottom
middle
baseline [/TD]
[TD="class: prbody"] نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند .
- top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
- bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
- middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . [/TD]
[/TR]
[/TABLE]
مثال : در جدول زير سطرهای جدول به 3 گروه مجزا تقسيم شده است .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example
[/TD]
[/TR]
[TR]
[TD="class: body"] < table border="1" width = "400px" >
< thead >
< tr >
< td >
This text is in the THEAD
< /td >
< /tr >
< /thead >
< tbody >
< tr >
< td >
This text is in the TBODY
< /td >
< /tr >
< /tbody >
< tfoot >
< tr >
< td >
This text is in the TFOOT
< /td >
< /tr >
< /tfoot >
< /table >
[/TD]
[TD="class: header"] کد[/TD]
[/TR]
[TR]
[TD="class: body, align: center"] [TABLE="width: 400"]
[TR]
[TD] This text is in the THEAD[/TD]
[/TR]
[TR]
[TD] This text is in the TBODY[/TD]
[/TR]
[TR]
[TD] This text is in the TFOOT[/TD]
[/TR]
[/TABLE]
[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش HTML

[h=2]جدول های HTML[/h] تگ < Colgroup > , < Col > :
تگ < colgroup > برای دسته بندی گروهی از ستون های يک جدول ( تگ های td ) جهت قالب بندی و تعيين خصوصيات ، استفاده می شود . تگ < colgroup > ، فقط خصوصيات را نگهداری کرده و هيچگونه خروجی بر روی صفحه ندارد . به ازای هر ستونی که قرار است توسط اين تگ دسته بندی شود ، يک تگ < col > درون آن ايجاد می شود .
نکته : تگ < colgroup > فقط درون تگ < table > قابل استفاده است .
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خصوصيات تگ colgroup[/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت[/TD]
[TD="class: prname"] نوع خاصيت[/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] align[/TD]
[TD="class: prbody"] left
right
center
Justify
Char[/TD]
[TD="class: prbody"] نحوه ترازبندی و قرار گيری محتويات درون گروه خانه های جدول را مشخص می کند که 5 حالت دارد :
1) left : چپ
2) right : راست
3) center : وسط
4) Justify : در کل عرض شی گسترش داده می شود .
5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] char[/TD]
[TD="class: prbody"] کاراکتر
Character[/TD]
[TD="class: prbody"] کاراکتری که قرار است متن دورن گروه خانه های جدول حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] charoff[/TD]
[TD="class: prbody"] Pixel
درصد %[/TD]
[TD="class: prbody"] میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] span[/TD]
[TD="class: prbody"] Number
عدد[/TD]
[TD="class: prbody"] تعداد خانه هايی که قرار است اين تگ به وسيله تگ درونی col پوشش دهد را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] valign[/TD]
[TD="class: prbody"] top
bottom
middle
baseline [/TD]
[TD="class: prbody"] نحوه ترازبندی عمودی محتويات درون گروه خانه خانه های جدول را تعيين می کند .
- top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
- bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
- middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند . [/TD]
[/TR]
[/TABLE]
مثال : اين مثال يک < colgroup > را که دارای 3 ستون با پهناهاي متفاوت است ، نمايش می دهد . در قصمت اول ، توسط هر تگ < col > خاصيت پهنای ستون تعيين شده و در قسمت دوم آن خواص به ترتيب به خانه های جدول اعمال شده اند :
توجه : امروزه با امکانات ارائه توسط CSS از اين گونه تگ ها کمتر استفاده می شود .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] < table border="1" width = "300px" >
< colgroup span="3" >
< col width="50px" > < /col >
< col width="100px" > < /col >
< col width="150px" > < /col >
< /colgroup >
< tr >
< td > خانه 1 < /td >
< td > خانه 2 < /td >
< td > خانه 3 < /td >
< /tr >
< /table >
[/TD]
[TD="class: header"] کد[/TD]
[/TR]
[TR]
[TD="class: body, align: center"] [TABLE="width: 300"]
[TR]
[TD] خانه 1[/TD]
[TD] خانه 2[/TD]
[TD] خانه 3[/TD]
[/TR]
[/TABLE]
[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[/TABLE]
[HR][/HR] [HR][/HR]

 

پاسخ : آموزش HTML

[h=2]ليست های HTML[/h] در صفحات Html ، می توان انواع ليست های ترتيبی و نشانه ای ( بدون ترتيب ) را ايجاد کرد .
ليست های نشانه ای ( بدون ترتيب ) ، تگ < ul > :
يک ليست نشانه ای ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک نشانه ( Bullet ) قرار می گيرد .
برای ايجاد ليست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای ليست های بدون ترتيب استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: header"] کد[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[TR]
[TD="class: body"] < ul > List of Lessons
< li > English < /li >
< li > MathMatic < /li >
< li > History < /li >
< /ul > [/TD]
[TD="class: body, align: left"] List of Lessons

• English
• MathMatic
• History

[/TD]
[/TR]
[/TABLE]

[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خصوصيات تگ ul[/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت[/TD]
[TD="class: prname"] نوع خاصيت[/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] type[/TD]
[TD="class: prbody"] disc
square
circle[/TD]
[TD="class: prbody"] نوع نشانه ( شکل ) ليست را مشخص می کند ، که يکی از موارد زير می تواند باشد :
1) disc : دایره های توپر
2) circle : دايره های توخالی
3) square : مربع [/TD]
[/TR]
[/TABLE]

[HR][/HR] ليست های ترتيبی ، تگ < ol > :
يک ليست ترتيبی ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک شماره يا حرف ( نماد نشانه گذاری ) قرار گرفته ، که با معرفی هر آيتم جديد شمارنده يا حرف يک واحد افزايش می يابد .
برای ايجاد ليست های ترتيبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای ليست های ترتيبي استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است .
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: header"] کد[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[TR]
[TD="class: body"] < ol > List of Lessons
< li > English < /li >
< li > MathMatic < /li >
< li > History < /li >
< /ol > [/TD]
[TD="class: body, align: left"] List of Lessons

1. English
2. MathMatic
3. History

[/TD]
[/TR]
[/TABLE]
نکته : همجنين می توان ليست ها را به صورت تو در تو نيز ايجاد کرد . در اين حالت انواع ليست های ترتيبی و نشانه ای را می توان در درون يکديگر استفاده کرد . به مثال زير دقت کنيد :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: header"] کد[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[TR]
[TD="class: body"] < p > List of Programing Languges < /p >
< ul >
< li > Scripting Languages
< ol >
< li > Java Script < /li >
< li > VB Script < /li >
< /ol >
< /li >
< li > Non-Scripting Languages
< ol >
< li > Visual Basic < /li >
< li > ASP.NET < /li >
< li > Visual C# < /li >
< /ol >
< /li >
< /ul > [/TD]
[TD="class: body"] List of Programing Languges

• Scripting Language
  1. Java Script
  2. VB Script
• Non-Scripting Languages
  1. Visual Basic
  2. ASP.NET
  3. Visual C#

[/TD]
[/TR]
[/TABLE]
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خصوصيات تگ ol[/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت[/TD]
[TD="class: prname"] نوع خاصيت[/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] start[/TD]
[TD="class: prbody"] number
عدد [/TD]
[TD="class: prbody"] عدد يا حرف شروع ليست را معين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] type[/TD]
[TD="class: prbody"] A
a
I
i
1 [/TD]
[TD="class: prbody"] نوع نمايش عدد يا حرف نشانه گذاری ليست را مشخص می کند ، که يکی از حالت های زير می تواند باشد :
1) A : حروف بزرگ انگليسی
2) a : حروف کوچک انگليسی
3) I : حروف بزرگ يونانی
4) i : حروف کوچک يونانی
5) 1 : اعداد انگليسی [/TD]
[/TR]
[/TABLE]
[HR][/HR] ليست های معنی ، تگ < dd > و < dt > و < dl > :
ليست های معنی ، مجموعه ای از چندين آيتم متفاوت هستند که می توان همانند کتاب های معنی واژه ، برای هر يک از آنها يک توضيح ارائه داد .
برای ايجاد ليست های معنی ، از تگ < dl > استفاده می شود . هر يک از آيتم های ليست که می خواهيم توضيحی راجع به آن ارائه دهيم در يک تگ < dt > و متن توضيح مربوطه در يک تگ < dd > بلافاصله بعد از آن می آيد .
مثال : به مثال زير توجه کنيد . يک ليست را درباره 3 واژه نمايش می دهد :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: header"] کد[/TD]
[TD="class: header"] خروجی[/TD]
[/TR]
[TR]
[TD="class: body"] < dl >
< dt > HTML < /dt >
< dd > Client Side Language < /dd >
< dt > ASP.NET < /dt >
< dd > Server Side Language < /dd >
< dt > Java Script < /dt >
< dd > Client Side Scripting Language < /dd >
< /dl > [/TD]
[TD="class: body, align: left"] HTMLClient Sile LanguageASP.NETServer Side LanguageJava ScriptClient Side Scripting Language [/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش HTML

[h=2]فرم های HTML[/h] تگ فرم < form > :
يک فرم HTML ، فضايی است که می تواند کنترل های مختلف را در خود جای دهد .
کنترل های HTML ، ابزارهايي هستند که کاربر را قادر می سازند تا داده های خود را از طريق کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ... در فرم وارد کرده و سپس آنها را به مقصد ارسال کند .
يک فرم با تگ < form > ايجاد شده و ساير کنترل های درون آن تعريف می شوند . برای ارسال اطلاعات يک فرم ، بايد دکمه فرمان Submit درون آن ايجاد کرد که با کليک بر روی آن ، اطلاعات فرم ارسال خواهد شد .
نکته : کنترل های درون فرم های HTML ، توسط تگ < input > ايجاد می شوند . برای دريافت اطلاعات درباره نحوه استفاده از اين تگ ، به صفحه تگ < input > برويد .
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خواص مهم تگ form [/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] action [/TD]
[TD="class: prbody"] URL
مسير فايل [/TD]
[TD="class: prbody"] آدرس مقصدی است که در هنگام کليک بر روی دکمه Submit فرم اطلاعات خود را به آنجا ارسال می کند. [/TD]
[/TR]
[TR]
[TD="class: prbody"] accept [/TD]
[TD="class: prbody"]
[/TD]
[TD="class: prbody"] يک ليست از مجموعه قابل قبول برای اين فرم است ، که سرور پردازش کننده فرم آنها را قبول می کند .هر يک از اين مقادير به وسيله يک کاما از هم جدا می شوند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] accept - charset [/TD]
[TD="class: prbody"] char list
ليست کاراکترها [/TD]
[TD="class: prbody"] ليست مجموعه کاراکترهای مجاز برای اين فرم است که هر کدام توسط يک کاما از هم جدا می شوند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] enctype [/TD]
[TD="class: prbody"] Mime Type
نوع داده ای [/TD]
[TD="class: prbody"] روش استاندارد کدينگ اطلاعات فرم را جهت ارسال تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] method [/TD]
[TD="class: prbody"] post
get [/TD]
[TD="class: prbody"] متد Http مورد استفاده برای ارسال اطلاعات فرم به مقصد را مشخص می کند ، که می تواند 2 حالت زير را داشته باشد :
get : اين متد محتويات کنترل های فرم را به صورت زير ارسال می کند . منظور از URL آدرس صفحه مقصد است : URL ? نام کنترل2 = مقدار 2 & نام کنترل 1 = مقدار 1 & ... .
نکته : چنانچه مقادير کنترل های فرم شامل کاراکترهايی غير از کاراکترهای کد اسکی بوده يا طول آنها بيش از 100 کلمه باشد ، بايد از روش post برای ارسال اطلاعات فرم استفاده کرد .
post : اين روش اطلاعات کنترل های فرم را به صورت پک کامل به آدرس مقصد ارسال می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] name [/TD]
[TD="class: prbody"] name
نام [/TD]
[TD="class: prbody"] يک نام منحصر به فرد برای فرم در صفحه تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] target [/TD]
[TD="class: prbody"] _blank
_parent
_self
_top [/TD]
[TD="class: prbody"] نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است:
- blank : لينک در يک پنجره جديد باز خواهد شد .
- self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .
-parent : لينک در قاب اصلی يا مادر باز خواهد شد .
-top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد . [/TD]
[/TR]
[/TABLE]
مثال : در مثال زير يک فرم حاوی 2 کادر متن و يک دکمه فرمان Submit طراحی شده است :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] < form action="http://www.DeveloperStudio.ir/Default.aspx" >
Name : < input type="text" name="txtname" /> < br / >
Family : < input type="text" name="txtfamily" /> < br / >
< input type="submit" name="cmdsubmit" value="Send Information" />
</form > [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body"] Name :
Family :

[/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]
[HR][/HR]

 

پاسخ : آموزش HTML

[h=2]فرم های HTML[/h] تگ < input > :
تگ < input > برای ساختن انواع کنترل های HTML از قبيل کادر های متن ، ليست های بازشو ، دکمه های فرمان و انتخابی و ... درون فرم ها استفاده می شود . نوع کنترل توسط خاصيت Type در درون تگ input مشخص می شود .
نکته : تگ < input > بايد در درون تگ < form > استفاده شود .
شکل کلی تعريف يک کنترل به صورت زير است :
< input type ="نوع کنترل" name="يک نام منحصر به فرد" >
مثال : < input type =" text " name=" txtname " >
[TABLE="class: pr, width: 100%"]
[TR]
[TD="class: header, colspan: 3"] خواص مهم تگ input [/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] accept [/TD]
[TD="class: prbody"]
[/TD]
[TD="class: prbody"] يک ليست از مجموعه قابل قبول برای اين کنترل است ، که سرور پردازش کننده فرم آنها را قبول می کند .هر يک از اين مقادير به وسيله يک کاما از هم جدا می شوند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] alt [/TD]
[TD="class: prbody"] Text
متن [/TD]
[TD="class: prbody"] يک متن جايگزين را در صورت عدم نمايش کنترل توسط مرورگر ، نمايش می دهد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] checked [/TD]
[TD="class: prbody"] checked [/TD]
[TD="class: prbody"] مشخص می کند که اگر کنترل مورد نظر يک دکمه انتخابي ( radio button يا chechbox ) باشد ، به صورت پيش فرض انتخاب شده باشد يا خير . [/TD]
[/TR]
[TR]
[TD="class: prbody"] disabled [/TD]
[TD="class: prbody"] disabled [/TD]
[TD="class: prbody"] چنانچه مقدار اين خاصيت بر روی disabled تنظيم شده باشد ، آن کنترل غير فعال بوده و کاربر عملا امکان استفاده از آن را نخواهد داشت .
نکته : با کنترل از نوع hidden به کار نمی رود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] maxlength [/TD]
[TD="class: prbody"] عدد
number [/TD]
[TD="class: prbody"] جنانچه کنترل مورد نظر يک کادر متن ( textbox ) باشد ، حداکثر تعداد کاراکترهايی که می توان در آن کنترل وارد کرد را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] name [/TD]
[TD="class: prbody"] name
نام [/TD]
[TD="class: prbody"] يک نام منحصر به فرد برای کنترل در فرم در صفحه تعيين می کند .
نکته : تعيين و مقدار دهی اين خاصيت برای کنترل های button , checkbox , file , hidden , image , password , text و radio ضرروی است . [/TD]
[/TR]
[TR]
[TD="class: prbody"] readonly [/TD]
[TD="class: prbody"] readonly [/TD]
[TD="class: prbody"] در اين حالت کنترل به صورت فقط خواندنی در می آيد . در صورتی که مقدار اين خاصيت برابر readonly تنظيم شده باشد ، کاربر مجاز به تغيير متن درون کادرهای متني ( textbox ) و يا تغيير وضعيت دکمه های انتخابی ( checkbox يا radiobutton ) نخواهد بود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] size [/TD]
[TD="class: prbody"] عدد
تعداد کارکتر [/TD]
[TD="class: prbody"] سايز و اندازه کاراکترهای کنترل را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] src [/TD]
[TD="class: prbody"] URL
مسير فايل [/TD]
[TD="class: prbody"] اين خاصيت فقط در مورد کنتزل image به کار رفته و مسير عکس کنترل را مشخص می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] type [/TD]
[TD="class: prbody"] button
checkbox
file
hidden
image
password
radio
reset
submit
text [/TD]
[TD="class: prbody"] اين خاصيت نوع کنترل را تعيين می کند که يکی از اين موارد زير می تواند باشد :
button : دکمه فرمان .
checkbox : کادر يا دکمه گزينشی .
file : يک فايل خارجی مثل يک صفحه اينترنتی و ... .
hidden : يک کنترل مخفی دلخواه را بر روی صفحه ايجاد می کند .
image : يک کنترل برای نمايش عکس يا تصوير ايجاد می کند .
password : يک کادر متن است که به جای نمايش اعداد يا حروف وارد شده ، ستاره يا دايره نمايش می دهد تا اطلاعات ورودی توسط کاربر مخفی بماند .
radio : دکمه انتخابی .
reset : يک دکمه فرمان است که با کليک بر روی آن ، محتويات درون کليه کنترل های فرم پاک می شود .
submit : يک دکمه فرمان است که با کليک بر روی آن ، اطلاعات درون کنترل های فرم به مقصد ارسال می شود .
text : يک کادر متن ايجاد می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] value [/TD]
[TD="class: prbody"] مقدار [/TD]
[TD="class: prbody"] اين خاصيت برای کنترل های مختلف ، حالت های زير را دارد :

• در دکمه فرمان ها ( button , reset buttons , submit buttons ) :
  متن روی دکمه فرمان را تعيين می کند .
• در تصاوير ( images ) :
  مقداری که در هنگام ارسال اطلاعات فرم به جای مقدار عکس می نشيند .
• در دکمه های انتخابی ( radio buttons , checkbox ) :
  مقداری است که در صورت انتخاب کردن ( تيک زدن ) دکمه انتخابی در هنگام ارسال اطلاعات فرم به عنوان مقدار آن کنترل ارسال می شود .
• در کادرهای متن يا کنترل های مخفی( textbox , password , hidden ) :
  مقدار پيش فرض کنترل را تعيين می کند .

نکته : اين خاصيت با کنترل file به کار نمی رود . [/TD]
[/TR]
[/TABLE]
مثال : در مثال زير يک فرم جامع برای ثبت نام فرضی در يک سايت ايجاد کرده ايم و برخی از کنترل های HTML را در اين قسمت به ترتيب مشاهده می کنيد :

نکات مثال : نکات ذکر شده در مثال با عدد مشخص شده اند .

1. TextBox ها ابزارهايی هستند برای دريافت اطلاعات از کاربران .
2. از تمام کنترل های CheckBox موجود در يک فرم می توان هر تعداد دلخواه را انتخاب کرد ، ولي از ميان کنترل های Radio Buuton در هر لحظه می توان فقط يک دکمه را انتخاب کرد و با انتخاب يک دکمه بقيه دکمه ها از حالت انتخاب خارج می شوند . در اين حالت بايد Name کنترل هايي که می خواهيد در يک گروه باشند را يکسان تعيين کرده ولی Value آنها با هم متفاوت باشند .
3. دکمه فرمان Submit برای ارسال اطلاعات به مقصد و دکمه فرمان Reset برای پاک کردن کليه کنترل های فرم به کار می رود .
4. در کادر متنی که حالت Password دارد ، به جای نمايش کاراکترهای ورودی ، دايره يا ستاره نمايش داده می شود که معمولا برای مخفی ماندن رمزها از ديد به کار می رود .

[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] < form action="http://www.DeveloperStudio.ir/Default.aspx" method="post" >
[SUP]1[/SUP]Name : < input type="text" name="txtname" / > <br />
Family : < input type="text" name="txtfamily" /> <br />
[SUP]4[/SUP]Password : < input type="password" name="txtpass" / > <br />
[SUP]2[/SUP]Gender : <br />
Male < input type="radio" name="gender" value="male" / >
Female < input type="radio" name="gender" value="female" / > <br />
[SUP]2[/SUP]List of Lessons : <br />
Visual Basic < input type="checkbox" name="VB" disabled="disabled" checked="checked" / >
Visual C# < input type="checkbox" name="C#" / >
ASP.NET < input type="checkbox" name="asp" / >
SQL Server < input type="checkbox" name="sql" /><br / >
[SUP]3[/SUP]< input type="reset" name="cmdreset" value="Reset the Form" / > <br />
< input type="submit" name="cmdsubmit" value="Send Information" / > <br />
</form> [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body"] Name :
Family :
Password :
Gender :
Male Female
List of Lessons :
Visual Basic Visual C# ASP.NET SQL Server


[/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]
[HR][/HR]

 

پاسخ : آموزش HTML

[h=2]تصاوير HTML[/h] تگ < img > :
از تگ < img > برای قرار دادن عکس يا تصاوير بر روی صفحه استفاده می شود . تگ < img > فقط خصوصيات را نگهداری کرده و دارای تگ پايانی نيست ( در همان تگ ابتدايی بسته می شود ) .
نکات مهم تگ < img > :

1. در تگ < img > با خاصيت src به مکان فايل عکسی که قرار است نمايش داده شود اشاره می کنيم . تصاوير HTML در مکانی غير از صفحه اصلی ذخيره شده و در هنگام نمايش صفحه از مبدا ، فراخوانی می شوند .
2. با استفاده از خاصيت alt تگ < img > می توان از قبل يک متن جايگزين تعيين کرد ، که چنانچه مرورگر به هر دليلي نتوانست عکس را نمايش دهد ، به جای آن متن جايگزين را نشان دهد . اين متن در هنگام قرار گيری موس بر روی عکس در يک کادر زرد رنگ نيز نمايش داده می شود . متن جايگزين می تواند شامل توضيحی راجع به عکس اصلی باشد .

مثال : در مثال زير يک عکس به صفحه پيوند زده شده است ، برای مشاهده متن جايگزين موس را چند لحظه بر روی عکس نگه داريد :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] < img src ="http://www.DeveloperStudio.ir/Pic/imgexample.jpg" alt ="DeveloperStudio PICTURE" / > [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] [/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]
[TABLE="class: pr, width: 100%"]
[TR]
[TD="class: header, colspan: 3"] خواص مهم تگ img [/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] align [/TD]
[TD="class: prbody"] top
bottom
middle
left
right
[/TD]
[TD="class: prbody"] نحوه ترازبندی عکس را نسبت به محتويات ديگر صفحه و متن دور آن را تعيين می کند ، که يکی از حالت های زير می تواند باشد :
1) top : عکس در بالای متن و محتويات ديگر قرار می گيرد .
2) bottom : عکس در پايين متن و محتويات ديگر قرار می گيرد .
3) middle : عکس در وسط متن و محتويات ديگر قرار می گيرد .
4) left : عکس در سمت چپ متن و محتويات ديگر قرار می گيرد .
5) right : عکس در سمت راست متن و محتويات ديگر قرار می گيرد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] border [/TD]
[TD="class: prbody"] pixel [/TD]
[TD="class: prbody"] تعيين کننده ضخامت خط حاشيه دور عکس است . [/TD]
[/TR]
[TR]
[TD="class: prbody"] height [/TD]
[TD="class: prbody"] pixel
درصد % [/TD]
[TD="class: prbody"] ميزان ارتفاع عکس را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] hspace [/TD]
[TD="class: prbody"] pixel [/TD]
[TD="class: prbody"] ميزان فضايی خالی در 2 طرف راست و چپ عکس را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] ismap [/TD]
[TD="class: prbody"] URL
مسير فايل [/TD]
[TD="class: prbody"] تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت سرور استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] longdesc
[/TD]
[TD="class: prbody"] URL
مسير فايل [/TD]
[TD="class: prbody"] مسير فايلی که اطلاعات کاملی راجع به عکس مورد نظر نگهداری می کند را مشخص می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] src
[/TD]
[TD="class: prbody"] URL
مسير فايل [/TD]
[TD="class: prbody"] مسير کامل فايل نگهدارنده عکس را تعيين می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] usemap
[/TD]
[TD="class: prbody"] URL
مسير فايل [/TD]
[TD="class: prbody"] تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت کلاينت استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد . [/TD]
[/TR]
[TR]
[TD="class: prbody"] vspace [/TD]
[TD="class: prbody"] pixel [/TD]
[TD="class: prbody"] ميزان فضاي خالی به دور عکس در بالا و پايين را مشخص می کند . [/TD]
[/TR]
[TR]
[TD="class: prbody"] width [/TD]
[TD="class: prbody"] pixel
درصد % [/TD]
[TD="class: prbody"] میزان عرض عکس را تعيين می کند . [/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش HTML

[h=2]تصاوير HTML[/h] تگ < area > , < map > :
ايجاد يک نقشه تصويری ( يک عکس با نواحی مختلف قابل کليک شدن ) :
از تگ < map > برای ايجاد يک نقشه تصويری استفاده می شود . يک نقشه تصويری , عکسی است که ناحيه های متفاوت آن قابل کليک کردن بوده که می توان با کليک بر روی هر قسمت به يک صفحه يا فايل ديگر پيوند بر قرار کرد .
هر تگ < area > در درون تگ < map > ، می تواند تعيين کننده يک ناحيه مجزا قابل کليک شدن باشد که با تعيين مختصات آن بر روی عکس ، آن ناحيه مشخص می شود .

نکته مهم : ما ابتدا به وسيله تگ < map > و تگ های درونی < area > يک نقشه تصويری با نواحی مختلف قابل کليک شدن ايجاد کرده ، سپس آن نقشه را به يک عکس بر روی صفحه پيوند می دهيم .
برای اين کار خاصيت usemap را در تگ < img > عکس مورد نظر برابر نام Name يا id ، نقشه تصويری ايجاد شده قرار می دهيم . برای درک بهتر به مثال دقت کنيد :
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خواص مهم تگ map [/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] name
يا
id [/TD]
[TD="class: prbody"] name
نام [/TD]
[TD="class: prbody"] يک نام منحصر به فرد برای نقشه تصويری تعيين می کند . [/TD]
[/TR]
[/TABLE]
[TABLE="class: pr"]
[TR]
[TD="class: header, colspan: 3"] خواص مهم تگ area [/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] Coords [/TD]
[TD="class: prbody"]
[/TD]
[TD="class: prbody"] ابتدا به خاصيت shape توجه کنيد .
مشخص کننده مختصات نقاط مختلف يک چند ضلعی (مربع ، مستطيل و ... ) برای تعيين ناحيه مورد نظر از عکس برای ايجاد پيوند است که دارای حالت های زير است :
rect : مربع . تعيين کننده مختصات چهار نقطه مختلف يک مربع يا مستطيل
coords =left,top,right,bottom
circ : دايره . مشخص کننده نقطه مرکز و شعاع يک دايره
coords=center X, center Y ,radius
poly : چند ضلعی . مشخص کننده مختصات انواع نقاط مختلف يک چند ضلعی
coords = X1 Y1, X2 Y2, ... , Xn Yn [/TD]
[/TR]
[TR]
[TD="class: prbody"] href [/TD]
[TD="class: prbody"] URL
مسير و نام فايل [/TD]
[TD="class: prbody"] برای تعيين آدرس کامل صفحه يا فایل مقصد پيوند به کار می رود . [/TD]
[/TR]
[TR]
[TD="class: prbody"] nohref [/TD]
[TD="class: prbody"] true
false [/TD]
[TD="class: prbody"] در صورتی که مقدار آن برابر true باشد ، آن ناحيه از عکس فعال و قابل کليک کردن بوده و در صورت false بودن غير فعال است . [/TD]
[/TR]
[TR]
[TD="class: prbody"] shape [/TD]
[TD="class: prbody"] rect
rectangle
circ
circle
poly
polygon [/TD]
[TD="class: prbody"] شکل ناحيه قابل کليک شدن از يک عکس يا نقشه تصويری را تعيين می کند ، که مختصات آن توسط خاصيت coords در همين تگ مقدار دهی می شود و. انواع اشکال ممکن عبارتند از :
rect , rectangle : مربع يا مستطيل
circ , circle : دایره يا بيضی
poly , polygon : چند ضلعی
[/TD]
[/TR]
[TR]
[TD="class: prbody"] target [/TD]
[TD="class: prbody"] _blank
_parent
_self
_top [/TD]
[TD="class: prbody"] نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است:
- blank : لينک در يک پنجره جديد باز خواهد شد .
- self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .
-parent : لينک در قاب اصلی يا مادر باز خواهد شد .
-top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد . [/TD]
[/TR]
[/TABLE]
مثال : در تصوير زير برای رفتن به توضيح در مورد هر تگ ، بر روی قسمت مربوط به آن کليک کنيد :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example
[/TD]
[/TR]
[TR]
[TD="class: body"] < img src="../Pic/TagsList.jpg" alt="learner" usemap="#taglist" />
< map id="taglist" >
< area id="table" alt="table tag" shape="rect" coords="1, 2, 194, 122" href="HtmlTable1.aspx" />
< area id="body" alt="body tag" shape="rect" coords="194, 0, 386, 119" href="basictags1.aspx" />
< area id="link" alt="link tag" shape="rect" coords="0, 121, 193, 242" href="HtmlLinks2.aspx" />
< area id="p" alt="p tag" shape="rect" coords="192, 119, 386, 242" href="textformat1.aspx" />
< /map > [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body, align: center"] [/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]

 

پاسخ : آموزش HTML

[h=2]قالب بندی صفحات HTML[/h] تگ < style > :
تاکنون در تمامی تگ های معرفی شده HTML ، ما خواص مورد نظر هر تگ را در درون خود تگ تعیین و مقدار دهی کردیم. در روش های طراحی وب قدیمی تر، ما مجبور بوديم برای هرعنصری در صفحه به صورت مجزا خاصيت ها را تعيين می کنيم . این کار چند اشکال عمده داشت :

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

اما با معرفی روش قالب دهی صفحات ( Cascading Style Sheet ) یا CSS ، ما به وسـيله خاصيت تگ Style ، تمام خواص و تنظيمات مورد نياز را برای هر عنصر را در تگ Style تعيين می کنيم . خصوصيات موجود در تگ Style تقريبا تمامی نيازهای ويرايش ، تغيير شکل و افزودن جلوه های مختلف را به عناصر شامل می شود.
همانطور که قبلا ذکر شد ، صفحات HTML از یک سری عناصر تشکيل شده اند،که هر کدام توسط یک تگ معرفی می شوند . 3 روش عمده برای اعمال خواص از طريق Style به يک عنصر وجود دارد :

1. تعيين خواص مورد نظر در خاصيت Style در درون تگ عنصر .
2. تعيين خواص عناصر در تگ style در بخش head هر صفحه برای عناصر آن صفحه .
3. تعيين خواص از طريق یک تگ Style بيرونی و پيوند ان عنصر به تگ Style . در اين حالت ابتدا باید مجموعه خواص را در یک تگ Style بيرونی به یکی از روش ارائه شده در پائين صفحه ايجاد می کنيم .

نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد .
[TABLE="class: pr, width: 100%"]
[TR]
[TD="class: header, colspan: 3"] خواص مهم تگ style [/TD]
[/TR]
[TR]
[TD="class: prname"] نام خاصيت [/TD]
[TD="class: prname"] نوع خاصيت [/TD]
[TD="class: prdes"] شرح [/TD]
[/TR]
[TR]
[TD="class: prbody"] type
[/TD]
[TD="class: prbody"] text/css
[/TD]
[TD="class: prbody"] نوع محتويات درون تگ style را تعيين می کند که برای استفاده از قالب CSS آن را برابر text/css تنظيم می کنيم . [/TD]
[/TR]
[TR]
[TD="class: prbody"] media
[/TD]
[TD="class: prbody"] screen
tty
ty
projection
handheld
print
braille
auarl
all [/TD]
[TD="class: prbody"] نوع رسانه نمايش دهنده صفحه اينترنتی را برای اعمال قالب های style به آنها را تعيين می کند . چنانچه فقط يک نوع رسانه خاص در اين قسمت عنوان شود ، خصوصيات style مورد نظر فقط در هنگام نمايش صفحه وب در آن رسانه اعمال خواهد شد و برای ساير رسانه ها به صورت ساده نمايش داده می شود . که می تواند يکی از موارد زير باشد :
screen : صفحه نمايش کامپيوترهای معمولی .
tty : ماشين تحرير راه دور ، تله تايپ ( برای ماشين هايی که دارای نحوه نمايش ثابت هستند ) .
tv : وسايلی همچون تلويزيون با رزوليشن پايين .
projection : برای نمايش در پروژکتورها .
handheld : برای کامپيوتر های دستی و جيبی .
barille : در اسناد مخصوص به افراد نابينا ( بريل ) .
print : برای پرينت در دستگاه های چاپگر .
auarl : برای سيستم های صوتی .
all : برای همه نوع سيستم ها . [/TD]
[/TR]
[/TABLE]
در زیر3 روش عمده برای تعيين خواص مورد نظر در تگ style را بيان می کنيم :

1 ) External Style Sheet :
هنگامی که قرار است مقادیر style به اجزای چندین صفحه مختلف به طور یکسان اعمال می شود ، بهترین روش استفاده از یک صفحه Style sheet خارجی و پس لینک کردن آن به صفحه مورد نظر است. این کار دو مزیت عمده دارد:

1. کدهای مربوط به style را فقط یکبار در sheet style نوشته و از آن می توان برای هزاران صفحه به صورت مشترک استفاده کرد.
2. می توان ظاهر و مشخصات کليه صفحاتی که style به انها اعمال شده است را با یک تغيير کوچک در style sheet تغيير داد .

برای لينک کردن یک صفحه style خارجی به یک صفحه ، از تگ < link > در قسمت < head > صفحه استفاده می شود ، توجه شود که پسوند فایل های css ، style sheet است .
مثال : در مثال زير يک صفحه style sheet خارجی را به صفحه HTML پيوند زده ايم . توجه شود که اين کار بايد در قسمت head صفحه انجام شود :
< head >
< link rel = "stylesheet" type = "text/css" href = "mystyle.css" />
< /head >
نکته مهم : خصوصيات مختلف style در صفحه style sheet بر مبنای پارامترهای دسته بندی مثل کلاس ، id یا نوع عنصر تعيين می شود . سپس در صفحه های وب باید بر اساس دسته بندی فوق ، اجزای مختلف را در class های مورد نظر قرار داده یا id آنها برابر مقدار در نظر گرقته شده ، قرار داد . در ادامه مطالب اين مسئله را بررسی می کنيم .
دسته بندی و تعيين عناصر در Style Sheet ها :
هر عنصر HTML دو خاصيت id و class دارد . خاصيت id تعيين کننده يک نام منحصر به فرد برای عنصر است و خاصيت class به کلاسی که عنصر در آن عضويت دارد ، اشاره می کند . يک class محجموعه ای از عناصر مختلف است که در يک گروه واحد قرار دارند . به روش های زير تعيين می کنيم که چه عناصری با چه id و class به style مورد نظر ارتباط دارند :

1. برای تعیين عناصر بر پايه id آنها از روش زير استفاده می شود : #id عنصر مورد نظر
   مثال : عنصری که id آن برابر label است .
   مثال : #label
   
2. برای تعیين عناصر بر پايه class آنها از روش زير استفاده می شود : . نام کلاس عنصر مورد نظر
   مثال : عنصری که class آن برابر header است .
   مثال : .header
   
3. برای تعیين عناصر بر پايه نوع و کلاس آنها از روش زير استفاده می شود : نام کلاس عنصر مورد نظر . نوع عنصر
   مثال : تمام عناصری که از نوع td و عضو کلاس header هستند .
   مثال : td.header
   مثال : تمام عناصری که از نوع p و عضو کلاس matn هستند .
   مثال : p.matn
   
4. برای تعیين عناصر بر پايه نوع و id آنها از روش زير استفاده می شود : عنصر مورد نظر # نوع عنصر id
   مثال : عنصری از نوع p ، که id آن برابر header است .
   مثال : p#header
   

تعيين خواص مورد نظر برای هر گروه :
پس از تعيين عناصر مورد نظر ، مجموعه خواص مورد نياز را در يک کروشه در مقابل نام آنها تعيين می کنيم . هر خاصيت به وسيله يک سمی کوولن ( ; ) از خاصيت ديگر جدا می شود و آخرين خاصيت نيازی به سمی کولون ندارد . به طور کلی از روش زير برای تعيين خاصيت ها استفاده می کنيم .

{ ... و مقدار 2 : خاصيت 2 ; مقدار 1 : خاصيت 1 } نام عنصر يا عناصر مورد نظر ​

مثال : در مثال زير چندين ويژگی برای عناصر از نوع جدول که عضو کلاس ex هستند ، تعيين کرده ايم :
table.ex { border : solid 2px blue ; width : 100px ; padding : 2px }
2 ) Internal Style Sheet :
اين نوع قالب دهی توسط تگ < style > در قسمت < heade > صفحه تعيين می شود . مجوعه مقادير موجود در اين style فقط به عناصر صفحه جاری اعمال می شود . کليه مقادير مورد نظر برای اجزای مختلف را بايد در تگ باز و بسته < style > فرار داد :
مثال : در مثال زير توسط تگ < style > در بخش head برای چند عنصر صفحه ويژگی هايي تعيين شده است . به توضيحات مثال دقت کنيد :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example
[/TD]
[/TR]
[TR]
[TD="class: body"] < head >
< style type = "text/css" >
1 p#farsi { text-align : right ; direction : rtl }
2 table.ex { border : solid 2px blue }
< /style >
< /head > [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body, align: right"] در مثال فوق دو نوع قالب دهی به 2 عناصر دسته از عناصر اعمال شده است :

1. در خط 1 برای عنصر پاراگراف ( p ) که id آن برابر farsi است ، چيدمان نوشته ( text-align ) از سمت راست و جهت نوشته ( direction ) از راست به چپ تعيين شده است .
2. در خط 2 برای کليه عناصری از نوع table که عضو کلاس ex هستند ، در خاصيت ترکيبی border حاشيه ای به رنگ آبی ، با اندازه 2 پیکسل تعيين شده است .

نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد . [/TD]
[TD="class: header"] توضيحات [/TD]
[/TR]
[/TABLE]
3 ) Inline Style :
در اين نوع قالب دهی ، خصوصيات مورد نظر توسط خاصيت style در درون تگ عنصر مورد نظر تعيين می شود . اين خصوصيات فقط به عنصر مورد نظر اعمال می شوند .
مثال : در مثال زير برای يک پاراگراف توسط خاصيت style چندين ويژگی را تعيين کرده ايم :
[TABLE="class: ex"]
[TR]
[TD="class: header, colspan: 2"] Example [/TD]
[/TR]
[TR]
[TD="class: body"] < p style = "color : blue ; text-align : left ; direction : ltr >
This is a paragraph which is formatted with CSS .
< /p > [/TD]
[TD="class: header"] کد [/TD]
[/TR]
[TR]
[TD="class: body"]

This is a paragraph which is formatted with CSS .
​

[/TD]
[TD="class: header"] خروجی [/TD]
[/TR]
[/TABLE]
[HR][/HR]

 

پاسخ : آموزش HTML

[h=2]URL های HTML[/h] يک URL مخفف عبارت ( Uniform Resource Locator ) برای آدرس دهی يک فايل يا سند در اينترنت مورد استفاده قرار می گيرد . شکل کلی يک آدرس اينترنتی به صورت زير است :
Scheme://host.domainort/path/filename
مثال : آموزش برنامه نويسی - طراحی وب سایت - وبلاگ
هر يک از قسمت های مختلف آدرس اينترنتی را در جدول زير شرح می دهيم :
[TABLE="class: ex"]
[TR]
[TD="class: header"] شرح قسمت [/TD]
[TD="class: header"] قسمت [/TD]
[/TR]
[TR]
[TD="class: prbody"] اين قسمت نوع سرويس اینترنتی را مشخص می کند ، که متداولترين آنها http است . [/TD]
[TD="class: prbody"] Scheme [/TD]
[/TR]
[TR]
[TD="class: prbody"] معرف ميزبان دامنه ( domain ) است ک پيش فرض آن WWW است . [/TD]
[TD="class: prbody"] Host [/TD]
[/TR]
[TR]
[TD="class: prbody"] معرف نام دامين ( دامنه ) اينترنتی است که در اينترنت يک آدرس منحصر به فرد محسوب می شود . [/TD]
[TD="class: prbody"] Domain [/TD]
[/TR]
[TR]
[TD="class: prbody"] شماره پرت ميزبان وب سايت را معرفی می کند که معمولا اين قسمت حذف شده و نمايش داده نمی شود . پرت پيش فرض برای ميزبان 80 است . [/TD]
[TD="class: prbody"] Port [/TD]
[/TR]
[TR]
[TD="class: prbody"] مسير داخلی فايل را بر روی حافظه سرور تعيين می کند . [/TD]
[TD="class: prbody"] Path [/TD]
[/TR]
[TR]
[TD="class: prbody"] نام فايلی است که مرورگر در حال حاضر در حال نمايش دادن آن است . [/TD]
[TD="class: prbody"] Filename [/TD]
[/TR]
[/TABLE]

[HR][/HR] انواع Scheme های URL :
برخی از مهمترين Scheme های مورد استفاده در اينترنت عبارتند از :

• File : يک فايل بر روی کامپيوتر محلی شما .
• FTP : يک فايل بر روی کامپيوتر سرور با قابیليت دانلود .
• HTTP : يک فايل يا سايت بر روی سرور www .
• Gopher : يک فايل بر روی يک سرور Gopher ( ردياب ) .
• WAIS : سيسنمی که به کاربر امکان جستجو اطلاعات ذخيره شده در اينترنت را می دهد . مخفف عبارت Wide Area Information Service .

ايجاد يک فايل با قابليت دانلود :
برای ايجاد يک فايل با قابليت دانلود ، يک لينک مانند الگوی زير ايجاد می کنيم که کاربر با کليک بر روی آن امکان ذخيره فايل را خواهد داشت :
< a href = "ftp://www.DeveloperStudio.ir/Downloads/Winzip.exe" > ... < /a >
ايجاد يک پيوند به يک ايميل :

برای اين منظور از قطعه کدی شبيه زير استفاده می شود :
< a href = "mailto:Someoneemail[MENTION=16274]yahoo.com[/MENTION]" > ... < /a >