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

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

معرفی عناصر 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 پشتیبانی میشه . مثال :

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟