HTML5: هيكلة صفحات الويب باستخدام العناصر الدلالية – الإعلام الآلي — السنة الثانية ثانوي (شعبة علوم تجريبية) — المنهاج الجزائري

HTML5: هيكلة صفحات الويب باستخدام العناصر الدلالية

HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لإنشاء وتصميم صفحات الويب. HTML5 هو أحدث إصدار منها، ويوفر عناصر دلالية (Semantic Elements) تسهل هيكلة المحتوى وتحسن تحسين محركات البحث (SEO) وتجعل الكود أكثر قابلية للقراءة والصيانة.

هيكل صفحة HTML5 الأساسي

<!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>  </body> </html>

العناصر الدلالية في HTML5

<header>: الرأس العلوي للصفحة أو القسم، يحتوي عادةً على الشعار والقائمة الرئيسية.
<nav>: قسم التنقل (قائمة الروابط).
<main>: المحتوى الرئيسي للصفحة (مرة واحدة فقط).
<section>: قسم موضوعي في الصفحة.
<article>: محتوى مستقل يمكن إعادة استخدامه (مقال، تدوينة).
<aside>: محتوى جانبي مرتبط بالمحتوى الرئيسي.
<footer>: تذييل الصفحة، يحتوي على معلومات حقوق النشر والروابط.
<figure> / <figcaption>: صورة مع تعليق.

العناصر الأساسية للوسائط

HTML5 يوفر دعماً مدمجاً للوسائط المتعددة:
<audio>: إدراج ملفات صوتية.
<video>: إدراج ملفات فيديو.
<canvas>: رسم رسومات باستخدام JavaScript.
<svg>: رسومات متجهة قابلة للتوسع.

النماذج (Forms) في HTML5

HTML5 أضاف أنواع إدخال جديدة للتحقق من صحة البيانات:
<input type=”email”> – للبريد الإلكتروني
<input type=”url”> – لعناوين URL
<input type=”date”> – للتاريخ
<input type=”number”> – للأعداد
<input type=”range”> – شريط تمرير
&حتمال;textarea> – منطقة نصية متعددة الأسطر

مثال تطبيقي

صفحة بسيطة عن مدرسة:
<!DOCTYPE html>
<html dir=”rtl” lang=”ar”>
<body>
<header><h1>مدرستي</h1></header>
<nav><a href=”#”>الرئيسية</a> | <a href=”#”>من نحن</a></nav>
<main>
<article><h2>أهلاً بكم في مدرستنا</h2><p>نحن نقدم تعليماً متميزاً…</p></article>
</main>
<footer>جميع الحقوق محفوظة © 2026</footer>
</body>
</html>

تمارين

أنشئ صفحة HTML5 كاملة تستخدم العناصر الدلالية (header, nav, main, article, aside, footer).
أضف فيديو وصوتاً إلى صفحة HTML باستخدام العناصر المناسبة.
أنشئ نموذج تسجيل يحتوي على: الاسم، البريد الإلكتروني، تاريخ الميلاد، الجنس، رسالة.
ما الفرق بين العناصر الدلالية وغير الدلالية في HTML؟ أعط أمثلة.

للمزيد من الدروس العلمية، راجع درس البيئة المائية: الكائنات الحية في الماء، كما يمكنك الاطلاع على التلوث وأنواعه وتأثيره على الصحة والبيئة.

HTML5: هيكلة صفحات الويب باستخدام العناصر الدلالية – الإعلام الآلي — السنة الثانية ثانوي (شعبة علوم تجريبية) — المنهاج الجزائري