تعريف لغة HTML: العناصر والسمات ومثال صفحة عربية

الخلاصة السريعة

تصف HTML بنية محتوى الويب ومعناه باستخدام عناصر ترميز. [5]

• تحدد HTML البنية؛ ويتولى CSS المظهر، ويضيف JavaScript السلوك عند استخدامهما. [5]
• الوسم علامة في النص، والعنصر قد يجمع وسم البداية والمحتوى ووسم النهاية؛ والسمة معلومة إضافية. [1]
• أغلق العنصر الداخلي قبل الخارجي. للعناصر الفارغة مثل meta وسم بداية فقط ولا وسم نهاية. [1][2]
• يفصل head بيانات المستند عن محتوى body. يحدد lang اللغة، بينما يحدد dir اتجاه النص. [6][3][4]
• عنوان title يظهر في التبويب؛ أما h1 فهو عنوان داخل المحتوى، فلا تخلط بين الموضعين. [7][1]

ما وظيفة HTML في الصفحة؟

تستخدم HTML عناصر لتحديد أجزاء المحتوى ومعناها. ليست إضافة الألوان أو تنفيذ تفاعل وظيفتها الأساسية؛ يخدم CSS العرض، ويخدم JavaScript السلوك. وقد تكفي صفحة بسيطة لعرض معلومات دون برنامج تفاعلي. [5]

سننشئ في المثال صفحة لمكتبة افتراضية. السؤال الأول هو: ما عنوانها، وما المعلومات التي ينبغي أن يجدها القارئ؟ اختيار لون الخلفية يأتي لاحقًا؛ ترتيب المحتوى هو ما ندرسه هنا.

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

يجمع العنصر العادي وسم البداية والمحتوى ووسم النهاية. وتضيف السمة معلومة إلى العنصر؛ يحدد id معرّفًا يمكن استخدامه للإشارة إلى موضع في المستند. [1][8]

<h2 id="times">مواعيد المكتبة</h2>

في مثالنا، h2 اسم العنصر، ومواعيد المكتبة محتواه، وid="times" سمة. عبارة «الوسم والعنصر» ليست مجرد اسمين للعلامة نفسها؛ العنصر يشمل تركيبها مع المحتوى. [1]

تداخل صحيح وعناصر فارغة

يبدأ p قبل strong في المثال، وينتهي strong قبل p. لا تتقاطع الحدود. أما العناصر الفارغة مثل meta فلها وسم بداية بلا وسم نهاية. [1][2]

<p>موعد الافتتاح: <strong>التاسعة صباحًا</strong>.</p>

تتبع الحدين في الرسم الداخلي: حد الفقرة يحيط بحد المعلومة المهمة. بهذا تستطيع مراجعة المثال كلمة كلمة، بدل الاعتماد على أن المتصفح عرض شيئًا يبدو مقبولًا.

مثال صفحة عربية كاملة

يحتوي head معلومات المستند، وbody المحتوى المعروض. يحدد lang="ar" العربية، ويحدد dir="rtl" الاتجاه من اليمين إلى اليسار. تحديد اللغة لا يقوم مقام تحديد الاتجاه؛ لكل منهما وظيفة. [6][3][4]

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>مواعيد المكتبة</title>
</head>
<body>
  <h1>مكتبة الحي</h1>
  <p>نرحب بالقراء يوم السبت.</p>
  <h2 id="times">المواعيد</h2>
  <ul><li>من التاسعة صباحًا إلى الواحدة ظهرًا</li></ul>
  <a href="#times">راجع المواعيد</a>
</body>
</html>

الصفحة مؤلفة للتعلم. احفظ العينة في ملف بامتداد .html وافتحه لقراءة النتيجة، ثم غيّر اسم المكتبة أو الموعد. لا تحتاج العينة إلى تحميل مكتبة برمجية؛ وهي لا تتضمن شيفرة تفاعل أو بيانات خاصة.

عنوان التبويب وعنوان المحتوى

يعرض المتصفح title في التبويب. في العينة اخترنا له مواعيد المكتبة، وجعلنا العنوان الظاهر مكتبة الحي. اختلاف النصين مقصود لتوضيح موضعي العرض. [7]

غيّر title إلى «زيارة يوم السبت»، واترك h1 كما هو. ثم أعد فتح العينة ولاحظ الموضع الذي يتغير. هذا اختبار بسيط لتمييز بيانات المستند عن عنوان يقرؤه الزائر داخل الصفحة.