الوسوم هي اساس لغة HTML . اذا حفظتها سيسهل عليك اتقان اللغة.

أسهل طريقة لحفظ الوسوم وتذكرها هي كثرة بناء صفحات بلغة HTML ، مارس مارس ثم مارس .. لا تحفظ فقط. صدقني ستجد صعوبة في اول يومين ثم يصبح الوضع جدا سهل وتتذكر وسوم اللغة .

في درسنا هذا ، سنتعرف على وسوم جميعها تكتب داخل وسم body.

سنتعرف اولا على وسم العناوين مثل h1: كيف نكتب عنوان رئيسي أو عنوان ثانوي او عنوان فرعي داخل الصفحة؟ لاحظ هنا عنوان داخل الصفحة وليش شريط العنوان الذي يظهر بالمتصفح الذي نضعه في وسم title.

ثم سنتعرف على وسم الفقرات p: كيف تكتب فقرة أو قطعة تظهر للمستخدم؟ وكيف تقفز سطر أو تكسر سطر داخل القطعة ؟ أي عندك قطعة تحتوي على 4 جمل . الجملة الاولى تريدها بالسطر الاول ومن ثم باقي الجمل بنفس السطر.

بعد ذلك نتعرف على وسم الروابط . كيف تضع رابطا داخل الصفحة؟ كيف تجعل جملة ( انقر هنا) رابطا عندما يضع المستخدم الفأرة عليه يوضح له انه رابط وعند الضغط ينقله الى صفحة اخرى؟

ثم نتعرف على وسم الصورة img : كيف نضع صورة داخل صفحة الانترنت؟

واخيرا سنتعلم طريقة صنع قائمة list : وهناك نوعين من القوائم وهما القوائم الغير مرقمة unordered list و القوائم المرقمة ordered list.

وسم العنوان مثل h1 يحتوي على (وسم فتح ) و (وسم اغلاق)

وسم الفتح مثل <h1>

وسم الاغلاق مثل <h1/>

بينما اذا كتبت h2 سيفهم المتصفح ان هذا عنوان ثانوي وكذا .

انظر الى هذا الكود الذي كتبناه داخل محرر اكواد منصة ابرمج ثم شغلنا الكود بتظهر الصفحة والنتيجة على يمين الشاشة:

<p>هذه فقرة كاملة. 
المتصفح يضيف مسافة فوقها وتحتها تلقائيًا.</p>

<p>
  هذه فقرة أخرى<br>
  فيها كسر سطر<br>
  وكمان سطر ثالث
</p>

في الكود اعلاه استخدمين وسم p مرتين. في المرة الاولى جميع النص بين وسم الفتح ووسم الاغلاق ل p ظهر في سطر واحد.

بينما في المرة الثانيه هناك ثلاثة اسطر وذلك لاننا استخدمنا وسم القفز او وسم كسر السطر br.

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

الروابط جدا مهمة في المواقع الالكترونية فاذا كان عندك موقع الكتروني يحتوي على الصفحات التالية: الصفحة الرئيسية - اتصل بنا - تسجيل دخلو .. الخ .. فيجب عليك انشاء روباط داخل هذه الصفحات لكي تتنقل بين صفحات الموقع.

اولا يجب عليك ان تعلم ان وسم الرابط a له وسم فتح <a> و وسم اغلاق <a/> كما ذكرنا سابقا.

ومابين الوسمين تكتب النص الذي اذا شغط عليه المستخدم ينقله الى صفحة اخرى مثل (انقر هنا).

لكن في وسم الفتح نستخدم ونكتب سمة أو خاصية اسمها href وبعدها علامة = ثم علامتي تنصيص "" وبداخل علامتي التنصيص نكتب رابط الصفحة الذي نريد الانتقال اليه. مثال على ذلك :

<a/> انقر هنا للذهاب الى موقع قوقل <"a href="www.google.com >

اذا اردت ادراج صورة في موقعك لكي تظهر لزوار موقعك يجب عليك استخدام وسم الصورة img.

وسم الصورة هو وسم بدون اغلاق. فقط هذا وسمه <img>

لكن بداخل الوسم هناك عدة خصائص وسمات. أهم هذه السمات او الخصائص هي سمة المصدر src اي أين موجوده هذه الصورة؟

لذلك نستخدم هذه الخاصية src ثم علامة = ثم علامتي تنصيص "" ومابين علامتي التنصيص نكتب موقع هذه الصورة أي عنوان الصورة (رابط الصورة).

ايضا هناك خصائص اخرى نستطع استخدامها مثل خاصية alt والفائدة منها اذا كانت هذه الصورة غير موجوده بالانترنت فيعرض للمستخدم نص يوضح ان هنا صورة مثلا صورة منزل. وهذا النص لن يظهر اذا ظهرت الصورة ، لانه يظهر فقط عندما توجد مشكلة حالت دون ظهور الصورة بالموقع.

أيضا من ضمن الخصائص والسمات التي يمكن استعمالها داخل وسم الصورة ، ارتفاع وعرض الصورة height و width . وطريقة استخدامها ان تكتب width ثم علامة = ثم علامتي تنصيص ومابين علامتي التنصيص تكتب عرض الصورة بالبكسل مثلا (400 بكسل) والارتفاع كذلك تحدد القيمة ايضا. لكن دعونا حاليا لا نشغل بالنا بخاصيتي العرض والارتفاع لان يمكن الاستغناء عنهما في دورة CSS وهي اللغة التي تنسق صفحات الانترنت من عرض وارتفاع والوان ..الخ.

الكود التالي مثال على استخدام وسم الصورة ، حيث اضفنا صورتين:

<!-- صورة محلية من جهازك -->
<img src="images/photo.jpg" alt="صورة شخصية" width="300">

<!-- صورة من الإنترنت -->
<img src="https://picsum.photos/600/400" alt="صورة عشوائية جميلة">

<!-- نصيحة ذهبية: دائمًا ضع نص بديل alt -->

اتوقع جميع المواقع الالكترونية تستخدم القوائم ، حيث لابد من استخدامها سواء بترتيب قائمة التنقل بين صفحات الموقع او بسرد نقاط او غيرها .

القائمة تعني list بالانجليزية واول حرف من الكلمة هو l واول حرفين من الكلمة هما li.

هناك نوعين من القوائم : القوائم المرقمة ordered list اول حرف من الكلمتين ol والقوائم الغير مرقمة unordered list واول حرفين من الكلمتين ul.

لذلك اذا اردت كتابة قائمة مرقمة تستخدم وسم ol فتح <ol> و وسم اغلاق <ol/> ومابين الوسمين تستخدم وسم جديد لاضافة كل عنصر بالقائمة ، هذا الوسم الجديد هو li له ايضا وسم فتح <li> و وسم اغلاق <li/>

واذا اردت كتابة قائمة غير مرقمة تستخدم وسم ul فتح <ul> و وسم اغلاق <ou/> ومابين الوسمين تستخدم وسم جديد لاضافة كل عنصر بالقائمة ، هذا الوسم الجديد هو li له ايضا وسم فتح <li> و وسم اغلاق <li/>

انظر الى الاكواد ادناه وصورة الصفحة بعد حفظها :

قائمة غير مرقمة (نقاط)

<ul>
  <li/>تفاح<li>
  <li/>موز<li>
  <li/>برتقال<li>
<ul/>

قائمة مرقمة

<ol>
  <li/>استيقظ<li>
  <li/>صلِّ الفجر<li>
  <li/>ابدأ يومك<li>
<ol/>

h1 – p – a – img – ul – ol

من حفظ هذه الوسوم = يستطيع بناء أي صفحة بسيطة في العالم!