آموزش HTML

تنظیم شفافیت عناصر

در این بخش از آموزش css به توضیح ویژگی تنظیم شفافیت عناصر Opacity میپردازیم.

Opacity

با ویژگی Opacity میتوانید شفافیت تصاویر را تغییر دهید.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

در مثال بالا زمانیکه opacity=40  تنظیم شده است ، تصویر کدر تر نمایش داده میشود و زمانیکه opacity=100 در نظر گرفته شده است تصویر به صورت کاملا شفاف نمایش داده میشود.این حالت زمانی اتفاق میفتد که img:hover  انجام گیرد.یعنی با زفتن ماوس روی تصویر عکس به صورت شفاف نمایش داده میشود.

دنبال کردن این مطلب

فرم - تگ های Select , Option , Optgroup

تگ <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 را نیز پشتیبانی میکند.

دنبال کردن این مطلب

فرم - تگ های Button , Label ,

تگ <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 را نیز پشتیبانی میکند.

دنبال کردن این مطلب

فرم - تگ های Form , Input

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>

دنبال کردن این مطلب

تگ فریم

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

دنبال کردن این مطلب

تگ مولتی مدیا

تگ 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 را نیز پشتیبانی میکند.

دنبال کردن این مطلب

تگ جدول بندی

تگ <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 را نیز پشتیبانی میکند.

دنبال کردن این مطلب

تگ لیست

تگ <ul>

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

از تگ ul و ترکیب آن با تگ li برای ایجاد لیست های مرتب و نا مرتب استفاده میشود.

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

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

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

دنبال کردن این مطلب

عکس محدوده ای 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 را نیز پشتیبانی میکند.

دنبال کردن این مطلب

تگ محدوده فضا

تگ div

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

نکته : استفاده از تگ table در طراحی سایت پیشنهاد نمیشود و بهتر است از چینش موزائیکی در طراحی سایت ، بوسیله ی تگ div ، استفاده شود.

کاربردهای تگ 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>

دنبال کردن این مطلب
ratingValue4.8 worstRating 1 bestRating 5 reviewCount 203