ما هو HTML

لغة تأشير النص الفائق html هي لغة من لغات ترميز النصوص Markup language ،   هي عبارة عن جُملة من التلميحات و الأوامر و الوسوم حول نص معين ، و التي تحدد كيفيّة تنظيمه.

مميزات لغة html لغة تأشير النص الفائق

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

لغة تأشير النص الفائق أساسية بها الكثير من المميزات بمساعدة بعض اللغات الاخرى والتي يكتمل بها الموقع الإلكتروني مثل لغة CSS التي تُستخدم في تغيير ألوان الموقع والتعديل على تنسيقه.

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

الوسوم الأكثر أهمية في لغة الـ HTML لغة تأشير النص الفائق  هي الوسوم التي تحدد العناوين و الفقرات و فواصل الأسطر.

العناوين

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

<h1>عنوان 1</h1>

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

الفقرات

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

<p>صباح الخير /p>
<p>صباح النور</p>

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

أول السطر

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

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

عرض النص بخط عريض

أي كلمة أو جملة في النص تريد عرضها بخط عريض ( Bold ) يمكنك وضعها بين

<b> </b>

أو بين

<strong> </strong>

.
بشكل عام إستخدم

<b>

لعرض الكلام بخط عريض و استخدم

<strong>

في حال كان الكلام مهم.

المثال التالي قمنا بعرض كلمة في الفقرة بخط عريض باستخدام

<b>

و

<strong>

أيضاً

عرض النص بخط مائل

جملة في النص لغة تأشير النص الفائق   تريد عرضها بخط مائل ( Italic ) يمكنك وضعها بين

<i> </i>

أو بين

<em> </em>

.

الفرق الوحيد بين الإثنين هو أنه في حال كان المستخدم كفيف و يعتمد على قارئ الشاشة ( Screen Reader ) حتى يقرأ له محتوى الصفحة, فإن القارئ سيغير نبرته حين يقرأ النص المائل الموضوع بداخل

<em> </em>

لا أكثر.
استخدم

<i>

عرض نص مائل و استخدم .

<em>

أردت عرض نص مائل و أردت جعل قارئ الشاشة يغيّر نبرته حين يقرأ الكلام المائل.

هنا قمنا بعرض جملة في الفقرة بخط مائل باستخدام

<i><em>

.

عرض نص محذوف

النص لغة تأشير النص الفائق  تريد وضع خط عليها و كأنها محذوفة يمكنك وضعها بين

<del> </del>

أو بين

<s> </s>

.
بشكل عام إستخدم

<del>

للإشارة إلى أن الكلام قد تم حذفه و استخدم .

<s>

عند الإشارة إلى أن الكلام محذوف لأنه لم يعد صحيحاً.

في المثال التالي قمنا بعرض كلام مشطوب في الفقرة باستخدام

<del><s>

.

عرض أسماء أحرف الكيبورد

عند وضع شروحات تخبر فيها المستخدم بأن ينقر على أزرار معينة في الكيبورد ( Keyboard ) يمكنك وضعها بين

<kbd> </kbd>

.
هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع

monospace

حتى يظهره بشكل مختلف عن باقي النص.

إضافة جدول في الصفحة

لعرض جدول في الصفحة نستخدم الوسوم التالية لبنائه بالشكل الذي نريده:

• <table> </table> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل جدول.
• <tr> </tr> تستخدمه لإضافة سطر في الجدول.
• <th> </th>  لإضافة خانة في السطر تمثل عنوان, أي النص الذي تضعه فيها يظهر بخط عريض و في المنتصف.
• <td> </td>  تمثل معلومة عادية, أي النص الذي تضعه فيها يظهر كنصر عادي.

معلومة تقنية

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

بالتأكيد CSS توفر لك إمكانيات هائلة لتصميم الجدول و لكن بما أننا ندرس و نركز على ما توفره لنا لغة HTML فقط, سنتطرق للخصائص التي توفرها لنا هي فقط.ل