عرض مصدر HTML

لغة '''HTML''' هي لغة توصيفية لإنشاء صفحات الويب وتطبيقات الويب، وترمز إلى Hypertext Markup Language (أي لغة النص الفائق). تُستخدَم مع لغة [[CSS]] و [[JavaScript]] لإنشاء صفحات ويب تفاعلية.

تستقبل متصفحات الويب مستندات مكتوبة بلغة HTML من خادم الويب أو من نظام الملفات وتعرضها، ووظيفة [https://academy.hsoub.com/programming/html/%D8%AA%D8%B9%D9%84%D9%85-%D9%84%D8%BA%D8%A9-html-r1702/ لغة HTML] هي وصف بنية صفحات الويب هيكليًا.

العناصر في HTML هي اللبنة الأساسية لبناء مستندات لغة HTML، إذ نستطيع عبرها إضافة [[HTML/img|الصور]] و<nowiki/>[[HTML/embed|الكائنات التفاعلية]] مثل [[HTML/form|النماذج]] أو ملفات [[HTML/video|الفيديو]] و<nowiki/>[[HTML/audio|الصوت]]؛ وتستطيع أيضًا إنشاء مستندات منظمة عبر استخدام وسوم للتصريح عن [[HTML/p|الفقرات]] و<nowiki/>[[HTML/h1-h6|العناوين]] و<nowiki/>[[HTML/a|الروابط]] و<nowiki/>[[HTML/q|الاقتباسات]] و<nowiki/>[[HTML/table|الجداول]] وغيرها.

يمكن للغة HTML أن تُضمِّن برامجَ مكتوبةٍ [https://academy.hsoub.com/programming/general/%D9%84%D8%BA%D8%A7%D8%AA-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9/ بلغات برمجة] مثل [[JavaScript]] لتعديل سلوك ومحتوى صفحات الويب؛ وإضافة شيفرات [[CSS]] تؤدي إلى تعريف شكل وتخطيط المحتوى.
{{Course|course=frontend}}
__TOC__
== أساسيات لغة HTML ==
تتألف صفحات لغة HTML من عناصر، والتي تتألف عادةً من وسم بداية ووسم نهاية، ويكون بينهما محتوى نصي عادةً؛ ويمكن أن نضع في وسم البداية بعض الخاصيات التي تُغيّر من سلوك العنصر أو تؤدي إلى ضبطه. لاحظ أنَّ بعض العناصر يمكن أن تتشعب داخل بعضها بعضًا. الأقسام الأساسية لعناصر لغة HTML هي:
* وسم البداية: وهو يحتوي على اسم العنصر، موضوعًا ضمن قوسين على شكل زاوية، وقد يلي الاسم الخاصيات التي تؤثر عليه. مثلًا <code><nowiki><p></nowiki></code>.
* وسم النهاية: وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخطٍ مائل قبله للإشارة إلى نهاية العنصر؛ لاحظ أنَّ نسيان وسم النهاية قد يسبب أخطاءً في بعض الأحيان، لذا خذ حذرك وتذكره. مثلًا: <code><‎/p></code>.
* المحتوى: وهو موجودٌ بين وسمَي البداية والنهاية، ويُمثِّل في معظم الأحيان محتوى العنصر.
* العنصر: هو وسم البداية ووسم النهاية إضافةً إلى المحتوى.
<syntaxhighlight lang="html">
_____ وسم النهاية _____        وسم البداية
| |                 |  |
<p>paragraph content</p>
  |__محتوى العنصر___|

</syntaxhighlight>قد تحتوي العناصر على خاصيات، وهذه الخاصيات بعضها اختياري وبعضها إجباري، وهنالك خاصيات تسمى بالخاصيات العامة والتي يمكن استخدامها على جميع العناصر. تتألف الخاصية في أغلب الحالات من اسم الخاصية ثم قيمة تليها.<syntaxhighlight lang="html">
_____ وسم النهاية _____                      وسم البداية
| |                               |  |
<p class="light">paragraph content</p>
   |__محتوى العنصر__|__الخاصيات___|
</syntaxhighlight>يبدأ المثال الآتي بالتصريح عن نوع المستند (DOCTYPE) الخاص بإصدار HTML5، ثم يُعرِّف العنصر الجذر <code>[[HTML/html|<html>]]</code> الذي يُشير إلى بدء مستند لغة HTML. يحتوي العنصر <code>[[HTML/html|<html>]]</code> على عنصرين هما العنصر <code>[[HTML/head|<head>]]</code> و <code>[[HTML/body|<body>]]</code>؛ أما العنصر <code>[[HTML/head|<head>]]</code> فيحتوي على البيانات الوصفية التي تصف المستند مثل العنصر <code>[[HTML/title|<title>]]</code> الذي ضبط عنوان الصفحة والعنصر <code>[[HTML/meta|<meta>]]</code> الذي ضبط هنا ترميز محارف المستند والعنصر <code>[[HTML/link|<link>]]</code> الذي أشار إلى مستند [[CSS]] والعنصر <code>[[HTML/script|<script>]]</code> الذي أشار إلى شيفرة [[JavaScript]]. وأما العنصر <code>[[HTML/body|<body>]]</code> فيمثِّل محتوى الصفحة نفسها، كالصور (العنصر <code>[[HTML/img|<img>]]</code>) والفقرات (العنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code>) وغير ذلك. لاحظ كيف ينتهي كل قسم من أقسام المستند بوسوم الإغلاق المناسبة.<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet">
    <script src="javascript.js"></script>
  </head>
  <body>
    <img src="images/logo.png" alt="My Logo">
    <p>Hello World!</p>
  </body>
</html>
</syntaxhighlight>

نُظِّم هذا الدليل بتخصيص صفحة لكل عنصر من عناصر لغة HTML، أي يمكن زيارة الصفحة HTML/''tagname'' للحصول على معلومات حول العنصر <code>''<tagname>''</code>. فللحصول على معلومات عن العنصر <code><img></code> نزور الصفحة [[HTML/img]]، ولمعرفة تفاصيل العنصر <code><nowiki><table></nowiki></code> نزور الصفحة [[HTML/table]]. أما حقول النماذج فهي موجودة ضمن صفحات فرعية في صفحة [[HTML/input]] (مثلًا: الصفحة [[HTML/input/email]] للحقل <code><input type="email"‎></code>).

{{:HTML/Topics}}
== مصادر ومواصفات ==
هذا الدليل مستقى من عدّة مصادر، والتي سنوردها حسب أهميتها؛ وحاولنا في هذا الدليل أخذ المعلومات التقنية المهمة من المعايير والمواصفات لكن مع تبسيطها وإيضاحها بما يلزم ليسهل فهمها:
* معيار [https://html.spec.whatwg.org/multipage/ HTML Living Standard].
* مواصفة [https://www.w3.org/TR/html5/ HTML5].
* مواصفة [https://www.w3.org/TR/html401/cover.html HTML 4.01].
* [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference توثيق HTML] في شبكة MDN.
__NOEDITSECTION__
[[تصنيف:HTML|{{SUBPAGENAME}}]]
{{#seo:
description=شرح لغة HTML باللغة العربية مدعّم بالأمثلة يشمل كافة أوامر، أكواد، وسوم لغة HTML ضمن توثيق موسوعة حسوب الكامل وعالي الجودة لمختلف لغات البرمجة وتقنيات الويب والجوال.
}}