recent
أخبار ساخنة

انشاء موقع متعدد الصفحات وربطهم مع بعض عبر HTML

محمد تركي العلوش
الصفحة الرئيسية
الحجم
محتويات المقال
انشاء موقع متعدد الصفحات وربطهم ببعض عبر html

 انشاء موقع متعدد الصفحات

 لإنشاء موقع ويب متعدد الصفحات باستخدام HTML، يمكنك اتباع الخطوات التالية. سأقدم لك هيكلًا بسيطًا لموقع يتكون من ثلاث صفحات: الصفحة الرئيسية، صفحة حول، وصفحة اتصل بنا.

 1. إنشاء هيكل المجلدات

 قم بإنشاء مجلد للموقع الخاص بك، ولتكن مثلاً my_website، ثم قم بإنشاء ثلاث ملفات HTML بداخله:

  • index.html (الصفحة الرئيسية)
  • about.html (صفحة حول)
  • contact.html (صفحة اتصل بنا)

2. كتابة كود HTML لكل صفحة

2.1. index.html (الصفحة الرئيسية) 

<!DOCTYPE html>
<html lang="ar">
<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>
<body>
    <header>
        <h1>مرحبا بكم في موقعي</h1>
        <nav>
            <ul>
                <li><a href="index.html">الرئيسية</a></li>
                <li><a href="about.html">حول</a></li>
                <li><a href="contact.html">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>هذه هي الصفحة الرئيسية</h2>
        <p>محتوى الصفحة الرئيسية هنا.</p>
    </main>
    <footer>
        <p>حقوق النشر &copy; 2025</p>
    </footer>
</body>
</html>

2.2. about.html (صفحة حول) 

<!DOCTYPE html>
<html lang="ar">
<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>
<body>
    <header>
        <h1>حول الموقع</h1>
        <nav>
            <ul>
                <li><a href="index.html">الرئيسية</a></li>
                <li><a href="about.html">حول</a></li>
                <li><a href="contact.html">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>معلومات حول الموقع</h2>
        <p>هنا يمكنك إضافة معلومات حول الموقع.</p>
    </main>
    <footer>
        <p>حقوق النشر &copy; 2025</p>
    </footer>
</body>
</html>

 2.3. contact.html (صفحة اتصل بنا)

<!DOCTYPE html>
<html lang="ar">
<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>
<body>
    <header>
        <h1>اتصل بنا</h1>
        <nav>
            <ul>
                <li><a href="index.html">الرئيسية</a></li>
                <li><a href="about.html">حول</a></li>
                <li><a href="contact.html">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>طرق التواصل</h2>
        <p>يمكنك التواصل معنا عبر البريد الإلكتروني أو الهاتف.</p>
    </main>
    <footer>
        <p>حقوق النشر &copy; 2025</p>
    </footer>
</body>
</html>

 3. إضافة ملف CSS (اختياري)

 يمكنك إنشاء ملف CSS لتنسيق الموقع، ولتكن تسميته styles.css. هنا مثال بسيط:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: white;
}

html 4. تشغيل الموقع

يمكنك فتح أي من الملفات HTML في متصفح الويب الخاص بك لرؤية الموقع.

google-playkhamsatmostaqltradent