لغة توصيف النص الفائق
لغة توصيف النص الفائق (بالإنجليزية: HyperText Markup Language) (اختصار إتش تي إم إل HTML)، هي لغة توصيف تستخدم في إنشاء وتصميم صفحات ومواقع الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب. HTML هيكل صفحة الويب وتعطي متصفّح الإنترنت وصفا لكيفيّة عرضه لمحتوياتها، يمكن أن تساعده تقنيات مثل أوراق الأنماط المتتالية (CSS) ولغات البرمجة النصية مثل جافا سكريبت تستقبل متصفحات الويب مستندات HTML من خادم الويب أو من نظام الملفات وتعرضها، ووظيفة لغة HTML هي وصف بنية صفحات الويب هيكليًا.
HTML (Hypertext Markup Language)
|
العناصر في HTML هي اللبنة الأساسية لبناء مستندات HTML، إذ نستطيع عبرها إضافة الصور والكائنات التفاعلية مثل النماذج أو ملفات الفيديو والصوت؛ وتستطيع أيضًا إنشاء مستندات منظمة عبر استخدام وسوم للتصريح عن الفقرات والعناوين والروابط والاقتباسات والجداول وغيرها.
يمكن للغة HTML أن تُضمِّن برامجَ مكتوبةٍ بلغات مثل جافا سكريبت لتعديل سلوك ومحتوى صفحات الويب؛ وإضافة شيفرات أوراق الأنماط المتتالية CSS تؤدي إلى تعريف شكل وتخطيط المحتوى.
تاريخها
الأصول
في عام 1980، قام الفيزيائي تيم بيرنرز لي والذي كان عاملاً في المؤسسة الأوروبية للأبحاث النويية سيرن باقتراح واعداد نموذج بدئي لنظام يمكن باحثي سيرن من استخدام ومشاركة المستندات. وفي عام 1989 قام بكتابة مذكرة[2] يقترح فيها نظام نص فائق hypertext مبني على الإنترنت، وقام بوصف لغة HTML وبكتابة برامج المزود والمتصفح في أواخر عام 1990.
كان أول وصف للجمهور من الاتش تي ام ال وثيقة تسمى علامات الاتش تي ام ال ذكر لأول مرة على شبكة الإنترنت عن طريق بيرنرز لي في أواخر عام 1991. فهو يصف 18 من العناصر الأولى التي تتألف منها , نسبياً التصميم بسيط في الاتش تي ام ال بأستثناء علامة الارتباط التشعبي ,هذه تأثرت بقوة في (الاس جي ام ال كويد) ,اسست ال (الاس جي ام ال ) على شكل وثائق في منزل سيرن. أحد عشر من هذه العناصر لا تزال موجودة في الاتش تي ام ال.
لغة توصيف النص التشعبي هي لغة العلامات التي تستخدم متصفحات الويب لتفسير وتأليف النص والصور وغيرها من المواد في صفحات الويب المرئية أو المسموعة. يتم تعريف وتوصيف الخصائص الافتراضية لكل بند من الاتش تي ام ال في المتصفح ,وهذه الخصائص يمكن تغيرها أو تحسينها بواسطة استخدام مصمم صفحة ويب اضافية من الاسي اس اس. عُثر على العديد من عناصر النص في عام 1988 (أي اس أو ) تقرير التقنية (تي ار 9537) تقنيات لاستخدام (الاس جي ام ال ) الذي يغطي بدوره ملامح اللغات تنسيق النص في وقت مبكر مثل تلك المستخدمة من قبل الأمر الجريان السطحي وضعت في 1960s في وقت مبكر ل CTSS (التوقيت متوافق نظام تقاسم ) نظام التشغيل : وقد استمدت هذه الأوامر التنسيق من الأوامر المستخدمة من قبل عمال التجميع على تنسيق المستندات يدويا. ومع ذلك، يستند مفهوم SGML من معمم العلامات على عناصر ( نطاقات متداخلة مع سمات المشروح ) بدلاً من مجرد آثار الطباعة، مع أيضاً الفصل بين هيكل والعلامات، وقد تم HTML انتقلت تدريجيا في هذا الاتجاه مع CSS. بيرنرز لي يعتبر تطبيق HTML من SGML تم تعريفه رسميا على هذا النحو من قبل فريق عمل هندسة الإنترنت (IETF ) مع منتصف عام 1993 نشر أول اقتراح ل مواصفات HTML : «لغة توصيف النص التشعبي (HTML )» إنترنت مشروع من قبل بيرنرز لي و دان كونولي، الذي تضمنت نوع الوثيقة SGML تعريف لتعريف النحوي.
الجدول الزمني للإصدارات
HTML 2
HTML 3
- تم نشر HTML 3.2 [3] رابطة الشبكة العالمية. كانت أول نسخة تم تطويرها وتوحيدها حصريًا بواسطة رابطة الشبكة العالمية، حيث أغلق IETF فريق عمل HTML في 12 سبتمبر 1996.[4]
- في البداية ، اسم "Wilbur" ، [5] HTML 3.2 أسقطت صيغ الرياضيات تمامًا، وصالح التداخل بين ملحقات الملكية المختلفة واعتمدت معظم علامات تمييز نتسكيب المرئية. تم حذف عنصر وميض نتسكيب ومايكروسوفت بسبب اتفاق متبادل بين الشركتين.[6] لم يتم توصيف العلامات الخاصة بالصيغ الرياضية المشابهة لتلك الموجودة في HTML حتى 14 شهرًا في ماث إم إل.
HTML 4
- تم نشر HTML 4.0 [7] كتوصية من رابطة الشبكة العالمية. إنه يوفر ثلاثة أشكال:
- صارمة ، حيث تحظر العناصر المهملة
- انتقالي ، حيث يسمح للعناصر المهملة
- مجموعة الإطارات ، والتي يُسمح فيها في الغالب بالعناصر ذات الصلة بالإطار فقط.
- في البداية ، أطلق عليها اسم "Cougar" ، [5] اعتمد HTML 4.0 العديد من أنواع العناصر والسمات الخاصة بالمتصفح ، ولكن في الوقت نفسه سعى إلى التخلص التدريجي من ميزات العلامات البصرية لـ Netscape عن طريق وضع علامة عليها على أنها متقادمة لصالح أوراق الأنماط. HTML 4 هو تطبيق SGML يتوافق مع ISO 8879 - SGML.[8]
- 24 أبريل 1998
- تم إعادة إصدار HTML 4.0 [9] مع تعديلات بسيطة دون زيادة رقم الإصدار.
- 24 ديسمبر 1999
- تم نشر HTML 4.01 [10] كتوصية W3C. يوفر نفس الأشكال الثلاثة مثل HTML 4.0 وقد تم نشر آخر خطأ له في 12 مايو 2001.
- مايو 2000
- تم نشر ISO / IEC 15445: 2000 [11][12] («ISO HTML» ، بناءً على HTML 4.01 Strict) كمعيار دولي ISO / IEC. في ISO ، تندرج هذه المواصفة القياسية في مجال ISO / IEC JTC1 / SC34 (اللجنة الفنية المشتركة 1 ISO / IEC ، اللجنة الفرعية 34 - وصف الوثيقة ومعالجة اللغات).[11]
- بعد HTML 4.01 ، لم يكن هناك إصدار جديد من HTML لسنوات عديدة لأن تطوير لغة XHTML المتوازية المستندة إلى XML احتلت مجموعة عمل HTML في W3C خلال أوائل ومنتصف الألفية
HTML 5
HTML Living Standard
هذا القسم فارغ أو غير مكتمل. ساهم في توسيعه. |
بنية مستندات HTML
تتألف صفحات HTML من عناصر، والتي تتألف عادةً من وسم بداية ووسم نهاية، ويكون بينهما محتوى نصي عادةً؛ ويمكن أن نضع في وسم البداية بعض الخاصيات التي تُغيّر من سلوك العنصر أو تؤدي إلى ضبطه. لاحظ أنَّ بعض العناصر يمكن أن تتشعب داخل بعضها بعضًا. الأقسام الأساسية للعناصر هي:
- وسم البداية: وهو يحتوي على اسم العنصر، موضوعًا ضمن قوسين على شكل زاوية، وقد يلي الاسم الخاصيات التي تؤثر عليه. مثلًا
<p>
. - وسم النهاية: وهو يحتوي على اسم العنصر أيضًا مسبوقًا بخطٍ مائل قبله للإشارة إلى نهاية العنصر؛ لاحظ أنَّ نسيان وسم النهاية قد يسبب أخطاءً في بعض الأحيان، لذا خذ حذرك وتذكره. مثلًا:
<p/>
. - المحتوى: وهو موجودٌ بين وسمَي البداية والنهاية، ويُمثِّل في معظم الأحيان محتوى العنصر.
- العنصر: هو وسم البداية ووسم النهاية إضافةً إلى المحتوى.
_____ وسم النهاية _____ وسم البداية
| | | |
<p>paragraph content</p>
|__محتوى العنصر___|
قد تحتوي العناصر على خاصيات، وهذه الخاصيات بعضها اختياري وبعضها إجباري، وهنالك خاصيات تسمى بالخاصيات العامة والتي يمكن استخدامها على جميع العناصر. تتألف الخاصية في أغلب الحالات من اسم الخاصية ثم قيمة تليها.
_____ وسم النهاية _____ وسم البداية
| | | |
<p class="light">paragraph content</p>
|__محتوى العنصر__|__الخاصيات___|
يبدأ المثال الآتي بالتصريح عن نوع المستند (DOCTYPE) الخاص بإصدار HTML5، ثم يُعرِّف العنصر الجذر <html>
الذي يُشير إلى بدء مستند HTML. يحتوي العنصر <html>
على عنصرين هما العنصر <head>
و <body>
؛ أما العنصر <head>
فيحتوي على البيانات الوصفية التي تصف المستند مثل العنصر <title>
الذي ضبط عنوان الصفحة والعنصر <meta>
الذي ضبط هنا ترميز محارف المستند والعنصر <link>
الذي أشار إلى مستند CSS والعنصر <script>
الذي أشار إلى شيفرة JavaScript. وأما العنصر <body>
فيمثِّل محتوى الصفحة نفسها، كالصور (العنصر <img>
) والفقرات (العنصر <p>
) وغير ذلك. لاحظ كيف ينتهي كل قسم من أقسام المستند بوسوم الإغلاق المناسبة.
<!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>
نُظِّم هذا الدليل بتخصيص صفحة لكل عنصر من عناصر HTML، أي يمكن زيارة الصفحة HTML/tagname للحصول على معلومات حول العنصر <tagname>
. فللحصول على معلومات عن العنصر <img>
نزور الصفحة HTML/img، ولمعرفة تفاصيل العنصر <table>
نزور الصفحة HTML/table. أما حقول النماذج فهي موجودة ضمن صفحات فرعية في صفحة HTML/input(مثلًا: الصفحة HTML/input/email للحقل <input type="email">
).
تحتوي هذه الصفحة على قائمة بعناصر HTML، منظمةً حسب وظيفتها ليسهل عليك الوصول إلى مبتغاك.
العنصر الجذر
العنصر | الوصف |
---|---|
<html>
|
تمثيل العنصر الرئيسي في مستندات HTML، ويُشار إليه أحيانًا باسم «العنصر الجذر» (root element). يجب أن تكون جميع العناصر الأخرى في المستند سليلةً (descendants، أي أبناء مباشرين وغير مباشرين) له. |
البيانات الوصفية
تحتوي البيانات الوصفية على معلومات عن الصفحة، التي تتضمن المعلومات حول الأنماط (styles) والسكربتات، والبيانات المُساعدة للبرمجيات (مثل محركات البحث والمتصفحات ...إلخ.) التي تستخدم الصفحة أو تعرضها.
العنصر | الوصف |
---|---|
<base>
|
تحديد أساس روابط URL لجميع الروابط النسبية (relative URLs) الموجودة في المستند. لا يجوز استخدام أكثر من عنصر <base> في المستند.
|
<head>
|
توفير معلوماتٍ عامةً عن المستند (أي بيانات وصفية)، بما في ذلك عنوان المستند وروابط إلى السكربتات الموجودة فيها وصفحات الأنماط. |
<link>
|
تحديد العلاقات بين المستند الحالي وبين مورد خارجي (external resource)؛ من استخدامات هذا الوسم تتضمن تعريف علاقة بين الصفحات للتنقل بينها، بيد أنَّ أكثر استخدامات هذا العنصر شيوعًا هو تضمين صفحات الأنماط. |
<meta>
|
تمثيل البيانات الوصفية التي لا يمكن تمثيلها باستخدام عناصر HTML المتعلقة بالبيانات الوصفية مثل <base> أو <link> أو <script> أو<style> أو <title> .
|
<style>
|
يحتوي العنصر <style> معلومات عن تنسيق المستند أو جزءٍ منه، إذ تحتوى داخل هذا العنصر معلومات التنسيق التي من المتوقع أن تكون بلغة CSS.
|
<title>
|
تعريف عنوان المستند، الذي يظهر في شريط العنوان للمتصفح أو في لسان الصفحة، ويمكن أن يحتوي هذا العنصر على نصوص فقط، وسيتم تجاهل أيّة وسوم ترد فيه. |
العناصر التقسيمية
تسمح العناصر التقسيمية لنا بتنظيم محتوى المستند وتقسيمه إلى أقسام منطقية، إذ تُستعمَل هذه العناصر لإنشاء تخطيط هيكلي للصفحة، بما في ذلك ترويسة الصفحة وتذييلها، وعناصر الترويسات.
العنصر | الوصف |
---|---|
<body>
|
تمثيل محتوى مستند HTML، ولا يجوز أن يكون هنالك أكثر من عنصر <body> واحد في المستند.
|
<address>
|
توفير معلومات التواصل للمحتوى الموجود في أقرب عنصر<article> أو <body> أب، وإذا كان سيوفر المعلومات لعنصر <body> أب فستُطبَّق المعلومات على كامل المستند.
|
<article>
|
تمثيل جزء من المستند أو الصفحة أو التطبيق أو الموقع الغرض منها هو القدرة على إعادة توزيعها واستخدامها بشكل مستقل، مثل موضوع في منتدى أو مقالة في صحيفة أو تدوينة. |
<aside>
|
تمثيل جزء من المستند الذي يتعلق محتواه بشكلٍ أو بآخر بالمحتوى الرئيسي للمستند (ويُمثَّل هذا العنصر عادةً على شكل شريط جانبي). |
<footer>
|
تمثيل تذييل لأقرب عنصر تقسيمي (sectioning element) أو للمستند كله؛ ويحتوي التذييل عادةً على معلومات حول كاتب المحتوى أو معلومات حقوق النشر أو وصلات إلى مستندات مفيدة. |
<h1-h6>
|
تُمثِّل عناصر <h1>-<h6> ستة مستويات من ترويسات الأقسام، ويكون العنصر<h1> أعلى مستوى والعنصر <h6> أدنى مستوى.
|
<header>
|
يضم العنصر <header> مجموعةً من العناصر التمهيدية أو المساعدة على التنقل، وقت يحتوي على بعض عناصر الترويسات أو عناصر أخرى مثل شعار الموقع أو نموذج بحث وهلم جرًا.
|
<nav>
|
تمثيل قسم من الصفحة غرضه هو توفير روابط للتنقل، سواءً كانت ضمن المستند نفسه أو إلى مستندات أخرى.
من أكثر الأمثلة شيوعًا هي القوائم وجداول المحتويات والفهارس. |
<section>
|
تمثيل قسم مستقل له وظيفة خاصة به ضمن مستند HTML، ويكون له ترويسة عادةً، وهذا القسم ليس له وسمٌ خاصٌ يمكن أن يمثِّله. |
المحتوى النصي
عناصر المحتوى النصي تُستخدَم لتنظيم أجزاء من المحتوى الموجودة في العنصر <body>
، وهي مفيدة لتعريف الغرض من المحتوى الموجود داخلها، مما يفيد في فهرسة الصفحة أو زيادة قابلية الوصول إليها.
العنصر | الوصف |
---|---|
<blockquote>
|
يُشير العنصر <blockquote> (اسم هذا العنصر اختصارٌ للعبارة HTML Block Quotation Element) إلى أنَّ النص الموجود داخله هو نص اقتباس طويل.
يُعرَض هذا العنصر عادةً مع إضافة محاذاة قبله (راجع قسم الملاحظات في هذه المقالة لمعرفة كيفية تغيير طريقة العرض). يمكن توفير رابط URL لمصدر الاقتباس عبر الخاصية |
<dd>
|
الإشارة إلى شرح أحد المصطلحات في قائمة وصف (description list) أي العنصر <dl> .
|
<div>
|
العنصر <div> هو حاوية عامة للمحتوى التي لا تُمثِّل شيئًا معيّنًا، يمكن استخدامها لتجميع العناصر لأغراض مثل التنسيق (باستخدام خاصيتَي class أوid )، أو إنشاء قسم جديد في المستند بلغةٍ أخرى (باستخدام الخاصية lang )، وهلم جرًا.
|
<dl>
|
تمثيل قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القوامس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج مفاتيح-قيم). |
<dt>
|
تعريف أحد المصطلحات في قائمة وصف (description list)، يجب أن يكون هذا العنصر ابنًا للعنصر <dl> ، ويكون متبوعًا عادةً بعنصر <dd> ؛ لكن إذا وردت عدِّة عناصر <dt> متتالية فستُعرَّف عدِّة مصطلحات (terms) التي ستُشرَح عبر عنصر <dd> التالي.
|
<figcaption>
|
تمثيل لافتة أو شرح مرتبط بصورة أو رسمة أو غير ذلك مما يمكن أن يوصف عبر العنصر <figure> الذي يجب أن يكون الأب المباشر لهذا العنصر..
|
<figure>
|
تمثيل محتوى مستقل بحد ذاته، ويستخدم عادةً مع لافتة (عبر العنصر <figcaption> )، ويُشير عادةً إلى وحدة لا تتجزأ من المعلومات.
|
<hr>
|
تمثيل فاصل موضوعي بين الفقرات (مثلًا: تغيّر المشهد في قصة ما، أو تبدّل الموضوع بإنشاء قسم جديد).
كان يُعرَض هذا العنصر في الإصدارات السابقة من HTML على شكل خط أفقي، وصحيحٌ أنَّه ما يزال يعرَض كذلك في المتصفحات، لكن أصبح له معنى هيكلي، بدلًا من كونه عنصرًا شكليًا فقط. |
<li>
|
لتمثيل عنصر في قائمة، ويجب أن يحتوى هذا العنصر في عنصر أب الذي يكون قائمة مرتبة <ol> أو قائمة غير مرتبة <ul> أو قائمة<menu> .
تُعرَض عناصر القوائم العادية |
<main>
|
تمثيل المحتوى الرئيسي لجسم المستند (العنصر <body> ) أو لجزءٍ من المستند أو التطبيق. تضم منطقة المحتوى الرئيسي جميع المحتوى المرتبط مباشرةً بموضوع المستند أو يضيف عليه، أو يمثِّل الوظيفة الرئيسية للتطبيق.
|
<ol>
|
تمثيل قائمة مرتبة من العناصر، التي تُعرَض على شكل قائمة مرقمة. |
<p>
|
يُمثِّل العنصر <p> فقرةً نصيةً، وتُعرَض الفقرات عادةً على شكل أقسام من النص يفصل بينها بمسافة فارفة رأسية، أو بزيادة محاذاة أوّل سطر.
|
<pre>
|
يُمثِّل العنصر <pre> نصًا منسقًا مسبقًا (preformatted text)، والنص الموجود داخل هذا العنصر يُعرَض بخطٍ ذي عرضٍ ثابت (monospaced font) كما هو مكتوب في الملف المصدري تمامًا، وستُعرَض الفراغات الموجودة كما هي.
|
<ul>
|
تمثيل قائمة غير مرتبة من العناصر، التي تُعرَض على شكل قائمة منقطة عادةً. |
<h1>
|
يمثل هذا العنصر الي كتابة النص في صفحة الويب وعند كتابة اكتر من نص فسيتم تغير قيمة الرقمية للكود البرمجي مثل (<h2> ،<h3> ........)
|
العناصر النصية
تُستخدَم العناصر النصية لإضفاء معنى أو بنية أو تنسيق إلى كلمة أو سطر أو أي نص.
العنصر | الوصف |
---|---|
<a>
|
يُنشِئ العنصر <a> (اسمه اختصار للكلمة anchor) رابطًا فائقًا (hyperlink) لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية أو لعنواين البريد الإلكتروني.
|
<abbr>
|
تمثيل اختصار وتوفير شرح له، وعند إضافة الشرح يجب أن تحتوي الخاصية title على الشرح الكامل لهذا الاختصار فقط ولا يسمح بأي قيمة أخرى.
|
<b>
|
تمثيل نص يختلف تنسيقه عن تنسيق النص العادي، دون أن يكون له أهمية أو أولوية على بقية النص، ويُعرَض عادةً بخطٍ عريض (bold). |
<bdi>
|
يعزل العنصر <bdi> (اختصار للعبارة bidirectional isolation) جزءًا من النص الذي يمكن تنسيقه باتجاه نص (أي اتجاه النص من اليمين إلى اليسار مثل اللغة العربية، أو من اليسار إلى اليمين مثل اللغات اللاتينية) مختلف عن النص الذي حوله.
هذا العنصر مفيدٌ عند تضمين نص لا يُعرَف اتجاهه تحديدًا -مثل تضمين نص من قاعدة البيانات- داخل نص له اتجاه نص معيّن. |
<bdo>
|
يتجاوز العنصر <bdo> (اختصار للعبارة bidirectional override) اتجاه النص الحالي واستخدام اتجاه مُحدَّد مسبقًا.
|
<br>
|
يؤدي إلى الانتقال إلى سطرٍ جديد، وهو مفيد عند كتابة قصيدة شعرية أو عنوان ما، حيث يكون تقسيم الأسطر مهمًا. |
<cite>
|
تمثيل مرجعية لعملٍ إبداعي، إذ يجب أن يتضمن عنوان العمل أو رابط URL، ويمكن أن يكون محتواه مختصرًا وذلك اعتمادًا على نوعية المرجعية التي يُشير إليها. |
<code>
|
تمثيل جزء من شيفرة برمجية، ويُعرَض افتراضيًا باستخدام الخط ذي العرض الثابت الذي يستعمله المتصفح. |
<data>
|
يربط العنصر <data> بين محتوى العنصر وقيمة سهلة القراءة برمجيًا.
إذا كان المحتوى متعلقًا بالوقت أو التاريخ، فيجب حينئذٍ استخدام العنصر |
<dfn>
|
تمثيل تعريف لأحد المصطلحات في أوّل مرة يرد فيها. |
<em>
|
يُعطي العنصر <em> توكيدًا للنص الموجود فيه، ويمكن تشعّب العنصر<em> (أي استخدام أكثر من عنصر <em> داخل بعضها) وكل مستوى من مستويات التشعب يعطي توكيدًا أكثر للنص.
|
<i>
|
تمثيل جزء من النص يجب أن يتميز عن بقية النص لسببٍ ما، مثل المصطلحات التقنية أو العبارات المكتوبة بلغةٍ أجنبية أو التعابير الوجهية لشخصيةٍ ما في مسرحية ...إلخ. ويُعرَض هذا العنصر عادةً بخطٍ مائل. |
<kbd>
|
تمثيل مدخلات المستخدم ويؤدي إلى عرض النص بالخط ذي العرض الثابت الافتراضي الذي يستعمله المتصفح. |
<mark>
|
يستعمل العنصر <mark> لتعليم (highlight) جزء من النص لغرض الإشارة إليه لأن له أهمية في سياقٍ معيّن. فمثلًا يمكن أن يستعمل لتعليم كل مرة ترد فيها كلمة مفتاحية في عبارة البحث في صفحة النتائج.
|
<q>
|
الإشارة إلى أنَّ النص المحتوى فيه يُمثِّل اقتباسًا قصيرًا، ويستعمل هذا العنصر للاقتباسات التي لا تحتاج إلى فقرة كاملة لها، أما للاقتباسات الطويلة فاستخدم العنصر <blockquote> .
|
<s>
|
يؤدي العنصر <s> إلى عرض النص ويتوسطه خط؛ استخدم العنصر <s> لتمثيل النص الذي لم يعد متعلقًا بالموضوع أو لم يعد دقيقًا؛ لكن العنصر <s> ليس مناسبًا للإشارة إلى التعديلات التي أُجريت على المستند، فلتلك التعديلات استخدم <del> و <ins> .
|
<samp>
|
الغرض من العنصر <samp> هو إظهار جزء من ناتج برنامج حاسوبي، ويُعرَض محتوى هذا العنصر عادةً بخطٍ ذي عرضٍ ثابت (monospace).
|
<small>
|
يؤدي العنصر <small> إلى تقليل حجم الخط بمقدار درجة واحدة (مثلًا: منlarge إلى medium ، أو من small إلى x-small ) وصولًا إلى أدنى حجم خط متوافر في المتصفح.
أصبح لهذا العنصر أهمية تنظيمية في HTML5 فهو يمثل التعليقات الجانبية أو النصوص التي تُطبَع عادةً بخطٍ صغير مثل عبارة حقوق النشر أو النص القانوني، وهذا الاستخدام التنظيمي منفصل عن طريقة عرض العنصر. |
<span>
|
العنصر <span> هو حاوية سطرية (inline container) عامة، والتي لا تُمثِّل نوعًا معيّنًا من المحتوى، ويمكن أن تستعمل تجميع العناصر من أجل التنسيق (إما باستخدام الخاصية id أو class ) أو لأن تلك العناصر تتشارك في خاصيةٍ ما مثل الخاصية lang .
|
<strong>
|
يعطي العنصر <strong> أهميةً للنص المحتوى فيه، ويُعرَض النص عادةً بخطٍ عريض (bold).
|
<sub>
|
تمثيل جزء من النص الذي يجب أن يُعرَض في مستوى أدنى (وغالبًا ما يكون أصغر) من المستوى الرئيسي للنص. |
<sup>
|
تمثيل جزء من النص الذي يجب أن يُعرَض في مستوى أعلى (وغالبًا ما يكون أصغر) من المستوى الرئيسي للنص. |
<time>
|
تمثيل الوقت بنظام 24 ساعة أو التاريخ الدقيق باستخدام التقويم الميلادي (ويمكن إضافة الوقت أو معلومات المنطقة الزمنية اختياريًا). |
<u>
|
يستخدم العنصر <u> لعرض النص مع وضع خط أفقي تحت خط الأساس لمحتواه.
يُمثِّل هذا العنصر في HTML5 جزءًا من النص الذي يُشار إليه عبر تطبيق تأثير واضح عليه لكن ذلك التأثير غير نصي وغير مُحدَّد، أو للإشارة أنَّ النص فيه خطأ إملائي. |
<var>
|
تمثيل متغير في تعبيرٍ رياضي أو في شيفرةٍ برمجية. |
<wbr>
|
يُعرِّف العنصر <wbr> نقطةً لقسم السطر عند الحاجة، حيث يرمز اسم هذا العنصر إلى Word Break Opportunity، أي يُسمَح للمتصفح أن يقسم السطر عند هذا الموضع على الرغم من أنَّ قواعد قسم السطر لا تسمح بإنشاء سطر جديد في ذاك الموضع.
|
الوسائط المتعددة
تدعم HTML تضمين الوسائط المتعددة مثل الصور والصوت والفيديو.
العنصر | الوصف |
---|---|
<area>
|
تعريف منطقة في خريطة لصورة، ويمكن أن ترتبط تلك المنطقة (اختياريًا) مع رابط فائق. لا يمكن استخدام هذا العنصر إلا ضمن عنصر <map> .
|
<audio>
|
تضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية src أو عبر العنصر <source> ، وسيختار المتصفح أنسب الملفات الصوتية لتشغيلها.
|
<img>
|
تمثيل صورة في المستند. |
<map>
|
يُستخدَم العنصر <map> مع عنصر <area> لتعريف خريطة للصورة (أي منطقة قابلة للنقر في الصورة).
|
<track>
|
يُستخدَم العنصر <track> داخل العنصر <audio> أو <video> ويسمح لك باستخدام مسارات نصية مؤقتة مثل الترجمات المصاحبة لمقاطع الفيديو. تكون هذه المقاطع بصيغة WebVTT (وملفاتها بامتداد .vtt أي Web Video Text Tracks).
|
<video>
|
تضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية src أو عبر العنصر <source> ، وسيختار المتصفح أنسب صيغة لتشغيلها.
|
تضمين المحتوى
إضافةً إلى الوسائط المتعددة، يمكن تضمن مختلف أنواع المحتوى في مستندات HTML، حتى لو لم يكن من السهل دومًا التعامل مع ذاك المحتوى.
العنصر | الوصف |
---|---|
<embed>
|
يُمثِّل العنصر <embed> نقطة إدراج لتطبيق خارجي أو لمحتوى تفاعلي (أي بصيغة أخرى: إضافة plug-in).
|
<object>
|
يُمثِّل العنصر <object> موردًا خارجيًا، والذي يمكن أن يُعامل كصورة، أو كمورد سيُعالَج عبر إضافة خارجية.
|
<param>
|
يُعرِّف العنصر <param> معاملات (parameters) للعنصر <object> .
|
<source>
|
يُحدِّد العنصر <source> عدِّة مصادر لملفات الوسائط المتعددة ضمن العنصر<picture> أو <audio> أو <video> . وهذا العنصر فارغ، وأكثر استخدام شائع له هو توفير محتوى الوسائط المتعددة نفسه لكن بصيغ مختلفة لكي يستطيع المتصفح تشغيل أنسبها.
|
<picture>
|
يُمثِّل العنصر <picture> حاويةً تُستخدَم لتحديد عدِّة مصادر عبر العنصر<source> لصورة <img> محتواة داخله؛ وسيختار المتصفح أنسب مصدر للصورة اعتمادًا على تخطيط الصفحة (أي الصندوق المحتوى فيه هذا العنصر) والجهاز الذي ستُعرَض الصورة داخله (هل شاشته عادية أم عالية الدقة).
|
السكربتات
لإنشاء محتوى تفاعلي في تطبيقات الويب، فتدعم HTML استخدام لغات السكربتات، وخصوصًا JavaScript، وهنالك عدِّة عناصر متوافرة لدعم هذه الإمكانية.
العنصر | الوصف |
---|---|
<canvas>
|
استخدم العنصر <canvas> مع الواجهة البرمجية الخاصة به لترسم الرسومات وتحركها.
|
<noscript>
|
يُعرِّف العنصر <noscript> قسمًا من شيفرات HTML التي ستُضاف إلى الصفحة إذا لم يكن العنصر <script> مدعومًا في المتصفح أو كان استخدام شيفرات JavaScript معطلًا من قِبل المستخدم.
|
<script>
|
تضمين أو الإشارة إلى سكربت قابل للتنفيذ. |
التعديلات
تسمح لنا هذه العناصر بالإشارة إلى أنَّ جزءًا من النص قد جرى تغييره.
العنصر | الوصف |
---|---|
<del>
|
تمثيل نص حُذِفَ من المستند، وهذا النص يُعرَض عادةً ويتوسطه خط (strike-through) لكن ذلك ليس إجباريًا. |
<ins>
|
تمثيل نص أُضيف إلى المستند، وهذا النص يُعرَض عادةً وتحته خط لكن ذلك ليس إجباريًا. |
الجداول
تُستعمَل هذه العناصر لإنشاء والتعامل مع البيانات المجدولة.
العنصر | الوصف |
---|---|
<caption>
|
تمثيل عنوان الجدول، وعلى الرغم من أنَّه يجب أن يكون أوّل ابن للعنصر <table> لكن يمكن باستخدام CSS وضعه في أي مكان نسبةً إلى الجدول.
|
<col>
|
تعريف عمود ضمن أحد الجداول، ويُستخدم لإعطاء هيكل تنظيمي للخلايا المتشابهة، ويكون موجودًا داخل عنصر <colgroup> .
|
<colgroup>
|
تعريف مجموعة أعمدة ضمن أحد الجداول. |
<table>
|
تمثيل البيانات المجدّولة، أي المعلومات التي يُعبّر عنها عبر جدول ثنائي الأبعاد. |
<tbody>
|
يُجمِّع العنصر <tbody> عنصر <tr> أو أكثر كجسم للعنصر <table> .
|
<td>
|
تعريف خلية في الجدول الذي يحتويها. |
<tfoot>
|
تعريف مجموعة من الأسطر التي تُمثِّل خلاصةً لأعمدة العنصر<table> .
|
<th>
|
تعريف خلية تُمثِّل ترويسةً في الجدول الذي يحتويها. تُعرّف طبيعة هذه الترويسة عبر الخاصيتين scope و headers .
|
<thead>
|
تعريف مجموعة من الأسطر التي تُمثِّل ترويسةً لأعمدة العنصر<table> .
|
<tr>
|
تعريف سطر يحتوي على خلايا في جدول، وهذه الخلايا تُمثَّل عبر العنصرين <td> و <th> .
|
النماذج
توفِّر HTML عددًا من العناصر التي يمكن أن تتكامل مع بعضها لإنشاء نماذج يمكن للمستخدمين ملأها وإرسالها إلى خادم الويب لمعالجها.
العنصر | الوصف |
---|---|
<button>
|
يُمثِّل العنصر <button> زرًا قابلًا للضغط.
|
<datalist>
|
يحتوي العنصر <datalist> على عناصر <option> التي تُمثِّل القيم المتوافرة لعناصر النماذج الأخرى.
|
<fieldset>
|
تجميع عدِّة عناصر ولافتات (<label> ) ضمن نموذج في مستند HTML؛ مما يجعل نماذجك أسهل استخدامًا وأوضح.
|
<form>
|
تمثيل قسم في المستند الذي يحتوي على عناصر يستطيع المستخدم التفاعل معها لإرسال بيانات إلى خادوم الويب. |
<input>
|
يُستخدَم العنصر <input> لإنشاء عناصر تفاعلية للنماذج في صفحات الويب التي تقبل معطيات من المستخدم، ثم تُرسَل إلى الخادوم.
|
<label>
|
تمثيل لافتة (caption) لأحد عناصر النماذج. |
<legend>
|
تمثيل لافتة (caption) لعنصر <fieldset> الأب له.
|
<meter>
|
يُمثِّل العنصر <meter> إما قيمةً عددية ضمن مجال معيّن، أو قيمةً جزئية (fractional value).
|
<optgroup>
|
إنشاء مجموعة من الخيارات ضمن العنصر <select> .
|
<option>
|
تعريف عنصر محتوى ضمن العنصر <select> أو<optgroup> أو <datalist> . وبالتالي يمكن استخدام العنصر <option> لتمثيل عناصر القوائم في مختلف أنوع القوائم في مستند HTML.
|
<output>
|
تمثيل ناتج عملية حسابية أو أحد أفعال المستخدم. |
<progress>
|
تمثيل تقدم إكمال مهمة ما، ويُعرَض عادةً على شكل شريط تقدم (progress bar). |
<select>
|
تمثيل عنصر من عناصر النماذج يوفِّر قائمةً من الخيارات. |
<textarea>
|
تمثيل عنصر من عناصر النماذج يوفِّر مربعًا نصيًا متعدد الأسطر قابلًا للتعديل. |
العناصر التفاعلية
توفِّر HTML مجوعةً من العناصر التي تساعد في إنشاء عناصر تفاعلية يستطيع المستخدم التفاعل معها.
العنصر | الوصف |
---|---|
<details>
|
يُستخدم العنصر <details> لعرض معلومات إضافية للمستخدم يمكنه إظهارها وإخفاؤها متى شاء. يمكن وضع أيّ نوع من المحتوى ضمن العنصر <details> ، وتكون محتوياته مخفيةً افتراضيةً (إلا إذا ضُبِطَت الخاصية open ).
|
<summary>
|
يُستخدم العنصر <summary> لعرض خلاصة أو لافتة أو عنوان لمحتويات العنصر<details> .
|
انظر أيضًا
وصلات خارجية
- ما هي HTML؟
- آخر مواصفات لاتش تي ام ال HTML 4.01
- مقدمة لاتش تي ام ال للكاتب ديف راجيتس Dave Raggett's
- فيديو: أساسيات لغة HTML - شرح باللغة العربية
- w3schools (بالإنجليزيّة) تعلّم كيف تصنع موقع ويب, مجموعة من الدروس المجانيّة في كلّ تقنيّات تطوير الويب. علّم نفسك .
المراجع
لغة توصيف النص الفائق في المشاريع الشقيقة: | |
- ^ "W3C Html". مؤرشف من الأصل في 2019-08-10.
- ^ Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). W3.org نسخة محفوظة 26 يونيو 2018 على موقع واي باك مشين.
- ^ "HTML 3.2 Reference Specification". World Wide Web Consortium. 14 يناير 1997. مؤرشف من الأصل في 2018-02-03. اطلع عليه بتاريخ 2008-11-16.
- ^ "IETF HTML WG". مؤرشف من الأصل في 2018-09-13. اطلع عليه بتاريخ 2007-06-16.
Note: This working group is closed
- ^ أ ب Arnoud Engelfriet. "Introduction to Wilbur". Web Design Group. مؤرشف من الأصل في 2017-10-14. اطلع عليه بتاريخ 2007-06-16.
- ^ Raggett، Dave (1998). Raggett on HTML 4. مؤرشف من الأصل في 2019-11-18. اطلع عليه بتاريخ 2007-07-09.
- ^ "HTML 4.0 Specification". World Wide Web Consortium. 18 ديسمبر 1997. مؤرشف من الأصل في 2019-08-30. اطلع عليه بتاريخ 2008-11-16.
- ^ "HTML 4 – 4 Conformance: requirements and recommendations". مؤرشف من الأصل في 2019-02-16. اطلع عليه بتاريخ 2009-12-30.
- ^ "HTML 4.0 Specification". World Wide Web Consortium. 24 أبريل 1998. مؤرشف من الأصل في 2019-09-04. اطلع عليه بتاريخ 2008-11-16.
- ^ "HTML 4.01 Specification". World Wide Web Consortium. 24 ديسمبر 1999. مؤرشف من الأصل في 2019-08-30. اطلع عليه بتاريخ 2008-11-16.
- ^ أ ب ISO (2000). "ISO/IEC 15445:2000 – Information technology – Document description and processing languages – HyperText Markup Language (HTML)". مؤرشف من الأصل في 2016-08-29. اطلع عليه بتاريخ 2009-12-26.
- ^ Cs.Tcd.Ie. Cs.Tcd.Ie (2000-05-15). Retrieved on 2012-02-16. نسخة محفوظة 2 ديسمبر 2007 على موقع واي باك مشين.
- ^ "HTML5: A vocabulary and associated APIs for HTML and XHTML". World Wide Web Consortium. 28 أكتوبر 2014. مؤرشف من الأصل في 2020-11-14. اطلع عليه بتاريخ 2014-10-31.
- ^ (Press release).
{{استشهاد ببيان صحفي}}
: الوسيط|title=
غير موجود أو فارغ (مساعدة) - ^ "HTML 5.1". World Wide Web Consortium. 1 نوفمبر 2016. مؤرشف من الأصل في 2020-10-06. اطلع عليه بتاريخ 2017-01-06.
- ^ "HTML 5.1 is a W3C Recommendation". World Wide Web Consortium. 1 نوفمبر 2016. مؤرشف من الأصل في 2020-11-08. اطلع عليه بتاريخ 2017-01-06.
- ^ Philippe le Hegaret (17 نوفمبر 2016). "HTML 5.1 is the gold standard". World Wide Web Consortium. مؤرشف من الأصل في 2020-11-08. اطلع عليه بتاريخ 2017-01-06.
- ^ "HTML 5.2". World Wide Web Consortium. 14 ديسمبر 2017. مؤرشف من الأصل في 2020-10-29. اطلع عليه بتاريخ 2017-12-15.
- ^ "HTML 5.2 is now a W3C Recommendation". World Wide Web Consortium. 14 ديسمبر 2017. مؤرشف من الأصل في 2020-11-07. اطلع عليه بتاريخ 2017-12-15.
- ^ Charles McCathie Nevile (14 ديسمبر 2017). "HTML 5.2 is done, HTML 5.3 is coming". World Wide Web Consortium. مؤرشف من الأصل في 2020-11-09. اطلع عليه بتاريخ 2017-12-15.