برمجة

أساسيات صياغة HTML

العناصر والوسوم والسمات والعناصر الفارغة وdoctype والتداخل الصحيح.

كل الدروس · دروس HTML: تعلّم من الصفر

العنصر والوسم والسمة

تعلّم HTML أجزاء الصفحة بالوسوم. يتكون العنصر من وسم فتح ومحتوى ووسم إغلاق: <p>مرحبًا</p>. ويخبر الوسم المتصفح أن «هذا النص فقرة».

تعطي السمة العنصر معلومات إضافية وتُكتب في وسم الفتح بالشكل name="value". وبعض العناصر فارغة بلا وسم إغلاق: <img> و<br> و<hr> و<input>.

<p class="note" lang="en">Hello, <strong>world</strong>!</p>
<img src="logo.png" alt="Company logo">
<a href="https://example.com" target="_blank">Open</a>

هيكل الصفحة

لكل مستند HTML الهيكل نفسه: doctype وhtml وhead وbody. يحوي head معلومات عن الصفحة (العنوان والترميز) ويحوي body كل ما يراه الزائر.

<!DOCTYPE html>
<html lang="az">
  <head>
    <meta charset="utf-8">
    <title>İlk səhifəm</title>
  </head>
  <body>
    <h1>Salam, dünya!</h1>
    <p>Bu, mənim ilk səhifəmdir.</p>
  </body>
</html>

قواعد الكتابة

  1. عشّش الوسوم بشكل صحيح: <p><em>…</em></p> وليس <p><em>…</p></em>.
  2. ضع قيم السمات بين علامات اقتباس.
  3. اكتب أسماء الوسوم بأحرف صغيرة.
  4. اكتب < و& في النص هكذا &lt; و&amp;.

يُكتب التعليق بين <!-- ... --> ولا يظهر. يختزل المتصفح المسافات وفواصل الأسطر إلى مسافة واحدة، لذا استخدم فقرات منفصلة بدل تكديس <br>.

المؤلف: Nibras Code