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

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

ما هي HTML؟

HTML اختصار لـ HyperText Markup Language، وهي ليست لغة برمجة بالمعنى الدقيق، بل لغة وصف تخبر المتصفّح بما يحتويه المستند: هذا عنوان، هذه فقرة، هذه صورة.

بنية الصفحة

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8" />
    <title>صفحتي الأولى</title>
  </head>
  <body>
    <h1>أهلًا بك في صفحتي</h1>
    <p>هذه أول صفحة ويب أبنيها بنفسي.</p>
  </body>
</html>

شرح الأجزاء

<!doctype html> يخبر المتصفّح أن هذا مستند HTML حديث.
<html lang="ar" dir="rtl"> جذر الصفحة. lang يحدّد اللغة، وdir="rtl" يجعل الاتجاه من اليمين إلى اليسار.
<head> معلومات عن الصفحة لا تظهر مباشرة (العنوان في التبويب، الترميز).
<body> كل ما يراه الزائر.

الوسوم الأساسية

الوسم	معناه
`<h1>` إلى `<h6>`	عناوين من الأكبر إلى الأصغر
`<p>`	فقرة
`<a href="...">`	رابط
`<img src="..." alt="...">`	صورة
`<ul>` و `<li>`	قائمة نقطية وعناصرها

جرّب بنفسك

احفظ الكود أعلاه في ملف باسم index.html وافتحه بالمتصفّح. ثم أضف:

<h2>مهاراتي</h2>
<ul>
  <li>أتعلّم HTML</li>
  <li>أتعلّم Python</li>
</ul>
<a href="https://tegdar.com">تعلّمت هذا في تقدر</a>

ماذا بعد؟

الصفحة تعمل لكنها بلا تنسيق. في الدرس القادم سنتعرّف على CSS لنمنحها ألوانًا وخطوطًا وتخطيطًا يعمل على الهاتف والحاسوب معًا.