عناصر صفحة الويب Body tags - جزء 1- النصوص text والقوائم Lists في صفحات الويب

عناصر صفحة الويب Body tags
جزء 1 النصوص والقوائم في صفحات الويب

ماهي أوسمة الـ HTML الخاصة بعرض النص على صفحة الويب..؟! وكيف يتم انشاء القوائم النقطية والرقمية بواسطة تعليمات الـ HTML..?! تعرف في هذا المقال على اوسمة الـ Body الخاصة بالنصوص والقوائم وطريقة عمل كل وسم..!!


ذكرنا سابقاً في مقال مقدمة الى HTML ان جزء الـ Body هو جزء صفحة الويب الظاهر للمستخدم أي هو الجزء الذي يشاهده المستخدم ويتفاعل معه عند التصفح من نصوص وصور وفيديو و روابط ايقونات ...الخ، وتعبرأوسمة الـ Body عن عناصر صفحة الويب الظاهرة للمستخدم وبالطبع لكل عنصر من هذه العناصر وسم أو مجموعة أو سمة من الـ HTML لتمثلها.

بالطبع لا يسعنا شرح جميع عناصر صفحة الويب في مقال واحد لذا سنقوم بتقسيم أوسمة الـ Body على مجموعة من المقالات ، بناء على ما تمثله من عناصر و في أول هذه المقالات سنتكلم عن الأوسمة Body Tags التي تعرض النصوص والقوائم سواء النقطية أو الرقمية وطريقة العمل مع هذه لنبدأ…

في هذا المقال نتعرف على :


أوسمة النصوص Text Tags في HTML

تشكل النصوص الجزء الأكبر من صفحات الويب و يمكن أن تظهر النصوص بشكل ثابت أو يكون جزء منها مخفي كما أن اغلب الروابط تستخدم النص للتعبير عن دلالة الى ما يشير الرابط. والنصوص إما يكون عنوان Heading أو فقرة Paragraph لنرى كيف يمكن تمثيل كلاً منهما من خلال الـ Body Tags.

العنوان Heading

ويكون العنوان في صفحة الويب اما رئيسي أو فرعي او ثانوي، وتمثل العناوين بمجموعة <h> وهي اوسمة ثنائية تأخذ الأرقام من 1-6 بحسب أهمية العنوان حيث يمثل الوسم <h1> العنوان الأكثر أهمية (العنوان الرئيسي) كما يتضح معنا في المثال التالي :

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
    <meta charset="utf-8"/>
</head>
<body>
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <h4>Heading 4</h4>
     <h5>Heading 5</h5>
     <h6>Heading 6</h6>
</body>
</html>

لتكون نتيجة الكود كالتالي:

العنوان Heading



الفقرة Paragraph

وتمثل نصوص الفقرات بـالوسم <p> وهو وسم ثنائي ويستخدم لإظهار النصوص بشكل عادي كما يتضح في المثال التالي:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
     <p>Type the Paragraph  here </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:




أوسمة تنسيق النص في HTML

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


الأوسمة < strong> و <b>

وتستخدم لظهور النص بخط عريض مثلاً:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
     <p><strong> Hello</strong>, world </p>
     <p><b> Hello</b>, world </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:


الأوسمة < strong> و <b> فيhtml


الأوسمة <em> و <i>

وتستخدم لظهور النص بشكل مائل مثلاً:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p><em> Hello</em>, world </p>
    <p><i> Hello</i>, world </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:


الأوسمة <em> و <i> في html

الوسم <ins>

ويستخدم لنص تحته خط مثلاً:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p><ins> Hello</ins>, world </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:

الوسم <ins> في html



الوسم <del>

يستخدم لظهورالنص بشكل النص المحذوف (النص يتوسطه خط) كما في المثال التالي :

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p><del> Hello</del>, world </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:


الوسم <del> في html


الوسم <small>

للظهور النص بحجم أصغر حجم الجملة النصية:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p><small> Hello</small>, world </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:


The HTML <small> tag example

الوسم <sub>

ويستخدم لظهور نص صغير للأسفل من النص العادي كما في المثال التالي :

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p> Hello, <sub>world</sub> </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:

The HTML <sub> tag example



الوسم <sup>

ويستخدم لظهور نص صغير اوالى الأعلى من النص العادي كما في المثال التالي :

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p>Hello, <sup>world</sup> </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:

The HTML <sup> tag example

الوسم <mark>

يستخدم لظهور النص بشكل محدد كما في المثال التالي :

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p>Hello, <mark>world</mark> </p>
</body>
</html>

لتكون نتيجة الكود كالتالي:

The HTML <mark> tag example



الوسم< span >

وسم يستخدم مع أوسمة النصوص عامة والغرض منه تخصيص جزء معين من النص بتسيق او امر برمجي معين لنرى طريقة استخدامة مع أوسمة النصوص والقوائم :

<p>The HyperText Markup Language, or <span style="font-weight: bold;"> HTML</span> 
        is the standard markup language for documents designed to be displayed
        in a web browser</p>

لتكون نتيجة الكود كالتالي:

The HTML <span> tag example

الوسم< label >

يعطي مخرجات مثل <p> وغالباً ما يستخدم مع النصوص التي تظهر من خلال عناصر أخرى مثل النماذج Forms لاحظ /ي المثال التالي : 

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <label>Hello, world </label>
</body>
</html>

لتكون نتيجة الكود كالتالي:


The HTML <label> tag example

الأوسمة الأحادية

توفر الـ HTML بعض الأوسمة الاحادية التي غالباً ما تعمل مع أوسمة النصوص أو لوحدها وتقوم بتنفيذ فواصل بين النصوص، ونذكر من هذه الأوسمة التالي:

<br /> للانتقال إلى سطر جديد.

<hr /> للإدراج خط فاصل.

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <p><hr/>The HyperText Markup Language,<br/> or HTML is the standard markup language for documents designed to be displayed
        in a web browser. <hr/>It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
</body>
</html>

لتكون نتيجة الكود كالتالي:

The HTML <br/> and <hr/> tags example

القوائم Lists في HTML

ونعني بالقوائم هنا طريقة تمثيل قوائم التعداد والتعداد قد يكون:

  • مرتب Order List (قوائم مرقمة ) وتتمثل بالوسم <ol>.
  • أو تكون التعداد غير مرتب Unordered List (القوائم النقطية ) وتتمثل بالوسم <ul>

ويستخدم الوسم<li> لتمثيل عنصر من عناصر القائمة سواء مرتبة او لا لنرى الأمثلة:


قوائم مرتبة Order List

يستخدم الوسم <ol> للإعلان عن قائمة مرتبة أي مرقمة بترقيم تلقائي. ويستخدم الوسم <li> للأعلان عن عنصر من عناصر القائمة، كما يتضح معنا في المثال التالي:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <h4>Order list to the most popular programming languages </h4>
    <ol>
        <li>Python</li>
        <li>C#</li>
        <li>Swift</li>
    </ol>
</body>
</html>

لتكون نتيجة الكود كالتالي:

The HTML <ol> <li> tags example

قوائم غير رتبة Unordered List

يستخدم الوسم <ul> للأعلان عن قائمة غير مرتبة (القائمة النقطية أو مايسمى بالتعداد النقطي). ويستخدم الوسم <li> للاعلان عن عنصر من عناصر القائمة، كما يتضح معنا في المثال التالي:

<!DOCTYPE html>
<html>
<head>
    <title>The text tags</title>
</head>
<body>
    <h4>Unorder list to the most popular programming languages </h4>
     <ul>
         <li>Python</li>
         <li>C#</li>
         <li>Swift</li>
     </ul>
    </ol>
</body>
</html>

لتكون نتيجة الكود كالتالي:

The HTML <ul> <li> tags example

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


إرسال تعليق

فضلاً اترك تعليق

أحدث أقدم

نموذج الاتصال