16 المخرجات النهائية: بناء صفحة ويب متكاملة
المخرجات النهائية: بناء صفحة ويب متكاملة
في هذا الجزء، سنقوم بتطبيق كل ما تعلمناه في الفصول السابقة لبناء صفحة ويب متكاملة. سيكون هذا بمثابة تمرين نهائي يساعدك في فهم كيفية دمج الوسوم المختلفة والعمل مع العناصر المتعددة في صفحة واحدة. في النهاية، سنستعد للانتقال إلى CSS لتحسين تصميم الصفحة.
التمرين النهائي: بناء صفحة ويب متكاملة
1. هيكل الصفحة الأساسية
لنبدأ بكتابة الهيكل الأساسي للصفحة باستخدام HTML. سنستخدم الوسوم التي تعلمناها مثل <header> و <nav> و <article> و <footer> لتنظيم المحتوى.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة ويب متكاملة</title>
</head>
<body>
<!-- رأس الصفحة -->
<header>
<h1>مرحبا بك في موقعي</h1>
<p>هذه صفحة ويب متكاملة تم إنشاؤها باستخدام HTML.</p>
</header>
<!-- قائمة التنقل -->
<nav>
<ul>
<li><a href="#home">الصفحة الرئيسية</a></li>
<li><a href="#about">من نحن</a></li>
<li><a href="#services">الخدمات</a></li>
<li><a href="#contact">اتصل بنا</a></li>
</ul>
</nav>
<!-- محتوى الصفحة -->
<article id="home">
<h2>الصفحة الرئيسية</h2>
<p>مرحباً بك في أول صفحة على موقعنا. نحن نقدم لك أفضل الخدمات.</p>
</article>
<article id="about">
<h2>من نحن</h2>
<p>نحن فريق من المطورين الذين يعملون على تقديم أفضل الحلول التقنية للمشروعات.</p>
</article>
<article id="services">
<h2>الخدمات</h2>
<ul>
<li>تصميم المواقع</li>
<li>التسويق الرقمي</li>
<li>تطوير التطبيقات</li>
</ul>
</article>
<article id="contact">
<h2>اتصل بنا</h2>
<p>يمكنك التواصل معنا عبر البريد الإلكتروني: contact@example.com</p>
</article>
<!-- تذييل الصفحة -->
<footer>
<p>© 2024 جميع الحقوق محفوظة</p>
</footer>
</body>
</html>
في هذا المثال:
- استخدمنا
<header>لإنشاء رأس الصفحة مع عنوان ونص ترحيبي. - تم استخدام
<nav>لإنشاء قائمة تنقل تحتوي على روابط داخلية. <article>يحتوي على محتوى الصفحات المختلفة مثل الصفحة الرئيسية، من نحن، الخدمات، واتصل بنا.- في النهاية، استخدمنا
<footer>لإنشاء تذييل الصفحة مع حقوق الملكية.
2. التفاعل مع العناصر في الصفحة
الآن سنضيف بعض التفاعلات باستخدام HTML و JavaScript. يمكننا إضافة وظيفة لتغيير النص عند النقر على زر، أو لتحسين التنقل داخل الصفحة.
مثال: تغيير النص عند النقر على زر
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>التفاعل مع العناصر</title>
</head>
<body>
<h2>تفاعل مع الصفحة</h2>
<p id="message">اضغط على الزر لتغيير النص.</p>
<button onclick="changeText()">انقر هنا لتغيير النص</button>
<script>
function changeText() {
document.getElementById("message").innerText = "لقد تم تغيير النص!";
}
</script>
</body>
</html>
في هذا المثال:
- لدينا زر يقوم بتغيير النص في العنصر
<p>عند النقر عليه. - استخدمنا JavaScript لتعريف الدالة
changeText()التي تغير النص داخل العنصر الذي لهid="message".
3. التحضير للانتقال إلى CSS
الآن بعد أن أنشأنا صفحة ويب متكاملة، يمكننا تحسين مظهر الصفحة باستخدام CSS. في الفصول القادمة، سنتعرف على كيفية إضافة CSS إلى الصفحة لتنسيق النصوص، الألوان، والعناصر الأخرى، ولكن دعونا نضع أسسًا لتحضير الانتقال.
إضافة رابط لملف CSS خارجي:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة ويب متكاملة</title>
<link rel="stylesheet" href="styles.css">
</head>
- قمنا بإضافة رابط إلى ملف CSS خارجي باستخدام
<link>في رأس الصفحة. سنكتب الآن CSS في ملف خارجي يسمىstyles.css.
ملخص المخرجات النهائية:
- بناء صفحة ويب متكاملة:
- استخدمنا الوسوم المختلفة مثل
<header>,<nav>,<article>, و<footer>لتنظيم المحتوى. - أنشأنا محتوى ثابت وديناميكي داخل الصفحة.
- استخدمنا الوسوم المختلفة مثل
- التفاعل مع العناصر:
- أضفنا تفاعل باستخدام JavaScript لتغيير النصوص عند النقر على الأزرار.
- التحضير للانتقال إلى CSS:
- أضفنا رابطًا إلى ملف CSS لتحسين تصميم الصفحة في الفصول القادمة.
الآن، بعد أن أنشأت صفحة ويب متكاملة، يمكنك الانتقال إلى تعلم CSS لتحسين تصميم الصفحة وإضافة المزيد من التفاعلات.
