- ماهي لغة HTML
لغة HTM اختصار Hyper Text Markup Language هذا يعني أنَّها لا تعتبر لغة برمجة ( Programming Language ) بل تعتبر لغة توصيف (Markup anguage).
هي لغة بسيطة جداً تستخدم لوصف ما تحتويه صفحات الويب (Web Pages) ومعنى ذلك أنَّها تستخدم لتحديد العناصر الموجودة في الصفحة مثل العناوين، الفقرات، الأزرار، الصور، القوائم، الجداول و غيرها من الأشياء التي يمكن إضافتها في صفحات الويب.
إذاً نستخدم هذه اللغة لهدف واحد فقط و هو تحديد بنية صفحات الويب (Pages tructure) .
هي لغة توصيف تستخدم في إنشاء وتصميم صفحات ومواقع الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداماً في تصميم صفحات الويب HTM وهيكل صفحة الويب حيث تعطي متصفّح الانترنت وصفاً لكيفيّة عرضه لمحتوياتها، يمكن أن تساعده تقنيات مثل اوراق الانماط المتتالية css ولغات البرمجة النصية مثل جافا سكريبت تستقبل متصفحات الويب مستندات HTML من خادم الويب أو من نظام الملفات وتعرضها، ووظيفة لغة HTML هي وصف بنية صفحات الويب هيكلياً.
العناصر في HTML هي اللبنة الأساسية لبناء مستندات HTML إذ نستطيع عبرها إضافة الصور والكائنات التفاعلية مثل النماذج أو ملفات الفيديو والصوت؛ وتستطيع أيضا إنشاء مستندات منظمة عبر استخدام وسوم للتصريح عن الفقرات والعناوين والروابط والاقتباسات والجداول وغيرها.
يمكن للغة HTML أن تُضمِّن برامجَ مكتوبةٍ بلغات مثل جافا سكريبت لتعديل سلوك ومحتوى صفحات الويب؛ وإضافة شيفرات اوراق الانماط المتتالية CSS تؤدي إلى تعريف شكل وتخطيط المحتوى.
2- بنية مستندات HTML
تتألف صفحات HTML من عناصر، والتي تتألف عادةً من وسم بداية ووسم نهاية، ويكون بينهما محتوى نصي عادةً؛ ويمكن أن نضع في وسم البداية بعض الخاصيات التي تُغيّر من سلوك العنصر أو تؤدي إلى ضبطه. لاحظ أنَّ بعض العناصر يمكن أن تتشعب داخل بعضها بعضاً. الأقسام الأساسية للعناصر هي:
وسم البداية: وهو يحتوي على اسم العنصر، موضوعاً ضمن قوسين على شكل زاوية، وقد يلي الاسم الخاصيات التي تؤثر عليه مثلاً: <p>.
وسم النهاية: وهو يحتوي على اسم العنصر أيضاً مسبوقاً بخطٍ مائل قبله للإشارة إلى نهاية العنصر؛ لاحظ أنَّ نسيان وسم النهاية قد يسبب أخطاء في بعض الأحيان، لذا خذ حذرك وتذكره. مثلًا: <p/>.
المحتوى: وهو موجودٌ بين وسمَي البداية والنهاية، ويُمثِّل في معظم الأحيان محتوى العنصر.
العنصر: هو وسم البداية ووسم النهاية إضافةً إلى المحتوى.
_____ وسم النهاية _____ وسم البداية
| | | |
<p>paragraph content</p>
|__محتوى العنصر___|
قد تحتوي العناصر على خاصيات، وهذه الخاصيات بعضها اختياري وبعضها إجباري، وهنالك خاصيات تسمى بالخاصيات العامة والتي يمكن استخدامها على جميع العناصر. تتألف الخاصية في أغلب الحالات من اسم الخاصية ثم قيمة تليها.
_____ وسم النهاية _____ وسم البداية
| | | |
<p class="light">paragraph content</p>
|__محتوى العنصر__|__الخاصيات___|
يبدأ المثال الآتي بالتصريح عن نوع المستند (DOCTYPE) الخاص بإصدار HTML، ثم يُعرِّف العنصر الجذر <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"> .
- العناصر التقسيمية
<body>: تمثيل محتوى مستند HTML ولا يجوز أن يكون هنالك أكثر من عنصر <body>واحد في المستند.
<address>: توفير معلومات التواصل للمحتوى الموجود في أقرب عنصر <article> أو <body> أب، وإذا كان سيوفر المعلومات لعنصر <body> أب فستُطبَّق المعلومات على كامل المستند.
<article>: تمثيل جزء من المستند أو الصفحة أو التطبيق أو الموقع الغرض منها هو القدرة على إعادة توزيعها واستخدامها بشكل مستقل، مثل موضوع في منتدى أو مقالة في صحيفة أو تدوينه.
:<aside> تمثيل جزء من المستند الذي يتعلق محتواه بشكلٍ أو بآخر بالمحتوى الرئيسي للمستند (ويُمثَّل هذا العنصر عادةً على شكل شريط جانبي).
<footer>: تمثيل تذييل لأقرب عنصر تقسيمي (sectioning element ) أو للمستند كله؛ ويحتوي التذييل عادةً على معلومات حول كاتب المحتوى أو معلومات حقوق النشر أو وصلات إلى مستندات مفيدة.
<h1 – h6>: تُمثِّل عناصر <h1>-<h6>ستة مستويات من ترويسات الأقسام، ويكون العنصر <h1> أعلى مستوى والعنصر <h6> أدنى مستوى.
<header>: يضم العنصر <header> مجموعةً من العناصر التمهيدية أو المساعدة على التنقل، وقت يحتوي على بعض عناصر الترويسات أو عناصر أخرى مثل شعار الموقع أو نموذج بحث.
<nav>: تمثيل قسم من الصفحة غرضه هو توفير روابط للتنقل، سواءً كانت ضمن المستند نفسه أو إلى مستندات أخرى.
من أكثر الأمثلة شيوعاً هي القوائم وجداول المحتويات والفهارس.
<section>: تمثيل قسم مستقل له وظيفة خاصة به ضمن مستند HTML ويكون له ترويسة عادةً، وهذا القسم ليس له وسمٌ خاصٌ يمكن أن يمثِّله.
المحتوى النصي
<blockquote>: يُشير العنص <blockquote> (اسم هذا العنصر اختصار للعبارة HTML Block Quotation Element) إلا أنَّ النص الموجود داخله هو نص اقتباس طويل.
يُعرَض هذا العنصر عادةً مع إضافة محاذاة قبله (راجع قسم الملاحظات في هذه المقالة لمعرفة كيفية تغيير طريقة العرض). يمكن توفير رابط URL لمصدر الاقتباس عبر الخاصية cite، أما التمثيل النصي للمصدر يمكن أن يوضع ضمن العنصر <cite>.
<dd>: الإشارة إلى شرح أحد المصطلحات في قائمة وصف description list أي العنصر <dl>.
<div>: العنصر <div> هو حاوية عامة للمحتوى التي لا تُمثِّل شيئاً معيّناً، يمكن استخدامها لتجميع العناصر لأغراض مثل التنسيق (باستخدام خاصيتَي class أوid)، أو إنشاء قسم جديد في المستند بلغةٍ أخرى \باستخدام الخاصية .(lang)
<dl>: تعريف أحد المصطلحات في قائمة وصف (description list يجب أن يكون هذا العنصر ابناً للعنصر <dl>، ويكون متبوعاً عادةً بعنصر <dd>؛ لكن إذا وردت عدِّة عناص <dt> متتالية فستُعرَّف عدِّة مصطلحات (terms التي ستُشرَح عبر عنصر <dd> التالي).
<figcaption>: تمثيل لافتة أو شرح مرتبط بصورة أو رسمة أو غير ذلك مما يمكن أن يوصف عبر العنصر <figure> الذي يجب أن يكون الأب المباشر لهذا العنصر.
<dt>: تعريف أحد المصطلحات في قائمة وصف (description list يجب أن يكون هذا العنصر ابناً للعنصر <dl>، ويكون متبوعاً عادةً بعنصر <dd>؛ لكن إذا وردت عدِّة عناصر <dt> متتالية فستُعرَّف عدِّة مصطلحات terms التي ستُشرَح عبر عنصر <dd> التالي.
<figure>: تمثيل محتوى مستقل بحد ذاته، ويستخدم عادةً مع لافتة (عبر العنصر <figcaption>)، ويُشير عادةً إلى وحدة لا تتجزأ من المعلومات.
<hr>: تمثيل فاصل موضوعي بين الفقرات (مثلًا: تغيّر المشهد في قصة ما، أو تبدّل الموضوع بإنشاء قسم جديد).
كان يُعرَض هذا العنصر في الإصدارات السابقة من HTML على شكل خط أفقي، وصحيحٌ أنَّه ما يزال يعرَض كذلك في المتصفحات، لكن أصبح له معنى هيكلي، بدلاً من كونه عنصراً شكلياً فقط.
<li>: لتمثيل عنصر في قائمة، ويجب أن يحتوى هذا العنصر في عنصر أب الذي يكون قائمة مرتبة <ol> أو قائمة غير مرتبة <ul> أو قائمة<menu> .
تُعرَض عناصر القوائم العادية <menu> والقوائم غير المرتبة وقبلها نقطة bullet point أما في القوائم المرتبة فتعرض عناصرها بترتيبٍ تصاعدي وقبلها رقم أو حرف يدل على ترتيبها.
<main>: تمثيل المحتوى الرئيسي لجسم المستند (العنصر <body>) أو لجزءٍ من المستند أو التطبيق. تضم منطقة المحتوى الرئيسي جميع المحتوى المرتبط مباشرةً بموضوع المستند أو يضيف عليه، أو يمثِّل الوظيفة الرئيسية للتطبيق.
<ol>: تمثيل قائمة مرتبة من العناصر، التي تُعرَض على شكل قائمة مرقمة.
<p>: يُمثِّل العنصر <p> فقرةً نصيةً، وتُعرَض الفقرات عادةً على شكل أقسام من النص يفصل بينها بمسافة فارقة رأسية، أو بزيادة محاذاة أوّل سطر.
<pre>: يُمثِّل العنصر <pre> نصاً منسقاً مسبقاً preformatted text والنص الموجود داخل هذا العنصر يُعرَض بخطٍ ذي عرضٍ ثابت monospaced fontكما هو مكتوب في الملف المصدري تماماً، وستُعرَض الفراغات الموجودة كما هي.
<ul>: تمثيل قائمة غير مرتبة من العناصر، التي تُعرَض على شكل قائمة منقطة عادةً.
<h1>: يمثل هذا العنصر الي كتابة النص في صفحة الويب وعند كتابة اكتر من نص فسيتم تغير قيمة الرقمية للكود البرمجي مثل (<h2>،<h3>……..).
- العناصر النصية:
<a>: يُنشِئ العنصر <a> (اسمه اختصار للكلمة anchor) رابطاً فائقاً hyperlink لصفحات الويب الأخرى أو للملفات أو لأقسم الصفحة الحالية أو لعناوين البريد الإلكتروني.
<a b b r>: تمثيل اختصار وتوفير شرح له، وعند إضافة الشرح يجب أن تحتوي الخاصية title على الشرح الكامل لهذا الاختصار فقط ولا يسمح بأي قيمة أخرى.
<b>: تمثيل نص يختلف تنسيقه عن تنسيق النص العادي، دون أن يكون له أهمية أو أولوية على بقية النص، ويُعرَض عادةً بخطٍ عريض bold.
<bdi>: يعزل العنصر <bdi> (اختصار للعبارة bidirectional isolation) جزء من النص الذي يمكن تنسيقه باتجاه نص (أي اتجاه النص من اليمين إلى اليسار مثل اللغة العربية، أو من اليسار إلى اليمين مثل اللغات اللاتينية) مختلف عن النص الذي حوله.
هذا العنصر مفيدٌ عند تضمين نص لا يُعرَف اتجاهه تحديداً – مثل تضمين نص من قاعدة البيانات – داخل نص له اتجاه نص معيّن.
<bdo>: يتجاوز العنصر <bdo> (اختصار للعبارة bidirectional override) اتجاه النص الحالي واستخدام اتجاه مُحدَّد مسبقاً.
<br>: يؤدي إلى الانتقال إلى سطرٍ جديد، وهو مفيد عند كتابة قصيدة شعرية أو عنوان ما، حيث يكون تقسيم الأسطر مهماً.
<cite>: تمثيل مرجعية لعملٍ إبداعي، إذ يجب أن يتضمن عنوان العمل أو رابط URL ويمكن أن يكون محتواه مختصراً وذلك اعتماداً على نوعية المرجعية التي يُشير إليها.
<code>: تمثيل جزء من شيفرة برمجية، ويُعرَض افتراضياً باستخدام الخط ذي العرض الثابت الذي يستعمله المتصفح.
<data>: يربط العنصر <data> بين محتوى العنصر وقيمة سهلة القراءة برمجياً.
إذا كان المحتوى متعلقاً بالوقت أو التاريخ، فيجب حينئذٍ استخدام العنصر <time>.
<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 وبنية هيكلها وسنتحدث فيما بعد عن ميزات وعيوب هذه اللغة استخداماتها برمجتها.
