آموزش تگ های پیشرفته 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>






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




 

تگ iframe

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







تگ فرم (FORM)

یک فرم 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">






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




منبع: www.pars-soft.ir

 
نظری برای این مطلب وجود ندارد!


فروشگاه اینترنتیفروشگاه آنلاینخرید فروشگاه آنلاینفروشگاه پاسادپاسادپاساد شاپراه اندازی فروشگاه آنلاینطراحی سایتطراحی سایت خبریطراحی سایت شخصیوب سایت شخصیوب سایت خبری