جلسه سوم – معرفی تگ های مهم و کاربردی در HTML

طراحی و برنامه نویسی وب

در این بخش، تگ های اصلی و پرکاربرد HTML به اختصار معرفی می شوند، اچ تی ام ال یک زبان نشانه گذاری اطلاعات متنی، تصویری ، چندرسانه ای و … در صفحات وب است.

تگ های اصلی

 

کاربرد

تگ

عنوان با درجه های یک تا شش

h1 , h2 , h3, h4 , h5 ,h6

تعیین صفحه وب

html

ایجاد بخش تعاریف و تنظیمات صفحه

head

تعیین متن نوار عنوان پنجره مرورگر

title

ایجاد بخش بدنه صفحه

body

شکستن خط

br

ایجاد پاراگراف

p

نوشتن توضیحات

<!– –>

 

تگ های جدول بندی

کاربرد

تگ

تعریف جدول

table

تعریف عنوان جدول

thead

تعریف بدنه جدول

tbody

تعریف فوتر جدول

tfoot

تعریف سطر

Tr

تعریف سلول عنوان

Th

تعریف سلول

Td

مثال از جدول :

 

تگ های فرم

تگ

کاربرد

form

ساخت فرم

input

ساخت شکل های مختلف ورودی

select

ساخت لیست باکس و کمبوباکس

option

تعریف آیتم برای لیست ها

textarea

تعریف جعبه متن طولانی

تگ input یک خاصیت بنام type دارد که مطابق جدول زیر مقدار گرفته و شکل ورودی را تعیین می کند:

نوع input

کاربرد

Text

 جعبه‌ی ورود متن یک سطری

Password

جعبه متن دریافت کلمه عبور

Radio

دکمه رادیویی

Checkbox

جعبه انتخاب

File

انتخاب و ارسال فایل

Hidden

نگهداری اطلاعات مخفی

Button

دکمه فشاری

Submit

دکمه برای ارسال فرم به سرویس دهنده

Reset

دکمه بازنویسی اطلاعات فرم

مثال از فرم:

<html>
<body>
<form action="page2.php" method="post" enctype="multipart/form-data">
<table width="300" align="center" border="1">
<tr><th colspan="2" >  Student Info </th></tr>
<tr>
<td> name </td>
<td><input type="text" name="nam"  /></td>
</tr>
<tr>
<td> famliy </td>
<td><input type="text" name="fam" /></td>
</tr>
<tr>
<td> password </td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td> gender </td>
<td>
<input type="radio" name="gen" value="1" /> male
<input type="radio" name="gen" value="2" /> female
</td>
</tr>
<tr>
<td> hobbies </td>
<td>
<input type="checkbox" name="mu"  /> Music <br />
<input type="checkbox" name="sp"  /> Sport
</td></tr>
<tr><td> state </td>
<td>
<select name="field">
<option value="1">Computer </option>
<option value="2">Graphics </option>
<option value="3">Mechanics </option>
</select>
</td></tr>
<tr><td> address </td>
<td><textarea name="addr" cols="50" rows="3"></textarea>
</td></tr>
<tr><td> picture </td>
<td><input type="file" name="pic" /></td>
</tr>
<tr><td>&nbsp; </td>
<td>
<input type="submit" value=" Submit "  />
<input type="reset"  value=" Clear "  />
</td></tr></table>
</form>
</body>
</html>


خروجی:

برچسب ها

, , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای طراحی و برنامه نویسی وب | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

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


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.