13 الفصل الخامس: تحسين صفحة HTML Attributes

Byahmed nabel Ahmed Nabel - Html

الفصل الخامس: تحسين صفحة HTML

3. أهمية الخصائص الإضافية (Attributes)

الخصائص الإضافية (Attributes) هي جزء أساسي من عناصر HTML. توفر هذه الخصائص مزيدًا من التحكم في كيفية عرض العناصر أو كيفية تفاعل الصفحة مع المستخدم. الخصائص الإضافية تُستخدم لتخصيص وتحديد سلوك العناصر بشكل أكثر دقة.

في هذا الجزء من الدورة، سنتعرف على بعض الخصائص الإضافية المهمة مثل class و id، وكيفية استخدامها في تحسين التنسيق والتنظيم داخل الصفحة.

3.1. خاصية class

  • class تُستخدم لتحديد مجموعة من العناصر التي تشترك في نفس التنسيق أو السلوك.
  • يتم تعيين القيمة في الخاصية class إلى اسم يتم استخدامه للإشارة إلى مجموعة من العناصر.
  • يمكن تطبيق نفس class على أكثر من عنصر داخل الصفحة لتنسيقها بشكل متشابه.

مثال:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على خاصية class</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <h1 class="highlight">عنوان مهم باللون الأحمر</h1>
    <p class="highlight">هذه فقرة تحتوي على نص مهم سيتم تمييزه باللون الأحمر.</p>
    <p>هذه فقرة عادية.</p>

</body>
</html>

في المثال السابق:

  • class="highlight" تُستخدم لتطبيق التنسيق (اللون الأحمر والوزن العريض) على العنصر h1 و p.
  • بذلك، يمكن استخدام نفس التنسيق في أكثر من عنصر بسهولة.

3.2. خاصية id

  • id تُستخدم لتحديد عنصر واحد فقط داخل الصفحة. يجب أن يكون كل id فريدًا داخل الصفحة.
  • يتم استخدام id بشكل أساسي لتحديد عنصر معين للتفاعل معه باستخدام CSS أو JavaScript.

مثال:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على خاصية id</title>
    <style>
        #main-header {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>

    <h1 id="main-header">العنوان الرئيسي للصفحة</h1>
    <p>هذه فقرة عادية.</p>

</body>
</html>

في هذا المثال:

  • id="main-header" يحدد العنوان الرئيسي h1 بشكل فريد.
  • تم تطبيق التنسيق الخاص باللون الأزرق وحجم الخط على هذا العنوان فقط باستخدام id.

3.3. الفرق بين class و id

  • class يمكن تطبيقها على أكثر من عنصر داخل الصفحة، في حين أن id يُستخدم لتحديد عنصر واحد فقط.
  • class تستخدم بشكل أساسي لتجميع العناصر التي تحتاج إلى نفس التنسيق أو السلوك، بينما id يُستخدم لتحديد عنصر معين لربطه بأسلوب أو تفاعل خاص.

مثال للمقارنة بين class و id:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مقارنة بين class و id</title>
    <style>
        .highlight {
            color: red;
        }

        #unique-element {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <p class="highlight">هذه فقرة باستخدام class.</p>
    <p class="highlight">هذه فقرة أخرى تستخدم نفس الـ class.</p>

    <h2 id="unique-element">هذا العنوان يحتوي على id فريد</h2>

</body>
</html>

في المثال:

  • تم تطبيق class="highlight" على فقرتين، وبالتالي سيتم تطبيق التنسيق نفسه عليهما.
  • تم تطبيق id="unique-element" على h2 فقط، مما يسمح بتطبيق تنسيق مميز له.

3.4. استخدام class و id مع JavaScript

من المفيد أيضًا أن class و id يمكن استخدامهما مع JavaScript للتفاعل مع العناصر داخل الصفحة. على سبيل المثال:

استخدام id مع JavaScript:

<button id="changeColorBtn">تغيير اللون</button>

<script>
    document.getElementById("changeColorBtn").onclick = function() {
        document.body.style.backgroundColor = "lightblue";
    };
</script>
  • في المثال السابق، عند الضغط على الزر changeColorBtn (الذي يحتوي على id)، يتغير لون الخلفية إلى اللون الأزرق الفاتح.

استخدام class مع JavaScript:

<button class="highlightBtn">تغيير النص</button>

<script>
    let buttons = document.querySelectorAll(".highlightBtn");

    buttons.forEach(function(button) {
        button.onclick = function() {
            button.style.color = "green";
        };
    });
</script>
  • هنا، تم تحديد العناصر التي تحتوي على class="highlightBtn"، وعند الضغط على أي منها، يتغير لون النص إلى الأخضر.

ملخص الفصل الخامس: أهمية الخصائص الإضافية (Attributes)

  • class تُستخدم لتجميع العناصر التي تشترك في نفس التنسيق أو السلوك.
  • id تُستخدم لتحديد عنصر واحد بشكل فريد داخل الصفحة.
  • class يمكن تطبيقها على أكثر من عنصر، بينما id يجب أن يكون فريدًا لكل عنصر.
  • كلا الخصائص تستخدمان في CSS و JavaScript للتحكم في سلوك وتنسيق العناصر.

الخصائص الإضافية مهمة جدًا لتنظيم الصفحة وتحسين التفاعل معها باستخدام CSS و JavaScript. لو احتجت مزيد من الشرح أو الأمثلة، أنا هنا للمساعدة! 😊

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *