الكورس الرابع: العناوين والفقرات في لغة HTML

الكورس الرابع: العناوين والفقرات في لغة HTML

العناوين مهمة جداً في لغة الويب, وكذلك سوف نقوم بمراجعتها في كورسات لاحقة بما يتعلق بموضوع تحسين محركات البحث (SEO).

هناك في HTML 6 عناوين تستخدم على الشكل التالي :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

أهمية كتابة العناوين عند تصميم صفحة ويب, هي بالترتيب من الأول <h1> حتى <h6>. بمعنى أنه يجب أن تهتم لموضوع العناوين عند كتابة الكود لاحقاً.

أهمية العناوين:

تستخدم محركات البحث العناوين لفهرسة بنية ومحتوى صفحات الويب الخاصة بك. و غالبًا ما يتصفح المستخدمون الصفحة حسب عناوينها. من المهم استخدام العناوين لإظهار بنية المستند.

فقرات لغة HTML:


تبدأ الفقرة دائمًا بسطر جديد ، وعادة ما تكون كتلة نصية.


فقرات HTML

<p> هو عنصر الفقرة الاساسي المستخدم في لغة HTML. و تبدأ الفقرة دائمًا بسطر جديد ، وتضيف المستعرضات تلقائيًا بعض المسافات البيضاء (هامش) قبل الفقرة وبعدها.

مثال

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

عرض HTML

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

باستخدام HTML ، لا يمكنك تغيير العرض عن طريق إضافة مسافات إضافية أو سطور إضافية في كود HTML الخاص بك.

سيقوم المتصفح تلقائيًا بإزالة أي مسافات وخطوط زائدة عند عرض الصفحة:

مثال

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

قواعد HTML الأفقية

تحدد العلامة <hr> الكسر المواضيعي في صفحة HTML، وغالبا ما يتم عرض كقاعدة الأفقية. و يُستخدم <hr> العنصر لفصل المحتوى (أو تحديد تغيير) في صفحة HTML:

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

فواصل أسطر HTML

يحدد عنصر<br> في لغة HTML فاصل الأسطر. و ننصحك باستخدم <br> إذا كنت تريد فاصل أسطر (سطر جديد) دون بدء فقرة جديدة:

مثال

<p>This is<br>a paragraph<br>with line breaks.</p>

عنصر <pre> في لغة HTML

ويحدد هذا العنصر النص المنسق مسبقًا و يتم عرض النص الموجود داخل عنصر <pre> بخط ثابت العرض ، ويحافظ على كل من المسافات وفواصل الأسطر:

مثال

<pre>
  My Bonnie lies over the ocean.
  My Bonnie lies over the sea.
  My Bonnie lies over the ocean.
  Oh, bring back my Bonnie to me.
</pre>