html

ساختار تگ ها در HTML – آموزش HTML (جلسه دوم)

ساختار تگ ها (Tag) در HTML به سه قسمت تقسیم بندی می شوند:

  1. علامت کوچکتر (>): در ابتدا قبل از اینکه نام تگ مورد نظر را بنویسم، از علامت > استفاده می کنیم.
  2. نام تگ: نام تگ مورد نظر را بعد از علامت > می نویسیم.
  3. علامت بزرگتر(<): و در انتها بعد از نام تگ، از علامت کوچکتر استفاده می کنیم.

در مثال زیر شیوه صحیح نوشتن تگ نشان داده شده است.

<tagname>

تگ های HTML معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را ایجاد می کنند.
مانند مثال زیر:

<tagname> content </tagname>

 

یک عنصر از سه قسمت تشکیل شده است:

  1. تگ آغازین
  2. محتوای تگ ( که می توانید یک متن ساده، عنصر دیگر و یا خالی باشد.)
  3. تگ پایانی

 

آموزش html

به ساختار تگ پایانی توجه کنید که تنها تفاوت آن نسبت به تگ آغازین، علامت “/” می باشد، که قبل از نام تگ پایانی قرار می گیرد.

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

ساختار اصلی یک صفحه وب:

ساختار کلی زبان HTML از یک تگ اصلی و دو زیر تگ اصلی تشکیل شده است.

تگ اصلی <html>: هر صفحه وب (HTML) با تگ اصلی <html> شروع و به تگ </html> ختم می شود. توسط این تگ به مرورگر اعلام می کنیم که این صفحه وب از نوع HTML می باشد.

زیر تگ اصلی <head>: این تگ شامل اطلاعاتی در مورد صفحه است، اطلاعاتی مانند عنوان صفحه، کد CSS ، توضیحات و … داخل این تگ قرار می گیرد. این قسمت از تگ <head> و تگ بسته <head> و یکسری اطلاعاتی که بین این تگ قرار می گیرد، تشکیل شده است.

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

نکته: آنچه در قسمت head صفحه قرار میگیرد نمایش داده نمی شود اما هر آنچه که در قسمت body قرار می گیرد، توسط مرورگر در صفحه نمایش داده می شود.

تگ های <html>، <head> و <body> ساختار اصلی یک صفحه وب را تشکیل می دهند.

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

<html>
<head>
<title> Page title </title>
</head>
<body>
<p> This is a Paragraph </p>
</body>
</html>

 

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

جهت توضیح بیشتر مورد بالا به این نمونه توجه کنید.

وقتی که تگ ها به صورت والد و فرزندی قرار می گیرند، ابتدا باید تگ های بسته فرزند قرار داده شود و بعد تگ های بسته والد. به عبارت دیگر، ابتدا تگ والد (A) را باز کنید، سپس تگ فرزند (B) را باز نمایید، بعد تگ فرزند (B) را ببندید و در آخر تگ پدر (A) را ببندید.

به عنوان مثال در صورتی که بخواهیم کلمه Paragraph به صورت ضخیم در بیاید بایستی به صورت زیر عمل کنیم.

<p> This is a <b>Paragraph</b> for an example </p>

اما کد زیر نادرست است، زیرا تگ بسته </b> بعد از تگ بسته </p> قرار گرفته است:

<p> This is a <b>Paragraph for an example </p></b>

و این باعث می شود که نه فقط کلمه Paragraph بلکه هر کلمه ای که بعد از آن نوشته شده است، به صورت ضخیم نمایش داده می شود که یک اشکال در این قسمت می باشد.

تا اینجا با نحوه قرار گیری تگ ها در HTML آشنا شده اید، در مطالب بعدی با ادامه آموزش HTML با ما همراه باشید…

Related Articles

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این مطلب را از دست ندهید!

Close
Close