در مطلب قبل درباره تگ head در html صحبت کردیم. در این مطلب از آمورش html و css می خواهیم درباره تگ body در html صحبت کنیم. تگ <body> تعیین کننده محتوای اصلی سند شماست که در مرورگر نمایش داده می شود. این تگ نیز جز جدایی ناپذیر و اصلی تمام کدهای html و صفحات وب است. بنابراین لازم است تا به طور جامع و کاربردی با تگ body در html آشنا شوید تا بتوانید به راحتی در کدهای سایت خود بکار ببرید.
تگ body در html یکی از مهمترین تگ های HTML می باشد که می توان گفت ستون اصلی یک سند HTML یا صفحه وب می باشد. تگ <body> بدنه سند را تعریف می کند که به تگ بدنه سایت نیز معروف است و شامل تمام محتویات یک سند HTML مانند متن، لینک ها، تصاویر، جداول، لیست ها و… می باشد.
بطور کلی اطلاعاتی مانند متن و عکس که قرار است در سند html ما به کاربران توسط مرورگرهای وب نمایش داده شود در این بخش نوشته خواهد شد. به عبارت دیگر چارچوب دیداری سایت شما شامل تگ های زیادی است. همه این تگ های بصری داخل تگ body در html قرار دارند. شما می توانید سایز قلم،رنگ قلم و سایر مواردی که در صفحات وب دیده می شود را در این تگ تعیین کنید.
تگ body بعد از تگ head در html و قبل از تگ بسته HTML قرار می گیرد و سایر عناصر بصری را بین دو تگ باز و بسته <body></body> قرار می دهد. همانطور که گفته شد هر تگ بصری مثل تگ heading یا تگ p یا تگ img، با حضور در بین تگ باز و بسته عنصر body در مرورگر ها به نمایش در خواهند آمد. فراموش نکنید که در هر فایل html، می بایست تنها یک بار از این تگ استفاده شود. نحوه کدنویسی این تگ به صورت زیر می باشد:
<body>
Place your Content here
</body>
<!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<h2>Example of body tag</h2>
<p>This paragraph is written between the body tag</p>
</body>
</html>
در جدول زیر می توانید صفات به همراه مقادیری را که می توان در تگ <body> استفاده کرد را مشاهده نمایید.
( علامت یعنی در HTML5 منسوخ شده )
نام ویژگیمقدارتوضیحات Alinkرنگ رنگ لینک فعال در سند را تعیین می کند. (در HTML5 پشتیبانی نمی شود)Background URL تصویر پس زمینه سند را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Bgcolorرنگ رنگ پس زمینه محتوا را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Linkرنگ رنگ لینک بازدید نشده را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Text رنگ رنگ متن موجود در سند را تعیین می کند. (در HTML5 پشتیبانی نمی شود) Vlink رنگ رنگ لینک بازدید شده را تعیین می کند. (در HTML5 پشتیبانی نمی شود) تابع را هنگام بارگیری صفحه فراخوانی می کند. هنگامی که کاربر صفحه را ترک می کند، تابع را فراخوانی می کند. هنگامی که سند توسط کاربر فوکوس را دریافت می کند، تابع را فراخوانی می کند. هنگامی که سند فوکوس کاربر را از دست می دهد، تابع را فراخوانی می کند.
برای استفاده از صفت background در تگ body در html می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت background می توانید برای تگ body یک تصویر را به عنوان بک گراند انتخاب کنید.
<body background=”image.gif”></body>
برای استفاده از صفت bgcolor در تگ body می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت bgcolor می توانید برای تگ body یک رنگ خاص را به عنوان بک گراند انتخاب کنید.
<body bgcolor=”color”></body>
کافی است در کد بالا فقط بجای color رنگ دلخواه یا کد رنگ هگزا دسیمال مربوطه را قرار دهید.
برای استفاده از صفت text در تگ body در html می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت text می توانید برای متون موجود در تگ body یک رنگ خاص را انتخاب کنید.
<body text=”color”></body>
کافی است در کد بالا فقط بجای color رنگ دلخواه یا کد رنگ هگزا دسیمال مربوطه را قرار دهید.
<body text=”blue”></body>
<body text=”#۰۰۰۰CC”></body>
برای استفاده از صفت link در تگ body در html می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت link می توانید برای لینک های موجود در تگ body قبل از کلیک خوردن یک رنگ خاص را انتخاب کنید.
<body link=”color”></body>
کافی است در کد بالا فقط بجای color رنگ دلخواه یا کد رنگ هگزا دسیمال مربوطه را قرار دهید.
<body link=”red”></body>
برای استفاده از صفت alink در تگ body می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت alink می توانید برای لینک های موجود در تگ body بعد از کلیک خوردن یک رنگ خاص را انتخاب کنید.
<body alink=”color”></body>
دقیقا مثل صفت link
برای استفاده از صفت vlink در تگ بادی می بایست از ساختار موجود در کادر زیر استفاده کنید. شما به کمک صفت vlink می توانید برای مشخص کردن لینک های موجود در تگ body که از قبل کلیک خورده اند یک رنگ خاص را انتخاب کنید.
<body vlink=”color”></body>
دقیقا مثل دو صفت قبلی
در HTML5 تمام ویژگی های طرح (layout attributes) حذف شده است. یعنی کلیه خصیصه های تگ body در HTML5 کار نمی کنند و باید به جای آن از CSS استفاده کرد.
تگ body در html، از همه صفات عمومی یا Global Attributes و نیز همه رویداد ها یا Event Attributes حمایت و پشتیبانی می کند.
body {
display: block;
margin: ۸px;
}
body:focus {
outline: none;
}
در این مطلب به طور جامع و کاربردی از تگ body در html، ساختارش، نحوه کدنویسی آن و معرفی تمامی صفت های تگ بادی صحبت کرده ایم. با مطالعه این مطلب تسلط کافی به مبحث تگ <body> پیدا خواهید کرد.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
