الوسوم الأساسية في HTML التي ستستخدمها يوميًا

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

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

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

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

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

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

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

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

جميع وسوم العناوين (h1 إلى h6) تتكون من وسم فتح ووسم إغلاق.

وبين وسم الفتح ووسم الإغلاق تكتب النص الذي تريده. فعندما يرى المتصفح الكود <h1>عنوان</h1> فإنه يفهم أن هذا النص هو العنوان الرئيسي للصفحة.

أما إذا استخدمت h2 فسيفهم المتصفح أن هذا عنوان لقسم داخل الصفحة، وإذا استخدمت h3 فسيعتبره عنوانًا فرعيًا، وهكذا حتى h6.

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

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

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

في الكود السابق استخدمنا وسم <p> مرتين. في الفقرة الأولى كتبنا النص داخل الوسم، لذلك عرضه المتصفح كفقرة واحدة وأضاف لها مسافة قبلها وبعدها تلقائيًا.

أما في الفقرة الثانية فاستخدمنا وسم <br> مرتين، لذلك انتقل النص إلى ثلاثة أسطر مختلفة، مع بقائه داخل نفس الفقرة.

ستكون النتيجة كما في الصورة التالية:

الروابط (Links) من أهم العناصر في صفحات الويب. فلو كان لديك موقع إلكتروني يحتوي على صفحات مثل: الصفحة الرئيسية، من نحن، اتصل بنا، تسجيل الدخول وغيرها، فستحتاج إلى إنشاء روابط للتنقل بين هذه الصفحات بسهولة.

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

وبين وسم الفتح ووسم الإغلاق نكتب النص الذي سيضغط عليه المستخدم، مثل: "انقر هنا" أو "اضغط هنا".

لكن لكي يعرف المتصفح إلى أي صفحة سينتقل عند الضغط على الرابط، نضيف داخل وسم الفتح خاصية اسمها href. ثم نكتب علامة = وبعدها نضع رابط الصفحة بين علامتي تنصيص.

عند تشغيل هذا الكود سيظهر للمستخدم رابط بعنوان "انقر هنا للذهاب إلى موقع Google". وعند الضغط عليه، سينتقل مباشرة إلى موقع Google.

اذا اردت ادراج صورة في موقعك لكي تظهر لزوار موقعك يجب عليك استخدام وسم الصورة 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/>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي الشخصي</title>
</head>
<body>
    <h1>مرحبًا، أنا [اسمك]</h1>
    <img src="https://picsum.photos/300/300" alt="صورتي الشخصية">

    <h2>نبذة عني</h2>
    <p>أنا طالب/مبرمج/مصمم… أحب البرمجة والتصميم.</p>

    <h2>مهاراتي</h2>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript (قريبًا)</li>
    </ul>

    <h2>تواصلوا معي</h2>
    <p>
        <a href="https://instagram.com/" target="_blank">إنستغرام</a> |
        <a href="https://twitter.com/" target="_blank">تويتر</a>
    </p>
</body>
</html>

الكود أعلاه عند حفظه كملف html وفتحه عن طريق متصفح الانترنت تظهر النتيجة التالية:

h1 – p – a – img – ul – ol

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