وسوم HTML الأكثر شهرة وأهمية ( درس بسيط مع امثلة )


وسوم HTML الأكثر شهرة وأهمية , الوسوم الأكثر أهمية في لغة الـ HTML هي الوسوم التي تحدد العناوين و الفقرات و فواصل الأسطر.
أفضل طريقة لتعلم الـ HTML يكون من خلال الأمثلة … لقد قمنا بوضع أكثر من 100 مثال في هذا المنهج يمكنك نقل تلك الأمثلة إلى جهازك و تعديلها لتشاهد التأثيرات على طريقة عرض الصفحة، لا شك أنها طريقة جيدة للتعلم.

العناوين

يتم تحديد العناوين من خلال الوسوم من <h1> إلى <h6> ، حيث يعد الوسم <h1> هو أكبر مقاس للعنوان بينما نجد أن الوسم <h6> هو أصغر مقاس للعناوين ، كما يتضح من الكود التالي:

<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
<h4>عنوان 4</h4>
<h5>عنوان 5</h5>
<h6>عنوان 6</h6>

و من خلال الوسم <h> نجد أن العناوين في الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد العنوان.

الفقرات

يتم تحديد الفقرات من خلال الوسم <p> ، كما يتضح من خلال الكود التالي:

<p>بسم الله الرحمن الرحيم</p>
<p>الحمد لله رب العالمين</p>

و من خلال الوسم <p> نجد أن الـ HTML تقوم بطريقة آلية بإضافة سطر فارغ قبل و بعد الفقرة.

من أول السطر

يستخدم الوسم <br> في حالة الرغبة في إنهاء السطر الحالي ، و بالبدء من أول السطر و لكن دون بداية فقرة جديدة ،

<p>This <br> is a para<br>graph with line breaks</p>

لاحظ أن:

الوسم <br> لا يحتاج إلى وسم إغلاق <br/>مثل الوسوم الأخرى.

الملاحظات والتعليقات داخل ملفات HTML

يستخدم وسم التعليقات <– –!> لإدارج تعليقات داخل أكواد HTML ، تلك الملاحظات سوف يتم تجاهلها من قبل المتصفح بمعنى أنها لن تظهر أثناء عرض الصفحات.
يمكنك استخدام التعليقات أو الملاحظات لشرح الكود إذا كان هناك من يساعدك في تحرير صفحات الـ HTML ، أو لتذكرك بعمل الكود إذا أردت العودة إليه بعد فترة.

<!--هذا مجرد تعليق أو ملاحظة -->

لاحظ أن:

لا تنسى وضع علامة التعجب في بداية الكود ، كما أنه لا يجب وضعها في نهاية الكود .

لا حظ أن ” معلومات مفيدة “

عندما تقوم بكتابة نص HTML ، فلن تكون متأكداً من الكيفية التي سيتم عرض النص بها في المتصفح.
يجب عليك دائما التأكد من أن النص سوف يتم عرضه من خلال المتصفحات المختلفة بصورة جيدة … بعض المستخدمين لديهم شاشات كبيرة و البعض الأخر لديه شاشات صغيرة كما أن يمكن للمستخدم أن يتحكم في درجة وضوح الشاشة وفقاً لاحتياجاته … سيتم إعادة تنسيق النص في كل مرة يقوم المستخدم فيها بتغيير حجم النافذة … لا تقم مطلقاً بتنسيق النص في المحرر لديك بإضافة أسطر فارغة و مسافات إلى النص.
يقوم الـ HTML باقتطاع المسافات الموجودة في النص … أي عدد للمسافات سوف يعد مسافة واحدة … و كذلك سوف يتم اعتبار السطر الجديد مسافة واحدة.
من العادات السيئة استخدام فقرات فارغة <p> لإدراج أسطر فارغة … استخدم الوسم <br> ( لكن لا تستخدمه لإنشاء قوائم انتظر حتى تتعلم ” القوائم في HTML ” ) قد تكون لاحظت أنه يمكن كتابة الفقرات دون وسم النهاية ” وسم الإقفال ” </p>.
الإصدار القادم من HTML لن يسمح لك بترك وسم الإقفال … يضيف الـ HTML تلقائياً سطراً فارغاً إضافياً قبل و بعد بعض العناصر مثل قبل و بعد الفقرة و العنوان … نحن نستخدم المسطرة الأفقية ( من خلال الوسم <hr> ) لفصل الأقسام في المثال المذكور.

وسوم HTML الأساسية

Tag

Description

<html>

هذا الوسم يحدد أن الملف المستخدم هو ملف HTML

<body>

هذا الوسم يحدد منطقة جسم الملف

<h1> to <h6>

لتحديد مقاس العنوان من 1 إلى 6

<p>

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

<br>

لتحديد بداية سطر جديد

<hr>

لعرض خط أفقي

<!–>

للتعليقات و الملاحظات

معاذ فريد

ودود

مدون وكاتب في موقع تقارب مهتم بتقنيات الويب

ما هو انطباعك حول المقال ؟

مشوش مشوش
0
مشوش
لطيف لطيف
1
لطيف
عبقري عبقري
1
عبقري
فرح فرح
2
فرح
رائع رائع
3
رائع
غاضب غاضب
0
غاضب
محزن محزن
0
محزن
اشتراك
نبّهني عن
0 تعليقات
Inline Feedbacks
View all comments
0
أحب أفكارك ، يرجى التعليقx
()
x