آموزش HTML

[سیده آمین ارمان]

تگ Table

در این بخش از آموزش Html ، تگ Table را آموزش می دهیم.

در تگ table برای رسم جدول استفاده می شود ولی چون حجم بالایی دارد بیشتر از تگ divاستفاد می شود.
برای رسم جدول تگ Tr استفاده می شود استفاده می شود این تگ برای رسم سطر جدول استفاده می شود همچنین برای رسم سلول از تگ Td استفاده می شود.

توجه داشته باشید که متنی که قرار است در داخل خانه ی جدول قرار گیرد باید داخل تگ td و یا بین تگ tr و تگ table در در طراحی سایت نوشته شود.

در این تگ می توانید تعیین کنید که جدول در کدام قسمت از سایت قرار گیرد.همچنین می توانید رنگ پس زمینه ی جدول،ضخامت پهنای جدول،میزان پهنا و عرض جدول و سایر موارد مربوط به جدول را اضافه کرد.

مثال زیر کاربرد تگ Table در در طراحی سایت را نشان می دهد.

<table width="200" border="1">
<tr>
<td>متن يا گرافيک موردنظر </td>
</tr>
</table>

 

[سیده آمین ارمان]

تگ Button , Label , Textarea
تگ Button

در این بخش از آموزش Html ، تگ Textarea , تگ Lable و تگ Button را آموزش می دهیم.

از تگ button برای ایجاد دکمه تایید استفاده می شود.با استفاده از این تگ به صفحات وب دکمه تایید اضافه می شود.شما می توانید برای استفاده از دکمه از متن و یا عکس استفاده کنید.این تگ ویژگی رویداد در html را حمایت می کند.

مثال زیر کاربرد تگ button را در طراحی سایت نشان می دهد.

<button type="button">Click Me!</button>

lable

تگ Lable

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

مثال زیر کاربرد تگ lable در در طراحی سایت را نشان می دهد.

<input> element
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>

تگ Textarea

از تگ textarea برای ایجاد تعداد نامحدودی کاراکتر در بیش از یک سطر استفاده می شود.با استفاده از این تگ امکان ویرایش راحتتر مطالب را به کاربران می دهد.تگ textarea دارای شناسه می باشد که کاربرد آنها را برای شما توضیح می دهیم.
cols : با استفاده از این شناسه عرض کادر مشخص می شود.مقدار عرض کادر بستگی به تعداد کاراکتر بکار رفته و همچنین فونت می باشد.
rows : این شناسه تعداد سطرهای کادر شما را نشان می دهد که مقدار آن باید همیشه مثبت باشد.
name : این شناسه مخصوص تعیین نام textarea می باشد.
readonle=readonly : این شناسه را کاربر نمی تواند ببیند و به صورت فقط خواندنی نوشته می شود.
disabled=disabled : این شناسه کادر را به صورت غیرمشخص درمی آورد و کاربر نمی تواند متن نوشته شد در کادر را ببیند.

مثال زیر کاربرد تگ textarea را در بخش در طراحی سایت نشان می دهد.

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

 

[سیده آمین ارمان]

تگ Select , Option , Optgroup
تگ select

در این بخش از آموزش Html ، تگ Optgroup , تگ Option و تگ Select را به شما آموزش می دهیم.

در این تگ برای اضافه کردن drop-down استفاده می شود.دراین تگ برای ایجاد یک منوی کشویی که دارای چند گزینه می باشد استفاده می باشد.تگoption از زیرمجموعه های تگ select می باشد و با استفاده از آن می توان قابلیت هایی را به وب سایت اضافه کرد.

مثال زیر کاربرد تگ select را نشان می دهد.

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

تگ option

از تگ option برای ایجاد گزینه هایی که در لیست نمایش داده میشود استفاده می کنیم.این تگ داخل تگ های select قرار گرفته است همچنین این تگ را ویژگی های عمومی در html را پشتیبانی می کند.

مثال زیر کاربرد تگ option را در طراحی سایت نشان می دهد.


<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

تگ optgroup

از تگ optgroup برای ایجاد تعدادی از option ها در یک drop-down استفاده می شود.در صورتی که گزینه های موجود در لیست شما زیاد باشد می توانید از این تگ استفاده کنید.

مثال زیر کاربرد تگ optgroup را در بخش طراحی سایت نشان می دهد.

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

 

[سیده آمین ارمان]

تگ Form , Input10
تگ Form

در این بخش از آموزش Html ، تگ Form و تگ Input را آموزش می دهیم.

تگ form یک فرم ورودی برای کاربر تعیین می کند.تگ form شامل چند تگ input می باشد.شامل:
text fields
radio-buttons
checkboxes
submit buttons
,...
همچنین فرم می تواند شامل عناصری از قبیل select lists,fieldset,legend,lable,textarea,...باشد.

مثال زیر کاربرد تگ form را در بخش طراحی سایت نشان می دهد.

<form>
.
input elements
.
</form>

تگInput

مهمترین تگ موجود در FORM تگ Input می باشد.تگ Input یک فیلد ورودی تعیین می کند.این تگ می تواند قابلیت های متفاوتی داشته باشد. شامل:text field,password,checkbox,radio button,submit button می باشد.

مثال زیر کاربرد تگ input را در طراحی سایت نشان می دهد.

<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

 

[سیده آمین ارمان]

تگ Frame , iFrame , Frameset
تگ Frame

در این بخش از آموزش Html ، تگ frame ، تگ iframe و تگ frameset را آموزش می دهیم.

با استفاده از فریم ها میتوان صفحات مختلف وب را در یک پنجره مرورگر نشان داد. تگ Frame قابل استفاده در html4 می باشد.به عبارتی از تگ frame هم برای ایجاد یک فریم یا قاب درون یک فریم اصلی که همان framest است استفاده میشود.

مثال زیر کاربرد تگ frame را در طراحی سایت نشان می دهد.

<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

تگ Frameset

این تگ مانند تگ Frame از html5 پشتیبانی نمیکند.تگ Frameset در اصل یک قاب را تعریف می کند.به عبارتی frameset تعداد ستون یا ردیف در مجموعه فریم را مشخص می کند با استفاده از این خاصیت مقدار فضای اشغال شده مشخص می شود.

تگ iframe

با استفاده از این تگ فروم های درون خطی میتوان ایجاد کرد.

توجه داشته باشید که نمی توانید به طور همزمان از تگ های <body></body> و <frameset></frameset> با هم استفاده کنید. اگرچه اگر از تگ <noframes> شامل متنی برای نمایش در مرورگرهایی که از فریم ها پشتیبانی نمی کنند، استفاده کنید، مجبورید متن را در تگ های <body></body> قرار دهید. در اولین مثال زیر نحوه این کار را ببینید.

مثال زیر کاربرد تگ iframe را در طراحی سایت در بخش آموزش html نشان می دهد.

<iframe src="

Please, ورود or عضویت to view URLs content!

"></iframe>

 

[سیده آمین ارمان]

تگ Object , Param
تگ Object

در این بخش از آموزش Html ، تگ Object و تگ Param را آموزش می دهیم.

از تگ Object برای ارتباط بین شی خارجی مثل فایل صوتی یا تصویری به صفحه html استفاده می شود.این تگ امکان ایجاد تغییر در اطلاعات را به برنامه نویس می دهد همچنین با استفاده از این تگ میتوان فایل درج شده را درج کرد.
این تگ می تواند در تگ Head و یا تگ Body قرار بگیرد.فراموش نشود برای نمایش تصویر از تگ img استفاده شود.

مثال زیر کاربرد تگ Object در برنامه نویسی و طراحی سایت را بیان می کند.

<object width="300" height="300" data="sitedesign-co.com.swf"></object>

تگ Param

تگ Param تعیین کننده تنظیمات نمایش شی در هنگام اجرا می باشد.در HTML این تگ نیاز به تگ پایانی ندارد.

مثال زیر در طراحی سایت بیانگر کاربرد تگ Param می باشد.

<object data="horse.wav">
<param name="autoplay" value="true">
</object>

 

[سیده آمین ارمان]

تگ Table , Td , Tr
تگ Table

در این بخش از آموزش Html ، تگ Table , تگ Td و تگ tr را به شما آموزش می دهیم.

از تگ Table برای ایجاد جدول استفاده می شود ولی چون استفاده از جدول در طراحی سایت حجم زیادی لازم دارد بیشتر از تگ div استفاده می کنند.

تگ Td

از تگ Td برای نمایش یک خانه جدول درون یک سطر استفاده می شود.هر خانه از جدول می تواند خصصیات خاص خود را داشته باشد.این تگ باید درون تگ Tr مورد استفاده قرار گیرد.

تگ Tr

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

مثال زیر کاربرد تگ table , تگ td و تگ tr را بخش آموزش html نشان می دهد.

< tr >
< td >

سطر 1

< /td >
< /tr >
< tr >
< td >
سطر 2
< /td >
< /tr >
< /table >

خروجی:

سطر 1
سطر 2

 

[سیده آمین ارمان]

تگ لیست Ul , Li
تگ Ul

در این بخش از آموزش Html ، تگ Ul و تگ Li را به شما آموزش می دهیم.

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

√Disk:این خصیصه باعث نمایش دایره ی توپر کنار آیتم مورد نظر می شود.

√Circle:باعث نمایش یک دایره توخالی کنار آیتم انتخاب شده می شود.

√Square:امکان نمایش مربع تو پر کنار آیتم انتخاب شده می شود.

√None:این خصیصه هیچ علامتی را اضافه نمی کند.

تگ LI

با ادغام تگ های li , ul در طراحی سایت برای نمایش لیست های نامرتب استفاده می کنند.توجه داشته باشید که برای ورود دستورات خود در این لیست ابتدا باید تگ Ul را قرار داد و سپس دستورات را در تگ Li وارد کرد.توجه داشته باشید که این تگ می تواند به صورت یکه هم نوشته شود.

مثال زیر کاربرد تگ li و تگ ul را در طراحی سایت نشان می دهد.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

نتیجه :

Coffee
Tea
Milk

 

[سیده آمین ارمان]

تگ Map , Area
تگ Map

در این بخش از آموزش Html ، تگ Map را به شما آموزش می دهیم.

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

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

تگ Area

تگ Map شامل چند تگ Area می باشد که نقاط قابل کلیک بر روی نقشه را مشخص می کند.

مثال زیر در زمینه طراحی سایت کاربرد تگ Map و تگ Area را در آموزش Html نشان می دهد.

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

 

[سیده آمین ارمان]

تگ Span

در این بخش از آموزش Html ، تگ Span را آموزش می دهیم.

این تگ مانند تگ Lable عمل می کند.تگ span می تواند بخشی از یک نوشته را نشانه گذاری کند.از تگ span برای تقسیم بندی متون موجود استفاده می شود با استفاده از این خاصیت می توان به هر قسمت از متن ویژگی های خاصی را اعمال کرد.

کاربرد تگ Span در طراحی سایت با ذکر یک مثال در زیر بیان شده است.

<html>
<head>
</head>
<body>
<p>this <span style="color:red">is a</span> paragraph.</p>
</body>

</html>

نتیجه :

this is a paragraph.