تگ body در HTML + ویدیو آموزشی

07 اسفند 1401

فرشاد نمازی زاده

html

390 بازدید

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

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

تگ body در html

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

سوال: شاید با خود بگویید مگر هر صفحه غیر از بدنه چه چیزی دارد؟

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

در زیر برخی از ویژگی های این تگ body را بیان می کنیم:

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

کاربرد تگ body (همراه با مثال)

با استایل دهی به تگ <body> می توانید یک ساختار را به کل صفحه اعمال کنید. مثلا می توانید یک بک گراند به صفحه بدهید، رنگ پس زمینه را عوض کنید، رنگ متن و لینک ها و … را کنترل کنید.

مثال: یک سند ساده

<html>

<head>
<title>عنوان</title>
</head>

<body>
<h1>تیتر</h1>
<p>این یک پاراگراف است</p>
</body>

</html>

مثال: تعیین رنگ پس زمینه برای صفحه

<html>

<head>
<title>عنوان</title>

<style>
body {
background-color: #dfe6e9;
}
</style>
</head>

<body>
<h1>تیتر</h1>
<p>این یک پاراگراف است</p>
</body>

</html>

مثال: تعیین رنگ متن

<html>

<head>
<title>عنوان</title>

<style>
body {
color: #636e72
}
</style>
</head>

<body>
<h1>تیتر</h1>
<p>این یک پاراگراف است</p>
</body>

</html>

مثال: تعیین رنگ لینک

<html>

<head>
<title>عنوان</title>

<style>
a:active {
color: #0984e3
}
</style>
</head>

<body>
<h1>تیتر</h1>
<p>این یک پاراگراف است</p>
</body>

</html>

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

بیشتر مرورگرها عنصر <body> را با مقادیر پیش فرض زیر نمایش می دهند:

body {
display: block;
margin: 8px;
}

body:focus {
outline: none;
}

چه استایلهایی را برای body تعیین کنم؟

استایلهایی که برای هر سند در نظر می گیرید ممکن است با سند دیگر متفاوت باشد. ولی در حالت کلی برخی استایلها را در زیر بیان می کنیم که در اکثر پروژه ها نیاز است مقادیر آن را برای پروژه خود تنظیم کنید:

body {
direction: rtl;
font-size: 14px;
color: #303030;
line-height: 30px;
font-family: 'iransans';
}

direction: در پروژه هایی که برای زبان فارسی طراحی می کنیم این مقدار را برای rtl (رایت تو لفت) یعنی از راست به چپ قرار می دهیم. این مقدار باعث می شود همه عناصر از راست به چپ قرار گیرند.

font-size: اندازه قلم را برای نوشته ها در بدنه را تنظیم می کند.

color: رنگ نوشته را معین می کند.

line-height: ارتفاع خط (فاصله بین دو خط نوشته) را مشخص می کند.

font-family: فونت نوشته را تعیین می کند. البته پیش از تعیین این مورد نیاز است تا فایل های مربوط به فونت دلخواه را به سند اضافه کرده و آن را برای سند تعریف کرده باشیم.

این پست رو حتما ببین : تگ U در html

جمع بندی

تگ body در html شامل بدنه صفحه می شود و هر چیزی در صفحه قابل مشاهده باشد از هدر بالای سایت تا فوتر پایین سایت همگی داخل تگ body قرار دارند. با استایل دهی به این تگ می توانیم ساختار کل صفحه مانند رنگ و تصویر بک گراند، اندازه، رنگ و نوع قلم را کنترل کنیم.

اگر دوست دارید یک بار برای همیشه html و css را به صورت کاربردی یاد بگیرید می توانید به رایگان در دوره html css سایت وبسافت3 شرکت کنید که لینک آن را در ابتدای صفحه برای شما قرار داده ایم.

منبع: https://www.w3schools.com/tags/tag_body.asp