تعلم لغة HTML

وسوم HTML: العناوين و الفقرات في HTML

في هذه التدوينة سنتعرف على العناوين والفقرات في HTML, وهي تعتبر من أهم وسوم HTML, ولكن قبل البدء في الشرح نود أن نرحب بزوار موقعنا الأعزاء, مرحبا بكم وبارك الله فيكم

تعريف العناوين في HTML:

تتكون عناوين HTML, من ستة مستويات يأتي الوسم <h1> كأعلى مستوى و الوسم <h6> كأدنى مستوى, h هي اختصار ل (Heading), كما تعتبر الوسوم Heading من (Block Inline).

طريقة كتابة عناوين HTML على المحرر:

<h1>محتوى العنوان</h1>
<h2>محتوى العنوان</h2>
<h3>محتوى العنوان</h3>
<h4>محتوى العنوان</h4>
<h5>محتوى العنوان</h5>
<h6>محتوى العنوان</h6>

تنبيه: اذا قمت بكتابة عنصر العناوين أكبر من h6, اي h7 أو h8 سيعتبر المتصفح محتوى بدون عنصر, بمعنى اخر وكانك كتب المحتوى فقط.

الطريقة الصحيحة لستخدام عناوين HTML:

يجب ان تعلم ان الترتيب مهم اثناء استخدام عناوين HTML. اي اذا كان العنوان الرئيسي هو <h1> فالعنوان الفرعي يجب ان يكون <h2>. للفهم اكثر انظر الى الشفرة الموضوعة ادنى.

<h1>تعلم البرمجة</h1>
<h2>تطوير تطبيقات الويب</h2>
<h2>تطوير تطبيقات سطح المكتب</h2>
<h2>تطوير تطبيقات الهواتف المحمولة</h2>

نلاحظ ان العنوان (تعلم البرمجة), هو العنوان الرئسي, والعناوين الاخرى عناوين فرعية. واذا دققة النظر في المقالات التي اكتبها ستجد نفس الفكرة.

تعريف الفقرات في HTML:

الفقرة في HTML هي وسم <p>, حرف p هو اختصار لي (Paragraph), تعتبر Paragraphs من العناصر (Block Inline).

طريقة كتابة فقرات HTML على المحرر:

<p>محتوى الفقرة الأولة</p>
<p>محتوى الفقرة الثانية</p>
<p>محتوى الفقرة الثالثة</p>

طريقة استخدام العناوين والفقرات في HTML:

أول مثال:

<DOCTYPE html!>
<html>
  <head>
    <meta charset="utf-8" />
    <title>اسم الصفحة او الموقع</title>
  </head>
  <body>
     <h1>عنوان المقال</h1>
     <p>الفقرة الأولة</p>
     <p>الفقرة الثانية</p>
     <p>الفقرة الثالثة</p>
     <p>الفقرة الرابعة</p>
  </body>
</html>

ثاني مثال:

<DOCTYPE html!>
<html>
  <head>
    <meta charset="utf-8" />
    <title>اسم الصفحة او الموقع</title>
  </head>
  <body>
     <h1>تعلم البرمجة</h1>
     <p>فقرة تتحدث عن البرمجة</p>

     <h2>تطوير تطبيقات الويب</h2>
     <p>فقرة تتحدث عن تطبيقات الويب</p>

     <h2>تطوير تطبيقات سطح المكتب</h2>
     <p>فقرة تتحدث عن تطبيقات سطح المكتب</p>

    <h2>تطوير تطبيقات الهواتف المحمولة</h2>
    <p>فقرة تتحدث عن تطبيقات الهواتف المحمولة</p>
  </body>
</html>

ثالث مثال:

<DOCTYPE html!>
<html>
  <head>
    <meta charset="utf-8" />
    <title>اسم الصفحة او الموقع</title>
  </head>
  <body>
    <h1>تعلم البرمجة</h1>
    <p>فقرة تتحدث عن البرمجة</p>

    <h2>تطوير تطبيقات الويب</h2>
    <p>فقرة تتحدث عن تطبيقات الويب</p>

    <h3>الواجهات الامامية</h3>
    <p>فقرة تتحدث عن الواجهات الأمامية</p>

    <h3>الواجهات الخلفية</h3>
    <p>فقرة تتحدث عن الواجهات الخلفية</p>

    <h2>تطوير تطبيقات سطح المكتب</h2>
    <p>فقرة تتحدث عن تطبيقات سطح المكتب</p>

    <h2>تطوير تطبيقات الهواتف المحمولة</h2>
    <p>فقرة تتحدث عن تطبيقات الهواتف المحمولة</p>
  </body>
</html>

في المثال الثالث أضفة <h3>, هي ابن العنوان (تطوير تطبيقات الويب). جرب هذه الأكود لديك تتوضح لك الفكرة

Related Posts

إرسال التعليق