هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: استخدام عناصر HTML مثل header و footer و aside و section أمثلة
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
تعتبر عناصر HTML مثل
header و footer و aside و section من الأدوات الأساسية في تنظيم وتصميم صفحات الويب. في هذا الدرس، سنتناول أهمية هذه العناصر وكيفية استخدامها بفعالية، بالإضافة إلى أمثلة واقعية من مواقع عالمية.ما هي عناصر HTML header و footer و aside و section؟
header: تُستخدم لتحديد الجزء العلوي من الصفحة أو القسم الذي يحتوي على معلومات مهمة مثل الشعار، قائمة التنقل، والبحث. يعزز استخدامheaderمن تنظيم الصفحة ويساعد في تحسين تجربة المستخدم.footer: يُستخدم لتحديد الجزء السفلي من الصفحة أو القسم الذي يحتوي على معلومات إضافية مثل حقوق النشر، الروابط المفيدة، وتفاصيل الاتصال. يساعدfooterفي تحسين التنظيم ويوفر مساحة للبيانات الهامة.aside: يُستخدم لعرض المحتوى الجانبي الذي ليس جزءًا من المحتوى الأساسي، مثل الشريط الجانبي أو المعلومات الإضافية. يعزز استخدامasideمن التنظيم ويعطي المستخدمين معلومات إضافية ذات صلة.section: يُستخدم لتقسيم المحتوى إلى أقسام منطقية. يُساعد في تنظيم المحتوى وتحديد أجزاء مختلفة من الصفحة، مما يسهل قراءتها وفهمها.
أهمية استخدام عناصر HTML مثل header و footer:
- تحسين تجربة المستخدم: يساعد استخدام
headerوfooterفي توفير تنقل سهل وتنظيم واضح للصفحة، مما يعزز من تجربة المستخدم. - تحسين أداء المتصفح: المتصفحات تعرف هذه العناصر وتتعامل معها بشكل أفضل، مما يعزز من الأداء وتجربة التصفح.
- تحسين SEO: تساعد هذه العناصر في تحسين ترتيب الصفحة في نتائج البحث، حيث أن محركات البحث تعطي أهمية للأقسام المنظمة والمصممة بشكل جيد.
- تسهيل العمل كمطور: يسهل تنظيم الصفحة باستخدام هذه العناصر من كتابة وصيانة الكود، ويعزز التعاون بين المطورين.
أمثلة واقعية على استخدام
header و footer:- مواقع الشركات العالمية: تستخدم شركات مثل Apple وGoogle
headerوfooterلتوفير تجربة مستخدم سلسة وتنظيم المعلومات بشكل فعال.
أهمية استخدام عناصر
aside و section:- تنظيم المحتوى: يُساعد استخدام
asideفي عرض المحتوى الجانبي بشكل منفصل عن المحتوى الرئيسي، بينما يُستخدمsectionلتقسيم الصفحة إلى أجزاء منطقية. - تحسين تجربة القراءة: باستخدام
section، يمكن للمستخدمين التنقل بسهولة بين أجزاء مختلفة من المحتوى، مما يعزز من تجربة القراءة.
أمثلة على استخدام عناصر
aside في مواقع عالمية:- مواقع الأخبار: تستخدم العديد من مواقع الأخبار
asideلعرض الأخبار العاجلة، الإعلانات، والمحتوى الجانبي.
مثال عملي على استخدام عناصر HTML:
<style>
.w-100, .cols-2 {
width: 100%;
float: left;
}
.cols-2 > div {
float: left;
background-color: gray;
}
#free {
background-color: #f00;
}
.text_green {
color: green;
}
</style><h1>عنوان الموقع</h1>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">عن الموقع</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</header>
<section>
<p>نص تجريبي يظهر كيفية استخدام القسم لعرض محتوى محدد.</p>
</section>
<section class="cols-2 text_green">
<div>
<h2>عنوان 1</h2>
</div>
<div>
<h2>عنوان 2</h2>
<p>فقرة إضافية</p>
</div>
</section>
</main>
<p>محتوى جانبي إضافي مثل إعلانات أو روابط مفيدة.</p>
</aside>
<p>حقوق الطبع والنشر © 2024</p>
</footer>
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي استخدام عناصر HTML مثل header و footer و aside و section أمثلة
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية لهذا الدرس HTML and CSS
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعية لبنية هيكل صفحات الويب
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دبلوم تطوير تطبيقات مواقع إنترنت تفاعلية عالية السرعة Mern stack
دبلومة متخصصة في تطوير تطبيقات الإنترنت باستخدام تقنية Mern-stack، تشمل MongoDB، Express.JS، React.JS، وNode.JS. تعلم كيفية بناء أنظمة تعليمية متكاملة ومنصات تدريبية...
دبلوم بناء وتنسيق وبرمجة مواقع إنترنت تفاعلية
دبلوم تطوير واجهة مستخدم HTML وCSS وJavaScript شاهد آراء مهندسين البرمجيات الذين حصلوا على عمل بعد إكمالهم الدورات التدريبية مع مدرب البورد...
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
مقالات ذات صلة
فهم الشبكات: المفاهيم الأساسية والأدوات
دور الشبكات والخوادم وأدوات البرمجة في تطوير مواقع الإنترنت في عصر التكنولوجيا المتقدمة، أصبح بناء مواقع الإنترنت وتطبيقات الويب يعتمد بشكل كبير...
لغة JSON: أساس تبادل البيانات في تطبيقات الويب الحديثة
مقدمة في عالم تطوير الويب الحديث، أصبحت لغة JSON (JavaScript Object Notation) حجر الزاوية في تبادل البيانات بين مختلف الأجزاء من تطبيق...
تصميم مواقع ويب احترافية باستخدام CSS: رحلة إبداعية نحو واجهات جذابة ومتجاوبة
في عالم تصميم الويب الحديث، يعد التنسيق والتصميم جزءاً أساسياً لا غنى عنه لضمان تجربة مستخدم مميزة وجذابة. مع التقدم المستمر في...
