البرمجة

إنشاء موقع متعدد الصفحات باستخدام HTML وCSS

اخر تحديث 09/06/2025
21 تمت قراءة 6 دقيقة

HTML و CSS للمبتدئين: كيف تنشئ موقعًا من عدة صفحات

يُعد تعلم إنشاء موقع إلكتروني من أهم المهارات الأساسية في عالم تطوير الويب، خصوصًا للمبتدئين الذين يرغبون في دخول هذا المجال الواسع. في البداية، يُعتبر كل من HTML و CSS الركيزتين الأساسيتين لبناء صفحات الويب، فهما المسؤولان عن هيكلة المحتوى وتنسيقه، على التوالي. هذا المقال الموسع سيأخذك خطوة بخطوة لفهم كيفية بناء موقع من عدة صفحات باستخدام HTML و CSS بطريقة علمية ومنهجية، مع التركيز على التفاصيل العملية التي تساعدك على بناء موقع احترافي وسلس.

مقدمة عن HTML و CSS

قبل الخوض في التفاصيل، من المهم فهم الدور الذي يلعبه كل من HTML و CSS في بناء المواقع الإلكترونية:

مواضيع ذات صلة

  • HTML (HyperText Markup Language): هي لغة الترميز التي تستخدم لبناء الهيكل الأساسي لأي صفحة ويب. من خلال HTML يتم تحديد النصوص، الصور، الروابط، العناوين، القوائم، الجداول، وأي محتوى يظهر في الصفحة.

  • CSS (Cascading Style Sheets): هي لغة تصميم وتنسيق صفحات الويب، حيث تتحكم في شكل الصفحة من حيث الألوان، الخطوط، المسافات، المحاذاة، والتخطيطات العامة. CSS تمنح الصفحة مظهراً جذاباً ومنسقاً يساعد في تحسين تجربة المستخدم.

الخطوة الأولى: إنشاء صفحة HTML أساسية

لبناء موقع متعدد الصفحات، يجب أولاً أن تفهم كيفية إنشاء صفحة HTML واحدة. الصفحات تُكتب بامتداد .html ويتم فتحها من خلال متصفح الإنترنت.

مثال على صفحة HTML بسيطة:

html
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>صفحة البدايةtitle>
head>
<body>
    <h1>مرحبًا بك في موقعيh1>
    <p>هذه هي الصفحة الرئيسية للموقع.p>
body>
html>

  • السطر الأول يُخبر المتصفح بأن الصفحة مكتوبة بلغة HTML5.

  • الوسم هو الجذر الذي يحتوي على كل محتويات الصفحة.

  • داخل يتم وضع معلومات الصفحة مثل العنوان والترميز.

  • داخل يوضع المحتوى المرئي الذي يظهر للمستخدم.

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

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

الهيكل النموذجي لمجلد المشروع:

markdown
my-website/
│
├── index.html
├── about.html
├── contact.html
│
├── css/
│   └── styles.css
│
└── images/
    └── logo.png

  • index.html: الصفحة الرئيسية التي تُفتح عند دخول الموقع.

  • about.html و contact.html: صفحات أخرى في الموقع.

  • مجلد css/ يحتوي على ملفات التنسيق الخاصة بالموقع.

  • مجلد images/ يحتوي على الصور التي ستستخدمها في الموقع.

كيفية الربط بين صفحات الموقع

للسماح بالتنقل بين صفحات الموقع، نستخدم الوسم في HTML لإنشاء الروابط.

مثال على قائمة تنقل:

html
<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>

اخر تحديث 09/06/2025
21 تمت قراءة 6 دقيقة