آموزش تگ های پیشرفته HTML

کاربردهای تگ div

• شما میتوانید یک سند HTML را به بخش یا بخشهای مختلفی تقسیم بندی کنید.
• زمانیکه میخواهید به گروهی از تگ ها یک style  در css اضافه کنید میتوانید تمام این تگ ها را در داخل تگ <div> قرار دهید ، سپس به آن تگ <div> ، استایل مورد نظر خود را اعمال کنید با این روش تمام تگ هایی که در داخل تگ <div> میباشند از این استایل ارث میبرند.

 در مثال زیر  تگ <h3>  و  تگ <p>  ، استایل تگ <div>  را ارث میبرند.

<div style=”color:#0000FF”>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

تگ <map>از تگ map برای تعریف یک image-map  سمت سرویس گیرنده (client-side)  استفاده مکنند. تمام تصاویر مناطق این  نقشه قابل کلیک است.

<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>

 تگ <map> شامل چندین تگ area میباشد که نقاط قابل کلیک بر روی نقشه را مشخص میکند.
تگ map همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند . این تگ همچنین ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.

تگ <ul>یکی دیگر از مهمترین تگهای اچ تی ام ال در طراحی قالب سایت ، تگ ul و ترکیب آن با تگ li می باشد.از تگ ul و ترکیب آن با تگ li برای ایجاد لیست های مرتب و نا مرتب استفاده میشود.
از آموزش css  برای فرمت دادن به تگ <ul> و تگ <li> میتوانید استفاده کنید. در بخش تنظیم لیست ها در این مورد کاملا توضیح داده ایم.

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

تگ <ul> همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.

تگ <table>تگ table برای تقسیم بندی متن به چند بخش و جدول بندی سایت استفاده میشود.این تگ مانند تگ div برای قالب سایت ، استفاده میشود ، ولی به دلیل حجیم بودن تگ های مورد استفاده در  تگ table و تگ td و تگ tr، و نیز انعطاف پذیری کم آن ، پیشنهاد میشود که از  تگ div استفاده کنید.

<table border=”1″>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

تگ table همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.

 تگ objectاز تگ object  برای استفاده از چندرسانه ای ها مانند : audio, video, Java applets ActiveX, PDF,,Flash در صفحات وب سایت استفاده میکنند.همچنین برای جاسازی یک صفحه وب دیگر در سند HTML  میتوان از آن استفاده کرد.
تگ object بایستی درون تگ body قرار بگیرد. متنی که بین تگ <object></object> قرار میگیرد در بیشتر مرورگرها نمایش داده نمیشود.این تگ بایستی حداقل شامل یکی از ویژگی های data یا type باشد.

<object width=”400″ height=”400″ data=”pars-soft.swf”></object>

تگ param
از تگ param برای تعریف پارامتر برای پلاگین ها استفاده میشود.

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

تگ <object> و تگ <param>  همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.

تگ frameتگ <frame> در  HTML5 پشتیبانی نمیشود. برای هر تگ frame در تگ frameset میتوانید ویژگیهای مختلفی را تعریف کرد.تگ <frame> در  HTML4 ویژگیهای استاندارد زیر را پشتیبانی میکند.

• class
• id
• style
• title

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

 

تگ frameset
تگ <frameset> یک قاب تعریف میکند. تگ <frameset> در  HTML5 پشتیبانی نمیشود.
تگ iframe
با تگ<iframe> میتوان فریم های درون خطی ایجاد کرد. تگ iframe هنوز در html 5 پشتیبانی میگردد.

<iframe src=”http://www.pars-soft.ir“></iframe>

Formsیک فرم HTML میتواند شامل چندین تگ input با انواع مختلف زیر باشد :

• text fields
• checkboxes
• radio-buttons
• submit buttons
• و …

یک فرم همچنین میتواند شامل عناصر زیر باشد.

• select lists
• textarea
• fieldset
• legend
•  label
• و …

از تگ form برای ایجاد یک فرم  HTML استفاده میشود.

<form>
.
input elements
.
</form>

 Input
مهمترین تگ موجو در تگ <form> ، تگ input میباشد. از این تگ برای انتخاب اطلاعات کاربران استفاده میشود. تگ <input> با توجه به ویژگی type میتواند به روشهای مختلف مورد استفاده قرار گیرد.انواع مختلفی که تگ <input> میتواند بگیرد شامل مقادیر زیر است.

• text field
• checkbox
• password
• radio button
• submit button
• و …

Text Fields
بیشترین و رایج ترین نوع مورد استفاده  “type=”text میباشد.
<input type=”text”> یک فیلد یک خطی ، که کاربر میتواند داخل آن اطلاعات وارد کند را تعریف میکند.

<form>
First name: <input type=”text” name=”firstname”><br>
Last name: <input type=”text” name=”lastname”>
</form>

Password Field
<input type=”password”> یک فیلد مانند فیلدهای پسورد تعریف میکند.مقادیری که در این فیلد نمایش داده میشون به صورت ستاره یا دایره نشان داده میشوند.

<form>
Password: <input type=”password” name=”pwd”>
</form>

Radio Buttons
<input type=”radio”> برای کاربران مشخص میکند که تنها یک گزینه را میتوانند انتخاب کنند.

<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>

Checkboxes
<input type=”checkbox”> برای کاربران مشخص میکند که صفر یا گزینه های دیگری را انتخاب کنند.

<form>
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car
</form>

Submit Button
<input type=”submit”> برای فرستادن اطلاعات فرم به سرور به کار میرود.

<form name=”input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>

تگ <label>تگ label برای تعریف یک برچسب بکار میرود.

<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>

تگ label همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.
تگ <button>
تگ button یک دکمه که قابل کلیک کردن باشد تعریف میکند. برای نمایش دادن یک دکمه شما میتوانید از متن یا عکس استفاده کنید. بین دکمه ای که با <input> ایجاد میشود و این دکمه تفاوتهایی وجود دارد.

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

تگ button همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.
تگ<textarea>
تگ<textarea> یک فیلد input  چند خطی ایجاد میکند. تگ textarea میتواند ،اعداد و کراکتر و متون نامحدودی را در برگیرد.

<textarea rows=”1″ cols=”10″>
At pars-soft.ir you will learn how to make a website.
</textarea>

تگ textarea همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.

تگ <select>از تگ select برای ایجاد یک لیست drop-down میتوان استفاده کرد. با تگ option موجود در تگ select گزینه های مختلفی را برای لیست خود میتوانید استفاده کنید.

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

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

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

 تگ option همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.
 تگ<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>

تگ optgroup همچنین ویژگی های عمومی در HTML  را پشتیبانی میکند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی میکند.