تعلّم أساسيات HTML للمبتدئين في 15 دقيقة

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

ما هي لغة HTML؟

اختصار HTML يعني HyperText Markup Language، أي لغة ترميز النص التشعبي. وظيفتها الأساسية هي تنظيم محتوى الصفحة وتحديد بنيته، مثل العناوين، الفقرات، الصور، الروابط، القوائم، والنماذج.

بمعنى آخر، HTML لا تهتم بالشكل الجمالي النهائي بقدر ما تهتم بوصف مكوّنات الصفحة وماهية كل جزء فيها.

ما هي عناصر HTML؟

تتكون صفحة HTML من عناصر Elements. العنصر غالباً يبدأ بوسم افتتاحي، ثم محتوى، ثم وسم إغلاق.

مثلاً، عند استخدام عنصر فقرة مثل <p>، فإن المتصفح يفهم أن النص الموجود بداخله يمثل فقرة.

بنية العنصر الأساسية

• وسم افتتاحي Opening Tag.
• محتوى Content.
• وسم إغلاق Closing Tag.

لكن ليست كل العناصر تحتوي على بداية ونهاية. هناك عناصر تُعرف باسم العناصر الفارغة Empty Elements، وهي عناصر لا تحتوي على محتوى داخلي.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

في المثال السابق، العنصر <img> لا يحتوي على نص داخلي، بل يُستخدم لإدراج صورة داخل الصفحة.

كيفية تداخل عناصر HTML

يمكن وضع عنصر داخل عنصر آخر، وتُعرف هذه العملية باسم Nesting. هذا التداخل يساعدك على تنظيم الصفحة بشكل منطقي وواضح.

<div class="my-list">
  <h4>My list:</h4>
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
  </ul>
</div>

في هذا المثال، يحتوي العنصر <div> على عنوان فرعي <h4> وقائمة غير مرتبة <ul>، وداخل القائمة توجد عناصر <li>.

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

ما هي الخصائص Attributes في HTML؟

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

<img src="https://images.unsplash.com/photo" width="50">

في هذا المثال:

• src يحدد مسار الصورة.
• width يحدد عرض الصورة.

أهم قواعد الخصائص

• تُكتب الخصائص داخل وسم الافتتاح.
• يمكن للعنصر أن يحتوي على أكثر من خاصية.
• غالباً تأتي بصيغة name="value".

الخصائص المنطقية Boolean Attributes

بعض الخصائص لا تحتاج إلى قيمة، ويكفي وجودها فقط لتفعيل السلوك المطلوب.

<button onclick="alert('Submit')" disabled>Button</button>

الخاصية disabled هنا تعني أن الزر معطل، ووجودها وحده يكفي لذلك.

أشهر عناصر HTML التي ستستخدمها باستمرار

رغم أن HTML تحتوي على أكثر من 100 عنصر، فإن أغلب الصفحات العملية تعتمد على مجموعة محدودة ومتكررة. ويمكن تقسيمها إلى فئات رئيسية:

عناصر التقسيم والتنظيم

<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

تُستخدم هذه العناصر لتقسيم الصفحة إلى أجزاء منطقية، مثل الترويسة، المحتوى الرئيسي، التذييل، أو قسم التنقل.

عناصر النصوص والمحتوى

<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

هذه العناصر مهمة جداً لتنظيم المحتوى، كما أنها تعزز الوصولية Accessibility وتساعد محركات البحث على فهم الصفحة.

عناصر النماذج

<form>, <input>, <button>, <label>, <textarea>

تُستخدم لإنشاء نماذج إدخال البيانات، مثل التسجيل، البحث، أو الاشتراك في النشرات البريدية.

الصور والروابط

<img>, <a>

العنصر <img> لإدراج الصور، والعنصر <a> لإنشاء الروابط التشعبية.

عناصر إضافية شائعة

<br>, <hr>

تُستخدم لإضافة فاصل سطر أو خط أفقي داخل الصفحة.

الفرق بين العناصر الكتلية Block والعناصر السطرية Inline

افتراضياً، تنقسم عناصر HTML إلى نوعين:

• عناصر كتلية Block-level: تبدأ في سطر جديد وتمتد بعرض المساحة المتاحة.
• عناصر سطرية Inline: تبقى داخل السطر نفسه وتشغل فقط المساحة اللازمة.

من أشهر الأمثلة:

• <div> عنصر كتلي.
• <span> عنصر سطري.

ومن العناصر السطرية الشائعة أيضاً: <input>، <button>، <label>، <textarea>، <img>، <a>، <br>.

كيفية كتابة التعليقات في HTML

التعليقات تساعدك على توثيق الكود أو تنظيمه، وهي لا تظهر للمستخدم داخل المتصفح.

<p>This is a paragraph.</p>
<!-- <p>I am not showing.</p> -->

يتم تغليف التعليق بين <!-- و -->.

كيفية استخدام الكيانات HTML Entities

أحياناً تريد عرض وسم على الشاشة كنص عادي، لكن المتصفح يفسره كتعليمة HTML. هنا نستخدم الكيانات الخاصة.

<p>the <p> tag defines a paragraph.</p>
<p>the &lt;p&gt; tag defines a paragraph.</p>

في السطر الثاني، استخدمنا < و> لعرض الأقواس الزاويّة بدلاً من تفسيرها كوسوم.

كيفية عرض الرموز التعبيرية في HTML

يمكنك عرض الرموز التعبيرية بسهولة داخل الصفحة، تماماً كما تكتب أي نص عادي.

<p>😀 Grinning Face</p>
<p>🎂 Birthday</p>

أخطاء شائعة يقع فيها المبتدئون عند تعلم HTML

1. عدم الالتزام بحالة موحدة لكتابة الوسوم

أسماء الوسوم غير حساسة لحالة الأحرف، لكن الأفضل عملياً هو كتابة كل شيء بحروف صغيرة مثل <button> بدلاً من <ButTon>.

2. نسيان وسم الإغلاق

من أكثر الأخطاء شيوعاً أن تكتب وسم الفتح وتنسى وسم الإغلاق. من الجيد أن تكتب الوسمين معاً مباشرة ثم تملأ المحتوى بينهما.

3. التداخل الخاطئ بين العناصر

هذا مثال غير صحيح:

<div>Div 1 <span>Span 2</div></span>

يجب أن تُغلق العناصر بالترتيب الصحيح نفسه الذي فُتحت به.

4. الخلط بين علامات الاقتباس المفردة والمزدوجة

من الأفضل الالتزام بعلامات الاقتباس المزدوجة داخل الخصائص لتجنب الأخطاء.

<img src="https://images.unsplash.com/">

كيفية إنشاء مستند HTML صحيح

لبناء صفحة ويب، أنشئ ملفاً باسم index.html داخل محرر مثل Visual Studio Code. ثم استخدم البنية الأساسية التالية:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

ماذا تعني هذه الأجزاء؟

• <!DOCTYPE html>: يعرّف نوع المستند ويضمن عمل الصفحة وفق معايير HTML5.
• <html lang="en">: العنصر الجذر الذي يحتوي كل أجزاء الصفحة، وتحدد الخاصية lang لغة المحتوى.
• <head>: يحتوي على البيانات التعريفية التي لا تظهر مباشرة للمستخدم.
• <meta charset="UTF-8">: يحدد ترميز الأحرف.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: يساعد على جعل الصفحة مناسبة للأجهزة المحمولة.
• <title>: عنوان الصفحة الذي يظهر في تبويب المتصفح.
• <body>: يحتوي على كل المحتوى المرئي.

تطبيق عملي: بناء صفحة وصفة فطائر باستخدام HTML

بعد فهم الأساسيات، حان وقت التطبيق. سننشئ صفحة بسيطة لوصفة فطائر تتضمن ترويسة، محتوى رئيسياً، وتذييلاً.

1. إنشاء الترويسة Header

سنضع شعاراً بسيطاً وقائمة تنقل تحتوي على روابط إلى أقسام الصفحة.

<header>
  <div>ALL RECIPE</div>
  <nav>
    <ul>
      <li><a href="#ingredients">Ingredients</a></li>
      <li><a href="#steps">Steps</a></li>
      <li><a href="#subscribe">Subscribe</a></li>
    </ul>
  </nav>
</header>

2. إنشاء المحتوى الرئيسي Main

في القسم الرئيسي سنعرض عنوان الوصفة وصورتها والمكونات والخطوات.

<main>
  <h1>Good Old Fashioned Pancakes</h1>
  <img src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502" alt="pancake" width="250" />
</main>

إضافة قسم المكونات

<h2 id="ingredients">Ingredients</h2>
<ol>
  <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
  <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
  <li><input type="checkbox" /> 1 teaspoon salt</li>
  <li><input type="checkbox" /> 1 tablespoon white sugar</li>
  <li><input type="checkbox" /> 1 ¼ cups milk</li>
  <li><input type="checkbox" /> 1 egg</li>
</ol>

إضافة قسم الخطوات

<h2 id="steps">Steps</h2>
<h4>Step 1</h4>
<p>In a large bowl, sift together the flour, baking powder, salt and sugar. Make a well in the center and pour in the milk, egg and melted butter; mix until smooth.</p>
<h4>Step 2</h4>
<p>Heat a lightly oiled griddle or frying pan over medium-high heat. Pour or scoop the batter onto the griddle, using approximately 1/4 cup for each pancake. Brown on both sides and serve hot.</p>

3. إنشاء التذييل Footer

في هذا القسم سنضيف نموذج اشتراك بسيطاً ونص حقوق النشر.

<footer>
  <h6 id="subscribe">Subscribe</h6>
  <form onsubmit="alert('Subscribed')">
    <input type="text" placeholder="Enter Email Address" />
    <button>Submit</button>
  </form>
  <br />
  <div>&copy; dakota kelly at Allrecipe.com</div>
</footer>

الكود الكامل للصفحة

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pancake Recipe</title>
</head>
<body>
  <header>
    <div>ALL RECIPE</div>
    <nav>
      <ul>
        <li><a href="#ingredients">Ingredients</a></li>
        <li><a href="#steps">Steps</a></li>
        <li><a href="#subscribe">Subscribe</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Good Old Fashioned Pancakes</h1>
    <img src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" alt="pancake" width="250" />

    <h2 id="ingredients">Ingredients</h2>
    <ol>
      <li><input type="checkbox" /> 1 ½ cups all-purpose flour</li>
      <li><input type="checkbox" /> 3 ½ teaspoons baking powder</li>
      <li><input type="checkbox" /> 1 teaspoon salt</li>
      <li><input type="checkbox" /> 1 tablespoon white sugar</li>
      <li><input type="checkbox" /> 1 ¼ cups milk</li>
      <li><input type="checkbox" /> 1 egg</li>
    </ol>

    <h2 id="steps">Steps</h2>
    <h4>Step 1</h4>
    <p>In a large bowl, sift together the flour, baking powder, salt and sugar. Make a well in the center and pour in the milk, egg and melted butter; mix until smooth.</p>
    <h4>Step 2</h4>
    <p>Heat a lightly oiled griddle or frying pan over medium-high heat. Pour or scoop the batter onto the griddle, using approximately 1/4 cup for each pancake. Brown on both sides and serve hot.</p>
  </main>

  <hr />

  <footer>
    <h6 id="subscribe">Subscribe</h6>
    <form onsubmit="alert('Subscribed')">
      <input type="text" placeholder="Enter Email Address" />
      <button>Submit</button>
    </form>
    <br />
    <div>&copy; dakota kelly at Allrecipe.com</div>
  </footer>
</body>
</html>

لماذا تعلّم HTML مهم لأي مبتدئ في تطوير الويب؟

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

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

الخلاصة التقنية

تُعد HTML نقطة البداية المنطقية لكل من يريد دخول عالم تطوير الويب. وعلى الرغم من بساطتها، فإن إتقان أساسياتها مثل العناصر، الخصائص، التداخل، وبنية المستند، يصنع فرقاً كبيراً في جودة الصفحات وقابليتها للفهم من قبل المتصفحات ومحركات البحث. وإذا كنت جاداً في بناء مواقع متكاملة، فابدأ بإتقان HTML جيداً قبل الانتقال إلى CSS وJavaScript.