برمجةكورسات

تعلُّم لغة HTML – الدرس الثاني

دروس بسيطة في لغة الويب HTML

اقرأ في هذا المقال

  • درسُنا الثاني في لغة HTML ، وسوم التنسيق، كيف أجعل موقعي يبدو أجمل؟

وسوم التّنسيق في لغة HTML

في دروس سابقة تعلّمنا كيفية إنشاء موقع بسيط، وعَلِمنا أنّ لغة HTML تعتمد على كتابة الأوامر وقد سميناها ب”الوسوم”، كما تعرّفنا على الفرق بين وسم البداية ووسم الإغلاق، وحفظنا بعض الوسوم التي لابد من استخدامها في كل موقع نكتبه باستخدام لغة HTML ، كما تعلّمنا طريقة حفظ الملف وفتحه باستخدام المتصفح. الدرس الأول هُنا

ولكن كان ينقصنا سابقاً أساليب الترتيب والتنسيق في لغة HTML .. وهذا ماسنتعلمه في هذا الدرس.

كيف أجعل موقعي يبدو أجمل؟؟

الجواب: باستخدام بضعة وسوم بسيطة، وسنضع في ما يلي أهمها:

 – الكتابة على سطر جديد: وذلك باستخدام الوسم </br> ويتضمن بداية وإغلاق لأنه يتعلق
بكلمات معينة من النص (وسم فارغ).

 – رسم خط أفقي: للدالالة على انتهاء الفكرة أو النص، ونستخدم الوسم </hr> وهو أيضاً وسمٌ فارغ.

 – وضع نقاط لبداية الفكرة: هنا لدينا وسمين لهما بداية وإغلاق، الأول <ul> ونغلقه ب <ul/>
للدّلالة على البدء بطرح الأفكار، والثاني<li> وإغلاقه ب <li/> ويضاف لدى كل فكرة على حدى.

دعونا نكتب الوسوم بالترتيب ليتضح الامر:

<ul>

<li> ضع برنامجاً مُنظّماً لحياتك واجعله روتيناً <li>

<li> أضف أفكاراً خلّاقة لبرنامجك باستمرار <li>
</ul>

والآن استعرض النتيجة.

 – ترقيم الأفكار: بنفس طريقة وضع نقاط للأفكار نستخدم الوسوم <ol> و <ol/> للتدليل على بدء كتابة الأفكار المتسلسلة بالإضافة لوسم <li> و </li> لدى كل فكرة.

وبترتيبهم يكون الشكل:

<ol>
<li>ابدأ من حيث انتهى الآخرون </li>
<li> تستسلم للفشل </li>
</ol>

 – النّص المائل: ونستخدم لذلك الوسم التالي <em> النص المائل <em/>
أو نستعمل<i> النص المائل </i>

 – النص العريض: <b> نص عريض <b/>
أو <strong> نص عريض <strong/>

 – رسم خط تحت النص: <u> نص تحته خط <u/>

 – تحديد حجم النص:

<font size=”20″px> Text </font>
أو نختار الأحجام المُختلِفة باستخدام الوسوم من <h1> حتى <h6> مع إغلاقها.

 – تحديد نمط الخط:

<font face=”arial”> Text </font>

 

والوسوم مجتمعة هنا:

لغة HTML
تعليمات تنسيق نص

وتظهر بالنتيجة هكذا:

تعلُّم لغة HTML – الدرس الثاني

 – إضافة فاصل بين الكلمات: (يُشبه استخدام المسطرة “سبيس” في الكيبورد).

ونحتاج إلى هذا الوسم لأن استخدام زر سبيس لن ينفع إلا لفاصل واحد بين الكلمات، أي أنّ استخدامه لعدة مرات بين كلمتين لن يظهر في صفحة الويب إلا كفاصل واحد!

والوسم &npsb; ونكرره حسب الحاجة (نُلاحظ أنه لايحتاج فتح وإغلاق).

 

 

والآن لا تنسَ تجربة الأوامر مباشرةً وإرفاق الأسئلة لنا في التعليقات، ويمكنك العودة للدرس الأول من هُنا

 

 

هل أعجبك المقال؟

شاركونا آراءكم واقتراحاتكم

 

 


 

 

اقرأ أيضاً:

 

 

 

الوسوم

رامة

طالبة في كلية الآداب، مهتمة بالتكنولوجيا ونشرها، كالبرمجة والذكاء الصنعي.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

زر الذهاب إلى الأعلى
إغلاق