HTML Tutorial

عناصر HTML

الخطوات العملية

  • افتح أي محرر نصوص (مثل المفكرة أو Notepad++)
  • اكتب علامة في أعلى المستند لبدء مستند HTML
  • أضف عناصر HTML داخل علامتي <body> و </body>
  • احفظ الملف باسم ذي امتداد html. (مثل index.html)

المفاهيم الأساسية:

عناصر النص:

  • العناوين : <h1> ... <h6>
  • الفقرات : <p>
  • النص الغامق : <b>
  • النص المائل: <i>

الصور:

  • <"اسم الملف"=img src>

الروابط:

  • </a>نص الرابط<"URL عنوان"=a href>

القوائم:

  • القائمة غير مرتب : <ul>
  • القائمة مرتبة : <ol>
  • لكل عنصر في القائمة : <li>

الجداول:

  • الجدول الرئيسي : <table>
  • وصف الجدول :<tr>
  • رأس الجدول : <th>
  • بيانات الجدول :<td>

مثال بسيط على HTML:

<!DOCTYPE html>
<html>
<body>
<h1>مرحبا بالعالم!</h1>
<p>هذا هو أول مستند HTML لي.</p>
<a href="https://www.example.com">زيارة موقع example.com</a>
<ul>
  <li>عنصر قائمة 1</li>
  <li>عنصر قائمة 2</li>
  <li>عنصر قائمة 3</li>
</ul>
</body>
</html>

تحسين إمكانية الوصول:

  • استخدم نصوص بديلة للصور (<"وصف الصورة=img alt">)
  • حدد لغة المستند (<"html lang="ar>)
  • استخدم عناصر الترويس (<header>) والتذييل (<footer>) لتنظيم المحتوى"