شرح وسم HTML body Tag
Contents
وسم HTML body Tag
وسم <body> في لغة HTML هو عنصر يُستخدم لتحديد المحتوى الرئيسي لصفحة الويب. يحتوي هذا العنصر على العديد من السمات (Attributes) التي يمكن استخدامها لتخصيص مظهر وسلوك صفحة الويب.
كيف نستخدم وسم body ؟
في HTML، يتم استخدام العنصر <body> لتحديد المحتوى الرئيسي لصفحة الويب. يتم وضع جميع العناصر مثل النصوص والصور والروابط داخل هذا العنصر. إليك بعض الأمثلة على كيفية استخدام عنصر <body> في HTML:
مثال
< dir=rtl!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال 1</title> </head> <body> <h1>مرحبًا بك في صفحتي</h1> <p>هذا هو النص الأساسي في صفحتي الويب.</p> <img src="example-image.jpg" alt="صورة مثال"> <p>يمكننا إضافة المزيد من النصوص والصور والروابط هنا.</p> <a href="#">زيارة الرابط</a> </body> </html>
استخدام القوائم والفقرات
<!DOCTYPE html> <html lang="charset" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال 2</title> </head> <body> <h2>قائمة الفواكه</h2> <ul> <li>تفاح</li> <li>موز</li> <li>فراولة</li> </ul> <h2>الفقرات</h2> <p>هنا نكتب نصًا للفقرة الأولى.</p> <p>ثم نكتب نصًا للفقرة الثانية.</p> </body> </html>
تنسيق باستخدام CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال 3</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #333333;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
padding: 1em;
text-align: center;
color: white;
}
section {
padding: 20px;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>عنوان الصفحة</h1>
</header>
<section>
<h2>محتوى الصفحة</h2>
<p>هذا مثال على استخدام العنصر `<body>` مع تنسيق باستخدام CSS.</p>
<p>يمكن تخصيص الألوان والخطوط والتخطيط حسب الحاجة.</p>
</section>
<footer>
<p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
هذه أمثلة بسيطة تظهر كيف يمكن استخدام <body> في HTML لتنظيم وعرض محتوى الصفحة بشكل متناسق. تستطيع تخصيص المزيد باستخدام العديد من العناصر والسمات الأخرى في HTML و CSS.
سمات وخصائص وسم Body :
لون الخلفية:bgcolor
يُستخدم لتحديد لون خلفية صفحة الويب.
مثال:
<body bgcolor="#ffffff">
لون النص: text
يُستخدم لتحديد لون النص داخل جسم الصفحة.
مثال:
<body text="#000000">
لون الروابط :link
يُستخدم لتحديد لون الروابط داخل الصفحة.
مثال:
<body link="#0000ff">
لون الرابط الفوري :alink
يُستخدم لتحديد لون الروابط عند النقر عليها.
مثال:
<body alink="#ff0000">
لون الرابط بعد الزيارة :vlink
يُستخدم لتحديد لون الروابط بعد أن يتم زيارتها.
مثال:
<body vlink="#800080">
خلفية الصفحة :background
يُستخدم لتحديد صورة أو لون لخلفية صفحة الويب.
مثال:
<body background="background.jpg">
عند التحميل :onload
يُستخدم لتحديد تحديثات أو إجراءات تنفيذها عند تحميل الصفحة.
مثال:
<body onload="myFunction()">
عند الغاء التحميل :onunload
يُستخدم لتحديد تحديثات أو إجراءات تنفيذها عند إلغاء تحميل الصفحة.
مثال:
<body onunload="myFunction()">
تلك هي بعض السمات الشائعة التي يمكنك استخدامها مع <body> في HTML لتخصيص صفحتك الويب وتحسين تجربة المستخدم.
مثال كامل بالكود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة مثال</title>
</head>
<body bgcolor="#f0f0f0" text="#333333" link="#0066cc" alink="#ff0000" vlink="#660066" background="background.jpg" onload="loadFunction()" onunload="unloadFunction()">
<header>
<h1>مرحبًا بك في صفحة المثال</h1>
</header>
<nav>
<ul>
<li><a href="#">الصفحة الرئيسية</a></li>
<li><a href="#">خدماتنا</a></li>
<li><a href="#">تواصل معنا</a></li>
</ul>
</nav>
<section>
<h2>محتوى الصفحة</h2>
<p>هذا مثال على صفحة ويب باستخدام عدة سمات في عنصر body.</p>
<p>يمكنك تخصيص المظهر والسلوك باستخدام هذه السمات وغيرها.</p>
</section>
<footer>
<p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p>
</footer>
<script>
function loadFunction() {
alert("تم تحميل الصفحة!");
}
function unloadFunction() {
console.log("تم إلغاء تحميل الصفحة!");
}
</script>
</body>
</html>
في هذا المثال:
تم استخدام سمات <body> لتحديد لون الخلفية (bgcolor)،لون النص (text)، لون الروابط (link)، لون الرابط الفوري (alink)، لون الرابط بعد الزيارة (vlink)، وصورة الخلفية (background)، بالإضافة إلى تحديد دوال JavaScript (onload و onunload) لتنفيذ إجراءات معينة عند تحميل وإلغاء تحميل الصفحة. يمكنك تخصيص هذا الكود حسب احتياجات صفحتك الخاصة.
مثال آخر يستخدم العديد من سمات <body> في HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال آخر</title>
<style>
body {
background-color: #f2f2f2;
color: #333333;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
padding: 1em;
text-align: center;
color: white;
}
nav {
background-color: #333;
padding: 1em;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
margin: 5px;
}
section {
padding: 20px;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>عنوان الصفحة</h1>
</header>
<nav>
<a href="#">الصفحة الرئيسية</a>
<a href="#">خدماتنا</a>
<a href="#">تواصل معنا</a>
</nav>
<section>
<h2>محتوى الصفحة</h2>
<p>هذا مثال على صفحة ويب باستخدام سمات `<body>` لتخصيص المظهر.</p>
<p>يمكنك تغيير الألوان والخطوط والتخطيط حسب احتياجاتك.</p>
</section>
<footer>
<p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
في هذا المثال، تم استخدام CSS لتحديد مظهر الصفحة بشكل أكثر تفصيلاً، مع تعيين ألوان مختلفة وتنسيق لعناصر الصفحة. يمكنك تغيير القيم في CSS وفي سمات <body> حسب احتياجاتك لتخصيص مظهر صفحتك بشكل فريد.
أهمية وسم الــ Body
عنصر <body> في HTML هو أحد العناصر الرئيسية والحيوية في بنية صفحة الويب. يقوم بتحديد المحتوى الرئيسي الذي يتم عرضه على صفحة الويب، ويوفر واجهة لعرض النصوص والصور والروابط وغيرها من العناصر التفاعلية. إليك بعض الاستخدامات وأهمية عنصر <body> في HTML مع أمثلة:
تنظيم المحتوى:
<!DOCTYPE html> < dir =rtl html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>تنظيم المحتوى</title> </head> <body> <header> <h1>عنوان الصفحة</h1> </header> <section> <h2>محتوى الصفحة</h2> <p>هنا يمكن وضع أي نص أو محتوى يريد عرضه على الصفحة.</p> <img src="example-image.jpg" alt="صورة مثال"> </section> <footer> <p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p> </footer> </body> </html>
تخصيص الألوان والخطوط
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تخصيص الألوان والخطوط</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #333333;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
padding: 1em;
text-align: center;
color: white;
}
section {
padding: 20px;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>عنوان الصفحة</h1>
</header>
<section>
<h2>محتوى الصفحة</h2>
<p>يمكن تخصيص الألوان والخطوط باستخدام CSS داخل عنصر `<body>`.</p>
</section>
<footer>
<p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
إضافة روابط وتكامل مع الأكواد الأخرى:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>إضافة روابط وتكامل الأكواد</title> </head> <body> <header> <h1>عنوان الصفحة</h1> </header> <section> <h2>روابط وتكامل الأكواد</h2> <p>يمكن إضافة روابط وتكامل الأكواد الأخرى داخل عنصر `<body>`.</p> <a href="https://www.example.com">زيارة الموقع</a> </section> <footer> <p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p> </footer> </body> </html>
إضافة نصوص تفاعلية وتكامل مع JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نصوص تفاعلية وتكامل مع JavaScript</title>
</head>
<body>
<header>
<h1>عنوان الصفحة</h1>
</header>
<section>
<h2>نصوص تفاعلية</h2>
<p>يمكن تضمين أكواد JavaScript داخل `<body>` لتحسين تفاعل المستخدم.</p>
<button onclick="alert('مرحبًا!')">أظغط هنا</button>
</section>
<footer>
<p>© 2023 صفحة المثال. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
تظهر هذه الأمثلة كيف يمكن استخدام عنصر <body> لتنظيم وتخصيص محتوى صفحة الويب وتكاملها مع الأكواد الأخرى مثل CSS و JavaScript. الاستفادة من <body> تأتي من قدرتها على جعل صفحتك تتفاعل بشكل فعّال مع المستخدمين وتقديم تجربة مستخدم فعّالة.
تطبيق بالكود على هذا الدرس
سنقوم بإعداد تطبيق بسيط يستخدم <body> في HTML مع بعض السمات والتنسيق. سنقوم بإنشاء صفحة ويب تحتوي على عنوان، قائمة روابط، وقسم لعرض النصوص. سنستخدم الألوان والخطوط لتنسيق المظهر.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق بسيط باستخدام Body</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333333;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
padding: 1em;
text-align: center;
color: white;
}
nav {
background-color: #333;
padding: 1em;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
padding: 10px;
margin: 5px;
}
section {
padding: 20px;
}
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<header>
<h1>تطبيق الصفحة الرئيسية</h1>
</header>
<nav>
<a href="#">الصفحة الرئيسية</a>
<a href="#">معلومات</a>
<a href="#">اتصل بنا</a>
</nav>
<section>
<h2>مرحبًا بك في تطبيقنا البسيط</h2>
<p>هذا تطبيق تجريبي يستخدم `<body>` في HTML لتنظيم المحتوى وتحديد المظهر.</p>
<p>يمكنك تغيير الألوان والخطوط حسب احتياجاتك.</p>
</section>
<footer>
<p>© 2023 تطبيق الصفحة الرئيسية. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
قم بنسخ الكود أعلاه ولصقه في ملف HTML، ثم قم بفتح الملف في متصفح الويب لرؤية تأثير الكود. تجربة تعديل الألوان والنصوص في الكود لتفاعل مع تأثيرات <body> والتنسيقات المرتبطة بها.
النتيجة:
اختبار على هذا الدرس
1-ما هي وظيفة عنصر <body> في HTML؟
2-اذكر بعض السمات (attributes) التي يمكن استخدامها مع عنصر <body> وأعطِ مثالاً على كل سمة.
3-كيف يمكن استخدام العنصر <body> لتحديد لون خلفية الصفحة؟
4-ما هي الطريقة التي يمكن بها تخصيص النصوص داخل <body> باستخدام CSS؟
5-كيف يمكن تضمين أكواد JavaScript داخل عنصر <body>؟
اختبار اختيار من متعدد
إليك اختبار بسيط من اختيارات متعددة لفحص فهمك لموضوع عنصر <body> في HTML. الرجاء اختيار الإجابة الصحيحة لكل سؤال:
1-ما هي وظيفة عنصر <body> في HTML؟
a. تحديد اللغة الرئيسية للصفحة
b. تحديد الخصائص الرئيسية للمستند
c. تحديد المحتوى الرئيسي لصفحة الويب
d. تحديد الأسلوب والتصميم للصفحة
2-أي سمة يمكن استخدامها لتحديد لون الخلفية لصفحة الويب باستخدام <body>؟
- background-color
- text-color
- page-background
- body-background
3-كيف يمكن تحديد لون النص داخل <body> في HTML؟
- text-color
- font-color
- color
- body-color
4-ما السمة التي يمكن استخدامها لتحديد تنسيق النصوص داخل <body> باستخدام CSS؟
- font-style
- text-format
- font
- font-family
5-كيف يمكن تحديد تفاعل معين عندما يتم تحميل صفحة الويب؟
- onload
- onready
- onstart
- onpage
إليك الإجابات على الأسئلة:
1-ما هي وظيفة عنصر <body> في HTML؟
الإجابة الصحيحة: c. تحديد المحتوى الرئيسي لصفحة الويب
2-أي سمة يمكن استخدامها لتحديد لون الخلفية لصفحة الويب باستخدام <body>؟
الإجابة الصحيحة: a. background-color
3-كيف يمكن تحديد لون النص داخل <body> في HTML؟
الإجابة الصحيحة: c. color
4-ما السمة التي يمكن استخدامها لتحديد تنسيق النصوص داخل <body> باستخدام CSS؟
الإجابة الصحيحة: c. font
5-كيف يمكن تحديد تفاعل معين عندما يتم تحميل صفحة الويب؟
الإجابة الصحيحة: a. onload