كيف تنشئ صفحة ويب متعددة الأقسام وتُحسّنها

الجزء الأول: بناء الهيكل الأساسي باستخدام HTML

1. الهيكل العام للصفحة

htmlCopy

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي المتعدد الأقسام</title>
    <meta name="description" content="موقع متخصص في تصميم صفحات ويب متعددة الأقسام مع تحسين SEO">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- رأس الصفحة -->
    <header>
        <h1>مرحبًا بكم في موقعي</h1>
    </header>
    <!-- قائمة التنقل -->
    <nav id="navbar">
        <ul>
            <li><a href="#home">الرئيسية</a></li>
            <li><a href="#services">الخدمات</a></li>
            <li><a href="#contact">اتصل بنا</a></li>
        </ul>
    </nav>
    <!-- الأقسام الرئيسية -->
    <section id="home">
        <h2>الرئيسية</h2>
        <p>مرحبًا بكم في موقعنا المتخصص بتصميم صفحات الويب.</p>
    </section>
    <section id="services">
        <h2>الخدمات</h2>
        <p>نقدم خدمات تصميم وتطوير المواقع.</p>
    </section>
    <section id="contact">
        <h2>اتصل بنا</h2>
        <p>للتواصل: example@email.com</p>
    </section>
    <!-- تذييل الصفحة -->
    <footer>
        <p>جميع الحقوق محفوظة © 2024</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Run HTML

الجزء الثاني: تنسيق الصفحة باستخدام CSS

2.1 التنسيق الأساسي

cssCopy

/* تنسيق عام */
body {
    font-family: 'Tajawal', sans-serif;
    margin: 0;
    line-height: 1.6;
    direction: rtl;
}
/* تنسيق الرأس */
header {
    background: #2c3e50;
    color: white;
    padding: 2rem;
    text-align: center;
}
/* قائمة التنقل */
nav {
    background: #34495e;
    padding: 1rem;
    position: sticky;
    top: 0;
}
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}
nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
nav a:hover {
    color: #3498db;
}
/* الأقسام */
section {
    padding: 4rem 2rem;
    margin: 2rem auto;
    max-width: 1200px;
}
/* التذييل */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem;
}
/* التجاوب مع الجوال */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        text-align: center;
    }
}

الجزء الثالث: إضافة التفاعلية باستخدام JavaScript

3.1 تفعيل التمرير السلس (Smooth Scroll)

javascriptCopy

document.querySelectorAll('nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetSection = document.querySelector(targetId);
        targetSection.scrollIntoView({ behavior: 'smooth' });
    });
});

3.2 إضافة تأثيرات عند التمرير

javascriptCopy

window.addEventListener('scroll', () => {
    const sections = document.querySelectorAll('section');
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        if (window.scrollY > sectionTop - 150) {
            section.style.opacity = '1';
            section.style.transform = 'translateY(0)';
        }
    });
});

الجزء الرابع: تحسين SEO لاحتلال الصفحات الأولى

4.1 نصائح أساسية لـ SEO

الكلمات المفتاحية:
- استخدم كلمات مثل: “تصميم صفحات ويب متعددة الأقسام”، “تحسين SEO للمواقع”.
- الكثافة المثالية: 1-2% (تجنب التكرار المفرط).

البيانات المنظمة (Schema Markup):

htmlCopy

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "موقعي المتعدد الأقسام",
  "url": "https://www.yoursite.com",
  "description": "موقع متخصص في تصميم صفحات الويب مع تحسين SEO"
}
</script>

Run HTML

تحسين الصور:

htmlCopy

<img src="web-design.jpg" alt="تصميم صفحات ويب متجاوبة" loading="lazy">

Run HTML

4.2 أدوات لتحليل الأداء

Google PageSpeed Insights: لقياس سرعة الصفحة.
SEMrush: لتحليل الكلمات المفتاحية.
Screaming Frog: لفحص الأخطاء الفنية.

الجزء الخامس: تجنب الأخطاء الشائعة

أخطاء HTML:
- عدم استخدام العلامات الدلالية (مثل <section> بدل <div>).
- إهمال إضافة alt للصور.
أخطاء CSS:
- استخدام !important بشكل مفرط.
- عدم جعل الصفحة متجاوبة مع الجوّال.
أخطاء JavaScript:
- إضافة سكريبتات ثقيلة تبطئ التحميل.