قائمة غير مرتبة

يمكن وضع هذا الجزء في كل صفحة من صفحات الموقع ليتوفر التنقل بينهما بسهولة.

إضافة تنسيق CSS لتحسين مظهر الموقع

بعد إنشاء هيكل الموقع باستخدام HTML، يأتي دور CSS لتحسين الشكل والمظهر.

إنشاء ملف CSS منفصل

• في مجلد css/ أنشئ ملفًا جديدًا باسم styles.css.

• داخل كل صفحة HTML، قم بربط ملف CSS عبر وسم داخل :

html
CopyEdit
<link rel="stylesheet" href="css/styles.css">

مثال على تنسيقات CSS أساسية:

css
CopyEdit
/* إعادة تعيين الهوامش والتعبئة */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* تنسيق الجسم */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    padding: 20px;
}

/* تنسيق العناوين */
h1 {
    color: #007BFF;
    margin-bottom: 15px;
}

/* تنسيق قائمة التنقل */
nav ul {
    list-style-type: none;
    background-color: #007BFF;
    padding: 10px;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: #0056b3;
}

• في الكود أعلاه، قمنا بإعادة تعيين الهوامش والتعبئة لكل العناصر لضمان تناسق العرض.

• body يحتوي على الخط الأساسي ولون الخلفية ولون النص.

• قوائم التنقل تم تصميمها باستخدام flex لتظهر بشكل أفقي مع تباعد.

• إضافة تأثير hover عند مرور مؤشر الفأرة على الروابط.

إضافة صفحات متعددة باستخدام نفس القالب

لضمان الاتساق بين صفحات الموقع، يُنصح باستخدام نفس قالب HTML في كل صفحة مع تعديل المحتوى فقط.

مثال لصفحة about.html مع نفس القالب:

html
CopyEdit
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>من نحنtitle>
    <link rel="stylesheet" href="css/styles.css">
head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">الرئيسيةa>li>
            <li><a href="about.html" class="active">من نحنa>li>
            <li><a href="contact.html">اتصل بناa>li>
        ul>
    nav>

    <h1>من نحنh1>
    <p>هذا الموقع مخصص لتعليم أساسيات تصميم وتطوير الويب باستخدام HTML و CSS.p>
body>
html>

• يمكن تمييز الصفحة الحالية بإضافة صنف active إلى الرابط في قائمة التنقل لتغيير شكله باستخدام CSS.

• تحديث المحتوى فقط مع الحفاظ على البنية العامة والقائمة.

CSS لتفعيل الصفحة الحالية:

css
CopyEdit
nav ul li a.active {
    background-color: #003d80;
}

استخدام الجداول في HTML

الجداول تستخدم بشكل شائع لعرض البيانات المنظمة مثل الجداول الزمنية، الأسعار، أو أي معلومات مصنفة.

كيفية إنشاء جدول بسيط:

html
CopyEdit
<table>
    <thead>
        <tr>
            <th>اسم المنتجth>
            <th>السعرth>
            <th>الكميةth>
        tr>
    thead>
    <tbody>
        <tr>
            <td>قلمtd>
            <td>2 ريالtd>
            <td>10td>
        tr>
        <tr>
            <td>دفترtd>
            <td>5 ريالtd>
            <td>5td>
        tr>
    tbody>
table>

تنسيق الجدول باستخدام CSS:

css
CopyEdit
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

thead {
    background-color: #007BFF;
    color: white;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

• border-collapse: collapse; تجعل حدود الجدول متصلة بدلاً من متباعدة.

• تلوين صفوف الجدول بشكل متناوب لتحسين القراءة.

• تخصيص ألوان رأس الجدول لجعله مميزًا.

التعامل مع الصور في الموقع

إضافة الصور تزيد من جاذبية الموقع وتعزز المحتوى. يجب حفظ الصور داخل مجلد منظم مثل مجلد images/ وربطها بالصفحات.

مثال لإدراج صورة:

html
CopyEdit
<img src="images/logo.png" alt="شعار الموقع" width="150">

• src هو مسار الصورة.

• alt نص بديل يظهر إذا تعذر تحميل الصورة ويُستخدم في تحسين محركات البحث.

• يمكن تحديد أبعاد الصورة باستخدام width و height.

بناء صفحات تفاعلية بسيطة بـ CSS

CSS تتيح إمكانية إضافة تأثيرات لجعل الموقع أكثر ديناميكية من حيث الشكل، مثل تأثيرات الأزرار، تغير الألوان عند المرور عليها، وتنقل سلس.

مثال على زر مزود بتأثير:

html
CopyEdit
<button class="btn">اضغط هناbutton>

CSS لتنسيق الزر:

css
CopyEdit
.btn {
    background-color: #007BFF;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #0056b3;
}

• عند مرور مؤشر الفأرة على الزر يتغير لونه مما يزيد من تفاعل المستخدم.

• تنسيق الزر متناسق مع ألوان الموقع.

تحسين تجربة المستخدم (UX) عبر تنسيق CSS

عند تصميم الموقع يجب التركيز على سهولة القراءة والتنقل، من خلال:

• استخدام خطوط مناسبة وسهلة القراءة.

• المسافات المناسبة بين الفقرات والعناصر.

• ألوان متناسقة ومريحة للنظر.

• استخدام أزرار وروابط واضحة للضغط عليها.

• ترتيب المحتوى بطريقة منطقية وواضحة.

استعراض مثال عملي كامل

ملف index.html:

html
CopyEdit
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>موقعي التعليميtitle>
    <link rel="stylesheet" href="css/styles.css">
head>
<body>
    <nav>
        <ul>
            <li><a href="index.html" class="active">الرئيسيةa>li>
            <li><a href="about.html">من نحنa>li>
            <li><a href="contact.html">اتصل بناa>li>
        ul>
    nav>

    <header>
        <h1>مرحبًا بك في موقعي التعليميh1>
        <p>تعلم كيف تبني موقعًا إلكترونيًا باستخدام HTML و CSS من الصفر.p>
    header>

    <section>
        <h2>خدماتناh2>
        <p>نقدم دروسًا مجانية وأمثلة عملية لبناء مواقع احترافية.p>

        <table>
            <thead>
                <tr>
                    <th>الخدمةth>
                    <th>الوصفth>
                    <th>السعرth>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>دروس HTMLtd>
                    <td>تعلم أساسيات هيكلة الصفحاتtd>
                    <td>مجانيtd>
                tr>
                <tr>
                    <td>دروس CSStd>
                    <td>تعلم كيفية تنسيق صفحات الويبtd>
                    <td>مجانيtd>
                tr>
                <tr>
                    <td>مشاريع تطبيقيةtd>
                    <td>مشاريع عملية لبناء موقع كاملtd>
                    <td>مجانيtd>
                tr>
            tbody>
        table>
    section>

    <footer>
        <p>© 2025 موقعي التعليمي - جميع الحقوق محفوظة.p>
    footer>
body>
html>

ملف CSS styles.css:

css
CopyEdit
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
    color: #444;
    padding: 20px;
}

nav ul {
    list-style: none;
    background-color: #007BFF;
    display: flex;
    gap: 15px;
    padding: 10px;
    border-radius: 5px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #0056b3;
}

header {
    margin: 30px 0;
    text-align: center;
}

header h1 {
    color: #007BFF;
    margin-bottom: 10px;
}

section h2 {
    margin-bottom: 15px;
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

thead {
    background-color: #007BFF;
    color: white;
}

tbody tr:nth-child(even) {
    background-color: #f1f1f1;
}

footer {
    margin-top: 40px;
    text-align: center;
    color: #777;
    font-size: 14px;
}

نصائح مهمة في بناء موقع متعدد الصفحات

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

• تنظيم الملفات: حافظ على تنظيم مجلدات المشروع لتسهيل العثور على الملفات وتعديلها.

• تحسين الصور: استخدم صورًا مضغوطة بحجم مناسب لتسريع تحميل الصفحة.

• تحسين الأداء: تجنب تحميل ملفات CSS كبيرة وغير ضرورية، واستخدم ملفات CSS منفصلة للحفاظ على النظافة والترتيب.

• التحقق من التوافق: تأكد من أن الموقع يعمل بشكل جيد عبر مختلف المتصفحات والأجهزة.

دور HTML5 و CSS3 في التطوير الحديث

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

• HTML5 أضافت وسومًا جديدة مثل

  ,

  ,

  ,

• CSS3 قدمت إمكانيات مثل الظلال، التدرجات اللونية، التحولات، والرسوم المتحركة التي تساعد على إثراء تجربة المستخدم.

الخلاصة

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

المصادر والمراجع