تگ body چیست؟ | آموزش تگ body در HTML

در پست گذشته، به صورت کاملاََ تخصصی به معرفی تگ html و صفات کاربردی آن پرداختیم. در این پست اختصاصی از بلاگ ویتکس به معرفی تگ body و کاربرد آن در یک سند HTML خواهیم پرداخت. پس بار دیگر با آموزش HTML5 از بلاگ ویتکس همراه شوید …
فهرست مطالب
معرفی تگ body
یکی از فرزندان اصلی تگ html، تگ body است. این تگ مانند ظرفی برای نگه داری تمام بخش های دیداری صفحه ی وب از جمله متن ها، لینک ها، تصاویر، لیست ها، جدول ها و … می باشد. بنابراین تعداد بسیار زیادی از اِلمان های زبان HTML را در داخل خود نگه داری می کند.
در این تگ اسکلت بندی، ساختار ظاهری و به صورت کلی آنچه که در یک صفحه وب قابل مشاهده است، در قالب تگ های متنوعی که در آینده به آن خواهیم پرداخت، قرار می گیرد.
ساختار دستوری تگ body به صورت زیر است :
۱ ۲ ۳ ۴ | <body> . . </body> |
مثال ۱ : یک متن ساده
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ | <!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>یک متن ساده</title> </head> <body> سلام! من محمد جاودانی هستم </body> </html> |
مثال ۲ : یک ساختار ساده
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>body tag in HTML</title> </head> <body> <h1>Introduction</h1> <p>I'm Mohammad Javdani from VeeTechs world!</p> </body> </html> |
استایل پیشفرض CSS
در بیشتر مرورگرهای وب این تگ به صورت پیشفرض با استایل CSS زیر اجرا می شود :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ | body { display: block; margin: ۸px; } body:focus { outline: none; } |
مثال ۳ : یک ساختار ساده با رنگ متن سفید ، پس زمینه سبز و استایل ;margin: 0
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>body tag in HTML</title> <style> body { margin: ۰; color: white; background-color: green; } </style> </head> <body> <h1>Introduction</h1> <p>I'm Mohammad Javdani from VeeTechs world!</p> </body> </html> |
مرورگرهای سازگار با تگ body
مرورگرهای دسکتاپ | |||||
---|---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
گوگل کروم | موزیلا فایرفاکس | اینترنت اکسپلورر | مایکروسافت اج | اپرا | سافاری |
نسخه ۱ و بالاتر | نسخه ۱ و بالاتر | همه نسخه ها | نسخه ۱۲ و بالاتر | همه نسخه ها | همه نسخه ها |
مرورگرهای موبایل | ||||
---|---|---|---|---|
![]() | ![]() | ![]() | ![]() | ![]() |
گوگل کروم | موزیلا فایرفاکس | اپرا | سافاری | سامسونگ اینترنت |
نسخه ۱۸ و بالاتر | نسخه ۴ و بالاتر | همه نسخه ها | همه نسخه ها | نسخه ۱.۰ و بالاتر |
امیدواریم از این مقاله نهایت بهره را برده باشید …