تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: تنظيم النص الخاص بك


الصفحة السابقة

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

سنكتشف العديد من علامات HTML في هذا الفصل. بعضها موجود منذ الإصدار الأول من HTML ، والبعض الآخر تم تقديمه مؤخرًا في HTML5.

سوف نرى على التوالي في هذا الفصل:

  • كيفية كتابة الفقرات ؛
  • كيفية هيكلة صفحتك بالعناوين ؛
  • كيفية إعطاء أهمية لبعض الكلمات ؛
  • كيفية تنظيم المعلومات في شكل قوائم

الدافع؟ هيا ، سترى ، هذا ليس معقدًا.

الفقرات


في معظم الأحيان ، عند كتابة نص في صفحة ويب ، يتم ذلك داخل فقرات. تقترح لغة HTML على وجه التحديد العلامة

لتحديد الفقرات.


<p>أهلا و سهلا بكم جميعا !</p>
  • <p>تعني "بداية الفقرة" ؛
  • </p>يعني "نهاية الفقرة".

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

لذلك أكرر نفس الكود تمامًا كما في الفصل السابق وأضيف فقرتي:

وأضيف فقرتي:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>الفقرات</title>
    </head>

    <body>
        <p>مرحبا بك في موقعنا !</p>
    </body>
</html>

حاول ، سترى النتيجة!

حسنًا ، إنها ليست ممتازة بعد لكنها بداية جيدة.

لكن لا تتوقف عند هذا الحد. سنرى الآن شيئًا مميزًا حول HTML: القفز الى الأسطر. يبدو بسيطًا ولكنه لا يعمل كما لو كان في معالج النصوص العادي ...

القفز الى الاسطر


في HTML ، لا يؤدي الضغط على المفتاح Enter إلى إنشاء سطر جديد كما اعتدت. جرب هذا الكود:


<!DOCTYPE html>
<html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body>
        <p>مرحبا بك في موقعنا !
            هذا هو أول اختبار لي ، لذا يرجى أن تكون متساهلاً 
            ، وأنا أتعلم شيئًا فشيئًا كيف يعمل.
            في الوقت الحالي ، أصبحت فارغة بعض الشيء
            ، لكن عدت خلال 2-3 أيام
            عندما تعلمت أشياء أكثر بقليل ، أؤكد لك أنك ستفاجأ !
        </p>
    </body>
</html>

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

في الواقع ، إذا كنت ترغب في كتابة فقرة ثانية ، فما عليك سوى استخدام علامة ثانية

<p>.

يجب أن تملأ كود HTML الخاصة بك مع علامات الفقرة!

مثال :


<html>   
     <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body>
        <p>مرحبا بك في موقعنا !</p>
            <p> هو أول اختبار لي 
            ، لذا يرجى أن تكون متساهلاً ، وأنا أتعلم شيئًا فشيئًا كيف يعمل.
            </p>
            <p> في الوقت الحالي ، أصبحت فارغة بعض الشيء
             ، لكن عدت خلال 2-3 أيام
              عندما تعلمت أشياء أكثر بقليل ، أؤكد لك أنك ستفاجأ !
            </p>
    </body>
</html>

والنتيجة تكون على الشكل التالي.

code html

كما تلاحظ النص ليس مكتوبا من اليمين الى اليسار و هي خاصية نستعملها للنصوص العربية. لجعل النص مكتوبا من اليمين الى اليسار ما عليك الا ان تظيف سمة جديدة للعلامة و هي التي ستجعل الحاسب يعرض النص من اليمين الى اليسار (Right to Left) ليصبح هكذا


<body dir="rtl">

و النتيجة تظهر على النحو التالي

code html

نعم ، لكن ماذا لو أردت فقط الذهاب إلى السطر التالي في فقرة وليس القفز على فقرة جديدة؟

حسنا عليك ان تخمن: هل هناك علامة "اذهب إلى السطر"!

هي علامة يتيمة و تستخدم فقط للإشارة إلى أنه يجب أن يذهب إلى السطر:

<br />. يجب وضعها داخل فقرة .

إليك كيفية استخدامها في الكود:

والنتيجة تكون على الشكل التالي.

code html

كما تلاحظ النص ليس مكتوبا من اليمين الى اليسار و هي خاصية نستعملها للنصوص العربية. لجعل النص مكتوبا من اليمين الى اليسار ما عليك الا ان تظيف سمة جديدة للعلامة و هي التي ستجعل الحاسب يعرض النص من اليمين الى اليسار (Right to Left) ليصبح هكذا


<!DOCTYPE html>
<html>
<html>   
     <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body dir="rtl">
        <p>مرحبا بك في موقعنا !<br />
            <p> هو أول اختبار لي 
                 ، لذا يرجى أن تكون متساهلاً ، وأنا أتعلم شيئًا فشيئًا كيف يعمل.
            </p>
            <p> في الوقت الحالي ، انها فارغة بعض الشيء ، لكن عدت خلال
                2-3 أيام عندما تعلمت أشياء أكثر بقليل ، أؤكد لك أنك ستفاجأ !
            </p>
    </body>
</html>

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

اذا مفهوم ؟

  • <p> </p>: لتنظيم النص في فقرات ؛
  • <br />: للذهاب إلى السطر.

الآن بعد أن عرفنا كيفية كتابة الفقرات ، دعنا نرى كيف ننشئ عناوين

عناوين


عندما يتم توسيع محتوى صفحتك مع العديد من الفقرات ، فسيصعب على زائرين العثور على طريقهم. هذا هو المكان الذي تصبح فيه العناوين مفيدة.

في HTML ، لدينا الحق في استخدام ستة مستويات مختلفة من عناوين. أعني ، يمكننا أن نقول "هذا هو عنوان مهم للغاية" ، "هذا هو عنوان أقل أهمية قليلا" ، "هذا هو العنوان لا يزال أقل أهمية" ، الخ لذلك لدينا ستة علامات من عناوين مختلفة:

  • <h1> </h1>: يعني "عنوان مهم جدا". بشكل عام ، يتم استخدامه لعرض عنوان الصفحة في بداية الصفحة.
  • <h2> </h2>: يعني "اللقب المهم".
  • <h3> </h3>: هو نفسه عنوان أقل أهمية قليلاً (يمكننا أن نقول "العنوان الفرعي" إذا كنت تريد).
  • <h4> </h4>: حتى أقل أهمية.
  • <h5> </h5>: العنوان غير مهم.
  • <h6> </h6>: العنوان حقا ، ولكن بعد ذلك هناك حقا ليست مهمة على الإطلاق.

تحذير: لا تخلط مع العلامة

<title>! <title> هذه العلامة تعرض عنوان الصفحة في شريط عنوان المتصفح كما رأينا العناوين <h1>, <h2>, ...، يتم استخدامها لإنشاء العناوين التي سيتم عرضها في صفحة الويب

لا تنخدع بكل هذه العلامات. في الواقع ، ستة مستويات من الألقاب كثيرة. في الممارسة العملية، وأنا شخصيا فقط استخدام العلامات

<h1>، <h2>و <h3>، و نادرا جدا ما استخدم الاخرين (وأنا عادة لا أكون بحاجة الى ستة مستويات من عناوين مختلفة). يعرض المستعرض الخاص بك العنوان الهام جدًا بحجم كبير جدًا ، والعنوان أقل أهمية قليلاً في حجم أقل قليلاً ، إلخ.

لا تختار علامة العنوان الخاصة بك على أساس الحجم الذي ينطبق على النص! من الضروري تنظيم صفحتك بدءًا من عنوان المستوى 1 (

<h1>) ، ثم عنوان المستوى 2 ( <h2>) ، إلخ. يجب ألا يكون هنالك عناوين فرعية بدون عنوان رئيسي! إذا كنت تريد تغيير حجم النص ، فاعلم أننا سنتعلم القيام بذلك في CSS لاحقًا. حاول إنشاء صفحة ويب تحتوي على عناوين لترى ما يعطي هذا


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Niveaux de titres</title>
    </head>

    <body dir="rtl">
        <h1>عنوان مهم جدا</h1>
        <h2>عنوان مهم</h2>
        <h3>عنوان اقل أهمية – عنوان فرعي)</h3>

        <h4>عنوان ليس مهما جدا</h4>
        <h5>عنوان ليس مهم</h5>
        <h6>ليس مهما ابدا</h6>
    </body>
</html>

النتيجة هي التالية

code html

نعم ، لكنني أريد أن أركز على العنوان ، أكتبه باللون الأحمر واضع سطرا تحته !

سنفعل كل هذا عندما نتعلم CSS في الجزء الثاني من الدورة. يجب أن تعلم أن

<h1>هذا لا يعني "Times New Roman ، حجم 16 نقطة" ، ولكن " عنوان مهم ".

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

إعطاء قيمة لبعض العناصر


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

ضع قليلا في القيمة

لوضع القليل من تسليط الضوء على النص الخاص بك، يجب عليك استخدام العلامة

<em> </em>.

استخدامه بسيط للغاية: قم بوضع إطار للكلمات لتمييزها باستخدام هذه العلامات وهو جيد! أأخذ بعض الشيء من المثال السابق وأضع بعض الكلمات في الدليل:


<html>   
     <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body dir="rtl">
        <p>مرحبا بك في موقعنا !<br />
            <p> هو أول اختبار لي ، لذا يرجى أن تكون متساهلاً 
                <em>، وأنا أتعلم شيئًا فشيئًا</em> كيف يعمل.
            </p>
            <p> في الوقت الحالي ، انها فارغة بعض الشيء ، لكن عدت خلال 2-3 أيام
                 عندما تعلمت أشياء أكثر بقليل ، أؤكد لك أنك ستفاجأ !
            </p>
    </body>
</html>

كما ترون ، فإن استخدام العلامة

<em>له تأثير في وضع النص بخط مائل . في الواقع ، هو المتصفح الذي يختار كيفية عرض الكلمات. يقال إن الكلمات مهمة جدًا ، ولإظهار هذه المعلومات ، فإنها تغير مظهر النص باستخدام الحروف المائلة.

ضع كثيرا من القيمة

لاعطاء نص اكثر القيمة ، نستخدم العلامة

<strong>التي تعني "قوي" أو "مهم" إذا كنت تفضل ذلك. يتم استخدامه بنفس الطريقة تمامًا مثل <em>:


<html>   
     <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body dir="rtl">
        <p>مرحبا بك في موقعنا !<br />
            <p> هو أول اختبار لي ، لذا يرجى أن تكون متساهلاً 
                <strong>، وأنا أتعلم شيئًا فشيئًا</strong> كيف يعمل.
            </p>
            <p> في الوقت الحالي ، انها فارغة بعض الشيء ، لكن عدت خلال 2-3 أيام
                 عندما تعلمت أشياء أكثر بقليل ، أؤكد لك أنك ستفاجأ !
            </p>
    </body>
</html>

ربما ترى النص يظهر بالخط العريض. مرة أخرى ، الخط العريض ليس سوى نتيجة . اختار المتصفح النص العريض للكلمات المهمة لجعلها تبرز أكثر.

<strong>لا تعني العلامة "غامق" ولكن "مهم". يمكننا أن نقرر لاحقًا ، في CSS ، عرض الكلمات "مهمة" بطريقة اخرى غير العريض إذا رغبنا في ذلك.

علامة تمييزالنص

تتيح العلامة

<mark>تمييز جزء من النص بشكل مرئي. لا يعتبر المقتطف مهمًا بالضرورة ولكننا نريد أن يكون مختلفًا عن بقية النص. يمكن أن يكون هذا مفيدًا في تمييز النص ذي الصلة بعد البحث على موقعك على سبيل المثال.


<html>   
     <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body dir="rtl">
        <p>مرحبا بك في موقعنا !<br />
            <p> هو أول اختبار لي ، لذا يرجى أن تكون متساهلاً 
                <mark>، وأنا أتعلم شيئًا فشيئًا</mark> كيف يعمل.
            </p>
            <p> في الوقت الحالي ، انها فارغة بعض الشيء ، لكن عدت خلال 2-3 أيام
                 عندما تعلمت أشياء أكثر بقليل ، أؤكد لك أنك ستفاجأ !
            </p>
    </body>
</html>
code html

بشكل افتراضي ،

<mark>له تأثير تمييز النص. يمكننا تغيير العرض في CSS واختيار لون اخر ، وتأطير النص ، إلخ. هذا هو نفس المبدأ الذي أخبرتك به عن العلامات السابقة: فهي تشير إلى معنى الكلمات وليس كيف يجب أن تظهر.

تذكر: HTML للخلفية و CSS للمظهر

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

<em>، <strong>، <mark>... يقولون، "لقد، اكتشفت كيفية كتابة نص مائل، عريض، وكيفية تسليط الضوء على النص في HTML! ".

وحتى الآن ... هذا ليس ما تفعله هذه العلامات! أعلم ، أعلم ، ستقول "نعم ولكن عندما أستخدم

<strong>النص يظهر بالخط العريض ، لذلك فان هذه العلامة تضع النص بالخط العريض. ومع ذلك ، فمن الخطأ الاعتقاد بأن هذا العلامة تستخدم لهذا الغرض.

دور العلامات هو الإشارة إلى معنى النص. هكذا

<strong>يخبر الكمبيوتر "هذا النص مهم". هذا كل شيئ. و تبين أن هذا النص هو المهم، يقرر الكمبيوتر لجعلها عريضة (ولكن قد يكتب كذلك في الحمراء!). تعرض معظم المتصفحات نصًا مهمًا بخط غامق ، لكن لا شيء يتطلب منهم ذلك

لاأفهم. ما الهدف من معرفة الكمبيوتر أن النص مهم؟ انه ليس ذكيا بما فيه الكفاية لفهم ذلك !

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

بالطبع ، هذا تفسير فظ ويجب ألا تعتقد أن استخدام العلامة

<strong>على الإطلاق سيؤدي إلى تحسين SEO. عليك فقط الوثوق بأجهزة الكمبيوتر: فهم يفهمون معنى النص "المهم" ويمكنهم استخدام هذه المعلومات.

ولكن بعد ذلك ، كيف يمكن للمرء أن يضع بالخط العريض ، وأن يكتب باللون الأحمر ، وكل شيء وكل شيء؟

كل هذا يتم في CSS. تذكر:

  • يحدد HTML الخلفية (المحتوى ، منطق العناصر) ؛
  • يحدد CSS النموذج (المظهر).

سنرى CSS أكثر ، في الوقت الحالي نركز على HTML وعلاماته ، والتي لكل منها معنى معين.

القوائم


تتيح لنا القوائم في الغالب هيكلة نصنا بشكل أفضل وتنظيم معلوماتنا.

سنكتشف هنا نوعين من القوائم:

  • قوائم غير مرتبة أو قوائم نقطية ؛
  • قوائم مرتبة أو قوائم مرقمة أو تعدادات.

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

القائمة غير مرتبة تبدو هكذ:

  • فراولة
  • توت
  • كرز

إنه نظام يسمح لنا بإنشاء قائمة بالعناصر دون فكرة ترتيب (لا يوجد "الأول" ولا "الأخير"). إنشاء قائمة غير مرتبة أمر بسيط للغاية. مجرد استخدام العلامة

<ul>التي أغلقت مع </ul>. لذا ابدأ في كتابة هذا:


    <ul></ul>

والآن ، هذا ما سنفعله: سنكتب كل عنصر من عناصر القائمة بين علامتين

<li></li>. يجب أن تكون كل علامة من هذه العلامات بين
    و
. سوف تفهم على الفور مع هذا المثال:


    <ul>
        <li>فراولة</li>
        <li>توت</li>
        <li>كرز</li>
    </ul>

والنتيجة هي على الشكل التالي.

list html

لاحظ أنه يجب وضع القائمة في الداخل

<body></body>. من الآن فصاعدًا ، لا أضع كل رمز الصفحة مقروءًا. لذلك تذكر هاتين العلامتين:

  • <ul></ul>يحدد القائمة بأكملها ؛
  • <li></li>يحدد عنصرمن القائمة (رمز نقطي).

يمكنك وضع اي عدد تريده من العناصر في القائمة النقطية ، ولا تقتصر على ثلاثة عناصر.

والآن ، أنت تعرف كيفية إنشاء قائمة نقطية! ليس صعبا بمجرد فهم كيفية تداخل العلامات.

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

<ul>داخل عنصر <li></li>. إذا قمت بإغلاق العلامات بالترتيب الصحيح ، فلن تواجه مشكلة. كن حذرا ، هذه التقنية معقدة بعض الشيء.

قائمة مرتبة

نستعمل القائمة مرتبة بالطريقة نفسها ، تتغير علامة واحدة فقط: يجب استبدالها

<ul></ul>بـ <ol></ol>. داخل القائمة ، لا نغير أي شيء: نستخدم دائمًا العلامات <li></li>لتحديد العناصر.

الترتيب الذي تضع فيه العناصر في القائمة مهم. الأول

<li></li>سيكون العنصر # 1 ، والثاني سيكون # 2 الخ ... نظرًا لأنه أمر بديهي بشكل خاص ، أدعوك الا تتعجب من بساطة هذا المثال (ينتج عنه الشكل التالي):


<html>   
     <head>
        <meta charset="utf-8" />
        <title>تجربة القفز الى الاسطر</title>
    </head>

    <body dir="rtl">
            <ol>
                <li>فراولة</li>
                <li>توت</li>
                <li>كرز</li>
            </ol>
                
  </body>
</html>
list html

بالمقارنة مع المثال السابق ، كل ما كان علينا تغييره هو العلامة

<ol>.

هناك نوع ثالث من القائمات ، نادرًا ما يستعمل: قائمة التعاريف. يتضمن العلامات

<dl>لتحديد القائمة ، <dt> لتحديد مصطلح و <dd>لتحديد تعريف هذا المصطلح.

الخلاصة


  • يحتوي HTML على العديد من العلامات التي تسمح لنا بتنظيم نص صفحتنا. تعطي هذه العلامات مؤشرات مثل "This is a paragraph"، "this is a title" ، إلخ.
  • يتم تعريف الفقرات بالعلامة

    والقفز الى اسطر جديدة بالعلامة <br />.
  • هنالك ستة مستويات من العناوبن ، من <h1> </h1>إلى <h6> </h6>، لاستخدامها اعتمادًا على أهمية العنوان.
  • يمكننا تسليط الضوء على بعض الكلمات مع العلامات <strong>، <em>و <mark>.
  • لإنشاء قوائم ، يجب عليك استخدام العلامة <ul>للقوائم النقطية غير المرتبة) أو <ol> للقوائم المرتبة. في الداخل ، نقوم بإدراج العناصر مع علامة <li>لكل عنصر.