مقدمة إلى HTML وأساسياته

HTML for beginners
Share it :

HTML للمبتدئين

1. مقدمة إلى HTML

أ. ما هو HTML؟

HTML (لغة ترميز النصوص التشعبية) هي العمود الفقري للويب. تُستخدم لتنظيم وعرض محتوى المواقع. تخيلها كالهيكل العظمي لصفحة الويب الذي ينظم النصوص والصور والروابط.

ب. إعداد بيئة العمل

لبدء كتابة HTML، يمكنك استخدام أي محرر نصوص مثل Notepad (ويندوز) أو TextEdit (ماك):

  1. افتح محرر النصوص
  2. أنشئ ملف جديد
  3. اكتب هذا الكود:
    <!DOCTYPE html>
    <html>
    <head>
    <title>صفحتي الأولى</title>
    </head>
    <body>
    <h1>مرحبا!</h1>
    <p>هذه صفحة HTML بسيطة</p>
    </body>
    </html>
  4. احفظ الملف باسم “index.html”
  5. شغّله في المتصفح

2. أساسيات HTML

أ. هيكل مستند HTML

كل ملف HTML يحتوي على:
<!DOCTYPE html> – يحدد إصدار HTML
<html> – العنصر الرئيسي
<head> – يحتوي على معلومات الموقع
<title> – عنوان الصفحة
<body> – محتوى الصفحة المرئي

ب. عناصر ووسوم HTML

تكتب الوسوم بين < > مثل:
<p> للفقرات
<a> للروابط

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

استخدم <h1> إلى <h6> للعناوين
<p> للفقرات
<br> لفصل الأسطر

3. تنسيق النصوص

أ. النصوص العريضة والمائلة

للنص العريض:
<strong>نص عريض</strong> أو <b>نص عريض</b>

للنص المائل:
<em>نص مائل</em> أو <i>نص مائل</i>

ب. القوائم

قائمة مرقمة:
<ol>
<li>عنصر 1</li>
<li>عنصر 2</li>
</ol>

قائمة نقطية:
<ul>
<li>عنصر أ</li>
<li>عنصر ب</li>
</ul>

ج. الروابط

رابط خارجي:
<a href=”https://example.com”&gt;زيارة الموقع</a>

رابط داخلي:
<a href=”#القسم1″>انتقل للقسم 1</a>

4. الصور

أ. إضافة الصور

<img src=”صورة.jpg” alt=”وصف الصورة”>

ب. خصائص الصور

  • src: مسار ملف الصورة
  • alt: نص بديل للوصول الشامل

5. النماذج

أ. إنشاء النماذج

مثال نموذج تسجيل دخول:
<form action=”submit.php” method=”POST”>
<label for=”username”>اسم المستخدم:</label>
<input type=”text” id=”username”>
<br>
<input type=”submit” value=”إرسال”>
</form>

ب. أنواع الحقول

تحديد نوع الحقل باستخدام type=”نوع” مثل:
text، password، submit

6. الجداول

أ. بناء الجداول

<table>
<tr>
<th>عنوان 1</th>
<th>عنوان 2</th>
</tr>
<tr>
<td>بيانات 1</td>
<td>بيانات 2</td>
</tr>
</table>

ب. مكونات الجدول

  • <tr>: صف
  • <th>: عنوان العمود
  • <td>: خلية بيانات

8. مشروع: صفحة ويب بسيطة

أنشئ صفحة تحتوي على:

  • عنوان رئيسي <h1>
  • فقرات <p>
  • قائمة <ul>
  • صورة <img>
  • رابط <a>

9. الخاتمة والخطوات التالية

تعلمنا أساسيات HTML بما فيها:

  • هيكل الملف
  • تنسيق النصوص
  • الجداول والنماذج
  • إدارة المحتوى

للتمكّن:

  1. تعلّم CSS للتنسيق
  2. ادرس JavaScript للتفاعلية
  3. استكشف إطارات العمل
Share it :