آموزش طراحی وب

معرفی عناصر HTML با مثال (۲)

در این مقاله به ادامه معرفی عناصر html همراه با مثال می پردازیم.

عناصر html

فصل دوم (عناصر HTML4)

جلسه پنجم (معرفی عناصر HTML همراه با مثال ) (HTML Elements) (قسمت دوم)

برای مطالعه مطالب این جلسه ، ابتدا جلسه ی قبل رو مطالعه کنید .

<ul></ul> :  برای ایجاد لیست ها از این عنصر استفاده میشه که عنصر درونی اون عنصر <li></li> هست . مثال :

 <ol></ol> : برای نوشتن لیست ها از  این عنصر استفاده میشه و عنصر درونی اون عنصر<li></li> هست. مثال :

 <img> : با این تگ شما می تونید تصاویر دلخواه خودتون و تو صفحات وب به نمایش دربیارید ، که شامل خصوصیات مهم زیر هست : (پیشنهاد من اینه که حتما این خصوصیات رو تو تگ بکار بگیرید .)

خاصیت src  : برای مشخص کردن آدرس تصویر از این صفت استفاده میشه . (این خاصیت ضروریه و باید استفاده بشه.)

خاصیت alt : به دلیل اینکه موتورهای جستجوگر نمی تونند تصاویر و مثل متون بررسی و ثبت کنند ، از این صفت استفاده می کنیم ؛ به این صورت که توضیحات تصویر و تو این صفت می نویسیم و موتورهای جستجوگر صفت alt رو مثل متون بررسی و ثبت می کنن.

خاصیت های height و width : برای مشخص کردن عرض و ارتفاع تصویر از این خاصیت ها استفاده میشه.

 <a></a> : برای درج لینک ها می تونید از این تگ استفاده کنید ، برای سئوی بهتر، بهتره علاوه بر خاصیت http  از خصوصیت  title هم استفاده کنید . مثال :

 <table></table> : برای ایجاد جداول

<tr></tr> : برای ایجاد ردیف های جدول

<td></td> : برای ایجاد سلول های هر ردیف

<caption></caption> : برای ایجاد عنوان یا caption به جدول

ادغام کردن ستون ها با استفاده از صفت colspan

ادغام کردن ردیف ها با استفاده از صفت rowspan

<thead></thead> : برای جداسازی و تقسیم بندی هدر جدول از این تگ استفاده میشه .

<tbody></tbody> : برای جداسازی و تقسیم بندی بدنه ی جدول از این تگ استفاده میشه .

<tfoot></tfoot> : برای جداسازی و تقسیم بندی فوتر جدول از این تگ استفاده میشه .

مثال :

 <form></form> : برای ایجاد فرم ها از این عنصر استفاده می کنیم ، تمامی المنت های مربوطه رو بین این دو تگ قرار میدیم .

صفت action  : از صفت اکشن برای مقصد فرم استفاده می کنیم ، به عنوان مثال قصد داریم اطلاعات وارد شده ی توی فرم رو به صفحه ای با نام send.php ارسال کنیم؛ در این صورت تو صفت action آدرس رو مشخص می کنیم (action=”send.php”)

صفت method  : تو این صفت شما روش ارسال رو مشخص می کنید به عنوان مثال : method=”POST”  یا method=”GET” (در رابطه با این متدها در جلسات آینده آشنا میشوید .)

<input></input> : این عنصر یک فیلد متنی هست برای ورودی هایی مانند نام و نام خانوادگی ، ایمیل ، شماره تماس و …  .

صفت type  : در این صفت نوع فیلد متنی رو مشخص می کنیم، انواع صفت type :

        Text : فیلدی برای ورودی از نوع متن مثل نام و نام خانوادگی

        button :  فیلد رو به عنوان یک دکمه در نظر میگیره

        Checkbox : در صورتی که بخوایم چند گزینه رو انتخاب کنیم ، از این نوع صفت استفاده میکنیم .

به عنوان مثال : علایق شما چیست ؟ – ورزش   – طراحی وب   – آموزشگاه آنلاین ایرانیان   – سایر

        Radio : تو مواقعی که شما حق انتخاب یه گزینه رو دارید از Radio استفاده می کنید . حتما باید مقدار name یکسانی داشته باشن تا عضو یه گروه به حساب بیان . مثلا اگر شما ۵ تا radio بذارید اما name یکسانی نداشته باشن . شما میتونید همشون و باهم انتخاب کنید .

        به عنوان مثال : جنسیت ؟ – مرد   – زن

        File : برای آپلود فایل ها از این نوع فیلد استفاده می کنیم .

        Password : برای ورودی هایی از نوع پسورد استفاده میشه .

        Submit : برای ایجاد دکمه ارسال و ثبت اطلاعات استفاده میشه .

        image : برای ایجاد دکمه ای که قصد داریم تصویری برای اون در نظر بگیریم . این دکمه مانند submit عمل می کنه .

        Reset : برای ایجاد دکمه ای برای پاک کردن فرم استفاده میشه .

مثال :

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

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

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

اگر شما دارای یک لیست طولانی از گزینه ها میباشید استفاده از عنصر optgroup برای کنترل آسون گزینه ها پیشنهاد میشه.

 <blink></blink> : با استفاده از این عنصر می تونید متنی رو به صورت چشمک زن در بیارید. این عنصر فقط در مرورگرهایی کارایی داره که بر پایه Netscape ساخته شده باشن.

Operaو Firefox از جمله مرورگرهایی هستن که می تونن این عنصر رو نمایش بدن . درMicrosoft Internet Explorer متن و بصورت ساده مشاهده میکنیم.

 تگ های Hn  :

<h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> , <h6></h6>

از تگ های Hn برای عناوین که در سئو نقش موثری دارن استفاده میشه . به ترتیب هرچی عدد H بیشتر بشه اولویت اون کمتر میشه . به عنوان مثال از تگ h1 برای عنوان اصلی و مهم سایت استفاده میشه .

نکته مهم اینه که تو یک صفحه وب فقط می تونیم از یک تگ h1 استفاده کنیم در صورتی که سایر hn ها رو هر چند بار که لازم باشه میتونیم بکار ببریم ، بهتره اینم بگم که این مورد تو HTML4 به این صورت هستش ، این مشکل تو HTML5 بطور کامل حل شده.

 <fieldset></fieldset>  : عنصر Fieldset برای گروه بندی تو فرم ها بسیار کاربرد داره. برای تعیین عنوان یک گروه از عنصر Legend در ابتدای تگ Fieldset استفاده میشه.

 <span></span> : عنصر span برای متن های کوتاه استفاده میشه .

<div></div> : عنصر div از پر کاربردترین تگ ها تو طراحی وب سایته ، این عنصر جایگزین بسیار خوبی برای عنصر <table> تو صفحه وب بشمار میره.

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

  <param></param> : از عنصر param برای تعریف پارامتر برای پلاگین ها استفاده میشه. مثال :

 <frameset></frameset> : با استفاده از این عنصر میتونیم یک قاب ایجاد کنیم و محتوای صفحات دیگه رو تو یک صفحه نمایش بدیم. این عنصر تو HTML5 پشتیبانی نمیشه و به دلیل اینکه توی سئو می تونه یه نمره منفی به حساب بیاد امروزه دیگه استفاده نمیشه .

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

Class ,  id , style , title

مثال :

 <iframe></iframe> : با عنصر <iframe> میشه فریم های درون خطی ایجاد کرد. عنصر iframe هنوز تو html5 پشتیبانی میشه . مثال :

تهیه شده در مدرسه آنلاین ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین