اقوى مرجع عربي شامل للــ HTML5

تعتبر  HTML5  لغة توصيفية تستعمل اساسا لإنشاء صفحات الويب، وهي اختصار لجملة  Hypertext Markup Language و التي تعني "لغة ترميز النص الفائق"  وتستعمل ال اتش تي ام ال في غالب الاحيان مع  السي اس اس  CSS و الجافاسكربت JavaScript لكي تكون الصفحات احترافية و تفاعلية.

تعمل HTML5 بطريقة بسيطة حيث تمر من مراحلتين فقط قبل عرضها المرحلة الاولى استقبال  المتصفح   لمستندات HTML سواءا من الخادم  أو من نظام الجهاز، جيث ان الوظيفة الاساسية للغة HTML هي هيكلة الصفحات و تعتبر اساسية لبناء 90% من صفحات الويب .

تحتوي  HTML  مجموعة كبيرة من العناصر الأساسية و التي تستعمل لبناء مستندات HTML،

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

يمكن للاتش تي ام ال HTML أن تُضمِّن اكواد مكتوبة  بلغات اخرى  مثل الجافا سكربت JavaScript و  سي اس اس CSS  و حتى البي اتش بي PHP


اقوى مرجع عربي شامل للــ HTML5

مستندات  في الـ 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">
<script src="javascript.js"></script>
</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>.
إقرأ أيضا