ربط صفحات html في ملف واحد

Mohammed Mahmoud17 · منذ 12 ساعة

انا لسه بتعلم لغه html وبعد ما عملت اربع صفحات اريد ان اربطهم ببعض ولا يظهر محتوي الثلاث صفحات الا عندما اضغط عليهم داخل الصفحه الرئيسيه وكذلك الاخرين

Mustafa Mahmoud7 · منذ 12 ساعة

نفترض أن الهيكلية للملفات داخل مجلد المشروع كالأتي

project-folder/
├── index.html        <-- الصفحة الرئيسية
├── page1.html        <-- الصفحة الفرعية 1
├── page2.html        <-- الصفحة الفرعية 2
├── page3.html        <-- الصفحة الفرعية 3
├── page4.html        <-- الصفحة الفرعية 4

index.html: الصفحة الرئيسية للموقع والتي تحتوي على روابط لباقي الصفحات.
page1.html و page2.html و page3.html و page4.html : الصفحات الفرعية التي تعرض محتويات مختلفة عند النقر على الروابط.

وتكون الصفحة الفرعية page1.html مثلا كالأتي

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>الصفحة 1</title>
</head>
<body>
    <h1>الصفحة 1</h1>
    <p>هذا هو محتوى الصفحة 1.</p>
</body>
</html>

إذا نريد أن نربط صفحة index.html وهي الصفحة الرئيسية مع صفحة page1.html وباقي الصفحات يتم ذلك عن طريق استخدام الروابط التشعبية وذلك باستخدام العنصر <a> (اسمه اختصار للكلمة anchor ويدعى بالمِربَط) رابطًا فائقًا (hyperlink) لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية أو لعناوين البريد الإلكتروني.

المثال الآتي فيه مسار الصفحة page1.html:

<a href="page1.html">الصفحة 1</a>

المثال الآتي فيه رابط إلى موقع خارجي:

<a href="http://www.hsoub.com/"> شركة حسوب </a>

في href نقوم بوضع مسار الصفحة رابط موقع ما أو يمكنك وضع مسار الصفحة التي نريدها داخل المشروع الخاص بك يمكنك معرفة المزيد حول العنصر <a> في موسوعة حسوب من هنا.
ننتقل لربط الصفحة page1.html مع الصفحة الرئيسية لتكون كالأتي

<!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>
    <h1>مرحبًا بك في موقعي</h1>
    <div>
        <ul>
            <li><a href="page1.html">الصفحة 1</a></li>
            <li><a href="page2.html">الصفحة 2</a></li>
            <li><a href="page3.html">الصفحة 3</a></li>
            <li><a href="page4.html">الصفحة 4</a></li>
        </ul>
    </div>
    <p>هذا هو محتوى الصفحة الرئيسية.</p>
</body>
</html>

قمنا بإنشاء قائمة تحتوي على روابط تشعبية إلى الصفحات الفرعية باستخدام العنصر <a> مع تحديد مسار الصفحة باستخدام السمة href عند الضغط على أي من الروابط سيتم التوجيه إلى الصفحة المقصودة.
تأكد من أن جميع الصفحات موجودة في نفس المجلد لتعمل الروابط بشكل صحيح.

ياسر مسكين · منذ 5 ساعة

لربط الصفحات ببعضها بطريقة بسيطة ومباشرة، يمكنك إنشاء صفحة رئيسية تحتوي على روابط باستخدام عناصر <a> في HTML، وكل رابط يؤدي إلى صفحة مختلفة مثلا في الصفحة الرئيسية (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>
</head>
<body>
    <h1>مرحبًا بك</h1>
    <a href="page1.html">صفحة 1</a> |
    <a href="page2.html">صفحة 2</a> |
    <a href="page3.html">صفحة 3</a>
</body>
</html>

ثم أنشئ الصفحات الأخرى (page1.html, page2.html, page3.html) بنفس الطريقة، مع محتوى مختلف لكل صفحة يمكنك محاولة تطبيق الفكرة لغرض التعلم.

محمد عاطف17 · منذ 5 ساعة

يمكنك إستخدام العنصر <a> في Html لربط أى عدد من الصفحات لديك في الصفحة الحالية . حيث العنصر <a> (اسمه اختصار للكلمة anchor ويدعى بالمِربَط) يستخدم لإنشاء رابط (hyperlink) لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية فهو يتحكم بالعنوان url في المتصفح.

ويمكنك وضع مسار الصحفة الكامل أو وضع المسار النسبي :

<a href="page.html">Page </a>

أو 

<a href=""C:\Users\user\OneDrive\Desktop\page.html"">Page </a>
أو
<a href="http://www.hsoub.com/">
شركة حسوب
</a>

لاحظ كيف قمنا بكتابة الثلاث عناوين بثلاث طرق . الطريقة الأولى هي المسار النسبى حيث تكتبت إسم الصفحة التريد تريد الذهاب إليها بالنسبة للملف الحالي . فلو الصفحة الرئيسية يوجد بجوارها الملف الذي تريد الذهاب إليه ستستخدم الطريقة الأولى وفقط تكتب إسم الملف.

الطريقة الثانية إذا كنت تقوم بالتطوير على حاسوبك فهنا يمكنك نسخ مكان الملف كاملا على حاسوبك ووضع في العنصر .

والطريقة الأخيرة إذا أردت ربط صفحة ليست موجودة لديك بل هي على الإنترنت كل ما عليك هو وضع رابط الموقع .

وأليك شرح العنصر على موسوعة حسوب إذا أردت تفاصيل أكثر :

العنصر a

ربط صفحات html في ملف واحد

السؤال

Mohammed Mahmoud17

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Mahmoud7

ياسر مسكين

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية