دليل شامل للمبتدئين في HTML

التاريخ: 2025-03-19
التصنيف: HTML, تعلم, برمجة

مقدمة في HTML

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

HTML Logo

ما هي HTML؟

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

أساسيات HTML

يتكون أي مستند HTML من مجموعة من العناصر (Tags) التي تُحدد مكونات الصفحة. فيما يلي الهيكل الأساسي لملف HTML:

<!DOCTYPE html>
<html lang="ar">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مقدمة في HTML</title>
</head>
<body>
    <h1>مرحبًا بك في HTML</h1>
    <p>هذا مثال على صفحة ويب مكتوبة بـ HTML.</p>
</body>
</html>

مكونات HTML الأساسية :

  1. <!DOCTYPE html> : يحدد أن الصفحة تستخدم HTML5.
  2. <html> : العنصر الجذري الذي يحتوي على جميع العناصر الأخرى.
  3. <head> : يحتوي على بيانات تعريفية مثل العنوان وترميز الأحرف.
  4. <body> : يحتوي على محتوى الصفحة الفعلي مثل النصوص والصور.

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

  • العناوين (Headings) تُستخدم العناوين لتحديد أقسام الصفحة. هناك 6 مستويات من العناوين :
<h1>عنوان رئيسي</h1>

<h2>عنوان فرعي</h2>

<h3>عنوان أصغر</h3>
  1. الفقرات (Paragraphs) تُستخدم الفقرات لكتابة النصوص :
<p>هذه فقرة تحتوي على بعض النصوص.</p>
  1. الروابط (Links) لإنشاء رابط إلى موقع آخر :
<a href="https://example.com">اضغط هنا</a>
  1. الصور (Images) لإضافة صورة إلى الصفحة :
<img src="image.jpg" alt="وصف للصورة">
  1. القوائم (Lists) هناك نوعان من القوائم :
  • القائمة الغير مرتبة :
<ul>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
</ul>
  • القائمة المرتبة :
<ol>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
</ol>
  1. الجداول (Tables) استخدام الجداول لتنظيم البيانات :
<table>
<tr>
    <th>الاسم</th>
    <th>العمر</th>
    </tr>
    <tr>
    <td>أحمد</td>
    <td>25</td>
</tr>
</table>

أهمية التعليقات في HTML

يتم استخدام التعليقات لشرح الأكواد وتسهيل قراءتها :

<!-- هذا تعليق ولن يظهر في المتصفح -->

الخلاصة

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

هل أنت مستعد لبدء رحلتك في تطوير الويب؟ 🚀