تعلم HTML مع الأمثلة التفاعلية

تعلم HTML بشكل تفاعلى

اترك تعليقاً / بواسطة / html, تصميم ويب

HTML هى لغة ترميز وتنسيق المحتوى على صفحات الويب. يتم استخدام HTML لإنشاء صفحات الويب وتحديد الهيكل والتنسيق والعناصر على الصفحة.

فى هذا المقال سنقوم معًا بإستعراض عناصر HTML وأمثلة عليها ويمكنك التجريب بنفسك من خلال المحرر المدمج فى الصفحة.

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

الهيكل العام لصفحة HTML

يتكون الهيكل العام لاي صفحة HTML من عدة عناصر، وهي:

  1. عنصر <html>: هذا العنصر هو العنصر الرئيسي لصفحة HTML ويحتوي بداخله على كل العناصر الأخرى في الصفحة.
  2. عنصر <head>: يحتوي هذا العنصر على المعلومات التي لا تظهر في الصفحة نفسها بشكل مباشر، مثل العنوان والوصف وكذلك الروابط التي تستدعى ملفات CSS و JavaScript.
  3. عنصر <body>: يحتوي هذا العنصر على كل شيء يظهر في الصفحة، مثل النص والصور والروابط وغيرها.

لذلك، يبدأ هيكل الصفحة بالعنصر <html> ويتضمن عنصر <head> وعنصر <body>، كما يلي:

<!DOCTYPE html>
<html>
<head>
  <title>عنوان الصفحة</title>
  <meta charset="utf-8">
  <meta name="description" content="وصف الصفحة">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>عنوان رئيسي</h1>
  <p>هذه هي فقرة.</p>
  <img src="https://motwr.com/wp-content/uploads/2023/03/smile-e1677910568578.png" alt="وصف الصورة">
</body>
</html>

يجب أن يبدأ أي مستند HTML بعنصر <!DOCTYPE html> لإعلان نوع الصفحة. كما يمكن إضافة عناصر أخرى إلى الرأس Head والجسم Body حسب الحاجة، مثل النماذج والجداول والعناصر الأخرى التي تحتوي على المحتوى والتى سنتعرض إليها فى هذا المقال.

العناوين والفقرات

يتم استخدام العناوين headings في صفحة HTML لتحديد أهمية المحتوى على الصفحة، وترقيم العناوين يبدأ من 1 إلى 6 حسب ترتيبها، حيث يكون العنوان 1 (h1) هو العنوان الرئيسي للصفحة ويتبعه العنوان 2 (h2) وهكذا.

يتم استخدام العناوين headings في الصفحة باستخدام العناصر التالية:

  • <h1>: للعنوان الرئيسي
  • <h2>: للعنوان الثانى
  • <h3>: للعنوان الثالث
  • <h4>: للعنوان الرابع
  • <h5>: للعنوان الخامس
  • <h6>: للعنوان السادس

كما تستخدم الفقرات داخل وسم <p>.

مثال على إستخدام العناوين فى HTML

<!DOCTYPE html>
<html>
<head>
  <title>عنوان الصفحة</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>عنوان رئيسي</h1>
  <p>هذه هي فقرة تحت عنوان رئيسي.</p>
  <h2>عنوان فرعي</h2>
  <p>هذه هي فقرة تحت العنوان الفرعي.</p>
  <h3>عنوان ثانوي</h3>
  <p>هذه هي فقرة تحت العنوان الثانوي.</p>
</body>
</html>

لاحظ التالى
إستخدام العناوين headings بشكل صحيح يساعد على تحسين تجربة المستخدم ويساعد في تحسين تصنيف المحتوى في محركات البحث SEO.

الروابط Links

  1. تستخدم الروابط لربط صفحة ويب بأخرى. يمكن استخدام العنصر <a> مع الخاصية href لإنشاء رابط، مثال:
<a href="https://www.motwr.com">انقر هنا لزيارة موقع العينة</a>

ويمكن إنشاء رابط لعنوان بريد إلكتروني كالتالي:

<a href="mailto:[email protected]">النص الذي يتم عرضه كرابط</a>

يمكن أيضًا إضافة خاصية target إلى عنصر <a> لتحديد طريقة فتح الرابط، مثل “_blank” لفتح الرابط في نافذة جديدة، و “_self” لفتح الرابط في النافذة الحالية (الإفتراضى اذا لم تحدد target).
على سبيل المثال، يمكن إنشاء رابط لصفحة الويب الأخرى وفتحه في نافذة جديدة كالتالي:

<a href="https://example.com" target="_blank">النص الذي يتم عرضه كرابط</a>

الصور

يتم تعريف عنصر الصورة في HTML باستخدام العنصر <img>، ويتم استخدام الخاصية src لتحديد موقع الصورة على الإنترنت أو مسارها على الخادم او الجهاز الذي يستعرض الصفحة.

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

<img src="https://motwr.com/wp-content/uploads/2023/03/smile-e1677910568578.png" alt="وصف الصورة">

في هذا المثال، يوجد ملف صورة يسمى “smile-e1677910568578.png” على المسار المكتوب فى الرابط على موقعنا. ويتم إضافة وصف الصورة باستخدام الخاصية alt، والتي تسمح لأجهزة القراءة الآلية بقراءة وصف الصورة للمستخدمين المكفوفين الذين لا يستطيعون رؤية الصور, كما تساعد محركات البحث على فهم ماتحتويه الصورة.

يمكن أيضًا تغيير حجم الصورة باستخدام الخاصيتين width و height:

<img src="https://motwr.com/wp-content/uploads/2023/03/smile-e1677910568578.png" alt="وصف الصورة" width="32" heigh="32">

يمكن استخدام الصور كرابط باستخدام عنصر <a> مع العنصر <img> داخله، مثل هذا المثال:

<a href="https://motwr.com"><img src="https://motwr.com/wp-content/uploads/2023/03/smile-e1677910568578.png" alt="وصف الصورة"></a>

في هذا المثال، يتم عرض الصورة داخل عنصر الرابط <a>، وعند النقر على الصورة سيتم فتح الرابط “https://motwr.com”.

القوائم

تستخدم القوائم في HTML لترتيب وتنظيم المحتوى على صفحة الويب. يمكن إنشاء ثلاثة أنواع من القوائم في HTML:

1- القوائم المرتبة Ordered lists:

تُستخدم هذه القوائم لترتيب العناصر بترتيب معين، حيث يتم استخدام العنصر <ol> لإنشاء قائمة مرتبة، ويتم استخدام العنصر <li> لتحديد عنصر في القائمة.

<ol>
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ol>

2- القوائم غير المرتبة Unordered lists:

تُستخدم هذه القوائم لترتيب العناصر دون تحديد ترتيب معين، حيث يتم استخدام العنصر <ul> لإنشاء قائمة غير مرتبة، ويتم استخدام العنصر <li> لتحديد كل عنصر في القائمة.

على سبيل المثال، يمكن إنشاء قائمة غير مرتبة كالتالي:

<ul>
  <li>عنصر 1</li>
  <li>عنصر 2</li>
  <li>عنصر 3</li>
</ul>

3- القوائم المتداخلة Nested lists:

يمكن دمج القوائم المرتبة وغير المرتبة داخل بعضها البعض لإنشاء قوائم متداخلة، حيث يمكن وضع قائمة داخل عنصر في قائمة أخرى.

على سبيل المثال، يمكن إنشاء قائمة متداخلة كالتالي:

<ol>
  <li>عنصر 1</li>
  <li>عنصر 2
    <ul>
      <li>عنصر فرعي 1</li>
      <li>عنصر فرعي 2</li>
    </ul>
  </li>
  <li>عنصر 3</li>
</ol>

النماذج

تستخدم النماذج (Forms) في HTML لجمع البيانات من المستخدم وإرسالها إلى الخادم (Server) للتعامل معها. وتتكون النماذج في HTML من عدة عناصر ومعالم، منها:

1- العنصر <form>: يتم استخدام هذا العنصر لإنشاء نموذج، ويمكن تحديد خاصية action لتحديد الصفحة التي سيتم إرسال البيانات إليها، ويمكن تحديد خاصية method لتحديد طريقة إرسال البيانات (GET أو POST) وسنتعرف على الفرق بينهم لاحقًا.

2- العنصر <input>: يتم استخدام هذا العنصر لإنشاء حقل (Field) لإدخال البيانات فيها عن طريق المستخدم، ويمكن تحديد خاصية type لتحديد نوع الحقل (مثل الحقل النصي أو الحقل الرقمي أو حقل البريد الإلكتروني، حقل كلمة المرور و إلخ).

3- العنصر <textarea>: يتم استخدام هذا العنصر لإنشاء حقل نصي كبير لإدخال البيانات من المستخدم.

4- العنصر <select> و <option>: يتم استخدام هذه العناصر لإنشاء حقل قائمة اختيارية، حيث يتم استخدام <select> لإنشاء القائمة و <option> لإضافة الخيارات داخل القائمة.

5- العنصر <button>: يتم استخدام هذا العنصر لإنشاء زر (Button) يمكن للمستخدم استخدامه لإرسال النموذج عن طريق إستخدام الخاصية type=”submit” كما يمكن إستخدام type=”reset” لإعادة إداخل البيانات.

على سبيل المثال، يمكن إنشاء نموذج يحتوي على حقل نصي وحقل قائمة اختيارية وزر لإرسال النموذج كالتالي:

<form action="example.php" method="post">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name">
  
  <label for="gender">الجنس:</label>
  <select id="gender" name="gender">
    <option value="male">ذكر</option>
    <option value="female">أنثى</option>
  </select>
  <button type="reset">الغاء</button>
  <button type="submit">إرسال</button>
</form>

إستخدمنا فى المثال السابق أيضًا عنصر Label وهو عنصر يستخدم لإنشاء تسمية لعنصر آخر مثل input أو textarea أو select أو غيرها من العناصر التي يمكن إدخال بيانات المستخدم فيها. يعمل العنصر label عندما يتم النقر عليه كأشار للمتصفح بالتركيز على العنصر المتعلق به.

الجداول

الجداول في HTML هي عناصر تستخدم لتنظيم البيانات في صفوف وأعمدة. يمكن استخدام الجداول لعرض بيانات مثل الجداول الزمنية، جداول البيانات، الخ.

لإنشاء جدول في HTML، يجب استخدام العنصر table. ويمكن إضافة صفوف جديدة باستخدام العنصر tr (يمثل صفًا)، والأعمدة الجديدة باستخدام العنصر td (يمثل خلية) أو th (يمثل عنوان الخلية).

هذا مثال على كيفية إنشاء جدول بسيط في HTML:

<table>
  <tr>
    <th>المنتج</th>
    <th>السعر</th>
    <th>الكمية</th>
  </tr>
  <tr>
    <td>قميص</td>
    <td>$20</td>
    <td>2</td>
  </tr>
  <tr>
    <td>بنطال</td>
    <td>$30</td>
    <td>1</td>
  </tr>
  <tr>
    <td>حذاء</td>
    <td>$50</td>
    <td>1</td>
  </tr>
</table>

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

اشترك فى القائمة البريدية

عن الكاتب

مؤسس مطور

شارك على وسائل التواصل

مقالات متعلقة

اترك تعليقاً

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

إبدأ بالكتابة ثم اضغط زر enter للبحث