مراجعة اتش.تي.ام.ال

أساسيات اتش.تي.ام.ال HTML Basics

• دور اتش.تي.ام.ال Role of HTML : تُعد HTML (لغة ترميز النص التشعبي Hypertext Markup Language) "أساس هيكلية الويب" (the foundation of web structure) ، حيث تحدد "عناصر صفحة الويب" (the elements of a webpage) .

• عناصر اتش.تي.ام.ال HTML Elements : تُستخدم لتمثيل المحتوى على الصفحة. وتتكون معظمها من وسم بداية ووسم نهاية ( على سبيل المثال: <h1></h1> و <p></p> ).

• بنية اتش.تي.ام.ال HTML Structure : تتكون HTML من "رأس" head و"جسم" body ، حيث يتم تنظيم "البيانات الوصفية" (metadata) و"الأنماط" (styles) و"المحتوى" (content) .

• عناصر اتش.تي.ام.ال الشائعة Common HTML Elements : العناوين ( <h1> — <h6> ) ، والفقرات ( <p> ) ، وحاويات "ديڢ" ( <div> ) .

• عناصر div : يُعد عنصر div عنصراً عاماً في لغة HTML لا يحمل أي "دلالة معنوية" (semantic meaning) ، ويُستخدم كـ"حاوية عامة" (a generic container) لاحتواء عناصر HTML أخرى.

• العناصر الفارغة Void Elements : لا تحتوي على وسم إغلاق ( مثل: <img> ).

• السمات Attributes : إضافة "بيانات وصفية وسلوك" (metadata and behavior) إلى العناصر.

المُعرِّفات والتجميع Identifiers and Grouping

• المُعرِّفات IDs : "مُعرِّفات فريدة للعناصر" (Unique element identifiers) .

• الفئات Classes : تجميع العناصر لتحديد "الأنماط والسلوك" (styling and behavior) .

الرموز الخاصة والربط Special Characters and Linking

• كيانات اتش.تي.ام.ال HTML entities : استخدام أحرف خاصة مثل ( & و < ) .

• عنصر link : الربط بـ"ملفات أنماط خارجية" (external stylesheets) .

• عنصر script : تضمين "ملفات جافاسكريبت خارجية" (external JavaScript files) .

القوالب النمطية والترميز Boilerplate and Encoding

• هيكل اتش.تي.ام.ال الأساسي HTML boilerplate : البنية الأساسية لصفحة الويب، وتتضمن عناصر DOCTYPE و html و head و body . ويُستخدم هذا الهيكل كنقطة انطلاق لأي مستند HTML .

• ترميز الأحرف UTF-8 : ضمان "عرض الأحرف بشكل عالمي" (universal character display) .

تحسين محركات البحث والمشاركة عبر وسائل التواصل الاجتماعي SEO and Social Sharing

• الوسوم الوصفية ( description ) Meta tags : توفير وصف موجز لصفحة الويب والتأثير على "تحسين محركات البحث" (SEO) .

• وسوم Open Graph : تعزيز المشاركة عبر وسائل التواصل الاجتماعي.

عناصر الوسائط والتحسين Media Elements and Optimization

• العناصر المستبدلة Replaced elements : المحتوى المضمّن ( مثل الصور وإطارات iframes ).

• تحسين الوسائط Optimizing media : تقنيات لتعزيز أداء الوسائط.

• تنسيقات الصور وتراخيصها Image formats and licenses : فهم حقوق الاستخدام والأنواع.

• ملفات SVG : "رسوم متجهة قابلة للتوسع" (Scalable vector graphics) للحصول على صور حادة وواضحة.

دمج الوسائط المتعددة Multimedia Integration

• عناصر الصوت والفيديو في اتش.تي.ام.ال HTML audio and video elements : تضمين الوسائط المتعددة.

• التضمين باستخدام iframe : دمج محتوى فيديو خارجي.

المسارات وسلوك الروابط Paths and Link Behavior

• أنواع سمة Target : التحكم في سلوك الرابط.

• المسارات المطلقة مقابل المسارات النسبية Absolute vs. relative paths : التنقل بين المجلدات.

• صيغة المسار Path syntax : فهم الرموز / و ./ و ../ للتنقل بين الملفات.

• حالات الرابط Link states : إدارة التفاعلات المختلفة مع الرابط ("عند تمرير المؤشر" hover ، و"عند التنشيط" active ).

• الروابط الداخلية Internal links : الربط بقسم آخر من الصفحة باستخدام السمة href="#id" في عنصر a ومنح العنصر الوجهة "المعرِّف" id نفسه.

أهمية لغة اتش.تي.ام.ال الدلالية Importance of Semantic HTML

• التسلسل الهرمي لعناصر العناوين Structural hierarchy for heading elements : من المهم استخدام عنصر العنوان الصحيح للحفاظ على التسلسل الهرمي لهيكلية المحتوى، إذ يمثل العنصر h1 أعلى مستوى للعناوين، بينما يمثل العنصر h6 أدنى مستوى لها.

• عناصر اتش.تي.ام.ال الخاصة بالعرض Presentational HTML elements : هي العناصر التي تحدد مظهر المحتوى، مثل العناصر التي عفا عليها الزمن مثل center و big و font .

• عناصر اتش.تي.ام.ال الدلالية Semantic HTML elements : تضفي هذه العناصر معنىً على هيكلية المحتوى. ومن الأمثلة عليها:

  • <header> : يُمثِّل المحتوى التمهيدي.

  • <nav> : يحتوي على روابط التنقل.

  • <article> : يُمثّل محتوىً قائماً بذاته.

  • <aside> : يُستخدم لـ"الأشرطة الجانبية" (sidebars) أو المحتوى ذي الصلة.

  • <section> : يُجمِّع المحتوى المرتبط ببعضه البعض داخل المستند.

  • <footer> : يُحدِّد تذييل قسم أو مستند.

عناصر اتش.تي.ام.ال الدلالية Semantic HTML Elements

• عنصر التركيز (em) Emphasis element: يحدد النص الذي يتطلب تركيزاً أو تشديداً .

• عنصر النص الاصطلاحي (i) Idiomatic Text element : يُستخدم لإبراز نبرة أو طابع مختلف، أو مصطلحات اصطلاحية من لغة أخرى، أو مصطلحات تقنية، أو الأفكار.

• عنصر الأهمية الكبيرة (strong) Strong Importance element : يحدد النص الذي يتمتع بأهمية كبيرة.

• عنصر لفت الانتباه (b) Bring Attention To element : يُستخدم للفت الانتباه إلى نص لا يُعد مهماً لمعنى المحتوى.

• عنصر قائمة الوصف (dl) Description List element : يُستخدم لتمثيل قائمة من مجموعات المصطلحات وأوصافها.

• عنصر مصطلح الوصف (dt) Description Term element : يُستخدم لتمثيل المصطلح الجاري تعريفه.

• عنصر تفاصيل الوصف (dd) Description Details element : يُستخدم لتمثيل وصف المصطلح.

• عنصر الاقتباس الكتلي (blockquote) Block Quotation element : يُستخدم لتمثيل قسم مقتبس من مصدر آخر.

• عنصر الاقتباس المضمن (q) Inline Quotation element : يُستخدم لتمثيل اقتباس قصير ضمن السطر.

• عنصر الاختصار (abbr) Abbreviation element : يُستخدم لتمثيل اختصار أو مُختصَر لفظي (acronym) .

• عنصر عنوان الاتصال (address) Contact Address element : يُستخدم لتمثيل معلومات الاتصال.

• عنصر التاريخ (Date) والوقت (time) (Date) Time element : يُستخدم لتمثيل تاريخ أو وقت أو كلاهما.

• عنصر النص المرتفع (sup) Superscript element : يُستخدم لتمثيل النص المرتفع.

• عنصر النص السفلي (sub) Subscript element : يُستخدم لتمثيل النص المكتوب بخط سفلي.

• عنصر الكود المضمن (code) Inline Code element : يُستخدم لتمثيل جزء من كود برمجي.

• عنصر التعليق التوضيحي غير المُصاغ (u) Unarticulated Annotation element : يُستخدم لتمثيل جزء من النص المُدرج ضمن السطر، بحيث يُعرَض بطريقة تشير إلى وجود تعليق توضيحي غير نصي مرتبط به.

• عنصر التعليق التوضيحي "روبي" (ruby) Ruby Annotation element : يُستخدم لتمثيل نص التعليق التوضيحي من نوع "روبي" (ruby) .

• عنصر الشطب (s) Strikethrough element : يُستخدم لتمثيل المحتوى الذي لم يعد دقيقاً أو ذا صلة.

عناصر وسمات نماذج اتش.تي.ام.ال HTML Form Elements and Attributes

النماذج Forms

• عنصر النموذج form : يُستخدم لإنشاء "نموذج اتش.تي.ام.ال" (an HTML form) لإدخال بيانات المستخدم.

• أنواع المدخلات الشائعة Common Input Types :

  • text , email , password , radio , checkbox , number , date .

• سمة الإجراء action : تُستخدم لتحديد عنوان URL الذي يجب إرسال بيانات النموذج إليه.

• سمة الطريقة method : تُستخدم لتحديد طريقة HTTP التي سيتم استخدامها عند إرسال بيانات النموذج. والطريقتان الأكثر شيوعاً هما GET و POST .

<form method="ضع—القيمة—هنا" action="ضع—الرابط—هنا">
 <!-- inputs go inside here توضع المدخلات هنا -->
</form>
                

• عنصر الإدخال input : يُستخدم لإنشاء حقل لإدخال بيانات المستخدم.

• سمة النوع type : تُستخدم لتحديد نوع حقل الإدخال، مثل: نص "text" ، أو بريد إلكتروني "email" ، أو رقم "number" ، أو زر اختيار "radio" ، أو مربع اختيار "checkbox" .

• سمة العنصر النائب placeholder : تُستخدم لعرض تلميح للمستخدم يوضح له ما يجب إدخاله في حقل الإدخال.

• سمة القيمة value : تُستخدم لتحديد قيمة عنصر الإدخال. إذا كان عنصر الإدخال من النوع "زر" "button" ، فيمكن استخدام هذه السمة لتعيين النص الذي يظهر على الزر.

• سمة الإسم name : تُستخدم لتحديد اسم لحقل الإدخال، حيث يعمل هذا الاسم كمفتاح عند إرسال بيانات النموذج. وفي حالة أزرار الاختيار (radio buttons) ، فإن منحها الاسم نفسه (the same name) يجمعها معاً، بحيث لا يمكن اختيار سوى خيار واحد فقط من المجموعة في آنٍ واحد.

• سمة الحجم size : تُستخدم لتحديد عدد الأحرف التي يجب أن تظهر أثناء كتابة المستخدم في حقل الإدخال.

• سمة الحد الأدنى min: يمكن استخدامها مع أنواع حقول الإدخال مثل "number" لتحديد الحد الأدنى للقيمة المسموح بها في حقل الإدخال.

• سمة الحد الأقصى max : يمكن استخدامها مع أنواع المدخلات مثل "number" لتحديد القيمة القصوى المسموح بها في حقل الإدخال.

• سمة الحد الأدنى للطول minlength : تُستخدم لتحديد الحد الأدنى لعدد الأحرف المطلوبة في حقل الإدخال.

• سمة الحد الأقصى للطول maxlength : تُستخدم لتحديد الحد الأقصى لعدد الأحرف المسموح به في حقل الإدخال.

• السمة مطلوب required : تُستخدم لتحديد وجوب تعبئة حقل الإدخال قبل إرسال النموذج.

• سمة التعطيل disabled : تُستخدم لتحديد أن حقل الإدخال يجب أن يكون معطلاً.

• سمة للقراءة فقط readonly : تُستخدم لتحديد أن حقل الإدخال مخصص للقراءة فقط.

<!-- Text input إدخال نص -->
<input
 type="text"
 id="name"
 name="name"
 placeholder="على سبيل المثال: التقنية العربية"
 size="20"
 minlength="5"
 maxlength="30"
 required
/>

<!-- Number input إدخال رقم -->
<input
 type="number"
 id="quantity"
 name="quantity"
 min="2"
 max="10"
 disabled
/>

<!-- Button  زر -->
<input type="button" value="عرض تنبيه" />
                




• عنصر التسمية label : يُستخدم لإنشاء تسمية لحقل إدخال.

• السمة إلى for : تُستخدم لتحديد حقل الإدخال الذي تعود إليه التسمية (the label) .

• الربط الضمني بين الحقل والتسمية Implicit form association : يمكن ربط حقول الإدخال بالتسميات (labels) عن طريق وضع حقل الإدخال داخل عنصر التسمية label .

<form action="">
 <label>
  الاسم الكامل:
  <input type="text" />
 </label>
</form>
                



الاسم الكامل:

• الربط الصريح للعناصر Explicit form association : يمكن ربط حقول الإدخال بالتسميات (labels) باستخدام السمة for في عنصر التسمية label .

<form action="">
 <label for="email">عنوان البريد الإلكتروني:</label>
 <input type="text" id="email" />
</form>
                



عنوان البريد الإلكتروني:

• عنصر الزر button : يُستخدم لإنشاء "زر قابل للنقر" (a clickable button) . يمكن أن يحتوي الزر أيضاً على سمة "النوع" type التي تتحكم في سلوك الزر عند تفعيله، مثل: "submit" (إرسال)، أو "reset" (إعادة تعيين)، أو "button" (زر عادي).

<button type="button">عرض النموذج</button>
<button type="submit">إرسال النموذج</button>
<button type="reset">إعادة تعيين النموذج</button>
                



عرض النموذج إرسال النموذج إعادة تعيين النموذج

• عنصر مجموعة الحقول fieldset : يُستخدم لتجميع عناصر الإدخال المترابطة معاً.

• عنصر التسمية التوضيحية legend : يُستخدم لإضافة تسمية توضيحية تصف مجموعة من حقول الإدخال.

<!-- Radio group مجموعة أزرار اختيار -->
<fieldset>
 <legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>

 <input id="yes-option" type="radio" name="hotel-stay" value="yes" />
 <label for="yes-option">نعم</label>

 <input id="no-option" type="radio" name="hotel-stay" value="no" />
 <label for="no-option">لا</label>
</fieldset>

<!-- Checkbox group مجموعة مربعات اختيار -->
<fieldset>
 <legend>
  لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)
 </legend>

 <input type="checkbox" id="location" name="location" value="location" />
 <label for="location">الموقع</label> 

 <input type="checkbox" id="price" name="price" value="price" />
 <label for="price">السعر</label> 
</fieldset>
                



هل كانت هذه زيارتك الأولى لفندقنا؟
نعم لا
لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)
الموقع السعر

• حالة التركيز Focused state : هي حالة حقل الإدخال عندما يختاره المستخدم.

التعامل مع عناصر وسمات الجداول في اتش.تي.ام.ال Working with HTML Table Elements and Attributes

• عنصر الجدول Table element : يُستخدم لإنشاء جدول اتش.تي.ام.ال .

• عنصر رأس الجدول (thead) Table Head element : يُستخدم لتجميع "محتوى الرأس" (the header content) في جدول اتش.تي.ام.ال .

• عنصر صف الجدول (tr) Table Row element : يُستخدم لإنشاء "صف" (a row) في جدول اتش.تي.ام.ال .

• عنصر ترويسة الجدول (th) Table Header element : يُستخدم لإنشاء "خلية ترويسة" (a header cell) في جدول اتش.تي.ام.ال .

• عنصر جسم الجدول (tbody) Table body element : يُستخدم لتجميع "محتوى الجسم" (the body content) في جدول اتش.تي.ام.ال .

• عنصر خلية بيانات الجدول (td) Table Data Cell element : يُستخدم لإنشاء "خلية بيانات" (a data cell) في جدول اتش.تي.ام.ال .

• عنصر تذييل الجدول (tfoot) Table Foot element : يُستخدم لتجميع "محتوى التذييل" (the footer content) في جدول اتش.تي.ام.ال .

• عنصر التسمية التوضيحية caption : يُستخدم لإضافة "عنوان" (a title) لجدول اتش.تي.ام.ال .

• سمة دمج الأعمدة colspan : تُستخدم لتحديد عدد "الأعمدة" (columns) التي يجب أن تمتد عليها "خلية الجدول" (a table cell) .

<table>
 <caption>درجات الامتحانات<caption>

 <thead>
  <tr>
   <th>اسم العائلة</th>
   <th>الاسم الأول</th>
   <th>الدرجة</th>
  </tr>
 </thead>

 <body>
  <tr>
   <td>ديفيس</td>
   <td>أليكس</td>
   <td>54</td>
  </tr>

  <tr>
   <td>دوو</td>
   <td>سامانثا</td>
   <td>92</td>
  </tr>

  <tr>
   <td>رودريغيز</td>
   <td>ماركوس</td>
   <td>88</td>
  </tr>
 </body>

 <tfoot>
  <tr>
   <td colspan="2">متوسط ​​الدرجة</td>
   <td>78</td>
  </tr>
 </tfoot>
</table>
            

أدوات اتش.تي.ام.ال HTML Tools

• أداة التحقق من اتش.تي.ام.ال HTML validator : أداة تفحص صياغة كود اتش.تي.ام.ال للتأكد من صحته.

• مُفتِّش "دوم" DOM inspector : أداة تتيح لك فحص وتعديل "بنية اتش.تي.ام.ال" (the HTML structure) الخاصة بصفحة ويب.

• أدوات المطور Devtools : مجموعة من الأدوات المخصصة لـ"مطوري الويب" (web developer) ، مدمجة مباشرة في المتصفح، تساعدك على تصحيح الأخطاء، وقياس الأداء، وتحليل صفحات الويب.

مقدمة في إمكانية الوصول Introduction to Accessibility

• إرشادات إمكانية الوصول إلى محتوى الويب Web Content Accessibility Guidelines : تُعدّ إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) مجموعة من الإرشادات لجعل محتوى الويب أكثر سهولة في الوصول إليه للأشخاص ذوي الإعاقة. وتتمثل المبادئ الأربعة لإرشادات (WCAG) في: POUR ، والتي ترمز إلى: قابلية الإدراك (Perceivable) ، وقابلية التشغيل (Operable) ، وقابلية الفهم (Understandable) ، والمتانة (Robust) .

التكنولوجيا المساعدة لتعزيز إمكانية الوصول Assistive Technology for Accessibility

• برامج قراءة الشاشة Screen readers : برمجيات تقرأ محتوى شاشة الحاسوب بصوت مسموع، ويستخدمها المكفوفون أو ضعاف البصر للوصول إلى شبكة الويب.

• لوحات المفاتيح ذات النصوص الكبيرة أو نظام "برايل" Large text or braille keyboards : يستخدمها الأشخاص ذوو الإعاقة البصرية للوصول إلى شبكة الويب.

• برامج تكبير الشاشة Screen magnifiers : برمجيات تعمل على تكبير محتوى شاشة الحاسوب، ويستخدمها الأشخاص ذوو الرؤية المحدودة للوصول إلى شبكة الويب.

• أجهزة التأشير البديلة Alternative pointing devices : يستخدمها الأشخاص ذوو الإعاقات الحركية للوصول إلى الويب. وتشمل هذه الأجهزة عصا التحكم (joysticks) ، وكرة التتبع (trackballs) ، ولوحة اللمس (touchpads) .

• التعرف على الصوت Voice recognition : يُستخدم من قِبَل الأشخاص ذوي الإعاقات الحركية للوصول إلى شبكة الويب، إذ يتيح للمستخدمين التحكم في الحاسوب باستخدام أصواتهم.

أدوات تدقيق إمكانية الوصول Accessibility Auditing Tools

• أدوات إتاحة الوصول الشائعة Common Accessibility Tools : تُعد كل من (Google Lighthouse) و (Wave) و (IBM Equal Accessibility Checker) و (axe DevTools) من الأدوات الشائعة المستخدمة لتدقيق مدى توفر إتاحة الوصول في المواقع الإلكترونية.

أفضل الممارسات لإمكانية الوصول Accessibility Best Practices

• الهيكلية السليمة لمستويات العناوين Proper heading level structure : ينبغي استخدام مستويات العناوين بشكل صحيح لإنشاء هيكلية منطقية للمحتوى، إذ يساعد ذلك التقنيات المساعدة على فهم محتوى موقعك الإلكتروني.

• إمكانية الوصول والجداول Accessibility and Tables : عند استخدام الجداول، ينبغي استخدام العنصر th لتحديد خلايا الرأس والعنصر td لتحديد خلايا البيانات، إذ يساعد ذلك التقنيات المساعدة على فهم "بنية الجدول" (the structure of the table) .

• أهمية ربط حقول الإدخال بالتسمية Importance for inputs to have an associated label : ينبغي استخدام عنصر label لربط التسميات بحقول إدخال النماذج، إذ يساعد ذلك التقنيات المساعدة على فهم الغرض من "حقل الإدخال" (the input) .

• أهمية "النص البديل" alt الجيد Importance of good alt text : ينبغي عليك استخدام السمة alt لتوفير بديل نصي للصور، إذ يساعد ذلك التقنيات المساعدة على فهم محتوى الصورة.

• أهمية نص الرابط الجيد Importance of good link text : ينبغي استخدام "نص وصفي للرابط" (descriptive link text) لمساعدة المستخدمين على فهم الغرض منه.

• أفضل الممارسات لجعل المحتوى الصوتي والمرئي متاحاً للجميع Best practices for making audio and video content accessible : ينبغي توفير نصوص مصاحبة "ترجمة نصية" (captions) و"نصوص مكتوبة" (transcripts) للمحتوى الصوتي والمرئي لجعله متاحاً للأشخاص الذين يعانون من ضعف السمع. كما ينبغي توفير "وصف صوتي" (audio descriptions) للمحتوى المرئي لجعله متاحاً للأشخاص الذين يعانون من ضعف البصر.

• السمة tabindex : تُستخدم لجعل العناصر "قابلة لتلقي التركيز" (focusable) وتحديد الترتيب النسبي للتنقل بينها باستخدام لوحة المفاتيح. من المهم عدم استخدام قيمة للسمة tabindex تزيد عن " 0 " ، وبدلاً من ذلك، ينبغي استخدام القيمة 0 أو -1 .

• السمة accesskey : تُستخدم لتحديد "اختصار لوحة مفاتيح" (a keyboard shortcut) لعنصر ما، مما يساعد المستخدمين الذين يعانون من إعاقات حركية على تصفح الموقع الإلكتروني بسهولة أكبر.

WAI-ARIA والأدوار والسمات WAI-ARIA, Roles, and Attributes

• WAI-ARIA : هو اختصار لـ "مبادرة إتاحة الويب ء تطبيقات الإنترنت الغنية القابلة للإتاحة" (Web Accessibility Initiative - Accessible Rich Internet Applications) . وهي مجموعة من السمات التي يمكن إضافتها إلى عناصر اتش.تي.ام.ال لتحسين "الإتاحة" (accessibility) ، حيث توفر معلومات إضافية للتقنيات المساعدة حول الغرض من المحتوى وبنيته.

• أدوار ARIA — ARIA roles : مجموعة من الأدوار المحددة مسبقاً التي يمكن إضافتها إلى عناصر اتش.تي.ام.ال لتحديد الغرض منها، مما يساعد التقنيات المساعدة على فهم محتوى الموقع الإلكتروني. ومن الأمثلة على ذلك: role="tab" و role="menu" و role="alert" .

• السمتان aria-label و aria-labelledby : تُستخدم هاتان السمتان لمنح العنصر اسماً برمجياً (أو اسماً متاحاً لتقنيات الوصول)، مما يساعد التقنيات المساعدة (مثل قارئات الشاشة) على فهم الغرض من العنصر. وغالباً ما يُلجأ إليهما عندما تكون التسمية المرئية للعنصر عبارة عن صورة أو رمز بدلاً من نص، حيث تتيح السمة aria-label تحديد الاسم مباشرةً داخل السمة نفسها، بينما تتيح السمة aria-labelledby الإشارة إلى نص موجود بالفعل في الصفحة.

• السمة aria-hidden : تُستخدم لإخفاء عنصر ما عن التقنيات المساعدة، مثل قارئات الشاشة. على سبيل المثال، يمكن استخدامها لإخفاء الصور الزخرفية التي لا تقدم أي محتوى ذي مغزى.

• السمة aria-describedby : تُستخدم لتوفير معلومات إضافية حول عنصر ما من خلال ربطه بعنصر آخر يحتوي على تلك المعلومات، مما يساعد التقنيات المساعدة على فهم الغرض من هذا العنصر.