آموزش گام به گام html

 
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش گام به گام html

HTML مخفف Hyper Text Markup Language هستش ، اگه معنیشو نمیدونید معنیش میشه زبان نشانه گذاری فرا متنی!!!
زبان نشانه گذاری میگن چون ساختار دستوراتش بر اساس یکسری نشانه tag هست و فرامتنی میگن چون از متنی که تویه کاغذ نوشته میشه توانایی بیشتری داره...

HTML زبانیه که به مرورگر میگه که صفحات رو باید چطور نمایش بده! میشه گفت داره صفحات وب رو توصیف میکنه.

Cool وقتی این همه برنامه برای ساخت صفحات وب هست چرا باید خودمو تو دردسر بندازم اچ تی ام ال یاد بگیرم!؟؟؟؟

اول اینکه html بسیار ساده هست و خیلی سریع میتونید اونو یاد بگیرید و بهش مسلط بشید و دوم اینکه وقتی که جلوتر بریم میبینیم که موقع نوشتن خیلی از برنامه های تحت وب مثلا با php نیاز دارید که با html هم آشنا باشید. یادتون باشه هرچی که قرار باشه کاربر ببینه باید رویه صفحه نمایش داده بشه!

مواد لازم:
هیچی! همون برنامه notepad تویه ویندوز کافیه! البته اگر برنامه notepad++ رو دانلود کنید میتونید تگ های html رو به صورت رنگی ببینید و امکانات بیشتری داشته باشید!

خوبه شروع کنیم دیگه! تویه notepad(++) یه سند جدید ایجاد کنید و توش کد زیر رو بنویسید:

<html>
<head>
     <title>In Onvane Safhast</title>
</head>
<body>
     In Ham Matne Safheye Avvle!
     Vay Khoda Daram Html Yad Migiram....
</body>
</html>

حالا اونو با یه نام دلخواه ذخیره کنید مثلا من به نام safeheye1.html ذخیره کردمش! حالا باید نتیجه تلاشمون رو ببینیم فقط کافیه که روی فایلمون (منظورم safheye1.html) دابل کلیک کنیم! اگر نتوستید صفحه رو باز کنید برید مرورگر رو باز کنید و از منوی File گزینه Open یا Open File رو انتخاب کنید و بعد هم فایلی که ایجاد کردید رو انتخاب و باز کنید! حالا اگر همه چی خوب پیش رفته باشه باید یه صفحه مثل این صفحه ببینید!

Foot in mouthکدوم صفحه!!!

رو کلمه "این"  بالایی کلیک کنید تا ببینیدش!

اگه تا اینجا رو با دقت خونده باشید به نکات زیر حتما رسیدید:

1. هر صفحه html از یک فایل متنی تشکیل میشه که با پسوند html یا htm ذخیره میشه!
2. دستورات html ساختاری به صورت <ستور/>......<دستور> دارن!
3. ساختار هر فایل html  به صورت زیر هست که از دو قسمت اصلی تشکیل میشه: head  که توش عنوان title و یکسری اطلاعات دیگه قرار میگیره و body که توش عناصر صفحه قرار میگیرن!

<html>
    <head>
    </head>
    
    <body>
    </body>
</html>

4. دستورات html خودشون متن هستند و برای اجرا باید به کامپیوتر کاربر منتقل بشن. میتونید این موضوع رو امتحان کنید فقط کافیه تویه همین صفحه که هستند راست کلیک کنید و بعد گزینه View Source یا View Page Source رو انتخاب کنید. واسه همینه که میگن html یک زبان سمت کاربر هستش!
5. توانایی متون html از متون کاغذی خیلی بیشتره به عنوان مثال دیدید که با کلیک رویه کلمه میشه یه صفحه جدید باز کرد!

دوشنبه 29 آبان 1391  04:40 ب.ظ
تشکرات از این پست
pebdani
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت دوم - متن ها

اگر شما می خواهید متنی را به صفحه html خود اضافه کنید کافی است متن دلخواه را در قسمت Body از صفحه html تایپ کنید.
مثال:
ویراستار notepad یا notepad++   خود را باز کنید و کد زیر را تایپ کنید

<html> 
<head> 
    <title>my page</title>
 </head> 
   <body>
    .سلام !!این صفحه وب من است.
   </body>
</html>


سپس  با پسوند htm  یا html   آن را ذخیره کنید.
با باز کردن مثال خود با مرورگر Internet Explorer یا هر مرورگر دیگر  نتیجه به صورت زیر خواهد شد:

سلام !!این صفحه وب من است.

اگر خطوط را  به صورت "خرچنگ قورباغه" مي بينيد,فرار نكنيد, کافی است در هنگام Save کردن در پایین پنجره گزینه Encoding را با UTF-8 تنظیم کنید (در صورت استفاده از n++ باید قبل از save کردن از منوی Format گزینه Encode in UTF-8 را انتخاب نمایید).
مانند مثال بال اگر ویژگی های  خاصی را به متن اضافه نکنید مرورگر از سایز و فونتی که به صورت  پیش فرض برایش تعریف شده  استفاده می کند.
 

فونت پیش فرض (BASE FONT):

برای اینکه متنی که در کل صفحه html وارد می کنید به یک شکل دیده شود یا به عبارت دیگر یک فونت سراسری با اندازه و رنگ یکسان داشته باشید کافی است که از دستور <basefont> در ابتدای قسمت بدنه  (body) استفاده کنید.
مثال: ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس  با پسوند htm  یا html  و با نام دلخواه آن را ذخیره کنید.

 1.<html> 
 2.<head> 
 3.      <title>my page</title> 
 4.</head> 
 5. <body> 
 6.     <basefont face="Tahoma, arial, verdana" size="4" color="red"> 
 7.       Hello! This is my page. 
 8.       All text looks the same<br> 
 9.       since I only specified a basefont<br> 
10.</body> 
11.</html>

در مثال بالا خاصیت های color,size,face از دستور  basefont به ترتیب بیانگر فونت, اندازه یا سایز متن ( 1کوچکترین و 7 بزرگترین سایز) ورنگ متن html شما هستند.

نکته: اگر لیستی از فونت ها را مانند مثال بالا وارد کنیم مرورگر از اولین فونت قابل نمایش برای متن درکامپیوتر بیننده استفاده می کند.یعنی اگر قابلیت نمایش فونت Tahoma  فراهم نباشد مرورگر از فونت arial وگر نه از فونت verdana استفاده خواهد کرد. نتیجه مثال بالا به صورت زیر خواهد شد:

Hello! This is my page. All text looks the same
since I only specified a basefont


توجه کنید که در هنگام نوشتن متون html برای رفتن به خط بعدی باید از دستور <br> استفاده کنید. با توجه به مثال خواهید دید که در خط 7 از <br> استفاده نکردیم و به همین دلیل متن نوشته شده در خط 8 با وجود اینکه در خط بعدی کد نوشته شده درخروجی بلافاصله بعد از متن خط 7  دیده میشود.

تغییر فونت متن :

با استفاده از دستور  </font><font> می توان فونت ,رنگ و اندازه متن را تغییر داد.
مثال: ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس  با پسوند htm  یا html  و با نام دلخواه آن را ذخیره کنید.

<html> 
   <head> 
   <title>My Page</title> 
   </head> 
 
<body> 
   <basefont color="green" face="arial" size="4"> 
   Hello! This is my page.<br><br> 
   <font color="red" face="arial" size="2"> 
   This local text looks different. 
   </font> 
   <br><br> 
   This text looks like the first line. 
</body> 
</html>

با باز کردن مثال خود با مرورگر Internet Explorer , کد بالا نتیجه زیر را در مرورگر خواهد داشت:
Hello! This is my page. 
 
This local text looks different.
 
This text looks like the first line.

با استفاده از صفت های color,face,size  از دستور <font> می توان به ترتیب اندازه (1 کوچکترین و7 بزرگترین) ,نوع فونت و رنگ متن را تعیین کرد.

تفاوت font با basefont
basefont در کل صفحه وب اعمال می شود.در حالی که در دستور font تنها متنی که بین <font>…</font> قرار دارد تحت تاثیر این دستور و صفت های آن(face,color,size) قرار می گیرد.

قالب بندی متن:

در html قالب بندی متون به سادگی توسط دستورات مشخص شده در جدول انجام می شود!

توضیح دستور خروجی
باعثbold  (برجسته)شدن متن می شود. <b>text</b> text
باعث Italic  (کج یا خوابیده) شدن متن می شود. <i>text</i> text
خطی زیر متن می کشد. <u>text</u> text
متن را کوچکتر می کند و پایین تر می آورد. A<sub>B</sub> AB
متن را کوچکتر می کند و بالا تر می آورد. A<sup>B</sup> AB
متن را به صورت چشمک زن نمایش می دهد. <blink>text</blink> text
خطی روی متن می کشد. <strike>text</strike> text
متن را به صورتی که در ماشین تحریر تایپ می شود ,نمایش می دهد. <tt>text</tt> text
متن را دقیقا به همان صورتی  که می نویسیم نمایش می دهد.
یعنی فضای خالی ,tab ,رفتن به سطر بعدی را حفظ می کند.
<pre>text</pre>  

 

اندازه های متون:

در html روش های متعددی برای تعیین اندازه متون پیش بینی شده است!

توضیح دستور خروجی
باعث  افزایش سایز متن به اندازه 1 واحد نسبت به حالت عاددی <big>text</big> text
باعث  کاهش سایز متن به اندازه 1 واحد نسبت به حالت عادی. <small>text</small> text
متن را با کوچکترین سایز نمایش می دهد. <font size="1">text</font> text
متن را با بزرگترین سایز نمایش می دهد. <font size="7"> text</font> text

نکته اول در مورد دستور <big></big> اینکه می توان از آن به صورت تکراری و پشت سر هم استفاده کرد.مثلا اگر بخواهیم متنی با دو سایز بزرگ تر از حالت عادی نمایش داده شود , کافی است از این دستو دو بار به صورت زیر استفاده شود .
<big><big>text</big></big>

و نکته دوم اینکه مقادیر صفت size متغیرند و می توانید از تمامی مقادیر 1 تا 7 استفاده کنید!

پاراگراف بندی:

برای پاراگراف بندی متن در Html  کافی از دستور <p>…</p>  استفاده کنیم , که <p> نشان دهنده شروع پاراگراف و <p/> نشان دهنده پایان آن است.
صفات Align,Id,Title,Dir از جمله صفاتی هستند که به بحث آنها می پردازیم:

     صفت Dir : برای اینکه جهت نوشته شدن متن را مشخص کنیم از این صفت استفاده می کنیم. مقادیر این صفت عبارتند از LTR مخفف Left To Right به معنی چپ به راست و همچنین RTL مخفف Right To Left به معنی راست به چپ که از دومی ( RTL ) برای نوشتن متون فارسی استفاده می کنیم.

     صفت Title: عبارتی که جلوی Title نوشته می شود به عنوان توضیح در مورد پاراگراف هنگامی که ماوس روی آن قرار می گیرد, ظاهر می شود.

     صفت  Id : نام پاراگراف را تعیین می کند.که این نام از طریق شیوه نامه ها قابل دسترسی است.

     صفت Align :که مکان پاراگراف را مشخص می کند.که دارای سه مقدار Left,Right,Center  است که قبلا توضیح داده شده است.

عناوین:

در اچ تی ام ال از دستورات h1 - h6 برای تعیین عنوان استفاده می شود. برای این کار از دستور مورد نظر به صورت <hX>Text</hX> استفاده می شود که باید بر حسب نیاز X را با عدد مورد نظر جایگزین کنید. مهمترین نکته در مورد دستورات تعیین عنوان این است که این دستورات برعکس نامشان اندازه عنوان را تعیین می کنند یعنی از h1 برای تعیین بزرگترین عنوان و از h6 برای تعیین کوچکترین عنوان استفاده می شود.

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

به عنوان آخرین نکته در نظر داشته باشید که می توانیم بوسیله قراردادن صفت align در دستورات hX محل قرارگیری عناوین را مشخص کنیم. نحوه استفاده از این صفت و مقادیر مختلف آن را در ادامه خواهید دید.

<h1 align="center">عنوان در وسط</h1>

عنوان در وسط

<h1 align="left">عنوان سمت چپ</h1>

عنوان سمت چپ

<h1 align="right">عنوان سمت راست</h1>

عنوان سمت راست

 

نویسنده: رضا ترابی

دوشنبه 29 آبان 1391  04:42 ب.ظ
تشکرات از این پست
pebdani
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت سوم - لینک ها

لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به  شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها می توانند به عنوان لینک مورد استفاده قرار بگیرند.
مثال های زیر را با هم بررسی می کنیم.
مثال 1) برای رفتن به سایت www.google.com  از سایت www.webfocus.ir کافی است که بر روی www.google.com کلیک کنید.
مثال 2)برای اینکه آموزش php- قسمت سوم-دستور زبان و کار با متغییر ها را در همین سایت  ببینیم کافی است که بر روی آموزش php - قسمت سوم - دستور زبان و کار با متغیرها  کلیک کنید.
مثال 3)برای رفتن به یکی از مثال ها در همین صفحه کافی است که روی برو به مثال کلیک کنید
3 مثالی که در بالا آورده شد تداعی کننده انواع لینک ها هستند که در زیر به آنها اشاره می شود.

انواع لینک (link) در html

1) لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند. به مثال 1 توجه کنید.
2) لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند. به مثال 2 توجه کنید.
3) لینک داخلی (Internal Links): لینک هایی هستند که  به قسمتی همان صفحه ای که در آن هستید اشاره می کنند. به مثال 3 توجه کنید.

چگونه لینک html بسازیم؟؟؟

برای ساختن لینک کافی است از دستور <a>...</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a>  قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href  مخفف "hypertext reference" استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و... می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.

پس شکل کلی این دستور در زبان html به صورت زیر است:

<a href="url">متنی که به عنوان لینک شناخته خواهد شد</a>

<a href="url"><img src="" /></a>

<a href="">هر المانی که قرار است به عنوان لینک استفاده شود</a>

 

Global link - لینک سراسری یا جهانی  :

ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm  یا html  و با نام GlobalLink آن را ذخیره کنید.

<html>
   <head>
       <title>My Page</title>
   </head>

   <body>
             Click <a href="http://www.google.com">here</a> to go to google.
   </body>
</html>

حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:

Click here to go to google.

با فشردن کلمه here به سایت www.google.com   خواهید رفت , به همین سادگی.

Local link - لینک محلی:

قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c خود بسازید.سپس ویراستار NotPad++  را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام Internallink  و با پسوند htm ذخیره کنید

Click <a href="c:\ firstpage.htm">here</a> to go to firstpage.

حال اگر با مرورگر صفحه Internallink.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!

 Intrnal Link - پیوند داخلی:

برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name  از دستور<a>…</a> برای نام گذاری آن بخش  استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم  و در آن قسمت دستور <a name="mesale1">…</a> را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href="#mesale1">…</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.

<html>
   <head>
      <title>my page</title>
   </head>

   <body>

        <h3><a href="#Chapter 1">Introduction</a></h2>
        <h3><a href="#Chapter 2">html text</a></h2>
        <h3><a href="#Chapter 3">html links</a></h2>

        <a name=" Chapter 1"> Introduction </a></br>
        <!-- Introdution متن مربوط به  --></br>

        <a name=" Chapter 2"> html text</a></br>
        <!-- html text متن مربوط به  --></br>

        <a name=" Chapter 3"> html links</a></br>
        <!-- html links متن مربوط به  --></br>

   </body>
</html>


در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html  است که به 3 فصل  html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.
حال برای دیدن متن مربوط به html text  کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع  پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:

1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.
<a name="#Chapter 2">html text</a>

2)ایجاد پیوند به بخش نام گذاری شده.
<a href="#Chapter 2">html text</a>

لینک های رنگی بسازید:

برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.
دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:
1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.
2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.

link,vlink,alink ؟!! یعنی چی؟

link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن  آبی (blue  یا  #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple - #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red - #FF0000) است.

یک رنگ برای تمام لینک های موجود در صفحه html

کافی است که در قسمت <body> از صفت های  link,vlink,alink  استفاده کنیم.

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

هر لینک یک رنگ
اگر بخواهیم رنگ یک یا چند لینک را در صفحه html ، متفاوت از بقیه  نشان دهیم از یکی از دو روش زیر استفاده می کنیم.

روش اول:استفاده از دستور font  بین دستور <a href>…</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href>…</a> قرار بگیرد.

Click <a href="http://www.webfocus.ir"> <font color="red">here</font> </a> to go to webfocus.

روش دوم:استفاده از خاصیت style  در دستور <a>

 

Click <a href="http://www.webfocus.com" style="color: green">here</a> to go to webfocus. 

 با استفاده از یکی از دو روش فوق می توانید لینک ها یی با رنگ دلخواه تعریف کنید .

بعضی رنگ های معروف:
Black, Aqua , Fushia, Blue, Gray, Green, Lime, Marron, Navy, Olive, Purple, Red,Silver,Teal,White,Yellow  .

نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.

 

صفات مربوط به دستور پیوند (Link Attributes )

در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.
     صفت title : با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده  ظاهر می شود.
مثال:

<a href ="www.webfocus.ir" title="for more learning html click here">learning html</a> 

وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.

     صفت tabindex : با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab  مشخص می کنیم.
مثال:

<a href =" http://www.yahoo.com"  tabindex="1">yahoo</a></br>
<a href =" http://www.google.com"  tabindex="3">google</a></br>
<a href =" http://www.webfocus.ir"  tabindex="2">webfocus</a>

با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند webfocus و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن  Tab  مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند webfocus قرار می گیرد.

      صفت Target : به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها بیشتر آشنا خواهیم شد.

نویسنده: رضا ترابی

دوشنبه 29 آبان 1391  04:47 ب.ظ
تشکرات از این پست
pebdani
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت چهارم - لیست

لیست ها به سه نوع مرتب,نامرتب و تعریفی تقسیم می شوند که در این بخش به شرح هر یک می پردازیم.

لیست مرتب ( ordered or numbered list) :

 همانطور که از نام این نوع لیست مشخص است ترتیب در این نوع لیست اهمیت دارد. برای ایجاد لیست مرتب از دستور <ol> برای شروع لیست و </ol> برای مشخص کردن انتهای آن استفاده می کنیم ، اما باید توجه کنیم که هر لیست شامل عناصری است که برای مشخص کردن آن از دستور  <li> که li مخفف list items  است ، استفاده می کنیم.
مثال :

<ol>
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ol>

آیا می توانیم از عددهای رومی (i,ii,iii,…)  یا حروف (a,b,c,…)  برای شماره گذاری عناصر لیست استفاده کنیم؟؟
بله با استفاده از صفت type  این دستور می توان این کار را انجام داد.
به مثال های زیر توجه کنید:
لیست با اعداد رومی به صورت i , ii ,iii , iv

<ol type ="i">
       <li>list item1</li>       
       <li>list item2</li>      
       <li>list item3</li>
</ol>

لیست با حروف a , b ,c , d

<ol type ="a">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

لیست با حروف بزرگ A , B ,C ,D

<ol type ="A">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

با استفاده از صفت start از دستور <ol>  می توان تعیین کرد که شماره گذاری عناصر لیست از چه مقدار عددی یا حروفی شروع شود. به عنوان مثال :

<ol type="I" start="7">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>


در مثال بالا ابتدا با استفاده از صفت type مشخص می کنیم که برای شماره گذاری عناصر لیست از اعداد رومی بزرگ استفاده شود و سپس با استفاده از دستور start می گوییم که شروع شماره گذاری از عدد 7 رومی  باشد.

لیست نامرتب (unordered or bulleted list) :

در این نوع لیست ترتیب برای عناصر لیست اهمیتی ندارد. برای نمایش لیستی از این نوع از دستور ul استفاده می کنیم. برای هر کدام از عناصر لیست هم از مثل نوع قبلی از دستور li بهره میگیریم. عناصر لیست به کمک شکل ها یا علامت های دایره تو پر (disc) ,دایره تو خالی (circle) و مربع تو پر (square) مشخص میشوند. برای تعیین شکل عناصر از صفت type کمک میگیریم. به مثال زیر توجه کنید:

<ul type="circle">
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ul>

لیست های تعریفی(definition list) :

مجموعه ای از عناصر با تعاریف  متناظرشان , یک لیست تعریفی را تشکیل می دهند که دستور <dl> نشان دهنده شروع و </dl> نشان دهنده پایان این لیست است. اما برای نشان دادن  هر عنصر از دستور <dt>  که dt مخفف  definition termاست , استفاده می کنیم و برای تعریف هر عنصر دستور <dd> را به کار می بریم.
مثال :

<dl>
  <dt>Term 1</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Term 2</dt>
  <dd>This is the definition of the second term.</dd>
</dl>

نویسنده: رضا ترابی

دوشنبه 29 آبان 1391  04:48 ب.ظ
تشکرات از این پست
pebdani
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت پنجم - عکس

در این مبحث ما به چگونگی اضافه کردن تصاویر به صفحه وب می پردازیم.
یکی از مشکلات اصلی استفاده از تصاویر در صفحات وب ،  مدت زمان طولانی تر بار گذاری تصاویر در صفحات  نسبت به متون است . بنابراین هر چه حجم این تصاویر کمتر باشد ،  مدت زمان بارگذاری صفحه کمتر می شود.
قبل از آغاز نمودن بحث باید به این نکته توجه کرد که gif: graphics interchange format و jpg: joint photographic group دو نوع فرمت رایج تصاویر در صفحات وب هستند.

استفاده از کدام یک بهتر است؟؟
برای Banner  ,  button , divider  و clipart ها بهتر است که از فرمت GIF  استفاده کنیم.
از آنجایی که تصاویر با فرمت JPG را می توان فشرده کرد , هر چند که کیفیت آن کاهش پیدا می کند, ولی حجم آن نیز کم می شود, پس برای عکس ها بهتر است از فرمت JPG  استفاده کنیم.

قرار دادن تصاویر در صفحه وب:

برای قرار دادن تصاویر در صفحه از دستور <img> استفاده می کنیم و برای مشخص کردن آدرس این تصویر از صفت src این دستور بهره می گیریم. بنابراین شکل کلی این دستور به صورت زیر است:

<img src="url">

اگر مکان عکس در همان Folder ی باشد که فایل html  شما در آن قرار دارد , کافی است به جای URL ، نام عکس همراه با فرمت آن را ذکر کنید.

مثال 1:
ابتدا پوشه  test را در درایو C  خود بسازید و یک تصویر با نام img1   و با فرمت jpg  در آن قرار دهید سپس  ویراستار Notepad یا Notepad++ خود را باز کنید و در قست بدنه فایل html  خود کد زیر را تایپ کنید و سپس این فایل را با نام دلخواه و با پسوند htm در درایو C  خود و در پوشه test ذخیره کنید.

<img src="img1.jpg">

اکنون با باز کردن فایل html خود , تصویر img1 را مشاهده خواهید کرد.

اما اگر تصویر مورد نظر  در یک سایت دیگر باشد باید آدرس کامل مکان عکس را به جای URL قرار دهید.

مثال 2:

<img src="http://www.siteURL.com/??/?.gif">

در صورتیکه فایل مورد نظر در پوشه ای بیرون از پوشه جاری بود چطور عمل کنیم؟
برای اینکه از پوشه خارج شویم یا یک مرحله به عقب برگردیم کافی است در ابتدای آدرس /.. را قرار دهیم. به کمک این روش به هر تعداد که بخواهیم می توانیم به عقب برگردیم. برای روشن شدن موضوع فرض کنید فایل html در پوشه files قرار گرفته یعنی آدرس آن به شکل myWebsite/files/page1.html است و عکس مورد نظر در پوشه images با مسیر myWebsite/images/image1.jpg قرار دارد. برای آدرس دهی این عکس و قرار دادن آن در فایل page1.html باید ابتدا یک پوشه به عقب بر گردیم و سپس وارد پوشه images شویم و نام فایل مورد نظر را وارد کنیم. یعنی آدرس عکس را باید به صورت images/image1.jpg/.. وارد نماییم. به شکل توجه کنید:

html images

 

height , width :

با استفاده از صفت های width و height از دستور <img> می توان اندازه تصاویر را تغییر داد. مقداری که برای این صفت تعریف می شود , می تواند بر حسب پیکسل یا درصد باشد. معمولا برای کاهش سایز تصاویر بهتر است از برنامه گرافیکی استفاده کرد تا از این صفت , زیرا استفاده از این صفت برای کاهش سایز مدت زمان بار گذاری صفحه وبتان را افزایش می دهد. در عین حال برای بزرگ تر کردن تصاویر از حالت عادی , استفاده از این صفت توصیه می شود.
مثال 3:
<img src="img1.jpg" width="60" height="60">

مثال 4:   
<img src="img1.jpg" width="50%" height="60%">

در مثال 4 ارتفاع وعرض تصویر به ترتیب 60% و%50 از اندازه صفحه مرور گر شما را تشکیل می دهد.
یعنی با استفاده از درصد (%) به هر اندازه که صفحه مرورگرتان را تغییر سایز دهید , تصویر در آن صفحه نیز به همان نسبت کوچک یا بزرگ خواهد شد.در حالی که با استفاده از مقدار پیکسلی اندازه تصویر همواره ثابت خواهد ماند.

border :

با استفاده از این صفت می توان برای تصویر مورد نظر حاشیه یا کادری با ضخامت دلخواه ایجاد کرد. به طور پیش فرض و بدون استفاده از این صفت ، هیچ کادری دور تصویر وجود ندارد.

مثال 5:
کادر با ضخامت 4 دور تصویر
<img src="img1.jpg "  border="4">

alt :

صفت alt که مخفف alternative است. سه کاربرد اصلی این صفت عبارتند از:
1. هرگاه تصویر مورد نظر به هر دلیل نمایش داده نشود این متن به جای آن تصویر قرار می گیرد.
2. با قرار گرفتن موس روی تصویر توضیحی از آن نمایش داده میشود.
3. برای افراد معلول امکان خواندن توضیح تصویر توسط نرم افزارهای مخصوص محیا میشود.

مثال 6:
<"img src=" img1.jpg" alt="matn jaygozin>

صفت های hspace   و vspace :

با استفاده از صفت   hspace می توان فضایی را در سمت راست و چپ تصویر در نظر گرفت.
با استفاده از صفت   vspace می توان فضایی را در بالا و پایین   تصویر در نظر گرفت.

مثال 7:
<img src="img1.jpg"  Hspace="30" Vspace="10>

این صفت معمولا هنگامی که یک متن را می خواهیم با تصویر بیاوریم  بسیار مفید خواهد بود. زیرا متن در اطراف این فضا قرار خواهد گرفت و عکس محفوظ می ماند و در صورت لزوم این متن شکسته خواهد شد.

align :

با استفاده از این صفت می توانیم چگونگی قرار گرفتن تصویر را در متن مشخص کنیم.  مثلا مطلوب ما این است که تصویر در بالای متن قرار گیرد یا در پایین متن.
با استفاده از مقادیر  top(بالا) , bottom (یایین) و middle (میانه یا وسط) می توان متن را در بالا , پایین یا وسط تصویر قرار داد.

مثال 8:
<img src ="img1.jpg" align="top">

علاوه بر مقادیر top , bottom وmiddle ، مقادیر دیگری نیز برای این صفت موجود است که به شرح هر یک می پردازیم.

Texttop :  با این مقدار بالای تصویر با بالای بزرگترین کاراکتر تنظیم می شود.
Absmiddle : با این مقدار وسط تصویر با وسط متن تنظیم می شود.Baseline : با این مقدار پایین تصویر با پایین کشیده ترین کاراکتر رو به پایین تنظیم می شود.
left و right :با این دو مقدار می توان تصویر را به سمت چپ یا راست  متن انتقال داد.

مثال 9:
<img src ="img1.jpg" align="left>

دوشنبه 29 آبان 1391  04:49 ب.ظ
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت ششم - جدول

 

معمولا به دو دلیل اصلی از جدول ها طراحان صفحه وب استفاده می کنند.
 
1) سازماندهی کردن اطلاعات  با استفاده از جدول.
2) چیدمان یا طرح بندی صفحه با استفاده از جدول های مخفی (hidden tables)
 
تقسیم کردن صفحه به قسمت های مختلف , ایجاد کردن منوها , ایجاد کردن سر صفحه  (header )  , قرار دادن آسان تر عکس ها در مکان های دلخواه از صفحه, نوشتن متون در چند ستون در یک صفحه و .... از جمله کاربرد جدول ها می باشند.
 
جدول های ابتدائی (Basic Tables) :
جدول ها با دستور <table>  تعریف می شوند.هر جدول از سطرها (Rows) و ستونهایی(Columns) تشکیل شده است.
 
سطر ها (Rows ) :
برای اضافه کردن سطرها به جدول از دستور <tr> ... </tr> استفاده می کنیم.
 
ستون ها (Columns):
برای اینکه هر سطر را به ستون هایی تقسیم کنیم از دستور <td>...</td> استفاده می کنیم.
 
مثال :
 
<table>
 <tr> 
         <td>column 1 into first row </td>
<td>column 2 into first row</td>  </tr>
 
<tr>          <td>column 1 into second row</td> <td>column 2 into second row.</td>    </tr> </table>
 
 
نتیجه به صورت زیر خواهد بود :
 

column 1 into first row         column 2 into first row column 1 into second row    column 2 into second row.

 
صفت های دستور <table>:
 
صفت align:  با استفاده از این صفت می توان موقعیت جدول را در صفحه تعیین کرد.مقادیر left ,center ,right به ترتیب باعث نمایش جدول در سمت راست , مرکز وچپ صفحه خواهند شد.
 
صفت background : برای وارد کردن عکس به عنوان پس زمینه جدول , ازاین صفت استفاده می کنیم.
 
<table background ="URL">
 
</table>
 
صفت bgcolor : برای تعریف کردن رنگ برای پس زمینه جدول.
 
صفت border :  برای  تعیین کردن ضخامت حاشیه یا کادر جدول.
 
صفت bordercolor :  برای تعیین کردن رنگ کادر.
 
صفت bordercolordark :مشخص کردن رنگی به عنوان  سایه برای کادر جدول.
 
صفت  cellpadding : با استفاده از این صفت می توان فاصله ای بین خانه های جدول و محتوای جدول تعیین کرد.
 
صفت   cellspacing : برای تعیین فاصله بین خانه های جدول.
 
مثال :
 
<table align = center cellpadding=4 cellspacing=14  bgcolor =white  border=3  bordercolor=black  bordercolordark=gray>
   <tr> 
<td>column 1 into first row </td>
        <td>column 2 into first row</td>
   </tr>
   <tr>
        <td>column 1 into second row</td>
        <td>column 2 into second row.</td> 
   </tr>
</table>
صفت frame :
 
 این صفت به معنای چهار چوب و دارای مقادیر زیر است :
 
void : برای پاک کردن کادرهای بیرونی.
 
above : یرای نمایش  دادن حاشیه بالایی جدول.
 
below : برای نمایش دادن حاشیه پایینی جدول.
 
lhs : حاشیه قسمت چپ جدول را نمایش می دهد.
 
rhs : حاشیه قسمت راست جدول را نمایش می دهد.
 
hsides : برای نشان دادن دو ضلع  افقی حاشیه.
 
vsides : برای نشان دادن دو ضلع  عمودی حاشیه.
 
box : برای نمایش دادن همه اضلاع حاشیه جدول.
 
صفت valign :
 
این صفت دارای دو مقدار زیر است :
 
top : محتوای جدول را با بالای خانه های جدول تنظیم می کند.
 
botton : محتوای جدول را با پایین خانه های جدول تنظیم می کند.
 
صفت width :
 
این صفت که یا با پیکسل یا به صورت درصد بیان می شود عرض جدول را تعیین می کند.
 
مثال :
 
<table align = center bgcolor =white border=4 bordercolor=black   bordercolordark=gray   valign = top frame=above>
   <tr> 
         <td>column 1 into first row </td>
         <td>column 2 into first row</td>
   </tr>
  <tr> <td>column 1 into second row</td> <td>column 2 into second row.</td> </tr> </table>
 
صفت های  دستورهای <td> و <tr> :
 
صفت align : با استفاده از مقادیر left,right,center ازاین صفت می توان موقعیت محتوا را در مرکز , قسمت راست و چپ خانه های جدول تعیین کرد.
 
صفت background : با استفاده از این صفت می توان عکسی را به عنوان پس زمینه خانه یا خانه های جدول قرار داد.
 
صفت bgcolor : با استفاده از این صفت می توان برای خانه های جدول رنگ در نظر کرفت.
 
صفت bordercolor : با استفاده از این صفت می توان برای حاشیه یا کادر خانه ها رنگ مشخص کرد.
 
صفت bordercolordark : می توان رنگی را به عنوان سایه برای حاشیه خانه های جدول تعریف کرد.
 
صفت valign : این صفت دارای مقادیر top,middle,bottom است که به ترتیب باعث نمایش محتوای خانه های جدول در پایین , وسط و بالای خانه ها می شود.
 
صفت width : عرض خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود.
 
صفت height : ارتفاع خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود..
 
صفت های بالا در هر دو دستور <td> و <tr> معتبر هستند اما صفت هایی که در زیر بیان می شوند مخصوص دستور <td
 
صفت colspan : با استفاده ازاین صفت می توان تعیین کرد که عرض هر خانه به اندازه چند ستون باشد.برای جداولی کاربرد دارد که پهنای خانه های آن متفاوت است.
 
صفت rowspan :  با استفاده ازاین صفت می توان تعیین کرد که ارتفاع هر خانه به اندازه چند سطر باشد.برای جداولی کاربرد دارد که ارتفاع  خانه های آن متفاوت است.

 

دوشنبه 29 آبان 1391  04:50 ب.ظ
تشکرات از این پست
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت هفتم - پس زمینه

احتمالا تا به حال به این فکر افتادید که چطور میشه رنگ پس زمینه صفحه رو تغییر بدیم یا عکسی به عنوان تصویر پس زمینه انتخاب کنیم! این کار به سادگی با دو صفت از دستور <body> ممکنه که در این بخش با اونا آشنا میشیم!

قبل از شروع بحث به یادآوری روش نامگذاری رنگ ها می پردازیم:
در زبان html سه روش برای انتخاب رنگ معرفی شده است:

1. استفاده از شماره رنگ در مبنای شانزده:
در این روش ترکیبی از سه رنگ اصلی قرمز ، سبز و آبی در مبنای شانزده بعد از یک علامت number sign `#` معرف رنگ مورد نظر خواهد بود.

#ff0000        ---> RED
#00ff00        ---> GREEN
#0000ff        ---> BLUE
#ffff00         ---> YELLOW
#fb60f9        ---> PURPLE

نگران نباشید نرم افزارهایی مثل فتوشاپ به راحتی به شما امکان انتخاب رنگ مورد نظر را بدون آشنایی با این روش می دهند کافی است که در پنجره Color Picker شماره رنگ دلخواه خود را کپی نمایید.

2.استفاده از شماره رنگ در مبنای ده:
در این روش نیز تمامی رنگ های دلخواه از ترکیب سه رنگ اصلی قرمز ، سبز و آبی ساخته خواهند شد البته نسبت ترکیب رنگ های ذکر شده به صورت rgb(x,y,z) بیان میشود که x y z به ترتیب بیانگر رنگ های قرمز ، سبز و آبی خواهند بود ، که می توان اعداد 0 تا 255 را جایگزین آنها کرد.

rgb(255,0,0)     ---> RED
rgb(0,255,0)     ---> GREEN
rgb(0,0,255)     ---> BLUE

3.استفاده از اسامی رنگ های اصلی:
در این روش از نام رنگ مورد نظر استفاده می کنیم برای مطالعه بیشتر درباره این روش به بخش لینک های رنگی قسمت سوم آموزش های html مراجعه کنید.

پس زمینه رنگی:
برای انتخاب رنگ پس زمینه در زبان html از صفت bgcolor بهره می بریم. این صفت همانطور که قبلا بیان شد مربوط به دستور body است. برای استفاده از این صفت کافی است که رنگ مورد نظر را بر طبق یکی از روش های ذکر شده بعد از علامت مساوی قرار دهیم.

<body bgcolor="#dfac17">
<body bgcolor="rgb(241,175,100)">
<body bgcolor="red">

قرار دادن عکس به عنوان پس زمینه:
در صورتی که مایل باشید می توانید به جای انتخاب رنگ پس زمینه از یک عکس به عنوان تصویر پس زمینه استفاده نمایید این کار به سادگی به کمک صفت background انجام میشود. در این روش باید بعد از مساوی ، آدرس عکس مورد نظر را طبق یکی از روش های آدرس دهی مشخص نمایید - روش های آدرس دهی در زبان html قبلا در قسمت پنجم آموزش های اچ تی ام ال بیان شد.

<body background="blueSreen.jpg">
<body background="../images/bg.gif">
<body background="http://www.webfocus.ir/images/1.gif"

صفت bgproperties:
این صفت زمانی به کار برده میشود که از عکس به عنوان پس زمینه صفحه استفاده نمایید ، در این صورت چناچه بخواهید عکس مورد نظر با  scroll - مرور عمودی صفحه - جابجا نشود و محل آن ثابت بماند باید مقدار آن را برابر fixed قرار دهید. این ویژگی در مرورگر firefox پشتیبانی نمی شود.

<body background="../images/bg.gif" bgproperties="fixed">

نکاتی که هنگام استفاده از تصویرپس زمینه باید رعایت شوند:
1. توجه کنید که هرچه حجم تصویر انتخابی کمتر باشد بارگذاری - load - صفحه سریع تر انجام میشود.
2.در صورتیکه عرض عکس انتخابی نسبت به وضوح -resolution - صفحه نمایش کمتر باشد تصویر زمینه به صورت tile نمایش داده میشود - تصویر مورد نظر تکرار خواهد شد.
3.صفت background از bgcolor اولویت بالاتری دارد بدین معنا که اگر از هر دو صفت همزمان استفاده نمایید صفت background در نظر گرفته خواهد شد.

نویسنده: مجتبی کاظمی

دوشنبه 29 آبان 1391  04:53 ب.ظ
تشکرات از این پست
alireza1412
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش html - قسمت هشتم - فرم

 

شاید تا این مدت به فکر این افتاده باشید که بتوانید با دریافت اطلاعات ازکاربر خود تعامل بهترو بیشتری با او داشته باشید؟
 
 
فرم ها ازعناصری تشکیل شده اند که به کاربراجازه ورود اطلاعات را میدهند. در واقع اطلاعات (اطلاعات فرم) به طرف برنامه ای که بر روی سرور قرار دارد ، فرستاده می شود و بعد از تجزیه و تحلیل بر روی سرور،نتیجه به مخاطب نمایش داده می شود.
 
 از نمونه عناصر فرم می توان به موارد زیر اشاره کرد.
 
 
• text fields(فیلدهای متنی)
• textarea(ناحیه متنی)
• radio buttons(دکمه های رادیویی)
• checkboxes
• drop-down menus (لیست های پایین افتان)
 
 
دستور<form> در واقع نقطه آغاز و پایان فرم را تعیین می کند و شما قادر خواهید بود انواع دستورات html (برای مثال تگهای جدول و عکس که قبلا آموخته اید)را در آن به کار ببرید.
ازصفات دستور <form>موارد زیر را می توان نام برد:
 
method="post  or  get"
action="url  or  filename"
method:
بوسیله ی این صفت تعیین می کنید که اطلاعات فرم به چه نحوی به مقصد مورد نظر منتقل شوند.
 
get: در این حالت داده ها و اطلاعات فرم از طریق url مرورگر منتقل خواهند شد و محدودیت هایی نیز خواهید داشت چراکه بعضی کاراکترها مثل & قابل استفاده نخواهند بود. همچنین از آنجا که داده ها در url مرورگر نمایش داده میشوند برای انتقال داده هایی مانند پسورد و ... مناسب نمی باشد.
 
post: در صورتی که از method=post استفاده نمایید اطلاعات به صورت داخلی - internal - منتقل میشوند و در url نمایش داده نمیشوند. در این روش هیچ محدودیتی برای حجم داده های ارسالی و نوع کاراکترها نخواهید داشت.
 
action: 
معمولا مقدار این صفت آدرس فایلی است که پردازش فرم را انجام میدهد. برای آدرس دهی باید طبق قوانین آدرس دهی که قبلا فرا گرفتید عمل کنید.
 
<html>
         <body>
                <form action=" address " method="post">
 
                </form>
       </body> 
</html>
بر خلاف بسیاری از دستورات html فرم ها در مرورگر به تنهایی نمایش داده نمیشوند. به عنوان مثال دستورات مثال بالا هیچ چیزی را در مرورگر نمایش نخواهد داد. برای اینکه اطلاعات را از کاربر دریافت کنیم علاوه بر دستور فرم نیازمند دستورات دیگری هستیم که فیلدهای ورودی را درفرم مشخص کنند. اکثر فیلدهای ورودی در زبان html بوسیله دستور input مشخص میشوند. شکل کلی دستور input به صورت زیر است. که در این حالت type نوع فیلد ورودی و name نام فیلد ورودی را مشخص میکند.
 
<input type="fieldType" name="fieldName" />
نکته قابل ذکر در رابطه با نام فیلدها این است که وقتی فرمی به برنامه ای که بر روی سرورقراردارد، فرستاده می شود هر یک از ویژگی های آن فرم با name مربوطه مدیریت می شود.به این ترتیب که ،اطلاعات هر کدام از عناصر فرم برای اینکه با یکدیگر تمایز داشته باشند با name های یکتایی از هم جدا می شوند و هنگامی که می خواهیم به اطلاعات هر عنصر از قبیل گزینه ی انتخاب شده و یا متن نوشته شده ، فرم دسترسی پیدا کنیم ،name  آنها در واقع نوع و کیفیت رفتار مخاطب را بر می گرداند.
 
در ادامه با انواع فیلدهای ورودی بیشتر آشنا میشویم!
 
فیلدهای متنی   text:
زمانی که شما بخواهید به عنوان کاربر اطلاعاتی نظیر حروف و اعداد را وارد کنید این فیلد کاربرد فراوانی خواهد داشت .
 
First name : <input name="First_name" type="text" value="enter your First name" size="25"     maxlength="25" />
<br />
Last name :<input name="Last_name" type="text" value="enter Your Family name" size="30"   maxlength="30" />
ویژگی پر کاربرد درtext :
 
• size=NO که میزان کارکترهای وارد شده را تعین میکند اما بصورت پیش فرض 20 کاراکتر است!
• maxlength=NO  حداکثر تعداد کارکتر های ورودی را کنترل می کند.
• name=” Textbox _Name” : برای نام دهی
• value=”preview_Text” متن اولیه در آن نوشته می شود.
 
در صورتی که تمایل داشته باشید فیلد ها بصورتی باشند که در هنگام تایپ کردن دیده نشوند - فیلد ورودی پسورد - باید نوع فیلد را password انتخاب نمایید:
 
User Name: <input name="userName" type="text" value="user name" size="25"     maxlength="25" />
<br />
Password :<input name="myPass" type="password " value="password" size="30"   maxlength="30" />
 
textarea :
در یک textarea شما می توانید به میزان نامحدود کاراکتر وارد کنید ، که در مثال زیر بوضوح قابل مشاهده است.
 
<textarea name="content" rows="10" cols="30"> 
  In The Name Of God!
</textarea>
 
• cols=NO : برای تعیین عرض این محوطه
• rows=NO : برای تعیین سطر این محوطه
 
 
دکمه های رادیویی (radio buttons):
شما زمانی ازدکمه های رادیویی استفاده خواهید کرد که مایلید از بین تعدادی گزینه، یکی را انتخاب کنید.
 
<input type="radio" name="group1" value="Milk"> Milk<br />
 
<input type="radio" name="group1" value="Butter" checked> Butter<br />
 
<input type="radio" name="group1" value="Cheese"> Cheese
 
• Name=”radio_name” اسم گروهی ازدکمه های radio ،هنگامی قرار است از بین تعدادی از آنها تنها یکی قابل انتخاب باشد، باید name آن دسته از از دکمه های radio  یکسان باشد.
• value=” preview_Text” متن اولیه در آن نوشته می شود.
•  checked:  اگر بخواهیم دکمه ای بصورت اولیه انتخاب شده باشد این عبارت را می نویسیم.
 
Checkbox 
وقتی بخواهیم از بین گزینه ها انتخاب های گوناگونی را داشته باشیم checkbox  ها بهترین راه حل هستند.که در ادامه مثالی را مشاهده خواهید کرد.
 
<input type="checkbox" name="option1" value="Milk"> Milk<br>
 
 <input type="checkbox" name="option2" value="Butter" checked> Butter<br>
 
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
 
• Name=”checkbox_name” اسم گروهی از checkbox ها
• value=”check_value” این مقدار در نظر گرفته شده ،برگردانده می شود.
• checked:  اگر بخواهیم   checkboxبصورت اولیه انتخاب شده باشد ،این عبارت را می نویسیم.
 
معرفی <select>
برای اینکه بتوانیم لیستی از موارد اتخابی تهیه کنیم از این تگ استفاده می کنیم ، که هر مورد را جلوی تگ <option> می نویسیم.
 
<select name="food">
  <option value="Mike">Milk</option>
  <option value="Butter" selected> Butter </option>
  <option value="Cheese"> Cheese </option>
</select>
• name="selecName": برای نام دهی
• size=NO که تعداد مواردی که همزمان قابل نمایش است را تعین میکند .
• Multiple:این ویژگی باعث می شود تا کاربر از لیست با فشار دادن دکمه ی ctrl یا shift چند گزینه را انتخاب نماید.
• Selected : این ویژگی باعث می شود تا این مقدار بطور پیش فرض انتخاب شده باشد.
• value=”option_value” این مقدار در نظر گرفته شده ،برگردانده می شود.
 
Submit:
این عنصر برای تایید فرم استفاده می شود. زمانی که بر روی دکمه Submit فشار داده می شود فرم به آدرسی که به  action نسبت داده می شود،فرستاده می شود.در حالیکه می توان با java script این گونه عناصر را کنترل کرد.
 
Press The Submit <input name="Submit" type="submit" value="Ok" />
• Name=”submit_name” اسم این دکمه
• value=”submit_text” مقداری که روی دکمه نوشته می شود
 
reset :
برای ساختن دکمه ای که فرم را به حالت اولیه باز می گرداند.
 
Press The Reset  <input name="reset" type="reset" value="reset" />
• Name=”reset_name” اسم این دکمه
• value=”reset_text” مقداری که روی دکمه نوشته می شود
 
button:
برای ساختن دکمه به کار برده می شود.این دکمه به تنهایی کاری برای ما انجام نمی دهد.با دانستن زبان script  می توانیم دستوراتی به این دکمه ها داد تا کاری را انجام دهند.
 
Press The Button <input name="button" type=" button " value=" button " />
• Name=” button _name” اسم این دکمه
• value=” button _text” مقداری که روی دکمه نوشته می شود.
 
image button:
این ویژگی کارکردی شبیه دکمه ی submit دارد که در واقع این طور است که وقتی بر روی عکسی کلیک می شود فرم به آدرسی که به  action نسبت داده می شود،فرستاده می شود.
 
<input type="image" src="url" name="image" width="60" height="60">                   
ویزگی های به کار رفته شده در قسمت عکس ها بطور مفصل بحث شده است و برای جلوگیری از زیاد شدن حجم مطالب از ذکر آنان خودداری می کنیم.
در انتها به 2 ویژگی در تمامی تگهای اصلی فرم وجود دارد اشاره می کنیم:
1. disabled: اگر از این تگ استفاده کنیم آن عنصر نمایش داده می شود اما غیر فعال می باشد.
2. tabindex=NO الویت حرکت cursor  در هنگامی که دکمه tab از صفحه کلید فشار داده می شود.به این صورت که هر چه شماره کمتر باشد الویت بیشتر است.در صورت برابری شماره ها حرکت cursor به ترتیب قرار گرفتن آنها حرکت می کند.
 
نویسنده: مجتبی کاظمی
دوشنبه 29 آبان 1391  04:53 ب.ظ
تشکرات از این پست
alireza1412
دسترسی سریع به انجمن ها