ما هو HTML

               HTML شكل ومكونات صفحه وعنصر ال

المتصفح يتجاهل ا لمسافات والسطور الجديدة، فيمكن الكتابة بهذا الشكل لتسهيل قراءة الكود.

<!-- browser ignores spaces between elements content -->

<h1

style="

color: red;">

Book

Store

</h1

                                         Paragraphالفقرات النصية

من Margin يستخدم لكتابة الفقرات النصية، ويعطي تنسيقات افتراضية للعنصر مثل ال :P

اعلي وأسفل.

                                                     Attributesالسمات

هي سمات تضاف للعناصر لأضافه وظائف وخصائص للعنصر. :Attributes

سمات ممكن استخدمها علي جميع العناصر.:Global attributes

سمات مخصصة لعناصر محددة وليس كل العناصر, ولا يمكن :Element Attributes

استخدامهم علي كل العناصر

                                          Formatting Elements عناصر التنسيق

عناصر تقوم بإضافة تنسيقات علي النصوص :Formatting Elements

.CSS بدون الاحتياج الي لغة

نص سميك. :Bold

نص سميك أيضا لكن يستخدم في حال :Strong

كان النص مهم

نص مائل. :Italic

italic نص مائل والفرق بينه وبين ال :Emphasized

هو انه ليس مجرد تنسيق ونص مائل انما يضيف

أهمية للنص.

italicنص مائل والفرق بينه وبين ال :Emphasized

هو انه ليس مجرد تنسيق ونص مائل انما يضيف

أهمية للنص.

يقوم بتظليل النص.:Mark

أضافة خط أسفل النص.:Underline

يقوم بتصغير النص.:Small

يستخدم لعرض نص محذوف.:Deleted

يستخدم لأضافه خط تحت النص :Inserted

الجديد الذي تم إضافته على الصفحة بهدف لفت نظر

المستخدم لما تم إضافته

يستخدم لعرض النص بشكل منخفض قليلا :Subscript

عن باقي النص الموجود بجانبه. ومثال لاستخدامه يكتب به

رموز الجدول الدوري.

يستخدم لعرض النص بشكل مرتفع قليلاً عن :Superscript

باقي النص الموجود بجانبه وكمثال يستخدم ل كتابة الأرقام

والتواريخ..

                                                    Links Anchor Tag الروابط

يستخدم لأضافه الروابط الي الصفحة او يستخدم لربط صفحات الموقع ببعض او بعناصر :a

." href" وبعضها، لا يؤدي الكود وظيفته بدون السمات الأساسية مثل

                                                                      Lists القوائم

.قائمة غير مرتبة قائمة غير مرتبة وليس لها ترتيب رقمي محدد

قائمة مرتبة ترتيب رقمي من الاصغر للأكبر

قائمة الوصف يستخدم لكتابة المصطلحات ووصفها بطريقة منظمة

                                                                  Table الجدول

يستخدم لأضافه جدول، الجدول من أفضل الطرق التي تساعد على عرض البيانات وترتيبها في

. أعمدة وصفوف

<table></table>

<table>

<caption>Score This Month</caption><!-- Table Caption <-- عنوان لوصف الجدول

<thead><!-- Table Head <--رأ س الجدول

<tr><!-- tr => Table Row <--صف الجدول

<!-- th => Table Head cells <--خلايا رأ س الجدول

<th>First</th> <th>Last</th> <th>Mark</th>

</tr>

</thead>

<tbody><!-- Table Body <--جسم الجدول

<tr>

<!-- td => Table Cells <-- خلايا الجدول

<td>coding</td>

<td>amine</td>

<td>6</td>

</tr>

<tr>

<td>coding</td>

<td>amine</td>

<td>2</td>

</tr>

</tbody>

<tfoot><!-- Table Foot <--الجزء السفلي للجدول

<tr>

<!-- colspan => merge table cells <-- دمج خلايا الجدول

<td colspan="2">Total</td> <td>100</td>

</tr>

</tfoot>

</table>

                                  Span, Break, Horizontal Rule

ليس له أي تأثير على المحتوى الذي يتم وضعه فيه و الهدف الأساسي من استخدامه :Span

هو تعديل طريقة ظهور بعض المحتوى الموضوع

,CSS في الفقرات بواسطة كود

يستخدم لإعلان نهاية الفصل الحالي والمحتوي :Break

الذي يليه يوضع بعده علي سطر منفرد

يستخدم لأضافه خط أفقي في الصفحة :Horizontal Rule

                                                       Division 

يعبر عن القسم واستخدامه الأساسي هو تقسيم المحتوي واستدعاءه واجراء التعديلات علي

.وعلي العناصر التي بداخلة 

                                                   HTML Entitiesالكيانات

طريقة تستخدم لكتابة وتحويل الرموز الي نصوص باستخدام ا لكيانات المعبرة عن الرمز وهذا في

حاله إرادة كتابة نصوص تحتوي علي الرموز فيجب استخدام الكيانات التي ترمز اليها

                                          Semantic Elements العناصر المنطقية

,"<header> <table>" هي عناصر ذات معني منطقي تدل عل ى وظيفتها، مثال

.Semantic Element لا تدل عن معني واضح "<div> <span>" وهذا بعكس عناصر مثل

                                                           HTML Audio

, src يستخدم لأضافه ملف صوتي في الصفحة بعد تحديد مسار الملف عن طريق

النموذج

                                                                      Form النموذج

يستخدم لعرض نموذج بهدف استقبال البينات من المستخدم. 

Form Attributes سمات النموذج

مسؤوله عن تحديد الرابط الذي سيتم إرسال البينات المدخلة في النموذج إلية. :Action •

غير مشفرة". Get" مشفرة" أو Post" تحدد نوع طريقه الأرسال :Method •

ارسال النموذج واظهار النتيجة في صفحة جديدة. :Target •

ارسال البينات دون التحقق من الشروط يستخدم في حالة اختبار النموذج. :No validate •

المزيد عن سمات النموذج

                                                           عناصر أساسية في النموذج

.type حقل الادخال وله أنواع مختلفة يتم تحديدها بتحديد قيمة ال :Input •

يستخدم لوضع اسم لعنصر في :Label •

النموذج.

                                                  Input Attributes سمات عنصر الإدخال

يستخدم لتحديد نوع حقل الادخال, أنواع حقول الادخال. :Type

تجبر المستخدم علي ادخال بينات الحقل او :Required

النموذج

                                                           Input Type أنواع حقول الادخال

حقل مخصص لإدخال ا لنص العادي, هو القيمة الافتراضية لنوع الحقل اذا لم يتم تحديد :Text

نوع له.

حقل مخفي لا يظهر للمستخدم لكن يتم ارسال قيمة الحقل مع النموذج. :Hidden

حقل مخصص لكتابة الباسورد. :Password

                                                            HTML Elements

                يضيف علامات تنصيص في بداية ونهاية النص, :Quote

ويستخدم أحيانا في كتابة الاقتباسات

                                                               Accessibility

هي معايير يتم أتبعها أثناء كتابة كود الموقع وتوفر للمستخدم إمكانية التنقل بسهولة بين

ب قدر الإمكان. Semantic محتوي الموقع، و يجب ان يكون الكود

ي مكن أختبر كفاءة Google ملحوظة! في متصفح

. Lighthouse إمكانية الموصول للموقع باستخدام ا

                                                                  Important links

أبحث أولا قبل ان تسأل شخص. :“Google :D"

.Web "أ كاديمية الزيرو": موقع عربي يحتوي على العديد من المسارات التعليمية في ال 

.Web موقع ومرجع مهم لتعلم ال :"W3 Schools"

موقع مميز يقدم تفاصيل دقيقة جدا عن الاكواد ومفيد جدا للتعلم. :"MDN"

موقع للتعلم الذاتي في العديد من المسارات البرمجية، ويحتوي على :"Solo Learn"

مسائل واختبارات لتحديد مستوي تقدمك.