مقالات آموزشی

مرجع برنامه نویسی

مقالات ویژه

آموزش HTML

منوی کاربری

تگ HTML چیست و چگونه از آن استفاده کنیم؟

همانطور که در مباحث گذشته اشاره شد، HTML زبانیست که از طریق یک سری علایم، قسمتهای مختلف یک صفحه وب را علامتگذاری میکند و برای مرورگر مشخص میکند که هر قسمت را چگونه نمایش دهد. این علایم در HTML به طور خاص همان تگ (tag) یا برچسب هستند.

مرورگر متن تگها را در صفحه نمایش نمی دهد بلکه تگها را تفسیر میکند و نتیجه آن را به کاربر نمایش میدهد. برای مثال وقتی می خواهیم یک تصویر در صفحه نمایش دهیم از تگ <img> استفاده می کنیم. وقتی که صفحه وب را در مروگر باز میکنیم، چیزی که می بینیم <img> نیست. بلکه تصویری را می بینیم که مرورگر از پردازش تگ <img> و صفات آن به دست آورده است.

نوشتن تگ ها در HTML قواعد خاص خود را دارد. هر تگ بین دو علامت < و > قرار می گیرد. به این صورت که ابتدا علامت < سپس نام تگ و پس از آن علامت > نوشته می شود. برای نمونه به تگهای نوشته شده در مثال زیر توجه کنید:

<br>
<hr>
<meta>
<img>
<input>

تگهای HTML معمولن به صورت دو قسمتی هستند. یعنی در قسمت اول، تگ باز می شود، سپس محتوای تگ نوشته می شود و بعد از آن تگ بسته می شود. قسمت باز شدن تگ همانطور که در پاراگراف قبل گفته شد نوشته می شود. اما قسمت بسته شدن تگ با یک علامت اسلش  بعد از < متمایز می شود. به مثال زیر توجه نمایید:

<p>محتوای پاراگراف در این قسمت نوشته می شود.</p>

همانطور که می بینید باز شدن تگ پاراگراف در مثال بالا با نوشتن کد <p> انجام شده است. سپس متنی را که مد نظر داشتیم به عنوان محتوای تگ نوشتیم. در آخر هم تگ پاراگراف با نوشتن </p> بسته شد. به نمونه های بیشتر توجه نمایید:

<div>محتوای تگ</div>
<strong>محتوای تگ</strong>
<em>محتوای تگ</em>
<title>محتوای تگ</title>

حالا اگر خواستیم به مرورگر بفهمانیم که تگ مربوطه را به شکل خاصی تفسیر کند، برای مثال میخوایم دو کادر برای ورود اطلاعات در صفحه داشته باشیم اما میخوایم یکی از آنها غیر فعال باشد و کاربر نتواند داخت آن چیزی بنویسد چه باید بکنیم؟ اینجاست که باید برای تگ صفت (attribute) مشخص کنیم. صفت ها در HTML باید در قسمت آغارین تگ مشخص شوند. یعنی در تگ پایانی نمی توانیم صفت مشخص کنیم. برای نوشتن تگی که صفت دارد به این صورت عمل می کنیم که ابتدا علامت < را و سپس نام تگ را می نویسیم. بعد از نام تگ یک فاصله خالی می گذاریم و بعد صفت را می نویسیم.

در مثال زیر تگ <input> را مشاهده می کنید که دو بار نوشته شده است. بار اول به صورت عادی نمایش داده می شود و بار دوم با اضافه کردن صفت disabled به صورت غیر فعال نمایش داده خواهد شد:

<input>
<input disabled>

صفات HTML هم به دو دسته تقسیم می شوند. یک دسته از آنها فقط یک مقدار می گیرند مانند صفت disabled که در مثال بالا از آن استفاده کردیم. برای این صفات در HTML نسخه 4 نوشتن نام صفت کافیست.
اما بعضی از صفات میتوانند مقدار های مختلفی داشته باشند. برای مثال صفت dir که برای راست به چپ و یا چپ به راست کردن المنت ها استفاده می شود می تواند مقدار ltr و rtl داشته باشد. مقدار rtl آن تگ را به صورت راست به چپ و مقدار ltr تگ را به صورت چپ به راست نمایش می دهد. در مثال زیر کد پاراگراف را در دو حالت راست به چپ و چپ به راست مشاهده می کنید:

<p dir="ltr">این یک پاراگراف چپ به راست است.</p>
<p dir="rtl">این یک پاراگراف راست به چپ است.</p>

همانطور که می بینید برای نوشتن صفت هایی که مقدار دارند به این صورت عمل می کنیم که ابتدا نام صفت را می نویسیم که در مثال بالا dir است. بعد علامت مساوی (=) را نوشته و سپس مقدار مورد نظر برای صفت را وارد می کنیم. البته مقدار صفت باید بین دو علامت نقل قول (") نوشته شود. در مثال بالا مقدار ltr و rtl را ملاحظه کنید.

یک نکته دیگر در مورد صفات که باید گفته شود این است که ممکن است یک تگ چندین صفت داشته باشد. در این حالت هم نحوه نوشتن آنها تغییر چندانی نمی کند و همانند مثال های قبل نوشته می شوند. فقط باید در نظر داشته باشید که صفتهای مختلف با یک فاصله خالی از یکدیگر جدا شده باشند. برای روشن شدن مطلب به مثال زیر توجه فرمایید:

<p dir="rtl" class="p1"> محتوای تگ</p>

تشریح قسمتهای مختلف تگ HTML

نکته آخر که لازم می بینم به آن اشاره کنم تگهای تکی و جفتی است. همانطور که در ابتدای این مبحث ذکر شد بعضی از تگها نیاز به تگ پایانی دارند و بعضی ندارد. حالا اگر کجا بدانیم کدام تگ نیاز به تگ پایانی دارد یا نه؟ ساده است! در HTML فقط تگهای زیر به صورت تکی هستند و نباید تگ پایانی داشته باشند:

<area>
<base>
<br>
<col>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

به جز موارد بالا سایر تگهای HTML باید حتمن تگ پایانی داشته باشند. البته استثنا هم وجود دارد که تگ پایانی اختیاری است، مانند <p> اما توصیه می شود برای آن هم از تگ پایانی استفاده کنید و به صورت <p>محتوای تگ</p> بنویسید.

امیدوارم این مطلب برای شما مفید باشد. اگر نظری دارید  ما را با نوشتن نظرات خود خوشحال کنید.

نمایش ۱ تا ۱۳ مورد از کل ۱۳ مورد.

محتوای فوق العاده جذابی در مورد آموزش طراحی سایت  دارید

مرسی از از زحماتتون

چطوری میشه کاری کردکه صفحات وب ساخته شده را دیگران مشاهده کنند؟؟؟؟

سلام خیلی خوب بود مطالب

مرسی

سلام

وقتی داخل " قرار داده نمی شه کار می کنه

چرا؟

ممنون

سلام . میشه لطفا راهنمایی بفرمائید که کد ها رو چهطوری در قالب قرار بدیم . مثلا کد آمارگیری آنلاین و همچنین انواع لوگوها

واقعا ازتون ممنونم من یه سوالی داشتم .من در سایت خودم این کدهای html رو کجا بنویسم؟مثلا در بخش ویرایش نوشته باید بنویسم؟چندجا امتحان کردم مطالبم پاک می شد .

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

از شما به خاطر آموزش های مفید تون واقعا ممنونم. من خیلی دنبال آموزش html بودم ولی تنها مطالبی که

برای من مفید بود فقط تو سایت شما پیدا شد.

موفق باشید.

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

از شما به خاطر آموزش های مفید تون واقعا ممنونم. من خیلی دنبال آموزش html بودم ولی تنها مطالبی که

برای من مفید بود فقط تو سایت شما پیدا شد.

موفق باشید.

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

سلام من میخواستم بدونم چجوری میشه از ضخیم شدن تغیر سایز  تگ ها در متن نوشه جلوگیری کرد چ کدی باید تغیر کنه ک متن نوشتمونو بهم نریزه بیشتر منطورم استافاده از تگ h3داخل متن نوشته است ممنون میشم کمک کنید

سلام و عرض ادب بابت سایت مفید خودتون هم بسیار تشکر و سپاس گرانقدر می نمایم با تشکر

سلام و عرض ادب بابت سایت مفید خودتون هم بسیار تشکر و سپاس گرانقدر می نمایم با تشکر

خیلی ممنون از تمامی آموزش های شما واقعا  نهایت استفاده را کردم