لماذا تظهر سطور HTML عندي غير مرتبة؟

Wmh Gamer · 24 يونيو 2023

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>وسم النصوص</title>
    </head>

    <body>

        <!-- يسمح لنا بعرض اقتباس -->

        <blockquote> I am kalb</blockquote><br>

        <!-- يسمح لنا بعرض اقتباس صغير -->

        <q> I am mini kalb</q><br>

        <!-- يسمح لنا بعرض معلومات عن:منتج, كتاب, فيلم الخ -->

        <cite>very good</cite><br>

        <!-- تسمح لنا بعرض معلومات عن التواصل كالعنوان والهاتف وغيرها -->

        <address>m8</address><br>

        <!-- يسمح لنا بادخال مدخلات لوحة المفاتيح (كيبورد) -->

        <p>press <kbd>(ctrl)</kbd> and <kbd>(alt)</kbd> to die</p><br>

        <!-- يسمح لنا بعرض نص مهم يجب اظهاره بين النصوص -->

        <strong>kalb</strong><br>

        <!-- يسمح لنا بتغير خلفية النص الى الأصفر لكي يتميز عن بقية النصوص -->

        <p><mark>kalb tarbee3</mark></p><br>

        <!-- يسمح لنا بكتابة الاختصارات -->

        <p><abbr title="world wide web">www</abbr></p><br>
        
         <!-- يسمح لنا بتمييز النص المهم وعرضه لنا بشكل مختلف -->

         <P><em>focus</em> on your goal</P><br>

    </body>

</html>

هل هنالك خطأ في كتابة الكود, وهل استعمال الملاحظات يؤثر على ترتيب السطور؟

أسامة زيادة · 24 يونيو 2023

الكود الذي قدمته صحيحاً بشكل عام. لا يوجد أخطاء في كتابة الكود، واستخدام الملاحظات (comments) في الكود HTML لا يؤثر على ترتيب السطور. الملاحظات تستخدم لإضافة توضيحات أو معلومات إضافية للمطورين ولا تؤثر على عرض الصفحة في المتصفح. كما في الكود الخاص بك تم وضع التعليقات بين علامات الـ  ولن تظهر في عرض الصفحة عند تشغيلها في المتصفح.

أما عن الأسطر الفارغة بين الأسطر فهي بفعل النسخ واللصق تظهر أحياناً . وفي حال أنك تستخدم محرر VS Code وقمت بالضغط بزر الفأرة الأيمن سوف تظهر لك قائمة يمكنك إختيار منها Format Document وسوف يتم ترتيب الكود تلقائي .

Mustafa Suleiman · 24 يونيو 2023

ما المقصود بالسطور غير مرتبة؟ فالكود لديك يظهر بالشكل التالي:

Screenshot2023-06-24111911.png.8cfb597235c0e838d9a5ac32d9c6664b.png

وكلها تنسيقات إفتراضية لعناصر HTML التي استخدمتها، فمثلاً التنسيق الإفتراضي لعنصر blockquote في المتصفح هو:

blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

وسبب الإزاحة لليمين قليلاً هي بسبب وجود margin بقيمة 40 بكسل في البداية، والتنسيقات الإفتراضية تعرف باسم user agent stylesheet وهي مجموعة من القواعد والأنماط التي يستخدمها مستعرض الويب لتنسيق وتصميم عناصر صفحات الويب، وتُستخدم أوراق الأنماط هذه لتحديد كيفية عرض العناصر الافتراضية مثل العناوين والفقرات والروابط والجداول وغيرها من العناصر في صفحة الويب إذا لم يتم تطبيق أي أوراق أنماط مخصصة من قبلك على الصفحة.

فمثلاً نستطيع التعديل على blockquote بكتابة تنسيق داخل عنصر style ووضعه داخل عنصر head كالتالي:

<head>
    <title>وسم النصوص</title>
    <style>
        blockquote {
            margin: 0
        }
    </style>
</head>

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

عبدالباسط ابراهيم · 24 يونيو 2023

لا يوجد خطأ في الكود المعروض، ولكن السطور قد تظهر غير مرتبة بسبب عدة عوامل، مثل:

عدم استخدام نمط CSS لتنسيق الصفحة وتحديد الخصائص المناسبة للعناصر المختلفة.
استخدام العناصر بشكل غير صحيح، على سبيل المثال، وضع عنصر `<br>` في نهاية كل عنصر من العناصر، وهذا الأمر يتسبب في وجود فراغات غير ضرورية بين العناصر.
استخدام تنسيقات خاصة في النصوص مثل الخطوط والألوان والحجم، وهذا يؤثر على عرض النصوص بشكل عام.

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

تم التعديل في 24 يونيو 2023 بواسطة عبدالباسط ابراهيم
خطأ إملائي

بلال زيادة · 26 يونيو 2023

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

بالنسبة لسؤالك حول تأثير الملاحظات على ترتيب الأسطر، فإن الملاحظات في HTML تُستخدم فقط لغرض التوضيح ولا تؤثر على ترتيب الأسطر أو عرض الصفحة. الملاحظات تُعتبر تعليقات توضح الكود للمطورين ولا تُعرض في الصفحة النهائية عند تصفحها من قِبل المستخدمين. لذلك، يمكنك استخدام الملاحظات بحرية داخل كود HTML دون التأثير على ترتيب الأسطر أو تنسيق الصفحة.

لماذا تظهر سطور HTML عندي غير مرتبة؟

السؤال

Wmh Gamer

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية