اقوى مرجع عربي شامل للــ HTML5
تعتبر HTML5 لغة توصيفية تستعمل اساسا لإنشاء صفحات الويب، وهي اختصار لجملة Hypertext Markup Language و التي تعني "لغة ترميز النص الفائق" وتستعمل ال اتش تي ام ال في غالب الاحيان مع السي اس اس CSS و الجافاسكربت JavaScript لكي تكون الصفحات احترافية و تفاعلية.
تعمل HTML5 بطريقة بسيطة حيث تمر من مراحلتين فقط قبل عرضها المرحلة الاولى استقبال المتصفح لمستندات HTML سواءا من الخادم أو من نظام الجهاز، جيث ان الوظيفة الاساسية للغة HTML هي هيكلة الصفحات و تعتبر اساسية لبناء 90% من صفحات الويب .
تحتوي HTML مجموعة كبيرة من العناصر الأساسية و التي تستعمل لبناء مستندات HTML،
إذ من خلالها تستطيع إضافة اشياء كثيرة مثل الفيديوهات و كدا الكائنات التفاعلية كالملفات و الصور و الاصوات كما تستطيع أيضًا ان تحصل على نتائج اكثر تنضيما ودلك باستخدام وسوم للتصريح مثلا العناوين و الفقرات والروابط والجداول و العديد من الامور الاخرى التي سنتعرف عليها.
يمكن للاتش تي ام ال HTML أن تُضمِّن اكواد مكتوبة بلغات اخرى مثل الجافا سكربت JavaScript و سي اس اس CSS و حتى البي اتش بي PHP
مستندات في الـ HTML5
تحتوي صفحات الاتش تي ام ال HTML على مجموعة من العناصر، والتي بدورها تتألف وسمين وسم البداية و وسم النهاية، بينهما يكون المحتوى المراد عرضه وفي غالب الاحيان يكون محتوى نصي ؛ كما يمكننا وضع داخل وسم البداية مجموعة من الخاصيات التي من خلالها تستطيع تغيير بعض الاور في العنصر مما يساعد في ضبطه بشكل جيد . كما عليك ان تكون حريصا في التعامل مع بعض العناصر و التي يمكن أن تتلخبط و تتشعب داخل بعضها البعض . مثل أقسام العناصر الاسااسية ندكر منها اربعة و هي:
- اولا وسم البداية: يحتوي عادتا على اسم العنصر، ويكون موضوعا بين قوسين حادين مثل اشارات اصغر و اكبر في الرياضيات مثال
<p>. - ثانيا وسم النهاية: هو الاخر نفس الشيء الفرق الوحيد بينه و بين وسم البداية هو ان العنصر الدي يكون بين القوسين الحادين يكون مسبوقا بعلامة سلاش / مثلًا:
</p>. - ثالثا المحتوى: وهو المحتو الدي يتم عرضه و الدي يكون بين وسم البداية و النهاية مثلا عندما تريد عرض كلمة مرحبا <p/>مرحبا <p>.
- رابعا العنصر: هو الكود الدي حصنا عليه <p/>مرحبا <p> .
تبدأ جميعاكواد الاتش تي ام ال بتصريح (DOCTYPE) كأنك تخبر به المتصفح بأنك ستكتب اكواد بإصدار HTML5، بعدها تقوم بتعريف العنصر <html> وبه تعلم المتصفح انك بدات كتابة كود HTML. و يحتوي العنصر <html> على عنصرين اساسيين <head> و <body> العنصر <head> يحتوي عادة على بيانات وصفية مثل العنصر <title> الذي تكتب بداخلة عنوان الصفحة و <link> الذي تستدعي به روابط كما يستعمل للاشارة الى مستندات اخرى مثلالاشار إلى مستند CSS اما <body> فهو الدي يظهر محتوى الصفحة ، كالنصوص و الصور والفقرات وغير ذلك من امور اخرى سنتعرف عليها. هدا مثال لكود بسيط لصفحة HTML5
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>هنا العنان</title> <link href="style.css" rel="stylesheet"> </head> <body> <img src="images/logo.png مسار الصورة مثال" alt="اسم الصورة"> <p>هنا النص</p> </body></html>العنصر الجذر في الـ HTML5
| العنصر | مهمته |
|---|---|
<html> | هو العنصر الرئيسي و الاساسي في مستندات HTML، ويسمى احيانا root element يجب أن يكون في بداية اي مستند HTML5 حيث بداخله تضمن جميع العناصر الاخرى. |
البيانات الوصفية في الـ HTML5
البيانات الوصفية تحتوي على معلومات الصفحة، و الأنماط مثل styles و script، وكدا البيانات المساعدة (كالمتصفحات و محركات البحث على سبيل المثال.)
| العنصر | مهمته |
|---|---|
<base> | مهمته تحديد أساس الروابط ما يسمى (relative URLs) |
<head> | يقوم بتوفير معلومات عن المستند مثل عنوان المستند و السكربتات وصفحات الأنماط. |
<link> | هو خاص بالروابط به يمكن ربط رابط مع نص او صورة كما يمكنك من استدعاء ملفات اخرى |
<meta> | الهدف منها تمثيل البيانات الوصفية التي لا تتوفر في عناصر HTML |
<style> | خاص بمعلومات التنسيق ويحتوي عادة على اكواد CSS. |
<title> | تعريف او عنوان المستند، الذي يظهر عند وضع الفأرة على عنصر ما. |
العناصر التقسيمية في الـ HTML5
العناصر التقسيمية نقوم من خلالها بتنظيم المحتوى داخل الصفحة اوتقسيمه ...كما يمكن ان ننشأ بها تخطيط هيكلي للعناصر داخل كترويسة الصفحة وعناصر الترويسات...
| العنصر | مهمته |
|---|---|
<body> | بداخله يكون كل ما تريد عرضه داخل صفحة HTML، ولا يمكن وضع ازيد من عنصر واحد <body> داخل كل مستند . |
<address> | يعطي معلومات الاتصال الخاصة بالمحتوى الموجود عنصر<article> أو <body> |
<article> | الغرض منه هو إعادة توزيع العناصر بشكل مستقل،مثل موضوع اومقال داخل تدوينة. |
<aside> | ( هذا العنصر يكون عادتا عبارة عن شريط جانبي يحتوي على عناصر اخرى). |
<footer> | هو عبارة عن القسم السفلي للصفحة يحتوي عادةً على معلومات حول صاحب الموقع او المحتوى وغالبا حقوق النشر. |
<h1-h6> | العناصر من <h1>الى<h6> هي ستة احجام للعناوين اكبرها <h1> و اصغرها <h6>. |
<header> | العنصر <header> يضم مجموعة من العناصر التي تسهل عملية التنقل وفي غالب الاحيان تحتوي القائمة العلوية |
<nav> | قسم من اقسام الصفحة و الغرض منه انشاء روابط تنقل، |
<section> | استعمالاته عديدة يستعمل في الجداول و القوائم المحتويات والفهارس الخ... |
المحتوى النصي في الـ HTML5
المحتوى النصي يستخدم عادة لتنظيم المحتوى الموجودة في العنصر <body>، وهي ضرورية لمعرفة الغرض من المحتوى الموجود بها، كما تساعد في فهرسة الصفحة.
| العنصر | مهمته |
|---|---|
<blockquote> | <blockquote> اختصارٌ لجملة HTML Block Quotation Element النص الدي يكون داخله يكون اقتباس طويل. |
<div> | العنصر <div> عبارة حاوية للمحتوى ،تستخدم عادة لتجميع العناصر لأغراض غير محددة لاكن في غالب الاحيان تكون لاغراض مثل التنسيق ودلك باستخدام الخاصية class أو id |
<dl> | هي اختصار جملة description list، وهو عبارة عن عنصر يتضمن مجموعةً من المصطلحات وشروحاتها. يستخدمه فئة محددة من المستعملين غالبا في مجال شرح المصطلحات، |
<dt> | اختصار ل description list، عنصر قريب للعنصر <dl>، يكون عادة متبوعا بعنصر <dd>. |
<figcaption> | كون مرتبط عادة بالصور أو الرسومات أو غير ذلك |
<figure> | ويستخدم في العادة مع العنصر <figcaption> يشار به الى جزء محدد من المعلومات . |
<hr> | يُعرَض هذا العنصر على شكل خط أفقي، عادة يستعمل للتفرقة بين اقسام معينة ... |
<li> | به يمكنك انشاء قائمة، لاكن ضروري ان يحتوي هذا العنصرعلى قائمة مرتبة <ol> أو قائمة غير مرتبة <ul> |
<main> | غابا ما يستعمل كوظيفة رئيسية للتطبيق. |
<ol> | يمكن ان تنشأ به قائمة مرتبة من العناصر،تُعرَض على شكل قائمة مرقمة. |
<p> | <p> يعرض الفقرات و النصوص عادة كما يفصل بينها بمسافة قليلة رأسية، |
<pre> | العنصر <pre> اختصار لعبارة preformatted text، الهدف من استعماله عرَض النص بخط له عرضٍ ثابت |
<ul> | يمكن ان تنشأ به قائمة غير مرتبة من العناصر و التي يتم عرضها على شكل قائمة منقطة في غالب الاحيان. |
العناصر النصية في الـ HTML5
العناصر النصية تستخدم لإضفاء تنسيق إلى كلمة او رابط او اي محتوى نصي .
| العنصر | مهمته |
|---|---|
<a> | العنصر <a> اختصار لكلمة anchor عبارة عن روابط لنطاقات او لصفحات ويب أخرى كما يستعمل ايضا للملفات و لعنواين البريد الإلكتروني . |
<b> | ويُعرَض عادةً بخطٍ عريض عادة يستعمل لتبيين كلمة مهمة داخل النص. |
<bdi> | <bdi> اختصار للجملة bidirectional isolation يمكن التحم من خلاله في الاتجاه (أي اتجاه النص من اليمين إلى اليسار مثل اللغة العربية، أو من اليسار إلى اليمين مثل اللغات اللاتينية |
<br> | يسعمل للانتقال إلى سطر جديد، |
<i> | تجعل النص مائل اي مختلف عن بقية النص ، يتعمل عادة لتمييز مصطلحات أو العبارات محددة |
<kbd> | يؤدي هدا العنصر إلى عرض النص بخط عريض و ثابت الذي يستعمل عادة في المتصفح. |
<span> | <span> هو عبارة عن حاوية سطرية، والتي يمكن أن تستعمل لتجميع عناصر من أجل التنسيق بالخاصيتين id أو class |
<strong> | العنصر <strong>يعرض النص عادة بخط عريض |
<sup> | تمثل جزءا من النص الذي يجب أن يُعرَض كما هو دون اي تاثيرات |
<u> | العنصر <u> يستخدم عادة لعرض خط أفقي تحت النص. |
الوسائط المتعددة في الـ HTML5
HTML تدعم خاصية مهمة وهي تضمين الوسائط مثل ملفات الصور و الفديو و الاصوات.
| العنصر | مهمته |
|---|---|
<audio> | يقوم هدا العنصر بتضمين المحتوى الصوتي داخل الصفحة، |
<img> | يستعمل لاضافة الصور في الصفحة. |
<map> | يستخدم الى جانب العنصر <area> و دلك لاضافة الخريطة الى المستند |
<track> | يستخدم غالبا داخل عناصر الفديوا و الاصوات <audio> أو <video> |
<video> | خاص بتضمين الفديوهات في الصفحات، |
تضمين المحتوى في الـ HTML5
الى جانب الوسائط ، يمكننا ان نقوم بتضمن المحتوى ،بالرغم من تعقيده يبقى مفيد
| العنصر | الوصف |
|---|---|
<embed> | من خلاله يمكنك إدراج تطبيق خارجي أو محتوى تفاعلي |
<object> | عبارة عن مورد خارجي، يمكنالتعامل معه كصورة، . |
<param> | يعرف معاملاتparameters ل <object>. |
<source> | العنصر <source> يستدعي الملفات و الوسائط المتعددة ضمن العنصر<audio> أو <video>. اكثر استعمالاته هو توفير محتوى كالوسائط المتعددة بصيغ مختلفة |
السكربتات في الـ HTML5
لكي تنشاء محتوى تفاعلي داخل مواقع و تطبيقات الويب، التي تدعم HTML من الضوري استعمال لغات السكربتات، ومن اشهرها JavaScript، .
| العنصر | مهمته |
|---|---|
<canvas> | العنصر <canvas> يستخدم مع واجهة برمجة خاصة له العديد من المزايا مثل تحريك الرسومات ... |
<noscript> | العنصر <noscript> عبارة عن قسم من اكواد HTML التي يمكن اضافتها إلى الصفحة في حالة إذا لم يكن متصفحك يدعم العنصر <script> |
<script> | غني عن التعريف يستعمل لتضمين الاسكربت قابل للتنفيذ بالخصوص اكربتات الجافا سكربت. |
التعديلات في الـ HTML5
عناصر من خلالها يمكننا الإشارة إلى اجزءا من النص قد تم تغييره من قبل.
| العنصر | الوصف |
|---|---|
<del> | يستعمل في حالة نص قد حذِف من الصفحة، |
<ins> | يستعمل في حالة اضافة نص الى المستند اي الصفحة |
الجداول في الـ HTML5
تُستعمَل هذه العناصر لإنشاء والتعامل مع البيانات المجدولة.
| العنصر | مهمته |
|---|---|
<caption> | مهمته هي تمثيل عنوان الجدول، |
<col> | مهمته انشاء عمود في الجدول، |
<colgroup> | مهمته تعريف الاعمدة في الجداول. |
<table> | به يمكن تنضيم البيانات المجدولة اي المضمنة داخل الجدول |
<tbody> | جامع بين العنصر <tr> و <table>. |
<td> | يقوم بتعريف جزء في الجدول. |
<tfoot> | يقوم بتعريف مجموعة من الأسطر الخاصة بالعنصر<table>. |
<th> | يقوم بتعريف ترويسة في الجدول الذي يحتويها. |
<thead> | مهمته تعريف الأسطر التي هي عبارة عت ترويسة لأعمدة <table>. |
<tr> | مهمته تعريف سطر يحتوي على اجزاء في جدول، وبالاخص العنصرين <th> و <td>. |