حالت مطالعه
آموزش html به همراه تمام تگ های آن
مقدمه: html یک زبان نشانه گذاری برای ساخت صفهات وبسایت هاست, اگه شما میخواید یه برنامه نویس وب یا فرانت کار بشید یا حتی برنامه نویسی زبان های دیگه رو شروع کنید بهتره اول از همه html رو برای یادگیری شروع کنید..
نحوه نوشتن تگ ها در html
تمامی تگ های html و خصوصیت آنها :
تگ های پایه :
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <!DOCTYPE> | این تگ نوع صفحه رو مشخص میکنه و گذاشتن این تگ بالای صفحه باعث میشه مرورگر سریعتر بفهمه صفحه ما از html ساخته شده | |
| <html> | تگ html ریشه صفحات ما هست و تمامی کد های ما درون این تگ قرار میگیره | |
| <head> | تگ هد به معنی سر هست و تنظیمات و اتصالات و متا ها و تمام داده های غیر قابل مشاهده در صفحه در این تگ قرار میگیره | |
| <body> | تگ بادی به معنی بدنه هست و تمام کد هایی که توی صفحه ما قابل مشاهده هست توی این تگ قرار میگیره | |
| <h1> تا <h6> | تگ h1 تا h6 به ترتیب متن ما رو بزرگ تر نشون میده تا کوچیک تر, و برای سئو هم مهمه , مثلا تگ h1 عنوان مطلب ما رو توی گوگل نشون میده | |
| <p> | تگ p به معنی پاراگراف هست و متن های معمولی صفحه رو داخلش مینویسیم | |
| <!--...--> | این تگ کامنت هست و توسط دیگران دیده نمیشه فقط موقع کد نویسی بینش متن هایی برای راهنمای خودمون مینویسیم | |
| <br> | وقتی بخوایم بقیه محتوا یا متن ها رو توی یه سطر پایین تر بزاریم از این کد استفاده میکنیم | |
| <hr> | این تگ خط افقی توی صفحه میسازه |
تگ های قالب بندی:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <b> | تگ b باعث میشه متن ضخیم بشه | |
| <strong> | تگ استرانگ هم متن رو ضخیم میکنه اما اون رو مهم هم میکنه! | |
| <i> | تگ i متن رو ایتالیک یا همون کج نشون میده | |
| <em> | تگ em هم متن رو کج نشون میده با این تفاوت که اونو برای موتور های جستوجو گوگل مهم نشون میده | |
| <u> | تگ u زیر متن خط میکشه | |
| <sup> | تگ sup متن رو بالا نویس نشون میده | |
| <pre> | با تگ pre میتونید متن رو با فرمت و شکل و ظاهر دلخواهتون بنویسید | |
| <small> | تگ small متن رو کمی کوچک تر نشون میده | |
| <abbr> | تگ abbr زیر خط نقطه چین میکشه | |
| <code> | با تگ کد میتونیم کد های مختلف بنویسیم | |
| <kbd> | این تگ برای نوشتن کد های صفحه کلید هست | |
| <del> | تگ del باعث میشه روی متن خط کشیده بشه | |
| <ins> | تگ ins زیر متن خط میکشه | |
| <mark> | تگ مارک روی متن ماژیک زرد رنگ میکشه | |
| <blockquote> | این تگ برای نقل قول کردن منابع استفاده میشه | |
| <s> | تگ s متن رو نادرست نشون میده | |
| <address> | توی تگ آدرس هم آدرس محل کار یا یا شرکت و.. رو میتونید بنویسید و توی گوگل نشونش میده | |
| <cite> | این تگ هم متن رو کج نشون میده و داخلش میتونید نام نویسنده رو بنویسید | |
| <dfn> | تگ dfn هم متن رو کج نشون میده و برای تایین کلمه در محتوا به کار میره | |
| <meter> | این تگ مقدار را نمایش میدهد | |
| <progress> | این تگ نوار پیشرفت رو نشون میده | |
| <q> | این تگ اول و اخر متن علامت نقل قول میزاره | |
| <samp> | تگ سمپ متن رو به صورت کامپیوتری نشون میده | |
| <template> | این تگ محتوا رو تا موقع بارگیری کامل صفحه مخفی نگه میداره و برای نمایشش نیاز به جاوا اسکریپت هست | |
| <time> | این تگ برای نمایش زمان کاربرد داره | |
| <var> | این تگ یک متغیر ایجاد میکنه |
تگ های تصویری:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <img> | این تگ تصاویر رو در صفحه نمایش میده | |
| <figure> | تگ فیگور هم تصاویر رو نشون میده و بهتره ازش واسه نمایش تصاویر اشخاص استفاده کنید | |
| <figcaption> | تگ فیگ کپشن هم داخل تگ فیگور قرار میگیره و برای تصویر ما یه عنوان اضافه میکنه | |
| <picture> | داخل این تگ میتونید چندین تصویر با اندازه های مختلف قرار بدید | |
| <area> | تگ آریا یه منطقه داخل تگ های تصویری قرار میگیره و آدرس مکان اون تصویر رو نشون میده | |
| <map> | این تگ یه نقشه قابل کلیک روی تصویر ایجاد میکنه و به کد جاوا اسکریپت نیاز داره | |
| <canvas> | این تگ یه محیطه برای قرار دادن تصاویر گرافیکی در اون و تصاویرش هم با جاوا اسکریپت ساخته میشن | |
| <svg> | این تگ یه محیطه برای قرار دادن تصاویر svg |
تگ های لینک:
| تگ ها: | توضیحات | مثال ها |
|---|---|---|
| <a> | با این تگ میتونید متن ها رو لینکدار کنید | |
| <link> | این تگ کد و صفحات دیگه رو به صفحه ما متصل میکنه مثلا فایل های جاوا اسکریپت یا css رو با این تگ به صفحه html خودمون وصل میکنیم | |
| <nav> | داخل این تگ میتونید گروهی از لینک ها رو قرار بدید |
تگ های فهرست:
| تگ ها: | توضیحات | مثال ها |
|---|---|---|
| <ol> | با تگ او ال میتونیم یه لیست مرتب شده بسازیم | |
| <ul> | این تگ یه لیست نامرتب ایجاد میکنه | |
| <li> | این تگ یکی از گزینه های فهرست رو نشون میده | |
| <dl> | تگ دی ال یه لیست از توضیحات رو نشون میده | |
| <dt> | در توضیحات نام رو نشون میده | |
| <dd> | شرح مورد رو توی توضیحات نشون میده |
تگ های ورودی و فرم ها:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <form> | این تگ هم یه فرم توی صفحه میسازه | |
| <input> | تگ input ورودی ها رو میسازه , ورودی همون جای خالی هست که کاربر چیزی توش مینویسه | |
| <label> | این تگ برای input عنصر یا همون گزینه ایجاد میکنه | |
| <textarea> | این تگ متن های ساده چند خطی قابل تغیر اندازه رو ایجاد میکنه | |
| <select> | این کنترلی رو برای انتخاب از بین گزینه های مختلف ایجاد میکنه | |
| <optgroup> | گروهی از گزینه های select رو میسازه | |
| <option> | یه مورد رو برای انتخاب در select میسازه | |
| <fieldset> | گروهی از فیلد و ورودی ها رو میسازه | |
| <legend> | یه عنوان برای fieldset میسازه | |
| <datalist> | این کنترل برای انتخاب از بین چند گزینه و همچنین ارسال گزینه جدید هست | |
| <button> | تگ باتن برای ایجاد دکمه بکار میره |
تگ های جدول:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <table> | این تگ برای ساخت یه جدول هست | |
| <thead> | محتوا و چیزای داخل عنوان جدول توی این تگ قرار میگیرن | |
| <tbody> | محتوای اصلی داخل جدول توی این تگ قرار میگیرن | |
| <tfoot> | محتوای پاورقی جدول توی این تگ قرار میگیرن که همون سطر اخر جدول میشه | |
| <tr> | یه ردیف توی جدول ایجاد میکنه | |
| <th> | یه ستون توی جدول ایجاد میکنه | |
| <td> | یه سلول توی جدول ایجاد میکنه | |
| <caption> | یه عنوان برای جدول میسازه | |
| <colgroup> | یه گروه از ستون ها رو توی جدول میسازه | |
| <col> | این ویژگی های درون ستون colgroup رو ایجاد میکنه |
تگ های رسانه ای:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <audio> | برای ایجاد محتوای صوتی بکار میره | |
| <video> | برای ایجاد محتوای ویدیویی بکار میره | |
| <track> | زیرنویس رو برای صدا و تصویر ایجاد میکنه | |
| <source> | منبع صدا و تصویر و رسانه ها رو ایجاد میکنه |
تگ های متا:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <meta> | تگ متا اطلاعاتی رو درمورد صفحه وبسایت ما به موتور های جستوجو و مرورگر ها میده و برای سئو مهمه | |
| <link> | صفحات و کد فایل های دیگه رو به صفحه مرورگر ما وصل میکنه مثل کد های جاوا اسکریپت و css |
تگ های استایل:
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <style> | با تگ استایل همونطور که از اسمش هم مشخصه میتونیم استایل و ظاهر صفحات رو بسازیم | |
| <script> | با تگ اسکریپت هم کد های جاوا اسکریپت رو به صفحه اضافه میکنیم |
| تگ ها | توضیحات | مثال ها |
|---|---|---|
| <div> | تگ div برای بخش بندی صفحات بکار میره و مهم ترین و پرکاربرد ترین تگ html هست | |
| <span> | با این تگ میتونیم یه تیکه از محتوا رو به صورت درون سطری مشخص کنیم | |
| <header> | تگ هدر بخش سربرگ یا همون بالای سایت رو نشون میده | |
| <main> | تگ main به معنی اصلی هست و محتوای اصلی وبسایت ما رو نمایش میده | |
| <footer> | تگ فوتر بخش پایینی سایت رو تشکیل میده | |
| <article> | این تگ محتوایی خاص رو در صفحه ما نشون میده | |
| <section> | تگ سکشن بخش های سایت رو مشخص میکنه | |
| <details> | این تگ بخشی رو مشخص میکنه که کاربرا میتونن ببیننش | |
| <summary> | این تگ بخش قابل مشاهده در details رو میسازه |
دوره های مرتبط
ساخت سایت با وردپرس , دوره رایگان + پروژه محور – فانی لرن
آموزش طراحی سایت با وردپرس , دوره رایگان + پروژه محور بعد از این دوره شما میتونید: – انواع وبسایت…
دوره طراحی وبسایت با html و css به صورت پروژه محور
با این دوره آموزشی به صورت پروژه محور یک وبسایت کامل رو با زبان های html و css به صورت کامل طراحی کنید و وارد بازار کار بشید..
قوانین ثبت دیدگاه