أساسيات HTML : بناء أول صفحة ويب

مقدمة

HTML (HyperText Markup Language) هي لغة ترميز تستخدم لإنشاء صفحات الويب. تُعتبر HTML أساس كل صفحة ويب، حيث تحدد الهيكل العام والمحتوى الأساسي للموقع. يُمكن اعتبار HTML كإطار أو هيكل عظمي لأي موقع ويب.

شنية هو HTML؟

HTML (HyperText Markup Language) هي اللغة اللي نستعملوها لبناء هيكل صفحات الويب. HTML تعتمد على مجموعة من الوسوم (tags) اللي تحدد العناصر المختلفة في الصفحة، كيما العناوين، الفقرات، الصور، والروابط.

أهمية HTML في تطوير الويب

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

الأدوات اللازمة للبدء

محرر نصوص: يُمكن استخدام أي محرر نصوص مثل Notepad، لكن يُفضَّل استخدام محرر متقدم مثل Visual Studio Code.
متصفح ويب: لاختبار الصفحات التي تقوم بإنشائها. يُفضَّل استخدام متصفح حديث مثل Google Chrome أو Brave.

إنشاء أول صفحة HTML

هيكلية ملف HTML الأساسية

لنبدأ بإنشاء ملف HTML بسيط. افتح محرر النصوص واكتب الكود التالي:

<!DOCTYPE html>
<html>
<head>
    <title>أول صفحة HTML</title>
</head>
<body>
    <h1>مرحبا بكم!</h1>
    <p>هذه أول صفحة HTML الخاصة بي.</p>
</body>
</html>

شرح الكود

<!DOCTYPE html>: تُستخدم لتحديد نوع المستند كـ HTML5.
<html>: العنصر الجذري لكل مستند HTML.
<head>: يحتوي على معلومات حول الصفحة مثل العنوان والروابط إلى ملفات CSS.
<title>: يُحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.
<body>: يحتوي على المحتوى الفعلي للصفحة مثل النصوص والصور.

العناصر الأساسية في HTML

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

العناوين تُستخدم لتحديد الأجزاء المهمة في النص. هناك ستة مستويات من العناوين، من <h1> إلى <h6>:

<h1>العنوان الرئيسي</h1>
<h2>العنوان الفرعي</h2>
<h3>العنوان الفرعي</h3>
<h4>العنوان الفرعي</h4>
<h5>العنوان الفرعي</h5>
<h6>العنوان الفرعي</h6>
<p>هذه فقرة نصية</p>

لتنسيق النصوص، يمكن استخدام العناصر التالية:

<strong> و <b> لجعل النص عريضًا (Bold).
<em> و <i> لجعل النص مائلًا (Italic).

مثال:

<p>هذا نص <strong>عريض</strong> و هذا نص <em>مائل</em>.</p>

إضافة الصور

لإضافة صورة إلى صفحتك، استخدم العنصر <img> مع تحديد مسار الصورة والنص البديل:

<img src="رابط الصورة" alt="وصف الصورة">

الروابط والقوائم

الروابط

لإضافة رابط تشعبي، استخدم العنصر <a>:

<a href="https://www.example.com">زيارة الموقع</a>

القوائم

لإنشاء قوائم مرتبة وغير مرتبة:

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

الجداول والنماذج

الجداول

لإنشاء جدول:

<table>
    <tr>
        <th>عنوان 1</th>
        <th>عنوان 2</th>
    </tr>
    <tr>
        <td>خانة 1</td>
        <td>خانة 2</td>
    </tr>
</table>

النماذج

لإنشاء نموذج إدخال بيانات:

<form action="/submit" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="إرسال">
</form>

تنظيم الشيفرة وإضافة التعليقات

إضافة التعليقات

يمكنك إضافة تعليقات في الشيفرة لشرح بعض الأجزاء أو لتذكير نفسك بشيء معين:

<!-- هذه تعليق في HTML -->

أهمية التنظيم

تنظيم الشيفرة يجعلها أسهل للفهم والصيانة. حاول دائمًا استخدام تنسيق موحد ومسافات بادئة (indentation) لجعل الشيفرة نظيفة وقابلة للقراءة.

الموارد الإضافية

مصادر لتعلم HTML

مواقع تعليمية: مثل W3Schools وMDN Web Docs.

خاتمة

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