‫المـرجـع الكـامـل‬

‫وأكث من ‪ 115‬خاصية‬‫أكث من ‪ 100‬عنرص ر‬‫رشح ر‬

‫ر‬
‫وشح كل القيم المدعومة يف آخر إصدار‬

‫ي‬‫ن‬ ‫م‬
‫وائل ر‬
 ‫ُ َّ‬ ‫َ‬ ‫ُ َّ‬
‫دول‬
‫غث تجاري ‪ -‬منع االشتقاق ‪ 4.0‬ي‬
‫اإلبداع نسب المصنف ‪ -‬ر‬
‫ي‬ ‫المصنف مرخص بموجب رخصة المشاع‬ ‫هذا‬
‫وأب رحمهما‬
‫أم ي‬ ‫هذا الكتاب صدقة جارية عىل روح ي‬
‫هللا‪ ،‬وأرجو منك عزيزي القارئ أن تتذكرهما بدعوة‬
‫وتعال‬
‫ي‬ ‫بظهر الغيب أن يتغمدهما هللا سبحانه‬
‫بواسع رحمته وعظيم مغفرته‬
‫خثا‬
‫وجزاكم هللا ر‬
 ‫إهـ ـ ـداء‬

‫إىل أمي و أيب‬

‫"غفر هللا هلما ورمحهما رمحة واسعة"‬
 ‫مقدمة‬
‫العالمي والصالة والسالم عىل رسول هللا‪ ،‬نبينا محمد‪ ،‬المبعوث‬
‫ر‬ ‫الحمد هلل رب‬
‫أجمعي‪ ،‬ومن اهتدى بهديه‪ ،‬واسي بسنته إل‬‫ر‬ ‫للعالمي‪ ،‬وعىل آله وصحبه‬
‫ر‬ ‫رحمة‬
‫يوم الدين‪.‬‬
‫وبعد‪ ،‬فإنه بعد عناء شديد‪ ،‬وجهد جهيد‪ ،‬استمر ألشهر عديدة‪ ،‬قد تقارب العام‪،‬‬
‫وه تضم‬‫فإن ين أقدم لكم هذه السلسلة المرجعية‪ ،‬يف تصميم المواقع اإللكثونية‪ ،‬ي‬
‫األخثة‪ ،‬ليكونا جاهزين ر‬
‫للنش يف‬ ‫ر‬ ‫كتابي آخرين يف مراحلهما‬
‫ر‬ ‫كتاب هذا‪ ،‬باإلضافة إل‬
‫ي‬
‫أقرب فرصة‪ ،‬وهما‪ ،‬المرجع الكامل لكل عناص وخصائص وقيم ‪ ، SVG‬والمرجع‬
‫جزئي بمشيئة هللا‪.‬‬
‫ر‬ ‫الكامل لكل خصائص وقيم ‪ CSS‬والذي سيصدر يف‬
‫وأظنك عزيزي القارئ‪ ،‬قد الحظت أن ين دائما أضع كلمة ككلك يف رشح عناوين‬
‫ه أ يب‬
‫كتن‪ ،‬ولعلك تسأل عن اإللحاح والتأكيد عىل هذه الكلمة‪ ،‬واإلجابة ببساطة‪ ،‬ي‬
‫ي‬
‫ال أؤلف كتابا مخترصا‪ ،‬وال كتابا متخصصا يف جزء أو أجزاء معينة من مادة أو لغة‬
‫ً‬
‫معينة‪ ،‬وإنما أقدم مرجعا شامال بمعن الكلمة‪ ،‬يضم كل العناص وكل الخصائص وكل‬
‫نن شخصيا قد‬ ‫الحال يف معظم متصفحات الويب‪ ،‬أل ي‬‫ي‬ ‫القيم‪ ،‬المدعومة يف الوقت‬
‫كثثا من البحث عن كيفية تنفيذ فكرة معينة‪ ،‬رأيتها عىل أحد المواقع أو‬
‫عانيت ر‬
‫إحدى الصفحات‪ ،‬ألفاجأ بعد فثة من البحث‪ ،‬أن التنفيذ كان باستخدام عنرص لم‬
‫الن درستها‪ ،‬ثم أفاجأ أن هناك‬ ‫أدرسه من قبل‪ ،‬ال يف دروس الفيديو وال يف الكتب ي‬
‫أنن أضيع وقتا‬
‫عنرصا آخر وخاصية أخرى وقيم أخرى وأخرى لم أدرسها‪ ،‬ووجدت ي‬
‫طويال ف البحث‪ ،‬ف مواقع الفيديو والكتب والمقاالت‪ ،‬حن ر‬ ‫ً‬
‫أعث عىل كيفية عمل‬ ‫ي‬ ‫ي‬
‫اإلنجلثية‪.‬‬
‫ر‬ ‫هذا العنرص أو تلك الخاصية أو هذه القيمة‪ ،‬ولو باللغة‬
‫المبذولي‬
‫ر‬ ‫الدارسي‪ ،‬الوقت والمعاناة‬
‫ر‬ ‫غثي من‬ ‫لذلك فقد رأيت أن أوفر عىل ر‬
‫خالل بحثهم‪ ،‬وأن أؤلف مراجعا باللغة العربية‪ ،‬تضم كل العناص والخصائص والقيم‬
‫الن قد تصادفك بعضها يوما ما‪ ،‬يف أحد المواقع أو‬
‫المدعومة يف ‪ HTML5‬و ‪ ،CSS3‬و ي‬
 ‫ً‬
‫الدروس‪ ،‬فبدال من أن تجوب المواقع والكتب والمقاالت‪ ،‬بحثا عن نصف إجابة ولو‬
‫بلغة ال تتقنها‪ ،‬فأنا أقدم لك إجابة شاملة‪ ،‬ر‬
‫بالشح والصور والكود المجرب‪ ،‬عن أي‬
‫الشهثة‪ ،‬لتستغل‬
‫ر‬ ‫مدعومي يف متصفحات الويب‬
‫ر‬ ‫عنرص أو أي خاصية أو أي قيمة‬
‫ً‬
‫بدال من أن تضيع وقتك ف بحث قد ال يصل بك إل ر‬
‫شء‪،‬‬‫ي‬ ‫ي‬ ‫وقتك يف التعلم والتجربة‪،‬‬
‫سوى الضيق والملل‪ ،‬وربما يصيبك اليأس‪ ،‬فتضطر أن تهجر ما درسته وما أضعت‬
‫ً‬
‫وقتا طويال يف تعلمه وإتقانه‪ ،‬ألنك وجدت ‪ -‬رغم جدك واجتهادك يف الدراسة ‪ -‬أنه‬
‫الكثث الذي لم تحصله‪.‬‬
‫ر‬ ‫يفوتك‬
‫مرجع هذا‪ ،‬فهو مرجع شامل لكل العناص المدعومة يف ‪ ، HTML5‬وكل‬ ‫ي‬ ‫أما‬
‫وه‬
‫الن يتم إسنادها لكل خاصية‪ ،‬ي‬
‫الن يتم تعيينها لكل عنرص‪ ،‬وكل القيم ي‬
‫الخصائص ي‬
‫كل العناص والخصائص والقيم المدعومة حاليا يف جميع المتصفحات أو معظمها‪،‬‬
‫كثة‬‫وقد اخثت لتجربة األكواد متصفحي فقط‪ ،‬حن ال يتشتت القارئ من ر‬
‫ر‬
‫المتصفحات‪ ،‬وما هو مدعوم هنا وليس مدعوما هناك‪ ،‬واختالف السلوك يف هذا عن‬
‫ذاك‪ ،‬وهما المتصفحان ‪ Chrome‬و ‪. Firefox‬‬
‫الشهث ‪ ، MDN‬بجانب‬
‫ر‬ ‫األساش يف تأليف هذا الكتاب‪ ،‬هو الموقع‬
‫ي‬ ‫مرجع‬
‫ي‬ ‫وكان‬
‫العديد من المواقع األخرى‪ ،‬وبتوفيق هللا‪ ،‬لن تجد ‪ -‬عزيزي القارئ ‪ -‬أي عنرص أو‬
‫مدعومي يف ‪ HTML5‬إال وقد رشحتها بالقول المفصل‪ ،‬وبالكود‬‫ر‬ ‫خاصية أو قيمة‪،‬‬
‫الن توضح مخرجات هذا الكود‪ ،‬ليكون أمام القارئ كل الوسائل‬ ‫المجرب‪ ،‬وبالصور ي‬
‫وتأثثها يف بناء الصفحة‪ ،‬وقد بذلت غاية‬
‫ر‬ ‫الن تجعله مدركا لطبيعة عملها وسلوكها‬
‫ي‬
‫ً‬
‫كتاب هذا‪ ،‬مساهما ولو بقدر بسيط يف تسهيل التعلم واكتساب‬
‫ي‬ ‫الجهد‪ ،‬آمال أن يكون‬
‫الن تؤهلك إلتقان بناء المواقع اإللكثونية‪ ،‬يف أقرب وقت ممكن‪.‬‬
‫المهارات‪ ،‬ي‬

‫منث‬
‫وائل ر‬
 ‫التواصل والنقاش‬
‫هذا العمل نتاج عمل فردي شاق ومضن‪ ،‬ولألسف الشديد لم أجد من يقوم‬
‫الن لم يسبق أن رأيت‬
‫كثث المعلومات‪ ،‬ي‬ ‫الكبث ‪ ،‬لما يحتويه من ر‬
‫ر‬ ‫بمراجعة هذا العمل‬
‫رشحا لها باللغة العربية‪ ،‬عىل أي موقع أو فيديو أو كتاب أو مقال‪.‬‬
‫وقد تحريت كل وسائل البحث والتدقيق والمراجعة‪ ،‬حن أصل إل معلومة‬
‫صحيحة ومدققة ال يشوبــها أي شبهة خطأ ولو بسيط‪ ،‬ولكن ودائما فوق كل ذي‬
‫علم عليم‪ ،‬فربما أكون قد أخطأت فهم نقطة معينة‪ ،‬أو سهوت عن رشح موضوع‬
‫من‪ ،‬وأرجو منك‬
‫فإب أعتذر منكم مقدما‪ ،‬عن أي خطأ أو سهو قد يبدر ي‬
‫معي‪ ،‬لذلك ي‬
‫ر‬
‫مع لتوضيح وجهة نظرك‪ ،‬ولنتناقش فيها‪،‬‬
‫عزيزي القارئ‪ ،‬أن تبادر بالتواصل ي‬
‫من‪ ،‬أو أقنعك بوجهة نظري إن كانت صحيحة‪ ،‬فالتواصل‬
‫وأصوب إن كان الخطأ ي‬
‫والنقاش قد يفتح لنا أبوابا من الفهم واإلدراك‪ ،‬ربما لم تكن لتفتح لوال تواصلنا‬
‫صفحن عىل‬
‫ي‬ ‫أتلق مالحظاتكم القيمة ونصائحكم الغالية‪ ،‬عىل‬
‫ي‬ ‫ويسعدب أن‬
‫ي‬ ‫ونقاشنا‪،‬‬
‫وب‪:‬‬
‫الفيسبوك أو الثيد اإللكث ي‬

‫‪https://facebook.com/wailmonir0‬‬
‫‪e-mail: [email protected]‬‬

‫المؤلف‬
 ‫فهرس الموضوعات‬

‫رقم‬
‫الصفحة‬
‫الموضوع‬

‫‪1‬‬ ‫مقدمة عن ‪HTML‬‬

‫‪2‬‬ ‫كيف ر ئ‬
‫تنش صفحة ويب‬
‫‪4‬‬ ‫الدخول إل ‪HTML‬‬
‫‪9‬‬ ‫أنواع عناص ‪ HTML‬حسب تدفقها يف الصفحة‬
‫‪11‬‬ ‫الخصائص ‪Attributes‬‬
‫‪16‬‬ ‫الن يستخدمها المتصفح يف العرض‬ ‫األنماط ي‬
‫‪17‬‬ ‫هيكل كود صفحة ‪HTML‬‬
‫‪25‬‬ ‫تقسيم عناص ‪HTML‬‬
‫‪26‬‬ ‫عناص الكتابة وتنسيق النصوص‬
‫‪58‬‬ ‫التشابه ربي العناص يف التنسيق الظاهري‬
‫‪59‬‬ ‫عناص تجزئة الصفحة‬
‫‪77‬‬ ‫الروابط التشعبية ‪Hyperlinks‬‬
‫‪81‬‬ ‫عناص القوائم ‪List Elements‬‬
‫‪92‬‬ ‫عناص الجدول ‪Table Elements‬‬
‫‪104‬‬ ‫عناص النموذج ‪Form Elements‬‬
‫‪171‬‬ ‫عناص الدمج ‪Embedding Elements‬‬
‫‪202‬‬ ‫العناص الوصفية ‪Metadata Elements‬‬
‫‪223‬‬ ‫الخصائص العامة ‪Global Attributes‬‬
‫‪241‬‬ ‫خصائص الحدث ‪Event Attributes‬‬
‫‪275‬‬ ‫ملحق ‪ 1‬خصائص مشثكة‬
‫‪284‬‬ ‫محىل‬
‫ي‬ ‫ملحق ‪ 2‬تثبيت خادم‬
‫‪292‬‬ ‫ملحق ‪ 3‬إنشاء ملف ترجمة‬
 ‫فهرس العناص مرتبة أبجديا وموضعها يف المرجع‬
Element Page No. Element Page No. Element Page No.
<a> 77 <footer> 74 <rp> 54
<abbr> 26 <form> 104 <rt> 54
<address> 37 <head> 202 <ruby> 54
<area> 179 <header> 73 <s> 41
<article> 68 <h1>…<h6> 61 <samp> 42
<aside> 71 <hr> 66 <script> 218
<audio> 190 <html> 19 <section> 69
<b> 32 <i> 34 <select> 162
<base> 204 <iframe> 198 <slot> 53
<bdi> 48 <img> 171 <small> 47
<bdo> 50 <input> 107 <source> 182
<blockquoute> 45 <ins> 39 <span> 30
<body> 59 <kbd> 42 <strong> 33
<br> 64 <label> 116 <style> 209
<button> 160 <legend> 167 <sub> 46
<canvas> 187 <li> 86 <summary> 76
<caption> 94 <link> 206 <sup> 47
<cite> 35 <main> 70 <svg> 188
<code> 41 <map> 179 <table> 92
<col> 101 <mark> 46 <tbody> 98
<colgroup> 100 <menu> 89 <td> 99
<data> 31 <meta> 211 <template> 53
<datalist> 169 <meter> 56 <textarea> 158
<dd> 90 <nav> 72 <tfoot> 98
<del> 40 <noscript> 221 <th> 94
<details> 76 <object> 196 <thead> 94
<dfn> 36 <ol> 81 <time> 52
<dialog> 75 <optgroup> 166 <title> 203
<div> 63 <option> 164 <tr> 99
<dl> 90 <output> 170 <track> 193
<dt> 90 <p> 27 <u> 38
<em> 34 <param> 197 <ul> 87
<embed> 195 <picture> 182 <var> 35
<fieldset> 167 <pre> 43 <video> 192
<figcaption> 185 <progress> 55 <wbr> 51
<figure> 185 <q> 44
 ‫فهرس الخصائص مرتبة أبجديا وموضعها يف المرجع‬
Attribute Page No. Attribute Page No. Attribute Page No.
accept 130 form 111 open 75
accept-charset 104 formaction 112 optimum 56
accesskey 225 formenctype 113 orient 145
action 105 formmethod 113 pattern 128
allow 198 formnovalidate 113 ping 78, 181
allowfullscreen 199 formtarget 113 placeholder 114, 127
allowpaymentrequest 199 headers 97 playsinline 192
alt 172, 180 height 135, 173 poster 192
as 207 hidden 227 preload 191
async 219 high 56 readonly 114, 129
autocapitalize 110 href 77, 180 refferrerpolicy 78, 199
autocomplete 105 hreflang 78, 180 rel 106, 206
autofocus 110, 159 http-equiv 214 required 114, 140
autoplay 191 id 231 reversed 84
capture 130 imagesrcset 207 rows 158
charset 211 imagesizes 208 rowspan 95
checked 119, 143 integrity 219 sandbox 199
cite 39, 40, 44 inputmode 237 scope 97
class 226 ismap 174 selected 164
cols 158 itemprop 238 shape 179
colspan 96 kind 193 size 114, 162
content 212 label 194 sizes 177
contenteditable 227 lang 232 span 100
controls 190 list 113, 169 spellcheck 115
coords 179 loading 174, 199 src 134, 171
crossorigin 173, 191 loop 191 srcdoc 200
data 196 low 56 srclang 193
data-* 228 max 56,113 srcset 174, 182
datetime 39, 40, 52 maxlength 114 start 82
decoding 173 minlength 114 step 115,138
default 193 media 182, 207 style 233
defer 219 method 105 tabindex 235
dir 48,50,229 min 56, 113 target 77, 106
dirname 111 multiple 127, 163 title 36, 234
disabled 112, 206 muted 190 type 77,84,107
download 78, 180 name 106, 212 usemap 174
draggable 230 nomodule 220 value 56,83,115
enctype 105 nonce 220 width 135, 173
for 116, 170 novalidate 106 wrap 159
.‫وباف المواضع بنفس السلوك‬ ‫ر‬
،‫األكث‬ ‫* بعض الخصائص قد تكررت مع ر‬
‫ فذكرت ثالثة مواضع عىل‬،‫أكث من عنرص‬
‫ي‬
‫مق ـ ـ ـ ـ ـ ـ ـ ــدم ـ ـ ـ ـ ـ ـ ــة‬
‫‪Inroduction‬‬
‫منث‬
‫وائل ر‬ ‫‪HTML‬‬ ‫المرجع الكامل يف‬ ‫مقدمة‬

‫مقدمة عن ‪HTML‬‬
‫لشح أكث قدر ممكن من عناص ‪ ، HTML‬وخصائصها ‪ ،‬وقيم‬ ‫بما أن هذا العمل يهدف ر‬
‫العمىل‪،‬‬ ‫مباشة إل ممارسة ‪ ، HTML‬والبدء يف التطبيق‬ ‫هذه الخصائص‪ ،‬فقد رأيت الدخول ر‬
‫ي‬
‫فإنن لن أضيع وقتا يف مناقشة ما أعتثه معلومات عامة‪ ،‬مثل تاري ــخ شبكة الويب‬ ‫ي‬ ‫لذلك‬
‫غث مؤثر يف عملية التعلم والدراسة مثل تاري ــخ ‪ HTML‬ونشأتها‬ ‫وأهميتها يف حياتنا‪ ،‬أو ما أظنه ر‬
‫يكفين فقط أن تعلم أننا سوف نتناول كل العناص والخصائص والقيم‬ ‫ي‬ ‫الكثثة‪،‬‬
‫ر‬ ‫وإصداراتها‬
‫األخث ‪ ، HTML5‬حيث إن كل المواقع والمتصفحات ‪ -‬تقريبا ‪ -‬أصبحت‬ ‫ر‬ ‫المدعومة يف اإلصدار‬
‫مدعومي يف اإلصدارات‬
‫ر‬ ‫تعمل بهذا اإلصدار‪ ،‬لذلك‪ ،‬لن أناقش أي عنرص أو خاصية أو قيمة‬
‫السابقة مثل ‪ ، HTML4‬إال إذا كانوا مدعوم ري يف ‪ ، HTML5‬فال حاجة إلضاعة الوقت‪ ،‬يف رشح‬
‫يوَ بعدم استخدامها‪.‬‬ ‫المهمل من العناص‪ ،‬والخصائص والقيم‪ ،‬والن َ‬
‫ي‬
‫والمتفلسفي‪ ،‬هل‬
‫ر‬ ‫المبتدئي‬
‫ر‬ ‫الن ال يرج منها نفعا‪ ،‬مثل مناقشات‬‫ولن أناقش الموضوعات ي‬
‫تغث من الواقع شيئا‪ ،‬فسواء‬ ‫‪ HTML‬لغة برمجة أم ليست لغة برمجة‪ ،‬ألن اإلجابة أيا كانت‪ ،‬لن ر‬
‫كانت ‪ HTML‬لغة برمجة أو لغة توصيفية‪ ،‬فدراستها صورية والزمة وإجبارية ألي دارس أو‬
‫مهتم بكيفية إنشاء وتطوير المواقع اإللكثونية‪ ،‬وأي مجال آخر متعلق بها‪ ،‬لذلك فال حاجة‬
‫إلضاعة الوقت يف هذا النوع من الجدال‪ ،‬ألنه عبث ال طائل من ورائه‪.‬‬
‫ه لغة بناء المواقع‬ ‫واالسم ‪ HTML‬هو اختصار ‪ ، Hyper Text Markup Language‬و ي‬
‫اإللكثونية‪ ،‬حيث إن عناصها تمثل األساس الذي تقوم عليه الصفحة‪ ،‬من عناوين رئيسية‪،‬‬
‫وفقرات نصية‪ ،‬وقوائم‪ ،‬ونماذج إدخال بيانات‪ ،‬وصور‪ ،‬وروابط تشعبية‪ ،‬وملفات صوت‪،‬‬
‫الن تقوم بتنسيق هذه العناص‪،‬‬ ‫يأب دور اللغات األخرى‪ ،‬مثل ‪ CSS‬ي‬ ‫وغثها‪ ،‬ثم ي‬
‫وملفات فيديو‪ ،‬ر‬
‫المستخدمي‪ ،‬ثم لغة ‪ Javascript‬لتقوم بعمل تفاعل ربي المستخدم‬ ‫ر‬ ‫لعرضها بشكل يجذب‬
‫وهذه العناص‪ ،‬ألداء وظيفة معينة‪.‬‬
‫الن ستستخدمها يف بناء موقعك‪ ،‬ال فائدة منها‪ ،‬ولن ترى لها‬ ‫وخالصة القول‪ ،‬أن كل اللغات ي‬
‫أداء سلسا يجذب االنتباه‪ ،‬بدون إنشاء بناء قوي ومتماسك من ‪، HTML‬‬ ‫أي إنجاز حقيق أو ً‬
‫ي‬
‫وب‪.‬‬
‫يستطيع أن يقوم عليه موقعك اإللكث ي‬

‫‪Introduction‬‬ ‫‪1‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫كيف ر ئ‬
‫تنش صفحة ويب؟؟‬
‫لك ر ئ‬
‫تنش صفحة ويب‪ ،‬تحتاج إل محرر نصوص ‪ ، text editor‬لتستخدمه يف كتابة‬ ‫ي‬
‫ولك تحول هذا الكود إل صفحة ويب‪ ،‬فإنك تحتاج إل مستعرض أو‬
‫كود ‪ html‬الخاص بك‪ ،‬ي‬
‫الن قمت بإنشائها‪.‬‬
‫متصفح ويب ‪ ، web browser‬ليستعرض الصفحة ي‬

‫خطوات إنشاء أول صفحة ويب‬

‫‪ -1‬افتح أي محرر نصوص يمكنك االستعانة به‪ ،‬وليكن أبسطها‪ ،‬وهو برنامج ‪Notepad‬‬
‫التال‪:‬‬
‫يأب ضمن حزمة برامج نظام ‪ ، windows‬واكتب فيه السطر ي‬
‫الذي ي‬
‫>‪<div><i> Hyper Text Markup Language </i></div‬‬

‫‪ -2‬اآلن أصبح هذا السطر من الكود هو ‪ ، source code‬أو كود المصدر الخاص‬
‫الن نحن بصدد إنشائها‪.‬‬
‫بالصفحة ي‬
‫‪ -3‬أيا كان نوع محرر النصوص الخاص بك‪ ،‬قم بعمل حفظ ‪ save as‬من قائمة ‪: File‬‬

‫‪ -4‬اخث المكان الذي ستحفظ فيه الملف‪ ،‬ثم اخث اسما له وليكن ‪ ، index‬وأضف له‬
‫الن‬
‫امتداد ‪ html‬بعد االسم‪ ،‬ليصبح اسم الملف ‪ ، index.html‬هو اسم صفحة الويب ي‬
‫التال‪:‬‬
‫ي‬ ‫أنشأتها‪ ،‬ثم اضغط ‪ save‬أو حفظ لهذا الملف كما بالشكل‬
‫‪Introduction‬‬ ‫‪2‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫‪ -5‬الحظ أن الملف الذي أنشأته موجود يف المكان الذي حفظته به‪ ،‬وهو هنا‬
‫التال‪:‬‬
‫ي‬ ‫اَ لديك‪ ،‬كما بالشكل‬
‫‪ desktop‬وسيظهر لك عىل هيئة أيقونة للمتصفح االفث ي‬

‫اضن صفحة‬
‫‪ -6‬اضغط عىل هذا الملف ضغطا مزدوجا‪ ،‬ليفتح لك متصفحك االفث ر‬
‫التال‪:‬‬
‫ي‬ ‫الن أنشأتها‪ ،‬ولتظهر لك بالشكل‬
‫الويب البسيطة ي‬

‫‪ -7‬تذكر جيدا بعد أن تحفظ الكود ألول مرة‪ ،‬فإن أي‬

‫تعديل سوف تقوم به بعد ذلك عىل هذا الكود‪ ،‬لن يظهر له‬
‫تأثث ‪ ،‬ما لم تقم بعمل حفظ أو ‪ save‬لهذا التعديل‪.‬‬
‫أي ر‬

‫تأثث هذا‬
‫‪ -8‬إذا أجريت أي تعديل عىل كود المصدر‪ ،‬ثم قمت بحفظه‪ ،‬فيمكنك معاينة ر‬
‫أو مفتاح ‪ F5‬من لوحة المفاتيح‪.‬‬ ‫التعديل يف المتصفح بالصغط عىل أيقونة ‪refresh‬‬
‫‪Introduction‬‬ ‫‪3‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫الدخول إل ‪HTML‬‬
‫ه لغة بناء‬
‫العظم لإلنسان‪ ،‬ف ي‬
‫ي‬ ‫تعتث لغة ‪ HTML‬بالنسبة لصفحة الويب بمثابة الهيكل‬
‫هيكل ‪ structure‬لصفحات الويب‪ ،‬ويتم ذلك عن طريق إنشاء مجموعة من العناص‬
‫‪ ، elements‬وكل عنرص يتحكم يف بنائه مجموعة من الخصائص ‪ ، attributes‬وتتحكم‬
‫تأثثكل خاصية عىل العنرص‪.‬‬
‫مجموعة من القيم ‪ values‬يف سلوك و ر‬

‫العناص الداللية ‪Semantic Elements‬‬

‫بعض عناص ‪ html‬وإن كانت متشابهة السلوك ظاهريا‪ ،‬واعتقدت للوهلة األول أنه‬
‫تأثث عىل صفحتك أو موقعك‪ ،‬إال أن هذه‬‫يمكنك استبدال أحدها بآخر‪ ،‬دون أن يكون لذلك أي ر‬
‫العناص ليست مجرد تنسيق برصي فقط‪ ،‬بل إن استخدامها له داللة معينة عن طبيعة‬
‫معي من‬‫وظيفتها يف بناء الصفحة‪ ،‬حيث يختص كل منها بأداء وظيفة معينة‪ ،‬لبناء جزء ر‬
‫الصفحة‪ ،‬كما أن نطق أسماء هذه العناص قد يحمل داللة معينة لمن يسمعها‪ ،‬أو داللة معينة‬
‫المعاب والدالالت تسم ‪. semantics‬‬
‫ي‬ ‫عن طبيعة محتوى هذه العناص‪ ،‬وهذه‬
‫لذلك‪ ،‬عندما تبدأ يف تصميم صفحتك باستخدام ‪ ، html‬يفضل دائما أن تلثم التخصص‬
‫لمعايث القياسية‪ ،‬الستخدام كل عنرص من عناص ‪ ، html‬لألسباب التالية‪:‬‬
‫ر‬ ‫الموضوع طبقا ل‬
‫الن أنشأ من أجلها‪ ،‬مثل أن تقوم‬ ‫غث الوظيفة ي‬ ‫‪ -1‬عندما تقوم باستخدام عنرص يف ر‬
‫ً‬
‫باستخدام العنرص <‪ >div‬الذي يقوم بإنشاء أي جزء من الصفحة بشكل عام‪ ،‬بدال من‬
‫الرئيش يف الصفحة‪ ،‬ثم تحتاج بعد فثة أن‬ ‫ي‬ ‫العنرص <‪ >main‬المخصص إلنشاء الجزء‬
‫ش من الصفحة‪ ،‬هنا سوف يصعب عليك تذكر مكان‬ ‫تقوم بعمل تعديل عىل الجزء الرئي ي‬
‫المنتشة بالصفحة‪ ،‬وسوف تضطر الختبار‬ ‫ر‬ ‫هذا العنرص وأي عنرص هو من عناص <‪>div‬‬
‫وبالتال تكتشف بعد فثة‬
‫ي‬ ‫وتأثثها‪،‬‬
‫ر‬ ‫كثث من العناص للوقوف عىل طبيعة سلوكها‬‫ال ر‬
‫الن تقوم بها يف الصفحة‪ ،‬حن تصل للسلوك الذي كنت تطلبه عند إنشائك هذا‬‫وظيفتها ي‬
‫تستعي بتعليق كتبته لتتأ كد من طبيعته وسلوكه‪ ،‬وقد يكون‬
‫ر‬ ‫العنرص‪ ،‬وربما وقتها سوف‬
‫كثثة‪ ،‬لذلك فإنك‬
‫غث مؤثر يف عملية البحث‪ ،‬ألنه تعليق واحد ربي تعليقات ر‬ ‫التعليق ر‬
‫الكثث من عناء البحث وضياع الوقت‪ ،‬لو اخثت العنرص المناسب‪،‬‬‫ر‬ ‫ستوفر عىل نفسك‬
‫كبثا جدا‪.‬‬‫كبثا‪ ،‬وعدد أسطر الكود فيه ر‬
‫مشوعك ر‬‫خاصة عندما يكون حجم ر‬

‫‪Introduction‬‬ ‫‪4‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬
‫ر‬
‫المشوع‬ ‫‪ -2‬إذا كنت تعمل يف فريق‪ ،‬أو كنت جزءا من فريق‪ ،‬وانتهت عالقتك بهذا‬
‫سيكون من السهل عىل الفريق أن يكمل الجزء من العمل الذي كنت تقوم به‪ ،‬إذا اتفقتم‬
‫جميعا عىل نظام عمل واحد ومرجع واحد‪ ،‬وهو اختيار العنرص المناسب‪ ،‬لشغل المكان‬
‫للمعايث القياسية‪.‬‬
‫ر‬ ‫المناسب‪ ،‬ألداء الوظيفة المناسبة‪ ،‬طبقا‬
‫‪ -3‬اعلم أن محركات البحث تهتم عند ترتيب نتائج البحث بطبيعة العنرص الذي‬
‫ً‬
‫تبحث عنه‪ ،‬فيمكنك مثال أن تكتب عنوانا رئيسيا للصفحة من خالل عنرص <‪ >div‬أو‬
‫عنرص <‪ ، >p‬ثم تقوم بعمل بعض التنسيقات لهذا العنرص ‪ ،‬لتجعل النص يبدو كعنوان‬
‫رئيش للصفحة‪ ،‬وسوف تنجح يف ذلك بالتأكيد‪ ،‬وقد يبدو العنوان جذابا ظاهريا‪ ،‬إال أن‬ ‫ي‬
‫الن‬
‫رئيش للصفحة‪ ،‬بنفس الشعة ي‬ ‫ي‬ ‫محركات البحث لن تلتفت لهذا العنرص كعنوان‬
‫الرئيش‪ ،‬وهو <‪ ، >h1‬ألنك‬
‫ي‬ ‫يمكن أن تلتفت بها‪ ،‬إذا اخثت العنرص المعد لكتابة العنوان‬
‫كثثة‬
‫رئيش للصفحة ربي عناص أخرى ر‬ ‫ي‬ ‫ستجعل محركات البحث تبحث عن عنوان‬
‫الرئيش يف العنرص المعد‬
‫ي‬ ‫ليست معدة لهذا الغرض‪ ،‬بعد أن تفشل يف إيجاد العنوان‬
‫إلنشائه‪ ،‬وهو كما ذكرنا <‪. >h1‬‬
‫‪ -4‬سماع اسم بعض العناص يفيد أصحاب االحتياجات الخاصة‪ ،‬يف التعرف عىل جزء‬
‫الصفحة الذي يعرض أمامهم‪ ،‬كما أن نطق بعض العناص بطريقة معينة يفيد يف التأكيد عىل‬
‫معي‪ ،‬كما سثى الحقا‪.‬‬
‫معي‪ ،‬أو أهمية نص ر‬‫معن ر‬
‫عليك أن تعلم جيدا‪ ،‬أن صفحتك أو موقعك ليسا مجرد شكل جميل يجذب‬
‫المستخدمي إليه‪ ،‬بل سهولة البحث والعثور عىل الموقع ومحتوياته‪ ،‬وسهولة التعامل‬
‫ر‬
‫الن يجب أن‬‫والتفاعل مع الموقع‪ ،‬وسهولة إنجاز المهمة المطلوبة من الموقع‪ ،‬من األمور ي‬
‫الخارج‪ ،‬ألن المستخدم قد يتحمل بعض‬
‫ي‬ ‫تهتم بها‪ ،‬بقدر أكث من اهتمامك بمظهر الموقع‬
‫القصور يف الشكل‪ ،‬إذا كان الموقع يؤدي وظيفته بطريقة جيدة‪ ،‬ولكنه لن يتحمل أي قصور‬
‫الن يطلبها‪ ،‬حن وإن كان الموقع هو أجمل مواقع الويب عىل اإلطالق‪.‬‬
‫يف أداء الوظيفة ي‬

‫‪Introduction‬‬ ‫‪5‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫أجزاء عنرص ‪HTML‬‬

‫تتكون عناص ‪ html‬من عدة أجزاء ثابتة‪ ،‬وقد تختلف بعض العناص يف شكل هذه األجزاء‪،‬‬
‫كالتال‪:‬‬
‫ي‬ ‫وعددها‪ ،‬وهذه األجزاء‬
‫‪ -1‬وسم بداية ‪ start tag‬ويبدأ بعالمة ك<ك ثم اسم العنرص ثم عالمة ك>ك‪.‬‬
‫‪ -2‬وسم نهاية ‪ end tag‬ويبدأ بعالمة ك<ك ثم رشطة مائلة ك‪/‬ك ثم اسم العنرص ثم‬
‫الداخىل‪.‬‬
‫ي‬ ‫تأثثه عىل محتواه‬
‫ه نهاية العنرص ونهاية ر‬ ‫عالمة ك>ك ‪ ،‬لتكون هذه ي‬
‫‪ -3‬المحتوى ‪ content‬وهوكل ما يتواجد ربي وسم البداية ووسم النهاية للعنرص‪.‬‬
‫التال يوضح أجزاء عنرص ‪: html‬‬
‫والشكل ي‬

‫العناص الفارغة ‪Empty Elements‬‬

‫وتكتق بوسم‬
‫ي‬ ‫الن ال يكون لها وسم نهاية ‪ end tag‬يغلق العنرص‪،‬‬
‫ه بعض العناص ي‬ ‫ي‬
‫داخىل ‪ ، content‬سواء‬
‫ي‬ ‫وبالتال ال يكون لهذه العناص أي محتوى‬
‫ي‬ ‫البداية ‪ start tag‬فقط‪،‬‬
‫نص أو أي عناص أخرى من عناص ‪ ، html‬حيث ال يوجد ما يمكن أن يحتويــها داخله‪ ،‬وقد‬
‫يطلق عليها كالعناص الفارغة ك ‪ void elements‬أو كالوسوم الفارغةك أو ‪، empty tags‬‬
‫األفق <‪ >hr‬وعنرص حقل اإلدخال‬ ‫ي‬ ‫ومن أمثلها‪ ،‬عنرص إدراج صورة <‪ ، >img‬وعنرص الخط‬
‫وغثها‪.‬‬
‫<‪ >input‬ر‬
‫>‪<img src="images/boat.jpg" width="20%"><hr‬‬
‫>‪<input type="text" id="usr" name="user_name" value=""/‬‬

‫يمكن وضع رشطة مائلة " ‪ "/‬قبل قوس اإلغالق ">" ‪ ،‬كما يف العنرص >‪ <input‬يف‬
‫المثال السابق‪ ،‬ويمكن االستغناء عنها‪ ،‬كما يف العنرص ريي >‪ <img‬و >‪. <hr‬‬

‫‪Introduction‬‬ ‫‪6‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫مالحظات عىل أجزاء عنرص ‪HTML‬‬

‫‪ -1‬قد يطلق عىل وسم البداية اسم كوسم االفتتاحك ‪ ، opening tag‬وقد يطلق عىل وسم‬
‫النهاية اسم كوسم اإلغالقك ‪. closing tag‬‬
‫غث حساسة لحالة األحرف ‪ ، case-insensitive‬أي أن اسم العنرص‬ ‫‪ -2‬أسماء العناص ر‬
‫<‪ >div‬هو نفسه <‪ >DIV‬هو نفسه <‪ >Div‬هو نفسه <‪ ، >dIV‬ال فرق بينها جميعا ‪ ،‬ولكن‬
‫الصغثة دائما عند كتابة أسماء‬ ‫ر‬ ‫ه استخدام األحرف‬ ‫التطبيق والممارسة األمثل‪ ،‬ي‬
‫العناص‪.‬‬
‫‪ -3‬ال تثك مسافة فارغة يف وسم االفتتاح‪ ،‬ربي قوس البداية ك<ك واسم العنرص‪ ،‬وكذلك ال‬
‫الشطة المائلة‪ ،‬وال مشكلة يف أن‬ ‫تثك مسافة فارغة ف وسم اإلغالق‪ ،‬ربي قوس البداية ك<ك و ر‬
‫ي‬
‫الشطة المائلة يف وسم‬ ‫ر‬
‫تثك مسافة فارغة أو أكث بعد اسم العنرص ف وسم االفتتاح‪ ،‬أو بعد ر‬
‫ي‬
‫غث صحيحة <‪ > div‬و <‪ ، > /div‬بينما هذه الوسوم‬ ‫اإلغالق‪ ،‬وعليه فهذه الوسوم ر‬
‫ه عدم ترك أي‬ ‫صحيحة > ‪ <div‬و >‪ </ div‬و > ‪ </ div‬والتطبيق والممارسة األمثل‪ ،‬ي‬
‫مسافات فارغة ربي أجزاء وسم االفتتاح‪ ،‬أو ربي أجزاء وسم اإلغالق‪ ،‬إال إذا احتوى وسم‬
‫االفتتاح عىل خصائص للعنرص ‪ ،‬كما سثى الحقا‪.‬‬
‫الن تحتاج إل وسم إغالق‪ ،‬يتم اعتبار كل ما بعد وسم االفتتاح هو‬ ‫‪ -4‬يف حالة العناص ي‬
‫تأثث وتنسيق العنرص عليه‪ ،‬حن وإن كان المحتوى عنرصا‬ ‫محتوى لهذا العنرص‪ ،‬ويتم تطبيق ر‬
‫تأثث هذا العنرص‪.‬‬
‫ينته ر‬‫ي‬ ‫آخر‪ ،‬إل أن يتم كتابة وسم نهاية العنرص األول‪ ،‬وعندها‬
‫التال‪ ،‬ثم قم بحفظه كما تعلمنا سابقا‪:‬‬
‫افتح محرر النصوص الخاص بك وقم بكتابة الكود ي‬
‫>‪<i>This italic text contains some <b> bold</b> text</i‬‬
‫التال‪:‬‬
‫اضغط ضغطا مزدوجا عىل أيقونة الملف ليفتح لك المتصفح صفحتك بالشكل ي‬

‫الحظ أن النص كله مائل ‪ ، italic‬ألنه داخل محتوى عنرص الخط المائل ‪ ،‬أي واقع ربي‬
‫ه يف نفس الوقت نص‬ ‫وسم البداية <‪ ، >i‬ووسم النهاية <‪ ، >/i‬والحظ أن الكلمة ‪ bold‬ي‬
‫سميك‪ ،‬ألنها داخل محتوى عنرص الخط السميك‪ ،‬أي واقعة ربي وسم البداية <‪ >b‬ووسم‬
‫النهاية <‪.>/b‬‬
‫‪Introduction‬‬ ‫‪7‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬
‫ً‬ ‫ُ‬
‫‪ -5‬يف حالة الوسوم المتداخلة ‪ ، nested tags‬فإن الوسم الذي يفتح أوال يجب أن يتم‬
‫ُ‬
‫أخثا‪ ،‬ثم الذي فتح بعده يجب أن يغلق قبله‪ ،‬أي أن العنرص الذي فتح داخل العنرص‬
‫إغالقة ر‬
‫<‪ >i‬يجب أن يغلق قبل وسم اإلغالق <‪ >/i‬والعنرص الذي يفتح داخل العنرص <‪ >b‬يجب أن‬
‫يغلق قبل وسم اإلغالق <‪.>/b‬‬

‫عالقة األب واالبن ‪Parent-Child relationship‬‬

‫يف حالة تداخل العناص ‪ -‬وهذا ما يحدث دائما عند استخدام ‪ - HTML‬فإن العنرص‬
‫الخارج يسم األب ‪ parent‬والعنرص المحتوى داخله يسم بالعنرص االبن ‪: child‬‬
‫ي‬
‫>‪<i>Text contains <b><u> underline</u> bold</b> text</i‬‬

‫ً‬
‫الن‬
‫ي‬ ‫العناص‬ ‫ليحتوي‬ ‫‪،‬‬ ‫ا‬
‫أخث‬
‫ر‬ ‫غلق‬‫أ‬ ‫أوال‬ ‫الن تم فتحه‬
‫الحظ ترتيب األرقام‪ ،‬وأن العنرص ي‬
‫الداخىل هو كاالبنك‬
‫ي‬ ‫الخارج هو كاألبك ‪ ، parent‬والعنرص‬
‫ي‬ ‫فتحت داخله‪ ،‬ويكون العنرص‬
‫‪ ، child‬أي أن العنرص <‪ >i‬هو أب للعنرصين <‪ >b‬و <‪ ، >u‬ألنهما ف ِتحا وأغلقا داخله‪،‬‬
‫ُ‬
‫والعنرص <‪ >b‬هو أب للعنرص <‪ >u‬الذي فتح وأغلق داخل العنرص >‪. <b‬‬

‫وسم البداية والنهاية للعنرص‬

‫ي‬ ‫الحظ أن النص كله تم تنسيقه بخط مائل‪ ،‬ألنه واقع ربي‬
‫وسم البداية‬
‫ي‬ ‫<‪ ، >i‬والجملة ‪ underline bold‬تم تنسيقها بخط سميك ‪ ، bold‬ألنها داخل‬
‫والنهاية للعنرص<‪ ، >b‬بينما الكلمة ‪ underline‬تم تنسيقها بخط تحتها ‪ ، underline‬ألنها‬
‫وسم البداية والنهاية للعنرص <‪. >u‬‬
‫ي‬ ‫داخل‬
‫محررات النصوص الحديثة‪ ،‬تتكفل بكتابة وسم البداية ووسم النهاية‪ ،‬بمجرد أن تفتح‬
‫باف الحروف أو األجزاء‪،‬‬
‫وسم البداية وتكتب أول حروف من العنرص‪ ،‬دون أن تستكمل أنت ي‬
‫حيث تقوم هذه المحررات باستكمالها تلقائيا‪ ،‬ولكن عليك أن تتعلم قواعد كتابة الوسوم‬
‫جيدا‪ ،‬وتجربــها بنفسك مرات ومرات‪ ،‬فربما يف يوم ما‪ ،‬تجد نفسك مضطرا الستخدام محرر‬
‫نصوص بسيط‪ ،‬ال يقوم باستكمال الكود تلقائيا‪.‬‬
‫‪Introduction‬‬ ‫‪8‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫أنواع عناص ‪ HTML‬حسب تدفقها يف الصفحة‬

‫يوجد أنواع عديدة لعناص ‪ HTML‬حسب تدفق هذه العناص داخل صفحة الويب‪ ،‬ولكن‬
‫هذا الكتاب ليس مجال دراسة هذه األنواع‪ ،‬وإنما سنتحدث عنها بالتفصيل يف المرجع الكامل يف‬
‫نوعي من هذه العناص‪ ،‬ألهمية دورهما وشدة‬ ‫ر‬ ‫‪ ، css‬ولكن من الرصوري أن ندرس أهم‬
‫األساش‪ ،‬وهما‪:‬‬
‫ي‬ ‫تأثثهما يف بناء هيكل الصفحة‬
‫ر‬
‫‪Inline Element -‬‬
‫الخط‪ ،‬هو عنرص يظهر هو والعنرص الذي قبله‪ ،‬والعنرص الذي بعده‪ ،‬عىل نفس‬
‫ي‬ ‫العنرص‬
‫خط ليس له عرض أو ارتفاع أو‬
‫السطر ‪ ،‬إذا كانوا جميعا من نفس النوع ‪ ، inline‬والعنرص ال ي‬
‫سفىل‪ ،‬ومن أمثلته العناص <‪ >span‬و<‪ >data‬و >‪. <input‬‬
‫ي‬ ‫هامش علوي أو هامش‬
‫التال‪:‬‬
‫افتح محرر األكواد الخاص بك واكتب الكود ي‬
‫‪One <span> Two </span> <span> Three</span> Four‬‬
‫كالتال‪:‬‬
‫ي‬ ‫تغيثات وافتح الملف لتظهر لك صفحة الويب‬
‫قم بحفظ ال ر‬

‫الحظ أن العناص ظهرت جميعا عىل سطر واحد‪ ،‬وهذا ما يمكن مالحظته اآلن من‬
‫باف خصائصه‪.‬‬
‫نتبي طبيعة ي‬
‫خصائص هذا النوع من العناص‪ ،‬وعند دراسة ‪ css‬سوف ر‬
‫مثال آخر‪:‬‬
‫>"‪<img src="blue.jpg" width="10%‬‬
‫>"‪<img src="girl.jpg" width="20%‬‬
‫>"‪<img src="graff.jpg" width="15%‬‬

‫اعلم أن الكود السابق للتوضيح فقط‪ ،‬فإن كنت مبتدئا‪ ،‬فال تنشغل ر‬
‫كثثا بمفهوم‬
‫العناص والخصائص والقيم داخله ‪ ،‬فسوف ر‬
‫نشح كل ذلك بالتفصيل يف حينه‪.‬‬

‫‪Introduction‬‬ ‫‪9‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫وكما ترى فالصور الثالث ظهرت بجانب بعضها البعض عىل نفس السطر‪.‬‬
‫العنرص >‪ <img‬ليس عنرصا خطيا خالصا‪ ،‬وإنما هو ‪ ، inline-block‬وهو نوع وسط‪،‬‬
‫حيث تظهر عناصه عىل سطر واحد‪ ،‬ولكن لها عرض وارتفاع وهامش من كل الجهات‪.‬‬

‫‪Block Element -‬‬

‫وسم بذلك ألنه عنرص له عرض وارتفاع وهامش من كل الجهات‪ ،‬وهو‬ ‫ي‬ ‫عنرص الكتلة‪،‬‬
‫التال له عىل سطر‬
‫عنرص يظهر عىل سطر جديد بعد العنرص السابق له‪ ،‬ويتم إضافة العنرص ي‬
‫غث السطر الذي عليه هذا العنرص‪ ،‬ألن هذا العنرص يشغل كامل عرض العنرص األب‬ ‫جديد‪ ،‬ر‬
‫األفق الموجود‬
‫ي‬ ‫الذي يحتويه‪ ،‬مهما كان عرض هذا العنرص ‪ ،‬فال يشاركه أي عنرص آخر السطر‬
‫عليه‪ ،‬ومن أمثلته العناص <‪ >div‬و <‪ >p‬و<‪ >main‬و<‪ >section‬و<‪. >article‬‬
‫كالتال‪:‬‬
‫ي‬ ‫اكتب الكود السابق ولكن استبدل العنرص <‪ >span‬بالعنرص <‪>div‬‬
‫‪One <div> Two </div> <div> Three</div> Four‬‬
‫كالتال‪:‬‬
‫ي‬ ‫التغيثات وافتح الملف لتظهر لك صفحة الويب‬
‫ر‬ ‫قم بحفظ‬

‫والن ظهرت عىل سطر‬

‫الحظ أن نفس الكلمات السابقة‪ ،‬خارج وداخل العنرص <‪ ، >span‬ي‬
‫واحد‪ ،‬قد ظهرت كل كلمة منها عىل سطر جديد‪ ،‬بوضعها خارج وداخل العنرص <‪. >div‬‬

‫‪Introduction‬‬ ‫‪10‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫الخصائص (السمات) ‪Attributes‬‬

‫ه مزايا إضافية‪ ،‬يتم تعيينها للعنرص‪ ،‬داخل وسم االفتتاح ‪ ، opening tag‬ويسند لها‬
‫ي‬
‫تأثثه واستخداماته‪.‬‬
‫العديد من القيم للتحكم يف العنرص‪ ،‬وتحديد ر‬
‫>‪<div id = "dv_id" class = "dv_cls" > Web Design </div‬‬

‫ه الخاصية ‪ ، id‬وأسند لها‬‫خاصيتي للعنرص <‪ ، >div‬األول ي‬

‫ر‬ ‫تعيي‬
‫الحظ أنه قد تم ر‬
‫ه الخاصية ‪ ، class‬وأسند لها القيمة ك‪dv_cls‬ك ‪.‬‬
‫القيمة ك‪dv_id‬ك ‪ ،‬والثانية ي‬

‫مالحظات عىل الخصائص‬

‫‪ -‬قد ال يتم تعيي أي خاصية للعنرص وقد يتم تعيي خاصية واحدة أو ر‬
‫أكث له‪.‬‬ ‫ر‬ ‫ر‬
‫ُ‬
‫‪ -‬تكتب الخصائص دائما داخل وسم البداية للعنرص‪.‬‬
‫‪ -‬يجب أن يفصل دائما ربي الخاصية‪ ،‬واسم العنرص الذي توجد داخله بمسافة فارغة‬
‫واحدة عىل األقل‪ ،‬وعليه فهذا الوسم خطأ <"‪. >divid = "dv_id‬‬
‫‪ -‬كل خاصية لها اسم ‪ name‬ولها قيمة ‪ ، value‬ويفصل دائما بينهما بعالمة ك=ك‪.‬‬
‫‪ -‬يمكن أن يكون بي اسم الخاصية و ك=ك ‪ ،‬كش للسطر أو مسافة فارغة أو ر‬
‫أكث أو بدون‪،‬‬ ‫ر‬
‫التال صحيح‪:‬‬ ‫ر‬
‫الشء ربي ك=ك وقيمة الخاصية‪ ،‬وعليه فالكود ي‬
‫ونفس ي‬
‫=‪<div id = "dv_id" class="attr" name‬‬
‫>‪"dv_nm"> Web Design </div‬‬
‫‪ -‬والقيمة يمكن أن تكتب داخل أقواس أو بدون أقواس‪ ،‬واألقواس قد تكون مزدوجة أو‬
‫التال صحيح‪:‬‬
‫مفردة‪ ،‬وعليه‪ ،‬فالكود ي‬
‫>‪<div id=dv_id class='attr' name="dv_nm"> Web Design </div‬‬
‫الن‬ ‫الخاصية‬ ‫واسم‬ ‫الخاصية‬ ‫قيمة‬ ‫بي‬ ‫‪،‬‬ ‫‪ -‬يمكنك أن تثك مسافة فارغة واحدة أو ر‬
‫أكث‬
‫ي‬ ‫ر‬
‫تليها‪ ،‬وعىل الرغم من أن كتابة قيمة الخاصية داخل أقواس‪ ،‬تسمح لك بأال تثك أي مسافة‬
‫ه أن‬‫الن تليها‪ ،‬إال أن التطبيق والممارسة األمثل‪ ،‬ي‬
‫فارغة ربي قيمة الخاصية واسم الخاصية ي‬
‫‪Introduction‬‬ ‫‪11‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫الن تليها بمسافة فارغة واحدة عىل األقل‪ ،‬ومع‬

‫تفصل ربي قيمة الخاصية واسم الخاصية ي‬
‫وه‬
‫التال صحيح رغم عدم وجود أي مسافة فارغة ربي قيمة الخاصية ‪ id‬ي‬ ‫ي‬ ‫ذلك‪ ،‬فالكود‬
‫قوسي‪.‬‬
‫ر‬ ‫"‪ "dv_id‬واسم الخاصية ‪ ، class‬لوجود قيمة الخاصية ‪ id‬ربي‬
‫>‪<div id="dv_id"class="attr"> Web Design </div‬‬

‫مالحظات عىل استخدام األقواس حول قيمة الخاصية‬

‫اآلب‪:‬‬
‫يمكن إسناد قيم الخصائص بدون أقواس حولها مع مراعاة ي‬
‫الن تليها ‪ -‬إن وجدت ‪ -‬مسافة فارغة‪.‬‬
‫‪ -1‬أن يكون ربي قيمة الخاصية واسم الخاصية ي‬
‫أكث من قيمة‬‫‪ -2‬أن يسند للخاصية قيمة واحدة فقط‪ ،‬ألن بعض الخصائص تقبل ر‬
‫للخاصية‪ ،‬مثل الخاصية ‪ class‬الن يمكن أن يسند لها ر‬
‫أكث من قيمة‪ ،‬وكل قيمة منهما‬ ‫ي‬
‫كالتال‪:‬‬
‫ي‬ ‫تمثل العنرص‪ ،‬ولكن يجب وضعها ربي أقواس‬
‫<‪>div class="clss attr clssAttr"> Class Attrbiute </div‬‬
‫ه ثالث‬
‫ه يف الحقيقة ليست قيمة واحدة‪ ،‬وإنما ي‬ ‫قيمة الخاصية ‪ class‬داخل األقواس‪ ،‬ي‬
‫وبي كل منها مسافة فارغة‪.‬‬
‫قيم لنفس الخاصية‪ ،‬داخل أقواس ر‬
‫‪ -3‬إذا كان العنرص يقبل قيمة واحدة‪ ،‬فيجب أن تكون كلمة واحدة أو عدة كلمات‬
‫متصلة ببعضها‪ ،‬مثل أن يكون بينها ك‪-‬ك أو ك_ك ‪ ،‬دون مسافة فارغة ربي الكلمة واألخرى‪.‬‬
‫>‪<div di=div_ attr_id> Class Attrbiute </div‬‬

‫أكث‪ ،‬فيجب أن توضع‬‫أكث من كلمة‪ ،‬وبينها مسافة أو ر‬ ‫‪ -4‬أما إذا كانت القيمة تتكون من ر‬
‫ه‬‫مزدوجي أو منفردين‪ ،‬وإال فإن الخاصية سوف تعتث أن أول كلمة ي‬
‫ر‬ ‫قوسي‬
‫ر‬ ‫القيمة داخل‬
‫التال بالنسبة للخاصية ‪: style‬‬
‫باف الكلمات‪ ،‬كما يف المثال ي‬
‫القيمة‪ ،‬وتهمل ي‬
‫>";‪<div style="color : orange ; background : darkgreen‬‬
‫>‪Quotes around the attribute value </div‬‬

‫أمام للنص ‪ ،‬ولون‬

‫ي‬ ‫الحظ أن وضع قيمة الخاصية ‪ style‬داخل أقواس‪ ،‬نتج عنه لون‬
‫التال‪:‬‬
‫خلفية للعنرص‪ ،‬بينما عدم وضع األقواس سينتج عنه الشكل ي‬
‫‪Introduction‬‬ ‫‪12‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫>;‪<div style=color : orange ; background : darkgreen‬‬

‫>‪Quotes around the attribute value </div‬‬

‫التأثث عىل العنرص لوجود مسافات فارغة ربي قيمها وعدم وضعها‬
‫الحظ فشل الخاصية يف ر‬
‫غث‬‫ه بالتأكيد قيمة ر‬‫ه قيمة لها‪ ،‬و ي‬
‫وبالتال‪ ،‬اعتثت الخاصية أن أول كلمة ي‬
‫ي‬ ‫داخل أقواس‬
‫أمام (لون النص)أسود‪،‬‬
‫وه لون ي‬ ‫صحيحة‪ ،‬فظهر العنرص <‪ >div‬بقيم خصائصه االفثاضية‪ ،‬ي‬
‫ولون خلفية شفاف‪.‬‬
‫قم بإلغاء المسافات الفارغة واجعل القيمة كلمة واحدة متصلة بدون أقواس‪:‬‬
‫>;‪<div style=color:orange;background:darkgreen‬‬
‫>‪Quotes around the attribute value </div‬‬

‫تأثث الخاصية عىل العنرص‪ ،‬بعد إلغاء المسافات الفارغة ربي الكلمات داخل‬
‫الحظ رجوع ر‬
‫القيمة‪ ،‬بالرغم من عدم وجود القيمة داخل أقواس‪ ،‬ألن القيمة أصبحت كلمة واحدة‪ ،‬يفصل‬
‫ربي أجزائها رموز محددة لها داللة معينة‪.‬‬

‫مالحظات عامة عىل استخدام األقواس‬

‫ه أن تضع دائما قيم الخصائص داخل أقواس‪ ،‬سواء كانت‬ ‫‪ -‬التطبيق والممارسة األمثل‪ ،‬ي‬
‫كلمة واحدة أو عدة كلمات‪ ،‬متصلة أو منفصلة‪ ،‬لتجنب أي أخطاء أنت يف غن عنها‪.‬‬
‫‪ -‬ال يوجد فارق ربي استخدام األقواس المفردة ‪ ، single-quotes‬أو األقواس المزدوجة‬
‫‪ ، double-quotes‬طالما كان االستخدام مرة واحدة ألي منهما حول القيمة‪.‬‬
‫‪ -‬إال أنه يف حالة استخدام األقواس المتداخلة ‪ ، nested quotes‬يجب أن يكون نوع‬
‫الخارج حول القيمة‪ ،‬مختلفا عن نوعها داخل القيمة‪.‬‬
‫ي‬ ‫األقواس‬
‫فعىل سبيل المثال‪ ،‬إذا كانت األقواس حول القيمة من النوع المزدوج ‪، double-quotes‬‬
‫فيجب أن تكون داخل القيمة من النوع المفرد ‪ ، single-quotes‬وعكس ذلك صحيح أيضا‪،‬‬
‫ألن استخدام نفس النوع داخل القيمة وحولها‪ ،‬سينتج عنه خطأ‪.‬‬
‫‪Introduction‬‬ ‫‪13‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫التال إل محرر النصوص‪ ،‬وقم بالحفظ ثم افتح الملف‪:‬‬

‫انسخ الكود ي‬
‫>"‪<img src="mount.jpg" alt="The magic of 'graffiti' is here‬‬
‫الحظ أن النص الذي يمثل قيمة‬
‫الخاصية ‪ ، alt‬والذي يظهر عند حدوث‬
‫خطأ يف مسار الصورة‪ ،‬قد أحاطت به أقواس مزدوجة‪ ،‬ألن داخله أقواس مفردة‪ ،‬نريدها أن‬
‫تظهر يف المتصفح حول الكلمة '‪ ، 'graffiti‬وهو ما حدث بالفعل كما بالشكل المقابل‪.‬‬
‫نوع األقواس‪ ،‬حول وداخل القيمة من نفس النوع‪ ،‬فسوف يحدث‬ ‫فإذا حاولت أن تجعل ي‬
‫الداخىل‪:‬‬
‫ي‬ ‫خطأ‪ ،‬ألن الخاصية ستعتث أن قيمتها قد انتهت عند فتح القوس‬
‫>"‪<img src="grf.jpg" alt="The magic of "graffiti" is here‬‬
‫الحظ أن قيمة الخاصية لم تكتمل بسبب تشابه األقواس‬
‫داخل القيمة وحولها‪.‬‬
‫غث حساسة لحالة الحروف ‪ ، case-insenstive‬فيمكن أن تكون‬ ‫‪ -‬أسماء الخصائص ر‬
‫ه نفسها الخاصية ‪CLASS‬‬ ‫صغثة أو خليط بينهما‪ ،‬فالخاصية ‪ class‬ي‬
‫ر‬ ‫كبثة أو أحرف‬
‫بأحرف ر‬
‫ه نفسها الخاصية ‪ ،clAss‬ولكن التطبيق والممارسة األمثل‪ ،‬أن تكتب أسماء الخصائص دائما‬ ‫ي‬
‫صغثة‪.‬‬
‫ر‬ ‫بحروف‬
‫أكث من مرة واحدة‪ ،‬وإن حدث ذلك‪،‬‬ ‫‪ -‬يجب أال تتكرر نفس الخاصية داخل نفس العنرص ر‬
‫فإن العنرص سوف يتأثر بقيمة أول خاصية فقط‪ ،‬وسيتجاهل القيم التالية‪ ،‬وهو ما يمكن أن‬
‫األخثة عىل العنرص‪ ،‬إذا لم‬
‫ر‬ ‫تأثث الخاصية‬
‫ينتج عنه بعض االرتباك‪ ،‬لعدم معرفة سبب تجاهل ر‬
‫التال‪:‬‬
‫تنتبه‪ ،‬أن الخاصية مكررة‪ ،‬وذلك كما يف الكود ي‬
‫"‪<div style="color : blue" class="repeat" id="div_id‬‬
‫>‪style="background-color : orange"> Repeated Attribute</div‬‬

‫بكثث من االرتباك‪ ،‬عندما تجد أن لون الخلفية شفاف وليس ‪ orange‬كما‬

‫سوف تشعر ر‬
‫الثاب تم تجاهله‪ ،‬فعليك‬
‫ي‬ ‫كنت تتوقع‪ ،‬ولكن عندما تكتشف أن الخاصية مكررة وأن التكرار‬
‫‪Introduction‬‬ ‫‪14‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫الثاب داخل قيمة الخاصية األول‪ ،‬وتحذف‬

‫عندئذ‪ ،‬أن تضع قيمة الخاصية الموجودة يف التكرار ي‬
‫الثاب‪ ،‬لتجد أن الكود قد ظهر بالشكل المتوقع ‪:‬‬
‫التكرار ي‬
‫‪<div class="repeat" id="div_id" style="color : blue; background-color :‬‬
‫>‪orange ">Repeated Attribute</div‬‬

‫الن تقبل قيم متعددة‪ ،‬فتوضع جميع القيم كقيمة ألول‬

‫ما سبق ينطبق عىل الخاصية ي‬
‫وتبق‬
‫ي‬ ‫الن تقبل قيمة وحيدة‪ ،‬فيجب أن تحذف أي تكرار لها‪،‬‬
‫تكرار للخاصية‪ ،‬أما الخاصية ي‬
‫عىل خاصية واحدة فقط‪.‬‬

‫الخصائص المنطقية ‪Boolean Attributes‬‬

‫ذكرنا من قبل‪ ،‬أن الخاصية تتكون من اسم وقيمة يفصل بينهما عالمة ك=ك ‪ ،‬إال أنه يوجد‬
‫نوع آخر من الخصائص‪ ،‬وهو ‪ boolean attributes‬أو الخصائص المنطقية‪ ،‬حيث يكون‬
‫اسم الخاصية هو نفسه قيمتها‪ ،‬بدون عالمة ك=ك أو أي قيمة بعدها‪ ،‬و‪ boolean‬ي‬
‫تعن أنه يف‬
‫تأثث لهذه الخاصية عىل‬ ‫يعن وجود ر‬‫حالة وجود اسم الخاصية‪ ،‬تكون قيمتها ‪ ، true‬وذلك ي‬
‫تأثث لها عىل العنرص‪.‬‬
‫يعن أن قيمتها تكون ‪ ، false‬أي ال ر‬
‫العنرص ‪ ،‬و يف حالة عدم وجوده فهذا ي‬
‫>‪<input type="text" autofocus‬‬
‫>‪<input type="password" disabled‬‬

‫‪autofocus‬‬ ‫‪disabled‬‬

‫كث لوحة المفاتيح‬ ‫تعيي الخاصية ‪ autofocus‬للعنرص األول‪ ،‬نقل إليه تر ر‬ ‫ر‬ ‫الحظ أن‬
‫غث‬
‫الثاب‪ ،‬جعله ر‬ ‫ووجود ر‬
‫تعيي الخاصية ‪ disabled‬للعنرص ي‬ ‫حي أن ر‬
‫مؤش الكتابة داخله‪ ،‬يف ر‬
‫للخاصيتي‪ ،‬ولكن‬
‫ر‬ ‫وغث متاح للتعامل من قبل المستخدم‪ ،‬بالرغم من عدم إسناد أي قيم‬
‫فعال ر‬
‫ه ‪. true‬‬‫يعن أن قيمتهما ي‬
‫مجرد تعيينهما للعنرص‪ ،‬وذكر اسمهما فقط داخله‪ ،‬فهذا ي‬

‫‪Introduction‬‬ ‫‪15‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫الن يستخدمها المتصفح يف العرض‬

‫األنماط ي‬
‫بنسختي‪ ،‬نسخة للعرض عىل‬
‫ر‬ ‫يف بدايات االنثنت أو الويب‪ ،‬كانت الصفحات تكتب‬
‫متصفح ‪ ، Microsoft internet explorer‬ونسخة أخرى للعرض عىل متصفح‬
‫معايث القياسية للويب‪ ،‬كان من الصعب إعادة‬
‫‪ ، Netscape navigator‬وبعد أن وضعت ال ر‬
‫المعايث‪ ،‬لذلك تم وضع أنماط لعرض صفحات الويب‪ ،‬حن‬
‫ر‬ ‫بناء المواقع القديمة وفقا لهذه‬
‫ه‪:‬‬
‫يمكن عرض الصفحات والمواقع القديمة بشكل مناسب‪ ،‬و ي‬
‫المعايث الكاملة ‪Full Standards Mode‬‬
‫ر‬ ‫‪ -1‬نمط‬
‫وهو نمط عرض يتوافق مع المواصفات القياسية لكل عناص ‪ html‬وخصائص ‪. css‬‬

‫المعايث شبه الكاملة ‪Almost Standards Mode‬‬

‫ر‬ ‫‪ -2‬نمط‬
‫وهو نمط عرض يتوافق مع معظم المواصفات القياسية لعناص ‪ html‬وخصائص ‪ ، css‬ما‬
‫الن تعرض عن طريق النمط الثالث‪.‬‬
‫عدا القليل من المواصفات ي‬
‫‪ -3‬نمط المالءمات ‪Quirks Mode‬‬
‫وهو نمط عرض يتوافق مع المتصفح ‪ Microsof internet explorer 5‬والمتصفح‬
‫‪. Netscape navigator 4‬‬

‫كيف يحدد المتصفح النمط الواجب استخدامه؟؟‬

‫يتم تحديد النمط المستخدم يف عرض صفحة الويب‪ ،‬عن طريق الوسم الموجود يف بداية‬
‫يعن أن المتصفح سيعمل يف نمط‬‫صفحة ‪ ، html‬فاستخدام الوسم <‪ >!DOCTYPE html‬ي‬
‫معايث ‪ ، HTML5‬وعدم‬ ‫ر‬ ‫المعايث الكاملة ‪ ، full standards mode‬والذي يتوافق مع‬
‫ر‬
‫استخدام هذا الوسم يف بداية الصفحة‪ ،‬سيجعل المتصفح يستخدم نمط المالءمات ‪Quirks‬‬
‫‪. mode‬‬

‫‪Introduction‬‬ ‫‪16‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫هيكل كود صفحة ‪HTML‬‬

‫يتكون كود صفحة ‪ html‬من عدة أجزاء أو أقسام‪ ،‬وهذه األجزاء مقسمة حسب وظيفة كل‬
‫التال هو أبسط أشكال كود صفحة ‪ ، html‬وسوف نتناوله‬ ‫ي‬ ‫جزء يف صفحة الويب‪ ،‬والكود‬
‫وتأثث هذه األجزاء يف بناء صفحة الويب‪:‬‬
‫بالشح‪ ،‬لتوضيح طبيعة ر‬‫ر‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<meta charset="utf-8‬‬
‫>‪<title>Learn HTML</title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p>First HTML Page</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫>‪<!DOCTYPE html‬‬
‫وسم البداية يف صفحة ‪ ، html‬وهو الذي يحدد أن النمط أو الوضع الذي سيستخدمه‬
‫المعايث الكاملة ‪ ، full standards mode‬وهو النمط‬
‫ر‬ ‫المتصفح يف عرض الصفحة‪ ،‬هو وضع‬
‫المعايث القياسية ل ـ ‪. HTML5‬‬
‫ر‬ ‫الذي يتوافق مع‬
‫غث حساس لحالة األحرف ‪ case-insenstive‬أي أن‬ ‫وهذا الوسم مثل كل وسوم ‪ ، html‬ر‬
‫المعايث الكاملة ‪.‬‬
‫ر‬ ‫الوسم <‪ >!doctype html‬صحيح‪ ،‬وسيعرض وضع‬

‫>‪<html>....</html‬‬
‫هو العنرص األب ‪ parent‬لكل عناص الصفحة‪ ،‬بمعن أن كل عناص الصفحة هم أبناء‬
‫‪ children‬لهذا العنرص‪ ،‬أي أن كل عناص الصفحة يجب أن تقع داخل وسم البداية ووسم‬
‫النهاية لهذا العنرص‪ ،‬فتكون محتوى أو ‪ content‬لهذا العنرص‪.‬‬
‫ويوجد خاصيتان‪ ،‬يمكن أن يتم تعيينهما لهذا العنرص ‪:‬‬

‫‪Introduction‬‬ ‫‪17‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫‪lang‬‬
‫وه خاصية تحدد لغة النص الثابت داخل الصفحة‪ ،‬أو النص القابل لإلدخال والتعديل‪،‬‬
‫ي‬
‫وتحديد نوع اللغة يعتث هاما لعمل بعض الخصائص األخرى‪ ،‬وقيمة الخاصية تتكون من‬
‫بالشح يف فصل‬‫حرفي أو ثالثة‪ ،‬وهذه الحروف تعث عن اللغة المستخدمة وسوف نتناولها ر‬
‫ر‬
‫الخصائص العامة‪.‬‬
‫‪xmlns‬‬
‫وه خاصية اختيارية يف‬
‫وه خاصية تحدد ملف ‪ xml‬المرتبط بصفحة ‪ ، html‬ي‬ ‫ي‬
‫التال‪:‬‬
‫وه ك ي‬‫ه قيمة افثاضية‪ ،‬ي‬
‫‪ ، HTML5‬أي أنه ال مشكلة إذا لم يتم تعيينها‪ ،‬ألن قيمتها ي‬
‫>"‪<html lang="en" xmlns="http: //www.w3.org/1999/xhtml‬‬

‫>‪<head>....</head‬‬
‫الن يقرؤها‬
‫وه عناص إعدادت الصفحة ي‬ ‫هو عنرص يحتوي عناص ‪ ، metadata‬ي‬
‫وه‬
‫ه عناص ليست مقرؤة أو مرئية للمستخدم يف جسم الصفحة‪ ،‬ي‬ ‫المتصفح تلقائيا ‪ ،‬و ي‬
‫العناص <‪ >title‬و <‪ >script‬و <‪ >base‬و <‪ >link‬و <‪ >style‬و <‪. >meta‬‬
‫سوف تالحظ الحقا‪ ،‬أن العنرص <‪ >title‬مقرؤ للمستخدم‪ ،‬ولكن ليس يف جسم الصفحة‪،‬‬
‫وإنما يف رشيط عنوان الصفحة‪ ،‬أو تبويب الصفحة‪.‬‬
‫>‪<body>....</body‬‬
‫هو العنرص األب‪ ،‬الذي يحتوي كل العناص المادية المرئية يف جسم الصفحة‪ ،‬أي كل ما يراه‬
‫الن‬
‫المستخدم عىل الشاشة‪ ،‬كما أنه يحتوي العناص المادية المخفاة ‪ ، hidden elements‬ي‬
‫والن يتم إخفاؤها ألسباب تتعلق باألمان‪ ،‬أو ألغراض برمجية‪.‬‬
‫ال يراها المستخدم‪ ،‬ي‬

‫‪Introduction‬‬ ‫‪18‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫المسافات الفارغة وانكسار األسطر‬

‫‪Whitespaces and Line Breaks‬‬
‫المسافات الفارغة‪ ،‬ومسافة ‪ ، tab‬وانكسار األسطر‪ ،‬وااللتفاف إل األسطر الجديدة‪ ،‬وأي‬
‫تأثث لها عىل‬
‫إعدادات أو تنسيقات‪ ،‬تستخدم يف محرر النصوص‪ ،‬لنكتب بها كود المصدر‪ ،‬ال ر‬
‫تنسيق الصفحة يف المتصفح‪ ،‬إال يف حاالت قليلة جدا‪ ،‬فأيا كان عدد المسافات الفارغة أو‬
‫الن تليها‪ ،‬فسوف تظهر الكلمتان‬
‫الن ستقوم بإدخالها ربي أي كلمة والكلمة ي‬
‫األسطر الجديدة ي‬
‫عىل السطر األول‪ ،‬وبينهما مسافة فارغة واحدة فقط‪.‬‬
‫التال يف محرر النصوص الخاص بك‪:‬‬
‫اكتب الكود ي‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫‪My‬‬ ‫‪name‬‬
‫‪is‬‬ ‫‪Wail‬‬
‫‪Monir‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫التال‪:‬‬
‫التغيثات‪ ،‬ثم افتح الصفحة‪ ،‬ليظهر لك الكود بالشكل ي‬
‫ر‬ ‫قم بحفظ‬

‫الن كانت موجودة يف كود المصدر‬

‫الحظ اختفاء كل المسافات الفارغة واألسطر الجديدة‪ ،‬ي‬
‫الن تليها‪ ،‬وتم االستعاضة عنها جميعا بمسافة فارغة واحدة‬
‫‪ ، source code‬ربي أي كلمة و ي‬
‫فقط‪ ،‬ربي الكلمة واألخرى‪.‬‬

‫‪Introduction‬‬ ‫‪19‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫الحروف الخاصة ‪HTML Entities‬‬

‫بعض الرموز‪ ،‬ال يمكن لها أن تظهر يف المتصفح بشكلها المتعارف عليه‪ ،‬إذا كتبت بنفس‬
‫هيئتها يف محرر النصوص‪ ،‬ألن بعضها رموز محفوظة ألكواد ‪ ، html‬وبعضها رموز يصعب‬
‫طريقتي عند كتابة هذه‬
‫ر‬ ‫كتابتها بشكلها الرمزي الذي توجد عليه‪ ،‬لذلك تستخدم ‪html‬‬
‫الرموز‪ ،‬وهما تركيبة خاصة من الحروف والرموز‪ ،‬وتركيية أخرى من األرقام والرموز‪ ،‬كما‬
‫التال‪:‬‬
‫بالجدول ي‬
‫‪Symbol‬‬ ‫‪Letters‬‬ ‫‪Numbers‬‬
‫‪space‬‬ ‫;‪&nbsp‬‬ ‫;‪&#160‬‬
‫<‬ ‫;‪&lt‬‬ ‫;‪&#60‬‬
‫>‬ ‫;‪&gt‬‬ ‫;‪&#62‬‬
‫&‬ ‫;‪&amp‬‬ ‫;‪&#38‬‬
‫"‬ ‫;‪&quot‬‬ ‫;‪&#34‬‬
‫'‬ ‫;‪&apos‬‬ ‫;‪&#39‬‬
‫‪¢‬‬ ‫;‪&cent‬‬ ‫;‪&#162‬‬
‫‪£‬‬ ‫;‪&pound‬‬ ‫;‪&#163‬‬
‫‪¥‬‬ ‫;‪&yen‬‬ ‫;‪&#165‬‬
‫‪€‬‬ ‫;‪&euro‬‬ ‫;‪&#8364‬‬
‫©‬ ‫;‪&copy‬‬ ‫;‪&#169‬‬
‫®‬ ‫;‪&reg‬‬ ‫;‪&#174‬‬
‫‪-‬‬ ‫;‪&shy‬‬ ‫;‪&#173‬‬

‫التال يف محرر النصوص الخاص بك‪:‬‬

‫قم بكتابة الكود ي‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪&quot; Personal Info &#34;<br‬‬
‫>‪&nbsp;&nbsp;&nbsp;Name:&#160;&#160;&#39;Wail Monir&#39;<br‬‬
‫>‪&nbsp;&nbsp;&nbsp;Age: &#160;&#160;&lt;&#160;47&gt;<br‬‬
‫>‪&nbsp;&nbsp;&nbsp;Salary: 500&euro;<br‬‬
‫>‪&copy;Copy rights reserved &amp; &#174;registred <br‬‬

‫‪Introduction‬‬ ‫‪20‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مقدمة‬

‫>‪</body‬‬
‫>‪</html‬‬
‫التغيثات وافتح الصفحة‪ ،‬وانظر كيف تم كتابة الحروف الخاصة عن طريق ترجمة‬
‫ر‬ ‫قم بحفظ‬
‫التال‪:‬‬
‫كيبن الحروف والرموز‪ ،‬واألرقام والرموز‪ ،‬كما بالشكل ي‬
‫تر ي‬

‫التعليقات ‪Comments‬‬
‫معي‪ ،‬أو‬
‫ترجع أهمية التعليقات إل سهولة ترتيب العمل عىل الكود‪ ،‬ولتوضيح وظيفة كود ر‬
‫التنبيه عىل خطوة معينة يجب إتمامها‪ ،‬أو مشكلة تواجهك وتبحث عن حل لها‪ ،‬أو مالحظة‬
‫موجهة لمن يتشارك العمل معك عىل نفس الكود‪ ،‬والتعليقات مقرؤة ضمن كود المصدر‬
‫الخاص بالصفحة‪ ،‬ولكن يتم تجاهلها عند العرض يف المتصفح‪.‬‬
‫والتعليقات يف ‪ html‬تكتب ربي رمزين‪ ،‬رمز االفتتاح ك‪<!--‬ك ‪ ،‬ورمز اإلغالق ك>‪--‬ك ‪،‬‬
‫والن سيتجاهلها المتصفح‪.‬‬
‫وبينهما المالحظة المراد كتابتها عىل سطر واحد أو عدة أسطر‪ ،‬ي‬
‫>‪<!-- This part about personal information--‬‬
‫>‪<div>Name: Wail Monir</div‬‬
‫>‪<div>Age: 47</div‬‬
‫>‪<div>Job: Web developer </div‬‬

‫الحظ أن سطر التعليق الموجود يف أول‬

‫غث موجود عند العرض‬‫سطر يف كود المصدر‪ ،‬ر‬
‫يف المتصفح‪.‬‬

‫‪Introduction‬‬ ‫‪21‬‬ ‫‪[email protected]‬‬

HTML ‫عناص‬
HTML Elements
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫تقسيم عناص ‪HTML‬‬

‫كل عنرص من عناص ‪ HTML‬له دوره يف بناء صفحة الويب‪ ،‬وقد تتشابه أدوار بعض‬
‫وبناء عىل تشابه هذه العناص يف دورها ووظيفتها‪ ،‬قمت بتقسيمها بما رأيت أنه‬ ‫ً‬ ‫العناص‪،‬‬
‫ً‬
‫يتناسب مع وظيفتها وسلوكها‪ ،‬إال أن هذا التقسيم قد يختلف قليال يف موقع عن آخر ‪ ،‬وكلها‬
‫أكث من وظيفة للعنرص‪ ،‬المهم أن تعلم أن التقسيم بغرض الثتيب‬ ‫صحيحة‪ ،‬ألنك قد تجد ر‬
‫والتوضيح‪ ،‬واختالف القسم الذي يوجد تحته العنرص‪ ،‬ال يؤثر مطلقا يف طبيعة عمله أو‬
‫وكثث من المحاصين‪ ،‬ال يتطرقون يف األصل إل تقسيم العناص يف دروسهم‪ ،‬ألن‬ ‫سلوكه‪ ،‬ر‬
‫غث مؤثر يف طبيعة عمل وسلوك العنرص‪ ،‬فال تثعج‪ ،‬إن اختلف تقسيم عنرص ما يف‬ ‫التقسيم ر‬
‫غث القسم الذي درسته يف‬ ‫مرجع عن مرجع آخر‪ ،‬أو رأيت أن عنرصا ما يقع تحت قسم آخر‪ ،‬ر‬
‫وتأثث العناص‬
‫ر‬ ‫هذا الكتاب أو أي كتاب أو مرجع آخر‪ ،‬المهم أن تستوعب‪ ،‬طبيعة عمل‪،‬‬
‫المختلفة يف بناء الصفحة‪.‬‬
‫بشح طبيعة عمل ووظيفة‬ ‫وقد اتبعت منهجا معينا ف رشح عناص ‪ ، HTML‬حيث سأبدأ ر‬
‫ي‬
‫ر‬
‫الن يمكن أن يتم تعيينها له مع الشح‪ ،‬ثم نتناول كل‬
‫العنرص‪ ،‬ثم سأعرفك بكل الخصائص ي‬
‫ئ‬ ‫القيم الن يتم إسنادها لكل خاصية‪ ،‬ر‬
‫النهاب للكود‪ ،‬وكل ذلك‬
‫ي‬ ‫بالشح والكود وصورة المخرج‬ ‫ي‬
‫تأثث اختالف قيم هذه الخصائص‪.‬‬ ‫تأثث خصائصه‪ ،‬و ر‬
‫سوف يقرب إليك طبيعة عمل العنرص‪ ،‬و ر‬
‫واعلم أن بعض الخصائص أو القيم أو الجزئيات‪ ،‬ستكون مشثكة ربي العناص‪ ،‬لذلك‬
‫الشح المفصل يف ملحق ‪ 1‬من هذا‬‫سأشحها باختصار ف المواضع المتكررة‪ ،‬وسأحيلك إل ر‬ ‫ر‬
‫ي‬
‫بشء من التفصيل‪ ،‬حن يسهل عليك‬ ‫ر‬ ‫ر‬
‫الكتاب‪ ،‬أو أي موضع آخر شحت فيه هذه الجزئية ي‬
‫فهم واستيعاب طريقة عمل هذه الخاصية أو الجزئية‪ ،‬دون تكرار ممل‪.‬‬
‫اَ للعنرص وهو عبارة عن كود ‪ ، css‬وهو خارج نطاق‬ ‫وأخثا سأوضح لك التنسيق االفث ي‬‫ر‬
‫كثثا إذا لم تفهم محتواه أو طبيعة عمله‪ ،‬ألنك سوف تعود إليه بالتأكيد‬
‫هذا الكتاب‪ ،‬فال تهتم ر‬
‫عندما تدرس ‪ ، css‬فأردتك أن تتعرف عليه حن تألفه وتعتاده‪.‬‬

‫‪HTML Elements‬‬ ‫‪25‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫عناص الكتابة وتنسيق النصوص‬

‫معي تنسيقا خاصا‪.‬‬
‫الن تقوم بتنسيق نص ر‬
‫ه العناص ي‬
‫ي‬
‫>‪<abbr>....</abbr‬‬
‫عنرص يقوم بعرض نص عىل هيئة تلميح منبثق أو ‪ ، tooltip‬ليوضح معن نص مخترص‬
‫ربي محتوى العنرص <‪ ، >abbr‬ويظهر هذا التلميح عند مرور الفأرة فوق المصطلح أو االسم‬
‫تعيي خاصية واحدة لهذا العنرص ‪:‬‬
‫المخترص‪ ،‬ويتم ر‬
‫‪title‬‬
‫خاصية تحدد نص التلميح‪ ،‬الذي سيظهر عند مرور الفـأرة فوق المصطلح المخترص‪.‬‬
‫>‪<abbr title="North Atalntic Treaty Organization"> NATO</abbr‬‬

‫الحظ ظهور خط منقط تحت النص المخترص‪ ،‬كإشارة إل أنه سيظهر منه التلميح عند‬
‫مرور الفأرة فوقه‪ ،‬ويمكن أن تكتب التلميح عىل سطرين أو ر‬
‫أكث‪ ،‬بأن تقوم بكش السطر يف قيمة‬
‫الخاصية ‪ ، title‬وسوف ينتقل كش السطر إل المتصفح‪.‬‬
‫‪<abbr title="North Atalntic Treaty‬‬
‫>‪Organization"> NATO</abbr‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪abbr‬‬
‫;‪display: inline‬‬
‫}‬
‫‪HTML Elements‬‬ ‫‪26‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<p>....</p‬‬
‫عنرص مخصص يف العادة‪ ،‬إلدخال فقرات نصية إل الصفحة‪ ،‬وإن كان بإمكانه أن يحتوي‬
‫وغثها‪ ،‬ويمكن للصفحة‬‫أي عنرص من عناص ‪ ، html‬مثل الصور والنماذج والقوائم والجداول ر‬
‫أن تحتوي ر‬
‫أكث من عنرص <‪. >p‬‬
‫>‪<div‬‬
‫‪Lorem ipsum‬‬
‫>";‪<p style="width:400px‬‬
‫‪Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do‬‬
‫‪eiusmod tempor incididunt ut labore et dolore magna aliqua.‬‬
‫>‪</p‬‬
‫‪Lorem ipsum‬‬
‫>‪</div‬‬
‫والعنرص <‪ >p‬هو عنرص‬
‫كتلة ‪ ، block element‬أي‬
‫ينتقل إل سطر جديد بعد‬
‫العنرص الذي قبله‪ ،‬وينقل‬
‫العنرص بعده إل سطر‬
‫جديد‪ ،‬ويكون ربي العنرص >‪ <p‬والعنرص الذي قبله هامش علوي بقيمة ‪ ، (16px) 1em‬كما‬
‫سفىل بنفس القيمة‪.‬‬
‫ي‬ ‫وبي العنرص الذي بعده هامش‬
‫يكون بينه ر‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪p‬‬
‫;‪display: block‬‬
‫;‪margin: 1em 0em‬‬
‫}‬

‫قيمتي‪ ،‬القيمة األول تمثل‬

‫ر‬ ‫خاصية ‪ margin‬الموضحة بالكود السابق تتكون من‬
‫الهامشي األيمن واأليش‪.‬‬
‫ر‬ ‫والسفىل للعنرص ‪ ،‬والقيمة الثانية تمثل‬
‫ي‬ ‫الهامشي العلوي‬
‫ر‬

‫‪HTML Elements‬‬ ‫‪27‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫إلغاء وسم العنرص األب تلقائيا ‪Tag Omission‬‬

‫بعض عناص ‪ html‬من النوع ‪ block element‬قد يتم إلغاء وسم البداية له ‪opening‬‬
‫‪ tag‬وكأن العنرص لم يتم إنشاؤه‪ ،‬وبعضها قد ال يحتاج إل وسم إغالق ‪، closing tag‬‬
‫والحالتان تكونان بفعل إنشاء عنرص ابن ‪ child‬من النوع ‪ block element‬داخل العنرص‬
‫األب‪ ،‬ومن هذه العناص‪:‬‬
‫العنرص <‪>p‬‬
‫إذا أنشأ داخله عنرص ابن وكان هذا االبن عنرص <‪ >p‬أو أي عنرص من هذه العناص‪:‬‬
‫‪<address>,<aside>,<article>,<blockqoute>,<div>,<dl>,<ul>,<fieldset>,‬‬
‫‪<footer>,<form>,<h1>..<h6>,<header>,<hr>,<main>,<menu>,<nav>,<ol>,‬‬
‫>‪<p>,<pre>,<section>,<table‬‬
‫الخارج‪ ،‬حن وإن أغلق‬
‫ي‬ ‫ه إغالق للعنرص األب‬ ‫الداخىل‪ ،‬ي‬
‫ي‬ ‫فتعتث بداية إنشاء العنرص االبن‬
‫العنرص األب بعد ذلك ‪ -‬حسب التسلسل الذي سبق دراسته ‪ -‬بعد إغالق العنرص االبن‪.‬‬
‫‪<p style="width:400px; background-color:tomato"> Lorem ipsum‬‬
‫>"‪<div style="width:400px; background-color: yellow‬‬
‫‪Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed‬‬
‫‪do eiusmod tempor incididunt ut labore et dolore magna aliqua.‬‬
‫>‪</div‬‬
‫‪Lorem ipsum‬‬
‫>‪</p‬‬

‫األخثة‪ ،‬الواقعة ربي وسم نهاية العنرص االبن <‪ >div‬ووسم نهاية العنرص‬
‫ر‬ ‫الحظ أن الجملة‬
‫األب <‪ ، >p‬لم يتم تنسيقها بنفس تنسيق محتوى العنرص <‪ - >p‬خالف المتوقع ‪ -‬وظهرت‬
‫بدون هامش وبدون لون خلفية‪ ،‬بالرغم من أنها تقع داخل العنرص <‪ ، >p‬وذلك ألن العنرص‬
‫<‪ >p‬أغلق بفعل إنشاء العنرص االبن <‪ ، >div‬أي أن وسم بداية العنرص االبن قد أغلق العنرص‬
‫‪HTML Elements‬‬ ‫‪28‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬
‫وبالتال أصبحت هذه الجملة تقع خارجه‪ ،‬وإن أغلق العنرص األب بعدها‪.‬‬
‫ي‬ ‫األب‪،‬‬
‫قم باستبدال العنرص >‪ <p‬بالعنرص >‪ ، <main‬أو أي عنرص كتلة آخر‪ ،‬والحظ الفرق‬
‫ربي العنرصين ‪:‬‬

‫‪<main style="width:400px; background-color:tomato">Lorem ipsum‬‬

‫>"‪<div style="width:400px; background-color: yellow‬‬
‫‪Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed‬‬
‫‪do eiusmod tempor incididunt ut labore et dolore magna aliqua.‬‬
‫>‪</div‬‬
‫‪Lorem ipsum‬‬
‫>‪</main‬‬

‫األخثة تم تنسيقها – كما هو متوقع – بنفس تنسيق العنرص <‪>main‬‬ ‫ر‬ ‫الحظ أن الجملة‬
‫الطبيع أن تتأثر بسلوكه‪ ،‬حيث إن‬
‫ي‬ ‫وسم البداية والنهاية له‪ ،‬فكان من‬
‫ي‬ ‫األب‪ ،‬ألنها تقع داخل‬
‫مثة ‪ tag omission‬مثل العنرص <‪. >p‬‬ ‫معظم عناص ‪ block elements‬ال يمتلك ر‬

‫الن سندرسها الحقا‪.‬‬ ‫ر‬

‫المثة بالشح يف العديد من العناص ي‬
‫وسوف نتناول هذه ر‬

‫‪HTML Elements‬‬ ‫‪29‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<span>…</span‬‬
‫خط ‪ ، inline element‬ليس له عرض‬ ‫ي‬ ‫عنرص مخصص الحتواء النصوص‪ ،‬وهو عنرص‬
‫التال بعد‬
‫ي‬ ‫ه أبعاد المحتوى داخله‪ ،‬وهو عنرص ال ينتقل للسطر‬ ‫أو ارتفاع‪ ،‬وتكون أبعاده ي‬
‫التال‪،‬‬
‫العنرص الذي قبله‪ ،‬إذا كان هذا العنرص عنرصا خطيا مثله‪ ،‬وال ينقل العنرص بعده للسطر ي‬
‫إذا كان كذلك عنرصا خطيا مثله‪ ،‬أي أن العنرص قبله والعنرص بعده يكونان معه عىل نفس‬
‫السطر ‪ ،‬طالما كانا عناص خطية مثله‪.‬‬
‫>‪<span>Before image</span‬‬
‫>"‪<img src="images/colors.jpg" width="200" height="100‬‬
‫>‪<span>After image</span‬‬

‫الحظ أن العنرص <‪ >img‬وعنرص <‪ >span‬قبله‪ ،‬وعنرص <‪ >span‬بعده‪ ،‬جميعهم ظهروا‬
‫عىل سطر واحد‪ ،‬ألنهم جميعا عناص خطية‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪span‬‬
‫;‪display: inline‬‬
‫}‬

‫الحظ أن الصورة تظهر عىل نفس السطر‪ ،‬إال أن لها عرضا وارتفاعا‪ ،‬وذلك ألن عرض‬
‫وارتفاع الصور خصائص أصلية فيها‪ ،‬فنحن ال نقوم بإنشاء الصور من العدم ومنحها عرضا‬
‫وارتفاعا مثل العنرص >‪ <div‬عىل سبيل المثال‪ ،‬وإنما الصورة موجودة بكامل أبعادها‪ ،‬نحن‬
‫والتصغث‪.‬‬
‫ر‬ ‫بالتكبث‬
‫ر‬ ‫األصليي‬
‫ر‬ ‫فقط نتحكم يف العرض واالرتفاع‬

‫‪HTML Elements‬‬ ‫‪30‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<data>…</data‬‬
‫وسم البداية‬
‫ي‬ ‫كبث العنرص <‪ ، >span‬حيث يحتوي نصا ربي‬ ‫خط‪ ،‬يشبه إل حد ر‬‫ي‬ ‫عنرص‬
‫والنهاية‪ ،‬ويعرض هذا النص يف المتصفح بشكل عادي‪ ،‬باإلضافة إل خاصية أخرى لهذا‬
‫وه الخاصية ‪. value‬‬
‫العنرص‪ ،‬ال تعرض يف المتصفح ولكن يتم قراءتها آليا‪ ،‬ي‬
‫‪value‬‬
‫لتعط العنرص قيمة جديدة‪ ،‬بجانب النص المقروء يف المتصفح‪،‬‬
‫ي‬ ‫خاصية يتم قراءتها آليا‬
‫فيكون العنرص عبارة عن‪ ،‬نص مكتوب وقيمة مسموعة‪.‬‬
‫>‪<h4>Drinks list</h4‬‬
‫>‪<data value="20">Coffee</data><br‬‬
‫>‪<data value="10">Tea</data><br‬‬
‫>‪<data value="15">Juice</data><br‬‬
‫>‪<data value="25">Milk</data‬‬

‫يمثه ظاهريا‪ ،‬ولكن ما‬

‫الحظ أن العنرص <‪ >data‬ليس به ما ر‬
‫ُ‬
‫الن تقرأ آليا لثبط النص ربي‬
‫يمثه سمعيا هو الخاصية ‪ ، value‬ي‬ ‫ر‬
‫وسم البداية والنهاية للعنرص‪ ،‬بقيمة معينة يتم قراءتها‪ ،‬مثل سعر‬
‫ي‬
‫وغث ذلك من القيم‪.‬‬
‫منتج أو الكمية المخزنة‪ ،‬ر‬

‫الحظ أن محتوى العناص ظهر تحت بعضه‪ ،‬وليس بجانب بعضه‪ ،‬بالرغم من أن‬
‫ألب استخدمت العنرص‬
‫خط‪ ،‬مثل العنرص >‪ ، <span‬وذلك ي‬
‫ي‬ ‫العنرص >‪ <data‬هو عنرص‬
‫>‪ <br‬بعد وسم اإلغالق للعنرص >‪ ، <data‬فقام بكش السطر واالنتقال لسطر جديد‪،‬‬
‫لتظهر العناص عىل شكل قائمة‪.‬‬

‫‪HTML Elements‬‬ ‫‪31‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<b>....</b‬‬
‫معي بخط سميك ‪ bold‬لجذب االنتباه إليه‪ ،‬ولكن هذا العنرص‬ ‫عنرص يقوم بتنسيق نص ر‬
‫باف النص‪ ،‬وإنما فقط للفت النظر إليه‪ ،‬ومع وجود ‪، css‬‬
‫يعط النص المنسق أي أهمية عن ي‬
‫ي‬ ‫ال‬
‫الن ترغب يف أن تظهرها بخط سميك‪،‬‬ ‫ال ينصح باستخدام هذا العنرص يف تنسيق النصوص ي‬
‫والن تقوم بنفس العمل‪ ،‬وتتيح للمصمم اختيارات‬‫لوجود الخاصية ‪ font-weight‬يف ‪ ، css‬ي‬
‫أكث تنوعا ر‬
‫وأكث دقة‪.‬‬ ‫ر‬

‫‪The b tag shows the text in <b>bold</b>.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪b‬‬
‫;‪display: inline‬‬
‫;‪font-weight: bold‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪32‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<strong>....</strong‬‬
‫باف‬ ‫من‬ ‫عنرص يقوم بتنسيق نص معي بخط سميك‪ ،‬وهذا النص يكون له أهمية ر‬
‫أكث‬
‫ي‬ ‫ر‬
‫وبي العنرص <‪. >b‬‬
‫أجزاء النص‪ ،‬وهذا هو وجه االختالف بينه ر‬
‫‪This text contains some <strong>important</strong> parts.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪strong‬‬
‫;‪display: inline‬‬
‫;‪font-weight: bold‬‬
‫}‬

‫وتأثث العنرص >‪ ، <b‬ولعلك تسأل‬‫ر‬ ‫الحظ أن العنرص >‪ <strong‬له نفس سلوك‬
‫نفسك‪ ،‬لماذا هذا التعدد يف العناص ‪ ،‬بالرغم من تشابه وتطابق التنسيق والشكل؟‬
‫وسوف أجيبك عىل هذا السؤال يف آخر هذا الجزء‪ ،‬لتكون اإلجابة شاملة هذه العناص ‪،‬‬
‫أو أي عناص أخرى متشابهة‪.‬‬

‫‪HTML Elements‬‬ ‫‪33‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<i>....</i‬‬
‫األصىل‪ ،‬فهذا النص‬
‫ي‬ ‫وتثة النص‬
‫معي بخط مائل‪ ،‬للخروج من ر‬ ‫عنرص يقوم بتنسيق نص ر‬
‫المائل يمكن أن يكون تصنيفا معينا (مثل رجل‪ ،‬امرأة‪ ،‬طفل)‪ ،‬أو مصطلحات فنية‪ ،‬أو ترجمة‬
‫وغثها‪.‬‬
‫من لغة أخرى‪ ،‬أو شخص يحدث نفسه بفكرة ما‪ ،‬أو قراءة صوتية ر‬
‫‪<i>HTML</i> is used to build web pages structure.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪i‬‬
‫;‪display: inline‬‬
‫;‪font-style: italic‬‬
‫}‬

‫>‪<em>....</em‬‬
‫عنرص يقوم بتنسيق النص بخط مائل‪ ،‬للتأكيد والتشديد عىل نقاط مهمة يف هذا النص‬
‫باف النص العادي‪.‬‬
‫تمثه عن ي‬
‫المائل‪ ،‬ر‬
‫‪We have to <em> stay at home </em> to avoid covid-19.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪em‬‬
‫;‪display: inline‬‬
‫;‪font-style: italic‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪34‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<cite>....</cite‬‬
‫عنرص يقوم بتنسيق النص بخط مائل‪ ،‬وهو مخصص لتنسيق العناوين داخل نص‪ ،‬مثل‬
‫عناوين الكتب واألفالم والمشحيات واأللعاب واللوحات الفنية والمقاالت‪ ،‬واألعمال اإلبداعية‬
‫تميثها)‪.‬‬
‫باف النص (أسماء األشخاص ليست عناوين أعمال إبداعية ليتم ر‬ ‫لتميثها عن ي‬
‫ر‬ ‫عامة‪،‬‬
‫‪The <cite>Mona Lisa</cite> is painted by Leonardo da Vinci.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪cite‬‬
‫;‪display: inline‬‬
‫;‪font-style: italic‬‬
‫}‬

‫>‪<var>....</var‬‬
‫المتغثات يف‬
‫ر‬ ‫عنرص يقوم بتنسيق النص بخط مائل‪ ،‬وهو مخصص لتنسيق أسماء‬
‫الرياضيات ولغات الثمجة‪.‬‬
‫‪The area of the rectangle = <var>width</var> * <var>length</var>.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪var‬‬
‫;‪display: inline‬‬
‫;‪font-style: italic‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪35‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<dfn>....</dfn‬‬
‫معي‪ ،‬سوف يتم‬
‫عنرص يقوم بتنسيق النص بخط مائل‪ ،‬وهو مخصص لتنسيق مصطلح ر‬
‫الحال‪.‬‬
‫ي‬ ‫رشحه يف سياق النص‬
‫‪The <dfn>CSS</dfn> is used to format HTML elements.‬‬

‫تعيي خاصية واحدة للعنرص >‪: <dfn‬‬

‫ويتم ر‬
‫‪title‬‬
‫خاصية تقوم بإظهار تلميح أو ‪ ، tooltip‬عند مرور الفأرة فوق المصطلح‪.‬‬
‫‪The <dfn title="Cascading Style Sheets">CSS</dfn> is used …..‬‬

‫الحظ أن العنرص >‪ <dfn‬يشبه العنرص‬

‫>‪ <abbr‬يف سلوكه‪ ،‬ولكنه يختلف عنه يف أن النص‬
‫ً‬
‫وسم البداية والنهاية للعنرص يكون مائال‪ ،‬كما ال‬
‫ي‬ ‫ربي‬
‫يوجد خط منقط تحت المصطلح أو االختصار الذي‬
‫سيتم رشحه‪.‬‬

‫أكث من سطر ‪ ،‬عن طريق كش‬ ‫كذلك يمكن كتابة التلميح عىل ر‬
‫السطر يف قيمة الخاصية ‪ ، title‬وسيظهر ذلك يف المتصفح‪.‬‬
‫‪<dfn title="Cascading Style‬‬
‫>‪Sheets">CSS</dfn‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪dfn‬‬
‫;‪display: inline‬‬
‫;‪font-style: italic‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪36‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<address>....</address‬‬
‫عنرص يقوم بتنسيق النص بخط مائل‪ ،‬وهو مخصص لتنسيق معلومات االتصال لشخص‬
‫وب ومواقع التواصل‬
‫معي‪ ،‬وقد يتضمن االسم والعنوان ورقم الهاتف والثيد اإللكث ي‬
‫أو مكان ر‬
‫وغثها من وسائل التواصل‪.‬‬
‫االجتماع‪ ،‬ر‬
‫ي‬
‫‪Contact us:‬‬
‫>‪<address>Name: Tourism and travel Co.</address‬‬
‫>‪<address>Address: Egypt, Alexandria. </address‬‬
‫>‪<address>Phone: 0203441552989.</address‬‬
‫>‪<address>Email: www.tourtravel.com</address‬‬

‫وبما أن العنرص <‪ >address‬هو عنرص كتلة ‪ ، block element‬فإنه يشغل السطر‬
‫بالكامل عند إنشائه‪ ،‬وينقل العنرص بعده إل سطر جديد‪.‬‬
‫وبناء عىل وظيفته ‪ ،‬فإن أنسب عنرص يمكن أن يحتوي العنرص <‪ >address‬داخله هو‬
‫العنرص <‪ ، >footer‬المخصص الحتواء معلومات االتصال بجهة معينة‪ ،‬والذي سندرسه يف‬
‫التال من هذا الكتاب‪.‬‬
‫الجزء ي‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪address‬‬
‫;‪display: block‬‬
‫;‪font-style: italic‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪37‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<u>....</u‬‬
‫معي‪ ،‬وهذ النص قد يكون خطأ يف التهجئة‪،‬‬
‫عنرص يقوم بوضع خط مصمت تحت نص ر‬
‫باف النص‪.‬‬
‫لتميث هذا الجزء من النص عن ي‬
‫ر‬ ‫أو أسماء بلغة أخرى‪،‬‬
‫‪Make the wrong words <u>underline ones</u> to find it easily.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪u‬‬
‫;‪display: inline‬‬
‫;‪text-decoration: underline‬‬
‫}‬

‫يفضل عدم استخدام هذا العنرص أو هذا التنسيق مع النصوص‪ ،‬حن ال يحدث خلط‬
‫الن دائما يكون تنسيقها‬
‫وبي الروابط التشعبية‪ ،‬ي‬
‫ربي النص المنسق بخط تحته‪ ،‬ر‬
‫‪.underline‬‬

‫‪HTML Elements‬‬ ‫‪38‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<ins>....</ins‬‬
‫عنرص يقوم بوضع خط مصمت تحت النص الذي تم تعديله إو إدخاله‪.‬‬
‫>‪<ins> <p> This paragrah is updated today</p></ins‬‬

‫خاصيتي للعنرص <‪: >ins‬‬

‫ر‬ ‫تعيي‬
‫ويتم ر‬
‫‪cite‬‬
‫الن تحتوي توضيحا للتعديل أو النص الذي‬
‫وه خاصية تحدد الموقع ‪ URL‬أو الصفحة‪ ،‬ي‬ ‫ي‬
‫تم إدخاله‪ ،‬مثل محرص اجتماع أو خطوات متابعة مشكلة ما‪.‬‬
‫‪datetime‬‬
‫وه خاصية تحدد تاري ــخ إجراء التعديل عىل النص‪ ،‬أو تاري ــخ محرص االجتماع‪ ،‬وتقبل‬
‫ي‬
‫معايث العنرص >‪ <time‬ص ‪. 52‬‬
‫ر‬ ‫قيمتها عىل هيئة نص‪ ،‬يحتوي تاريخا متوافقا مع‬
‫>"‪<ins cite="www.company.com" datetime="2021-03-16‬‬
‫>‪<p> This paragrah is updated today</p‬‬
‫>‪</ins‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪ins‬‬
‫;‪display: inline‬‬
‫;‪text-decoration: underline‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪39‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<del>....</del‬‬
‫عنرص يقوم بتنسيق النص‪ ،‬بخط يمر يف وسطه‪ ،‬وهذا النص يدل عىل معلومة تم حذفها‪،‬‬
‫األصىل‪.‬‬
‫ي‬ ‫بباف أجزاء النص‬
‫إال أن لها عالقة ي‬
‫‪The old color was <del>blue</del> and the new one is red.‬‬

‫خاصيتي للعنرص >‪: <del‬‬

‫ر‬ ‫تعيي‬
‫ويتم ر‬
‫‪cite‬‬
‫الن تحتوي توضيحا ألسباب حذف هذا‬
‫وه خاصية تحدد الموقع ‪ URL‬أو الصفحة‪ ،‬ي‬
‫ي‬
‫النص‪.‬‬
‫‪datetime‬‬
‫وه خاصية تحدد تاري ــخ حذف النص‪ ،‬وتقبل قيمتها عىل هيئة نص‪ ،‬يحتوي تاريخا‬
‫ي‬
‫معايث العنرص <‪ >time‬ص ‪. 52‬‬
‫ر‬ ‫متوافقا مع‬
‫‪The old color was‬‬
‫>‪<del cite="www.clr.com" datetime="2020-05-31">blue</del‬‬
‫‪and the new one is red.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪del‬‬
‫;‪display: inline‬‬
‫;‪text-decoration: line-through‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪40‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<s>....</s‬‬
‫غث دقيق‪ ،‬أو‬
‫معي‪ ،‬بخط يمر يف وسطه‪ ،‬ألن هذا النص أصبح ر‬‫عنرص يقوم بتنسيق نص ر‬
‫الحال‪.‬‬
‫ي‬ ‫األصىل يف الوقت‬
‫ي‬ ‫غث ذي صلة بالنص‬
‫غث مستخدم‪ ،‬أو ر‬
‫ر‬
‫‪I though the job salary is <s>500$</s> but, it was 300$ only.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪s‬‬
‫;‪display: inline‬‬
‫;‪text-decoration: line-through‬‬
‫}‬

‫ال تخلط ربي العنرص >‪ <del‬والعنرص >‪ ، <s‬فالعنرص >‪ <del‬مخصص للنص‬
‫الغث مستخدم‪.‬‬
‫الغث دقيق أو ر‬
‫المحذوف أو المعدل‪ ،‬بينما العنرص >‪ <s‬مخصص للنص ر‬

‫>‪<code>....</code‬‬
‫برمج‪ ،‬سطر أو جملة يف نص‪ ،‬يستخدم ككود يف لغة برمجة‬
‫ي‬ ‫عنرص مخصص لتنسيق كود‬
‫أو تعليمات من الحاسب‪ ،‬ويتم تنسيقه بنوع خط من العائلة ‪ ، monospace‬الذي يشبه خط‬
‫اآللة الكاتبة‪.‬‬
‫‪To resize text use <code> font-size </code> property.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪code‬‬
‫;‪display: inline‬‬
‫;‪font-family: monospace‬‬
‫}‬
‫‪HTML Elements‬‬ ‫‪41‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<kbd>....</kbd‬‬
‫معي‪ ،‬بخط من نوع خط اآللة الكاتبة‪ ،‬ويكون هذا النص قد‬
‫عنرص مخصص لتنسيق نص ر‬
‫تم إدخاله عن طريق لوحة المفاتيح أو الميكروفون‪ ،‬أو أي وسيلة إدخال ‪ input‬أخرى‪ ،‬ويكون‬
‫تنسيق الخط من نوع العائلة ‪. monospace‬‬
‫>‪Enter the author name: <kbd>Wail Monir</kbd‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪kbd‬‬
‫;‪display: inline‬‬
‫;‪font-family: monospace‬‬
‫}‬

‫>‪<samp>....</samp‬‬
‫برمج‪ ،‬بخط من نوع خط اآللة الكاتبة‪،‬‬
‫ي‬ ‫عنرص مخصص لتنسيق مخرجات ‪ output‬كود‬
‫ويتم تنسيق النص بخط من نوع ‪. monospace‬‬
‫‪When I tried to delete some files the computer asked me‬‬
‫‪<samp>are you sure</samp>.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪samp‬‬
‫;‪display: inline‬‬
‫;‪font-family: monospace‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪42‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<pre>....</pre‬‬
‫عنرص يقوم بتنسيق النص يف المتصفح‪ ،‬من حيث المسافات وانكسار األسطر‪ ،‬بنفس‬
‫تنسيق كود المصدر ‪ ، source code‬أي بنفس المسافات الفارغة واألسطر الجديدة ال ين‬
‫تستخدم يف محرر األكواد‪ ،‬ويكون نوع الخط من العائلة ‪. monospace‬‬
‫>‪<pre‬‬
‫‪My‬‬ ‫‪name is‬‬
‫‪Wail‬‬ ‫‪Monir‬‬
‫>‪</pre‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪pre‬‬
‫;‪display: block‬‬
‫;‪font-family: monospace‬‬
‫;‪margin-top: 1em‬‬
‫;‪margin-bottom: 1em‬‬
‫;‪white-space: pre‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪43‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<q>....</q>
‫ ويكون‬،‫الصغثة داخل نص أكث‬
‫ر‬ ‫عنرص مخصص الحتواء االقتباسات النصية الخطية‬
.‫الكبثة‬
‫غث مخصص للفقرات النصية ر‬
‫ وهذا االقتباس ر‬،‫قوش اقتباس‬
‫ي‬ ‫النص المقتبس ربي‬
<div style="width:400px">Lorem ipsum dolor bhas jkp sit amet,
<q>consectetur adipiscing</q> elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad <q>minim veniam</q> quis
nostrud exercitatn esse cillum dolore eu fugiat nulla pariatur.</div>

: >q< ‫تعيي خاصية واحدة للعنرص‬

‫ويتم ر‬
cite
‫تشث إل‬
‫ وقد ر‬،‫ أو الرسالة المطلوب إيصالها من هذا االقتباس‬،‫خاصية تحدد مصدر النص‬
.‫ يفش هذا االقتباس‬،‫معي‬
‫مصدر ر‬

:َ‫ا‬
‫التنسيق االفث ي‬
q{
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}

HTML Elements 44 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<blockquote>....</blockquote>
‫ وهذا النص ال يتم إحاطته‬،‫الكبثة ذات الفقرات‬
‫ر‬ ‫عنرص مخصص لالقتباسات النصية‬
‫ ويكون لها هامش‬،‫باف النص‬
‫ وهو منسق ليكون فقرة نصية منفصلة عن ي‬،‫بأقواس االقتباس‬
.‫اضن من الجهات األربــع‬
‫افث ر ي‬
: >blockquote< ‫تعيي خاصية واحدة للعنرص‬ ‫ويتم ر‬
cite
.‫ الصفحة أو الموقع المأخوذ منه االقتباس‬URL ‫خاصية تحدد‬
Lorem ipsum dolor
<blockquote cite="www.lorumipsum.com">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
esse cillum dolore eu fugiat nulla pariatur.
</blockquote>
Lorem ipsum dolor

:َ‫ا‬
‫التنسيق االفث ي‬
blockqoute {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 40px;
margin-left: 40px;
}

HTML Elements 45 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<mark>....</mark‬‬
‫باف النص وسهولة العثور عليه‪،‬‬
‫لتميثه عن ي‬
‫ر‬ ‫معي‪،‬‬
‫عنرص مخصص لتظليل خلفية نص ر‬
‫معي‪.‬‬
‫مثل تظليل كلمة‪ ،‬يتم البحث عنها داخل نص ر‬
‫>‪Write the student names and mark <mark> the best ones</mark‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪mark‬‬
‫;‪background-color: yellow‬‬
‫;‪color: black‬‬
‫}‬

‫>‪<sub>....</sub‬‬
‫عنرص مخصص لتنسيق نص‪ ،‬بحجم أصغر من النص العادي‪ ،‬وأسفل مستوى النص‬
‫العادي‪ ،‬بمسافة تقدر بنصف ارتفاع النص تقريبا ‪ ،subscript‬ويستخدم هذا العنرص يف‬
‫وف ترقيم الهامش‪.‬‬
‫الغالب‪ ،‬يف المعادالت والرموز الكيميائية ي‬
‫‪Chemical formula for water is H₂O‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪sub‬‬
‫;‪vertical-align: sub‬‬
‫;‪font-size: smaller‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪46‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<small>....</small‬‬
‫جانن‪.‬‬
‫ي‬ ‫اَ‪ ،‬ويستخدم كتعليق‬
‫عنرص يعرض النص بخط أصغر من الخط االفث ي‬
‫>‪<span>Bigger Text<small> Not Bigger Enough</small></span‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪small‬‬
‫;‪font-size: smaller‬‬
‫}‬

‫>‪<sup>....</sup‬‬
‫عنرص مخصص لتنسيق نص‪ ،‬بحجم أصغر من النص العادي‪ ،‬وأعىل قاعدة النص العادي‪،‬‬
‫بمسافة تقدر بنصف ارتفاع النص تقريبا ‪ ،supscript‬ويستخدم هذا العنرص يف الغالب‪ ،‬يف‬
‫الرياَ‪ ،‬أوكتابة ترتيب األرقام ‪. Ordinal numbers‬‬
‫ي‬ ‫كتابة األس‬
‫‪5³ = 125‬‬

‫مثال آخر‪:‬‬
‫>‪Ordinal no. : 1^st, 2^nd, 3<sup>th</sup‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪sup‬‬
‫;‪vertical-align: super‬‬
‫;‪font-size: smaller‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪47‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<bdi>....</bdi‬‬
‫األصىل‪ ،‬فيظهر النص‬
‫ي‬ ‫عنرص يقوم بعزل جزء من النص‪ ،‬له اتجاه مختلف عن اتجاه النص‬
‫ئ‬
‫ثناب االتجاه ‪. bidirectional‬‬
‫بصورة صحيحة بالرغم من أنه ي‬
‫>‪Info : Name | Age | Job <br‬‬
‫>‪ | Developer.<br‬وائل | ‪Info1: 47‬‬
‫‪ </bdi> | 47 | Developer.‬وائل > ‪Info2: <bdi‬‬

‫اليمي إل اليسار (ألنه باللغة العربية)‪ ،‬بينما اتجاه النص‬

‫ر‬ ‫الحظ أن اتجاه النص كوائلك من‬
‫غث مرتب‪ ،‬بينما ظهر النص‬ ‫الثاب ظهر ر‬
‫اليمي‪ ،‬فتجد أن النص يف السطر ي‬ ‫األصىل من اليسار إل ر‬
‫ي‬
‫يف السطر الثالث مرتبا‪ ،‬نظرا الستخدام العنرص <‪ >bdi‬يف عزل النص مختلف االتجاه عن‬
‫األصىل‪ ،‬مع العلم أن النص داخل محتوى العنرص <‪ >bdi‬ال يؤثر ‪ ،‬وال يتأثر باتجاه النص‬
‫ي‬ ‫النص‬
‫خارج هذا المحتوى‪.‬‬
‫تعيي خاصية واحدة للعنرص <‪: >bdi‬‬‫ويمكن ر‬
‫‪dir‬‬
‫خاصية تحدد اتجاه النص داخل العنرص‪ ،‬ولها قيمتان‪:‬‬
‫اليمي إل اليسار‪.‬‬ ‫‪ : rtl -‬قيمة ي‬
‫تعن أن اتجاه النص داخل العنرص يكون من ر‬
‫اليمي‪.‬‬ ‫‪ : ltr -‬قيمة ي‬
‫تعن أن اتجاه النص داخل العنرص يكون من اليسار إل ر‬
‫كثث من األحيان ‪ ،‬يقوم المتصفح دائما باختيار االتجاه الصحيح للنص داخل‬‫ولكن يف ر‬
‫لتعيي هذه الخاصية وإسناد القيمة المطلوبة لها‪.‬‬
‫ر‬ ‫العنرص‪ ،‬وأحيانا قد يحتاج‬
‫األصىل‪،‬‬
‫ي‬ ‫تغيث يف اتجاه النص‬
‫قم بإضافة الخاصية للكود السابق‪ ،‬والحظ عدم حدوث أي ر‬
‫أو اتجاه النص مختلف االتجاه‪ ،‬حيث حدد المتصفح اتجاه النص مختلف االتجاه‪ ،‬دون‬
‫الحاجة إل هذه الخاصية‪.‬‬
‫‪HTML Elements‬‬ ‫‪48‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

Info2: <bdi dir="rtl"> ‫< وائل‬/bdi> | 47 | Developer.

:َ‫ا‬
‫التنسيق االفث ي‬
bdi {
unicode-bdi: isolate;
}

HTML Elements 49 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<bdo>....</bdo‬‬
‫األصىل‪.‬‬
‫ي‬ ‫عنرص يقوم بعكس اتجاه جزء من النص‪ ،‬عن اتجاه النص‬
‫>‪Learn Web Design Starting with <bdo dir="rtl">HTML</bdo‬‬

‫تعيي خاصية واحدة للعنرص <‪: >bdo‬‬

‫ويمكن ر‬
‫‪dir‬‬
‫قيمتي‪:‬‬
‫ر‬ ‫خاصية تحدد االتجاه المطلوب أن يتبعه النص داخل العنرص‪ ،‬والخاصية هنا تقبل‬
‫اليمي إل اليسار‪.‬‬
‫تعن أن اتجاه النص داخل العنرص يكون من ر‬
‫‪ : rtl -‬قيمة ي‬
‫اليمي‪.‬‬
‫تعن أن اتجاه النص داخل العنرص يكون من اليسار إل ر‬
‫‪ : ltr -‬قيمة ي‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪bdo‬‬
‫;‪unicode-bdi: bidi-override‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪50‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<wbr‬‬
‫عنرص ‪ empty element‬مخصص لكش الكلمة‪ ،‬والتفاف النص إل سطر جديد‪ ،‬إذا زاد‬
‫عرض الكلمة عن عرض السطر‪ ،‬أو عن عرض العنرص الذي يحتويــها‪ ،‬وليس رشطا أن يكون‬
‫موضع كش الكلمة‪ ،‬هو آخر حروف ال يستوعبها السطر‪ ،‬بل يمكن أن يكون يف أي موضع من‬
‫الكلمة‪ ،‬إذا تحقق ر‬
‫الشط السابق‪.‬‬
‫>";‪<div style="width: 100px; border: 0.5px dotted‬‬
‫>‪disadvantagement</div‬‬
‫>";‪<div style="width: 100px; border: 0.5px dotted‬‬
‫>‪disadvantage<wbr>ment</div‬‬
‫وانكسار الكلمة والتفاف النص يكون عند أي موضع يوجد‬
‫بشط أن يزيد عرض الكلمة عن عرض‬ ‫فيه العنرص <‪ ، >wbr‬ر‬
‫السطر أو عرض العنرص الذي يحتويــها‪ ،‬وإال فلن يكون للعنرص‬
‫تأثث‪ ،‬ولن يحدث انكسار للكلمة‪ ،‬كما بالشكل‬ ‫<‪ >wbr‬أي ر‬
‫التال‪:‬‬
‫المقابل والكود ي‬

‫>";‪<div style="width: 100px; border: 0.5px dotted‬‬

‫>‪advant<wbr>age</div‬‬
‫الحظ أن الكلمة لم تنكش‪ ،‬برغم وجود العنرص <‪ ، >wbr‬ألن السطر يتسع للكلمة‪ ،‬ولم‬
‫يزد طولها عن عرض السطر الذي يحتويــها‪.‬‬
‫\‬

‫إنكسار الكلمة عن طريق العنرص >‪ ، <wbr‬ال يضع‬

‫رشطة وصل تلقائية ‪ ، hyphen‬يف موضع الكش والتفاف‬
‫النص‪ ،‬ولوضع رشطة وصل يف موضع الكش‪ ،‬يجب وضع‬
‫وه تلقائية‪ ،‬ألنها ال‬ ‫ر‬
‫رمز شطة الوصل التلقائية ;‪ ، &shy‬ي‬
‫تظهر إال إذا حدث انكسار للكلمة‪.‬‬

‫>‪<div style="width: 50px;"> advant<wbr>&shy;age</div‬‬

‫‪HTML Elements‬‬ ‫‪51‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<time>....</time‬‬
‫تعيي خاصية وحيدة له ‪:‬‬
‫عنرص مخصص الحتواء التاري ــخ والوقت‪ ،‬ويمكن ر‬
‫‪datetime‬‬
‫خاصية تحدد التاري ــخ والوقت‪ ،‬حن يمكن قراءتهم عن طريق برامج قراءة النصوص‪،‬‬
‫معي‪ ،‬أو تستخدمها محركات البحث يف ترتيب نتائج البحث‪.‬‬
‫للتذكث بتاري ــخ ر‬
‫ر‬ ‫فتستخدم‬
‫>‪<!-- local time--‬‬
‫>‪<time datetime="2020-11-16T01:53:16.929">16 Nov. 2020</time‬‬
‫>‪<br‬‬
‫>‪<!-- Globl time--‬‬
‫>‪<time datetime="2020-11-16T01:53:16.929Z">16 Nov. 2020</time‬‬

‫الصيغة المستخدمة داخل الخاصية ‪datetime‬‬

‫‪Type‬‬ ‫‪Value‬‬
‫‪years‬‬ ‫‪2020‬‬
‫‪month‬‬ ‫‪2020-11‬‬
‫‪date‬‬ ‫‪2020-11-25‬‬
‫‪yearless‬‬ ‫‪10-31‬‬ ‫الشهر واليوم بدون العام‬
‫‪week‬‬ ‫‪2020-W32‬‬ ‫األسبوع ‪ 32‬من السنة ‪2020‬‬
‫‪time‬‬ ‫‪17:34 or 17:34:25 or 17:34:25.763‬‬
‫‪2020-11-25 17:34:25.763‬‬
‫‪local date & time‬‬
‫‪2020-11-25T17:34:25.763‬‬
‫‪2020-11-25 17:34:25.763Z‬‬ ‫يعن توقيت جرينتش‬ ‫‪ Z‬ي‬
‫& ‪global date‬‬ ‫‪2020-11-25T17:34:25.763Z‬‬
‫‪time‬‬ ‫‪2020-11-25 17:34:25.763-0400‬‬
‫‪2020-11-25 17:34:25.763-04:00‬‬
‫‪period of time‬‬ ‫‪PT8H32M50S‬‬ ‫الفثة الزمنية ‪ 8‬ساعات و‪ 32‬دقيقة و‪ 50‬ثانية‬

‫‪HTML Elements‬‬ ‫‪52‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<template>....</template‬‬
‫ر‬
‫مباشة عند تحميل صفحة ‪ ، html‬ولكن يتم‬ ‫عنرص ال يتم عرضه أو عرض محتوياته‬
‫تنشيط عملية العرض الحقا باستخدام الجافاسكربت ‪. Javascript‬‬
‫>‪<h1>Hidden Elements</h1‬‬
‫>‪<div> Any elements inside template will be hidden</div‬‬
‫‪<template>Text‬‬
‫>‪</template‬‬
‫الحظ أن النص داخل محتوى‬
‫غث ظاهر عند بداية‬
‫العنرص ‪ template‬ر‬
‫تحميل الصفحة‪.‬‬

‫إظهار العنرص ‪ template‬أو محتواه عن طريق ‪ javascript‬يستلزم معرفة جيدة بهذه‬

‫ماه طبيعة عمل‬
‫ي‬ ‫اللغة‪ ،‬وهذا يقع خارج نطاق هذا الكتاب‪ ،‬لذلك يكفيك حاليا أن تعرف‬
‫وتأثثه عىل العناص داخله‪.‬‬
‫العنرص ‪ template‬ر‬

‫>‪<slot>....</slot‬‬
‫عنرص يشثك مع العنرص ‪ template‬إلنشاء عناص جديدة يف الصفحة‪ ،‬وذلك عن طريق‬
‫معي‪ ،‬يمكن‬‫بناء ما يسم ‪ ، web component‬وهو عبارة عن كود موضوع يف قالب ر‬
‫استخدامه أي عدد من المرات‪ ،‬يف مواضع أو صفحات متعددة‪ ،‬ويستخدم عن طريق الجافا‬
‫سكربت‪ ،‬أو أحد إطاراتها ‪. frameworks‬‬
‫ومجال التطبيق عىل هذا العنرص مثل العنرص ‪ ، template‬خارج نطاق هذا الكتاب حيث‬
‫يحتاج ‪ -‬كما ذكرنا سابقا ‪ -‬إل دراية بلغة ‪ javascript‬وكذلك الدراية بأحد إطاراتها‪.‬‬

‫‪HTML Elements‬‬ ‫‪53‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<ruby>....</ruby‬‬
‫وف الغالب يستخدم هذا‬
‫معي أو فوقه أو بعده‪ ،‬ي‬
‫عنرص يستخدم إلدخال الكتابة تحت نص ر‬
‫ولكنن استخدمت اللغة‬
‫ي‬ ‫العنرص يف إدخال اللغات األسيوية (الصينية واليابانية والكورية)‪،‬‬
‫واإلنجلثية‪ ،‬ليسهل استيعاب عمل هذا العنرص‪.‬‬
‫ر‬ ‫العربية‬
‫تأثثه‪:‬‬
‫داخليي يك يظهر ر‬
‫ر‬ ‫وهذا العنرص يحتاج إل عنرصين‬

‫>‪<rp>….</rp‬‬
‫الن تفصل ربي الكلمات‪ ،‬أو‬ ‫‪ ruby parenthesis‬وهو عنرص مخصص الحتواء األقواس‪ ،‬ي‬
‫ربي جزء من النص وجزء آخر‪ ،‬وهو يحتوي إما قوس البداية‪ ،‬أو قوس النهاية‪.‬‬

‫>‪<rt>….</rt‬‬
‫‪ ruby text‬وهو عنرص مخصص الحتواء النص الذي يتم إدخاله‪.‬‬
‫>‪<ruby‬‬
‫>‪ </rt><rp>)</rp‬بكم >‪<rp>(</rp><rt‬نرحب‬
‫>‪Welcome <rp>(</rp><rt> home </rt><rp>)</rp‬‬
‫>‪</ruby‬‬

‫‪HTML Elements‬‬ ‫‪54‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<progress>....</progress‬‬
‫عنرص يقوم بعرض معلومات معينة‪ ،‬عىل هيئة رشيط يوضح التقدم يف إنجاز عملية ما‪ ،‬عن‬
‫خاصيتي لهذا العنرص ‪:‬‬
‫ر‬ ‫تعيي‬
‫طريق ر‬
‫‪max‬‬
‫خاصية تحدد أعىل قيمة للتقدم يمكن أن تظهر عىل هذا ر‬
‫الشيط‪.‬‬
‫‪value‬‬
‫الن تظهر مدى التقدم يف إنجاز العملية‪.‬‬
‫خاصية تحدد القيمة ي‬
‫‪<progress max="100" value="45"></progress> 45%‬‬

‫يجب أن تكون قيمة الخاصية ‪ max‬قيمة موجبة‪ ،‬والقيمة الصغرى تكون ‪ 0‬افثاضيا‪،‬‬
‫وتكون قيمة الخاصية ‪ value‬أصغر من قيمة الخاصية ‪ ،max‬أو تساويــها ليظهر رشيط التقدم‬
‫بالشكل الصحيح‪:‬‬
‫‪<progress max="50" value="45"></progress> 45%‬‬

‫تغيث قيمة الخاصية ‪ max‬قد أثر عىل نسبة التقدم‪ ،‬حيث إن التقدم يف إنجاز‬‫الحظ أن ر‬
‫العملية‪ ،‬يكون دائما هو النسبة ربي قيمة الخاصية ‪ value‬إل قيمة الخاصية ‪. max‬‬

‫‪HTML Elements‬‬ ‫‪55‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<meter>....</meter‬‬
‫هو عنرص مشابه للعنرص <‪ >progress‬حيث يظهر هذا العنرص عىل هيئة رشيط تقدم يف‬
‫متغثة‪ ،‬وال يشثط‬
‫إنجاز عمليه ما‪ ،‬والفرق بينهما‪ ،‬أن القيمة الصغرى ‪ min‬للعنرص <‪ >meter‬ر‬
‫أن تكون ثابتة‪ ،‬أو تساوي ‪ 0‬مثل العنرص <‪ ، >progress‬كما أن العنرص <‪ >meter‬يحدد‬
‫تغيث لون ر‬ ‫ً‬
‫الشيط المثي‪،‬‬ ‫ظاهريا‪ ،‬إذا ما كان التقدم يف إنجاز العملية مقبوال أم ال‪ ،‬عن طريق ر‬
‫تعيي عدة خصائص للعنرص <‪: >meter‬‬ ‫ويمكن ر‬
‫‪min‬‬
‫خاصية تحدد القيمة الصغرى الن لن تقل عنها قيمة ا ر‬
‫لشيط المثي‪.‬‬ ‫ي‬
‫‪max‬‬
‫خاصية تحدد القيمة الكثى الن لن تزيد عنها قيمة ا ر‬
‫لشيط المثي‪.‬‬ ‫ي‬
‫‪value‬‬
‫خاصية تحدد القيمة الن تظهر عىل ر‬
‫الشيط المثي‪.‬‬ ‫ي‬
‫‪optimum‬‬
‫خاصية تحدد القيمة المثىل ر‬
‫للشيط المثي‪.‬‬
‫‪low‬‬
‫سيتغث عندها لون ر‬
‫الشيط إذا انخفض عنها‪.‬‬ ‫الن‬
‫ر‬ ‫خاصية تحدد القيمة ي‬
‫‪high‬‬
‫سيتغث عندها لون ر‬
‫الشيط إذا ارتفع عنها‪.‬‬ ‫الن‬
‫ر‬ ‫خاصية تحدد القيمة ي‬
‫‪<meter min="0" max="100" value="45" optimum="50"></meter> 45%‬‬
‫>‪<br‬‬
‫>‪<meter min="0" max="100" value="25" low="50"></meter> 25%<br‬‬
‫‪<meter min="0" max="100" value="80" high="75"></meter> 80%‬‬
‫الحظ أن لون ر‬
‫الشيط المثي كان باللون األخرص يف حالته العادية‪ ،‬وعندما تم تحديد قيمة‬
‫الشيط باللون األصفر‪ ،‬وكذلك‬‫الخاصية ‪ low‬وانخفضت قيمة الخاصية ‪ value‬عنها تلون ر‬

‫‪HTML Elements‬‬ ‫‪56‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

‫ عن قيمة‬value ‫الحال عندما زادت قيمة الخاصية‬

. high ‫الخاصية‬

‫ عن‬low ‫ إذا زادت قيمة الخاصية‬، ‫الشيط المثي يتحول للون األحمر‬‫الحظ أن لون ر‬
‫وف نفس الوقت كانت قيمة الخاصية‬ ‫ ي‬، max ‫ و‬min ‫الخاصيتي‬
‫ر‬ ‫قيمن‬
‫ي‬ ‫متوسط مجموع‬
: high ‫ أكث من قيمة الخاصية‬value
<!-- low value <= (min value+max value)/2 & value > high value -->
<meter min="0" max="100" value="80" low="50"
high="75"></meter> 80%
<meter min="0" max="90" value="60" low="45"
high="55"></meter> 60% <br>
<!-- low value > (min value+max value)/2 & value < high value -->
<meter min="0" max="100" value="70" low="51"
high="75"></meter> 80%
<meter min="0" max="90" value="50" low="46"
high="55"></meter> 60% <br>
<!-- low value > (min value+max value)/2 & value > high value -->
<meter min="0" max="100" value="80" low="51"
high="75"></meter> 80%
<meter min="0" max="90" value="60" low="46"
high="55"></meter> 60%

‫ يعود اللون لحالته السابقة يف‬،‫السابقي‬

‫ر‬ ‫الش ر‬
‫طي‬ ‫ ف حالة عدم تحقق أحد ر‬،‫الحظ أنه‬
‫ي‬
‫ بنفس ر‬،‫المثال األول‬
.‫الشوط المذكورة يف المثال‬
HTML Elements 57 [email protected]
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫التشابه ربي العناص يف التنسيق الظاهري‬

‫الن تتشابه يف تنسيقها ظاهريا‪ ،‬فاعلم أن التشابه‬‫بما أنك قد الحظت وجود بعض العناص ي‬
‫الن تؤثر‬‫ربي العناص هو تشابه يف الشكل فقط‪ ،‬ولكن وراء هذا الشكل توجد بعض التفاصيل ي‬
‫يف عمل صفحة الويب‪ ،‬فهذه العناص قد تختلف يف وظيفتها‪ ،‬وقد تختلف يف معناها‪ ،‬ألن لها‬
‫مفاهيم ودالالت معينة أو ‪. semantics‬‬
‫فالعنرص <‪ >strong‬وإن تشابه يف التنسيق مع العنرص <‪ ، >b‬إال أن النص داخل العنرص‬
‫الن‬
‫<‪ >strong‬يتمتع بدرجة أكث من األهمية‪ ،‬لذلك عند استخدام برامج قراءة النصوص ي‬
‫يستعي بها فاقدو البرص‪ ،‬تكون النصوص المنسقة بهذا العنرص‪ ،‬أشد تأكيدا عند النطق بها‪،‬‬ ‫ر‬
‫الغث منسقة‪ ،‬أو المنسقة بالعنرص <‪. >b‬‬ ‫ر‬
‫أكث من النصوص ر‬
‫وكذلك الحال بالنسبة للعنرص <‪ >i‬والعنرص <‪ ، >em‬فالنص داخل العنرص <‪ >em‬يكون‬
‫أكث تأكيدا عند النطق به‪ ،‬من النص داخل العنرص <‪. >i‬‬ ‫ر‬
‫باإلضافة إل أنك عندما تدرس عناص تجزئة الصفحة‪ ،‬ستعلم أن العناص المتشابهة لها‬
‫معي يف بناء صفحة الويب‪ ،‬يدرك من يسمع اسمها‪ ،‬أي جزء من الصفحة يعرض أمامه‪.‬‬ ‫دور ر‬
‫وبالتال تكون نتائج البحث‬
‫ي‬ ‫تمث ربي هذه العناص‪،‬‬ ‫وهناك آراء تقول بأن محركات البحث ر‬
‫أشع إذا توافقت الكلمات المفتاحية ال ين نبحث عنها مع وظيفة وداللة العنرص‪.‬‬
‫تأثث لنوع العناص المتشابهة‬‫وعىل الرغم من أن هذا الرأي يواجه معارضة تقول‪ :‬إنه ال ر‬
‫الشخص‪ ،‬أن الرأي األول يبدو منطقيا وأقرب‬
‫ي‬ ‫ظاهريا يف السلوك عىل نتائج البحث‪ ،‬إال أن ر ي يأب‬
‫دالل فقط‪ ،‬أي أن كل عنرص له داللة‬‫للصواب‪ ،‬ألنه إذا كان الهدف من تنوع العناص هو هدف ي‬
‫معينة‪ ،‬مثل تشديد قراءة العنرص <‪ >em‬عن العنرص <‪ ، >i‬فكيف سيختلف تأكيد أهمية‬
‫التميث صوتيا ربي العناص األخرى‬
‫ر‬ ‫عنرص <‪ >strong‬عن تشديد العنرص <‪ ، >em‬وكيف سيتم‬
‫ً‬
‫الن تجعل الخط مائال‪ ،‬مثل العنرص <‪ >i‬والعنرص <‪ >cite‬والعنرص <‪ >var‬والعنرص‬ ‫ي‬
‫التميث ربي‬
‫ر‬ ‫<‪ ، >address‬وكل هذه العناص يظهر النص داخلها بشكل مائل‪ ،‬فكيف سيتم‬
‫ينبع للمستخدم العادي أن‬ ‫ي‬ ‫داللة كل هذه العناص صوتيا بشكل يالحظه المستمع‪ ،‬وهل‬
‫يمث ربي العناص المتشابهة‪ ،‬ويتخيل شكل العنرص يف‬ ‫يحفظ وظيفة كل عنرص وداللته‪ ،‬حن ر‬
‫اآلل؟؟‬
‫الصفحة عندما يسمع اسمه من خالل القارئ ي‬

‫‪HTML Elements‬‬ ‫‪58‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫عناص تجزئة الصفحة‬

‫ه عناص تقسم الصفحة إل أجزاء‪ ،‬مثل العناوين الرئيسية‪ ،‬ورأس وذيل الصفحة‪ ،‬وأجزاء‬ ‫ي‬
‫أساسية‪ ،‬وأخرى فرعية‪ ،‬والعناص كلها تقريبا متشابهة‪ ،‬ويمكن أن يحل أحدها مكان اآلخر دون‬
‫حدوث أي خلل يف تصميم الصفحة شكليا‪ ،‬إال أن عليك أن تعلم أن لكل عنرص وظيفة معينة‪،‬‬
‫يشغل عىل أساسها جزءا معينا من الصفحة‪ ،‬وكلما استخدمت العنرص المناسب للوظيفة‬
‫وف التعامل‬ ‫‪،‬‬‫آليا‬ ‫اءتها‬
‫ر‬ ‫وق‬ ‫تصفحها‬ ‫وف‬ ‫عليها‪،‬‬ ‫العثور‬ ‫ف‬ ‫سهولة‬ ‫المناسبة‪ ،‬كانت الصفحة ر‬
‫أكث‬
‫ي‬ ‫ي‬ ‫ي‬
‫معها من قبل ذوي االحتياجات الخاصة‪.‬‬

‫>‪<body>....</body‬‬
‫ه كل العناص المادية‬ ‫هو العنرص > ي‬
‫الرئيش المختص باحتواء كل عناص جسم الصفحة‪ ،‬و ي‬
‫المرئية ف المتصفح‪ ،‬والعناص المادية المخفاة ‪ ، hidden‬وال يجب أن يكون بالصفحة ر‬
‫أكث‬ ‫ي‬
‫من عنرص <‪ >body‬واحد‪.‬‬
‫وتغيث بعض خصائص العنرص <‪ >body‬يوثر عىل العناص بالصفحة فهو ‪ -‬عىل سبيل‬
‫ر‬
‫اَ‪ ،‬ونوع وحجم‬‫المثال ‪ -‬يمكنه التحكم يف لون خلفية الصفحة‪ ،‬ولون النصوص االفث ي‬
‫وغثها من الخصائص‪.‬‬‫اَ داخل الصفحة‪ ،‬ر‬
‫وتنسيق الخط االفث ي‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title> The Body Element</title‬‬
‫>‪</head‬‬
‫>;‪<body style=background:lightgray;color:navy;font-style:italic‬‬
‫>‪<h2>We are in the body element</h2‬‬
‫>‪<p>Lovely Scenes</p‬‬
‫>"‪<img src="images/road.jpg" width="200" height="100‬‬
‫>"‪<img src="images/colors.jpg" width="200" height="100‬‬
‫>"‪<img src="images/mount.jpg" width="200" height="100‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪HTML Elements‬‬ ‫‪59‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

‫وه خصائص عبارة عن رشط‬ ‫ ي‬، event attributes ‫نعي له‬‫> قد ر‬body< ‫والعنرص‬
‫ ويوجد‬،)‫برمج‬ ‫الشط يتم تنفيذ سكريبت (نص‬ ‫ أي عند تحقق هذا ر‬،‫معي‬
‫لتنفيذ حدث ر‬
‫ي‬
‫ وسوف ر‬،‫العديد من هذه الخصائص‬
: ‫ ومن أمثلتها‬،‫نشحها يف فصل خاص بها‬
onafterprint | onbeforeprint | onbeforeunload | onmessage | onload
| onhashchange | onunload | onpopstate| onresize
<body onload="alert('This works by body event attributes')">

:َ‫ا‬
‫التنسيق االفث ي‬
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}

HTML Elements 60 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<h1>....</h1‬‬
‫عناص ‪ headings‬أو العناوين الرئيسية للصفحة وأجزاء الصفحة‪.‬‬
‫وتنته‬
‫ي‬ ‫والعناص ‪ headings‬عبارة عن ‪ 6‬عناص‪ ،‬تبدأ بالعنرص <‪ >h1‬وهو أكثها حجما‪،‬‬
‫بالعنرص <‪ >h6‬وهو أصغرها‪ ،‬وبينهما العناص من <‪ >h2‬إل <‪. >h5‬‬
‫العنرص <‪ >h1‬مخصص كعنوان رئيش للصفحة‪ ،‬ويفضل أال يستخدم ر‬
‫أكث من مرة واحدة‬ ‫ي‬
‫يف نفس الصفحة‪ ،‬كتطبيق وممارسة أمثل‪.‬‬
‫تخط أحدها‪.‬‬
‫ي‬ ‫يفضل أن تستخدم العناص ‪ headings‬بالثتيب وعدم‬
‫يفضل أال يتم أي تعديل عىل تنسيق العناص ‪ headings‬باستخدام ‪ ، css‬وإذا كان تنسيقها‬
‫ً‬
‫ق بالتصميم المطلوب‪ ،‬فيمكن استخدم نص عادي وتنسيقه بدال منها‪.‬‬
‫ال ي ي‬
‫>‪<h1>Welcome to html !!</h1‬‬
‫>‪<h2>Welcome to html !!</h2‬‬
‫>‪<h3>Welcome to html !!</h3‬‬
‫>‪<h4>Welcome to html !!</h4‬‬
‫>‪<h5>Welcome to html !!</h5‬‬
‫>‪<h6>Welcome to html !!</h6‬‬

‫الحظ التدرج يف حجم الخط من األكث‬

‫<‪ >h1‬إل األصغر <‪ ، >h6‬والحظ أن كل عنرص‬
‫من عناص ‪ headings‬قد تم إغالقه قبل فتح أي‬
‫عنرص آخر‪.‬‬

‫‪HTML Elements‬‬ ‫‪61‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪Tag Omission‬‬
‫المثة يف بعض عناص ‪ block elements‬ومن ضمن هذه العناص‪،‬‬‫ذكرنا من قبل وجود ر‬
‫عناص ‪ headings‬إذا أنشأ داخلها عنرص ‪ heading‬آخر ‪.‬‬
‫>"‪<h2 style="background: lightblue‬‬
‫>‪Welcome to html !!<br‬‬
‫!! ‪Welcome to html‬‬
‫>‪<h3 style="background: orange"> Welcome to html !!</h3‬‬
‫!! ‪Welcome to html‬‬
‫>‪</h2‬‬
‫الحظ أن النص قبل بداية العنرص <‪ >h3‬قد تم‬
‫تنسيقه بنفس تنسيق العنرص <‪ >h2‬ألنه يقع داخله‪،‬‬
‫حي أن النص الواقع بعد إغالق العنرص <‪>h3‬‬ ‫يف ر‬
‫وقبل وسم إغالق العنرص <‪ ، >h2‬قد عاد للتنسيق‬
‫اَ للخصائص‪ ،‬بالرغم من وجوده قبل وسم‬ ‫االفث ي‬
‫يعن أن وسم بداية العنرص‬
‫إغالق العنرص <‪ ، >h2‬مما ي‬
‫الداخىل <‪ ، >h3‬قد أغلق العنرص األب <‪ >h2‬وتم تجاهل وسم إغالقه‪.‬‬
‫ي‬ ‫االبن‬
‫استبدل العنرص >‪ <h2‬بأي عنرصكتلة آخر ‪ ،‬والحظ الفرق‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫} ;‪h1,h2,h3,h4,h5,h6 { display: block; font-weight: bold‬‬
‫} ;‪h1 { margin: 0.67em 0; font-size: 2em‬‬
‫} ;‪h2 { margin: 0.83em 0; font-size: 1.5em‬‬
‫‪h3 { margin: 1em‬‬ ‫} ;‪0; font-size: 1.17em‬‬
‫‪h4 { margin: 1.33em‬‬ ‫} ;‪0; font-size: 1em‬‬
‫‪h5 { margin: 1.67em‬‬ ‫} ;‪0; font-size: 0.83em‬‬
‫} ;‪h6 { margin: 2.33em 0; font-size: 0.67em‬‬

‫‪HTML Elements‬‬ ‫‪62‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<div>....</div‬‬
‫عنرص مخصص الحتواء أي نوع من العناص‪ ،‬سواء عناوين رئيسية‪ ،‬أو فقرات‪ ،‬أو صور ‪ ،‬أو‬
‫تأثث عىل العناص داخله‪ ،‬حن يتم‬ ‫وغثها‪ ،‬وليس له أي ر‬‫روابط تشعبية‪ ،‬أو جداول‪ ،‬أو قوائم ر‬
‫وغثها من الخصائص‪.‬‬ ‫أمام ر‬
‫تنسيقه بـ ‪ ، css‬فيكون له عرض وارتفاع ولون خلفية ولو ن ي‬
‫>‪<div‬‬
‫>‪<h3>Web Design</h3‬‬
‫>‪<div>HTML</div‬‬
‫>‪<div>CSS</div‬‬
‫>‪<div>Javascript</div‬‬
‫>‪<div><img src="images/apple.png" width="10%"></div‬‬
‫>‪<div><a href="https://google.com">Google</a></div‬‬
‫>‪</div‬‬
‫الحظ أن وجود العناص داخل العنرص >‪ <div‬لم يؤثر عىل‬
‫غث منسق تنسيقا خاصا‪ ،‬وكل خصائصه لها القيم‬
‫مظهرها ألنه ر‬
‫االفثاضية‪.‬‬
‫الحظ أن الصفحة يمكن أن تحتوي عىل أي عدد من العنرص‬
‫<‪ ، >div‬وأن العنرص <‪ >div‬يمكن أن يحتوي أي نوع من‬
‫العناص‪ ،‬وأنه كعنرص ‪ block element‬ومثل معظم العناص يف‬
‫التال بعد العنرص الذي‬
‫ي‬ ‫هذا الجزء من الكتاب‪ ،‬ينتقل للسطر‬
‫قبله‪ ،‬وينقل العنرص الذي بعده إل سطر جديد‪ ،‬أي أنه ال يكون‬
‫اَ‪،‬‬‫عىل سطر واحد مع أي عنرص‪ ،‬وهذا هو التنسيق االفث ي‬
‫تغثه عند دراستك ‪. css‬‬
‫والذي ستتعلم كيف ر‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪div‬‬
‫;‪display: block‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪63‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<br>
‫ ونقل العنرص أو النص الذي بعده إل‬،‫ مخصص لكش السطر‬empty element ‫عنرص‬
. >br< ‫التال بدون استخدام العنرص‬
‫ الحظ مخرجات الكود ي‬،‫سطر جديد‬
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod
</div>

. >br< ‫الحظ مخرجات نفس الكود السابق ولكن باستخدام العنرص‬

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br>sed
do eiusmod
</div>

. >br< ‫ والتفاف للنص يف موضع العنرص‬، ‫الحظ حدوث انكسار للسطر‬

:‫مثال آخر‬
.‫الصورتي‬
‫ر‬ ‫> ربي‬br< ‫التال بدون استخدام العنرص‬
‫الحظ مخرجات الكود ي‬
<img src="images/girl.jpg" width="200" height="100">
<img src="images/graff.jpg" width="200" height="100">

HTML Elements 64 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الحظ مخرجات نفس الكود السابق ولكن باستخدام العنرص <‪ >br‬بعد الصورة األول ‪:‬‬
‫>‪<img src="images/girl.jpg" width="200" height="100"><br‬‬
‫>"‪<img src="images/graff.jpg" width="200" height="100‬‬

‫الحظ انكسار السطر يف موضع العنرص <‪، >br‬‬

‫والتفاف الصورة الثانية لسطر جديد أسفل الصورة‬
‫األول‪.‬‬
‫العنرص <‪ >br‬ال يقوم بوضع هامش ربي‬
‫السطرين عند كش السطر والتفاف العناص لسطر‬
‫جديد‪ ،‬كما بالشكل المقابل‪.‬‬

‫‪HTML Elements‬‬ ‫‪65‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<hr‬‬
‫اَ هو‬
‫أفق ربي العناص‪ ،‬وطوله االفث ي‬
‫عنرص ‪ ، empty element‬مخصص لرسم خط ي‬
‫عرض الصفحة‪ ،‬أو عرض العنرص الذي يحتويه‪.‬‬
‫>‪<div style=width:200px‬‬
‫‪before horizontal line <hr> after horizontal line‬‬
‫>‪</div‬‬

‫األفق قام بكش السطر ‪ ،‬وحدث التفاف للنص لسطر جديد‪ ،‬وتم رسم‬ ‫ي‬ ‫الحظ أن الخط‬
‫األفق والسطر‬
‫ي‬ ‫أفق بعرض العنرص <‪ >div‬ربي السطرين‪ ،‬وكانت قيمة الهامش ربي الخط‬
‫خط ي‬
‫وه ‪. 8px‬‬
‫السفىل ي‬
‫ي‬ ‫األفق والسطر‬
‫ي‬ ‫العلوي‪ ،‬مساوية لقيمتها ربي الخط‬

‫مثال آخر‪:‬‬

‫المتجاورتي السابق ‪ ،‬ولكن هذه المرة باستخدام العنرص <‪ >hr‬بعد‬

‫ر‬ ‫الصورتي‬
‫ر‬ ‫نفس مثال‬
‫الصورة األول ‪:‬‬
‫>‪<img src="images/girl.jpg" width="200" height="100"><hr‬‬
‫>"‪<img src="images/graff.jpg" width="200" height="100‬‬

‫‪HTML Elements‬‬ ‫‪66‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الحظ انكسار السطر والتفاف الصورة الثانية‬

‫أفق بينهما‪ ،‬مع‬
‫أسفل الصورة األول‪ ،‬مع رسم خط ي‬
‫الصورتي‪.‬‬
‫ر‬ ‫وجود هامش أعىل وأسفل الخط ب ري‬

‫أفق أصبح أسلوبا قديما وتقليديا‪ ،‬ورسم الخط‬

‫استخدام العنرص >‪ <hr‬يف رسم خط ي‬
‫األفق يجب أن يتم باستخدام ‪. css‬‬
‫ي‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪hr‬‬
‫;‪display: block‬‬
‫;‪margin: 0.5em auto‬‬
‫;‪border: 1px inset‬‬
‫}‬

‫يف الكود السابق‪ ،‬تمثل الخاصية ‪ border‬الحدود حول العنرص‪ ،‬والخاصية يف هذا الكود‬
‫قيمتي‪ ،‬األول تمثل عرض حدود العنرص ‪ border-width‬وهو ‪ 1px‬والقيمة الثانية‪،‬‬
‫ر‬ ‫تقبل‬
‫وه ‪. inset‬‬
‫تمثل خاصية شكل الحدود ‪ ، border-style‬ي‬

‫‪HTML Elements‬‬ ‫‪67‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<article>…</article>
‫ ويمكن أن‬،‫ عىل هيئة مقالة أو بوست أو تعليق عىل خث‬،‫عنرص مخصص لكتابة نص‬
.‫وغثها من العناص‬
‫يحتوي هذا العنرص عىل فقرات نصية أو صور أو روابط تشعبية ر‬
<span style=color:green>Before article element</span>
<article style=width:420px><h2>Roses</h2>
<p>Pick your favorite roses</p>
<section> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
enim ad minim veniam, quis nostrud exercitation ullamco
</section>
<section><img src="roses.jpg" width="200">
<img src="rosa.jpg" width="200">
</section>
</article>
<span style=color:green>After article element</span>
‫أكث من عنرص‬‫يمكن للصفحة أن تحتوي ر‬
‫> وكل عنرص يجب أن يتم تقديمه‬article<
headings ‫باستخدام أحد العناوين الرئيسية‬
. (<h1>…<h6>)
‫> أن يقسم داخليا‬article< ‫يمكن للعنرص‬
‫ كل قسم عبارة عن‬،‫إل عدد من األقسام‬
. >section< ‫عنرص‬

:َ‫ا‬
‫التنسيق االفث ي‬
article {
display: block;
}

HTML Elements 68 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<section>…</section>
‫ وال يوجد جزء‬،‫ ويستخدم لشغل أي جزء من الصفحة‬،‫عنرص عام ليس له وظيفة محددة‬
‫ ويتم تقديمه أو تعريفه باستخدام‬،‫ ويمكن أن يحوي عدة عناص أخرى‬،‫محدد يمكن أن يشغله‬
. headings ‫أحد عناص‬
<span style=color:blue>Before section element</span>
<section style=width:500px>
<h3>Section </h3>
<p> Lorem ipsum </p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</span>
</section>
<span style=color:blue>After section element</span>

:َ‫ا‬
‫التنسيق االفث ي‬
section {
display: block;
}

HTML Elements 69 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<main>…</main>
،‫ والذي يكون يف مركز الصفحة غالبا‬،‫الرئيش من الصفحة‬
‫ي‬ ‫عنرص مخصص الحتواء الجزء‬
‫أكث من‬‫ لذلك يجب أال يوجد بالصفحة ر‬،‫ويتناول الموضوع األساش الذي تناقشه الصفحة‬
‫ي‬
.‫> واحد‬main< ‫عنرص‬
<span style=color:blue>Before main aside</span>
<main style=width:420px>
<h2 style=text-align:center;>main Element</h2>
<img src="images/green.jpg" width="200" height="150">
<img src="images/blue.jpg" width="200" height="150px"> <br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco
</span><br>
</main>
<span style=color:blue>After main element</span>
‫> أن‬main< ‫و يمكن للعنرص‬
‫يحتوي ر‬
،‫أكث من نوع من العناص‬
‫ولكن ال يجب أن يحتوي أي عناص‬
‫مكررة موجودة بالفعل يف الصفحة‬
>main< ‫ والعنرص‬،‫بشكل أو بآخر‬
‫ينتقل إل سطر جديد بعد العنرص‬
‫ وينقل العنرص بعده إل سطر‬،‫قبله‬
.‫جديد‬

:َ‫ا‬
‫التنسيق االفث ي‬
main {
display: block;
}

HTML Elements 70 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<aside>…</aside>
‫ تعتث جزءا من‬،‫ لعرض معلومات فرعية‬،‫جانن للصفحة‬
‫ي‬ ‫عنرص يكون عىل هيئة رشيط‬
call-out ‫ وقد يكون مربــع استدعاء‬، >main< ‫المعلومات األساسية المعروضة يف العنرص‬
،‫ وإذا أردت المزيد من المعلومات‬،‫معي‬
‫ يعرض مقدمة عن موضوع ر‬،‫صغث‬ ‫ر‬ ‫ وهو مربــع‬، box
‫ لتستدع صفحة تحتوي معلومات ر‬،‫ الموجود داخله‬more ‫تضغط عىل زر‬
.‫أكث‬ ‫ي‬
<span style=color:darkred>Before aside element</span>
<aside style=width:200px>
<h3>Aside Element</h3>
<div> <a href=" "> Lorem ipsum</a> </div><br>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</span><br>
<img src="images/blue.jpg" width="200" height="150">
</aside>
<span style=color:darkred>After aside element</span>
‫الشيط‬‫ يعامل تقريبا معاملة ر‬aside ‫الحظ أن العنرص‬
‫ وال‬،‫ كما أنه يمكن أن يحتوي العديد من العناص‬،‫لجانن‬
‫ي‬ ‫ا‬
.‫يتشارك مع أي عنرص آخر السطر الذي يوجد عليه‬

:َ‫ا‬
‫التنسيق االفث ي‬
aside {
display: block;
}

HTML Elements 71 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<nav>…</nav‬‬
‫َُ‬
‫عنرص مخصص إلنشاء قائمة تنقل‪ ،‬تحتوي الراوبط التشعبية للمواقع والصفحات‪ ،‬لتنقل‬
‫المستخدم ربي الصفحات والمواقع‪ ،‬ويمكن أن تكون الروابط للتنقل ربي أجزاء الصفحة‬
‫نفسها‪ ،‬كما سنعرف الحقا عند دراستنا للعنرصين <‪ >a‬و<‪. >area‬‬
‫معي‪ ،‬أو فهرس‬
‫كما يمكن للعنرص <‪ >nav‬أن يستخدم كجدول لمحتويات موقع ر‬
‫لمجموعة مقاالت أو صفحات‪.‬‬
‫>"‪<nav style="background: lightblue; width: 245px; padding: 3px‬‬
‫>‪<a href="https://google.com">Google | </a‬‬
‫>‪<a href="https://facebook.com">Facebook | </a‬‬
‫>‪<a href="https://twitter.com">Twitter |</a‬‬
‫>‪<a href="https://amazon.com">Amazon </a‬‬
‫>‪</nav‬‬

‫والعنرص <‪ >nav‬ينطبق عليه نفس خصائص عناص الكتلة ‪ block elements‬حيث‬
‫ينتقل إل سطر جديد بعد العنرص قبله‪ ،‬وينقل العنرص بعده إل سطر جديد‪.‬‬
‫أكث من عنرص <‪ ، >nav‬وليس من الرصوري أن تنحرص الروابط‬‫يمكن للصفحة أن تحتوي ر‬
‫التشعبية داخل العنرص <‪ ، >nav‬بل يمكن أن تتواجد داخل العنرص <‪ ، >footer‬كما سثى‬
‫الحقا‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪nav‬‬
‫;‪display: block‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪72‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<header>…</header>
،‫ وقد يحتوي شعارا‬،‫ أو مقدمة تعريفية للصفحة‬،‫عنرص مخصص ليحتوي رأسا للصفحة‬
‫ أو عن‬،‫ أو أي معلومات عن المسئول‬،‫ أو قائمة التنقل ربي صفحات الموقع‬،‫أو اسم الصفحة‬
.‫وغثها‬
‫الهيئة صاحبة الصفحة ر‬
<span style=color:darkred>Before header element</span>
<header style=width:500px;background:lightgray;>
<img src="images/stain3.png" width="170" height="100"
style=vertical-align:middle;>
<span style="font-size: 2.25em">Stain For Printing</span>
<nav style=text-align:right;margin-right:10px;>
<a href=" ">Home | </a><a href=" ">Products | </a>
<a href=" ">Gallery | </a><a href=" ">Total Cost |</a>
<a href=" ">Our Stuff | </a><a href=" ">Contact us </a>
</nav><br>
</header><span style=color:darkred>After header element</span>

. block elements ‫ه نفس خصائص عناص الكتلة‬

‫خصائص هذا العنرص ي‬

:َ‫ا‬
‫التنسيق االفث ي‬
header {
display: block;
}

HTML Elements 73 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<footer>…</footer‬‬
‫عنرص مخصص الحتواء آخر محتويات الصفحة أو ذيل الصفحة‪ ،‬ويحتوي عىل معلومات‬
‫بمسئول الهيئة صاحبة الصفحة‪ ،‬وخريطة موقع‬
‫ي‬ ‫حقوق الطبع والملكية‪ ،‬ووسائل االتصال‬
‫الهيئة‪ ،‬وأي معلومات ذات صلة بالهيئة‪.‬‬
‫>";‪<footer style="background: orange; text-align: center‬‬
‫>‪<address>Feedback: <a href="">[email protected]</a></address‬‬
‫>‪<address>Contact us: <a href="">www. site.com</a></address‬‬
‫>‪<address>&copy; Copy rights reserved</address‬‬
‫>‪</footer‬‬

‫وبما أن العنرص <‪ >footer‬يحتوي وسائل االتصال والعناوين الخاصة بالصفحة‪ ،‬فإن‬
‫أنسب عنرص لتنيسق وإضافة هذه البيانات هو العنرص <‪. >address‬‬
‫والعنرص <‪ >footer‬يتمتع بنفس خصائص عناص الكتلة ‪ block elements‬السابق‬
‫رشحها‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪footer‬‬
‫;‪display: block‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪74‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<dialog>…</dialog‬‬
‫صغثة‪ ،‬تحتوى نصا معينا‪ ،‬أو رسالة‪ ،‬أو‬
‫ر‬ ‫عنرص مخصص إلنشاء مربــع حواري‪ ،‬أو نافذة‬
‫تنبيه للمستخدم‪.‬‬
‫ويمكن أن يسند للعنرص <‪ >dialog‬خاصية واحدة‪:‬‬

‫‪open‬‬
‫ه ‪ ، true‬وأن العنرص‬
‫يعن أن قيمتها ي‬
‫إحدى خصائص ‪ ، boolean attributes‬وجودها ي‬
‫‪ dialog‬يعرض مفتوحا حن يتمكن المستخدم من قراءة محتواه‪.‬‬
‫>‪<div>We study dialog element here.</div‬‬
‫>‪<dialog open>This dialog will be opened</dialog‬‬
‫>‪<div>We study dialog element here.</div‬‬

‫الحظ أن العنرص <‪ >div‬المتواجد بعد العنرص <‪ ، >dialog‬قد تدفق ف الصفحة ر‬
‫مباشة‬ ‫ي‬
‫بعد العنرص <‪ >div‬المتواجد قبل العنرص <‪ ، >dialog‬ولم يتم الفصل بينهما‪ ،‬وكأن العنرص‬
‫غث موجود يف الصفحة‪.‬‬‫<‪ >dialog‬ر‬
‫غث موجود‬
‫سيختق العنرص ‪ ، dialog‬وسيبدو كأنه ر‬
‫ي‬ ‫تعيي الخاصية ‪open‬‬
‫يف حالة عدم ر‬
‫يف الصفحة من األساس‪.‬‬

‫‪HTML Elements‬‬ ‫‪75‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<details>…</details‬‬
‫عنرص مخصص إلنشاء قائمة منسدلة‪ ،‬تحتوي عدة بنود‪ ،‬تفتح وتعرض هذه البنود عند‬
‫الضغط عىل عنوان هذه القائمة‪ ،‬وهو عبارة عن العنرص <‪ ، >summary‬والذي يحتوي نصا‬
‫صغث‪ ،‬يدور عند فتح وغلق القائمة‪.‬‬
‫ر‬ ‫معينا باإلضافة إل مثلث‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪details‬‬
‫;‪display: block‬‬
‫}‬

‫>‪<summary>…</summary‬‬
‫داخىل للعنرص <‪ >details‬مخصص إلنشاء عنوان للقائمة ‪ ،‬وعند الضغط عليه‬ ‫ي‬ ‫عنرص‬
‫تفتح وتغلق هذه القائمة بالتبادل‪ ،‬ويكون العنرص >‪ <summary‬أول عنرص داخل العنرص‬
‫تغث ترتيبه داخل الكود‪ ،‬فلن يؤثر ذلك عىل ظهوره كعنوان للقائمة‪.‬‬
‫<‪ ، >details‬وإن ر‬
‫>"‪<details style="width: 180px‬‬
‫>‪<summary>Web Design Course:</summary‬‬
‫>‪<div> HTML </div‬‬
‫>‪<div> CSS</div‬‬
‫>‪<div> Javascript</div‬‬
‫>‪</details‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪summary‬‬
‫‪display: list-item; /* block means no triangle */‬‬
‫}‬
‫‪HTML Elements‬‬ ‫‪76‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الروابط التشعبية ‪Hyperlinks‬‬

‫ه عناص‪ ،‬عند الضغط عليها‪ ،‬تقوم بنقل المستخدم إل صفحات أو مواقع أخرى‪ ،‬خارج‬ ‫ي‬
‫كبثا‪،‬‬
‫الصفحة‪ ،‬أو تنقله إل أجزاء داخل نفس الصفحة‪ ،‬إذا كان عرض أو ارتفاع الصفحة ر‬
‫والصفحة ال تظهر بكامل عرضها أو ارتفاعها يف شاشة العرض‪.‬‬
‫ويوجد عنرصان مسئوالن عن إنشاء الروابط التشعبية‪ ،‬أحدهما هو العنرص <‪، >area‬‬
‫وسوف ندرسه ضمن عناص الدمج‪ ،‬والعنرص اآلخر هو العنرص <‪. >a‬‬

‫>‪<a>….</a‬‬
‫أو ‪ anchor element‬حيث يقوم بنقل المستخدم إل صفحات أخرى‪ ،‬أو مواضع أخرى‪،‬‬
‫داخل نفس الصفحة‪ ،‬ويوجد عدة خصائص تحدد طبيعة عمل هذا العنرص‪:‬‬
‫‪href‬‬
‫خاصية تحدد الصفحة أو الجزء‪ ،‬الذي سينتقل إليه المستخدم عند الضغط عىل الرابط‪،‬‬
‫وسم البداية والنهاية للعنرص <‪. >a‬‬
‫ي‬ ‫والرابط يكون دائما كل ما يقع ربي‬
‫‪target‬‬
‫الن سيتم االنتقال إليها‪ ،‬عند الصغط‬
‫خاصية تحدد الموضع الذي ستفتح فيها الصفحة ي‬
‫وشحها ملحق ‪. 1‬‬‫عىل الرابط‪ ،‬ويسند إليها عدة قيم ر‬

‫>‪<a href="https://facebook.com" target="_blank"> Facebook</a‬‬

‫‪rel‬‬
‫الن سيتم االنتقال إليها‪ ،‬ويسند‬
‫خاصية تحدد العالقة ربي الصفحة الحالية‪ ،‬والصفحة ي‬
‫إليها العديد من القيم‪ ،‬ر‬
‫وشحها يف ملحق ‪. 1‬‬
‫‪type‬‬
‫خاصية تحدد نوع الملف الذي سينتقل إليه المستخدم‪ ،‬عند الضغط عىل الرابط‪ ،‬ويمكن‬
‫وشحها ص ‪. 130‬‬ ‫تحديد نوع الملف ر‬
‫بأكث من طريقة‪ ،‬ر‬
‫‪HTML Elements‬‬ ‫‪77‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪download‬‬
‫خاصية تسمح بتحميل الملف إل الحاسب‪ ،‬عند الضغط عىل الرابط‪ ،‬عىل أن يتم فتح‬
‫محىل ‪ ، localhost‬كما يجب أن يكون الملف عىل نفس العنوان‬
‫ي‬ ‫الصفحة عن طريق خادم‬
‫الرئيش ‪ ، origin‬ولتوضيح مفهوم ‪ origin‬انظر ص ‪. 282‬‬
‫ي‬
‫‪<div> Click to download this‬‬
‫>‪<a href ="some_file.pdf" download >Download file</a></div‬‬

‫ويمكنك إضافة اسم جديد للملف‪ ،‬بإضافته كقيمة "‪ download="filename‬ويمكن عدم‬
‫ذكر االمتداد‪ ،‬وسيقوم المتصفح بالتعرف عىل االمتداد عن طريق الخاصية ‪. href‬‬
‫‪hreflang‬‬
‫خاصية تحدد لغة الملف الذي سيتم االنتقال إليه‪ ،‬عند الضغط عىل الرابط‪.‬‬
‫‪ping‬‬
‫الن سيتم اختبارها لتتبع حركة الملف‪ ،‬الذي سيتم االنتقال‬
‫خاصية تحدد قائمة بالمواقع‪ ،‬ي‬
‫إليه عند الضغط عىل الرابط‪.‬‬
‫‪referrerpolicy‬‬
‫الن سيتم االنتقال‬
‫خاصية تحدد إمكانية نقل معلومات‪ ،‬من الصفحة الحالية إل الصفحة ي‬
‫إليها‪ ،‬والخاصية تقبل عدة أنواع من القيم‪ ،‬و رشحها ملحق ‪. 1‬‬

‫وب ‪Linking to an email address‬‬

‫ربط عنوان بريد إلكث ي‬
‫وب‪ ،‬عن طريق إضافة الكلمة ‪mailto:‬‬‫يمكن ربط عنرص <‪ >a‬مع برنامج إرسال بريد إلكث ي‬
‫وب المطلوب مراسلته‪ ،‬كقيمة للخاصية ‪ ، href‬وعند الضغط عىل‬ ‫ثم عنوان الثيد اإللكث ي‬
‫وب‪ ،‬ويقوم المستخدم بكتابة الرسالة المطلوبة‪،‬‬
‫الرابط‪ ،‬يتم فتح برنامج إرسال الثيد اإللكث ي‬
‫وإرسالها للشخص المطلوب‪.‬‬
‫>‪<a href="mailto:[email protected] " target="_blank "> email</a‬‬

‫‪HTML Elements‬‬ ‫‪78‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫ربط جزء من الصفحة بجزء آخر يف نفس الصفحة‬

‫‪Linking to an element on the same page‬‬
‫التشعن التنقل داخل الصفحة الواحدة‪ ،‬إذا كانت الصفحة ذات عرض أو‬ ‫ي‬ ‫يمكن للرابط‬
‫يتخط عرض أو ارتفاع شاشة العرض‪ ،‬وخاصة إذا كان بها العديد من‬ ‫ي‬ ‫كبثين‪،‬‬
‫ارتفاع ر‬
‫الن ال يمكن أن تتجمع يف شاشة واحدة‪ ،‬فيمكن تجزئة الصفحة إل أجزاء‬ ‫الموضوعات ي‬
‫مباشة‪ ،‬بالضغط عىل الرابط الذي سيتم‬ ‫معي ‪ fragment‬ر‬ ‫‪ ، fragments‬واالنتقال إل جزء ر‬
‫ً‬
‫إعداده خاصة لهذا الجزء‪ ،‬بدال من المرور عىل كل أجزاء الصفحة وحن الوصول للجزء‬
‫وه روابط تشعبية ترتبط بأجزاء الصفحة‬ ‫المطلوب‪ ،‬ويتم ذلك عن طريق إنشاء ‪ ، anchors‬ي‬
‫تعيي خاصية ‪ id‬للجزء المراد االنتقال إليه‪ ،‬ثم إسناد قيمة هذه‬
‫المراد االنتقال إليها‪ ،‬عن طريق ر‬
‫الخاصية يسبقها الرمز ك‪#‬ك ‪ ،‬كقيمة للخاصية ‪ href‬الخاصة بالعنرص <‪ >a‬الذي سنضغط‬
‫يىل‪:‬‬
‫غثه من الصفحة كما ي‬‫عليه لينقلنا إل هذا الجزء‪ ،‬أو ر‬
‫>‪<p><a href="#contacts">Go to contacts</a></p‬‬
‫>‪Lorem ipsum dolor sit amet,<br‬‬
‫>‪consectetur adipiscing elit,<br‬‬
‫>‪sed do eiusmod tempor incididunt<br‬‬
‫>‪ut labore et dolore magna aliqua.<br‬‬
‫>‪Ut enim ad minim veniam, quis<br‬‬
‫>‪nostrud exercitation ullamco<br‬‬
‫>‪laboris nisi ut aliquip ex ea<br‬‬
‫>‪commodo consequat.<hr‬‬
‫>‪<div id="contacts">Contacts:</div‬‬
‫>‪<div>Tel: 01254526321</div‬‬
‫>‪<div>email: [email protected]</div‬‬
‫>‪<div>facebook: facebook.com/someone</div‬‬

‫الكبثة‪ ،‬حيث إنه‬

‫ر‬ ‫التال هو نموذج مصغر‪ ،‬لما يكون عليه الوضع مع الصفحات‬ ‫ي‬ ‫الشكل‬
‫مباشة (بافثاض أن الصفحة‬ ‫ر‬ ‫عندما يريد المستخدم االنتقال إل الجزء ‪Contacts‬‬
‫ذات ارتفاع كبث وهذا الجزء غث ئ‬
‫بتعيي الخاصية ‪ id‬للعنرص <‪، >div‬‬
‫ر‬ ‫مرب للمستخدم)‪ ،‬نقوم‬
‫ي‬ ‫ر‬ ‫ر‬
‫الذي نريد االنتقال إليه‪ ،‬ونقوم بإسناد قيمة هذه الخاصية إل الخاصية ‪ ، href‬الخاصة بالرابط‬
‫‪HTML Elements‬‬ ‫‪79‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫التشعن يف أول الصفحة‪ ،‬يسبقها الرمز ك‪#‬ك ‪.‬‬

‫ي‬

‫ربط رقم هاتف ‪Linking to a telephone number‬‬

‫يمكن ربط العنرص <‪ >a‬برقم هاتف‪ ،‬عن طريق إضافة الكلمة ‪ tel:‬ثم يتبعها رقم الهاتف‬
‫المطلوب االتصال به‪ ،‬كقيمة للخاصية ‪. href‬‬
‫ً‬
‫‪ -‬فإذا كانت الصفحة الحالية مفتوحة عن طريق هاتف خلوي مثال‪ ،‬فعند الضغط عىل‬
‫الرابط يتم االتصال برقم الهاتف‪.‬‬
‫‪ -‬أما إذا تم فتح الصفحة من حاسب المستخدم‪ ،‬فسيقوم برنامج إجراء المكالمات مثل‬
‫‪ skype‬أو ‪ ، FaceTime‬باالتصال بالهاتف المطلوب‪.‬‬
‫>‪<a href="tel:+340897678930"> Phone</a‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪a‬‬
‫;‪display: inline‬‬
‫;‪text-decoration: underline‬‬
‫;‪cursor: auto‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪80‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫عناص القوائم ‪List Elements‬‬

‫عناص مخصصة لعرض بيانات معينة‪ ،‬عىل هيئة قوائم رئيسية تحتوي بنودا فرعية‪ ،‬وهذه‬
‫القوائم الرئيسية نوعان‪ :‬القوائم المرتبة أو ‪ ، ordered list‬ويمثلها العنرص <‪ ، >ol‬أو القوائم‬
‫غث المرتبة أو ‪ ، unordered list‬ويمثلها العنرص <‪. >ul‬‬‫ر‬
‫>‪<ol>....</ol‬‬
‫عنرص مخصص إلنشاء القوائم المرتبة عدديا أو هجائيا‪ ،‬وتضم هذه القائمة بندا أو ر‬
‫أكث‪،‬‬
‫ويمثل هذه البنود العنرص <‪ <li‬أو ‪. list item‬‬
‫>‪<h4>Programming Applications</h4‬‬
‫>‪<ol‬‬
‫>‪<li>Web applications</li‬‬
‫>‪<li>Desktop applications</li‬‬
‫>‪<li>Mobile applications</li‬‬
‫>‪</ol‬‬

‫الفرع <‪ >li‬يمكن أن يتفرع هو نفسه‪ ،‬لعدة قوائم فرعية أصغر‪:‬‬

‫ي‬ ‫والعنرص‬
‫>‪<h4>Artificial intelligence</h4‬‬
‫>‪<ol‬‬
‫‪<li>Machine learning‬‬
‫>‪<ol‬‬
‫>‪<li>C++</li‬‬
‫>‪<li>Python</li‬‬
‫>‪<li>R language</li‬‬
‫>‪</ol‬‬
‫>‪</li‬‬

‫‪HTML Elements‬‬ ‫‪81‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪<li>Data analysis‬‬
‫>‪<ol‬‬
‫>‪<li>Python</li‬‬
‫>‪<li>R Language</li‬‬
‫>‪<li>Tableau</li‬‬
‫>‪</ol‬‬
‫>‪</li‬‬
‫‪<li>Deep learning‬‬
‫>‪<ol‬‬
‫>‪<li>Python</li‬‬
‫>‪<li>R Language</li‬‬
‫>‪</ol‬‬
‫>‪</li‬‬
‫>‪</ol‬‬
‫الحظ أن كل بند يف القائمة الرئيسية انقسم إل‬
‫عدة بنود فرعية أخرى‪ ،‬فأصبح البند كأنه قائمة فرعية‬
‫من القائمة الرئيسية‪ ،‬ولها بنود فرعية أخرى‪ ،‬وهذا‬
‫السلوك يسم ‪. nesting‬‬

‫‪start‬‬
‫خاصية يتم تعيينها للعنرص <‪ ، >ol‬تحدد القيمة أو العدد الذي يبدأ منه ترقيم بنود‬
‫القائمة‪ ،‬ثم تزيد بعد ذلك بالثتيب‪.‬‬
‫‪HTML Elements‬‬ ‫‪82‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<h4>Mobile applications</h4>
<ol start="11">
<li>Android
<ol><li>Java</li><li>Kotlin</li><li>C#</li></ol>
</li>
<li>ios
<ol> <li>Objective-C</li> <li>Swift</li></ol>
</li>
</ol>

‫الحظ أن ترقيم البنود يف القائمة الرئيسية بدأ من‬

، >ol< ‫ يف العنرص‬start ‫وه قيمة الخاصية‬ ‫ ي‬11 ‫القيمة‬
‫اَ من‬
‫بينما ترقيم بنود القائمة الفرعية بدأ بالشكل االفث ي‬
. 1 ‫الرقم‬

value
.‫> تحدد القيمة أو العدد الذي سيبدأ منه الثقيم‬li< ‫خاصية للعنرص‬
<h4>Mobile applications</h4>
<ol>
<li value="11">Android
<ol><li value="111">Java</li><li>Kotlin</li><li>C#</li></ol>
</li>
<li>ios
<ol> <li>Objective-C</li> <li>Swift</li></ol>
</li>
</ol>

HTML Elements 83 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الحظ أن ترقيم بنود القائمة الرئيسية بدأ من العدد‬

‫وه قيمة الخاصية ‪ value‬للبند <‪ >li‬األول يف‬ ‫‪ ، 11‬ي‬
‫القائمة الرئيسية ‪.‬‬
‫(وه أول بند يف‬‫ي‬ ‫بينما ترقيم القائمة الفرعية األول‬
‫وه قيمة الخاصية‬ ‫القائمة الرئيسية) بدأ من العدد ‪ ، 111‬ي‬
‫الفرع األول يف القائمة الفرعية‪.‬‬
‫ي‬ ‫‪ value‬للبند‬

‫‪reversed‬‬
‫خاصية للعنرص <‪ ، >ol‬تقوم بعرض ترتيب الثقيم المستخدم بشكل معكوس‪ ،‬حيث يبدأ‬
‫الثقيم من آخر بند يف القائمة‪ ،‬ويزيد تصاعديا من األسفل إل أعىل بند‪.‬‬
‫>‪<h4>Mobile applications</h4‬‬
‫>‪<ol reversed‬‬
‫‪<li>Android‬‬
‫>‪<ol reversed><li>Java</li><li>Kotlin</li><li>C#</li></ol‬‬
‫>‪</li‬‬
‫‪<li>ios‬‬
‫>‪<ol> <li>Objective-C</li> <li>Swift</li></ol‬‬
‫>‪</li‬‬
‫>‪</ol‬‬
‫وف القائمة‬
‫الحظ أن ترتيب الثقيم يف القائمة الرئيسية ي‬
‫الفرعية (البند األول يف القائمة الرئيسية) بدأ من أسفل‬
‫ألعىل‪ ،‬الستخدامنا الخاصية ‪ ، reversed‬بينما يف القائمة‬
‫الثاب يف القائمة الرئيسية) ظهر ترتيب‬
‫الفرعية الثانية (البند ي‬
‫اَ من أعىل إل أسفل‪.‬‬
‫الثقيم بشكله االفث ي‬

‫‪type‬‬
‫خاصية تحدد نوع الثقيم يف القائمة‪ ،‬وتقبل قيمتها عىل هيئة رقم واحد‪ ،‬أو حرف واحد‪،‬‬
‫‪HTML Elements‬‬ ‫‪84‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

‫ فإن الخاصية سوف تستخدم‬،‫ وخالف ذلك‬،‫دون أي فراغات قبل أو بعد الحرف أو الرقم‬
.‫وه األرقام‬
‫القيمة االفثاضية ي‬
<ol type="A">
<li>Web applications</li>
<li>Desktop applications</li>
<li>Mobile applications</li>
</ol>
<ol type="a">
<li>Web applications</li>
<li>Desktop applications</li>
<li>Mobile applications</li>
</ol>
<ol type="I">
<li>Web applications</li>
<li>Desktop applications</li>
<li>Mobile applications</li>
</ol>
<ol type="i">
<li>Web applications</li>
<li>Desktop applications</li>
<li>Mobile applications</li>
</ol>

:َ‫ا‬
‫التنسيق االفث ي‬
ol {
display: block;
list-style-type: decimal;
margin: 1em 0;
padding: 40px;
}

HTML Elements 85 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<li>....</li‬‬
‫داخىل للعنرصين <‪ >ol‬و <‪ ، >ul‬وهو الذي يحتوي داخله‬
‫ي‬ ‫كما سبق أن أوضحنا هو عنرص‬
‫غث مرتبة <‪. >ul‬‬
‫بنود القائمة الرئيسية أو الفرعية‪ ،‬سواء كانت مرتبة <‪ ، >ol‬أو ر‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪li‬‬
‫;‪display: list-item‬‬
‫}‬

‫‪Tag Omission‬‬
‫يستغن عن وسم اإلغالق ‪ closing tag‬إذا تبع محتواه عنرص >‪<li‬‬
‫ي‬ ‫العنرص >‪ <li‬يمكن أن‬
‫آخر‪ ،‬أوكان هذا العنرص هو آخر عنرص يف القائمة‪.‬‬
‫‪<ol>Programming Applications‬‬
‫‪<li style="color:blue">Web applications‬‬
‫>‪<li style="color:red">Desktop applications</li‬‬
‫‪Tag Omitted‬‬
‫‪<li style="color:green">Mobile applications‬‬
‫>‪</ol‬‬
‫الحظ أن البند األول >‪ <li‬يف القائمة‬
‫لم يتم إغالقه‪ ،‬ومع ذلك لم يؤثر عىل‬
‫العناص بعده‪ ،‬أو النص "‪"Tag Omitted‬‬
‫الواقع خارج عناص القائمة‪ ،‬وكذلك البند‬
‫الثالث يف القائمة لم يحتج لوسم إغالق‬
‫ألنه آخر بند يف القائمة‪.‬‬

‫‪HTML Elements‬‬ ‫‪86‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<ul>....</ul‬‬
‫غث مرتبة ترتيبا معينا‪ ،‬وكما رشحنا سابقا‪ ،‬فكل بند من بنود‬
‫عنرص مخصص إلنشاء قوائم ر‬
‫وسم البداية والنهاية للعنرص <‪. >li‬‬
‫ي‬ ‫القائمة‪ ،‬يكون داخل‬
‫>‪<h4>Programming Languages</h4‬‬
‫>‪<ul‬‬
‫>‪<li>Web applications</li‬‬
‫>‪<li>Desktop applications</li‬‬
‫>‪<li>Mobile applications</li‬‬
‫>‪</ul‬‬
‫الحظ أن كل بند من بنود القائمة ظهر قبله رمز‬
‫‪ ، marker‬وهو عبارة عن قرص مصمت وهو‬
‫ً‬
‫الن كانت‬
‫ي‬ ‫األرقام‬ ‫عن‬ ‫بديال‬ ‫القيمة االفثاضية ‪،‬‬
‫تسبق أي بند يف النوع السابق (القوائم المرتبة)‪.‬‬

‫الفرع <‪ >li‬يمكن أن يتفرع هو نفسه لعدة قوائم أصغر‪ ،‬وهو ما يسم ‪nesting‬‬
‫ي‬ ‫والعنرص‬
‫كالتال‪:‬‬
‫ي‬ ‫ويكون لكل قائمة رمز ‪ marker‬مختلف عن القائمة قبلها أو بعدها‬
‫>‪<h4>Programming Languages</h4‬‬
‫>‪<ul‬‬
‫‪<li>Web applications‬‬
‫>‪<ul‬‬
‫‪<li>Design‬‬
‫>‪<ul><li>HTML</li><li>CSS</li><li>Jscript</li></ul‬‬
‫>‪</li‬‬
‫‪<li>Developing‬‬
‫>‪<ul><li>PHP</li><li>MySql</li><li>Laravel</li></ul‬‬
‫>‪</li‬‬
‫>‪</ul‬‬
‫>‪</li‬‬
‫‪<li>Desktop applications‬‬

‫‪HTML Elements‬‬ ‫‪87‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<ul‬‬
‫‪<li>Software development‬‬
‫>‪<ul><li>C Lang</li><li>C++</li><li>C#</li></ul‬‬
‫>‪</li‬‬
‫>‪</ul‬‬
‫>‪</li‬‬
‫الحظ أن كل قائمة لها رمز خاص بها‪،‬‬
‫تعيي‬
‫ر‬ ‫مختلف عن رمز أي قائمة أخرى‪ ،‬ويتم‬
‫ئ‬
‫تتغث مع كل‬
‫ر‬ ‫تلقاب‪ ،‬حيث‬
‫ي‬ ‫هذه الرموز بشكل‬
‫معي‪.‬‬ ‫قائمة تتفرع من بند ر‬

‫تخصيص رمز القائمة ك‪marker‬ك‬

‫وتغيث نوع الرمز ‪marker‬‬ ‫ر‬ ‫يمكن تخصيص‬
‫عن طريق تنسيقات ‪ css‬باستخدام الخاصية ‪list-‬‬
‫‪ style-type‬بعد أن أصبحت الخاصية ‪type‬‬
‫كثث من المتصفحات بطريقة‬
‫مهملة‪ ،‬وال ينصح باستخدامها‪ ،‬بالرغم من أنها ما زالت تعمل عىل ر‬
‫صحيحة‪ ،‬حن وقتنا هذا‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪ul‬‬
‫;‪display: block‬‬
‫;‪list-style-type: disc‬‬
‫;‪margin: 1em 0‬‬
‫;‪padding: 40px‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪88‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<menu>....</menu‬‬
‫غث مرتبة‪ ،‬مثل القائمة السابقة <‪ ،>ul‬حيث تحتوي بنودا من العنرص <‪، >li‬‬
‫عنرص قائمة ر‬
‫واالختالف بينهما‪ ،‬أن القائمة <‪ >ul‬تحتوي بنودا للعرض فقط‪ ،‬بينما القائمة <‪>menu‬‬
‫تحتوي بنودا تفاعلية‪ ،‬مثل األزرار أو أي عناص يتفاعل معها المستخدم‪ ،‬عن طريق حركة‬
‫الفأرة‪ ،‬أو لوحة المفاتيح‪ ،‬لتؤدي وظيفة معينة‪.‬‬
‫>‪<menu> <h3>List Of Commands</h3‬‬
‫‪<li><span onmousemove="style='background:pink;'">Change background‬‬
‫>‪color if mouse move</span></li‬‬
‫>"'‪<li><img src="mount.jpg" width="30" onclick="style='width:60px‬‬
‫>‪Zoom in if clicked</li‬‬
‫")'!!! ‪<li><button onclick="alert('Welcome to menu element‬‬
‫>‪autofocus>Press Enter !!</button> </li‬‬
‫>‪</menu‬‬
‫تتغث‬
‫القائمة تضم ثالثة بنود‪ ،‬األول ر‬
‫والثاب‬
‫ي‬ ‫خلفيته عند مرور الفأرة فوقه‪،‬‬
‫تكبثها بنقرها بالفأرة‪ ،‬والثالث‬
‫صورة يتم ر‬
‫كث لوحة المفاتيح إليه عن‬ ‫زر عند نقل تر ر‬
‫طريق مفتاح ‪ tab‬ثم الضغط عىل‬
‫‪ enter‬فتظهر رسالة معينة‪ ،‬وتكون النتيجة كما يف الشكل ي‬
‫التال‪:‬‬

‫‪HTML Elements‬‬ ‫‪89‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<dl>....</dl‬‬
‫عنرص قائمة رشح أو ‪ ، description list‬مخصص النشاء قائمة ل رشح مصطلح ر‬
‫معي‪،‬‬
‫داخليي‪:‬‬
‫ر‬ ‫وتقوم بذلك عن طريق عنرصين‬
‫>‪<dt>....</dt‬‬
‫عنرص ‪ ، description term‬مخصص ليحتوي المصطلح أو العنوان المطلوب رشحه‪.‬‬
‫>‪<dd>....</dd‬‬
‫عنرص ‪ ، description data‬مخصص ليحتوي البيانات أو المعلومات‪ ،‬الن تصف أو ر‬
‫تشح‬ ‫ي‬
‫مفهوم المصطلح المطلوب‪.‬‬
‫>‪<dl‬‬
‫>‪<dt><b>HTML</b></dt‬‬
‫>‪<dd>Hyper Text Markup Language</dd‬‬
‫>‪<dt><b>CSS</b></dt‬‬
‫>‪<dd>Cascading Style Sheets</dd‬‬
‫>‪<dt><b>XML</b></dt‬‬
‫>‪<dd>Extensible Markup Language</dd‬‬
‫>‪</dl‬‬
‫أنن قد قمت بتنسيق المصطلح‬
‫الحظ ي‬
‫المطلوب رشحه <‪ >dt‬بخط سميك حن‬
‫يمثه عن الوصف أو ر‬
‫الشح‪.‬‬ ‫يمكن للقارئ أن ر‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫‪dl { display: block; margin: 1em‬‬ ‫} ;‪0‬‬
‫} ;‪dt { display: block‬‬
‫} ;‪dd { display: block; margin-left: 40px‬‬

‫‪HTML Elements‬‬ ‫‪90‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪Tag Omission‬‬
‫المثة يف بعض عناص ‪ ، block elements‬ومن ضمن هذه‬ ‫رشحنا من قبل‪ ،‬وجود هذه ر‬
‫المثة‪ ،‬العنرصين <‪ >dt‬إذا أنشأ داخله عنرص <‪ ، >dd‬والعنرص <‪>dd‬‬
‫الن تتأثر بهذه ر‬
‫العناص ي‬
‫إذا أنشأ داخله عنرص <‪. >dt‬‬
‫>";‪<dl style="width:250px‬‬
‫‪<dt style="background:red;">HTML‬‬
‫>‪<dd style="background:gold;">Hyper Text Markup Language</dd‬‬
‫‪CSS‬‬
‫>‪</dt‬‬
‫>‪</dl‬‬

‫الحظ أن النص ‪ CSS‬لم يتم تنسيقه بنفس تنسيق العنرص <‪ >dt‬برغم وقوعه داخله‪ ،‬ألن‬
‫الداخىل (االبن) <‪. >dd‬‬
‫ي‬ ‫العنرص أغلق بفعل إنشاء العنرص‬
‫>";‪<dl style="width:250px‬‬
‫>‪<dt style="background:red;">HTML</dt‬‬
‫‪<dd style="background:gold;">Hyper Text Markup Language‬‬
‫>‪<dt> CSS</dt‬‬
‫>‪<dd>Cascading style sheets</dd‬‬
‫>‪</dd‬‬
‫>‪</dl‬‬

‫الحظ أن العنرصين <‪ >dt‬و <‪ >dd‬يف السطرين الرابع والخامس‪ ،‬لم يتم تنسيقهما بنفس‬
‫تنسيق العنرص األب <‪ >dd‬يف السطر الثالث رغم وقوعمها داخله‪.‬‬
‫‪HTML Elements‬‬ ‫‪91‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

Table Elements ‫عناص الجدول‬

،‫ وداخله مجموعة عناص داخلية أخرى‬، >table< ‫الرئيش‬
‫ي‬ ‫مجموعة عناص تبدأ بالعنرص‬
‫ ومنها عناص مخصصة إلنشاء الصفوف‬،‫مخصصة إلنشاء الجداول ذات الصفوف واألعمدة‬
.‫وغثها‬
‫والخاليا ورؤس الصفوف ر‬
<table>....</table>
.‫الرئيش وهو مخصص الحتواء جميع عناص مكونات الجدول‬
‫ي‬ ‫العنرص‬
<head>
<style> table, th, td { border: 0.5px solid; }
th, td { width: 80px; height: 30px; }</style>
</head>
<body>
<table><caption> Start With Tables</caption>
<thead style="background: gold ">
<th> Head 1</th><th> Head 2</th><th> Head 3</th>
</thead>
<tbody style="background: khaki">
<tr>
<td>Body 1</td><td> Body 2</td><td> Body 3</td>
</tr>
<tr>
<td>Body 4</td><td> Body 5</td><td> Body 6</td>
</tr>
</tbody>
<tfoot style="background: orange">
<tr>
<td>Foot 1</td><td> Foot 2</td><td> Foot 3</td>
</tr>
</tfoot>
</table>
</body>

HTML Elements 92 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الحظ أننا قمنا باستخدام العنرص‬

‫<‪ >style‬داخل العنرص <‪ >head‬ليقوم‬
‫بإعطاء حدود للجدول والخاليا‪ ،‬وعرض‬
‫وارتفاع لتوضيح محازاة النص‪ ،‬واستخدمنا‬
‫الخاصية ‪ style‬داخل العناص <‪>thead‬‬
‫و<‪ >tbody‬و<‪ >tfoot‬إلعطائهم لون‬
‫خلفية‪ ،‬حن ال يظهر الجدول كما بالشكل‬
‫التميث ربي‬
‫ر‬ ‫وبالتال لن تستطيع‬
‫ي‬ ‫المقابل‪،‬‬
‫أجزائه‪.‬‬

‫اَ‪:‬‬
‫التنسيق اال فث ي‬
‫{ ‪table‬‬
‫;‪display: table‬‬
‫;‪border-collapse: separate‬‬
‫;‪border-spacing: 2px‬‬
‫;‪border-color: gray‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪93‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<caption>....</caption‬‬
‫عنرص مخصص إلنشاء عنوان للجدول‪ ،‬ودائما ما يكون أول عنرص بعد وسم بداية‬
‫اَ أعىل منتصف الجدول مهما كان موضعه داخل الكود‪.‬‬
‫الجدول‪ ،‬وموضعه االفث ي‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪caption‬‬
‫;‪display: table-caption‬‬
‫;‪text-align: center‬‬
‫}‬

‫>‪<thead>....</thead‬‬
‫عنرص مخصص الحتواء صف يكون رأسا لجميع األعمدة‪ ،‬والمحازاة الرأسية للنص داخله‬
‫غث مؤثر يف بناء الجدول‪ ،‬إذ يمكن بناء الجدول بدونه‪،‬‬
‫تكون يف منتصف الصف ‪ ،‬وهو عنرص ر‬
‫ولكنه يمكن أن يستخدم يف تنسيق خاليا رأس الجدول دفعة واحدة‪ ،‬كما يستخدمه المتصفح‬
‫يأب بعد العنرصين <‪>caption‬‬ ‫ر‬
‫لالنتقال مباشة إل رأس الجدول‪ ،‬وترتيب هذا العنرص ي‬
‫و<‪ ، >colgroup‬وعموما‪ ،‬فأيا كان ترتيب العنرص >‪ <thead‬داخل الكود‪ ،‬فإن الصفوف‬
‫داخله ستعرض دائما يف مقدمة الجدول‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪thead‬‬
‫;‪display: table-header-group‬‬
‫;‪vertical-align: middle‬‬
‫;‪border-color: inherit‬‬
‫}‬

‫>‪<th>....</th‬‬
‫داخىل إما للعنرص <‪ ، >thead‬أو العنرص <‪ >tr‬وهو مخصص إلنشاء خاليا‬
‫ي‬ ‫عنرص‬
‫الصفوف العلوية أو رؤوس األعمدة‪ ،‬حيث يعرض النص داخله بخط سميك ‪ ،bold‬وتكون‬
‫‪HTML Elements‬‬ ‫‪94‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫المحازاة األفقية للنص داخل الخلية‪ ،‬يف منتصف الخلية كأفقياك‪.‬‬

‫>‪<style>table, th, td { border: 0.5px solid } </style‬‬
‫>‪<table‬‬
‫>‪<tr><th>Head 1</th><th>Head 2</th><th>Head 3</th></tr‬‬
‫>‪<tr><td>Body 1</td><td> Body 2</td><td> Body 3</td></tr‬‬
‫>‪</table‬‬
‫تعيي عدة خصائص للعنرص <‪>th‬‬
‫ويتم ر‬
‫تتحكم يف سلوكه‪:‬‬

‫‪abbr‬‬
‫تعط وصفا مخترصا لمحتوى خلية معينة‪ ،‬يف صف عنوان األعمدة‪ ،‬ولكن لن‬ ‫ي‬ ‫خاصية‬
‫ئ‬
‫مرب‪ ،‬ولكن يتم قراءة قيمتها عن طريق برامج قراءة الشاشة‪.‬‬
‫تأثث ي‬
‫تالحظ لها أي ر‬
‫>‪<th abbr="First head cell of the table">Head 1</th‬‬

‫‪rowspan‬‬
‫خاصية تسمح للخلية بالتمدد رأسيا‪ ،‬واحتالل مكان خليتي أو ر‬
‫أكث‪ ،‬حيث تقوم الخلية‬ ‫ر‬
‫العليا بشغل العدد المطلوب من الخاليا‪ ،‬فتقوم بإزاحة كل خاليا العمود إل األسفل‪ ،‬بنفس‬
‫باف‬
‫الن شغلتها‪ ،‬لذلك يجب أن يكون عدد خاليا هذا العمود أقل من عدد خاليا ي‬ ‫عدد الخاليا ي‬
‫الن ستضمها إليها هذه الخلية‪ ،‬وقيمة هذه الخاصية تكون‬ ‫أعمدة الجدول‪ ،‬بنفس عدد الخاليا ي‬
‫الن ستشغلها الخلية بعد ضم الخاليا األخرى‪ ،‬فإذا كانت الخلية ستضم إليها‬
‫ه عدد الصفوف ي‬ ‫ي‬
‫خلية واحدة ‪ ،‬تكون قيمة الخاصية ‪. 2‬‬
‫>‪<style>table, th, td {border: 0.5px solid } </style‬‬
‫>‪<table‬‬
‫>‪<tr‬‬
‫>‪<th rowspan="2">Head 1</th><th>Head 2</th><th>Head 3</th‬‬
‫>‪</tr‬‬
‫>‪<tr><td>Body 1</td><td> Body 2</td></tr‬‬
‫>‪</table‬‬

‫‪HTML Elements‬‬ ‫‪95‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪original‬‬ ‫"‪rowspan="2‬‬

‫تأثثها يختلف ربي المتصفحات ‪:‬‬

‫تجنب استخدام القيمة ‪ 0‬للخاصية ‪ rowsapn‬ألن ر‬

‫>‪<style>table, th, td {border: 0.5px solid } </style‬‬

‫>‪<table‬‬
‫>‪<tr><td rowspan="0">Col</td></tr‬‬
‫>‪<tr><td>Row 1</td><td>Row 1</td><td>Row 1</td></tr‬‬
‫>‪<tr><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr‬‬
‫>‪<tr><td>Row 3</td><td>Row 3</td><td>Row 3</td></tr‬‬
‫>‪</table‬‬

‫‪Google Chrome‬‬ ‫‪Mozilla Firefox‬‬

‫‪colspan‬‬
‫أكث‪ ،‬حيث تقوم الخلية‬ ‫خاصية تسمح للخلية بالتمدد أفقيا واحتالل مكان خليتي أو ر‬
‫ر‬
‫الن‬
‫اليمي بنفس عدد الخاليا ي‬
‫ر‬ ‫اليمي‪ ،‬فتقوم بإزاحة كل خاليا الصف إل‬
‫ر‬ ‫اليشى بالتمدد إل‬
‫ضمتها‪ ،‬لذلك يجب أن يكون عدد خاليا الصف العلوي‪ ،‬أقل من عدد خاليا الصف أو الصفوف‬
‫أكث‪ ،‬حسب عدد الخاليا أو األعمدة المطلوب أن تتمدد عليها هذه‬ ‫السفلية بخلية واحدة أو ر‬
‫الن ستشغلها الخلية‪ ،‬فإذا كانت هذه الخلية‬‫ه عدد الخاليا ي‬ ‫الخلية‪ ،‬وقيمة الخاصية تكون ي‬
‫ه‪.3‬‬
‫آخريي‪ ،‬فتكون قيمة الخاصية ي‬
‫ر‬ ‫خليتي‬
‫ر‬ ‫ستضم إليها‬
‫‪HTML Elements‬‬ ‫‪96‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<style>table, th, td {border: 0.5px solid } </style>

<table>
<tr><th colspan="2">Head 1</th><th>Head 2</th></tr>
<tr><td>Body 1</td><td> Body 2</td><td> Body 3</td></tr>
</table>

original colspan="2"

headers
‫ وهذا‬،‫لباف الخاليا‬
‫ أحدها ي‬id ‫ إسناد قيمة‬،‫ ببعضها عن طريق‬th ‫خاصية تقوم بربط خاليا‬
.‫ ولكن أثره يظهر عند استخدام برامج قراءة الشاشة‬،‫مرب للمستخدم‬‫السلوك ليس له أثر ئ‬
‫ي‬
<table>
<tr><th id="first_cell">Head 1</th><th>Head 2</th></tr>
<tr><td headers="first_cell">Body 1</td><td> Body 2</td></tr>
</table>

scope
‫ أو‬،‫ أم رأس مجموعة من األعمدة‬،‫ أم رأس صف‬،‫ه رأس عمود‬ ‫ ي‬th ‫خاصية تحدد هل‬
‫ ومثلها مثل الخاصية‬rowgroup‫ و‬colgroup‫ و‬row‫ و‬col :‫وه‬ ‫ وتقبل عدة قيم ي‬،‫الصفوف‬
‫ ليس لسلوكها أثر ئ‬،‫السابقة‬
‫ وإنما أثرها يكون عند استخدام‬،‫مرب يمكن أن يالحظه المستخدم‬
‫ي‬
.‫برامج قراءة الشاشة‬
<table>
<tr><th scope="col">Head 1</th><th>Head 2</th></tr>
<tr><td>Body 1</td><td> Body 2</td></tr>
</table>

HTML Elements 97 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪th‬‬
‫;‪display: table-cell‬‬
‫;‪text-align: center‬‬
‫;‪vertical-align: inherit‬‬
‫;‪font-weight: bold‬‬
‫}‬

‫>‪<tbody>....</tbody‬‬
‫عنرص مخصص الحتواء الصفوف‪ ،‬الن ِّ‬
‫تكون خاليا جسم الجدول‪ ،‬والمحازاة الرأسية‬ ‫ي‬
‫للنص داخله تكون يف منتصف الصف‪ ،‬ويجب أن يحتوي داخله صف واحد عىل األقل‪ ،‬ولكنه‬
‫غث مؤثر يف بناء الجدول‪ ،‬إذ يمكن بناء الجدول بدونه‪ ،‬ولكن يمكن أن يستخدم يف تنسيق‬
‫ر‬
‫مباشة إل جسم‬ ‫مجموعة صفوف جسم الجدول‪ ،‬كما يمكن أن يستخدمه المتصفح لالنتقال ر‬
‫يأب بعد العنرص <‪ >caption‬والعنرص <‪ >colgroup‬والعنرص‬ ‫الجدول‪ ،‬وترتيب هذا العنرص ي‬
‫<‪ ، >thead‬وعموما‪ ،‬وأيا كان ترتيب العنرص >‪ <tbody‬داخل الكود‪ ،‬فإن الصفوف داخله‬
‫ستعرض دائما ربي العنرصين >‪ <thead‬و >‪. <tfoot‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪tbody‬‬
‫;‪display: table-row-group‬‬
‫;‪vertical-align: middle‬‬
‫;‪border-color: inherit‬‬
‫}‬

‫>‪<tfoot>....</tfoot‬‬
‫عنرص مخصص الحتواء آخر صف أو مجموعة صفوف يف الجدول‪ ،‬والمحازاة الرأسية‬
‫غث مؤثر يف بناء الجدول‪ ،‬إذ يمكن بناء الجدول‬
‫للنص داخله يف منتصف الصف‪ ،‬وهو عنرص ر‬
‫بدونه‪ ،‬ولكن يمكن أن يستخدم يف تنسيق مجموعة صفوف ذيل الجدول‪ ،‬كما يمكن للمتصفح‬
‫‪HTML Elements‬‬ ‫‪98‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫يأب بعد العناص‬ ‫ر‬

‫أن يستخدمه لالنتقال مباشة إل ذيل الجدول‪ ،‬وترتيب هذا العنرص ي‬
‫<‪ >caption‬و<‪ >colgroup‬و<‪ >thead‬و <‪ ، >tbody‬وعموما‪ ،‬فأيا كان ترتيب العنرص‬
‫>‪ <tfoot‬داخل الكود‪ ،‬ستعرض الصفوف داخله يف مؤخرة الجدول دائما‪.‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪tfoot‬‬
‫;‪display: table-footer-group‬‬
‫;‪vertical-align: middle‬‬
‫;‪border-color: inherit‬‬
‫}‬

‫>‪<tr>....</tr‬‬
‫عنرص مخصص النشاء صف يف الجدول‪ ،‬ويحتوي داخله العنرص <‪ ، >td‬أو العنرص <‪>th‬‬
‫المسئول ري عن إنشاء الخاليا داخل الصفوف‪.‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪tr‬‬
‫;‪display: table-row‬‬
‫;‪vertical-align: inherit‬‬
‫;‪border-color: inherit‬‬
‫}‬

‫>‪<td>....</td‬‬
‫عنرص مخصص إلنشاء الخاليا يف صف من الجدول‪ ،‬والمحازاة األفقية للنص داخلها تكون‬
‫نعي لهذا العنرص‬
‫لليسار ‪ ، left-aligned‬ويكون سمك الخط ‪ ، normal‬ويمكن أن ر‬
‫الخصائص السابق رشحها مع العنرص >‪ <th‬مثل ‪ headers‬و ‪ colspan‬و‪. rowspan‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪td‬‬
‫;‪display: table-cell‬‬
‫‪HTML Elements‬‬ ‫‪99‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

vertical-align: inherit;
text-align: left;
}

<colgroup>....</colgroup>
‫ ويتم تحديد‬،‫معي‬
‫عنرص مخصص لتنسيق عمود أو مجموعة من أعمدة الجدول بتنسيق ر‬
‫ وترتيب هذا العنرص‬، span ‫ عن طريق الخاصية‬،‫الن سيطبق عليها هذا التنسيق‬
‫عدد األعمدة ي‬
>tfoot<‫> و‬tbody<‫> و‬thead< ‫> وقبل العناص‬caption<‫> و‬table< ‫يأب بعد العناص‬ ‫ي‬
. >tr<‫و‬
<style>table, td {border: 0.5px solid } </style>
<table>
<colgroup span="1" style="width: 50px; background: gold;">
</colgroup>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
</table>

span
‫خاصية تقبل قيمتها كعدد صحيح‬
‫الن سيطبق‬‫ لتحديد عدد األعمدة ي‬،‫موجب‬
‫ وإذا‬، >colgroup< ‫عليها تنسيق العنرص‬
‫ فإن‬، 1 ‫أسند للخاصية أي قيمة أصغر من‬
‫ ويجب أال تزيد‬، 1 ‫الخاصية ستعتثها‬
span = "1" .‫قيمتها عن عدد أعمدة الجدول‬
HTML Elements 100 [email protected]
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

span = "2" span = "4"

:َ‫ا‬
‫التنسيق االفث ي‬
colgroup {
display: table-column-group;
}

<col>
،‫> ينسق مجموعة من األعمدة‬colgroup< ‫داخىل للعنرص‬
‫ي‬ empty element ‫عنرص‬
‫ب ر‬
. span ‫ باستخدام قيمة الخاصية‬،‫أكث من تنسيق مختلف‬
<style>table, td {border: 0.5px solid } </style>
<table>
<colgroup>
<col span="1" style="width: 40px; background: gold;">
<col span="2" style="width: 50px; background: orange;">
<col span="1" style="width: 60px; background: tomato;">
</colgroup>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4
</td></tr>
<tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4

HTML Elements 101 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪</td></tr‬‬
‫>‪</table‬‬

‫الحظ أن قيمة الخاصية ‪ span‬ألول‬

‫عنرص <‪ >col‬كانت ‪ 1‬فتم تطبيق‬
‫التنسيق عىل أول عمود‪ ،‬وكانت قيمتها‬
‫ه ‪ ، 2‬فتم تطبيقها عىل‬ ‫الثاب ي‬
‫للعنرص ي‬
‫الثاب والثالث‪ ،‬وكانت قيمتها‬
‫ي‬ ‫العمودين‬
‫ه ‪ ، 1‬فتم تطبيقها عىل‬‫للعنرص الثالث ي‬
‫العمود الرابع‪.‬‬
‫إذا احتوى العنرص >‪ <colgroup‬عىل تنسيقات وكان داخله ولو عنرص >‪ <col‬واحد‬
‫يلع العنرص >‪ <colgroup‬وتنسيقاته لكل‬ ‫فقط‪ ،‬ويستهدف ولو عمود واحد فقط‪ ،‬فإنه ي‬
‫ألع العنرص االبن وسم بداية العنرص األب‪.‬‬
‫األعمدة وهذا ما يسم ‪ ، Tag Omission‬حيث ي‬
‫إذا تعددت العناص >‪ <colgroup‬داخل الجدول‪ ،‬فإن أولوية التنسيق تكون للعنرص‬
‫الن لم يستكملها العنرص األول بالثتيب‪،‬‬
‫الثاب تنسيق األعمدة ي‬
‫ي‬ ‫األول‪ ،‬ثم يستكمل العنرص‬
‫ثم الثالث والرابع وحن آخر عنرص‪.‬‬
‫يمكن استخدام العنرص >‪ <col‬يف تنسيق األعمدة كعنرص مستقل‪ ،‬دون أن يكون داخل‬
‫عنرص أب من النوع >‪. <colgroup‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪col‬‬
‫;‪display: table-column‬‬
‫}‬

‫يف بعض األكواد السابقة قمت بوضع العنرص >‪ < style‬قبل العنرص >‪< table‬‬
‫ر‬
‫مباشة‪ ،‬لتقليل مساحة الكود ولعدم إصابة القارئ بالملل من زيادة عدد أسطر الكود‪ ،‬ولكن‬
‫األصل‪ ،‬أن العنرص >‪ < style‬يجب أن يتم إنشاؤه دائما داخل العنرص >‪ ، < head‬حيث إنه‬
‫من عناص ‪ ، metadata‬والن سنتناولها الحقا ر‬
‫بالشح‪.‬‬ ‫ي‬

‫‪HTML Elements‬‬ ‫‪102‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪Tag Omission‬‬
‫كثث من عناص الجدول يمكن االستغناء عن وسم اإلغالق ‪ ،‬كما أن العناص األبناء تقوم‬ ‫يف ر‬
‫بإغالق العنرص األب‪ ،‬وقد سبق أن رشحنا كيفية حدوث ذلك عىل بعض العناص السابقة‪ ،‬وال‬
‫نشث فقط‪ ،‬إل هذه العناص وطريقة عملها وعليك أن‬ ‫لشح أمثلة جديدة‪ ،‬وسوف ر‬ ‫حاجة ر‬
‫والتأثث المشابه للعناص السابق رشحها‪.‬‬
‫ر‬ ‫تتوقع نفس سلوك‬
‫‪ -1‬العنرص >‪ : <caption‬يمكن االستغناء عن وسم اإلغالق ‪ ، closing tag‬فبمجرد إنشاء‬
‫عنرص آخر بعد محتوى هذا العنرص‪ ،‬يتم إغالق العنرص >‪ <caption‬تلقائيا‪.‬‬
‫‪ -2‬العنرص >‪ : <tbody‬ليس عنرصا أساسيا يف بناء الجدول‪ ،‬وهو مخصص ليحتوي‬
‫مباشة للجدول‬ ‫صفوف جسم الجدول‪ ،‬ولكن ف حالة وجود صفوف من النوع >‪ <tr‬كأبناء ر‬
‫ي‬
‫األب‪ ،‬فال يجب أن يتواجد عنرص >‪ <tbody‬يف بناء الجدول‪.‬‬
‫‪ -3‬العنرص >‪ : <thead‬يمكن االستغناء عن وسم اإلغالق‪ ،‬إذا تبع محتواه عنرص‬
‫>‪ <tbody‬أو عنرص >‪. <tfoot‬‬
‫‪ -4‬العنرص >‪ : <tfoot‬يمكن االستغناء عن وسم اإلغالق‪ ،‬إذا كان آخر عنرص يف الجدول‪.‬‬
‫‪ -5‬العنرص >‪ : <tr‬يمكن االستغناء عن وسم اإلغالق‪ ،‬إذا تبع محتواه عنرص >‪ <tr‬آخر‪ ،‬أو‬
‫كان هو آخر عنرص ابن داخل العنرص األب‪ ،‬سواء كان العنرص األب هو >‪ <tbody‬أو >‪<thead‬‬
‫أو >‪. <tfoot‬‬
‫‪ -6‬العنرص >‪ : <th‬يمكن االستغناء عن وسم اإلغالق‪ ،‬إذا تبع محتواه عنرص >‪ <th‬آخر‪ ،‬أو‬
‫عنرص >‪ ، <td‬أوكان هو آخر عنرص ابن داخل العنرص األب‪.‬‬
‫‪ -7‬العنرص >‪ : <td‬يمكن االستغناء عن وسم اإلغالق‪ ،‬إذا تبع محتواه عنرص >‪ <td‬آخر‪ ،‬أو‬
‫عنرص >‪ ، <th‬أوكان هو آخر عنرص ابن داخل العنرص األب‪.‬‬

‫‪HTML Elements‬‬ ‫‪103‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫عناص النموذج ‪Form Elements‬‬

‫الن توضع داخل عنرص النموذج أو <‪ ، >form‬وتستخدم للتفاعل مع‬ ‫ه العناص ي‬ ‫ي‬
‫المستخدم‪ ،‬عن طريق إدخال بعض البيانات‪ ،‬ليتم استخدامها يف موضع آخر عند اعتماد‬
‫النموذج أو ‪ ، submit‬حيث يتم إرسالها إل صفحة أخرى أو إل خادم ‪ ، server‬ليقوم‬
‫مستخدمي آخرين‪.‬‬
‫ر‬ ‫الحال أو‬
‫ي‬ ‫بمعالجتها‪ ،‬الستخراج معلومات يطلبها المستخدم‬
‫الرئيش الذي يحتوي جميع العناص وهو العنرص <‪. >form‬‬
‫ي‬ ‫وسنبدأ بالعنرص‬

‫>‪<form>….</form‬‬
‫العنرص األب الذي يحتوي كل عناص النموذج األخرى‪ ،‬وهو عنرص غث ئ‬
‫مرب إال إذا تم‬
‫ي‬ ‫ر‬
‫تنسيقه بالـ ‪ ، css‬وبالرغم من أن العناص الداخلية لهذا العنرص يمكن أن تظهر للمستخدم حن‬
‫ولو لم توضع داخله‪ ،‬إال أن هذه العناص ال يتم عمل ‪ submit‬لها ‪ ،‬أي ال يتم إرسال بياناتها إل‬
‫الخادم أو صفحة أخرى‪ ،‬إال إذا كانت داخل عنرص <‪. >form‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪form‬‬
‫;‪display: block‬‬
‫; ‪margin-top: 0em‬‬
‫}‬
‫تعيي العديد من الخصائص للعنرص <‪: >form‬‬
‫ويتم ر‬
‫‪accept-charset‬‬
‫ترمث الحروف الذي سيسخدمه عنرص <‪ >form‬أو النموذج ‪ ،‬حن‬ ‫خاصية تحدد نوع ر‬
‫والن يستخدمها عنرص <‪ >form‬يف اعتماد أو عمل ‪submit‬‬
‫يفهم المتصفح اللغة المكتوبة‪ ،‬ي‬
‫الن تم إدخالها‪.‬‬
‫للبيانات ي‬
‫مث أشهرها‪:‬‬
‫ويوجد أنواع عديدة من الث ر‬
‫مثكل الحروف‬
‫الن تقوم بث ر‬
‫معايث الموحدة ‪ ، unicode‬ي‬
‫مث حسب ال ر‬ ‫‪ : utf-8 -‬ويكون الث ر‬
‫والرموز يف كل اللغات تقريبا‪.‬‬
‫ترمث حروف‬
‫معايث األحرف الالتينية‪ ،‬حيث يتم ر‬
‫ر‬ ‫مث حسب‬ ‫‪ : ISO-8859-1 -‬ويكون الث ر‬
‫‪HTML Elements‬‬ ‫‪104‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫مث عدد‬
‫اإلنجلثية) باإلضافة لث ر‬
‫ر‬ ‫(وه أغلب الحروف والرموز المستخدمة يف اللغة‬ ‫ي‬ ‫‪ascii‬‬
‫وغثها‪.‬‬
‫األمريك ر‬
‫ي‬ ‫لين ورمز السنت‬‫من الرموز الالتينية‪ ،‬مثل رمز الجنية االسث ي‬
‫‪action‬‬
‫خاصية تقوم بتحديد الصفحة أو الخادم‪ ،‬الذي سيستقبل البيانات المرسلة من <‪>form‬‬
‫بعد اعتمادها‪ ،‬ليتم معالجتها والتعامل معها بعد ذلك‪.‬‬
‫‪autocomplete‬‬
‫خاصية تتيح للمتصفح اقثاح استكمال بيانات النموذج أثناء إدخالها‪ ،‬عن طريق قائمة‬
‫قيمتي‪:‬‬
‫ر‬ ‫منسدلة‪ ،‬تقثح بيانات أخرى قد تم إدخالها سابقا‪ ،‬ويسند لها‬
‫تعن أن المتصفح يستطيع اقثاح بيانات الستكمال عملية اإلدخال‪.‬‬ ‫‪ : on -‬قيمة ي‬
‫تعن منع المتصفح من تقديم أي اقثاح الستكمال البيانات‪.‬‬‫‪ : off -‬قيمة ي‬
‫>"‪<form autocomplete="on‬‬
‫>"‪<input type="text" name="nm" value="" autocomplete="off‬‬
‫>""=‪<input type="email" name="ml" value‬‬
‫>"‪<input type="submit" value="Send‬‬
‫>‪</form‬‬

‫‪method‬‬
‫السثفر أو صفحة أخرى بعد اعتمادها‪،‬‬
‫ر‬ ‫خاصية تحدد طريقة إرسال بيانات النموذج إل‬
‫القيمتي يف ملحق ‪. 1‬‬
‫ر‬ ‫قيمتي هما ‪ get‬و ‪ post‬ر‬
‫وشح مدلول‬ ‫ر‬ ‫وتسند لها‬
‫‪enctype‬‬
‫السثفر بعد اعتمادها‪ ،‬ويسند لها عدة قيم‪،‬‬
‫تشفث بيانات النموذج عند دخولها إل ر‬
‫ر‬ ‫طريقة‬
‫والقيم ومدلولها ملحق ‪. 1‬‬
‫‪multiple‬‬
‫أكث من قيمة‪ ،‬أو ر‬
‫أكث من اختيار‪ ،‬مثل النوع ‪ email‬للعنرص‬ ‫خاصية تسمح للعنرص بإدخال ر‬
‫وب‪ ،‬ومثل العنرص <‪ >select‬حيث تسمح‬ ‫ر‬
‫<‪ >input‬حيث تسمح بإدخال أكث من بريد الكث ي‬
‫باختيار ر‬
‫أكث من واحد من قائمة اختيارات هذا العنرص‪.‬‬
‫‪HTML Elements‬‬ ‫‪105‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪name‬‬
‫خاصية تقوم بتحديد اسم للنموذج الذي نتعامل معه‪.‬‬
‫‪novalidate‬‬
‫معايث‬
‫تعن عدم خضوع بيانات حقول النموذج‪ ،‬لعملية مراجعة ومطابقة لل ر‬ ‫ي‬ ‫خاصية‬
‫خىل‪ ،‬قبل اعتمادها‪.‬‬
‫الخاصة بكل عنرص دا ي‬
‫‪rel‬‬
‫السثفر الذي ستنتقل إليه البيانات‬
‫خاصية تحدد نوع العالقة ربي النموذج والصفحة أو ر‬
‫وشح جميع قيم هذه الخاصية ملحق ‪. 1‬‬ ‫بعد اعتمادها‪ ،‬ر‬

‫‪target‬‬
‫خاصية تحدد موضع فتح الصفحة أو النموذج‪ ،‬الذي سيقوم النموذج باالنتقال إليه بعد‬
‫اعتماده‪ ،‬ويسند لها أي من القيم التالية‪ _blank :‬و ‪ _parent‬و ‪ _self‬و ‪_top‬‬
‫و‪ ، framename‬ر‬
‫وشح مدلول هذه القيم ملحق ‪. 1‬‬

‫الن يتم إنشاؤها داخل النموذج أو عنرص <‪>form‬‬

‫وسوف نستعرض العناص الداخلية‪ ،‬ي‬
‫والن تم تخصيصها للتعامل والتفاعل مع المستخدم بطرق عديدة‪ ،‬الستقبال البيانات‬
‫األب‪ ،‬ي‬
‫منه ‪.‬‬

‫‪HTML Elements‬‬ ‫‪106‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<input‬‬
‫عنرص ‪ empty element‬مخصص إلدخال واستقبال البيانات من المستخدم‪ ،‬وهذا‬
‫العنرص له عدة خصائص‪ ،‬وبعضها يتشابه مع مثيالتها يف النموذج أو عنرص <‪ >form‬األب‪،‬‬
‫الداخىل‪ ،‬ويختلف عنها يف أن قيم الخصائص لعنرص النموذج األب‬
‫ي‬ ‫الذي يحتوي هذا العنرص‬
‫الداخىل ومنها‬
‫ي‬ ‫الن يتم إسنادها إل العنرص‬
‫يتم تطبيقها عىل كافة عناص النموذج‪ ،‬أما القيم ي‬
‫تأثث قيمة الخاصية يف‬
‫العنرص <‪ ، >input‬يتم تطبيقها عىل هذا العنرص فقط‪ ،‬ويتم إيقاف ر‬
‫تأثث الخاصية ‪ autocomplete‬السابق رشحها عىل‬ ‫النموذج األب عىل هذا العنرص‪ ،‬والحظ ر‬
‫الداخليي <‪ >input‬يف المثال المرفق ص ‪. 105‬‬
‫ر‬ ‫العنرص <‪ >form‬والعنرصين‬
‫تعيي عدة خصائص للعنرص <‪: >input‬‬ ‫ويمكن ر‬
‫‪type‬‬
‫خاصية تحدد نوع عنرص اإلدخال‪ ،‬ويسند لها عدة أنواع من القيم‪:‬‬
‫‪ : button‬زر‪.‬‬
‫>"‪<input type="button" value="Login‬‬
‫تأشث‪.‬‬
‫‪ : checkbox‬حقل اختيار أو ر‬
‫‪<input type="checkbox" checked> Watched‬‬
‫‪ : color‬حقل اختيار األلوان‪.‬‬

‫>"‪<input type="color" value="#4d5fae" name="clr‬‬

‫‪ : file‬حقل اختيار ملف للتحميل‪.‬‬

‫>‪<input type="file" accept="application/pdf,video/mp4" multiple‬‬

‫وب‪.‬‬
‫‪ : email‬حقل إدخال الثيد اإللكث ي‬
‫>‪<input type="email" value="[email protected]" readonly‬‬

‫‪HTML Elements‬‬ ‫‪107‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬
.‫ حقل إدخال التاري ــخ‬: date

<input type="date" value="2020-08-05" name="dt" >

: datetime-local
.‫حقل إدخال التاري ــخ والوقت‬

<input type="datetime-local" value="2020-08-05T01:53:16" >

.‫مخق‬
‫ي‬ ‫ حقل‬: hidden
<input type="hidden" id="pswrd">
.‫ زر عىل هيئة صورة‬: image

<input type="image" src="mount.jpg" alt="nice_view">

.‫ حقل إدخال الشهر‬: month

<input type="month" value="2021-07" name="mnth">

.‫معي‬
‫ حقل إدخال عدد ر‬: number
<input type="number" min="20" max="50" step="5">

HTML Elements 108 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬
.‫ حقل إدخال كلمة ش‬: password
<input type="password" name="pswrd">
.‫ زر راديو‬: radio

<input type="radio" name="yes_no" checked>Yes

<input type="radio" name="yes_no">No
.‫ رشيط مثلق‬: range

<input type="range" value="50" max="100" step="5">

.‫األصىل‬
‫ي‬ ‫ زر مسح البيانات وإعادة الوضع‬: reset
<input type="reset" value="Start Again">
.‫ زر اعتماد وإرسال البيانات‬: submit
<input type="submit" value="Send">
.‫ حقل بحث‬: search
Find <input type="search" value="Something">
.‫ حقل إدخال رقم تليفون‬: tel
<input type="tel" placeholder="Enter your phone no.">
.‫ حقل إدخال نص‬: text

Name: <input type="text" placeholder="Enter your name">

‫وب‬
‫ حقل إدخال عنوان موقع إلكث ي‬: url
Website: <input type="url" placeholder="www.somesite.com">
.‫ حقل إدخال الوقت‬: time

<input type="time" name="tm" value="19:30:45" required>

HTML Elements 109 [email protected]
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪ : week‬حقل إدخال األسبوع‪.‬‬

‫>"‪<input type="week" value="2021-W07" name="wk‬‬

‫باف خصائص العنرص <‪>input‬‬

‫نظرة شيعة عىل ي‬
‫‪accept‬‬
‫الن يتم قبول تحميلها‪.‬‬
‫خاصية للنوع ‪ ، file‬حيث تحدد أنوع الملفات ي‬
‫‪alt‬‬
‫خاصية تعرض نص عند حدوث خطأ يف عرض الصورة‪ ،‬يف النوع ‪.image‬‬
‫‪autocapitalize‬‬
‫تأثث هذه‬
‫كبثة‪ ،‬وال يظهر ر‬ ‫الن يتم إدخالها إل حروف ر‬ ‫خاصية تقوم بتحويل الحروف ي‬
‫تأثثها يكون عىل لوحة‬ ‫الخاصية عىل لوحة المفاتيح المادية (الخاصية بالحاسب)‪ ،‬ولكن ر‬
‫تأثثها عىل النوع‬
‫المفاتيح االفثاضية لألجهزة المحمولة (الهاتف النقال أو التابلت)‪ ،‬وال يظهر ر‬
‫‪ password‬أو النوع ‪ email‬أو النوع ‪ ،url‬وتقبل عدة قيم‪:‬‬
‫تعن عدم تفعيل الخاصية‪.‬‬‫‪ : off | none -‬قيمة ي‬
‫تعن تطبيق الخاصية عىل أول حرف يف الجملة‪.‬‬ ‫‪ : on | sentence -‬قيمة ي‬
‫تعن تطبيق الخاصية عىل أول حرف يف كل كلمة‪.‬‬ ‫‪ : words -‬قيمة ي‬
‫كبثة‪.‬‬
‫تعن أن كل الحروف يتم إدخالها كحروف ر‬ ‫‪ : characters -‬قيمة ي‬
‫‪autocomplete‬‬
‫خاصية تسمح للمتصفح باقثاح استكمال النص الذي يتم إدخاله‪ ،‬وسبق رشحها ص ‪. 105‬‬
‫‪autofocus‬‬
‫ئ‬
‫التلقاب للوحة المفاتيح‪ ،‬عىل‬
‫ي‬ ‫كث‬
‫يعن تحول الث ر‬
‫خاصية ‪ ، boolean attribute‬ووجودها ي‬
‫‪HTML Elements‬‬ ‫‪110‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫العنرص يف بداية تحميل الصفحة أو عند االنتقال للنموذج‪.‬‬

‫‪checked‬‬
‫خاصية للنوع ‪ checkbox‬والنوع ‪ ، radio‬تعرض العنرص وقد تم اختياره تلقائيا عند‬
‫تحميل الصفحة ‪.‬‬
‫‪dirname‬‬
‫بتعيي الخاصية ‪dirname‬‬
‫ر‬ ‫خاصية تحدد اتجاه عنرص <‪ >input‬عند اعتماده ويتم ذلك‬
‫للنوع ‪ text‬أو النوع ‪ search‬ويسند لها قيمة عبارة عن اسم العنرص (وهو قيمة الخاصية‬
‫‪ )name‬متبوعا بالالحقة ‪ ،dir‬فإذا كان اسم العنرص ‪ yr_name‬فتكون قيمة الخاصية‬
‫التال‪:‬‬
‫ه ‪ yr_name.dir‬كما بالكود ي‬ ‫‪ dirname‬ي‬
‫>‪<form‬‬
‫"‪<input type="text" name="yr_name" value="user‬‬
‫>"‪dirname="yr_name.dir‬‬
‫>"‪<input type="submit" value="Send‬‬
‫>‪</form‬‬
‫جزئي‪ ،‬بينهما ك&ك ‪ ،‬ويكون الجزء األول هو‬
‫ر‬ ‫وعند اعتماد النموذج يتم قبول البيانات عىل‬
‫الثاب هو قيمة الخاصية‬
‫قيمة الخاصية ‪ ، name‬مسند إليها قيمة الخاصية ‪ ، value‬والجزء ي‬
‫التال‪:‬‬
‫‪ ، dirname‬مسند إليها اتجاه العنرص من النوع ري ‪ text‬أو ‪ ، search‬كما بالشكل ي‬

‫الحظ رشيط العنوان‪ ،‬وكيفية قبول البيانات بعد اعتمادها‪ ،‬والحظ أن حقل االسم تحول‬
‫الن تم إدخالها‪.‬‬
‫إل القيمة االفثاضية‪ ،‬بعد اعتماد البيانات ي‬
‫‪form‬‬
‫الحال وليكن ‪ ، A‬أو داخل نموذج آخر وليكن‬
‫ي‬ ‫خاصية تسمح لعنرص موجود خارج النموذج‬
‫‪ ، B‬باالرتباط بالنموذج ‪ A‬عن طريق إسناد قيمة المعرف الفريد ‪ id‬للنموذج ‪ ، A‬كقيمة‬
‫وبالتال عند اعتماد هذا النموذج ‪ ، A‬يتم قبول‬
‫ي‬ ‫الن تم تعيينها لهذا العنرص‪،‬‬
‫للخاصية ‪ form‬ي‬
‫مدخالت هذا العنرص ‪ ،‬كما لوكان عنرصا من عناص النموذج ‪. A‬‬
‫‪HTML Elements‬‬ ‫‪111‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<form id="user_info">
Name:<br><input type="text" name="user_name"><br>
Age:<br><input type="number"><br>
Skills:<br><input type="checkbox">HTML
<input type="checkbox">CSS
<input type="checkbox">Javascript
<input type="checkbox">Bootstrap<br>
<input type="submit" value="Finish" >
</form><hr>
Decision:
<input type="radio" name="dec" form="user_info"> Aaccepted
<input type="radio" name="dec" form="user_info"> Not_accepted
‫الحظ أن الحقول بعد وسم إغالق‬
‫ يتم اعتمادها عند اعتماد‬، >form< ‫العنرص‬
،‫ بالرغم من وقوعها خارجه‬،‫بيانات النموذج‬
‫وذلك الرتباطها به عن طريق الخاصية‬
. form

disabled
.‫وبالتال ال يستطيع المستخدم التعامل معه‬
‫ي‬ ‫غث فعال‬
‫خاصية تجعل العنرص ر‬
Name:<br><input type="text" name="user_name"><br>
Password:<br><input type="password" disabled >
‫> من النوع‬input< ‫الحظ أن العنرص‬
‫ وال يمكن‬،‫وغث فعال‬
‫ر‬ ‫ ظهر باهتا‬password
.‫للمستخدم التعامل معه‬

formaction
image ‫بالنوعي‬
‫ر‬ ‫> وتختص‬form< ‫الن تم رشحها يف العنرص‬
‫ ي‬action ‫وه نفس الخاصية‬
‫ي‬
. submit ‫و‬
HTML Elements 112 [email protected]
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪formenctype‬‬
‫بالنوعي‬
‫ر‬ ‫الن تم رشحها يف العنرص <‪ ، >form‬وتختص‬
‫وه نفس الخاصية ‪ enctype‬ي‬ ‫ي‬
‫‪ image‬و ‪. submit‬‬
‫‪formnovalidate‬‬
‫بالنوعي‬
‫ر‬ ‫الن تم رشحها يف العنرص <‪ ، >form‬وتختص‬
‫وه نفس الخاصية ‪ novalidate‬ي‬‫ي‬
‫‪ image‬و ‪. submit‬‬
‫‪formmethod‬‬
‫بالنوعي‬
‫ر‬ ‫الن تم رشحها يف العنرص <‪ ، >form‬وتختص‬
‫وه نفس الخاصية ‪ method‬ي‬‫ي‬
‫‪ image‬و ‪.submit‬‬
‫‪formtarget‬‬
‫بالنوعي‬
‫ر‬ ‫الن تم رشحها يف العنرص <‪ ، >form‬وتختص‬
‫وه نفس الخاصية ‪ target‬ي‬‫ي‬
‫‪ image‬و ‪.submit‬‬
‫‪height‬‬
‫خاصية تحدد ارتفاع العنرص وتستخدم مع النوع ‪. image‬‬
‫‪list‬‬
‫خاصية تربط ربي عنرص إدخال وقائمة منسدلة من العنرص >‪ ، <datalist‬فعند وضع‬
‫ر‬
‫المؤش داخل العنرص‪ ،‬تفتح القائمة الختيار أحد بنودها‪ ،‬وذلك عن طريق إسناد قيمة المعرف‬
‫الن يتم تعيينها لعنرص اإلدخال‪.‬‬
‫الفريد لهذه القائمة‪ ،‬كقيمة للخاصية ‪ list‬ي‬
‫‪max‬‬
‫معي‪ ،‬مثل ‪ number‬و ‪. range‬‬
‫خاصية تحدد أعىل قيمة يتم إسنادها لنوع ر‬
‫‪min‬‬
‫معي‪ ،‬مثل ‪ number‬و‪. range‬‬
‫خاصية تحدد أقل قيمة يتم إسنادها لنوع ر‬
‫‪HTML Elements‬‬ ‫‪113‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪maxlength‬‬
‫الن سيتم إدخالها إل العنرص‪.‬‬
‫خاصية تحدد أقص عدد ممكن من الحروف ي‬
‫‪minlength‬‬
‫الن سيتم إدخالها إل العنرص ‪.‬‬
‫خاصية تحدد أقل عدد ممكن من الحروف ي‬
‫‪multiple‬‬
‫خاصية تسمح للعنرص من النوع ‪ file‬أن يقوم باختيار ر‬
‫أكث من ملف للتحميل‪ ،‬وتسمح‬
‫وب‪.‬‬ ‫ر‬
‫للنوع ‪ email‬بإدخال أكث من بريد إلكث ي‬
‫‪name‬‬
‫خاصية تحدد اسم النوع‪ ،‬وترجع أهمية هذه الخاصية الستخدام قيمتها يف اعتماد‬
‫النموذج‪ ،‬باإلضافة إل أنها تربط عناص النوع ‪ radio‬يف مجموعة واحدة‪.‬‬
‫‪pattern‬‬
‫خاصية تسند إليها قيمة عبارة عن عينة ‪ regular expression‬تستخدم لمطابقة‬
‫وب‪.‬‬
‫معي مع هذه العينة‪ ،‬مثل عينة محددة لكلمة الش أو الثيد اإللكث ي‬
‫مدخالت عنرص ر‬
‫‪placeholder‬‬
‫خاصية إدخال تلميح يوضح للمستخدم طبيعة البيانات المطلوب إدخالها‪.‬‬
‫‪readonly‬‬
‫خاصية تجعل العنرص معروضا للقراءة فقط‪ ،‬وال يمكن التعديل عليه بأي وسيلة‪ ،‬لذلك‬
‫تعيي الخاصية ‪ value‬للعنرص‪ ،‬حن تعرض قيمتها داخله‪.‬‬
‫يجب أن يتم ر‬
‫‪required‬‬
‫خاصية تفيد أن العنرص مطلوب إدخاله‪ ،‬وبدونه لن يتم اعتماد أو عمل ‪ submit‬للنموذج‪،‬‬
‫الذي يحتوي هذا العنرص‪.‬‬
‫‪size‬‬
‫الن ستظهر من المدخالت‪.‬‬
‫خاصية تحدد عرض العنرص‪ ،‬مقدرا بعدد األحرف ي‬
‫‪HTML Elements‬‬ ‫‪114‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪spellcheck‬‬
‫ئ‬
‫هجاب‪ ،‬ويسند لها ثالث قيم‪:‬‬
‫ي‬ ‫الن بها خطأ‬
‫خاصية تحدد إمكانية تحديد الكلمات ي‬
‫تعن إمكانية فحص النص وإظهار مواضع األخطاء‪.‬‬
‫‪ : true -‬قيمة ي‬
‫وبالتال تجاهل مواضع األخطاء‪.‬‬
‫ي‬ ‫تعن عدم فحص النص‬‫‪ : false -‬قيمة ي‬
‫تعن أن الخاصية يسند إليها نفس قيمة الخاصية للعنرص األب‪.‬‬
‫‪ : default -‬قيمة ي‬
‫‪src‬‬
‫خاصية تحدد مسار أو مصدر الصورة للعنرص من النوع ‪. image‬‬
‫‪step‬‬
‫خاصية تحدد حجم خطوة االنتقال ألعىل أو ألسفل‪ ،‬ربي قيم العنرص من النوع ‪number‬‬
‫أو ‪ range‬أو ‪ date‬أو ‪ time‬أو ‪ month‬أو ‪. week‬‬
‫‪value‬‬
‫خاصية تسند للعنرص قيمة مبدأية عند تحميل الصفحة‪ ،‬تظهر داخل العنرص إذا كان نوع‬
‫العنرص مربــع إدخال‪ ،‬أو تظهر القيمة مكتوبة فوقه‪ ،‬إذا كان النوع زرا ‪.‬‬
‫‪width‬‬
‫خاصية تحدد عرض الصورة المستخدمة يف النوع ‪. image‬‬

‫تأثث ها عىل األنواع‬

‫بشء من التفصيل‪ ،‬ونعاين ر‬ ‫ر‬
‫وسوف ندرس هذه الخصائص مرة أخرى ي‬
‫المختلفة‪ ،‬عندما ن رشح أنواع العنرص <‪ >input‬بعد دراستنا للعنرص >‪. <label‬‬

‫‪HTML Elements‬‬ ‫‪115‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<label>….</label‬‬
‫عنرص يقوم بإضافة نص بعد أو قبل بعض عناص النموذج <‪ ، >form‬وباألخص أنواع‬
‫العنرص >‪ ، <input‬وهو يساعد برامج قراءة الشاشة يف التعرف عىل عنرص <‪ ، >form‬الذي‬
‫انتقل إليه المستخدم‪ ،‬كما أنه يزيد مساحة نشاط العنرص ‪ ،‬حيث إن النقر عليه ينشط العنرص‬
‫المرتبط به‪.‬‬
‫>‪<form‬‬
‫>‪<label for="nm">Name<br></label><input type="text" id="nm"> <br‬‬
‫>‪<label>Password<br><input type="password" name="pss"> </label‬‬
‫>‪</form‬‬

‫‪for‬‬
‫خاصية تربط ربي العنرص <‪ >label‬وعناص النموذج <‪ >form‬مثل أنواع العنرص‬
‫<‪ ، >input‬وذلك عن طريق إسناد قيمة الخاصية ‪ id‬لهذا العنرصكقيمة للخاصية ‪ for‬داخل‬
‫العنرص <‪. >label‬‬
‫الربط ربي العنرص <‪ >label‬وعناص >‪ <form‬مثل العنرص >‪<input‬‬
‫بطريقتي‪:‬‬
‫ر‬ ‫يتم الربط ربي العنرص <‪ >label‬و العنرص >‪ - <input‬عىل سبيل المثال ‪-‬‬
‫تعيي الخاصية ‪ for‬للعنرص <‪ ، >label‬ويسند لها قيمة خاصية المعرف الفريد‬ ‫األول‪ :‬يتم ر‬
‫‪ id‬للعنرص <‪ ، >input‬كما يف النوع ‪ text‬يف المثال السابق‪.‬‬
‫وسم البداية والنهاية للعنرص‬
‫ي‬ ‫الثانية‪ :‬يتم وضع عنرص النموذج أو العنرص >‪ <input‬ربي‬
‫<‪ ، >label‬كما يف النوع ‪ password‬يف المثال السابق أيضا‪.‬‬
‫مالحظات عىل استخدام العنرص <‪>label‬‬
‫‪HTML Elements‬‬ ‫‪116‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫وسم العنرص‬ ‫ي‬ ‫‪ -‬ال تضع أي عناص تفاعليه (مثل الروابط التشعبية أو األزرار) داخل‬
‫كث إل‬‫كث لوحة المفاتيح ‪ focus‬إل العنرص <‪ >label‬سينقل أيضا الث ر‬ ‫<‪ ، >label‬ألن انتقال تر ر‬
‫وبالتال سيصعب‬‫ي‬ ‫كث إليه‪،‬‬‫تلك العناص‪ ،‬باإلضافة إل العنرص <‪ >input‬وهو المطلوب نقل الث ر‬
‫التعامل مع كل هذه العناص النشطة دفعة واحدة‪.‬‬
‫وسم العنرص <‪ ، >label‬ألنه يستخدم كمساعد‬ ‫ي‬ ‫‪ -‬ال تضع أيا من عناص ‪ headings‬داخل‬
‫يف التنقل ربي أجزاء الصفحة يف برامج قراءة الشاشة‪.‬‬
‫وسم عنرص <‪ >label‬ألن‬ ‫ي‬ ‫‪ -‬النوع ‪ button‬أو ‪ submit‬أو ‪ reset‬ال تحتاج أن توضع داخل‬
‫وه قيمة الخاصية ‪. value‬‬
‫قيمتها توضع فوقها‪ ،‬ي‬
‫وسم عنرص‬‫ي‬ ‫‪ -‬العنرص >‪ <button‬والذي سنتناوله الحقا ‪ ،‬ال يحتاج أن يوضع داخل‬
‫الخاصي به‪.‬‬
‫ر‬ ‫وسم البداية والنهاية‬
‫ي‬ ‫<‪ >label‬ألن قيمة العنرص <‪ >button‬توضع ربي‬

‫‪HTML Elements‬‬ ‫‪117‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫أنواع العنرص <‪>input‬‬

‫ر‬
‫بشء‬
‫لقد درسنا أنواع العنرص <‪ >input‬بشكل مخترص‪ ،‬واآلن سوف نتناول هذه األنواع ي‬
‫من التفصيل‪.‬‬
‫‪button‬‬
‫نوع زر ‪ ،‬يقوم بتنفيذ وظيقة معينة‪ ،‬أو تنفيذ خطوات برمجية معينة‪ ،‬عند الضغط عليه‪،‬‬
‫الن تظهر عىل الزر ‪.‬‬
‫ه ي‬‫وقيمة الخاصية ‪ value‬ي‬
‫>‪<form‬‬
‫"‪Change color: <input type="button" value="Change color‬‬
‫>‪onclick="style='color: yellow; background-color: blue'"><br><br‬‬
‫"‪Hide button: <input type="button" value="Hide me‬‬
‫>"'‪onclick="style='display: none‬‬
‫>‪</form‬‬

‫ه قيمة الخاصية ‪ value‬لكل منهما‪.‬‬‫الن ظهرت عىل الزرين‪ ،‬ي‬ ‫الحظ أن القيمة ي‬
‫وه خاصية تقوم بتنفيذ وظيفة معينة‬‫بتعيي الخاصية ‪ onclick‬لكل زر ‪ ،‬ي‬‫ر‬ ‫الحظ أننا قمنا‬
‫وه إحدى خصائص الحدث ‪. event attibutes‬‬ ‫عند الضغط عىل الزر ‪ ،‬ي‬
‫تغيث تنسيق العنرص األول‪ ،‬وإخفاء‬
‫ر‬ ‫ه‬
‫الن أسندناها للخاصية ‪ ، onclick‬ي‬ ‫والوظيفة ي‬
‫الثاب‪ ،‬باستخدام ‪. css‬‬
‫العنرص ي‬
‫قم بتنفيذ الكود كما هو‪ ،‬وال تنشغل بفهم محتواه حاليا‪ ،‬عندما تدرس ‪ css‬سوف تستوعبه‬
‫وه‬
‫بسهولة‪ ،‬عليك فقط أن تدرك طبيعة وظيفة النوع ‪ button‬من العنرص <‪ ، >input‬ي‬
‫تنفيذ خطوات أو وظيفة معينة عند الضغط عليه‪.‬‬

‫‪HTML Elements‬‬ ‫‪118‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

checkbox
‫التأشث عىل‬
‫ر‬ ‫ ويتيح هذا النوع‬،‫التأشث داخله‬
‫ر‬ ‫ يكون اإلدخال فيه عن طريق‬،‫مربــع اختيار‬
‫ أو التأشث عىل ر‬،‫اختيار واحد‬
.‫أكث من اختيار‬ ‫ر‬
<form>
<h3>Your browser</h3>
<input type="checkbox" id="ffx" name="browser" value="first">
<label for="ffx"> Firefox</label><br>
<input type="checkbox" id="chm" name="browser" value="second"
checked><label for="chm">Chrome</label><br>
<input type="checkbox" id="opr" name=" browser " value="third"> <label
for="opr"> Opera</label><br><br>
<input type="submit" value="Submit">
</form>

checked
‫خاصية تقوم بعرض عنرص أو ر‬
‫ الحظ أن‬،‫ وقد تم اختيارهم عند تحميل الصفحة‬، ‫أكث‬
.‫ له‬checked ‫تعيي الخاصية‬
‫ نظرا ل ر‬،‫ تم اختياره تلقائيا‬Chrome ‫العنرص‬

Before checking Checking After submit

HTML Elements 119 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫السثفر مع كل اختيار له قيمة للخاصية ‪name‬‬

‫ر‬ ‫عند عمل ‪ submit‬للـ ‪ ، form‬يتعامل‬
‫وف حالة االختيار األول عىل سبيل المثال‪ ،‬يكون االسم والقيمة‬
‫وقيمة للخاصية ‪ ، value‬ي‬
‫كاآلب ‪. browser=first‬‬
‫ي‬

‫‪Before submitting‬‬

‫‪After submitting‬‬

‫وف حالة عدم‬

‫السثفر االسم والقيمة لالختيارات المنتقاة‪ ،‬أي ‪ checked‬فقط‪ ،‬ي‬
‫ويعتمد ر‬
‫تعيي الخاصية ‪ value‬داخل العنرص الذي تم اختياره‪ ،‬تكون القيمة االفثاضية للخاصية‬‫ر‬
‫ه ‪. on‬‬
‫‪ value‬لهذا العنرص‪ ،‬ي‬

‫‪first item checked but has no value attribute‬‬

‫‪HTML Elements‬‬ ‫‪120‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪color‬‬
‫مربــع اختيار األلوان‪.‬‬
‫>‪<form‬‬
‫>‪<label for="clr"> Choose a color </label‬‬
‫> "‪<input type="color" id="clr" value="#AB5D9F‬‬
‫>‪</form‬‬
‫الحظ أن مربــع األلوان‪ ،‬يختلف يف الشكل من متصفح آلخر‪.‬‬

‫‪Google chrome‬‬ ‫‪Mozilla Firefox‬‬

‫تعيي الخاصية ‪ value‬للنوع ‪color‬‬

‫ر‬
‫‪value‬‬
‫اَ لمربــع األلوان‪ ،‬وتقبل قيمتها بالصيغة السداس‬
‫خاصية تقوم باختيار اللون االفث ي‬
‫عشية‪ ،‬حيث يمثل كل‬ ‫عشية فقط‪ ،‬وه قيمة تمثل فيها األلوان الثالثة ‪ rgb‬بقيم سداس ر‬ ‫ر‬
‫ي‬
‫حرفي من ‪ A – F‬أو حرف ورقم‪ ،‬ليكون لدينا تركيبة لون من ستة‬
‫ر‬ ‫برقمي من ‪ 9 - 0‬أو‬
‫ر‬ ‫لون‬
‫حروف وأرقام‪ ،‬عىل أن يسبق الحروف واألرقام الستة رمز ك‪#‬ك ‪.‬‬
‫اختيار اللون من مربــع األلوان‬
‫يتم اختيار اللون من خالل مربــع األلوان‪ ،‬بإدخال القيم بعدة طرق‪:‬‬
‫‪ -‬بسحب المثلق عىل رشيط األلوان الختيار اللون‪ ،‬ثم النقر بمفتاح الفأرة األيش عىل‬
‫‪HTML Elements‬‬ ‫‪121‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬
‫درجة اللون المطلوبة يف مربــع األلوان‪.‬‬
‫‪ -‬ادخال القيم العددية لأللوان الثالثة )‪. rgb(0-255, 0-255, 0-255‬‬
‫‪ -‬إدخال القيم السداس ر‬
‫عشية لأللوان الثالثة ( ‪. )A-F & 9-0‬‬
‫‪ -‬إدخال قيم المكونات الثالث )‪. hsl (0-255,0-100,0-100‬‬
‫إذا كان لديك معرفة مسبقة بنظام األلوان يف ‪ ، css‬فعليك أن تعلم أن نظام األلوان يف‬
‫‪ html‬يختلف عنه‪ ،‬فال يتم استخدام درجة الشفافية ‪ alpha‬يف ‪ ، html‬حن ال تصبح‬
‫غث صحيحة‪ ،‬سيؤدي ذلك لظهور‬ ‫وف حالة إدخال اللون بطريقة ر‬ ‫غث صحيحة‪ ،‬ي‬ ‫القيمة ر‬
‫ً‬
‫اللون األسود بديال عن اللون الذي تم اختياره‪.‬‬
‫ه قيمة رابعة تضاف بعد قيم األلوان الثالثة يف ‪. css‬‬ ‫‪ alpha -‬أو الشفافية ي‬

‫‪HTML Elements‬‬ ‫‪122‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪date‬‬
‫مربــع إدخال التاري ــخ‪ ،‬ويتكون من اليوم والشهر والعام‪.‬‬
‫>‪<form‬‬
‫>‪<label for="today">Date: </label‬‬
‫"‪<input type="date" id="today" name="today" step="5‬‬
‫>"‪min="2019-10-31" max="2022-12-31" value="2020-08-19‬‬
‫>"‪<input type="submit‬‬
‫>‪</form‬‬
‫الحظ أن قيم التواري ــخ تبدأ من اليسار‪ )yyyy-mm-dd( ،‬بالعام ثم الشهر ثم اليوم‪ ،‬عىل أن‬
‫وف حالة وجود رقم واحد (آحاد)‪ ،‬يتم‬ ‫رقمي‪ ،‬ي‬‫يتكون العام من أربعة أرقام‪ ،‬والشهر واليوم من ر‬
‫غث صحيحة‪،‬‬ ‫إضافة ‪ 0‬إل يسار هذا اليوم أو الشهر‪ ،‬وأي قيمة خالف ذلك‪ ،‬ستصبح القيم ر‬
‫ولن تعرض قيمة الخاصية ‪ value‬االفثاضية يف مربــع اإلدخال‪ ،‬أو لن يكون للتاري ــخ قيمة‬
‫صغرى أو قيمة كثى أو خطوة تنقل ‪. step‬‬
‫الحظ أن عرض التاري ــخ يختلف عند العرض يف المتصفح‪ ،‬حيث تبدأ القيم من اليسار‬
‫بالشهر ثم اليوم ثم العام (‪.)mm-dd-yyyy‬‬
‫تعيي عدة خصائص للنوع ‪: date‬‬
‫ويمكن ر‬
‫‪value‬‬
‫الن تظهر‬
‫خاصية تحدد القيمة االفثاضية ي‬
‫عند فتح مربــع التاري ــخ‪ ،‬ويجب أال تتخط قيمة‬
‫الخاصية ‪ ، max‬وال تقل عن قيمة الخاصية‬
‫‪ ، min‬وإال فإنه لن يتم اعتماد النموذج وستظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪max‬‬
‫خاصية تحدد أقص تاري ــخ ال يمكن تخطيه‪،‬‬
‫أو إدخال أي تاري ــخ بعده‪ ،‬ويجب أال تقل قيمة‬
‫هذه الخاصية عن قيمة الخاصية ‪ ، min‬وإال‬
‫فإنه لن يتم اعتماد النموذج‪ ،‬وستظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪HTML Elements‬‬ ‫‪123‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪min‬‬
‫خاصية تحدد أدب تاري ــخ ال يمكن‬
‫الثول عنه‪ ،‬أو إدخال أي تاري ــخ قبله‪،‬‬
‫ويجب أال تزيد قيمتها عن قيمة‬
‫الخاصية ‪ ، max‬وإال فإنه لن يتم‬
‫اعتماد النموذج وستظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪step‬‬
‫خاصية تحدد خطوة التنقل ربي‬
‫باف األيام‬
‫األيام النشطة‪ ،‬حيث تظهر ي‬
‫غث فعالة‪ ،‬وال يمكن إدخالها‪ ،‬وقيمة‬ ‫ر‬
‫الخاصية تكون رقما يمثل الفثة باأليام‪،‬‬
‫غث فعالة عن طريق لوحة المفاتيح‪ ،‬فلن يتم اعتماد النموذج‬‫وإذا تم إدخال أي قيمة بينية ر‬
‫وتعن أن كل األيام نشطة‬
‫ي‬ ‫وستظهر رسالة تنبيه بهذا الخطأ‪ ،‬وقد تقبل الخاصية القيمة ‪any‬‬
‫ومتاح التعامل معها‪.‬‬

‫‪value‬‬ ‫‪step‬‬
‫الحظ يف الشكل األول عىل اليسار‪ ،‬وقد ظهرت فيه القيمة االفثاضية عند فتح مربــع‬
‫اليمي‪ ،‬قد‬
‫الثاب عىل ر‬
‫حي أن الشكل ي‬ ‫التاري ــخ‪ ،‬وكل األيام نشطة‪ ،‬حيث يمكن اختيار أي منها‪ ،‬يف ر‬
‫وه قيمة الخاصية ‪. step‬‬ ‫بدت األيام نشطة كل خمسة أيام‪ ،‬ي‬
‫‪HTML Elements‬‬ ‫‪124‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪datetime-local‬‬
‫نوع يقوم بإدخال التاري ــخ والوقت‪ ،‬عىل أن يكتب التاري ــخ بنفس الصيغة السابق رشحها يف‬
‫الثواب‬
‫ي‬ ‫كبث‪ ،‬ثم الساعة تليها الدقائق ثم‬
‫وبي الوقت بحرف ك‪T‬ك ر‬ ‫النوع ‪ ، date‬ثم يفصل بينه ر‬
‫لثواب ك‪.‬ك عىل أن تكتب الساعات‬
‫وبي ا ي‬ ‫عىل أن يفصل بينها ك‪:‬ك ثم أجزاء الثانية ويفصل بينها ر‬
‫رقمي‪ ،‬وأجزاء الثانية من رقم إل ثالثة‪ ،‬ويعرض عىل هيئة ثالثة أرقام‪،‬‬ ‫ر‬ ‫والثواب من‬
‫ي‬ ‫والدقائق‬
‫عىل أن يعرض التاري ــخ بنفس ترتيب النوع السابق ‪ date‬يلحقه حرف ك‪T‬ك ‪ ،‬ثم الساعات ثم‬
‫غث مسموح بها ربي أجزاء القيمة‪،‬‬ ‫الثواب ثم أجزاء الثانية‪ ،‬والمسافات الفارغة ر‬
‫ي‬ ‫الدقائق ثم‬
‫الثواب‪.‬‬
‫ي‬ ‫الثواب وأجزاء‬
‫ي‬ ‫ويمكن االستغناء عن‬
‫>‪<form‬‬
‫>‪<label for="dtloacl"> Date and time: </label‬‬
‫"‪<input type="datetime-local" id="dtlocal" step="172800‬‬
‫>"‪max="2022-10-21T14:30:45.929" value="2020-08-19T18:24:52.929‬‬
‫>‪</form‬‬

‫وه ‪ value‬و ‪ max‬و ‪ min‬و ‪، step‬‬ ‫تعيي نفس خصائص النوع ‪ date‬لهذا النوع ي‬‫ويمكن ر‬
‫الخاصيتي ‪ min‬و ‪ max‬يظهر عىل التاري ــخ دون الوقت‪ ،‬والخاصية ‪step‬‬
‫ر‬ ‫تأثث‬
‫مع العلم أن ر‬
‫يومي‪.‬‬
‫الثواب فالقيمة ‪ 172800‬تمثل ر‬‫ي‬ ‫تقبل قيمتها‪ ،‬عىل هيئة عدد‬

‫غث مدعوم يف متصفح ‪. Firefox‬‬

‫هذا النوع ر‬

‫‪HTML Elements‬‬ ‫‪125‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪email‬‬
‫وب‪.‬‬
‫لمعايث الثيد اإللكث ي‬
‫ر‬ ‫نوع مخصص إلدخال نص مطابق‬
‫>‪<form‬‬
‫>‪<label for="mail">E-mail: </label‬‬
‫‪<input type="email" id="mail" name="mail" size="30" multiple‬‬
‫>"‪placeholder=" your email" maxlength="25" minlength="15‬‬
‫>"‪<input type="submit" value="Submit email‬‬
‫>‪</form‬‬

‫عايث‪ ،‬وإذا لم يكن مستوفيا لها‪،‬‬

‫بعد إدخال النص يقوم المتصفح بالتحقق من مطابقته للم ر‬
‫وب صحيح أو موجود بالفعل‪،‬‬ ‫تعن أن الثيد اإللكث ي‬
‫للمعايث ال ي‬
‫ر‬ ‫تظهر رسالة تنبيه‪ ،‬والمطابقة‬
‫ه مجرد مطابقة للتنسيقات والمواصفات الشكلية فقط‪.‬‬ ‫إنما ي‬

‫والنوع ‪ email‬يقبل عدة أنواع من الخصائص‪:‬‬

‫‪minlength‬‬
‫خاصية تحدد أقل عدد من‬
‫الن يمكن للمستخدم‬
‫الحروف‪ ،‬ي‬
‫إدخالها‪ ،‬وتكون القيمة عددا‬
‫صحيحا موجبا‪ ،‬وإدخال عدد‬
‫حروف أقل‪ ،‬لن يسمح باعتماد النموذج‪ ،‬وستظهر رسالة تنبيه بهذا الخطأ‪.‬‬

‫‪maxlength‬‬
‫الن يمكن للمستخدم إدخالها وتكون القيمة عددا‬
‫خاصية تحدد أقص عدد من الحروف ي‬
‫‪HTML Elements‬‬ ‫‪126‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫صحيحا موجبا‪ ،‬ولن يسمح بإدخال عدد حروف أكث من قيمة الخاصية‪.‬‬
‫يجب أن تكون قيمة الخاصية ‪ ، maxlength‬أكث من أو تساوي قيمة الخاصية‬
‫وبالتال‪ ،‬فقيمة الخاصية ‪ minlength‬يجب أن تكون أصغر من أو تساوي‬
‫ي‬ ‫‪، minlength‬‬
‫قيمة الخاصية ‪ ، maxlength‬وإال فإن المدخالت لن يتم اعتمادها‪ ،‬ألنك لن تستطيع‬
‫لتستوف قيمة الخاصية ‪ ، minlength‬ولن‬
‫ي‬ ‫إدخال قيمة أكث من قيمة ‪، maxlength‬‬
‫لتستوف قيمة الخاصية ‪. maxlength‬‬
‫ي‬ ‫تسطيع إدخال قيمة أقل من قيمة ‪، minlength‬‬

‫‪size‬‬
‫الن ستظهر من المدخالت‪،‬‬ ‫خاصية تحدد عرض عنرص اإلدخال مقدرا بعدد الحروف‪ ،‬ي‬
‫ويمكن لقيمة الخاصية ‪ maxlength‬أن تكون أكث من قيمة هذه الخاصية‪ ،‬ألن مفهوم‬
‫عن أنه ال يمكن إدخال عدد حروف أكث من قيمة الخاصية ‪، maxlength‬‬ ‫الخاصية ‪ size‬ال ي ي‬
‫تعن أنها ستعرض عددا معينا من الحروف‪ ،‬سواء كان أكث أو أصغر من قيمتها‪ ،‬فإذا كانت‬
‫ي‬ ‫وإنما‬
‫ً‬
‫قيمة الخاصية ‪ size‬أكث من قيمة الخاصية ‪ maxlength‬فستقوم بعرض المدخل كامال‪،‬‬
‫باف مساحة العنرص فارغة‪ ،‬وإذا كانت قيمتها أقل‪ ،‬فستعرض عددا من حروف المدخل‬ ‫وتعرض ي‬
‫باف الحروف‪.‬‬
‫يساوي قيمتها‪ ،‬ثم تقوم بإخفاء ي‬

‫الحظ اختفاء جزء من النص ألن عدد حروفه أكث من قيمة الخاصية ‪. size‬‬
‫‪multiple‬‬
‫وب بينها فاصلة‪.‬‬ ‫إلكث‬ ‫بريد‬ ‫من‬ ‫خاصية تسمح بإدخال ر‬
‫أكث‬
‫ي‬

‫‪placeholder‬‬
‫خاصية تقوم بكتابة تلميح داخل العنرص‪ ،‬لتوضيح نوع البيانات المطلوب إدخالها يف هذا‬
‫ر‬
‫المؤش داخل العنرص‪.‬‬ ‫يختق هذا التلميح عند وضع‬ ‫الحقل‪ ،‬عىل أن‬
‫ي‬
‫غث محسوسة لثامج قراءة الشاشة وقد تتجاهلها برامج الثجمة الفورية‪.‬‬
‫الخاصية ر‬
‫‪HTML Elements‬‬ ‫‪127‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪pattern‬‬
‫معي‪ ،‬يجب أن يتطابق معها النص الذي يتم إدخاله يف‬‫خاصية تحدد عينة ذات تنسيق ر‬
‫العنرص‪ ،‬وهذه العملية تعرف عىل نطاق واسع‪ ،‬يف لغات الثمجة باسم ‪regular‬‬
‫الكثث من لغات‬
‫ر‬ ‫‪ expressions‬حيث إن لها أسسا وقواعد تنظمها‪ ،‬وتتشابه هذه القواعد يف‬
‫الثمجة‪ ،‬وتختلف فيما بينها اختالفات بسيطة‪.‬‬
‫>‪<form‬‬
‫>‪<label for="mail">E-mail: </label‬‬
‫"‪<input type="email" id="mail" name="mail‬‬
‫>")‪pattern=".+@.+\.(com|org|net‬‬
‫>"‪<input type="submit" value="Submit email‬‬
‫>‪</form‬‬

‫الحظ أن المتصفح يعرض رسالة تنبيه‪ ،‬توضح عدم مطابقة النص الذي تم إدخاله للعينة‬
‫الن تم وضعها للمطابقة‪.‬‬
‫ي‬

‫توضيح مدلول العينة ك)‪.+@.+\.(com|org|net‬ك‬

‫ر‬
‫ك‪.‬ك النقطة منفردة ال تسبقها شطة مائلة ي‬
‫تعن حرفا واحدا أو رقما واحدا‪.‬‬
‫أكث من الرمز قبلها وهو ك‪.‬ك ‪.‬‬ ‫ك‪+‬ك تعن واحدا أو ر‬
‫ي‬
‫ك@ك رمز مطلوب إدخاله بعد الحروف أو األرقام أو خليط منهما قبله‪ ،‬ثم يتم‬
‫إدخال عدد آخر من الحروف أواألرقام أو مزيـ ــج منهما بعده‪.‬‬
‫للتعبث عن النقطة كنقطة وليس أي حرف أو رقم‪.‬‬
‫ر‬ ‫ك‪\.‬ك‬
‫(‪ )com|org|net‬أي يجب أن تكون نهاية قيمة المدخل قيمة اختيارية من أي‬
‫منهم‪.‬‬
‫‪HTML Elements‬‬ ‫‪128‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

readonly
‫ وإنما تسمح فقط بقراءة نص تم إدخاله‬،‫خاصية ال تسمح بإدخال أي نص يف العنرص‬
،‫وف حالة وجود هذه الخاصية فال حاجة وال معن‬
‫ ي‬، value ‫ عن طريق قيمة الخاصية‬،‫تلقائيا‬
.‫لتعيي أي من الخصائص السابقة‬
‫ر‬
<form>
<label>E-mail: <input type="email" id="mail" name="mail" readonly
value="[email protected]"></label>
<input type="submit" value="Submit email">
</form>

HTML Elements 129 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪file‬‬
‫معي أو‬
‫نوع مخصص لتحميل ملف أو عدة ملفات من حاسوبك‪ ،‬إل خادم أو ‪ server‬ر‬
‫معي‪ ،‬عند اعتماد النموذج‪.‬‬
‫برمج ر‬
‫ي‬ ‫إجراء معالجة خاصة لهذه الملفات‪ ،‬بواسطة نص‬
‫>‪<form‬‬
‫>‪<label for="fl">upload: </label‬‬
‫>‪<input type="file" accept="image/png, video/*" multiple‬‬
‫>‪</form‬‬

‫وه‪:‬‬
‫تعيي عدة خصائص للنوع ‪ file‬ي‬
‫ويمكن ر‬
‫‪accept‬‬
‫تعيي‬
‫وف حالة ر‬
‫الن يمكن تحميلها باستخدام النوع ‪ ، file‬ي‬
‫خاصية تحدد أنواع الملفات ي‬
‫الخاصية ‪ ، multiple‬يمكن تحديد ر‬
‫أكث من نوع‪ ،‬يفصل بينهم ك‪,‬ك ‪.‬‬
‫كيفية تحديد أنوع الملفات‬
‫معي‪ ،‬أيا كان اسم الملف‪ ،‬وذلك بكتابة نقطة يتبعها امتداد‬
‫‪ -‬تحديد نوع ملفات ذات امتداد ر‬
‫الملف‪ ،‬ويكون بهذا الشكل‪ :‬ك‪.doc, .pdf, .mp4, .mp3, .jpg‬ك‬
‫معي‪ ،‬يفصل بينهما رشطة مائلة بهذا الشكل‪:‬‬
‫معي من الملفات‪ ،‬بامتداد ر‬
‫‪ -‬تحديد نوع ر‬
‫ك‪audio/mp3, video/mp4, applicatin/pdf, image/png‬ك‪.‬‬
‫معي من الملفات‪ ،‬وأي امتداد لهذا النوع بهذا الشكل‪:‬‬
‫‪ -‬تحديد نوع ر‬
‫ك*‪image/*, audio/*, video/*, application/‬ك‪.‬‬
‫الن تهم مطوري الويب‪:‬‬
‫ومن أنواع الملفات ي‬
‫ك‪text/html, text/css, text/javascript‬ك‪.‬‬

‫‪capture‬‬
‫الكامثا أو الميكروفون‪ ،‬الذين يستخدمان يف التقاط الصورة‪ ،‬أو ملف الفيديو‪،‬‬
‫ر‬ ‫خاصية تحدد‬
‫أو ملف الصوت لتحميله‪ ،‬إذا كان نوع الملف من األنواع المحددة يف قيمة الخاصية ‪. accept‬‬
‫‪HTML Elements‬‬ ‫‪130‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪multiple‬‬
‫خاصية تسمح للنوع ‪ file‬باختيار وتحديد ر‬
‫أكث من ملف لتحميلهم سويا‪.‬‬

‫‪HTML Elements‬‬ ‫‪131‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪hidden‬‬
‫نوع مخصص إلرسال قيمة مخفاة عن المستخدم‪ ،‬للخادم أو ‪ server‬أو لصفحة أخرى‪،‬‬
‫بعد اعتماد النموذج الذي يحتوي هذا النوع‪.‬‬
‫>‪<form‬‬
‫>‪<label>User</label><br><input type="text" name="usr"><br‬‬
‫>‪<label>Password</label><br‬‬
‫>‪<input type="hidden" value="pswrd" name="pass"><br‬‬
‫>"‪<input type="submit" value="Login‬‬
‫>‪</form‬‬
‫الحظ أن الحقل ‪ User‬ظاهر للمستخدم ألنه من‬
‫مخق ألنه من‬
‫ي‬ ‫النوع ‪ text‬بينما الحقل ‪Password‬‬
‫النوع ‪. hidden‬‬

‫الن يتم إرسالها مخفاة عن المستخدم‪ ،‬وال تظهر يف جسم الصفحة‪ ،‬إال‬
‫وإن كانت القيمة ي‬
‫الن يستخدمها كل مطوري الويب‪ ،‬وأبسطها‪،‬‬ ‫أنه يمكن معاينتها‪ ،‬باستخدام أدوات التطوير ي‬
‫الضغط عىل الصفحة بالزر األيمن للفأرة‪ ،‬ثم الضغط عىل األمر ‪ inspect‬وتحت التبويب‬
‫الن تم‬
‫‪ elements‬ستجد كود ‪ html‬الخاص بالصفحة‪ ،‬وبداخله العنرص ‪ ، hidden‬وقيمته ي‬
‫التال‪:‬‬
‫إخفاؤها عن المستخدم‪ ،‬كما بالشكل ي‬

‫‪HTML Elements‬‬ ‫‪132‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫المخق‪ ،‬إذا كان‬

‫ي‬ ‫طريقة أخرى للتعرف عىل قيمة الحقل‬
‫تعيي الخاصي رتي ‪ name‬و ‪value‬‬‫الحقل ‪ Password‬قد تم ر‬
‫له كما يف المثال السابق‪ ،‬فعند ملء الحقل ‪ User‬ثم الضغط‬
‫عىل الزر ‪ Login‬يظهر يف رشيط العنوان ‪، address bar‬‬
‫ه قيمة الخاصية‬ ‫الن تم اعتمادها‪ ،‬و ي‬
‫أسماء وقيم العناص ي‬
‫‪ name‬مسندا إليها قيمة الخاصية ‪ ، value‬حن وإن كان هذا العنرص من النوع ‪، hidden‬‬
‫التال‪:‬‬
‫الخاصيتي له كما يف الشكل ي‬
‫ر‬ ‫تعيي‬
‫طالما تم ر‬

‫هذه الطريقة ال تصلح دائما‪ ،‬ألن ظهور القيم يف رشيط العنوان من عدمه‪ ،‬يعتمد عىل‬
‫قيمة الخاصية ‪ method‬للنموذج‪ ،‬أو الخاصية ‪ formmethod‬لنوع عنرص اإلدخال‬
‫وشح قيم الخاصية ملحق ‪. 1‬‬ ‫> ‪ < input‬ر‬

‫استخدامات النوع ‪hidden‬‬

‫لتحسي أمان المواقع‪ ،‬حيث يتم تخزين رموز خاصة بالموقع‬ ‫ر‬ ‫ويستخدم النوع ‪hidden‬‬
‫اآلل‪ ،‬فيقوم‬
‫قي من تقليده‪ ،‬فربما يكون هذا الموقع يستخدم خاصية الدفع ي‬ ‫تمنع المخث ر‬
‫المخثقون بخداع العمالء بموقع مزيف إلدخال بياناتهم الشية‪ ،‬ولكن هذه الحقول المخفاة يف‬
‫وه ترسل معلوماتها إل الخادم‪ ،‬ومنه إل العمالء‪ ،‬يف‬ ‫الحقيق ال يراها المخثقون‪ ،‬ي‬
‫ي‬ ‫الموقع‬
‫فيتبي العمالء أن الموقع مزيف‪.‬‬
‫ر‬ ‫حي‪ ،‬أن الصفحة المزيفة لن ترسل هذه المعلومات للعمالء‪،‬‬ ‫ر‬
‫معي وعرض العنرص ر‬
‫مباشة‬ ‫كما يستخدم النوع ‪ hidden‬يف إخفاء التعديل‪ ،‬عىل عنرص ر‬
‫معي عند التعديل عليه‪ ،‬فال يشاهده المستخدمون أثناء‬ ‫بعد التعديل‪ ،‬مثل بوست أو مقال ر‬
‫التعديل‪ ،‬ولكن يتم مشاهدته بعد إتمام التعديل‪.‬‬

‫‪HTML Elements‬‬ ‫‪133‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪image‬‬
‫ً‬
‫رسوم بدال من األزرار العادية‪ ،‬حيث يقوم بعمل اعتماد أو ‪submit‬‬
‫ي‬ ‫نوع يعمل كزر‬
‫للنموذج عند الضغط عليه‪ ،‬وإرسال بيانات النموذج إل الخادم أو إل صفحة أخرى‪.‬‬
‫>"‪<form method="post‬‬
‫>‪<label>User</label><br><input type="text" name="usr"><br‬‬
‫>‪<label>Password</label><br‬‬
‫>‪<input type="password" value="" name="pass"><br><br‬‬
‫"‪<input type="image" id="img" name="logo" width="50" height="35‬‬
‫"‪alt="mountain" src="images/mount.jpg" formtarget="_blank‬‬
‫>"‪formmethod="get‬‬
‫>‪</form‬‬
‫الحظ أن الضغظ عىل الزر ‪ image‬سيعتمد‬
‫الن يتم إدخالها‪ ،‬وعند فحص رشيط العنوان‬ ‫البيانات ي‬
‫قمتي‬
‫الن تم اعتمادها نالحظ وجود ر‬ ‫لمعرفة البيانات ي‬
‫الحقلي ‪ User‬و‪ ، Password‬وهما‬ ‫ر‬ ‫قيمن‬
‫ي‬ ‫غث‬
‫أخريي ر‬‫ر‬
‫ر‬ ‫ر‬
‫أش ‪logo.y‬‬‫واإلحداب الر ي‬
‫ي‬ ‫األفق ‪logo.x‬‬‫ي‬ ‫اإلحداب‬
‫ي‬
‫لموضع الضغط بالفأرة عىل الصورة أو الزر ‪.‬‬

‫تعيي الخاصية ‪ ، value‬ألن القيمة لن تظهر عىل الصورة ولكنه‬

‫النوع ‪ image‬ال يقبل ر‬
‫تعيي خصائص عديدة‪:‬‬
‫يقبل ر‬
‫‪src‬‬
‫خاصية تحدد مسار الصورة عىل حاسوبك‪ ،‬أو عىل أحد مواقع‬
‫االنثنت‪ ،‬ويتم تحديد المسار بعدة طرق‪ ،‬انظر ص ‪. 171‬‬
‫‪alt‬‬
‫خاصية تحدد النص الذي سيظهر عند حدوث خطأ يف مسار‬
‫الصورة‪.‬‬
‫‪HTML Elements‬‬ ‫‪134‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫&‪width‬‬ ‫‪& height‬‬

‫خاصيتان تحددان ارتفاع وعرض الصورة أو الزر‪.‬‬
‫‪formtarget‬‬
‫خاصية تحدد الموضع الذي ستفتح فيه الصفحة الجديدة‪ ،‬بعد اعتماد النموذج‪ ،‬وتقبل‬
‫ه نفس قيم الخاصية ‪ ، target‬و رشح مدلول كل قيمة ملحق ‪. 1‬‬
‫عدة قيم‪ ،‬ي‬
‫‪formaction‬‬
‫خاصية تحدد عنوان ‪ url‬الذي سيتم إرسال بيانات النموذج له بعد اعتماد النموذج‪.‬‬
‫‪formmethod‬‬
‫قيمتي هما‬
‫ر‬ ‫السثفر‪ ،‬وتقبل‬
‫الن يتم بها إرسال بيانات النموذج إل ر‬
‫خاصية تحدد الطريقة ي‬
‫وشح مدلول كل قيمة ملحق ‪. 1‬‬‫‪ get‬و ‪ post‬ر‬

‫‪formenctype‬‬
‫وه‬
‫سثفر‪ ،‬ي‬
‫تشفث بيانات النموذج بعد اعتمادها وأثناء دخولها لل ر‬
‫ر‬ ‫خاصية تحدد طريقة‬
‫وشح مدلول كل قيمة ملحق ‪. 1‬‬‫تقبل عدة قيم‪ ،‬والقيم ر‬

‫‪formnovalidate‬‬
‫للمعايث عند اعتمادها‬
‫ر‬ ‫خاصية تسمح بعدم التحقق من صحة بيانات النموذج‪ ،‬أو موافقتها‬
‫وقبل إرسالها للخادم‪.‬‬

‫‪HTML Elements‬‬ ‫‪135‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪month‬‬
‫ً‬
‫معي‪ ،‬يتبعه العام من التاري ــخ‪ ،‬ويتم إدخال العام أوال مكونا من‬
‫نوع مخصص إلدخال شهر ر‬
‫رقمي‪ ،‬ويكون اإلدخال بنفس التنسيق ك‪yyyy-mm‬ك‪.‬‬ ‫أربعة أرقام‪ ،‬ثم إدخال الشهر مكونا من ر‬
‫>‪<form‬‬
‫>‪<label for=" mnth ">Show month: </label‬‬
‫"‪<input type="month" id="mnth" name="mnth" min="2018-04‬‬
‫>"‪max="2022-09" value="2020-10" step="3‬‬
‫>"‪<input type="submit‬‬
‫>‪</form‬‬
‫ً‬
‫الحظ أن مربــع التاري ــخ يعرض الشهر أوال ثم‬
‫العام‪ ،‬عىل هيئة ‪ Month yyyy‬وهو ليس‬
‫اتجاه أو تنسيق التاري ــخ الذي تم إدخاله‪ ،‬ألن‬
‫المتصفح يستخدم اإلعدادات المحلية يف‬
‫عرض التاري ــخ‪.‬‬
‫تعيي نفس خصائص النوع ‪date‬‬ ‫ويمكن ر‬
‫كالتال‪:‬‬
‫ي‬ ‫وه‬
‫للنوع ‪ month‬ي‬
‫‪max‬‬
‫خاصية تحدد أقص شهر ال يمكن‬
‫تخطيه أو إدخال أي قيمة أكث منه‪،‬‬
‫وال يجب أن تقل قيمة هذه الخاصية‬
‫عن قيمة الخاصية ‪ ، min‬وإذا حدث‬
‫خالف ذلك ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪.‬‬

‫‪min‬‬
‫خاصية تحدد أقل عدد من‬
‫األشهر ال يمكن الثول عنه‪ ،‬أو إدخال‬
‫أي عدد أقل منه‪ ،‬وال يجب أن تزيد‬
‫‪HTML Elements‬‬ ‫‪136‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫قيمة هذه الخاصية عن قيمة الخاصية ‪ ،max‬وإذا حدث خالف ذلك‪ ،‬ال يتم اعتماد النموذج‪،‬‬
‫وتظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪value‬‬
‫الن تظهر عند فتح مربــع األشهر‪ ،‬ويجب أال تتخط قيمة‬‫خاصية تحدد القيمة االفثاضية ي‬
‫الخاصية ‪ ، max‬وال تقل عن قيمة الخاصية ‪ ، min‬وإذا حدث خالف ذلك ال يتم اعتماد‬
‫السابقي‪.‬‬
‫ر‬ ‫بالشكلي‬
‫ر‬ ‫النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪ ،‬كما‬
‫‪step‬‬
‫خاصية قيمة القفزة ربي القيم‬
‫والن تحدد الفثة‬ ‫ي‬ ‫المدخلة‪،‬‬
‫النشطة مقدرة باألشهر‪ ،‬حيث‬
‫وف‬
‫غث فعالة‪ ،‬ي‬ ‫باف األشهر ر‬‫تظهر ي‬
‫ر‬
‫يتماش مع قيمة هذه الخاصية‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة‬ ‫حالة إدخال عدد أشهر ال‬
‫تنبيه بهذا الخطأ‪.‬‬
‫وتعن أن كل األشهر نشطة وال يوجد فثة زمنية‬
‫ي‬ ‫ويمكن إسناد القيمة ‪ any‬لهذه الخاصية‪،‬‬
‫غث فعالة بينها‪.‬‬
‫ر‬

‫ويوجد خصائص أخرى يمكن تعيينها للنوع ‪ ، month‬وقد سبق رشحها سابقا يف مواضع‬
‫عديدة مثل الخاصية ‪ readonly‬والخاصية ‪ ، required‬ويمكن الرجوع إليها عند الحاجة‪.‬‬

‫غث مدعوم يف متصفح ‪. Firefox‬‬

‫والنوع ‪ month‬ر‬

‫‪HTML Elements‬‬ ‫‪137‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪number‬‬
‫نوع مخصص إلدخال األعداد دون الحروف‪ ،‬ويكون للحقل ‪ number‬أسهما لزيادة وتقليل‬
‫قيمة العدد‪ ،‬بالضغظ بالفأرة عىل األسهم ألعىل أو ألسفل‪ ،‬أو باستخدام أسهم لوحة المفاتيح‪.‬‬
‫>‪<form‬‬
‫>‪<label for="num">Number: </label‬‬
‫"‪<input type="number" id="num" name="num" min="10" max="100‬‬
‫>"‪step="5" value="45‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬

‫تعيي عدة خصائص للنوع ‪: number‬‬

‫ويمكن ر‬
‫‪max‬‬
‫خاصية تحدد أكث عدد يمكن إدخاله‬
‫وال يمكن للمستخدم تخطيه أو إدخال‬
‫أي عدد أكث منه‪ ،‬وال يجب أن تقل قيمة‬
‫هذه الخاصية عن قيمة الخاصية ‪min‬‬
‫وإذا حدث خالف ذلك‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪min‬‬
‫خاصية تحدد أقل عدد يمكن إدخاله‬
‫وال يمكن للمستخدم الثول عنه‪ ،‬وال‬
‫يجب أن تزيد قيمة هذه الخاصية عن‬
‫قيمة الخاصية ‪ ، max‬وإذا حدث خالف‬
‫ذلك‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪step‬‬
‫خاصية تحدد قيمة القفزة ربي األعداد المدخلة‪ ،‬عند استخدام أسهم مربــع اإلدخال‪ ،‬أو‬
‫وف حالة إدخال العدد عن طريق لوحة المفاتيح‪ ،‬وإدخال‬
‫عند استخدام أسهم لوحة المفاتيح‪ ،‬ي‬
‫‪HTML Elements‬‬ ‫‪138‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬
‫عدد ال تنطبق عليه ر‬
‫الشوط السابقة‪ ،‬ال‬
‫يتم اعتماد النموذج وتظهر رسالة تنبيه‬
‫بهذا الخطأ‪.‬‬
‫‪value‬‬
‫الن تظهر عند تحميل الصفحة‪ ،‬ويجب أال تتخط قيمة‬ ‫خاصية تحدد القيمة االفثاضية ي‬
‫الخاصية ‪ ، max‬وال تقل عن قيمة الخاصية ‪ ، min‬مع مراعاة قيمة القفزة المحددة يف‬
‫الخاصية ‪ ، step‬وإذا حدث خالف ذلك ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه تحذر من‬
‫هذه األخطاء‪.‬‬

‫‪HTML Elements‬‬ ‫‪139‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪password‬‬
‫نوع مخصص إلدخال كلمة ش‪ ،‬وال يتم عرض محتوى الحقل للمستخدم عىل هيئة‬
‫الحروف واألرقام والحروف الخاصة‪ ،‬ولكن يتم عرض المدخالت عىل هيئة رموز‪ ،‬إما ك*ك أو‬
‫توفث أكث قدر من األمان والحماية‪.‬‬
‫ك●ك ‪ ،‬من أجل ر‬
‫>‪<form‬‬
‫>‪<label for="psswrd">Password: </label‬‬
‫"‪<input type="password" id="psswrd" size="20" name="psswrd‬‬
‫‪maxlength="30" minlength="9" pattern=".{9-30}" placeholder="Enter Your‬‬
‫>‪password" required‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬

‫تعيي عدة خصائص للنوع ‪: password‬‬

‫ويمكن ر‬
‫‪required‬‬
‫تعن أن هذا الحقل‬ ‫ي‬ ‫خاصية‬
‫مطلوب‪ ،‬أي ال يمكن اعتماد النموذج‬
‫إذا كان هذا الحقل فارغا‪ ،‬ولم يتم ملؤه‬
‫بنوع البيانات المتوقع‪ ،‬وتظهر رسالة‬
‫تنبيه بهذا الخطأ‪.‬‬
‫‪pattern‬‬
‫الن يجب أن تتطابق معها مدخالت كلمة الش‪ ،‬حيث‬ ‫عينة ‪ ، regular expression‬ي‬
‫يمكن التحكم يف نوع المدخالت‪ ،‬وعدد ومكان إدخال كل نوع‪ ،‬وعند عدم مطابقتها تظهر رسالة‬
‫تنبيه بهذا الخطأ‪ ،‬انظر ص ‪. 128‬‬
‫‪maxlength‬‬
‫خاصية تحدد أقص عدد من الحروف واألرقام والرموز‪ ،‬يمكن إدخالها يف حقل كلمة الش‪،‬‬
‫‪HTML Elements‬‬ ‫‪140‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫وال يتم السماح بتجاوز قيمة هذه الخاصية لعدد الحروف المدخلة‪ ،‬ويتوقف اإلدخال عند‬
‫إدخال العدد األقص من الحروف المحدد يف قيمة هذه الخاصية‪.‬‬
‫‪minlength‬‬
‫خاصية تحدد أقل عدد من الحروف‬
‫واألرقام والرموز‪ ،‬يمكن إدخاله يف حقل‬
‫كلمة الش‪ ،‬وتظهر رسالة خطأ يف حالة‬
‫اعتماد النموذج‪ ،‬وكان عدد الحروف‬
‫المدخلة أقل من قيمة هذه الخاصية‪.‬‬

‫الخاصيتي ‪maxlength‬‬
‫ر‬ ‫وتنطبق عىل هذه الخاصية والخاصية السابقة نفس رشوط‬
‫و‪ minlength‬ص ‪ ، 127‬من حيث عدم إمكانية تجاوز أي منهما لقيمة الخاصية األخرى‪.‬‬

‫والن وردت بالكود السابق‪ ،‬قد سبق رشحها‬

‫وغثها ي‬
‫وباف الخصائص ‪ size‬و ‪ placeholder‬ر‬ ‫ي‬
‫كثثة‪ ،‬ويمكن الرجوع إل كل منها يف أحد هذه المواضع‪.‬‬
‫يف مواضع ر‬

‫‪HTML Elements‬‬ ‫‪141‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪radio‬‬
‫نوع مخصص ُليكون مجموعة من األزرار‪ ،‬تشبه أزرار الراديو‪ ،‬كل زر يمثل بندا معينا‪،‬‬
‫وبي مربعات االختيار‬
‫ويجب اختيار واحد منها فقط‪ ،‬وهذا هو وجه االختالف ربي هذا النوع ر‬
‫‪ ،checkbox‬حيث يمكن اختيار ر‬
‫أكث من بند من مربعات االختيار‪.‬‬
‫>‪<form‬‬
‫>‪<h4>Your favorite car</h4‬‬
‫>"‪<input type="radio" id="rdo" name="car" value="toyota‬‬
‫>‪<label for="rdo"> Toyota</label><br‬‬
‫>"‪<input type="radio" id="nsn" name="car" value="nissan‬‬
‫>‪<label for="nsn"> Nissan</label><br‬‬
‫>"‪<input type="radio" id="ft" name="car" value="fiat‬‬
‫>‪<label for="ft"> Fiat</label><br‬‬
‫>‪<input type="radio" id="bm" name="car" value="bmw" checked‬‬
‫>‪<label for="bm"> BMW</label><br><br‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬
‫الحظ أن االختيار ‪ BMW‬تم‬
‫اختياره افثاضيا عند تحميل الصفحة‬
‫لتعيي الخاصية‬‫ر‬ ‫أو النموذج نظرا‬
‫التأشث‬
‫ر‬ ‫‪ chedcked‬له‪ ،‬كما أنه عند‬
‫التأشثة‬
‫ر‬ ‫عىل أحد االختيارات يتم إلغاء‬
‫السابقة‪ ،‬وعند الضغط عىل زر‬
‫‪ ، submit‬يظهر يف رشيط العنوان‬
‫اسم االختيار‪ ،‬وهو قيمة الخاصية‬
‫التأشث عليه من قبل المستخدم‪.‬‬
‫ر‬ ‫‪ ، name‬مسندا لها قيمة الخاصية ‪ ، value‬لالختيار الذي تم‬

‫تعيي عدة خصائص للنوع ‪: radio‬‬

‫ويمكن ر‬

‫‪HTML Elements‬‬ ‫‪142‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪checked‬‬
‫التأشث عليه عند تحميل‬
‫ر‬ ‫ه خاصية تعرض أحد االختيارات‪ ،‬وقد تم‬ ‫كما ذكرنا سابقا‪ ،‬ي‬
‫الصفحة أو النموذج‪ ،‬مثل االختيار ‪ BMW‬يف المثال السابق‪ ،‬الذي ظهر مختارا عند بداية‬
‫تحميل الصفحة‪.‬‬
‫‪name‬‬
‫باف األنواع‬
‫مثة إضافية يف هذا النوع عن ي‬ ‫خاصية تمنح النوع اسما معينا‪ ،‬وهذه الخاصية لها ر‬
‫والعناص‪ ،‬حيث إن اشثاك عدة عناص من نوع زر الراديو ‪ radio‬يف اسم واحد‪ ،‬يجعل هذه‬
‫وف‬
‫التأشث إال عىل اختيار واحد منها فقط‪ ،‬ي‬
‫ر‬ ‫يعن أنه ال يمكن‬
‫االختيارات مجموعة واحدة‪ ،‬مما ي‬
‫تعيي هذه الخاصية‪ ،‬أو يف حالة عدم تطابق قيمتها يف كل العناص‪ ،‬فلن تتكون‬ ‫حالة عدم ر‬
‫بالتال‪ ،‬يفقد النوع ‪radio‬‬ ‫ر‬
‫المجموعة‪ ،‬ويمكن للمستخدم عندئذ‪ ،‬أن يختار أكث من اختيار‪ ،‬و ي‬
‫تمثه عن النوع ‪. checkbox‬‬
‫الن ر‬
‫مثته ي‬
‫ر‬

‫‪HTML Elements‬‬ ‫‪143‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪range‬‬
‫معي‪ ،‬ولكن عن طريق رشيط تمرير مثبت به مثلق‪ ،‬ويتم اإلدخال‬ ‫نوع يقوم بإدخال عدد ر‬
‫الشيط‪ ،‬يمينا ويسارا حسب الرغبة‪ ،‬سواء بالزيادة أو بتقليل‬ ‫عن طريق تحريك المثلق عىل ر‬
‫قيمة العدد‪.‬‬
‫غث دقيقة‪ ،‬فال ينصح باستخدام هذا النوع ما لم تكن‬ ‫ونظرا ألن قيمة النوع ‪ range‬تكون ر‬
‫غث محددة تماما‪.‬‬
‫الن يقوم المستخدم بإدخالها‪ ،‬تتطلب قيمة تقريبية ر‬
‫القيمة ي‬
‫ومن استخدامات النوع ‪ ، range‬ضبط الصوت والتحكم فيه‪ ،‬أو ضبط األلوان ودرجاتها‬
‫وغثها من االستخدامات‪.‬‬‫ونسبة كل لون‪ ،‬أو ضبط مستوى صعوبة لعبة معينة‪ ،‬ر‬
‫>‪<form‬‬
‫>‪<label for="rng"> Range: </label‬‬
‫‪<input‬‬ ‫"‪type="range‬‬ ‫"‪id="rng" name="rng" value="50" min="0‬‬
‫>"‪max="100" step="2‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬

‫كالتال‪:‬‬
‫ي‬ ‫تعيي العديد من الخصائص للنوع ‪range‬‬
‫ويمكن ر‬
‫‪max‬‬
‫ه نهاية رشيط التمرير‪ ،‬فال يمكن‬‫خاصية تحدد أكث عدد يمكن إدخاله‪ ،‬وتكون قيمتها ي‬
‫للمستخدم تخطيها‪ ،‬أو إدخال أي قيمة أكث منها‪ ،‬وال يجب أن تقل قيمة هذه الخاصية عن‬
‫الشيط‪ ،‬ولن يتم سحبه‬ ‫قيمة الخاصية ‪ ، min‬وف حالة نقصانها يتم تثبيت المثلق عند بداية ر‬
‫ي‬
‫عىل ر‬
‫الشيط‪.‬‬

‫‪min‬‬
‫ه بداية رشيط التمرير‪ ،‬فال يمكن‬
‫خاصية تحدد أقل عدد يمكن إدخاله‪ ،‬وتكون قيمتها ي‬
‫للمستخدم الثول عنها‪ ،‬أو إدخال أي عدد أصغر منها‪ ،‬وال يجب أن تزيد قيمة هذه الخاصية‬
‫الشيط‪ ،‬ولن يتم‬‫عن قيمة الخاصية ‪ ، max‬وف حالة زيادتها يتم تثبيت المثلق عند بداية ر‬
‫ي‬
‫‪HTML Elements‬‬ ‫‪144‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬
‫سحبه عىل ر‬
‫الشيط‪.‬‬
‫‪step‬‬
‫لليمي أو‬
‫ر‬ ‫خاصية تحدد الفرق ربي قيمة كل عملية تمرير للمثلق عىل ر‬
‫الشيط‪ ،‬سواء‬
‫ه قيمة القفزة أو الخطوة‪ ،‬سواء إل األمام بالزيادة‪ ،‬أو إل الخلف بالنقصان‪.‬‬
‫لليسار‪ ،‬أي ي‬
‫‪value‬‬
‫الن يقف عندها المثلق عىل رشيط التمرير عند تحميل‬
‫خاصية تحدد القيمة االفثاضية‪ ،‬ي‬
‫الصفحة أو النموذج‪ ،‬ويجب أال تتخط قيمة هذه الخاصية قيمة الخاصية ‪ ، max‬وال تقل‬
‫وف حالة زيادتها عن قيمة الخاصية ‪ ، max‬يظهر المثلق يف آخر‬
‫عن قيمة الخاصية ‪ ، min‬ي‬
‫وف حالة نقصانها‬ ‫ر‬
‫تغيثها سيتم اعتمادها بنفس قيمة الخاصية ‪ ، max‬ي‬
‫الشيط‪ ،‬و يف حالة عدم ر‬
‫تغيثها سيتم‬
‫الشيط‪ ،‬و يف حالة عدم ر‬‫عن قيمة الخاصية ‪ ، min‬سيظهر المثلق ف أول ر‬
‫ي‬
‫اعتمادها بنفس قيمة الخاصية ‪. min‬‬
‫‪orient‬‬
‫خاصية مدعومة يف متصفح ‪ Firefox‬فقط‪ ،‬تتحكم يف وضع رشيط‬
‫قيمتي هما‬
‫ر‬ ‫التمرير سواء كان أفقيا أم رأسيا‪ ،‬ولذلك تقبل هذه الخاصية‬
‫ه ‪. vertical‬‬
‫وه القيمة االفثاضية‪ ،‬والقيمة الثانية ي‬
‫‪ ، horizontal‬ي‬

‫‪HTML Elements‬‬ ‫‪145‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪reset‬‬
‫نوع يعمل كزر يقوم بمسح جميع المدخالت داخل النموذج‪ ،‬ويعيد جميع الحقول إل‬
‫قيمها االفثاضية عند بداية تحميل الصفحة أو النموذج‪ ،‬لذلك يفضل عدم استخدام هذا‬
‫والن يمكن أن‬
‫النوع‪ ،‬ألنه عند أي ضغط عليه بطريق الخطأ ‪ ،‬يقوم بمسح كل المدخالت‪ ،‬ي‬
‫الن تم مسح قيمتها‪.‬‬
‫تحتاج إل بعض الوقت إلعادة ملء الحقول ي‬
‫والنوع ‪ reset‬ألنه يقوم بوظيفة زر‪ ،‬فهو ال يحتاج أن يوضع قبله عنرص <‪ ، >label‬ألن‬
‫وبالتال يكون معروفا للمستخدم طبيعة استخدام هذا الزر‪.‬‬
‫ي‬ ‫قيمته توضع فوقه‪،‬‬
‫اَ للنوع‪،‬‬
‫تغيث االسم االفث ي‬
‫تعيي خاصية ‪ value‬للنوع ‪ ، reset‬يف حالة الرغبة يف ر‬
‫ويمكن ر‬
‫حيث إن هذه الخاصية مسئولة عن كتابة اسم الزر فوقه‪ ،‬لتوضيح طبيعة عمله كما ذكرنا‪.‬‬
‫بتعيي الخاصية ‪ disabled‬له‪ ،‬فال يتفاعل مع المستخدم‪.‬‬‫ر‬ ‫ويمكن تعطيل الزر ‪reset‬‬

‫ً‬
‫التال‪ ،‬مثاال يوضح طبيعة عمل النوع ‪reset‬‬
‫وسوف نستعرض عند دراسة النوع ‪ submit‬ي‬
‫والنوع ‪ ، submit‬ليتضح للمستخدم الفرق يف طبيعة عمل كل منهما‪.‬‬

‫‪HTML Elements‬‬ ‫‪146‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪submit‬‬
‫نوع يعمل كزر‪ ،‬يقوم بعمل اعتماد ‪ submit‬للنموذج <‪ ، >form‬حيث يقوم بإرسال بيانات‬
‫النموذج إل صفحة أخرى‪ ،‬أو إل خادم ‪ ، server‬ليقوم بمعالجتها وفقا للهدف من إنشاء هذا‬
‫تعيي الخاصية ‪ action‬للنموذج أو الخاصية ‪ formaction‬للزر‪ ،‬فإن قيمة أي‬ ‫النموذج‪ ،‬وعند ر‬
‫ه وجهة بيانات النموذج بعد اعتمادها ‪.‬‬
‫منهما تكون ي‬
‫>‪<form‬‬
‫>‪<label for="user"> Name:</label><br‬‬
‫>‪<input type="text" id="txt" name="user"><br‬‬
‫>‪<label for="pswrd"> password:</label><br‬‬
‫>‪<input type="password" id="pswrd" name="pswrd"><br><br‬‬
‫>"‪<input type="submit" value="Send" formaction="page.php‬‬
‫>"‪<input type="reset‬‬
‫>‪</form‬‬

‫‪submit‬‬ ‫‪reset‬‬

‫اَ‪ ،‬بينما‬
‫نعي الخاصية ‪ value‬للنوع ‪ reset‬فظهر عليه االسم االفث ي‬ ‫الحظ أننا لم ر‬
‫اَ للنوع ‪ submit‬إل ‪. Send‬‬‫لتغيث االسم االفث ي‬
‫ر‬ ‫استخدمنا نفس الخاصية‪،‬‬
‫الحظ طريقة انتقال بيانات النموذج بعد اعتماده‪ ،‬كما تظهر يف رشيط العنوان‪ ،‬حيث يظهر‬
‫الن تم إدخالها من قبل‬
‫اسم الحقل‪ ،‬وهو قيمة الخاصية ‪ ، name‬مسندا إليه القيمة ي‬
‫المستخدم‪ ،‬يف النوع ‪ text‬والنوع ‪. password‬‬

‫‪HTML Elements‬‬ ‫‪147‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫اَ‬
‫تغيث االسم االفث ي‬
‫لتعيي الخاصية ‪ ، value‬يف حالة الرغبة يف ر‬
‫ر‬ ‫والنوع ‪ submit‬يحتاج‬
‫الذي يظهر عىل الزر‪ ،‬ألنها تمثل اسم الزر الذي سيظهر للمستخدم‪.‬‬

‫بما أن هذا النوع هو زر يقوم باعتماد بيانات النموذج‪ ،‬فالحظ أن هذا االعتماد يحتاج‬
‫اللتي سبق رشحهما من‬‫إل عدد من الخصائص مثل ‪ formaction, formmnovalidate‬ر‬
‫قبل‪ ،‬باإلضافة إل الخصائص ‪ ، formtarget, formenctype, formmethod‬وتم رشح‬
‫وتأثثها يف ملحق ‪. 1‬‬
‫طبيعة عمل هذه الخصائص ر‬

‫‪HTML Elements‬‬ ‫‪148‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪text‬‬
‫تعيي أي‬
‫نوع مخصص إلدخال نص من سطر واحد‪ ،‬وهو القيمة االفثاضية‪ ،‬يف حالة عدم ر‬
‫قيمة للخاصية ‪ type‬للعنرص <‪. >input‬‬
‫>‪<form‬‬
‫>‪<label for="txt"> Name </label‬‬
‫"‪<input type="text" id="txt" name="text" size="20" minlength="11‬‬
‫>"‪maxlength="100" spellcheck="true" placeholder="Your name‬‬
‫>"‪<input type="submit‬‬
‫>‪</form‬‬

‫تعيي الخاصية ‪ spellcheck‬وإسناد القيمة ‪ true‬لها‪ ،‬سيقوم بتنبيهك عند‬ ‫الحظ أن ر‬

‫ئ‬
‫هجاب عند إدخال النص‪ ،‬ولكن ذلك الخطأ لن يمنع اعتماد النموذج‪.‬‬
‫ي‬ ‫وجود خطأ‬

‫وعند الضغط عىل الزر األيمن للفأرة‪ ،‬تظهر قائمة تعرض عليك مجموعة من الكلمات‬
‫الغث صحيحة‪.‬‬ ‫المقثحة‪ ،‬الستبدال الكلمة ر‬

‫الخاصيتي ‪ maxlength‬و ‪ minlength‬ال يتم اعتماد‬

‫ر‬ ‫وكما سبق ودرسنا من قبل‪ ،‬فإن‬
‫النموذج عند حدوث أي خطأ يف قيمة أي منهما‪:‬‬

‫‪HTML Elements‬‬ ‫‪149‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<form‬‬
‫>‪<label for="txt"> Name </label‬‬
‫"‪<input type="text" id="txt" name="text" value="Wail Monir‬‬
‫>‪readonly‬‬
‫>"‪<input type="submit‬‬
‫>‪</form‬‬

‫الحظ أن الحقل ‪ Name‬تظهر به قيمة الخاصية ‪ ، value‬وقد قامت الخاصية ‪readonly‬‬

‫وبالتال لم يعد الحقل يف حاجة لمعظم الخصائص السابقة‪.‬‬
‫ي‬ ‫غث قابل للتعديل‪،‬‬
‫بجعل الحقل ر‬

‫تعيي عدة خصائص للنوع ‪ ، text‬وقد سبق رشح كل الخصائص بالكود السابق يف‬ ‫ويمكن ر‬
‫ه‪:‬‬
‫كثثة‪ ،‬ويمكن الرجوع إليها يف أحد المواضع السابقة‪ ،‬و ي‬
‫مواضع ر‬
‫‪value, name, minlength, maxlength, placeholder, spellcheck, pattern,‬‬
‫‪readonly, required, size.‬‬

‫‪HTML Elements‬‬ ‫‪150‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪search‬‬
‫معي‪ ،‬بغرض البحث واالستعالم عن موضوع يتعلق بهذا‬ ‫نوع مخصص إلدخال نص ر‬
‫وف الغالب لن يكون من بينها‬
‫تعيي نفس خصائص النوع ‪ text‬لهذا النوع‪ ،‬ي‬
‫النص‪ ،‬ويمكن ر‬
‫الخاصية ‪ readonly‬أو الخاصية ‪ ، value‬حيث إن وجودهما يخالف طبيعة عمل هذا النوع‪،‬‬
‫حيث إنه يتطلب دائما إدخال نص جديد بهدف البحث عنه‪.‬‬
‫>‪<form‬‬
‫>‪<label for="srch"> Web Search </label‬‬
‫"‪<input type="search" id="srch" name="srch" maxlength="100‬‬
‫>"‪minlength="10" size="20" placeholder="Search what ?" spellcheck="true‬‬
‫>"‪<input type="submit" value="Go‬‬
‫>‪</form‬‬

‫الكثث من خصائص العنرص >‪ <input‬للنوع ‪ ، search‬وكل الخصائص يف‬ ‫ر‬ ‫تعيي‬
‫ويمكن ر‬
‫كثثة‪ ،‬ويمكنك الرجوع إليها يف أي موضع منها‪،‬‬
‫الكود السابق‪ ،‬قد مررنا بها من قبل يف مواضع ر‬
‫والتأثث لهذه الخصائص عىل هذا النوع‪.‬‬
‫ر‬ ‫وعليك أن تتوقع نفس السلوك‬

‫‪HTML Elements‬‬ ‫‪151‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪tel‬‬
‫نوع مخصص إلدخال رقم هاتف‪ ،‬وال يتم التحقق من صحة إدخال رقم الهاتف‪ ،‬مثل الثيد‬
‫وب‪ ،‬أو مواقع الويب‪ ،‬ألن تنسيق أرقام الهاتف يختلف من مكان إل مكان حول العالم‪.‬‬
‫اإللكث ي‬
‫والنوع ‪ tel‬يعامل معاملة النوع ‪ ، text‬لذلك لن يحدث أي خطأ أو اعثاض‪ ،‬إذا أدخلنا‬
‫ً‬
‫حروفا بدال من األرقام‪ ،‬بل إن النموذج سيتم اعتماده بطريقة عادية‪ ،‬وسيظهر اسم الحقل‪ ،‬وقد‬
‫كالتال‪:‬‬
‫ي‬ ‫أسند إليه القيمة النصية‬

‫بتعيي الخاصية ‪ pattern‬لهذا النوع‪ ،‬ووضع القيود الالزمة للتحقق من‬ ‫ر‬ ‫لذلك ينصح‬
‫صحة تنسيق رقم الهاتف‪ ،‬حسب تنسيق المنطقة من العالم المطلوب إدخال رقم هاتف‬
‫خاص بها‪.‬‬
‫التال يوضح عينة بسيطة للخاصية ‪ ، pattern‬للتاكد من إدخال أرقام بتنسيق‬ ‫ي‬ ‫والكود‬
‫معي‪ ،‬وأي مخالفة لذلك‪ ،‬ستظهر رسالة تنبيه بهذا الخطأ عند اعتماد النموذج‪:‬‬
‫ر‬
‫>‪<form‬‬
‫>‪<label for="phone"> Phone no. </label‬‬
‫"‪<input type="tel" id="phone" name="phone" size="20‬‬
‫"‪maxlength="100" minlength="11‬‬
‫>"}‪placeholder="002#########" pattern="002[0-9]{8‬‬
‫>"‪<input type="submit" value="Send‬‬
‫>‪</form‬‬
‫الحظ ظهور رسالة تنبيه عند‬
‫عدم استيفاء متطلبات عينة أو‬
‫نموذج ‪. pattern‬‬

‫الن وردت‬
‫الكثث من خصائص العنرص >‪ ، <input‬وكل الخصائص ي‬ ‫ر‬ ‫والنوع ‪ tel‬يقبل‬
‫بالكود السابق ‪ ،‬تم رشحها يف مواضع ر‬
‫كثثة‪ ،‬ويمكن الرجوع إل كل منها يف أحد هذه المواضع‪.‬‬

‫‪HTML Elements‬‬ ‫‪152‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪time‬‬
‫الثواب‬
‫ي‬ ‫والثواب وأجزاء الثانية‪ ،‬ولكن إدخال‬
‫ي‬ ‫نوع مخصص إلدخال الوقت‪ ،‬بالساعة والدقائق‬
‫وأجزائها يكون اختياريا‪ ،‬ويمكن االستغناء عنهما‪ ،‬كما أن مربــع الوقت يعرض الفثة الزمنية سواء‬
‫مساء ك‪PM‬ك إذا كان التوقيت المستخدم ‪ 12‬ساعة‪ ،‬وال يعرض رمز‬ ‫ً‬ ‫كانت صباحا ك‪AM‬ك أو‬
‫الفثة الزمنية سواء كانت صباحية أم مسائية إذا كان التوقيت ‪ 24‬ساعة (وذلك حسب توقيت‬
‫نظام التشغيل)‪ ،‬ويختلف شكل مربــع الوقت من متصفح إل آخر‪.‬‬
‫>‪<form‬‬
‫>‪<label for="tm">Show time: </label‬‬
‫"‪<input type="time" id="tm" name="tm" min="15:45:30‬‬
‫>"‪max="23:20:55" value="19:30:45.269‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬

‫‪Firefox‬‬

‫الحظ أن متصفح ‪ Firefox‬يعرض النوع ‪ time‬عىل‬

‫هيئة سطر واحد‪ ،‬ويتم إدخال قيمة أخرى للوقت عن‬
‫المباش‪ ،‬باستخدام لوحة المفاتيح‪ ،‬أو‬ ‫ر‬ ‫طريق اإلدخال‬
‫باستخدام أسهم لوحة المفاتيح‪ ،‬أما متصفح ‪Chrome‬‬
‫فبجانب هذه الطرق‪ ،‬فإنه يفتح مربعا‪ ،‬الختيار الساعة‬
‫والثواب وأجزائها‪ ،‬بالنقر بالفأرة‪.‬‬
‫ي‬ ‫والدقائق‬
‫تعيي عدة خصائص للنوع ‪: time‬‬
‫ويمكن ر‬
‫‪Chrome‬‬
‫‪value‬‬
‫الن تظهر‬
‫خاصية تحدد القيمة االفثاضية‪ ،‬ي‬
‫عند فتح مربــع الوقت‪ ،‬ويجب أال تتخط‬
‫قيمة الخاصية ‪ ، max‬وال تقل عن قيمة الخاصية‬
‫‪HTML Elements‬‬ ‫‪153‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪ ، min‬وإذا حدث خالف ذلك‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪max‬‬
‫خاصية تحدد أقص وقت ال يمكن تخطيه‪ ،‬أو‬
‫إدخال أي وقت بعده‪ ،‬ويجب أال تقل قيمتها عن‬
‫قيمة الخاصية ‪ ، min‬وإذا حدث خالف ذلك‪ ،‬ال‬
‫يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا‬
‫الخطأ‪.‬‬

‫‪min‬‬
‫خاصية تحدد أدب وقت ال يمكن الثول عنه‪ ،‬أو إدخال أي وقت قبله‪ ،‬وال يجب أن تزيد‬
‫قيمتها عن قيمة الخاصية ‪ ، max‬وإذا حدث خالف ذلك‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة‬
‫تنبيه بهذا الخطأ‪ ،‬نفس الشكل بالخاصية ‪. value‬‬

‫‪HTML Elements‬‬ ‫‪154‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

url
.‫وب‬
‫نوع مخصص إلدخال عنوان موقع الكث ي‬
<form>
<label for="url">URL: </label>
<input type="url" id="url" name="url" maxlength="30" minlength="10"
placeholder="https://www.example.com" required
size="20" pattern="https://w{3}\..+\.(com|org)" spellcheck="true">
<input type="submit" value="Submit">
</form>
.‫وب‬
‫حقل إدخال موقع إلكث ي‬

‫ بالتحقق من أن‬submit ‫وتقوم عملية‬

.‫الحقل ليس خاليا‬

‫كما تتحقق من صحة تنسيق عنوان‬

‫الموقع ولكن ال يتم التأكد من صحة‬
‫ أي أن التحقق يكون شكليا‬، ‫وجود الموقع‬
.‫فقط‬

‫الن وردت بالكود‬ ‫الخصائص‬ ‫كل‬ ‫ح‬‫ش‬‫ وقد سبق ر‬، url ‫تعيي عدة خصائص للنوع‬ ‫ويمكن ر‬
‫ي‬
:‫وه‬
‫ ويمكن الرجوع إليها يف هذه المواضع ي‬،‫السابق يف مواضع عديدة‬
value, name, minlength, maxlength, placeholder, spellcheck, readonly,
required, size, pattern.

HTML Elements 155 [email protected]

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪week‬‬
‫نوع مخصص إلدخال رقم األسبوع من العام‪ ،‬أي من ‪ 1‬إل ‪ 52‬أو ‪ ، 53‬ويتم تنسيق‬
‫رقمي‬
‫ر‬ ‫المدخالت بإدخال العام مكونا من أربعة أرقام‪ ،‬ثم يتبعه عدد األسابيع مكونا من‬
‫كبث‪ ،‬ويفصل ربي العام وعدد األسابيع ك‪-‬ك‪.‬‬
‫مسبوق ري بحرف ‪ W‬ر‬
‫>‪<form‬‬
‫>‪<label for="wk">Show week: </label‬‬
‫"‪<input type="week" id="wk" name="wk" step="4‬‬
‫>"‪value="2020-W05" min="2018-W25" max="2022-W40‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬
‫الحظ أن مربــع األسبوع قد ظهر به األسبوع‬
‫الخامس من العام ‪( 2020‬وهو قيمة الخاصية‬
‫‪ )value‬باللون األزرق‪ ،‬وظهر األسبوع األول قبله‬
‫وه الفثة الزمنية يف قيمة‬
‫بأربعة أسابيع نشطا‪ ،‬ي‬
‫الخاصية ‪. step‬‬
‫تعيي عدد من الخصائص لهذا النوع‪:‬‬
‫ويمكن ر‬

‫‪max‬‬
‫خاصية تحدد أقص عدد من األسابيع‪ ،‬ال‬
‫يمكن تخطيه أو إدخال أي عدد أكث منه‪ ،‬وال‬
‫يجب أن تقل قيمة هذه الخاصية عن قيمة‬
‫الخاصية ‪ ، min‬وإذا حدث خالف ذلك‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪.‬‬
‫‪min‬‬
‫خاصية تحدد أقل عدد من األسابيع ال‬
‫يمكن الثول عنه أو إدخال أي عدد أقل منه‪،‬‬
‫وال يجب أن تزيد قيمة هذه الخاصية عن‬
‫‪HTML Elements‬‬ ‫‪156‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫قيمة الخاصية ‪ ، max‬وإذا حدث خالف ذلك‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا‬
‫الخطأ‪.‬‬
‫‪value‬‬
‫خاصية تحدد القيمة االفثاضية‪ ،‬ال ين تظهر عند فتح مربــع األسبوع‪ ،‬ويجب أال تتخط‬
‫قيمة الخاصية ‪ ، max‬وال تقل عن قيمة الخاصية ‪ ، min‬وإذا حدث خالف ذلك‪ ،‬ال يتم‬
‫السابقي‪.‬‬
‫ر‬ ‫بالشكلي‬
‫ر‬ ‫اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ كما‬
‫‪step‬‬
‫خاصية القفزة ربي القيم‬
‫غث‬‫والن تحدد الفثة ر‬
‫ي‬ ‫المدخلة‪،‬‬
‫النشطة ربي المدخالت مقدرة‬
‫وف حالة إدخال عدد أسابيع ال‬‫غث فعالة‪ ،‬ي‬
‫باألسابيع‪ ،‬حيث تظهر األسابيع ربي القيم النشطة ر‬
‫ر‬
‫يتماش مع قيمة هذه الخاصية‪ ،‬ال يتم اعتماد النموذج‪ ،‬وتظهر رسالة تنبيه بهذا الخطأ‪ ،‬ويمكن‬
‫غث فعالة‬‫وتعن أن كل األسابيع نشطة‪ ،‬وال يوجد فثة زمنية ر‬
‫ي‬ ‫إسناد القيمة ‪ any‬لهذه الخاصية‪،‬‬
‫بينها‪.‬‬
‫الحظ أن كتابة عدد األسابيع من رقم واحد كقيمة ألي خاصية‪ ،‬أو كتابة القيمة من‬
‫غث صحيحة‪ ،‬ولن تؤخذ هذه القيمة‬ ‫صغث‪ ،‬سيجعل القيمة ر‬
‫ر‬ ‫رقمي ولكن يسبقهما حرف ‪w‬‬ ‫ر‬
‫يف االعتبار‪.‬‬

‫غث مدعوم يف متصفح ‪. Firefox‬‬

‫النوع ‪ week‬ر‬

‫‪HTML Elements‬‬ ‫‪157‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<textarea>…</textarea‬‬
‫عنرص مخصص إلدخال نص متعدد األسطر‪ ،‬ليستخدم يف كتابة منشور أو تعليق‪.‬‬
‫>‪<form‬‬
‫"‪<textarea name="opn" id="opn" cols="20" rows="5" wrap="hard‬‬
‫" ??? ‪autocomplete autofocus placeholder="What you think‬‬
‫>‪spellcheck="true" required ></textarea><br><br‬‬
‫>"‪<input type="submit" value="Submit‬‬
‫>‪</form‬‬
‫الحظ أن العنرص <‪ >textarea‬قد ظهر بداخله‬
‫يختق عند وضع‬ ‫ي‬ ‫تلميح عن نوع المدخل‪ ،‬وهذا التلميح‬
‫المؤش داخله‪ ،‬ولكن إذا أردت أن يحتوي عىل قيمة‬ ‫ر‬
‫وسم البداية والنهاية‪ ،‬ألن‬
‫ي‬ ‫افثاضية‪ ،‬فعليك أن تكتبها ربي‬
‫العنرص <‪ >textarea‬ال يدعم الخاصية ‪. value‬‬
‫تعيي عدة خصائص للعنرص <‪: >textarea‬‬ ‫ويمكن ر‬
‫‪maxlength‬‬
‫خاصية تحدد أقص عدد من الحروف‪ ،‬يمكن للمستخدم إدخالها‪ ،‬ويجب أن تكون قيمتها‬
‫الش وط السابق رشحها ص ‪. 127‬‬
‫عددا صحيحا موجبا‪ .‬وتنطبق عليها نفس ر‬

‫‪minlength‬‬
‫خاصية تحدد أقل عدد من الحروف‪ ،‬يمكن للمستخدم إدخالها‪ ،‬ويجب أن تكون قيمتها‬
‫الش وط السابق رشحها ص ‪. 127‬‬
‫عددا صحيحا موجبا‪ ،‬وتنطبق عليها نفس ر‬

‫‪cols‬‬
‫الن ستظهر للمستخدم أفقيا‪ ،‬والقيمة‬
‫خاصية تحدد عرض العنرص مقدرا بعدد الحروف ي‬
‫ه ‪ 20‬حرف‪.‬‬
‫االفثاضية ي‬
‫‪rows‬‬
‫الن ستظهر للمستخدم رأسيا‪.‬‬
‫خاصية تحدد ارتفاع العنرص‪ ،‬مقدرا بعدد الصفوف ي‬
‫‪HTML Elements‬‬ ‫‪158‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪autofocus‬‬
‫ئ‬
‫التلقاب للوحة المفاتيح‪ ،‬من ربي كل‬
‫ي‬ ‫كث‬‫خاصية عند تعيينها للعنرص‪ ،‬تجعله موضع الث ر‬
‫عناص النموذج‪ ،‬أي أن لوحة المفاتيح ستستهدف هذا العنرص‪ ،‬عند االنتقال من نمودج آخر‪،‬‬
‫ر‬
‫بالمؤش عىل‬ ‫أو من جزء آخر يف الصفحة‪ ،‬إل النموذج الذي يحتوي هذا العنرص‪ ،‬دون النقر‬
‫العنرص‪ ،‬أو دون التنقل ربي عناص النموذج‪ ،‬عن طريق الضغط عىل مفتاح ‪. tab‬‬
‫‪wrap‬‬
‫خاصية تحدد إمكانية كش سطر اإلدخال‪ ،‬والتفاف النص إل سطر جديد‪ ،‬وهذه الخاصية‬
‫لن يظهر أي فارق ربي قيمها يف المتصفح‪ ،‬ولكن الفارق يكون عند اعتماد النموذج‪ ،‬ودخول‬
‫قيمتي‪:‬‬
‫ر‬ ‫السثفر‪ ،‬وتقبل هذه الخاصية‬
‫البيانات إل ر‬
‫وتعن أنه لن يحدث كش للسطر ‪ ،‬وال التفاف للنص عند‬‫ي‬ ‫‪ : soft -‬القيمة االفثاضية‪،‬‬
‫اعتماد النموذج‬
‫تعن حدوث انكسار للسطر‪ ،‬والتفاف النص لسطر جديد‪ ،‬عند اعتماد‬ ‫‪ : hard -‬قيمة ي‬
‫النموذج ويكون عرض السطر هو قيمة الخاصية ‪. cols‬‬

‫تعيي عدد آخر من الخصائص للعنرص >‪ ، <textarea‬وقد سبق دراستها يف مواضع‬ ‫ويمكن ر‬
‫وه ‪:‬‬
‫كثثة‪ ،‬ويمكن الرجوع إليها يف مواضعها السابقة‪ ،‬ي‬
‫ر‬
‫‪autocomplete , placeholder, spellcheck , readonly , required.‬‬

‫‪HTML Elements‬‬ ‫‪159‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<button>…</button‬‬
‫عنرص عىل هيئة زر‪ ،‬مخصص ألداء وظيفة معينة عند النقر عليه‪ ،‬ويختلف عن النوع‬
‫وسم البداية والنهاية‪ ،‬وليست قيمة‬
‫ي‬ ‫‪ button‬يف العنرص <‪ ، >input‬بأن قيمته تكتب ربي‬
‫للخاصية ‪ ،value‬كما أنه يمكن أن يحتوي داخله عىل أي عنرص من عناص ‪ ، html‬مثل <‪ >i‬أو‬
‫حي أن النوع ‪ button‬ال يقبل ذلك‪ ،‬ألن العنرص <‪>input‬‬‫وغثها‪ ،‬يف ر‬
‫<‪ >b‬أو <‪ >u‬أو <‪ >img‬ر‬
‫وبالتال ال يمكن أن يحتوي أي‬
‫ي‬ ‫هو عنرص فارغ ‪ empty element‬أي ليس له وسم نهاية‪،‬‬
‫عناص داخله‪.‬‬
‫>"‪<form id="buttons_form‬‬
‫>‪<label>Name:</label><br><input type="text" name="user"><br><br‬‬
‫"‪<label>Password:</label><br><input type="password‬‬
‫>‪name="pass"><br><br‬‬
‫"‪<button type="submit" name="sbmt" value="submit‬‬
‫>‪autofocus><strong><i>Submit</i></strong></button‬‬
‫>‪<button type="reset" name="rst"><b><u>Reset</u></b‬‬
‫>‪</button‬‬
‫>"‪<button type="button" name="btn"><img src="pic.png" width="30‬‬
‫>‪</button‬‬
‫>‪</form‬‬
‫وسم البداية‬
‫ي‬ ‫الحظ أن أسماء األزرار مكتوبة ربي‬
‫والنهاية‪ ،‬وأن الزر األول ‪ Submit‬ظهر بخط سميك‬
‫ومائل‪ ،‬لوجود محتواه ربي العنرصين <‪ >strong‬و<‪، >i‬‬
‫وظهر الزر ‪ Reset‬بخط سميك وتحته خط‪ ،‬لوجود‬
‫محتواه ربي العنرصين <‪ >b‬و <‪ ، >u‬بينما ظهر الزر الثالث‬
‫داخله صورة‪ ،‬لوجود العنرص >‪ <img‬يف محتواه‪ ،‬كما‬
‫ظهر الزر ‪ Sumbit‬محاطا بحدود خارجية ‪ outline‬نظرا‬
‫ئ‬
‫التلقاب للوحة المفاتيح‪.‬‬
‫ي‬ ‫كث‬‫لتعيي الخاصية ‪ autofocus‬له‪ ،‬فانتقل إليه‪ ،‬الث ر‬
‫ر‬
‫والعنرص <‪ >button‬له عدة أنواع تحددها الخاصية ‪. type‬‬

‫‪HTML Elements‬‬ ‫‪160‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪type‬‬
‫خاصية تحدد وظيفة العنرص >‪ <button‬ويسند لها عدة قيم‪:‬‬
‫السثفر‪.‬‬
‫‪ : submit -‬نوع يقوم باعتماد النموذج‪ ،‬إلرسال بياناته إل ر‬
‫الن تم إدخالها يف النموذج‪ ،‬وإعادة الحقول إل قيمها‬
‫‪ : reset -‬نوع يقوم بمسح البيانات ي‬
‫االفثاضية عند بداية تحميل الصفحة أو النموذج‪.‬‬
‫معي‪ ،‬عند الضغط عليه‪ ،‬مما‬‫برمج ر‬
‫ي‬ ‫‪ : button -‬نوع يقوم بتنفيذ وظيفة معينة‪ ،‬أو كود‬
‫يجعل سلوكه مشابها لسلوك النوع ‪ button‬يف العنرص <‪. >input‬‬
‫بما أن النوع ‪ submit‬للعنرص >‪ <button‬يقوم باعتماد بيانات النموذج‪ ،‬فالحظ أن‬
‫اللتي‬
‫هذا االعتماد يحتاج إل عدد من الخصائص مثل ‪ formaction, formnovalidate‬ر‬
‫سبق رشحهما من قبل‪ ،‬باإلضافة إل الخصائص ‪formtarget, formenctype,‬‬
‫‪ ، formmethod‬وتم رشح طبيعة عمل هذه الخصائص ر‬
‫وتأثثها يف ملحق ‪. 1‬‬

‫>"‪<form id="buttons_form‬‬
‫>‪<label>Name</label><br><input type="text" name="user"><br‬‬
‫"‪<label>Password</label><br><input type="password‬‬
‫>‪name="pass"><br><br‬‬
‫>‪<button type="reset" name="rst" value="reset">Reset</button‬‬
‫>‪<button type="button" name="dsbl" value="button" disabled‬‬
‫>‪Disabled</button‬‬
‫>‪</form><hr‬‬
‫>‪<button type="submit" form="buttons_form">Outside</button‬‬
‫الحظ أن الزر ‪ Outside‬يقوم باعتماد النموذج بالرغم‬
‫من وجوده خارجه‪ ،‬ألنه مرتبط بالنموذج عن طريق‬
‫الن أسند لها قيمة المعرف الفريد ‪id‬‬
‫الخاصية ‪ ، form‬ي‬
‫غث‬
‫للنموذج‪ ،‬كما أن الزر ‪ Disabled‬ظهر باهتا‪ ،‬ألنه ر‬
‫لتعيي الخاصية ‪ disabled‬له‪.‬‬
‫ر‬ ‫فعال‪ ،‬نظرا‬

‫‪HTML Elements‬‬ ‫‪161‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<select>…</select>
‫ الختيار بند واحد منها أو ر‬،‫ تضم مجموعة بنود‬،‫عنرص مخصص إلنشاء قائمة‬
. ‫أكث‬
<form>
<label for="car">Your favorite Car:</label><br><br>
<select id="car" name="car" >
<option value="bm">BMW</option>
<option value="ft">Fiat</option>
<option value="tt" selected>Toyota</option>
<option value="nsn" disabled>Nissan</option>
<option value="opl">Opel</option>
</select>
<button type="submit" >Submit</button>
</form>

: >select< ‫ويمكن تع ريي عدد من الخصائص للعنرص‬

id
‫ ليسهل‬، >label< ‫> بالعنرص‬select< ‫سثبط العنرص‬
‫ الذي ر‬،‫خاصية تحدد المعرف الفريد‬
.‫عملية البحث واالنتقال إل العنرص‬
name
.‫ والذي سيستخدم عند اعتماد النموذج‬، ‫خاصية تحدد اسم العنرص‬
size
>select < ‫الن سيتم عرضها يف واجهة القائمة‬
‫ ي‬،)‫خاصية تحدد عدد الصفوف (االختيارات‬
HTML Elements 162 [email protected]
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫ه‪0‬‬ ‫والقيمة تكون عددا صحيحا موجبا‪ ،‬إلظهار عدد الصفوف المطلوبة‪ ،‬والقيمة االفثاضية ي‬
‫وتعن عرض االختيار األول يف القائمة‪ ،‬عند بداية تحميل الصفحة أو النموذج‪ ،‬أو عرض‬ ‫ي‬
‫ر‬
‫تعيي الخاصية ألكث من اختيار ‪ ،‬يتم‬
‫تعيي الخاصية ‪ selected‬له‪ ،‬وإذا تم ر‬
‫االختيار الذي يتم ر‬
‫تعيي الخاصية له‪.‬‬
‫عرض آخر اختيار تم ر‬
‫>"‪<select id="car" name="car" size="2‬‬
‫تعيي‬
‫صفي من االختيارات نتيجة ر‬ ‫ر‬ ‫الحظ أنه تم عرض‬
‫الخاصية ‪ size‬للقائمة‪ ،‬وإسناد القيمة ‪ 2‬لها‪.‬‬

‫‪multiple‬‬
‫أكث من عنرص‪ ،‬عىل أن تكون القيمة‬ ‫خاصية تسمح باختيار ر‬
‫‪ size‬أكث من ‪ ، 1‬ويتم االختيار يف حالة اختيار عناص متتالية‪ ،‬عن‬
‫طريق الضغط عىل مفتاح ‪ ، Shift‬والنقر بزر الفأرة األيش عىل‬
‫العناص المختارة‪ ،‬أو باستخدام أسهم لوحة المفاتيح ألعىل أو‬
‫وف حالة اختيار عناص متباعدة‪ ،‬يكون االختيار عن طريق‬ ‫ألسفل‪ ،‬ي‬
‫الصغط عىل مفتاح ‪ ، Ctl‬والنقر بالزر األيش للفأرة عىل االختيارات‬
‫المطلوبة‪.‬‬
‫>‪<select id="car" name="car" size="4" multiple‬‬

‫تعيي خصائص أخرى للعنرص >‪ ، <select‬وقد تم رشحها من قبل عىل العديد من‬
‫ويمكن ر‬
‫العناص‪ ،‬مثل الخصائص ‪ autofocus‬و ‪ required‬و ‪ ، disabled‬ويمكن الرجوع إليها يف أي‬
‫من مواضعها السابقة‪.‬‬

‫ويكون كل عنرص يف القائمة عبارة عن عنرص <‪. >option‬‬

‫‪HTML Elements‬‬ ‫‪163‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<option>…</option‬‬
‫تعيي عدة خصائص له‪:‬‬
‫داخىل مخصص ليكون أحد اختيارات القائمة‪ ،‬ويتم ر‬
‫ي‬ ‫عنرص‬
‫‪selected‬‬
‫خاصية تجعل االختيار يظهر يف واجهة القائمة‪ ،‬عند بداية تحميل الصفحة أو النموذج‪،‬‬
‫بغض النظر عن ترتيبه داخل القائمة (مثل العنرص ‪ Toyota‬يف المثال السابق)‪.‬‬
‫‪disabled‬‬
‫وبالتال ال يمكن اختياره (مثل العنرص‬
‫ي‬ ‫غث فعال داخل القائمة‪،‬‬
‫خاصية تجعل العنرص ر‬
‫‪ Nissan‬يف المثال السابق)‪.‬‬
‫‪value‬‬
‫خاصية يتم تعيينها لكل عنرص‪ ،‬حيث إن قيمة هذه الخاصية‪ ،‬سوف تسند للخاصية‬
‫‪ name‬يف العنرص <‪ >select‬عند اعتماد النموذج‪ ،‬لتكون القيمة عند اعتماد النموذج بهذا‬
‫الشكل )‪. name(select name)=value(option value‬‬

‫وسم البداية والنهاية لهذا العنرص‪،‬‬

‫ي‬ ‫الحظ أن االسم الذي يظهر للمستخدم‪ ،‬هو النص ربي‬
‫وه الخاصية ‪. label‬‬
‫وهناك طريقة أخرى لوضع هذا االسم‪ ،‬ي‬
‫‪label‬‬
‫خاصية تحدد اسم العنرص الذي سيعرض للمستخدم يف‬
‫ً‬
‫وسم البداية والنهاية للعنرص‬
‫ي‬ ‫بي‬ ‫ر‬ ‫السم‬ ‫ا‬ ‫وضع‬ ‫من‬ ‫بدال‬ ‫القائمة‪،‬‬
‫<‪ ، >option‬و يف حالة تعيينها واختالف قيمتها‪ ،‬عن قيمة االسم‬
‫وسم البداية والنهاية‪ ،‬تكون السيادة لقيمة الخاصية ‪، label‬‬
‫ي‬ ‫ربي‬
‫وسم العنرص‪.‬‬
‫ي‬ ‫وإهمال النص ربي‬

‫‪<option‬‬ ‫>‪value="bm" label="TOYOTA">Toyota</option‬‬

‫‪HTML Elements‬‬ ‫‪164‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫لقد وجدت بالتجربة‪ ،‬أن قيمة الخاصية ‪ label‬ال تظهر يف متصفح ‪ chrome‬عند‬
‫حي أنها تعمل‬
‫تعيينها للعنرص >‪ ، <option‬وتعمل بشكل جيد مع متصفح ‪ ، Firefox‬يف ر‬
‫بشكل جيد عىل كل المتصفحات مع العنرص >‪ <optgruop‬والذي سندرسه بعد هذا‬
‫العنرص ‪ ،‬فإذا صادفتك نفس المشكلة مع العنرص >‪ ، <option‬فاألفضل أن تستخدم دائما‬
‫وسم البداية والنهاية لهذا العنرص‪ ،‬ليكون هو االختيار الظاهر للمستخدم‪.‬‬
‫ي‬ ‫النص ربي‬
‫ويمكن وضع مجموعة من االختيارات داخل عنرص >‪.<optgroup‬‬
‫‪Tag Omission‬‬
‫يمكن االستغناء عن وسم النهاية للعنرص >‪ <option‬إذا تبع محتواه عنرص >‪<option‬‬
‫آخر‪ ،‬أو كان هو آخر عنرص يف قائمة االختيارات‪ ،‬وقد سبق رشح ذلك يف عدة مواضع سابقة‪،‬‬
‫وعليك أن تتوقع نفس السلوك مع العنرص >‪. <option‬‬

‫يمكن وضع عدد من االختيارات تحت مجموعة واحدة باستخدام العنرص >‪. <optgroup‬‬

‫‪HTML Elements‬‬ ‫‪165‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<optgroup>…</optgroup>
‫تميث‬
‫ فيمكن ر‬،‫ بوضعها داخله‬،‫عنرص يقوم بدور العنرص األب لمجموعة من االختيارات‬
:‫ أو عدم تفعيل مجموعة معينة من االختيارات دفعة واحدة‬،‫االختيارات عن بعضها‬
<form><label for="car">Your favorite Car:</label><br><br>
<select id="car" name="car" >
<optgroup label="Japanese cars">
<option value="ft" label="Toyota"></option>
<option value="nsn" label="Nissan"></option>
</optgroup>
<optgroup label="German cars">
<option value="bm" label="BMW"></option>
<option value="tt" label="Mercedes"></option>
</optgroup>
<optgroup label="French Cars" disabled>
<option value="cit" label="Citroen"></option>
<option value="pgt" label="Peougeot"></option>
</optgroup>
</select>
<button type="submit" >Submit</button></form>
>optgroup< ‫ للعنرص‬label ‫الحظ أن قيمة الخاصية‬
‫ الحظ أن كل‬،‫ وكذلك‬،‫ظهرت أعىل مجموعة االختيارات تحتها‬
‫ نظرا‬،‫غث فعالة‬
‫ أصبحت ر‬French cars ‫اختيارات المجموعة‬
‫ الذي‬، >optgroup< ‫ للعنرص‬disabled ‫لتعيي الخاصية‬ ‫ر‬
.‫يضم هذه المجموعة من السيارات‬
Tag Omission
<optgroup> ‫يمكن االستغناء عن وسم النهاية للعنرص‬
‫ أو كان هو آخر‬،‫< آخر‬optgroup> ‫إذا تبع محتواه عنرص‬
‫ وعليك‬،‫ وقد سبق رشح ذلك يف عدة مواضع سابقة‬،‫عنرص ابن‬
. <optgroup> ‫أن تتوقع نفس السلوك مع العنرص‬
HTML Elements 166 [email protected]
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

<fieldset>....</fieldset> .

‫ بينهم عالقة‬، >form< ‫ مخصص ليجمع عددا من عناص النموذج‬،‫عنرص مجمع للحقول‬
‫ مثل جعل هذه‬،‫ حيث يمكن التحكم فيهم دفعة واحدة‬،‫أو وظيفة معينة يف إطار واحد‬
disabled ‫تعيي الخاصية‬
‫ فال يستطيع المستخدم التعامل معها عن طريق ر‬،‫غث فعالة‬
‫العناص ر‬
readonly ‫تعيي الخاصية‬‫ر‬ ‫ عن طريق‬،‫غث قابلة للتعديل‬‫ أو جعل كل العناص ر‬،‫للمجمع‬
‫تعيي الخاصية‬
‫ عن طريق ر‬،‫ أو جعل ملء هذه العناص صوري العتماد النموذج‬،‫للمجمع‬
.‫ للمجمع‬required

<legend>....</legend>
‫ ويمكن إنشاؤه يف أي‬،‫> مخصص إلنشاء عنوان للمجمع‬fieldset< ‫داخىل للمجمع‬ ‫ي‬ ‫عنرص‬
‫ ولكن الممارسة‬،‫ وسوف يتم التعرف عليه عىل أنه عنوان للمجمع‬،‫موضع داخل المجمع‬
.‫والتطبيق األمثل أن يتم إنشاؤه كأول عنرص داخل المجمع‬
<form><h3>Login</h3>
<label for="myname">Name<br></label><input type="text"
id="myname" name="user"><br>
<label>Password<br> <input type="password"
name="pass"></label><br><br>
<button type="submit" style="width: 85px">Ok</button>
<button type="button" style="width: 85px"> Cancel</button><br><br>
<fieldset name="frame" style="width: 180px;" disabled>
<legend>Sign up</legend>
<label for="mail">Email </label><input type="email" id="mymail"
name="ml"><br>
<label for="mail">Phone </label><input type="tel" id="mytel"
name="phn"><br>
</fieldset>
</form>

HTML Elements 167 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الحظ أن المجمع اتخذ عنوانا وهو ‪Sing up‬‬

‫وسم البداية والنهاية للعنرص‬
‫ي‬ ‫وهذا هو النص ربي‬
‫<‪. >legend‬‬
‫الحظ أن العناص داخل المجمع ظهرت باهتة‬
‫تعيي الخاصية ‪disabled‬‬ ‫ر‬ ‫وغث فعالة‪ ،‬نتيجة‬ ‫ر‬
‫للمجمع‪ ،‬فتم تطبيقها عىل جميع العناص داخله‪.‬‬
‫الحظ يف الكود السابق‪ ،‬أن المجمع يقع داخل‬
‫وبالتال‪ ،‬فعند تنشيطه سيتم إرسال بيانات‬
‫ي‬ ‫النموذج‪،‬‬
‫العناص داخله بعد ملئها‪ ،‬عند اعتماد النموذج‪ ،‬وإن‬
‫كانت عناص المجمع خارج النموذج‪ ،‬فيمكن الربط‬
‫تعيي الخاصية ‪،form‬‬‫وبي النموذج‪ ،‬عن طريق ر‬ ‫بينها ر‬
‫للعنرص المطلوب ربطه بالقائمة من داخل المجمع‪،‬‬
‫عىل أن يسند له قيمة المعرف الفريد للنموذج ‪. id‬‬
‫ه‬‫أنن أطلقت عىل عنرص >‪ < fieldset‬اسم كالمجمعك ‪ ،‬حيث إن وظيفته ي‬ ‫الحظ ي‬
‫تجميع عدد من عناص النموذج يف مجموعة واحدة‪ ،‬وذلك حن ال يحدث لديك خلط بينه‬
‫وبي عنرص اإلطار >‪ ، < iframe‬والذي يقوم بدمج مصادر خارجية إل الصفحة‪ ،‬وسوف‬ ‫ر‬
‫ندرسه ضمن العناص المدمجة‪ ،‬يف الجزء القادم من هذا المرجع‪.‬‬

‫‪HTML Elements‬‬ ‫‪168‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<datalist>....</datalist‬‬
‫عنرص مخصص إلنشاء قائمة اختيارات‪ ،‬ترتبط بعنرص <‪ >input‬حيث يتم إدخال أحد‬
‫وسم عنرص <‪. >option‬‬
‫ي‬ ‫خياراتها إل العنرص<‪ ، >input‬وأي خيار يف القائمة يكون ربي‬
‫>‪<form‬‬
‫>‪<label for="jobs">Name: </label‬‬
‫>"‪<input id="jobs" name="jobs" list="jbs‬‬
‫>"‪<datalist id="jbs‬‬
‫>‪<option value="Design"></option‬‬
‫>‪<option value="Developing"></option‬‬
‫>‪<option value="Maintenance"></option‬‬
‫>‪<option value="Acounting"></option‬‬
‫>‪</datalist‬‬
‫>‪<button type="submit" style="width: 85px">Ok</button‬‬
‫>‪</form‬‬
‫الحظ أن القائمة تنسدل عند‬
‫الصغط عىل العنرص <‪ >input‬وتظهر‬
‫كجزء منه‪.‬‬

‫‪list‬‬
‫خاصية تربط ربي عنرص القائمة <‪ >datalist‬والعنرص <‪ ، >input‬عن طريق تعيينها‬
‫للعنرص <‪ ، >input‬وتسند لها قيمة المعرف الفريد ‪ id‬لعنرص القائمة‪.‬‬

‫اعلم أنك تستطيع أن تضيف خيارات‬

‫أخرى لهذه القائمة يف حالة الرغبة يف‬
‫غث موجود يف القائمة‪،‬‬ ‫إدخال عنرص ر‬
‫فيمكن إدخاله عن طريق لوحة المفاتيح‪،‬‬
‫وسيتم إدراج العنرص الجديد يف القائمة‬
‫عند فتحها مرة أخرى‪.‬‬
‫‪HTML Elements‬‬ ‫‪169‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<output>....</output‬‬
‫معي‪ ،‬ولكن ال يتم اعتماد قيمته عند اعتماد النموذج‪،‬‬
‫برمج ر‬
‫ي‬ ‫عنرص يعرض مخرجات كود‬
‫أي أنه مخصص للعرض فقط‪.‬‬
‫‪<form‬‬
‫>")‪onchange="result.value=Number(first.value)+Number(second.value‬‬
‫>"‪<input type="number" id="frst" name="first" value="20‬‬
‫>"‪<input type="number" id="scnd" name="second" value="30‬‬
‫>‪<output name="result" for="first second">0</output‬‬
‫>‪</form‬‬

‫يوجد لدينا عنرصي ‪ input‬من النوع ‪ ، number‬األول ‪ first‬وأسندت له قيمة للخاصية‬

‫الثاب ‪ second‬وأسندت له القمية ‪ ، 30‬ولدينا عنرص <‪ >output‬هو‬ ‫وه ‪ ، 20‬و ي‬
‫‪ value‬ي‬
‫وسم البداية والنهاية‪ ،‬ولتكن ‪. 0‬‬
‫ي‬ ‫‪ ، result‬ونسند له أي قيمة ربي‬
‫جديدتي إل عنرصي <‪ >input‬أي ‪ first‬و ‪ ، second‬وجمع‬ ‫ر‬ ‫قيمتي‬
‫ر‬ ‫المطلوب إدخال‬
‫القيمتي ‪ ، first+second‬ووضع ناتج الجمع يف العنرص <‪. >output‬‬‫ر‬
‫تغث يف‬
‫وه تنفذ خطوات معينة عند حدوث أي ر‬ ‫‪ -‬نستخدم الخاصية ‪ ، onchange‬ي‬
‫القيمة‪ ،‬داخل أي حقل من حقول اإلدخال <‪. >input‬‬
‫‪ -‬نستخدم الخاصية ‪ value‬للحصول عىل القيمة داخل كل حقل‪.‬‬
‫‪ -‬نستخدم الدالة ‪ Number‬لتحويل قيم المدخالت والمخرجات إل أرقام‪ ،‬حيث إن‬
‫مربعات اإلدخال للعنرص <‪ >input‬تقبل قيمتها عىل هيئة نص‪ ،‬ويجب تحويله لرقم‪ ،‬حن‬
‫يمكن إجراء أي عملية حسابية عليه‪.‬‬

‫‪for‬‬
‫حقىل اإلدخال <‪ >input‬وحقل اإلخراج <‪ >output‬حيث يتم تعيينها‬
‫ي‬ ‫خاصية تربط ربي‬
‫لحقىل اإلدخال‪.‬‬
‫ي‬ ‫للعنرص <‪ >output‬ويسند لها قيمة الخاصية ‪name‬‬

‫‪HTML Elements‬‬ ‫‪170‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫عناص الدمج ‪Embedding Elements‬‬

‫مجموعة من العناص ال تقوم بإنشاء عنرص جديد‪ ،‬ولكن تقوم بدمج مصادر خارجية يف‬
‫الخارج‪ ،‬وإسناده كقيمة للخاصية ‪، src‬‬
‫ي‬ ‫الصفحة‪ ،‬عن طريق تتبع المسار الموجود به المصدر‬
‫أو أي خاصية أخرى تقوم بتتبع المسار يف عنرص الدمج‪ ،‬ويكون دور هذه المجموعة من‬
‫العناص هو احتواء المصادر الخارجية وضبط خصائصها‪ ،‬وهذه المصادر الخارجية قد تكون‬
‫وغثها‪.‬‬
‫صورا أو ملفات نصية أو ملفات صوت أو فيديو أو صفحات ومواقع ويب ر‬
‫>‪<img‬‬
‫عنرص ‪ empty element‬يقوم بإدخال الصور بأنواعها إل الصفحة‪.‬‬
‫>"‪<img src="road.jpg" alt="nice_view" width="200" height="120‬‬
‫الحظ أنه تم إدخال الصورة إل الصفحة‪ ،‬وتم ضبط ارتفاعها‬
‫وعرضها حسب المطلوب‪.‬‬
‫تعيي عدة خصائص للعنرص <‪: >img‬‬ ‫ويمكن ر‬
‫‪src‬‬
‫خاصية يسند إليها مسار الصورة المطلوب دمجها يف الصفحة‪ ،‬ويتم الحصول عىل هذا‬
‫المسار بعدة طرق‪:‬‬

‫النسن أو ‪relative path‬‬

‫ي‬ ‫الطريقة األول‪ :‬وتسم المسار‬
‫‪ -1‬إذا كانت الصورة مخزنة يف نفس المكان (الفولدر أو‬
‫‪ )directory‬المخزن فيه الصفحة‪ ،‬نضع اسم الصورة‬
‫مباشة كقيمة للخاصية ‪ ، src‬كما يف المثال السابق‬ ‫ر‬
‫ك‪road.jpg‬ك ‪.‬‬
‫‪ -2‬إذا كانت الصورة مخزنة داخل فولدر‬
‫(‪ )directory‬بجانب الصفحة‪ ،‬نكتب اسم الفولدر ثم‬
‫اسم الصورة ويفصل بينهما ك‪/‬ك ‪.‬‬

‫>"‪<img src="image/road.jpg " width="200" height="120‬‬

‫‪HTML Elements‬‬ ‫‪171‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الداخىل‪ ،‬بعد‬
‫ي‬ ‫وإذا كانت الصورة يف فولدر داخل فولدر‪ ،‬نقوم بإضافة اسم الفولدر االبن‬
‫الخارج ويفصل بينهما ك‪/‬ك ‪.‬‬
‫ي‬ ‫اسم الفولدر األب‬
‫>"‪<img src="image/child/road.jpg " width="200" height="120‬‬
‫‪ -3‬إذا حدث العكس وكانت الصفحة مخزنة يف‬
‫نقطتي‬
‫ر‬ ‫الفولدر‪ ،‬والصورة خارج الفولدر نكتب‬
‫وشطة مائلة قبل اسم الصورة‪ ،‬كدليل عىل أن مسار‬‫ر‬
‫الصورة سوف يكون للخارج خطوة واحدة‪ ،‬وإذا خرجت‬
‫النقطتي ر‬
‫والشطة المائلة‪.‬‬ ‫الصورة ر‬
‫أكث من خطوة‪ ،‬نكرر وضع‬
‫ر‬
‫>"‪<img src="../road.jpg " width="200" height="120‬‬

‫الطريقة الثانية‪ ،‬وتسم المسار المطلق ‪absolute path‬‬

‫وتبدأ هذه الطريقة بأن تقف عىل الصورة‬
‫بالفأرة‪ ،‬وتضغط بمفتاح الفأرة األيمن وتختار‬
‫البند ‪ properties‬من القائمة‪ ،‬فيفتح لك‬
‫مربــع الخصائص‪ ،‬انسخ منه المسار أمام‬
‫‪ ، location‬ثم ضع بعده رشطة مائلة‪ ،‬ثم‬
‫اسم الصورة كقيمة للخاصية ‪. src‬‬

‫>"‪<img src="C:\Users\wamo\Desktop\road.jpg" width="200‬‬

‫الطريقة الثالثة‪ ،‬الحصول عىل صورة من موقع ويب‬

‫إذا كانت الصورة موجودة عىل موقع ويب‪ ،‬نضع رابط الصورة كقيمة للخاصية ‪src‬‬
‫‪<img src="https://cdn.pixabay.com/photo/2017/11/15/13/27/river-‬‬
‫>"‪2951997_960_720.jpg" alt="nice_view" width="200" height="120‬‬

‫‪alt‬‬
‫خاصية تعرض نص يوضح مضمون الصورة‪ ،‬يف حالة حدوث‬
‫خطأ يف مسار الصورة‪ ،‬وعدم ظهورها يف المتصفح‪.‬‬
‫‪HTML Elements‬‬ ‫‪172‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪width‬‬
‫خاصية توضح قيمة عرض الصورة الذي ستظهر به يف المتصفح‪ ،‬ويمكن أن تعط قيمة‬
‫مطلقة مقدرة بالـ ‪ pixels‬أو ‪ ،px‬ولكن تكتب القيمة عىل هيئة رقم بدون وحدة بعدها (‪، )100‬‬
‫ويمكن أن تكون نسبة من عرض العنرص األب الذي يحتوي الصورة‪ ،‬وإذا كانت بدون عنرص‬
‫ً‬
‫أب‪ ،‬فتكون قيمة عرض الصورة نسبة من عرض الصفحة (مثال ‪.)30%‬‬
‫>"‪<img src="road.jpg" alt="nice_view" width="30%‬‬

‫‪height‬‬
‫خاصية توضح قيمة ارتفاع الصورة الذي ستظهر به يف المتصفح‪ ،‬ويمكن أن تعط قيمة‬
‫مطلقة مقدرة بالـ ‪ ، pixels‬ولكن تكتب القيمة عىل هيئة رقم بدون وحدة بعدها (‪، )100‬‬
‫ويمكن أن تكون نسبة من ارتفاع العنرص األب الذي يحتوي الصورة‪ ،‬وإذا كانت بدون عنرص‬
‫ً‬
‫أب‪ ،‬فتكون قيمة ارتفاع الصورة نسبة من ارتفاع الصفحة (مثال ‪.)15%‬‬
‫>"‪<img src="road.jpg" alt="nice_view" height="15%‬‬

‫متغثا حسب‬
‫تعيي العرض أو االرتفاع كنسب مئوية‪ ،‬سيجعل حجم الصورة ر‬ ‫الحظ أن ر‬
‫تعي خاصية‬
‫تغث أبعادهما‪ ،‬لذلك يجب عند تحديد العرض واالرتفاع كنسب مئوية‪ ،‬أن ر‬ ‫ر‬
‫واحدة فقط منهما‪ ،‬لتحافظ عىل النسبة ربي العرض واالرتفاع وال تتشوه الصورة‪.‬‬

‫‪decoding‬‬
‫تشفث الصورة‪ ،‬ولها ثالث قيم‪:‬‬
‫ر‬ ‫تعط المتصفح تلميحا عن طريقة فك‬ ‫ي‬ ‫خاصية‬
‫باف المهام‪ ،‬أي أن كل‬
‫تشفث الصورة يكون بشكل مثامن مع ي‬ ‫ر‬ ‫تعن أن فك‬ ‫‪ : sync -‬قيمة ي‬
‫مهمة يتم تنفيذها عىل حدة‪ ،‬واحدة تلو األخرى‪.‬‬
‫باف المهام‪ ،‬أي أنه‬
‫غث مثامن مع ي‬ ‫تشفث الصورة‪ ،‬يكون بشكل ر‬
‫ر‬ ‫تعن أن فك‬
‫‪ : async -‬قيمة ي‬
‫باف العناص‪.‬‬
‫يتم أثناء أداء مهام أخرى‪ ،‬أي بالتوازي معها‪ ،‬لتشي ــع عملية عرض ي‬
‫التشفث‪ ،‬ويثك للمتصفح تحديد الطريقة األنسب‬
‫ر‬ ‫‪ : auto -‬ال يوجد طريقة محددة لفك‬
‫الطريقتي السابقيي‪.‬‬
‫ر‬ ‫للمستخدم من‬
‫‪crossorigin‬‬
‫خاصية توضح أنه يف حالة دمج صورة‪ ،‬من موقع أو صفحة معينة إل صفحتنا‪ ،‬فيمكن‬
‫‪HTML Elements‬‬ ‫‪173‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫إرسال معلومات عن صفحتنا (… ‪ )basic authentication, cookies,‬إل هذا الموقع‪ ،‬وهذه‬

‫وشح مدلول كل منهما ملحق ‪. 1‬‬ ‫الخاصية لها قيمتان ‪ anonymous‬و ‪ use-credentials‬ر‬

‫‪usemap‬‬
‫هندش‪ ،‬لتكون ‪clickable link‬‬
‫ي‬ ‫معي من الصورة عىل شكل‬ ‫خاصية تقوم بتخصيص جزء ر‬
‫‪ ، area‬أي منطقة حساسة للنقر بزر الفأرة األيش‪ ،‬ومرتبطة بصفحة أو ملف أو صورة أو رابط‬
‫غثه‪.‬‬
‫أو وثيقة أو ر‬
‫‪ismap‬‬
‫السثفر‪ ،‬إذا كانت‬
‫ر‬ ‫تعن أن إرسال إحداثيات النقر عىل المنطقة الحساسة إل‬
‫خاصية ي‬
‫الصورة محتواة داخل العنرص <‪. >a‬‬
‫‪loading‬‬
‫خاصية تحدد طريقة تحميل الصورة‪ ،‬ولها قيمتان‪:‬‬
‫وتعن أن تحميل الصورة يتم فورا عند بداية تحميل‬ ‫ي‬ ‫‪ : eager -‬القيمة االفثاضية‪،‬‬
‫الصفحة‪ ،‬حن وإن كانت الصورة خارج شاشة العرض (أي لم ينتقل إليها المستخدم أو لم‬
‫يشاهدها بعد)‪.‬‬
‫تعن أن تحميل الصورة ال يتم‪ ،‬إال عندما تقثب الصورة من شاشة العرض بمسافة‬‫‪ : lazy -‬ي‬
‫معينة‪ ،‬لتكون جاهزة للعرض‪.‬‬
‫‪srcset‬‬
‫خاصية تتحكم يف إظهار الصورة بالجودة المناسبة للجهاز الذي تعرض عليه‪ ،‬فاألجهزة‬
‫الصغثة مثل الهواتف النقالة ال تحتاج إل صورة عالية الجودة مثل شاشة الحاسب‪ ،‬والعكس‬
‫ر‬
‫صحيح‪ ،‬فال يمكن استخدام الصورة منخفضة الجودة الخاصة بالهواتف النقالة مع األجهزة‬
‫الكبثة‪ ،‬ألن الصور سوف تظهر منقطة ومشوهة‪.‬‬
‫ر‬
‫أكث من جودة‪ ،‬ونكتب‬ ‫لذلك‪ ،‬فهذه الخاصية تحتوي قيمتها عىل صورة واحدة‪ ،‬ولكن لها ر‬
‫والن‬
‫بجوار اسم كل صورة حجم شاشة الجهاز الذي ستعرض عليه‪ ،‬ويفصل ربي كل جودة ي‬
‫تليها بفاصلة بهذا الشكل "‪ ، "river-2X.jpg 2x , river-1X.jpg 1x‬حيث تمثل القيمة ‪1x‬‬
‫وبالتال أقل جودة‪ ،‬ثم القيمة ‪ 2x‬تمثل شاشة أكث وجودة أعىل‪ ،‬وكلما زاد‬
‫ي‬ ‫أقل حجم للشاشة‬
‫‪HTML Elements‬‬ ‫‪174‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫حجم الشاشة زادت القيمة إل ‪ 3x‬وهكذا‪ ،‬وعند عرض الصورة عىل أي جهاز‪ ،‬يتم اختيار‬
‫الجودة المناسبة لهذا الجهاز‪ ،‬ويمكن االستغناء عن القيمة ‪ 1x‬الخاصة بالجودة األقل‪ ،‬حيث‬
‫ه أقل جودة‪:‬‬
‫سيدرك المتصفح تلقائيا‪ ،‬أن أول قيمة ي‬
‫"‪<img src="river-1X.jpg" alt="river‬‬
‫>"‪srcset="river-1X.jpg, river-2X.jpg 2x, river-3X.jpg 3x‬‬
‫التطبيق‪:‬‬
‫ولتطبيق الخاصية السابقة‪ ،‬قمنا باختيار ثالث نسخ من صورة واحدة‪ ،‬حيث تمثل هذه‬
‫النسخ ثالثة أنواع من الجودة‪ ،‬جودة منخفضة وجودة متوسطة وجودة عالية‪.‬‬

‫‪river-1X‬‬ ‫‪river-2X‬‬ ‫‪river-3X‬‬

‫وأسندنا أسماء هذه النسخ مع جودتها كقيمة للخاصية ‪ ، srcset‬ويفصل ربي كل نسخة‬
‫واألخرى بفاصلة‪ ،‬وبعد إعداد الكود كما بالشكل السابق‪ ،‬وحفظه وفتحه يف المتصفح‪ ،‬نضغط‬
‫مفتاح ‪ ، F12‬أو نضغط عىل مفاتيح ‪ ، Ctl+Shift+i‬أو نضغط مفتاح الفأرة األيمن‪ ،‬ونختار من‬
‫القائمة المنسدلة األمر ‪ ، inspect‬ليفتح لنا المتصفح تبويبات أدوات المطور ‪developer‬‬
‫‪ tools‬ونختار منها ‪ reponsive design mode‬كما يف متصفح ‪: Firefox‬‬

‫‪HTML Elements‬‬ ‫‪175‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫يشث إل مكان أيقونة ‪ reponsive design mode‬يف متصفح ‪، Firefox‬‬ ‫السهم السابق ر‬
‫أما متصفح ‪ Chrome‬فتكون عىل يسار المستخدم‪ ،‬باسم ‪. toggle device toolbar‬‬

‫الحظ ف ر‬
‫الشيط العلوي أسماء أجهزة ذات‬ ‫ي‬
‫شاشات ودقة عرض مختلفة‪ ،‬اخث بعضها‬
‫التغث يف جودة‬
‫ر‬ ‫واحدا تلو اآلخر ‪ ،‬والحظ‬
‫تغيث الجهاز‪.‬‬
‫الصورة‪ ،‬مع ر‬

‫الحظ أن متصفح ‪ Chrome‬لن يقوم‬

‫بعرض النتيجة فورا مثل متصفح ‪ Firefox‬ألنه‬
‫يحتاج لتفعيل الخاصية ‪ Disable cashe‬تحت‬
‫التبويب ‪ Network‬يف تبويبات ‪Developer‬‬
‫‪ tools‬كما بالشكل المقابل‪ ،‬ثم عمل ‪refresh‬‬
‫للصفحة مع كل اختيار لجهاز جديد‪.‬‬

‫القيمة ‪w‬‬
‫وه القيمة ‪ ، w‬حيث يتم كتابة عرض الصورة‬
‫للتعبث عن جودة الصورة ي‬
‫ر‬ ‫يوجد قيمة أخرى‬
‫يعن أن كل‬
‫متبوعا بالحرف ‪ w‬مثلك‪river-1X.jpg 400w, river-2X.jpg 700w‬ك مما ي‬
‫ً‬
‫نسخة من الصورة‪ ،‬بدال من أن نحدد جودتها عن طريق الرمز ‪ ، x‬قمنا بتحديد جودتها‬
‫باستخدام عرض الصورة عن طريق الرمز ‪ ،w‬وحن يدرك المتصفح من يستخدم أي نسخة‬
‫بتعيي الخاصية ‪. sizes‬‬
‫ر‬ ‫من الصورة‪ ،‬نقوم‬
‫‪HTML Elements‬‬ ‫‪176‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪sizes‬‬
‫خاصية تقوم بتحديد عرض الشاشة‪ ،‬يتبعه عرض الصورة الذي ستظهر به‪:‬‬
‫"‪<img src="river-1X.jpg‬‬
‫"‪srcset="river-1X.jpg 400w, river-2X.jpg 590w,river-3X.jpg 800w‬‬
‫‪sizes="(max-width:400px) 200px, (max-width:590px) 400px, (max-width:‬‬
‫>"‪800px) 600px‬‬
‫ولتطبيق هذه الخاصية قمنا باختيار نفس الصورة السابقة‪ ،‬بنسخها الثالث ذات أنواع‬
‫الجودة المختلفة‪ ،‬وأسندنا أسماء هذه الصورة للخاصية ‪ ، srcset‬تماما كما فعلنا يف المرة‬
‫السابقة‪ ،‬ولكننا هذه المرة أعقبنا اسم كل نسخة من الصورة بعرض هذه الصورة متبوعا‬
‫بالحرف ‪. w‬‬
‫وهناك عدة طرق لمعرفة عرض الصورة أبسطها‬
‫أن تقوم بفتح الصورة عن طريق برنامج الرسام‪ ،‬الذي‬
‫يأب مع نظام الويندوز‪ ،‬فستجد أن أبعاد الصورة يف‬ ‫ي‬
‫السفىل للثنامج‪:‬‬ ‫الشيط‬ ‫ر‬
‫ي‬
‫افتح صفحة الويب يف المتصفح‪ ،‬وقم بفتح‬
‫‪ responsive desgin mode‬كما تعلمنا سابقا‪ ،‬وقم‬
‫وتغث‬
‫تغث نسخة الصورة‪ ،‬ر‬ ‫بسحب الحد األيمن‪ ،‬والحظ ر‬
‫الن تقوم بسحبها‪ ،‬كما‬ ‫بتغث عرض الصفحة ي‬ ‫ر‬ ‫عرضها‪،‬‬
‫التال‪:‬‬
‫بالشكل ي‬
‫الحظ أن الصورة ظلت محتفظة‬
‫بجودتها المنخفضة (‪ )400w‬وعرض قدره‬
‫‪ 200px‬طالما بق عرض الصفحة ‪400px‬‬
‫أو أقل‪ ،‬فإذا زاد عرض الصفحة عن ‪400px‬‬
‫تغثت الصورة للنسخة ذات الجودة‬ ‫ر‬
‫المتوسطة ‪ 800w‬وزاد عرضها إل ‪400px‬‬
‫طالما بق عرض الصفحة أقل من ‪. 600px‬‬

‫‪HTML Elements‬‬ ‫‪177‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫فإذا زاد عرض‬

‫الصفحة عن ‪600px‬‬
‫تغثت الصورة للنسخة‬
‫ر‬
‫عالية الجودة ‪.1200w‬‬

‫الحظ أن المتصفحات تعرض النتائج بدقة (وأحيانا مع هامش بسيط بالزيادة أو النقصان‬
‫وتغيث عرضها‪ ،‬يف‬
‫ر‬ ‫تغيث نسخة الصورة‬
‫التغيث يف حجم الصفحة‪ ،‬ر‬‫ر‬ ‫يف عرض الصفحة) ‪ ،‬ويتبع‬
‫الن تم تعريفها يف الخاصية ‪. sizes‬‬
‫الحدود ي‬
‫الحظ أن متصفح ‪ Firefox‬يمكنه زيادة أو تقليل عرض الصفحة ألي عدد من المرات‪،‬‬
‫معايث الخاصية ‪ ، sizes‬مع كل زيادة أو نقصان يف عرض‬
‫ر‬ ‫تتغث نسخة الصورة حسب‬
‫وسوف ر‬
‫حي أن متصفح ‪ Chrome‬ال يعيد النسخة األقل جودة من الصورة مهما‬ ‫الصفحة‪ ،‬يف ر‬
‫وتغثت‬
‫ر‬ ‫أنقصنا من عرض الصفحة‪ ،‬طالما قمنا بزيادة عرض الصفحة ولو مرة واحدة‪،‬‬
‫النسخة إل النسخة األعىل جودة‪ ،‬فإنه يظل محتفظا بالنسخة األعىل جودة‪ ،‬حن تقوم‬
‫بعمل ‪ refresh‬للصفحة‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪img‬‬
‫;‪display: inline-block‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪178‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<map>…</map‬‬
‫عنرص يستخدم لتخصيص منطقة من صورة معينة‪ ،‬لتكون منطقة حساسة للنقر بزر‬
‫الفأرة األيش ‪ ، clickable link area‬ولها رابط بصفحة أو صورة أو ملف أو جزء من نفس‬
‫تعيي الخاصية ‪ name‬لهذا العنرص‪ ،‬ليتم ربطه بالصورة المطلوبة‪ ،‬عن طريق‬
‫الصفحة‪ ،‬ويتم ر‬
‫الن يتم تعيينها‬
‫إسناد قيمة الخاصية ‪ name‬يسبقها الرمز ك‪#‬ك كقيمة للخاصية ‪ ،usemap‬ي‬
‫لهذه الصورة‪.‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪map‬‬
‫;‪display: inline‬‬
‫}‬

‫ويتم تحديد المنطقة الحساسة للنقر عن طريق العنرص <‪. >area‬‬

‫>‪<area‬‬
‫نعي له مجموعة من‬
‫عنرص ‪ ، empty element‬يقوم بتحديد منطقة النقر‪ ،‬ويمكن أن ر‬
‫الخصائص‪:‬‬
‫‪shape‬‬
‫ر‬
‫بالمؤش‪ ،‬وتقبل أربــع قيم‪:‬‬ ‫خاصية تحدد شكل المنطقة الحساسة للنقر‬
‫‪ : default -‬تكون الصورة كلها منطقة حساسة للنقر‪.‬‬
‫ً‬
‫‪ : rect -‬يكون شكل المنطقة الحساسة للنقر مستطيال‪.‬‬
‫‪ : circle -‬يكون شكل المنطقة الحساسة للنقر دائرة‪.‬‬
‫‪ : poly -‬ويكون شكل المنطقة الحساسة للنقر متعدد األضالع (ثالثة أضالع أو ر‬
‫أكث)‪.‬‬

‫‪coords‬‬
‫خاصية تحدد إحداثيات الشكل الذي يتم اختياره يف الخاصية السابقة‪:‬‬
‫يف حالة المستطيل ‪ rect‬تكون اإلحداثيات عبارة عن أربعة أعداد‪ ،‬يفصل بينها‬
‫األفق‬
‫ي‬ ‫والثاب‪ ،‬نقطة بداية رسم المستطيل عىل المحورين‬
‫ي‬ ‫بفاصلة‪ ،‬حيث يمثل العددان األول‬
‫‪HTML Elements‬‬ ‫‪179‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫أخثا العدد الرابع ويمثل ارتفاع المستطيل‪،‬‬

‫أش‪ ،‬ثم العدد الثالث يمثل عرض المستطيل‪ ،‬و ر‬
‫والر ي‬
‫لتكون القيمة بهذا الشكل ك‪0,0,200,75‬ك‪.‬‬
‫يف حالة الدائرة ‪ circle‬تكون اإلحداثيات عبارة عن ثالثة أعداد‪ ،‬يفصل بينها بفاصلة‪،‬‬
‫أش لنقطة مركز الدائرة‪ ،‬والعدد‬
‫فق والر ي‬‫اإلحداثيي األ ي‬
‫ر‬ ‫والثاب‪،‬‬
‫ي‬ ‫حيث يمثل العددين األول‬
‫الثالث يمثل نصف قطر الدائرة‪ ،‬لتكون القيمة بهذا الشكل ك‪150,100,75‬ك‪.‬‬
‫يف حالة الشكل متعدد األضالع ‪ poly‬تكون اإلحداثيات عىل حسب عدد الزوايا ربي‬
‫أفق‬
‫ضلعي‪ ،‬فإذا كان شكل المنطقة مثلثا‪ ،‬فيكون لدينا ثالث زوايا‪ ،‬ولكل زاوية إحداثيان ي‬
‫ر‬ ‫كل‬
‫ه ‪ :‬ك‪200,200 100,0 0,200‬ك‪.‬‬ ‫أش‪ ،‬لتكون القيمة ي‬
‫ور ي‬
‫‪href‬‬
‫خاصية تحدد رابط الصورة أو الملف أو الصفحة أو الجزء من الصفحة‪ ،‬الذي سيتم‬
‫االنتقال إليه‪ ،‬عند الضغط عىل المنطقة الحساسة للنقر‪.‬‬
‫‪alt‬‬
‫الن سيتم‬
‫خاصية تحدد النص الذي سيتم عرضه‪ ،‬عند وجود خطأ يف مسار الصورة ي‬
‫االنتقال إليها‪ ،‬عند النقر عىل هذه المنطقة‪.‬‬
‫‪hreflang‬‬
‫الن سيتم االنتقال إليها‪ ،‬عند النقر عىل هذه المنطقة‪.‬‬
‫خاصية توضح لغة الصفحة ي‬
‫‪target‬‬
‫سبق رشحها‪ ،‬وقيمها ومدلولها ملحق ‪. 1‬‬
‫‪rel‬‬
‫سبق رشحها‪ ،‬وقيمها ومدلولها ملحق ‪. 1‬‬
‫‪download‬‬
‫خاصية توضح أنه سيتم تحميل رابط المنطقة الحساسة إل جهاز المستخدم‪ ،‬عند النقر‬
‫عىل هذه المنطقة‪ ،‬عىل أن يكون عىل نفس ‪( origin‬لتعريف ‪ origin‬انظر ص ‪)282‬‬
‫المحىل‪.‬‬
‫ي‬ ‫السثفر‬
‫واستعراض الصفحة أو الموقع من خالل ر‬
‫‪HTML Elements‬‬ ‫‪180‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪ping‬‬
‫الن سيتم االنتقال‬
‫الن سيتم تتبعها للوصول إل الصفحة ي‬
‫خاصية تحدد قائمة بالمواقع‪ ،‬ي‬
‫إليها‪ ،‬عند النقر عىل المنطقة المحددة‪.‬‬
‫>"‪<img src="mount.jpg" alt="view" width="300" usemap="#mnt‬‬
‫>"‪<map name="mnt‬‬
‫>"‪<area shape="rect" coords="0,0,100,50" href="#ftr‬‬
‫>"‪<area shape="circle" coords="150,100,50" href="horse.jpg‬‬
‫"‪<area shape="poly" coords="300,100 300,200 200,200‬‬
‫>"‪href="https://google.com‬‬
‫>‪</map‬‬
‫>‪<div style="height:1000px"></div‬‬
‫>‪<footer id="ftr">The magic of nature</footer‬‬
‫الحظ أنه عند الصغط بالفأرة عىل‬
‫‪rect‬‬
‫المنطقة ‪ ، rect‬يتم االنتقال إل جزء‬
‫السفىل‪ ،‬وأن الضغط عىل‬ ‫ي‬ ‫الصفحة‬
‫المنطقة ‪ circle‬يؤدي إل االنتقال إل‬
‫‪circle‬‬
‫صورة عىل جهازك (ضع رابط لها)‪ ،‬وأن‬
‫الصغط عىل المنطقة ‪ poly‬يؤدي إل‬
‫‪poly‬‬ ‫االنتقال إل موقع ‪. google‬‬

‫لقد قمت برسم هذه األشكال التوضيحية للعنرص >‪ <area‬لتتخيل شكلها فقط‪،‬‬
‫ولكنها بالطبع لن تظهر عند تطبيق الكود السابق‪.‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪area‬‬
‫;‪display: none‬‬
‫}‬

‫‪HTML Elements‬‬ ‫‪181‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<picture>…</picture‬‬
‫عنرص مخصص الحتواء نسخ مختلفة‪ ،‬وجودة مختلفة‪ ،‬وأبعاد مختلفة‪ ،‬من صورة واحدة‬
‫أكث من صورة‪ ،‬بحيث تكون كل نسخة من صورة معينة مالئمة للعرض يف بيئة معينة‪ ،‬مثل‬ ‫أو ر‬
‫الهاتف النقال أو التابلت أو الحاسب‪ ،‬ويقوم المتصفح باختيار النسخة األفضل للعرض‪،‬‬
‫الن ُيستخدم فيها هذا المتصفح‪.‬‬
‫حسب البيئة ي‬
‫الداخىل >‪. <source‬‬
‫ي‬ ‫ويقوم العنرص <‪ >picture‬بهذه الوظيفة من خالل العنرص‬
‫>‪<srource‬‬
‫عنرص ‪ empty element‬مخصص لتحديد البيئة المطلوب عرض الصورة فيها‪ ،‬وكذلك‬
‫الخاصيتي ‪ media‬و‪. srcset‬‬
‫ر‬ ‫تحديد النسخ المختلفة من الصورة‪ ،‬ويتم ذلك عن طريق‬
‫‪media‬‬
‫خاصية تقوم بتحديد نوع بيئة العرض‪ ،‬المطلوب عرض الصورة فيها‪.‬‬
‫‪srcset‬‬
‫والن سيختار‬
‫ي‬ ‫خاصية تحدد نسخ الصورة ذات األبعاد المختلفة‪ ،‬أو الجودة المختلفة‪،‬‬
‫الن سبق تعريفها يف الخاصية ‪ ، media‬وتكون قيمتها عبارة‬ ‫المتصفح أحدها للعرض يف البيئة ي‬
‫عن اسم نسخة الصورة‪ ،‬يتبعها عرض هذه النسخة‪ ،‬متبوعا بالحرف ‪ w‬مثل‬
‫ك‪pic.jpg 460w‬ك ‪ ،‬أو اسم الصورة متبوعا بدقة الصورة‪ ،‬ويرمز لها بالحرف ‪ x‬مثل‬
‫التكبث‪ ،‬منسوبا ألصغر دقة‬
‫ر‬ ‫يعن مقدار‬
‫ك‪pic.jpg 2x‬ك ‪ ،‬حيث إن الرقم قبل الحرف ‪ x‬ي‬
‫تعن نسخة من الصورة لها ضعف جودة أصغر جودة‪.‬‬ ‫للصورة‪ ،‬أي أن القيمة ‪ 2x‬ي‬
‫ويمكنك االستغناء عن وضع حجم الصورة‪ ،‬أو مقدار الدقة بعد اسم الصورة‪ ،‬إلجبار‬
‫المتصفح عىل االستعانة بهذه النسخة من الصورة‪ ،‬يف البيئة المعرفة يف الخاصية ‪ media‬أيا‬
‫كان حجمها‪ ،‬أو أيا كانت دقتها وجودتها‪.‬‬
‫‪type‬‬
‫خاصية إضافية تحدد نوع الصورة المطلوب عرضها‪.‬‬

‫‪HTML Elements‬‬ ‫‪182‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<img‬‬
‫يف حالة فشل المتصفح يف اختيار نسخة الصورة المناسبة‪ ،‬أو كان المتصفح ال يدعم‬
‫العنرص <‪ ، >picture‬فيقوم العنرص <‪ >img‬داخل العنرص <‪ >picture‬بتحديد مصدر صورة‬
‫أخرى‪ ،‬بشكل احثازي‪ ،‬لعرضها يف حالة عدم عرض أي نسخة يف البيئة المطلوبة‪.‬‬
‫>‪<picture‬‬
‫>"‪<source media="(max-width: 400px)" srcset="giraffe-500.jpg‬‬
‫>"‪<source media="(max-width: 600px)" srcset="giraffe-800.jpg‬‬
‫>"‪<source media="(max-width: 800px)" srcset="giraffe-1000.jpg‬‬
‫>"‪<img src="paint.jpg‬‬
‫>‪</picture‬‬
‫بتجهث ثالث نسخ من الصورة‬‫ر‬ ‫ولمشاهدة تطبيق الكود السابق عىل المتصفح‪ ،‬قم‬
‫المطلوبة مختلفة الحجم والجودة‪ ،‬واجعلهم قيمة للخاصية ‪ ، srcset‬ثم قم بفتح‬
‫‪ responsive design mode‬كما تعلمنا سابقا يف العنرص <‪ ، >img‬وقم بسحب الحد األيمن‬
‫تغث عرض الصفحة زيادة ونقصانا‪ ،‬كما يتضح ذلك‬
‫تغث نسخة الصورة كلما ر‬ ‫للصفحة‪ ،‬والحظ ر‬
‫يف األشكال المقابلة‪.‬‬
‫الحظ يف الشكل األول أن الصفحة‬
‫ظلت محتفظة بالنسخة األقل جودة‬
‫‪ ، 500w‬طالما كان العرض ‪ 400px‬أو أقل‪،‬‬
‫وهو العرض الذي تم تحديده يف الخاصية‬
‫‪ media‬أو بيئة العرض األول‪.‬‬

‫ولما زاد عرض الصفحة عن ‪400px‬‬

‫انتقلت الصفحة إل النسخة‬
‫الن تم‬
‫متوسطة الجودة ‪ ، 800w‬ي‬
‫تحديدها يف الخاصية ‪ media‬أو‬
‫بيئة العرض الثانية‪.‬‬

‫‪HTML Elements‬‬ ‫‪183‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫ظلت الصورة محتفظة بجودتها المتوسطة حن يصل عرض الصفحة إل ‪ ، 600px‬فلما‬

‫الن تم‬
‫زاد عرض الصفحة عن ‪ ، 600px‬انتقلت الصورة إل النسخة عالية الجودة ‪ ، 1000w‬ي‬
‫تحديدها يف ‪ media‬بيئة العرض الثالثة‪.‬‬

‫‪HTML Elements‬‬ ‫‪184‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<figure>…</figure‬‬
‫عنرص مخصص الحتواء عنرص أو ر‬
‫أكث داخله‪ ،‬وقد تكون هذه العناص رسومية‪ ،‬مثل صورة‬
‫ويتمث العنرص‬
‫ر‬ ‫تخطيط‪ ،‬وقد تكون عناص نصية‪ ،‬مثل مقالة أو بوست‪،‬‬
‫ي‬ ‫بياب أو رسم‬
‫أو رسم ي‬
‫<‪ >figure‬بأن محتواه بالرغم من أنه مرتبط بتدفق الصفحة‪ ،‬إال أن موضعه مستقل عن تدفق‬
‫يتمث بوضع عنوان‬
‫الصفحة‪ ،‬فإذا تم إزالة المحتوى ال يتأثر التدفق يف الصفحة‪ ،‬كما أنه ر‬
‫لمحتوياته‪ ،‬عن طريق العنرص <‪. >figcaption‬‬
‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{‪figure‬‬
‫;‪display: block‬‬
‫;‪margin: 1em 40px‬‬
‫}‬

‫>‪<figcaption>…</figcaption‬‬
‫داخىل للعنرص <‪ >figure‬يقوم بإنشاء عنوان لمحتويات هذا العنرص‪ ،‬ويمكن أن‬
‫ي‬ ‫عنرص‬
‫يكون أول أو آخر عنرص داخل العنرص <‪ >figure‬حسب المكان المطلوب وضع العنوان فيه‪.‬‬
‫> ‪<figure‬‬
‫>"‪<img src="colors.jpg" alt="colors" height="150‬‬
‫>"‪<img src="road.jpg" alt="colors" height="150‬‬
‫>‪<figcaptin>Amazing Colors</figcaption‬‬
‫>‪</figure‬‬

‫الحظ أن عنوان الصور ظهر أسفل الصور‪ ،‬ألن العنرص <‪ >figcaption‬آخر عنرص داخل‬
‫‪HTML Elements‬‬ ‫‪185‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

‫ ألن العنرص‬،‫التال ظهر العنوان أعىل الصور‬

‫ي‬ ‫ بينما يف الشكل‬، >figure< ‫العنرص‬
. >figure< ‫> أول عنرص داخل العنرص‬figcaption<
<figure >
<figcaptin>Amazing Colors</figcaption>
<img src="colors.jpg" alt="yellow roses" height="150">
<img src="road.jpg" alt="yellow roses" height="150">
</figure>

:َ‫ا‬
‫التنسيق االفث ي‬
figcaption{
display: block;
}

HTML Elements 186 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<canvas>…</canvas‬‬
‫عنرص مخصص لتنفيذ سكريبتات (أكواد برمجية) تقوم بعمل رسوم وأشكال وحركة‬
‫باستخدام لغة الجافاسكريبت ‪ ، Javascript‬وال مجال لدراسة هذا العنرص بالتفصيل حاليا‪،‬‬
‫حيث تستلزم دراسته معرفة جيدة بهذه اللغة‪ ،‬وسوف ندرس مثال بسيط عىل ما يمكن أن‬
‫يقوم به هذا العنرص‪.‬‬
‫خاصيتي لهذا العنرص‪:‬‬
‫ر‬ ‫تعيي‬
‫ويمكن ر‬
‫‪width‬‬
‫خاصية تحدد عرض مساحة الرسم للعنرص <‪. >canvas‬‬
‫‪height‬‬
‫خاصية تحدد ارتفاع مساحة الرسم للعنرص <‪. >canvas‬‬
‫>‪<canvas id="canv" width="200" height="200"> </canvas‬‬
‫>‪<script‬‬
‫;)'‪const canvas = document.getElementById('canv‬‬
‫;)'‪const ctx = canvas.getContext('2d‬‬
‫;'‪ctx.fillStyle = 'blue‬‬
‫;)‪ctx.fillRect(10, 10, 200, 100‬‬
‫>‪</script‬‬

‫الحظ أن المعرف الفريد ‪ id‬للعنرص <‪ >canvas‬يربط‬

‫وبي العنرص الذي تم إنشاؤه داخل العنرص <‪. >script‬‬
‫بينه ر‬

‫‪HTML Elements‬‬ ‫‪187‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<svg>…</svg‬‬
‫عنرص مخصص الحتواء عناص رسومية متجهة ‪ ، vector graphics‬وهذا العنرص‬
‫الن تستخدم يف رسم العديد من الرسوم واألشكال‪،‬‬ ‫والكثث من العناص‪ ،‬ي‬
‫ر‬ ‫الكثث‬
‫ر‬ ‫يحتوي‬
‫الن يسند لها العديد من القيم‪،‬‬‫وهذه العناص بدورها تحتوي عىل العديد من الخصائص‪ ،‬ي‬
‫الرسوم‪.‬‬
‫ي‬ ‫الن تمكنها من التحكم يف شكل وسلوك العنرص‬ ‫و ي‬
‫ونظرا ألهمية هذا العنرص وأهمية عناصه الداخلية‪ ،‬ونظرا لضخامة المادة العلمية الالزمة‬
‫ً‬
‫التال يف هذه السلسلة‪ ،‬لتكون مرجعا كامال لكل‬
‫لتغطية هذه العناص‪ ،‬فقد خصصت اإلصدار ي‬
‫عناص <‪ >svg‬وخصائصه وقيمها‪.‬‬
‫ً‬
‫وسوف نتناول مثاال بسيطا يوضح كيفية إنشاء بعض عناص <‪: >svg‬‬
‫>"‪<svg width="500" height="500‬‬
‫"‪<circle cx="240" cy="70" r="50" stroke="black" stroke-width="5‬‬
‫>"‪fill="red‬‬
‫‪<rect x="10" y="20" width="150" height="100" fill=yellow stroke= blue‬‬
‫>"‪stroke-width= "5‬‬
‫>"‪<rect x="320" y="10" width="120" height="120" rx="25" ry="25‬‬
‫>"‪<text fill="green" font-size="45" font-family="Impact" x="35" y="85‬‬
‫>‪HTML</text‬‬
‫>‪</svg‬‬
‫الحظ أن العنرص <‪>svg‬‬
‫‪width‬‬ ‫لخاصين‬
‫ي‬ ‫احتاج‬
‫و‪ height‬ليكونا أبعادا لهذا‬
‫العنرص الذي يعد لوحة رسم‬
‫للعناص المحتواة داخله‪ ،‬أما‬
‫أش‬ ‫األفق والر ي‬
‫ي‬ ‫نقطن بداية الرسم عىل المحورين‬
‫ي‬ ‫خاصيتي لتحديد‬
‫ر‬ ‫العناص الداخلية فتحتاج‬
‫أكث لتحديد أبعاد هذا الشكل‪ ،‬سواء عرض ‪ width‬وارتفاع ‪ height‬أو‬ ‫(‪ ، )x, y‬وخاصية أو ر‬
‫الخارج‬
‫ي‬ ‫نصف قطر (‪ ،)r‬ثم خاصية لتحديد لون ملء ‪ ، fill‬وخاصية لتحديد لون الخط‬
‫وغثها‪.‬‬
‫الخارج ‪ stroke-width‬ر‬
‫ي‬ ‫للعنرص ‪ ، stroke‬وخاصية لتحديد عرض الخط‬

‫‪HTML Elements‬‬ ‫‪188‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الن احتاجها عنرص‬

‫ه الخصائص األساسية ي‬ ‫فعىل سبيل المثال‪ ،‬يف الكود السابق‪ ،‬هذه ي‬
‫الدائرة <‪ >circle‬إلنشائه بالشكل السابق‪:‬‬
‫األفق ‪. x axis‬‬
‫ي‬ ‫‪ cx‬خاصية تحدد مقدار إزاحة نقطة مركز العنرص عىل المحور‬
‫أش ‪. y axis‬‬
‫‪ cy‬خاصية تحدد مقدار إزاحة نقطة مركز العنرص عىل المحور الر ي‬
‫‪ r‬خاصية تحدد طول نصف قطر الدائرة ‪. radius‬‬
‫‪ fill‬خاصية تحدد لون ملء العنرص‪.‬‬
‫الخارج المحيط بالعنرص‪.‬‬
‫ي‬ ‫‪ stroke‬خاصية تحدد لون الخط‬
‫الخارج المحيط بالعنرص‪.‬‬
‫ي‬ ‫‪ stroke-width‬خاصية تحدد عرض الخط‬

‫الخارج ولونه‬
‫ي‬ ‫الن تتحكم يف شكل الخط‬‫وهناك العديد والعديد من الخصائص‪ ،‬ي‬
‫الن‬
‫وغثها من الخصائص‪ ،‬ي‬
‫وطريقة الملء وتشكيلها‪ ،‬وعناص وخصائص الحركة‪ ،‬والفالتر ر‬
‫مرجع القادم إن شاء هللا‪.‬‬
‫ي‬ ‫سأتناولها بالتفصيل يف‬

‫‪HTML Elements‬‬ ‫‪189‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<audio>…</audio‬‬
‫عنرص مخصص إلدخال ملفات الصوت للصفحة والتحكم يف وظائفها وسلوكها‪.‬‬
‫>"‪<audio controls muted autoplay loop preload="auto‬‬
‫>"‪<source src="rabit.mp3" type="audio/mp3‬‬
‫>‪</audio‬‬

‫والعنرص <‪ >audio‬يجب أن يحتوي داخله عىل العنرص <‪. >source‬‬

‫>‪<source‬‬
‫داخىل‪ ،‬يحدد موقع ملف الصوت الذي سيتم إدخاله للصفحة‬‫ي‬ ‫عنرص ‪empty element‬‬
‫تعيي خاصيت ري لهذا العنرص ‪:‬‬
‫ونوعه‪ ،‬وذلك عن طريق ر‬
‫‪src‬‬
‫خاصية تحدد مسار واسم الملف الذي سيتم إدخاله إل الصفحة‪ ،‬سواء كان الملف‬
‫محفوظا عىل الحاسب‪ ،‬أوكان عىل موقع أو صفحة ما‪.‬‬
‫‪type‬‬
‫خاصية تحدد نوع أو تنسيق ملف الصوت‪ ،‬الذي سيتم إدخاله للصفحة‪ ،‬مثل‬
‫‪ audio/mp3‬أو ‪. audio/wav‬‬
‫تعيي عدة خصائص للعنرص <‪: >audio‬‬
‫ويمكن ر‬
‫‪controls‬‬
‫الن تتحكم يف تشغيل الملف وإيقافه‪ ،‬وكذلك ِحدة الصوت‪،‬‬
‫خاصية تسمح بعرض األزرار ي‬
‫يعن أن ملف الصوت لن يظهر يف صفحتك‪.‬‬‫وغثها‪ ،‬وعدم وجود هذه الخاصية‪ ،‬ي‬
‫ر‬
‫‪muted‬‬
‫خاصية تعرض ملف الصوت مغلقا عند تحميل الصفحة‪ ،‬وعىل المستخدم تفعيل الصوت‬
‫‪HTML Elements‬‬ ‫‪190‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫عند تشغيل الملف‪.‬‬

‫‪autoplay‬‬
‫باف‬
‫خاصية تجعل ملف الصوت يعمل تلقائيا‪ ،‬عندما يكون جاهزا بدون انتظار تحميل ي‬
‫أجزائه‪ ،‬ويجب تجنب استخدام هذه الخاصية‪ ،‬حن ال يفاجأ المستخدم بوجود صوت عند‬
‫تحميل الصفحة‪ ،‬وتثك له حرية تشغيل ملف الصوت من عدمه‪.‬‬
‫‪loop‬‬
‫خاصية تعمل عىل إعادة تشغيل ملف الصوت بعد انتهائه مرة تلو األخرى دون توقف‪.‬‬
‫‪preload‬‬
‫خاصية تحدد طريقة تحميل ملف الصوت إل الصفحة‪ ،‬ويسند إليها عدة قيم‪:‬‬
‫تعن عدم تحميل ملفات الصوت مسبقا عند تحميل الصفحة‪.‬‬‫‪ : none -‬قيمة ي‬
‫تعن أن يقوم المتصفح بتحميل كل ملفات الصوت‪ ،‬وإن لم يكن من‬ ‫‪ : auto -‬قيمة ي‬
‫المتوقع أن يتم استخدامها‪.‬‬
‫تعن تحميل أي ملفات تصف ملف الصوت‪ ،‬مثل مدة تشغيله‪.‬‬‫‪ : metadata -‬قيمة ي‬
‫يتم تجاهل هذه الخاصية أحيانا‪ ،‬ودائما يف حالة وجود الخاصية ‪. autoplay‬‬

‫‪crossorigin‬‬
‫يف حالة الحصول عىل ملف الصوت من صفحة أو موقع آخر‪ ،‬فإن هذه الخاصية تحدد‬
‫الن تحصلنا منها عىل ملف الصوت‪،‬‬‫إمكانية إرسال معلومات‪ ،‬عن صفحتنا إل الصفحة ي‬
‫ونوعية هذه المعلومات‪ ،‬ر‬
‫وشح قيم هذه الخاصية‪ ،‬ملحق ‪. 1‬‬

‫‪HTML Elements‬‬ ‫‪191‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<video>…</video‬‬
‫عنرص يقوم بإدخال ملفات فيديو إل الصفحة‪.‬‬
‫"‪<video controls muted width="250" height="150‬‬
‫>"‪poster="masha_bear.jpg‬‬
‫> "‪<source src="masha.mp4" type="video/mp4‬‬
‫" ‪<track src="masha_en.vtt" srclang="en" label="Playing football‬‬
‫>‪kind="subtitles" default‬‬
‫>"‪" kind="subtitles‬كرة القدم"=‪<track src="masha_ar.vtt" srclang="ar" label‬‬
‫>‪</video‬‬
‫تعيي نفس خصائص العنرص‬ ‫ر‬ ‫ويمكن‬
‫<‪ >audio‬لهذا العنرص بنفس القيم وبنفس‬
‫السلوك‪ ،‬ما عدا الخاصية ‪ controls‬يف حالة‬
‫عدم تعيينها سيظهر ملف الفيديو ولكن لن‬
‫تستطيع تشغيله‪.‬‬

‫ويوجد خصائص أخرى يمكن تعيينها للعنرص <‪: >video‬‬

‫‪width‬‬
‫خاصية تحدد عرض ملف الفيديو الذي سيتم إدخاله إل الصفحة‪.‬‬
‫‪height‬‬
‫خاصية تحدد ارتفاع ملف الفيديو الذي سيتم إدخاله إل الصفحة‪.‬‬
‫‪poster‬‬
‫خاصية تحدد مسار صورة معينة‪ ،‬لوضعها يف مقدمة ملف الفيديو‪ ،‬عند تحميل الصفحة‬
‫قبل أن يبدأ المستخدم تشغيله‪.‬‬
‫‪playsinline‬‬
‫تعن أن الفيديو سيعمل يف موضعه‪ ،‬ولن يمأل الشاشة عند بدء تشغيله‪ ،‬وغياب‬
‫خاصية ي‬

‫‪HTML Elements‬‬ ‫‪192‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫يعن أن الفيديو سيعمل بملء الشاشة تلقائيا‪.‬‬

‫هذه الخاصية‪ ،‬ال ي‬
‫داخليي‪:‬‬
‫ر‬ ‫والعنرص <‪ >video‬يحتوي عنرصين‬
‫>‪<source‬‬
‫داخىل‪ ،‬يقوم بتحديد مسار ملف الفيديو الذي سيتم إدخاله‬
‫ي‬ ‫عنرص ‪empty element‬‬
‫عن طريق الخاصية ‪ ، src‬ويحدد نوع الملف عن طريق الخاصية ‪ ، type‬كما سبق أن أوضحنا‪.‬‬
‫>‪<track‬‬
‫عنرص ‪ ، empty element‬مخصص إلنشاء ملف ترجمة لملف الفيديو‪ ،‬أو عنوان‪ ،‬أو‬
‫رشح لمادة مصورة‪ ،‬وسوف نطلق عليه مجازا كملف الثجمةك ‪ ،‬نظرا ألن هذا هو االستخدام‬
‫الشائع لهذا النوع من الملفات‪.‬‬
‫ويمكن تحديد عدة خصائص لهذا العنرص‪:‬‬
‫‪src‬‬
‫خاصية تحدد مسار الملف المصاحب (الثجمة) الذي سيتم ربطه بملف الفيديو‪.‬‬
‫‪srclang‬‬
‫تعيي هذه الخاصية‪ ،‬إذا كان نوع الملف أو‬
‫خاصية تحدد لغة ملف الثجمة‪ ،‬ويجب أن يتم ر‬
‫ه ‪. subtitles‬‬
‫قيمة الخاصية ‪ kind‬ي‬
‫‪default‬‬
‫خاصية تحدد ملف الثجمة االفثاَ‪ ،‬ف حالة وجود ر‬
‫أكث من عنرص <‪ ، >track‬وكل‬ ‫ي ي‬
‫تعيي هذه الخاصية ألي عنرص من‬
‫وف حالة عدم ر‬‫عنرص يحتوي ملف ترجمة خاص به‪ ،‬ي‬
‫عناص <‪ ، >track‬فلن يعمل أي ملف ترجمة منهم‪.‬‬
‫‪kind‬‬
‫الن يقوم بها هذا الملف‬ ‫خاصية تحدد نوع الملف المصاحب لملف الفيديو‪ ،‬أو الوظيفة ي‬
‫ولها عدة قيم‪:‬‬
‫غث‬
‫تعن أن الملف هو ملف ترجمة‪ ،‬إذا كانت لغة ملف الفيديو ر‬ ‫‪ : subtitles -‬قيمة ي‬
‫مفهومة للمستخدم‪ ،‬وربما يحتوي تعليقات أخرى‪ ،‬عن مكان التصوير أو الوقت أو التاري ــخ‪.‬‬
‫كفوف البرص‪.‬‬
‫ي‬ ‫نص لمحتوى الفيديو‪ ،‬وهو مناسب لم‬‫تعن وصف ي‬ ‫‪ : description -‬قيمة ي‬
‫‪HTML Elements‬‬ ‫‪193‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫تعن أن الملف عبارة عن عناوين‪ ،‬تستخدم يف حالة تعدد ملفات‬ ‫‪ : chapters -‬قيمة ي‬
‫الفيديو‪ ،‬ويقوم المستخدم بالتنقل بينها‪.‬‬
‫الن ال‬
‫تعن أن الملف هو نص‪ ،‬ينقل الحوار وكل التفاصيل الصوتية ي‬ ‫‪ : captions -‬قيمة ي‬
‫يمكن سماعها‪ ،‬مثل صوت الموسيق أو أصوات الحركة والمؤثرات‪ ،‬وهذا النوع من الملفات‬
‫مالئم للصم‪.‬‬
‫‪ : metadata -‬قيمة تعن أن الملف مستخدم ف جزء اإلعدادت من الصفحة‪ ،‬الغث ئ‬
‫مرب‬
‫ي‬ ‫ر‬ ‫ي‬ ‫ي‬
‫للمستخدم‪.‬‬
‫‪label‬‬
‫خاصية تضع عنوانا لملف الثجمة‪ ،‬ويستخدم المتصفح هذا العنوان لجدولة ملفات‬
‫الثجمة المتاحة ‪.‬‬
‫الن تتحكم يف بناء ملف الثجمة‪ ،‬أو الملف‬
‫الكثث من القواعد واإلعدادت ي‬ ‫ر‬ ‫ويوجد‬
‫اع هذه القواعد واإلعدادت‬
‫المصاحب لملف الفيديو‪ ،‬ولدراسة كيفية إنشاء ملف ترجمة ير ي‬
‫ر‬
‫والشوط‪ ،‬انظر ملحق ‪. 3‬‬

‫‪HTML Elements‬‬ ‫‪194‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<embed‬‬
‫خارج إل الصفحة‪ ،‬وهذا المحتوى قد‬
‫ي‬ ‫عنرص ‪ empty element‬يقوم بإدخال محتوى‬
‫تفاعىل من اإلضافات (‪ )plug-in‬المستخدمة يف‬
‫ي‬ ‫خارج‪ ،‬أو محتوى‬
‫ي‬ ‫يكون ملفا لتطبيق‬
‫المتصفح‪.‬‬
‫"‪<embed src="html-standard.pdf" width="500" height="200‬‬
‫>"‪type="application/pdf‬‬

‫تعيي عدة خصائص لهذا العنرص‪:‬‬

‫ويمكن ر‬
‫‪src‬‬
‫خاصية تحدد مسار الملف المطلوب إدخاله إل الصفحة‪.‬‬
‫‪type‬‬
‫خاصية تحدد نوع الملف المطلوب إدخاله إل الصفحة‪.‬‬
‫‪width‬‬
‫خاصية تحدد عرض العنرص <‪. >embed‬‬
‫‪height‬‬
‫خاصية تحدد ارتفاع العنرص <‪. >embed‬‬

‫‪HTML Elements‬‬ ‫‪195‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<object>…</object‬‬
‫خارج للصفحة‪ ،‬والذي يمكن أن يعامل كصورة أو يتم‬‫ي‬ ‫عنرص مخصص إلدخال مصدر‬
‫التعامل معه عىل أنه ‪( plug-in‬والـ ‪ plug-in‬هو تطبيق أو برنامج يزيد من قدرات المتصفح يف‬
‫معي مثل ‪.)anti-virus‬‬
‫مجال ر‬
‫"‪<object name="view" data="grafitti.jpg" width="220" height="150‬‬
‫>"‪type="image/jpg" usemap="#mnt‬‬
‫>‪</object‬‬
‫>"‪<map name="mnt‬‬
‫>"‪<area shape="circle" coords="150,75,100" href="mount.jpg‬‬
‫>‪</map‬‬
‫الحظ أن العنرص <‪ >object‬يف هذا المثال يعامل كصورة‪،‬‬
‫وتم تحديد الخاصية ‪ usemap‬له لتحديد منطقة معينة عىل‬
‫العنرص تكون حساسة للنقر ‪ ،‬وعند النقر عليها تقوم بنقلك إل‬
‫الرابط الموجود بالخاصية ‪ href‬الموجودة بالعنرص <‪، >area‬‬
‫ولكن هذه الخاصية مدعومة يف متصفح ‪ Firefox‬فقط‪.‬‬

‫تعيي عدة خصائص للعنرص <‪: >object‬‬

‫ويمكن ر‬
‫‪data‬‬
‫خاصية تحدد مسار العنرص الذي سيتم إدخاله إل الصفحة‪.‬‬
‫‪name‬‬
‫خاصية تحدد اسم العنرص <‪. >object‬‬
‫‪width‬‬
‫خاصية تحدد عرض العنرص <‪. >object‬‬
‫‪height‬‬
‫خاصية تحدد ارتفاع العنرص <‪. >obeject‬‬

‫‪HTML Elements‬‬ ‫‪196‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪type‬‬
‫خاصية تحدد نوع الملف الذي سيتم إدخاله عن طريق العنرص <‪. >object‬‬
‫‪form‬‬
‫وبي أحد عناص‬
‫معي‪ ،‬إذا وجد رابط بينه ر‬‫خاصية تربط العنرص <‪ >object‬بنموذج ر‬
‫النموذج‪ ،‬حيث يسند لهذه الخاصية قيمة المعرف الفريد ‪ id‬للنموذج‪.‬‬

‫>‪<param‬‬
‫داخىل للعنرص <‪ ، >object‬يقوم باختيار خاصية معينة‬
‫ي‬ ‫عنرص ‪empty element‬‬
‫خاصيتي له‪:‬‬
‫ر‬ ‫تعيي‬
‫للعنرص <‪ >object‬وإسناد قيمة لها‪ ،‬ويمكن ر‬
‫‪name‬‬
‫الن سيتم تعيينها للعنرص‪.‬‬
‫خاصية تحدد اسم الخاصية ي‬
‫‪value‬‬
‫الن تم تعيينها يف الخاصية ‪. name‬‬
‫خاصية تحدد قيمة الخاصية ي‬
‫"‪<object name="movie" data="video.mp4" width="220" height="150‬‬
‫>"‪type="video/mp4‬‬
‫>"‪<param name="controls" value="false‬‬
‫>‪</object‬‬
‫ورغم البحث يف طبيعة سلوك هذا العنرص‪ ،‬وتجربة العديد من األمثلة عىل موقع‬
‫وغثها من المواقع‪ ، ،‬وبرغم أن العنرص >‪ <param‬مدعوم يف كل‬ ‫ر‬ ‫‪w3schools‬‬
‫تفسثا لذلك برغم االستفسار يف‬
‫ر‬ ‫تأثث ملحوظ ولم أجد‬
‫أنن لم أجد له أي ر‬
‫المتصفحات‪ ،‬إال ي‬
‫موقع ‪ MDN‬ويمكنك االطالع عىل الموضوع ومناقشته من خالل هذا الرابط‪:‬‬
‫‪https://github.com/mdn/content/issues/9223‬‬

‫‪HTML Elements‬‬ ‫‪197‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<iframe>…</iframe‬‬
‫عنرص مخصص إلنشاء إطار‪ ،‬ليتم دمج مصادر خارجية داخله‪ ،‬لدمجها يف الصفحة‪ ،‬وهذه‬
‫المصادر قد تكون صفحات ويب ‪ html‬أو صور ‪ jpg‬و ‪ png‬و ‪ gif‬أو ملفات صوت ‪mp3‬‬
‫و ‪ wav‬أو ملفات فيديو ‪ mp4‬و ‪ avi‬أو ملف تطبيق ‪ doc‬و ‪. pdf‬‬
‫"‪<iframe width="560" height="315‬‬
‫"‪src="https://www.youtube.com/embed/C5QFHp1oAws‬‬
‫;‪allow="accelerometer; autoplay; clipboard-write; encrypted-media‬‬
‫>‪gyroscope; picture-in-picture" allowfullscreen‬‬
‫>‪</iframe‬‬
‫ويتم التحكم يف سلوك المصدر الذي سيتم إدخاله‬
‫عن طريق عدة خصائص‪ ،‬يتم تعيينها للعنرص‬
‫كالتال‪:‬‬
‫ي‬ ‫وه‬
‫<‪ >iframe‬ي‬

‫‪src‬‬
‫الخارج الذي سيتم دمجه يف اإلطار ‪.‬‬
‫ي‬ ‫خاصية تحدد مسار المصدر‬
‫‪width‬‬
‫ه ‪. 300‬‬
‫خاصية تحدد عرض اإلطار مقدرا بالـ ‪ px‬والقيمة االفثاضية ي‬
‫‪height‬‬
‫ه ‪. 150‬‬
‫خاصية تحدد ارتفاع اإلطار مقدرا بالـ ‪ px‬والقيمة االفثاضية ي‬
‫‪name‬‬
‫خاصية تحدد اسم اإلطار‪.‬‬
‫‪allow‬‬
‫المثات المتاحة لهذا اإلطار‪ ،‬مثل إمكانية الوصول إل الميكروفون أو‬
‫خاصية تحدد سياسة ر‬
‫ئ‬
‫التلقاب للفيديوهات‪ ،‬أو التأكد من أن‬
‫ي‬ ‫اَ للتشغيل‬‫تغيث السلوك االفث ي‬
‫الكامثا أو البطارية أو ر‬
‫ر‬
‫الصور تتخذ حجما مناسبا للعرض داخل اإلطار‪.‬‬
‫‪HTML Elements‬‬ ‫‪198‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪allowfullscreen‬‬
‫خاصية تحدد إمكانية أن يعرض اإلطار ومحتواه بملء شاشة العرض‪ ،‬ويسند لها قيمتان‬
‫‪ true‬أو ‪. false‬‬
‫‪allowpaymentrequest‬‬
‫وب إل اإلطار‪،‬‬
‫خاصية تحدد إمكانية إدخال األكواد الثمجية الخاصة بالدفع اإللكث ي‬
‫وب‪ ،‬ويسند لها قيمتان ‪ true‬أو ‪. false‬‬ ‫ر‬
‫ليتضمن عمليات البيع والشاء والسداد اإللكث ي‬
‫‪referrerpolicy‬‬
‫الن تحتوي عنرص <‪>iframe‬‬‫خاصية تحدد نوع معلومات صفحة المحيل ‪ referrer‬ي‬
‫الخارج منها‪ ،‬وقيم‬
‫ي‬ ‫الن سيتم نقلها إل الصفحة ‪ ، destination‬عند جلب المصدر‬
‫و ي‬
‫الخاصية ومدلولها ملحق ‪. 1‬‬
‫‪loading‬‬
‫خاصية تحدد طريقة تحميل اإلطار‪ ،‬ولها قيمتان‪:‬‬
‫وتعن أن تحميل اإلطار يتم فورا‪ ،‬عند بداية تحميل‬‫ي‬ ‫‪ : eager -‬القيمة االفثاضية‪،‬‬
‫الصفحة‪ ،‬وإن كان اإلطار خارج شاشة العرض (أي لم ينتقل إليه المستخدم‪ ،‬أو لم يشاهده‬
‫بعد)‪.‬‬
‫تعن أن تحميل اإلطار ال يتم إال عندما يقثب اإلطار من شاشة العرض بمسافة‬‫‪ : lazy -‬ي‬
‫معينة‪ ،‬ليكون جاهزا أمام المستخدم‪.‬‬
‫‪sandbox‬‬
‫يعن‬
‫خاصية تطبق قيودا معينة عىل اإلطار‪ ،‬وإذا كانت قيمة هذه الخاصية فارغة فهذا ي‬
‫تطبيق جميع القيود عىل اإلطار‪ ،‬ويمكن إسناد قيم متعددة لها حسب القيود المطلوب‬
‫ه‪:‬‬‫الن تليها مسافة فارغة‪ ،‬والقيم ي‬
‫تطبيقها‪ ،‬عىل أن يكون ربي القيمة والقيمة ي‬
‫تعن السماح بتحميل الملفات من رابط داخل اإلطار بطلب‬
‫‪ : allow-downloads -‬قيمة ي‬
‫من المستخدم‪.‬‬
‫تعن السماح باعتماد أو ‪ submit‬للنموذج <‪ >form‬من داخل‬ ‫‪ : allow-forms -‬قيمة ي‬
‫‪HTML Elements‬‬ ‫‪199‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬
‫يعن عدم إمكانية اعتماد النموذج من داخل اإلطار‪.‬‬ ‫اإلطار ‪ ،‬وعدم إسنادها ي‬
‫الن تتعامل مع نافذه المتصفح‬ ‫تعن إمكانية استخدام األكواد ي‬ ‫‪ : allow-modals -‬قيمة ي‬
‫وغثها‪.‬‬ ‫من داخل اإلطار‪ ،‬مثل )(‪ window.alert‬أو )(‪ window.prompt‬ر‬
‫بتغيث اتجاه الشاشة ‪.‬‬
‫ر‬ ‫تعن عدم السماح‬‫‪ : allow-orientation-lock -‬قيمة ي‬
‫تعن السماح بإدخال بيانات‪ ،‬أو تفاعل من المستخدم مع‬ ‫‪ : allow-pointer-lock -‬قيمة ي‬
‫بيانات معروضة داخل اإلطار‪ ،‬عن طريق تحريك الفأرة أو النقر بها أو استخدام أحداثها‬
‫‪. Mouse Events‬‬
‫تعن السماح بفتح نوافذ جديدة من داخل اإلطار‪ ،‬يف تبويب‬ ‫‪ : allow-popups -‬قيمة ي‬
‫جديد بفعل الخاصية "‪ target="_blank‬أو الدالة )(‪ window.open‬أو الدالة‬
‫يعن عدم فتح أي نافذة جديدة من داخل‬ ‫)(‪ ، showModalDialog‬وعدم إسناد هذه القيمة ي‬
‫اإلطار‪.‬‬
‫تعن السماح بفتح نافذة جديدة من‬ ‫‪ : allow-popups-to-escape-sandbox -‬قيمة ي‬
‫الن يفرضها اإلطار الذي فتحت‬ ‫داخل اإلطار دون قيود‪ ،‬حيث ال ترث هذه النافذة القيود ي‬
‫من خالله‪.‬‬
‫تعن إمكانية فتح عروض تقديمية من داخل اإلطار‪.‬‬ ‫‪ : allow-presentation -‬قيمة ي‬
‫تعن معاملة محتوى اإلطار كما لو كان من نفس العنوان‬ ‫‪ : allow-same-origin -‬قيمة ي‬
‫الرئيش ‪. origin‬‬
‫ي‬
‫تعن إمكانية تشغيل األكواد الثمجية من داخل اإلطار‪ ،‬ولكن ال‬ ‫‪ : allow-scripts -‬قيمة ي‬
‫تسمح بتشغيل النوافذ المنبثقة من داخله‪.‬‬
‫تعن إمكانية التنقل من داخل اإلطار‪ ،‬إل الصفحات‬ ‫‪ : allow-top-navigation -‬قيمة ي‬
‫الن تحتوي اإلطار أي "‪. target="_top‬‬ ‫الن تفتح فوق الصفحة ي‬ ‫ي‬
‫تعن السماح بالتنقل إل‬ ‫ي‬ ‫‪ : allow-top-navigation-by-user-activation -‬قيمة‬
‫الن تفتح فوق الصفحة الحالية من داخل اإلطار‪ ،‬إذا بدأ المستخدم عملية التنقل‬ ‫الصفحات ي‬
‫ً‬
‫أوال‪.‬‬ ‫للمستوى األعىل‬
‫‪srcdoc‬‬
‫خاصية تكون قيمتها عبارة عن كود ‪ ، html‬فتجعل قيمتها تعمل كصفحة ‪ ، html‬فتكون‬
‫‪HTML Elements‬‬ ‫‪200‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫بتعيي‬
‫ر‬ ‫وهم‪ ،‬أو قيمة وهمية للخاصية ‪ ، src‬وعندها يمكننا أال نقوم‬
‫ي‬ ‫عبارة عن مصدر‬
‫الخاصية ‪. src‬‬
‫"=‪<iframe width="250" height="100" srcdoc‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫};‪body{background: lightblue‬‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<h2>Hello World !!</h2‬‬
‫>‪<p><i>Let's start a web design course</i></p‬‬
‫> ">‪</body‬‬
‫>‪</iframe‬‬
‫تعيي‬
‫ر‬ ‫الحظ أنه عىل الرغم من عدم‬
‫الخاصية ‪ ، src‬إال أن الخاصية ‪ srcdoc‬جعلت‬
‫الكود يف قيمتها يعمل كصفحة ‪ html‬واعتثت‬
‫ه قيمة الخاصية ‪. src‬‬ ‫ي‬

‫بتعيي الخاصية‬
‫ر‬ ‫تلع عمل الخاصية ‪ ، src‬إال أنه ينصح دائما‬
‫رغم أن الخاصية ‪ srcdoc‬ي‬
‫‪ ، src‬لالستعانة بها إذا كان المتصفح ال يدعم الخاصية ‪. srcdoc‬‬

‫‪HTML Elements‬‬ ‫‪201‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫الغث مقرؤة يف جسم الصفحة)‬

‫العناص الوصفية ( ر‬
‫‪Metadata Elements‬‬
‫الن تتحكم يف إعدادات وتنسقات الصفحة والملفات‬
‫فه العناص ي‬‫كما سبق وأن ذكرنا‪ ،‬ي‬
‫المرتبطة بها وبيئات العمل المناسبة لها‪ ،‬وكل هذه العناص توضع داخل العنرص <‪، >head‬‬
‫ئ‬
‫المرب للمستخدم‪ ،‬وهو العنرص <‪. >body‬‬
‫ي‬ ‫خارج جسم الصفحة‬

‫>‪<head>....</head‬‬
‫الغث مقرؤة‬
‫وكما ذكرنا‪ ،‬فإن العنرص <‪ >head‬يحتوي كل عناص ‪ ، metadata‬أو العناص ر‬
‫يف جسم الصفحة وهذه العناص‪:‬‬
‫‪ -‬عنرص عنوان الصفحة <‪. >title‬‬
‫الرئيش للصفحة <‪. >base‬‬
‫ي‬ ‫‪ -‬عنرص الرابط‬
‫‪ -‬عنرص الصفحات أو الملفات المرتبطة بالصفحة <‪. >link‬‬
‫‪ -‬عنرص تنسيق الصفحة باستخدام ‪ css‬العنرص <‪. >style‬‬
‫‪ -‬عنرص اختيار وإعداد بيئات العمل للصفحة <‪. >meta‬‬
‫‪ -‬عنرص إدخال أكواد برمجية أو سكريبتات‪ ،‬للتحكم يف سلوك العناص <‪. >script‬‬

‫‪HTML Elements‬‬ ‫‪202‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<title>....</title‬‬
‫هو عنرص يحتوي داخله عنوان الصفحة‪ ،‬وهو العنوان الذي يظهر يف رشيط عنوان‬
‫الصفحة ‪ ، title bar‬أو يف تبويب الصفحة ‪ ، page's tab‬ومحتوى العنوان يجب أن يكون‬
‫نصا‪ ،‬دون أي عناص أخرى‪.‬‬
‫أكث من عنرص <‪ ، >title‬وتحفظ الصفحة تحت هذا العنوان عند‬ ‫والصفحة ال يكون لها ر‬
‫عمل ‪ bookmark‬للصفحة‪ ،‬أو عند حفظها يف الصفحات المفضلة ‪. favorite‬‬
‫العنرص <‪ >title‬هام لعملية ‪ ، SEO‬حيث تستخدم محركات البحث ‪search engines‬‬
‫خوارزميات لثتيب العناوين‪ ،‬للعثور عىل الصفحات بطريقة أشع‪.‬‬
‫كلمتي‪ ،‬ويفضل دائما أن يكون وصفيا‪ ،‬وحيث إن‬ ‫ر‬ ‫تجنب أن يكون العنوان من كلمة أو‬
‫معي من الحروف من ‪ 55‬إل ‪ 60‬تقريبا‪ ،‬فيجب أال يزيد‬
‫محركات البحث تقوم بالبحث يف عدد ر‬
‫عدد حروف محتوى العنوان عن هذا العدد‪ ،‬حيث سيتم تجاهل ما يزيد عن هذا العدد من‬
‫الحروف والكلمات‪.‬‬
‫>‪<head‬‬
‫>‪<title>Start HTML in Arabic</title‬‬
‫>‪</head‬‬

‫اَ‪:‬‬
‫التنسيق االفث ي‬
‫{ ‪title‬‬
‫;‪display: none‬‬
‫}‬

‫اَ لكل عناص ‪. metadata‬‬

‫وهو التنسيق االفث ي‬
‫‪HTML Elements‬‬ ‫‪203‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<base‬‬
‫الرئيش‪ ،‬لكل الملفات والصور‬
‫ي‬ ‫عنرص ‪ empty element‬يستخدم ليكون الرابط أو المسار‬
‫باف الروابط والمسارات الفرعية‪ ،‬ويجب أال‬
‫واالمتدادات داخل الصفحة‪ ،‬والذي تتفرع منه ي‬
‫خاصيتي لهذا العنرص‪:‬‬ ‫تعيي‬ ‫يكون ف الصفحة ر‬
‫ر‬ ‫رئيش واحد‪ ،‬ويمكن ر‬‫ي‬ ‫ابط‬
‫ر‬ ‫من‬ ‫أكث‬ ‫ي‬
‫‪href‬‬
‫الرئيش للصفحة‪.‬‬
‫ي‬ ‫خاصية تحدد رابط أو مسار العنوان‬
‫‪target‬‬
‫الرئيش عند الضغط عليه‪ ،‬والقيم‬
‫ي‬ ‫خاصية تحدد الموضع الذي سيفتح فيه رابط العنوان‬
‫وشح‬‫الن تسند إل هذه الخاصية ه‪ ، _blank, _parent, _self, _top, framname :‬ر‬
‫ي‬ ‫ي‬
‫مدلول كل قيمة ملحق ‪. 1‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>"‪<base href="https://www.finestwallpaper.com/" target="_blank‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p><a href="">Search for wallpaper</a></p‬‬
‫>‪<p><a href="store/c35/cool_kids.html">Kidswallpaper</a></p‬‬
‫‪<p><img‬‬
‫‪src="uploads/5/7/7/9/5779447/s774058804322417752_p6571_i70_w1266.pn‬‬
‫>"‪g‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬

‫‪HTML Elements‬‬ ‫‪204‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪ -‬الحظ أن الضغط عىل الرابط األول ‪ Search for wallpaper‬يفتح رابط صفحة‬
‫جديدة‪ ،‬بالرغم من أن قيمة الخاصية ‪ href‬للعنرص <‪ >a‬فارغة وال يوجد مسار للرابط‬
‫يعن أن قيمة هذه الخاصية تساوي قيمة نفس الخاصية للعنرص‬ ‫المطلوب فتحه‪ ،‬إال أن ذلك ي‬
‫الرئيش‪.‬‬
‫ي‬ ‫<‪ ، >base‬أي أن رابط الصفحة الجديدة هو نفسه رابط العنرص‬
‫الثاب ‪ Kidswallpaper‬يفتح رابط صفحة جديدة‪ ،‬بالرغم‬ ‫‪ -‬الحظ أن الضغط عىل الرابط ي‬
‫من أن قيمة الخاصية ‪ href‬للعنرص <‪ >a‬يف حد ذاتها ال تعتث مسارا وال تفتح أي صفحات‪،‬‬
‫الرئيش‪ ،‬وهو‬
‫ي‬ ‫فرع بعد الرابط‬
‫ي‬ ‫ولكن عند فتح الرابط‪ ،‬يتم وضع رابط هذه الصفحة كرابط‬
‫ً‬
‫قيمة الخاصية ‪ href‬للعنرص >‪ ، <base‬فيكون الرابط كامال للصفحة الجديدة‪.‬‬
‫‪ -‬الحظ أن الصورة <‪ >img‬تظهر يف الصفحة‪ ،‬بالرغم من أن قيمة خاصية مصدر الصورة‪،‬‬
‫غث مكتملة‪ ،‬ألنها ال تتضمن أي موقع للتحميل‪ ،‬ولكن بعد‬ ‫وهو الخاصية ‪ src‬كانت قيمتها ر‬
‫ً‬
‫الرئيش قبل رابط الصورة ‪ ،‬يكون رابط الصورة كامال‪.‬‬
‫ي‬ ‫وضع الرابط‬

‫‪HTML Elements‬‬ ‫‪205‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<link‬‬
‫عنرص ‪ empty element‬يستخدم يف ربط الملف أو الصفحة الحالية بمصادر خارجية‬
‫وف الغالب يستخدم لربط ملف تنسيقات ‪ ، css‬وقد يستخدم لوضع أيقونة للصفحة‬ ‫أخرى‪ ،‬ي‬
‫يف رشيط العنوان‪ ،‬أو وضعها يف تبويب الصفحة‪ ،‬بجانب عدة استخدامات أخرى‪.‬‬

‫تعيي عدة خصائص لهذا العنرص ‪:‬‬

‫ويمكن ر‬
‫‪href‬‬
‫الخارج المطلوب ربطه بالصفحة الحالية‪.‬‬
‫ي‬ ‫خاصية تحدد رابط أو مسار الملف‬
‫‪rel‬‬
‫الخارج‪ ،‬انظر ملحق ‪. 1‬‬
‫ي‬ ‫خاصية تحدد نوع العالقة ربي الصفحة الحالية والملف‬
‫‪type‬‬
‫الخارج المرتبط بالصفحة‪ ،‬ومن أمثلة أنواع الملفات‬
‫ي‬ ‫خاصية تحدد نوع الملف‬
‫المستخدمة مع هذا العنرص ‪ text/css :‬أو ‪ image/x-ico‬أو ‪.font/woff2‬‬
‫> "‪<link rel="preload" href="mFont.woff2" as="font" type="font/woff2‬‬

‫‪sizes‬‬
‫ه‬‫الخارج المرتبط بالصفحة إذا كانت قيمة الخاصية ‪ rel‬ي‬
‫ي‬ ‫خاصية تحدد حجم الملف‬
‫‪ ، icon‬حيث يتم إسناد قيمة العرض وبعدها ك‪x‬ك أو ك‪X‬ك ثم قيمة االرتفاع‪ ،‬وقد يسند لهذه‬
‫وتعن استخدام أي حجم للصورة الستخدامها كأيقونة‪.‬‬
‫ي‬ ‫الخاصية القيمة ‪، any‬‬
‫"‪<link rel="icon" sizes="114x114‬‬ ‫"‪href="logo.png" as="image‬‬
‫>"‪type="image/png‬‬

‫‪disabled‬‬
‫الخارج المرتبط بالصفحة‪.‬‬
‫ي‬ ‫خاصية تقوم بتعطيل عمل الملف‬
‫>‪<link rel="stylesheet" href="styles.css" disabled‬‬

‫‪HTML Elements‬‬ ‫‪206‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪hreflang‬‬
‫الخارج المرتبط بالصفحة الحالية‪.‬‬
‫ي‬ ‫خاصية تحدد لغة الملف‬
‫‪title‬‬
‫الخارج المرتبط بالصفحة‪.‬‬
‫ي‬ ‫خاصية تضع عنوانا للملف‬
‫>‪<link rel="stylesheet" href="styles.css" title="mystyle" disabled‬‬

‫‪media‬‬
‫ً‬
‫الخارج فعاال ومؤثرا فيها‪ ،‬ومن األمثلة عىل‬
‫ي‬ ‫الن سيكون الملف‬‫خاصية تحدد نوع البيئة ي‬
‫عن عرض الصفحة عىل شاشة عرض‪ ،‬سواء حاسب أو‬ ‫أنواع هذه البيئات‪ :‬النوع ‪ screen‬وي ي‬
‫عن أن الملف يكون‬
‫عن طباعة الصفحة‪ ،‬والنوع ‪ all‬وي ي‬ ‫هاتف جوال أو تابلت‪ ،‬والنوع ‪ print‬وي ي‬
‫نشطا يف كل حاالت عرض الصفحة‪.‬‬
‫>"‪<link rel="stylesheet" href="styles2.css" media="print, screen‬‬

‫‪crossorigin‬‬
‫الخارج‪ ،‬وهل يجب إرسال بيانات عن الصفحة‬
‫ي‬ ‫خاصية تحدد كيفية الحصول عىل الملف‬
‫مثل ‪ cookies‬أو ‪ authentication‬إل المصدر أم ال‪ ،‬و رشح الخاصية وقيمها ملحق ‪. 1‬‬
‫‪as‬‬
‫ه ‪ preload‬أو ‪ ، prefetch‬حيث‬ ‫تستخدم هذه الخاصية إذا كانت قيمة الخاصية ‪ rel‬ي‬
‫الخارج‪ ،‬الذي سيتم تحميله مسبقا للصفحة الحالية‪.‬‬
‫ي‬ ‫تحدد نوع الملف‬
‫>"‪<link rel="preload" href="styles.css" as="style‬‬

‫‪imagesrcset‬‬
‫إذا كانت قيمة الخاصية "‪ rel="preload‬وقيمة الخاصية "‪ as="image‬فإن هذه‬
‫الخاصية تقوم بالتحميل المسبق‪ ،‬لمجموعة صور أو نسخ لصورة معينة‪ ،‬كل نسخة ذات‬
‫معي‪ ،‬وهذه النسخ سوف تستخدم الحقا كقيمة للخاصية ‪ srcset‬ف‬
‫جودة معينة أو عرض ر‬
‫العنرص <‪. >img‬‬

‫‪HTML Elements‬‬ ‫‪207‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ HTML ‫عناص‬

imagesizes
‫ نسخ الصور المحملة يف الخاصية‬،‫خاصية تقوم بتحديد حجم وبيئة عرض‬
. >img< ‫ يف العنرص‬sizes ‫والن سيتم إسنادها الحقا للخاصية‬
‫ ي‬، imagesrcset
<head>
<link rel="preload" as="image" type="image/jpg" imagesrcset="river-
1X.jpg 400w, river-2X.jpg 590w,river-3X.jpg 800w" imagsizes="(max-
width:400px) 200px, (max-width:590px) 400px, (max-width: 800px) 600px"
</head>
<body>
<img src="river-1X.jpg"
srcset="river-1X.jpg 400w, river-2X.jpg 590w,river-3X.jpg 800w"
sizes="(max-width:400px) 200px, (max-width:590px) 400px, (max-width:
800px) 600px">
</body>

HTML Elements 208 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<style>…</style‬‬
‫عنرص مخصص الحتواء تنسيقات العناص األخرى داخل الصفحة‪ ،‬مثل لون النص‬
‫وغثها‪.‬‬
‫وتنسيق الخلفية والحدود والهوامش والفالتر واالنتقال والحركة ر‬
‫تعيي عدة خصائص لهذا العنرص‪:‬‬‫ويمكن ر‬
‫‪title‬‬
‫خاصية تقوم بإسناد عنوان لهذا العنرص‪.‬‬
‫‪type‬‬
‫وه‬
‫ه ‪ ، text/css‬ي‬ ‫خاصية تحدد نوع الكود الذي سيتم كتابة العنرص به‪ ،‬وقيمتها ي‬
‫خاصية اختيارية ليس من الرصوي أن يتم تعيينها‪ ،‬ألن القيمة االفثاضية دائما ‪.text/css‬‬
‫‪media‬‬
‫الن يعمل بها التنسيق داخل العنرص‪.‬‬
‫خاصية تحدد البيئات ي‬
‫>‪<head‬‬
‫>"‪<style title="my-styles" media="screen" type="text/css‬‬
‫{ ‪div‬‬
‫;‪width: 170px‬‬
‫;‪color : red‬‬
‫;‪background-color : yellow‬‬
‫;‪border : 3px solid black‬‬
‫;‪padding: 3px‬‬
‫;‪font-size : 30px‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div> Style Element </div‬‬
‫>‪</body‬‬
‫الحظ أن العنرص <‪ >style‬قد منح العنرص <‪ >div‬تنسيقا عبارة عن‪:‬‬

‫‪HTML Elements‬‬ ‫‪209‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪ -‬عرض أو ‪ width‬قدره ‪. 170px‬‬

‫أمام أو ‪ color‬أحمر ‪. red‬‬
‫‪ -‬لون ي‬
‫‪ -‬لون خلفية أو ‪ background‬أصفر ‪. yellow‬‬
‫‪ -‬حدود أو ‪ border‬سمكها ‪ 3px‬ولونها أسود ‪ black‬وخط مصمت ‪. solid‬‬
‫داخىل أو ‪ padding‬ربي محتوى العنرص والحدود قدره ‪. 3px‬‬
‫ي‬ ‫‪ -‬هامش‬
‫‪ -‬حجم خط أو ‪ font-size‬قدره ‪. 30px‬‬

‫‪HTML Elements‬‬ ‫‪210‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<meta‬‬
‫غث مرئية ‪ ، metadata‬تؤثر يف‬
‫عنرص ‪ ، empty element‬يتحكم يف مجموعة بيانات ر‬
‫طريقة عرض البيانات المرئية‪ ،‬ويكون العنرص <‪ >meta‬دائما داخل محتوى العنرص <‪>head‬‬
‫ترمث النصوص ‪ ، charset‬ووصف الصفحة‪،‬‬ ‫ويختص بمجموعة وظائف منها‪ ،‬تحديد طريقة ر‬
‫الن تستخدم يف البحث‪ ،‬ومعلومات عن مطور الصفحة‪ ،‬وإعدادات‬ ‫والكلمات المفتاحية ي‬
‫وغثها‬
‫مشاهدة الصفحة‪ ،‬وإعادة تحميل الصفحة‪ ،‬ومعرفة مدى استجابة ‪ http headers‬ر‬
‫من الوظائف الهامة‪.‬‬
‫تعيي عدة خصائص لهذا العنرص‪:‬‬
‫ويمكن ر‬
‫‪charset‬‬
‫ه القيمة‬‫ترمث حروف النصوص يف الصفحة‪ ،‬والقيمة ‪ utf-8‬ي‬ ‫خاصية تحدد طريقة ر‬
‫غث حساسة لحالة األحرف ‪case-insenstive‬‬ ‫وه ر‬‫الوحيدة الصحيحة لصفحات ‪ ، html‬ي‬
‫ه نفسها القيمة ‪ ، UTF-8‬ويجب أن يتم تعيينها يف أول ‪ 1024‬بايت من‬‫فالقيمة ‪ utf-8‬ي‬
‫الصفحة‪ ،‬ولتوضيح مفهوم هذه القيمة‪ ،‬انظر الخاصية ‪ ، accept-charset‬ص ‪. 104‬‬
‫>‪<head‬‬
‫>‪<title>Start HTML</title‬‬
‫>"‪<meta charset="utf-8‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫تعلم تصميم مواقع اإلنثنت‬
‫>‪</body‬‬

‫‪utf-8‬‬ ‫‪ISO-8859-1‬‬

‫‪HTML Elements‬‬ ‫‪211‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪content‬‬
‫الن يتم إسنادها للخاصية ‪ name‬والخاصية ‪. http-equiv‬‬
‫خاصية تفش القيم ي‬
‫‪name‬‬
‫والن سيوضع وصف لها يف قيمة‬
‫ي‬ ‫‪me‬تحدد اسم البيانات ر‬
‫الغث مرئية ‪metadata‬‬ ‫خاصية‬
‫الخاصية ‪ ، content‬والخاصية ‪ name‬تقبل عدة قيم‪:‬‬
‫تعن وصف للصفحة‪.‬‬
‫‪ : description -‬قيمة ي‬
‫>"‪<meta name="description" content="Learning Web Design‬‬
‫تعن كلمات مفتاحية تستخدم يف البحث عن الصفحة‪.‬‬
‫‪ : keywords -‬قيمة ي‬
‫>"‪<meta name="keywords" content="learn, web, html, css‬‬
‫معي يف الصفحة أو اسم مطور الصفحة‪.‬‬
‫تعن اسم مؤلف موضوع ر‬
‫‪ : author -‬قيمة ي‬
‫>"‪<meta name="author" content="Wail Monir‬‬
‫الن تقوم بإنشاء الصفحة‪.‬‬
‫تعن الثنامج أو األداة ي‬
‫‪ : generator -‬قيمة ي‬
‫>"‪<meta name="generator" content="FrontPage 4.0‬‬
‫تعن طريقة إرسال ‪ referrer http header‬أو محتويات رأس صفحة‬
‫‪ : referrer -‬قيمة ي‬
‫المحيل‪.‬‬
‫>"‪<meta name="referrer" content="no-referrer‬‬
‫‪ : viewport -‬قيمة تحدد للمتصفح األبعاد ومقياس العرض للصفحة‪ ،‬وتستخدم هذه‬
‫الخاصية يف حالة األجهزة المحمولة فقط‪.‬‬
‫‪<meta name="viewport" content="width=device-width,‬‬
‫>"‪initial-scale=1.0‬‬
‫وه‪:‬‬
‫وتقبل الخاصية ‪ content‬عدة قيم تصف القيمة ‪ viewport‬ي‬
‫تعن تحديد عرض إطار الرؤية‪ ،‬ويسند لها قيمة عبارة عن عدد صحيح‬ ‫‪ : width -‬قيمة ي‬
‫موجب‪ ،‬أو القيمة ‪. device-width‬‬
‫تعن تحديد ارتفاع إطار الرؤية‪ ،‬ويسند لها قيمة عبارة عن عدد صحيح‬
‫‪ : height -‬قيمة ي‬
‫موجب‪ ،‬أو القيمة ‪. device-height‬‬
‫األفق ‪ portrait‬أو ارتفاع‬
‫ي‬ ‫‪ : initial-scale -‬قيمة ي‬
‫تعن النسبة ربي عرض الجهاز يف الوضع‬
‫‪HTML Elements‬‬ ‫‪212‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫أش ‪ ، landscape‬وحجم إطار العرض‪ ،‬وتكون النسبة عدد موجب ربي‬ ‫الجهاز يف الوضع الر ي‬
‫‪ 0.0‬و ‪.10.0‬‬
‫لتكبث إطار العرض‪ ،‬ويجب أن تكون أكث‬ ‫ر‬ ‫تعن أقص قيمة‬ ‫‪ : maximum-scale -‬قيمة ي‬
‫من أو تساوي القيمة ‪ ، minimum-scale‬وتكون قيمتها عددا موجبا ربي ‪ 0.0‬و ‪ ، 10.0‬ويمكن‬
‫إعداد المتصفح لتجاهل هذه القيمة‪.‬‬
‫لتصغث إطار العرض‪ ،‬ويجب أن تكون أقل من‬ ‫ر‬ ‫تعن أقل قيمة‬ ‫‪ : minimum-scale -‬قيمة ي‬
‫أو تساوي القيمة ‪ ، maximum-scale‬وتكون قيمتها عددا موجبا ربي ‪ 0.0‬و ‪ ، 10.0‬ويمكن‬
‫إعداد المتصفح لتجاهل هذه القيمة‪.‬‬
‫فرعيتي هما‪:‬‬
‫ر‬ ‫قيمتي‬
‫ر‬ ‫‪ : user-scalable -‬قيمة تقبل‬
‫وتصغث الصفحة‪.‬‬
‫ر‬ ‫تكبث‬
‫وتعن أن المستخدم يستطيع ر‬ ‫ي‬ ‫القيمة ‪yes‬‬
‫تصغث الصفحة‪.‬‬
‫ر‬ ‫تكبث أو‬
‫وتعن أن المستخدم ال يستطيع ر‬ ‫ي‬ ‫القيمة ‪no‬‬
‫ويمكن للمتصفحات تجاهل هذه القيمة‪.‬‬
‫‪ : viewport-fit -‬قيمة تحدد كيف يتم تهيئة اإلطار ‪ ، viewport‬ليالئم جهاز العرض‪،‬‬
‫وه‪:‬‬ ‫وه قيمة تقبل ثالث قيم فرعية ي‬ ‫ي‬
‫األساش لإلطار‪ ،‬والصفحة سيتم عرضها بالكامل عىل‬ ‫ي‬ ‫‪ : auto‬قيمة فرعية ال تؤثر يف الشكل‬
‫شاشة عرض الجهاز‪.‬‬
‫تعن أن اإلطار سيتم تحجيمه داخل الجهاز‪ ،‬ليتم إحتواء اإلطار‬ ‫‪ : contain‬قيمة فرعية ي‬
‫داخل شاشة الجهاز‪.‬‬
‫تعن أن اإلطار سوف يتم تحجيمه بحيث يمأل شاشة الجهاز مع‬ ‫‪ : cover‬قيمة فرعية ي‬
‫المحافظة عىل النسبة ربي عرضه وارتفاعه‪ ،‬وقص ما يزيد من العرض أو االرتفاع‪.‬‬
‫اللوب الذي ستعرض فيه الصفحة‪ ،‬والذي يؤثر عىل‬ ‫ي‬ ‫تعن النمط‬ ‫‪ : color-scheme -‬قيمة ي‬
‫وغثها‪ ،‬وتقبل الخاصية ‪ content‬عدة قيم‪:‬‬ ‫خلفية الصفحة ولون النص ر‬
‫اللوب‪ ،‬وتعرض الصفحة باستخدام األلوان‬ ‫ي‬ ‫‪ : normal -‬ال تستطيع الصفحة تحديد النمط‬
‫االفثاضية‪.‬‬
‫االثني معا‪.‬‬
‫ر‬ ‫اللوب الساطع أو‬
‫ي‬ ‫اللوب الداكن أو النمط‬
‫ي‬ ‫‪ : ]dark|light[ -‬إما النمط‬
‫اللوب الساطع فقط‪.‬‬ ‫ي‬ ‫‪ : only light -‬استخدام النمط‬

‫‪HTML Elements‬‬ ‫‪213‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>"‪<meta name="color-schem" content="dark‬‬

‫‪dark‬‬ ‫‪light‬‬

‫غث مدعومة يف متصفح ‪. Firefox‬‬

‫والقيمة ‪ color-scheme‬ر‬

‫‪http-equiv‬‬
‫خاصية كل قيمها عبارة عن أسماء ‪ ، http headers‬فتقوم بتحديد المعلومات والقيم‬
‫تفسثها يف الخاصية ‪ ، content‬كما يمكن استخدامها لمحاكاة استجابة‬ ‫ر‬ ‫الن سيتم‬‫الموجودة ي‬
‫‪. http header‬‬
‫وهذه الخاصية تقبل عدة أنواع من القيم‪:‬‬
‫مث للنصوص‪.‬‬ ‫‪ : content-type -‬قيمة تحدد نوع الصفحة الحالية‪ ،‬ونوع الث ر‬
‫وتقبل الخاصية ‪ content‬قيمتها عىل هيئة نوع الصفحة وهو ‪ text/html‬يليه ك;ك ثم‬
‫كالتال‪:‬‬
‫ي‬ ‫مث وهو ‪utf-8‬‬ ‫مث ‪ ، charset‬ويسند لها نوع الث ر‬ ‫خاصية نوع الث ر‬
‫>"‪<meta http-equiv="content-type" content="text/html;charset=utf-8‬‬
‫‪ : refresh -‬قيمة تجعل الصفحة تقوم بعمل ‪ refresh‬تلقائيا‪ ،‬وتحدد الفثة ربي ‪refresh‬‬
‫ً‬
‫التال‪:‬‬
‫ي‬ ‫الكود‬ ‫ف‬
‫ي‬ ‫كما‬ ‫‪،‬‬‫ثانية‬ ‫‪30‬‬ ‫‪-‬‬ ‫مثال‬ ‫فه تساوي ‪-‬‬
‫كقيمة للخاصية ‪ ، content‬ي‬
‫>"‪<meta http-equiv="refresh" content="30‬‬
‫ويمكن أن يتم توجيه الصفحة لصفحة أخرى بعد عملية ‪ ، refresh‬عن طريق إضافة ‪url‬‬
‫للصفحة المطلوب توجيه الصفحة الحالية إليها‪ ،‬بعد عملية ‪ ، refresh‬عىل أن يفصل ربي‬
‫الفثة االنتقالية وعنوان الصفحة الجديدة ك;ك‪.‬‬

‫‪HTML Elements‬‬ ‫‪214‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>"‪<meta http-equiv="refresh" content="30; url=https://google.com‬‬

‫الحظ أنه سيتم توجيه الصفحة الحالية إل موقع جوجل بعد ‪ 30‬ثانية‪.‬‬
‫‪ : default-style -‬قيمة يقصد منها‪:‬‬
‫الخارج‪ ،‬إذا كانت‬
‫ي‬ ‫إما تحديد العنرص <‪ >link‬الذي يربط الصفحة بملف التنسيق‬
‫التنسيقات ‪ ، external‬أو تحديد العنرص <‪ >style‬الذي يحتوي تنسيقات الصفحة داخله‪ ،‬إذا‬
‫كانت التنسيقات ‪ internal‬أي داخل نفس صفحة ‪. html‬‬
‫التاليتي‪:‬‬
‫ر‬ ‫قيمتي‬
‫ر‬ ‫وبناء عىل ذلك فقد تكون قيمة الخاصية ‪ content‬إحدى ال‬
‫الخارج بالصفحة‬
‫ي‬ ‫‪ -‬قيمة الخاصية ‪ title‬للعنرص <‪ >link‬الذي يقوم بربط ملف التنسيق‬
‫الحالية‪.‬‬
‫‪ -‬قيمة الخاصية ‪ title‬للعنرص <‪ >style‬الذي يحتوي تنسيقات الصفحة داخله‪.‬‬
‫>‪<head‬‬
‫>"‪<link rel="stylesheet" href="styles.css‬‬
‫>"‪<meta http-equiv="default-style" content="my-style‬‬
‫>"‪<style title="my-style‬‬
‫{ ‪div‬‬
‫;‪width: max-content‬‬
‫;‪padding: 5px‬‬
‫;‪font-size: 2em‬‬
‫;‪font-weight: bold‬‬
‫;‪color: darkred‬‬
‫;‪background: pink‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div>Default Style</div‬‬
‫>‪</body‬‬
‫الحظ ظهور العنرص بالتنسيقات الموجودة داخل‬
‫العنرص <‪ ،>style‬والحظ أن قيمة الخاصية ‪ title‬لهذا‬
‫العنرص تساوي قيمة الخاصية ‪ content‬للعنرص <‪. >meta‬‬
‫‪HTML Elements‬‬ ‫‪215‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫بتغيث قيمة الخاصية ‪ title‬للعنرص <‪ >style‬واترك قيمة‬

‫ر‬ ‫قم‬
‫تغيث‪ ،‬والحظ اختفاء تنسيقات العنرص‬‫الخاصية ‪ content‬دون ر‬
‫وظهوره بتنسيقاته االفثاضية‪.‬‬
‫‪ : X-UA-compatible -‬قيمة تساعد متصفح ‪ (internet explorer) IE‬قبل النسخة‬
‫الن ال‬
‫‪ 11‬عىل عرض صفحات الويب الحديثه‪ ،‬بنوع من التوافق مع المواصفات الحديثة‪ ،‬ي‬
‫تدعمها هذه المتصفحات القديمة‪ ،‬وذلك بجعلها متوافقة مع أحد المتصفحات الحديثه‪،‬‬
‫يعن أن المتصفحات القديمة‪ ،‬ستكون متوافقة بأكث قدر‬
‫وعند اختيار القيمة ‪ ie=edge‬فهذا ي‬
‫ممكن مع مواصفات متصفح ‪. edge‬‬
‫"‪<meta http-equiv="X-UA-comaptible‬‬ ‫>"‪content="IE-edge‬‬
‫‪ : content-security-policy -‬سياسة أمن المحتوى لـ ‪ http header‬تجعل مديري‬
‫الن يتم تحميلها إل الصفحات‪ ،‬حيث تقوم بتحديد نوع‬ ‫الصفحات يتحكمون يف المصادر ي‬
‫مج‪ ،‬لمنع ما يعرف‬‫الخادم أو ‪ server‬الذي سيتم التحميل منه‪ ،‬وكذلك نقطة نهاية الكود الث ي‬
‫بهجمات االخثاق المسماة ‪ XSS‬أو ‪. cross-site scripting‬‬
‫وهذه القيمة (الخاصية) تقبل عدة قيم فرعية كقيمة للخاصية ‪: content‬‬
‫‪ : child-src -‬قيمة تحدد المصادر الصالحة‪ ،‬ألي برامج أو أكواد تعمل يف الخلفية‪ ،‬أو أي‬
‫طلبات للتحميل من داخل اإلطارات <‪. >iframe‬‬
‫الن يمكن تحميلها بواسطة األكواد‬ ‫تعن تقييد عناوين ‪ url‬ي‬ ‫ي‬ ‫‪ : connect-src -‬قيمة‬
‫الثمجية (‪.)scripts‬‬
‫‪ : default-src -‬قيمة تعمل كقيمة احتياطية لكل القيم األخرى‪.‬‬
‫تعن توف رث مصادر صالحة لتحميل أنواع الخطوط‪.‬‬ ‫‪ : font-src -‬قيمة ي‬
‫توفث مصادر صالحة للتحميل‪ ،‬عند طلبها من داخل اإلطار أو‬ ‫تعن ر‬ ‫‪ : frame-src -‬قيمة ي‬
‫عنرص <‪. >iframe‬‬
‫توفث مصادر صالحة لتحميل الصور واأليقونات‪.‬‬ ‫تعن ر‬ ‫‪ : img-src -‬قيمة ي‬
‫توفث مصادر صالحة لتحميل ملفات التطبيقات األساسية‪.‬‬ ‫تعن ر‬ ‫‪ : manifest-src -‬قيمة ي‬
‫توفث مصادر صالحة للتحميل بواسطة العناص <‪>audio‬‬ ‫تعن ر‬ ‫‪ : media-src -‬قيمة ي‬
‫و<‪ >video‬و <‪. >track‬‬

‫‪HTML Elements‬‬ ‫‪216‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫توفث مصادر صالحة للتحميل‪ ،‬بواسطة العناص <‪>object‬‬ ‫تعن ر‬‫‪ : object-src -‬قيمة ي‬
‫و<‪. >embed‬‬
‫توفث مصادر صالحة ألكواد الجافاسكريبت‪.‬‬ ‫تعن ر‬‫‪ : script-src -‬قيمة ي‬
‫توفث مصادر صالحة لتنسيقات ‪. css‬‬ ‫تعن ر‬‫‪ : style-src -‬قيمة ي‬
‫وقيمة الخاصية ‪ content‬تكون إحدى هذه القيم الفرعية السابقة‪ ،‬ثم يتبعها كلمة‬
‫مفتاحية تحدد مصدر التحميل‪ ،‬وهذه الكلمة المفتاحية لها أنواع‪:‬‬
‫تعن عدم السماح بتحميل أي مصادر‪.‬‬ ‫‪ : none -‬قيمة ي‬
‫الرئيش ك‪origin‬ك للصفحة‪.‬‬
‫ي‬ ‫تعن السماح بتحميل المصادر من العنوان‬ ‫‪ : self -‬قيمة ي‬
‫تعن السماح بتحميل المصادر من المواقع اآلمنة فقط‪.‬‬ ‫‪ : https -‬قيمة ي‬
‫الغث آمنة‪.‬‬
‫تعن السماح بتحميل المصادر من المواقع ر‬ ‫‪ : http -‬قيمة ي‬
‫معي‪.‬‬
‫تعن السماح بتحميل المصادر من موقع ر‬ ‫‪ : http://example.com -‬قيمة ي‬
‫"‪<meta http-equiv="content-security-policy‬‬
‫>"‪content="default-src https 'self'; font-src http://fonts.com‬‬

‫وهذا رشح بشكل مبسط‪ ،‬حن يستوعب كل مبتدئ سلوك ر‬

‫وتأثث هذه القيمة أو الخاصية‪،‬‬
‫الن ال يتسع المجال لذكرها‪.‬‬
‫كثث من التفاصيل ي‬
‫ألنها تحتوي عىل ر‬

‫‪HTML Elements‬‬ ‫‪217‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<script>…</script‬‬
‫عنرص مخصص الحتواء األكواد الثمجية للجافاسكريبت ‪ Javascript‬أو ‪، JSON‬‬
‫الن تحتاج إل ترجمة أكوادها‬
‫باف لغات الثمجة‪ ،‬ي‬
‫ه لغة برمجة تختلف عن ي‬ ‫والجافاسكريبت ي‬
‫باستخدام مثجم (‪ )compiler‬خاص‪ ،‬إال أن جافاسكريبت تتم ترجمة أكوادها من خالل‬
‫مباشة‪ ،‬وهو ما يسم ‪، client side scripting‬‬ ‫ر‬ ‫المتصفح عىل جهاز المستخدم‬
‫والجافاسكريبت تستخدم إلضفاء نوع من الديناميكية عىل الصفحة‪ ،‬أو التفاعل مع المستخدم‬
‫تعيي خصائص جديدة للعنرص أو‬ ‫والتجاوب معه‪ ،‬فيمكنها إنشاء أو حذف عناص ‪ ، html‬و ر‬
‫إسناد قيم جديدة للخصائص‪ ،‬يمكنها التالعب بالعناص والتحكم فيها‪ ،‬مثل إخفاء عنرص أو‬
‫والكثث من‬
‫ر‬ ‫الكثث‬
‫ر‬ ‫غثها‬
‫إظهاره أو تحريكه ورسم األشكال عن طريق العنرص ‪ ، canvas‬و ر‬
‫تضق عىل الموقع روح الحركة والتفاعل‪.‬‬
‫ي‬ ‫الن‬
‫الوظائف‪ ،‬ي‬
‫>‪<head‬‬
‫>‪<title>Start HTML</title‬‬
‫>‪<script> alert ("Hello World from Javascipt")</script‬‬
‫>‪</head‬‬

‫ً‬
‫الحظ أن مخرجات كود العنرص <‪ >script‬أدت لظهور رسالة‪ ،‬يجب التعامل معها أوال‪،‬‬
‫تعيي عدة خصائص لهذا العنرص‪:‬‬
‫قبل تصفح الموقع‪ ،‬ويمكن ر‬
‫‪src‬‬
‫مج‪ ،‬يف حالة عدم كتابة الكود‬
‫الخارج الذي يحتوي الكود الث ي‬
‫ي‬ ‫خاصية تحدد مسار الملف‬
‫وسم البداية والنهاية للعنرص<‪ >head‬أو عدم كتابته يف جسم الصفحة‪ ،‬وإنما تمت‬‫ي‬ ‫ربي‬
‫كتابته ف ملف خارج (وهو االستخدام ر‬
‫األكث شيوعا)‪.‬‬ ‫ي‬ ‫ي‬
‫‪HTML Elements‬‬ ‫‪218‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪type‬‬
‫مج لهذا العنرص‪ ،‬وأنواع الملفات‬
‫الخارج أو نوع الكود الث ي‬
‫ي‬ ‫خاصية تحدد نوع الملف‬
‫ه ‪ application/javascript‬أو ‪ application/ecmascript‬ويوجد نوع آخر هو‬ ‫الخارجية ي‬
‫ستثاده داخل أي ملف)‪ ،‬وأي‬‫‪( module‬وهو ملف يحتوي أكواد برمجية معدة مسبقا يتم ا ر‬
‫نوع آخر من أنواع الملفات‪ ،‬سيسبب تجاهل لقيمة الخاصية ‪. src‬‬
‫‪async‬‬
‫غث مثامن‪ ،‬مع‬‫مج سيتم تحميله بشكل ر‬
‫تعن أن النص الث ي‬
‫خاصية ‪ boolean attribute‬ي‬
‫تحليل الصفحة (أي يف نفس الوقت)‪ ،‬وتحليل الصفحة هو قراءة كود ‪ html‬وبناء هيكل‬
‫العناص ‪ dom‬وإظهار مخطط الصفحة ‪ basic layout‬والنصوص ‪ ، text‬ويتم تنفيذ الكود‬
‫فور جلبه (بعد اكتمال تحميله)‪ ،‬ويتوقف تحليل كود الصفحة خالل عملية تنفيذ الكود‪ ،‬وهذه‬
‫تعيي‬
‫خارج فقط‪ ،‬أي أن العنرص <‪ >script‬تم ر‬‫ي‬ ‫الخاصية تطبق عىل الكود إذا كان يف ملف‬
‫الخاصية ‪ src‬له‪.‬‬
‫‪defer‬‬
‫خاصية ‪ boolean attribute‬مشابهة للخاصية السابقة‪ ،‬والفرق بينهما أن الكود لن يتم‬
‫تنفيذه فور جلبه‪ ،‬ولكن سيتم تأجيل التنفيذ‪ ،‬حن االنتهاء من تحليل الصفحة‪.‬‬
‫السابقتي‪ ،‬سيتم تحميل الكود وتنفيذه ر‬
‫مباشة‬ ‫ر‬ ‫الخاصيتي‬
‫ر‬ ‫تعيي أي من‬
‫يف حالة عدم ر‬
‫لحي االنتهاء‬
‫بطريقة مثامنة‪ ،‬أي سيتم تحميل وتنفيذ الكود فورا‪ ،‬ويتوقف تحليل الصفحة ر‬
‫من تنفيذ الكود ‪ ،‬ويتم استئنافه بعد التنفيذ‪.‬‬

‫‪integrity‬‬
‫خاصية تسمح للمتصفح بالتحقق‪ ،‬من أن ملف الكود الذي تم جلبه‪ ،‬لم يتم التالعب به‬
‫السثفر‪ ،‬عن طريق شفرة معينة لهذا‬‫من جانب طرف ثالث‪ ،‬وأنه هو نفسه الملف المرسل من ر‬
‫الن تقوم بجلب الملف بهذه‬ ‫السثفر بالملف وتحتفظ الصفحة ي‬ ‫ر‬ ‫الملف‪ ،‬حيث يحتفظ‬
‫الشفرة‪ ،‬و بعد تحميل الملف‪ ،‬يقوم المتصفح بمقارنة الشفرة الموجودة بالصفحة (قيمة‬
‫وبي شفرة الملف الذي تم تحميله‪ ،‬فإذا تطابقا يتم استخدام الملف‪ ،‬وإن‬
‫الخاصية ‪ )integrity‬ر‬
‫‪HTML Elements‬‬ ‫‪219‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬
‫اختلفا يتم حجب الملف‪.‬‬
‫‪nomodule‬‬
‫تعن أن األكواد الثمجية‪ ،‬لن يتم تنفيذها يف المتصفحات‬
‫خاصية ‪ boolean attribute‬ي‬
‫الن تدعم نسخة الجافاسكريبت ‪ es6‬ألنها تدعم ‪ ، modules‬ويجب تجربة األكواد عىل‬ ‫ي‬
‫متصفحات أقدم ال تدعم ‪. modules‬‬
‫‪nonce‬‬
‫ئ‬
‫عشواب‪ ،‬من النوع ‪ base64-encoded‬ليكون‬‫ي‬ ‫خاصية تسمح للخادم بتحديد رقم فريد‬
‫سلسلة نصية‪ ،‬يصل حجمها عىل األقل إل ‪ ، 128 bits‬ويستخدم هذا الرقم لمرة واحدة فقط‪،‬‬
‫خارج يمكن جلب الكود منه بأمان‪ ،‬لتكوين قائمة بيضاء للمصادر اآلمنة‪ ،‬حيث‬
‫ي‬ ‫ألي مصدر‬
‫يستخدم هذا الرقم يف سياسة أمن المحتوى ‪. Content Security Policy‬‬
‫‪crossorigin‬‬
‫خاصية تحدد كيفية الحصول عىل ملف الكود‪ ،‬وهل يجب إرسال معلومات عن الصفحة‬
‫الن تحتوي الكود أم ال‪ ،‬و رشح الخاصية وقيمها ملحق ‪. 1‬‬
‫الحالية للصفحة ي‬
‫‪referrerpolicy‬‬
‫الن سيتم إرسالها يف ‪ ، http header‬من صفحة المحيل‬ ‫خاصية تحدد نوع المعلومات ي‬
‫‪ referrer‬إل صفحة ‪ ، destination‬وللتعرف عىل الخاصية وقيمها انظر ملحق ‪. 1‬‬

‫‪HTML Elements‬‬ ‫‪220‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫>‪<noscript>..</noscript‬‬
‫عنرص ال يظهر محتواه إال يف حالة عدم تفعيل أكواد جافاسكريبت يف الصفحة‪.‬‬
‫>‪<head‬‬
‫>‪<title>Start HTML</title‬‬
‫>‪<script> alert ("Javascipt is enabled")</script‬‬
‫>‪<noscript> Javascript is disable </noscript‬‬
‫>‪</head‬‬

‫الحظ أن كود الجافاسكريبت داخل العنرص <‪ >script‬تم تنفيذه‪ ،‬ولم يظهر النص داخل‬
‫محتوى العنرص <‪ ، >noscript‬ألن أكواد الجافاسكريبت مفعلة يف هذه الصفحة‪.‬‬
‫لنقم اآلن بتعطيل أكواد الجافاسكريبت يف متصفح ‪( Chrome‬عىل سبيل المثال)‪:‬‬
‫‪ -‬قم بفتح ‪ Develeper tools‬إما بالضغط عىل مفتاح ‪ ، F12‬أو الضغط عىل مفاتيح‬
‫التال‪:‬‬
‫‪ ، Ctl+Shift+i‬أو من القائمة الجانبية‪ ،‬كما بالشكل ي‬

‫التال‪:‬‬
‫لتفتح نافذة ‪ Developer tools‬بالشكل ي‬

‫‪HTML Elements‬‬ ‫‪221‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫عناص ‪HTML‬‬

‫‪ -‬قم بفتح ‪ ، Command menu‬بالضغط عىل المفاتيح ‪ Ctl+Shift+p‬واكتب يف مربــع‬

‫التال‪:‬‬
‫البحث ‪ javascript‬كما بالشكل ي‬

‫‪ -‬ستفتح لك قائمة منسدلة‪ ،‬قم بالضغط عىل االختيار ‪. Disable Javascript‬‬

‫‪ -‬انتهت عملية تعطيل أكواد الجافاسكريبت وستغلق القائمة المنسدلة‪.‬‬
‫قم اآلن بعمل ‪ refresh‬للصفحة أو التبويب الذي قمنا بتعطيل أكواد ‪Javascript‬‬
‫داخله ‪:‬‬

‫ً‬
‫الحظ أن الكود داخل العنرص <‪ >script‬لم يتم تنفيذه‪ ،‬وظهر بدال منه النص الموجود‬
‫داخل محتوى العنرص <‪ ، >noscript‬لتنبيه المستخدم أن أكواد الجافاسكريبت معطلة يف‬
‫هذه الصفحة أو هذا التبويب‪.‬‬

‫‪HTML Elements‬‬ ‫‪222‬‬ ‫‪[email protected]‬‬

‫الخصائص العامة‬
Global Attributes
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫الخصائص العامة ‪Global Attributes‬‬

‫ه خصائص مشثكة ربي جميع عناص ‪ html‬وليست قاصة عىل عناص معينة‪.‬‬
‫ي‬
‫‪accesskey‬‬
‫خاصية تحدد مفتاح واحد عىل لوحة المفاتيح‪ ،‬قد يكون حرفا أو‬
‫رمزا أو رقما‪ ،‬عند الضغط عليه مع مفتاح ‪ Alt‬يف متصفح ‪، Chrome‬‬
‫مفتاج ‪ Alt+Shift‬يف متصفح ‪ ، Firefox‬يتم تنشيط وتفعيل‬‫ي‬ ‫أو مع‬
‫العنرص‪ ،‬وكأنه قد تم الضغط عليه‪.‬‬
‫‪<button accesskey="b" onclick="style='background:red'"> Press Me‬‬
‫>‪</button><br><br‬‬
‫‪<a href="https://cdn.pixabay.com/photo/2018/03/30/15/11/deer-‬‬
‫>‪3275594_960_720.jpg" accesskey="r" target="_blank">Go to photo</a‬‬
‫مفتاحي ‪ b+Alt‬يف متصفح ‪ ، Chrome‬أو‬ ‫ر‬ ‫قم بالضغط عىل ال‬
‫تغيث خلفية‬
‫المفاتيح ‪ b+Alt+Shift‬يف متصفح ‪ ، Firefox‬والحظ ر‬
‫الزر إل اللون األحمر‪ ،‬حسب الكود المطلوب تنفيذه يف الخاصية‬
‫‪ ، onclick‬ثم قم بالضغط عىل األزرار ‪ r+Alt‬أو ‪( r+Alt+Shift‬حسب‬
‫المتصفح) والحظ أن الرابط ‪ Go to photo‬قد قام بفتح رابط الصورة الموجودة يف العنرص‬
‫<‪ >a‬وقد تغ رث لون الرابط‪ ،‬كدليل عىل أنه تم الضغط عليه وفتحه ‪.‬‬

‫الن تجعلنا نتوج الحذر عند استخدام هذه الخاصية‪:‬‬

‫بعض النقاط ي‬
‫معي لهذه الخاصية‪ ،‬مع اختصارات نظام التشغيل‪ ،‬أو مع اختصارات‬‫‪ -‬قد يتعارض اختصار ر‬
‫المتصفح‪ ،‬أو مع اختصارات الثامج المساعدة‪.‬‬
‫‪ -‬استخدام األرقام يف هذه الخاصية‪ ،‬قد يسبب ارتباكا للمستخدم‪ ،‬خاصة إذا كان المفتاح‬
‫الن يقوم بها‪.‬‬
‫المستخدم هو رقم ليس له صلة بالوظيفة ي‬
‫بتعيي هذه الخاصية ألحد العناص‪ ،‬قد يتسبب يف تنشيط هذا‬ ‫ر‬ ‫‪ -‬عدم إعالم المستخدم‬
‫العنرص بطريق الخطأ‪.‬‬

‫‪Global Attributes‬‬ ‫‪225‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪class‬‬
‫خاصية يتم تعيينها للعنرص‪ ،‬ليتم اختيار العنرص عن طريق قيمتها لتنسيقه بـ ‪ ، css‬أو‬
‫غثها من لغات الثمجة‪.‬‬ ‫استدعاؤه واستخدامه برمجيا يف ‪ javascript‬أو ر‬
‫أكث‪ ،‬ويمكن أن تبدأ بحرف أو مسافة فارغة أو‬ ‫قيمة هذه الخاصية قد تكون حرف واحد أو ر‬
‫ك_ك أو ك‪-‬ك وال تبدأ برقم أو رمز‪ ،‬وال يتخللها فاصلة‪ ،‬أو رمز ‪ ،‬أو مسافة فارغة (المسافة الفارغة‬
‫ستعتث ما قبلها قيمة وما بعدها قيمة أخرى) وقد يتخللها أي أرقام أو ك_ك أو ك‪-‬ك ‪.‬‬
‫غث صحيحة‪ @cls :‬و ‪ c ls‬و ‪ .cls‬و ‪ 9cls‬و ‪. cl&s‬‬ ‫وعليه‪ ،‬فهذه القيم ر‬
‫وهذه القيم صحيحة ‪ cls :‬و ‪ _cls‬و ‪ -cls‬و ‪ c9ls‬و ‪ cl_s‬و ‪ cl-s‬و صف‪. 1‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{صف‪.1‬‬
‫;‪width: max-content‬‬
‫;‪background: lightblue‬‬
‫;‪padding: 5px‬‬
‫;‪color: blue‬‬
‫;‪font-size: 3em‬‬
‫;‪font-weight: bold‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪">Using Class</div‬صف‪<div class="1‬‬
‫>‪</body‬‬
‫أكث من قيمة داخل قيمة الخاصية‬ ‫وقد يكون للعنرص ر‬
‫‪ ، class‬بينها مسافة واحدة فارغة عىل األقل‪ ،‬تمثل كل منها‬
‫العنرص‪ ،‬ويستخدم كل منها بشكل منفرد ليعث عن هذا‬
‫العنرص‪ ،‬وقد يشثك ر‬
‫أكث من عنرص يف قيمة الخاصية ‪. class‬‬
‫>‪<div class="dv dv_cls">First Class</div‬‬
‫>‪<div class="cls dv_cls">Second Class</div‬‬

‫‪Global Attributes‬‬ ‫‪226‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪contenteditable‬‬
‫قيمتي‪:‬‬
‫ر‬ ‫خاصية تسمح بالتعديل عىل محتوى العنرص داخل المتصفح وتقبل‬
‫تعن أن العنرص يقبل التعديل‪.‬‬
‫‪ : true -‬قيمة ي‬
‫تعن أن العنرص ال يقبل التعديل‪.‬‬
‫‪ : false -‬قيمة ي‬
‫>‪<div contenteditable="true">Click to edit it in the browser</div‬‬
‫قم بالنقر عىل العنرص‪ ،‬والحظ ظهور‬
‫ر‬
‫مؤش الكتابة‪ ،‬الذي يسمح لك بالتعديل‬
‫عىل محتوى العنرص‪ ،‬سواء بالحذف أو‬
‫اإلضافة‪.‬‬
‫تعيي هذه الخاصية بدون إضافة أي قيمة لها وستعامل عىل أنها ‪. true‬‬
‫يمكن ر‬
‫>‪<div contenteditable>Click to edit it in the browser</div‬‬

‫تعيي الخاصية للعنرص ‪ ،‬أو تم تعيينها بطريقة خاطئة وأصبحت ر‬

‫غث مؤثرة‬ ‫إذا لم يتم ر‬
‫عىل العنرص‪ ،‬فإن العنرص يرث قيمتها من العنرص األب‪ ،‬سواء كانت ‪ true‬أو ‪. false‬‬

‫‪hidden‬‬
‫ً‬
‫خاصية تقوم بإخفاء محتوى العنرص الذي يتم تعيينها له‪ ،‬ألنه قد يكون حقال للتعديل يف‬
‫وه‬‫قاعدة البيانات‪ ،‬أو رمز مرور أو معلومة مهمة للصفحة‪ ،‬ال يجب أن يشاهدها المستخدم‪ ،‬ي‬
‫يعن أن قيمتها‬
‫خاصية ‪ ، boolean attribute‬أي ال يسند إليها أي قيمة‪ ،‬ومجرد تعيينها ي‬
‫يعن أن قيمتها ‪. false‬‬
‫‪ ، true‬وعدم تعيينها ي‬
‫>‪<div>This element will be shown in the browser</div‬‬
‫>‪<div hidden>This element won't be shown in the browser</div‬‬
‫الحظ أن العنرص األول ظهر يف‬
‫المتصفح‪ ،‬بينما لم يظهر العنرص‬
‫لتعيي الخاصية‬
‫ر‬ ‫الثاب نتيجة‬
‫ي‬
‫‪ hidden‬له‪.‬‬
‫‪Global Attributes‬‬ ‫‪227‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫*‪data-‬‬
‫غث معرفة يف ‪ ، html‬حيث يقوم المطور بتعريفها‬ ‫خاصية تقوم بإنشاء خاصية جديدة ر‬
‫الن يرغبها‪ ،‬ثم يقوم‬
‫واختيار اسم لها عىل أن يبدأ بالمقطع ‪ ، data-‬ويقوم بمنحها القيمة ي‬
‫باستخدامها يف التنسيق‪ ،‬أو األكواد الثمجية مثل أي خاصية معرفة يف ‪. html‬‬
‫>‪<head><style‬‬
‫{]‪div[data-name‬‬
‫;‪background: lightgreen‬‬
‫;‪font-weight: bold‬‬
‫;‪padding: 5px‬‬
‫;‪width: max-content‬‬
‫;‪margin-bottom: 10px‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div data-name>A div with data attribute</div‬‬
‫>‪<div>A div without data attribute</div‬‬
‫>‪</body‬‬
‫الحظ أنه تم تنسيق العنرص <‪ >div‬الذي‬
‫تعيي الخاصية ‪ data-name‬له‪ ،‬وتم‬ ‫ر‬ ‫تم‬
‫لتميث هذا العنرص عن أي عنرص‬
‫ر‬ ‫استخدامها‬
‫<‪ >div‬آخر‪.‬‬
‫كبثة‪ ،‬وإذا احتوى حروفا‬‫االسم بعد المقطع ‪ data-‬ال يجب أن يحتوي أي حروف ر‬
‫صغثة‪ ،‬فال تندهش إن‬ ‫ر‬ ‫كبثة بطريق الخطأ‪ ،‬فإن المتصفح سوف يحولها لحروف‬ ‫ر‬
‫كبثة‪ ،‬ووجدت أن الكود يعمل بشكل جيد‪ ،‬ويمكن لالسم أن يبدأ بحرف‬ ‫استخدمت حروفا ر‬
‫صغثة أو أرقام‪ ،‬وال يمكن أن يبدأ بمسافة فارغة‬
‫ر‬ ‫صغث أو رقم‪ ،‬ويمكن أن يتخلله أي حروف‬‫ر‬
‫أو رمز ما عدا "‪ "-‬و"_" ‪ ،‬وال يتخلله أي مسافات فارغة وال أي رموز ما عدا "‪ "-‬و "_"‪.‬‬

‫‪Global Attributes‬‬ ‫‪228‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪dir‬‬
‫معي‪ ،‬ويسند لها عدة قيم‪:‬‬
‫خاصية تحدد اتجاه النص‪ ،‬أو اتجاه محتوى عنرص ر‬
‫اليمي إل اليسار‪.‬‬
‫تعن أن اتجاه المحتوى داخل العنرص يبدأ من ر‬
‫‪ : rtl -‬قيمة ي‬
‫اليمي‪.‬‬
‫تعن أن اتجاه المحتوى داخل العنرص يبدأ من اليسار إل ر‬
‫‪ : ltr -‬قيمة ي‬
‫تعن أن المتصفح يحدد اتجاه المحتوى‪ ،‬حيث يقوم بتحليل الحروف حن‬
‫‪ : auto -‬قيمة ي‬
‫معي‪ ،‬فيكون هذا هو اتجاه النص أو المحتوى‪.‬‬
‫يجد حرفا يف النص له اتجاه ر‬
‫>‪<div style="width:400px" dir="rtl">Right To Left Direction</div‬‬
‫>‪<div style="width:400px" dir="ltr">Left To Right Direction</div‬‬
‫>‪</div‬هذا النص باللغة العربية>"‪<div style="width:400px" dir="auto‬‬
‫>‪<div style="width:400px" dir="auto">This is English Text</div‬‬

‫يمي إل اليسار ألن قيمة الخاصية ‪. rtl‬‬

‫الحظ أن اتجاه محتوى العنرص األول من ال ر‬
‫اليمي ألن قيمة الخاصية ‪. ltr‬‬
‫الثاب من اليسار إل ر‬
‫الحظ أن اتجاه محتوى العنرص ي‬
‫اليمي إل اليسار‪ ،‬بالرغم من أن قيمة الخاصية‬‫ر‬ ‫الحظ أن اتجاه محتوى العنرص الثالث من‬
‫اليمي إل اليسار (اللغة‬
‫ر‬ ‫ه ‪ ، auto‬حيث أدرك المتصفح أن اتجاه حروف النص من‬ ‫‪ dir‬ي‬
‫العربية)‪.‬‬
‫ه‬‫اليمي‪ ،‬بالرغم من أن قيمة الخاصية ي‬‫ر‬ ‫وكذلك اتجاه محتوى العنرص الرابع من اليسار إل‬
‫اليمي‪.‬‬
‫‪ ، auto‬حيث أدرك المتصفح أن اتجاه حروف النص من اليسار إل ر‬
‫تعيي الخاصية ‪ charset‬للعنرص >‪ ، < meta‬واسند لها القيمة ‪ utf-8‬حن‬‫تأكد من ر‬
‫تظهر حروف اللغة العربية بالشكل الصحيح يف متصفحك‪.‬‬

‫‪Global Attributes‬‬ ‫‪229‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪draggable‬‬
‫معي‪ ،‬ويسند لها عدة قيم‪:‬‬
‫خاصية تسمح بسحب وإفالت عنرص ر‬
‫تعن إمكانية سحب وإفالت العنرص‪.‬‬‫‪ : true -‬قيمة ي‬
‫تعن عدم إمكانية سحب وإفالت العنرص‪.‬‬ ‫ي‬ ‫‪ : fasle -‬قيمة‬
‫ً‬
‫تعن أن المتصفح يتبع القيمة االفثاضية للعنرص‪ ،‬فمثال العنرص <‪>img‬‬
‫‪ : auto -‬قيمة ي‬
‫غث قابلة للسحب‬
‫قابل للسحب واإلفالت تلقائيا‪ ،‬بينما العنرص <‪ >p‬أو العنرص <‪ >div‬عناص ر‬
‫واإلفالت افثاضيا‪.‬‬
‫>‪<div draggable="true">Drag Me</div><br‬‬
‫>"‪<img src="button.png" width="50" height="50‬‬
‫ً‬
‫الحظ أن العنرص <‪ >div‬أصبح قابال للسحب‬
‫واإلفالت بعد إسناد القيمة ‪ true‬للخاصية ‪. draggable‬‬

‫الحظ أن العنرص <‪ >img‬قابل للسحب واإلفالت‬

‫تعيي الخاصية ‪ ، darggable‬حيث إنه قابل‬ ‫ر‬ ‫بدون‬
‫للسحب واإلفالت افثاضيا‪.‬‬

‫رغم أن الخاصية ‪ draggable‬يمكن أن تعمل بشكل صحيح بدون إضافة القيمة ‪، true‬‬
‫إال أن استخدام القيمة ‪ true‬يعتث صوريا‪ ،‬ألن استخدام اسم الخاصية دون إسناد القيمة‬
‫تعيي الخاصية سيجعل قيمتها‬ ‫يوج بأن عدم ر‬
‫ي‬ ‫‪ true‬وإن كان يعمل بشكل صحيح‪ ،‬إال أنه‬
‫غث صحيح يف بعض العناص‪ ،‬ألنه كما ذكرنا من قبل‪ ،‬يوجد عناص قابلة‬ ‫‪ ، false‬وهذا ر‬
‫للسحب واإلفالت افثاضيا‪ ،‬وال تحتاج لتعي ري هذه الخاصية‪ ،‬وعليه فإن اإليحاء بأن عدم‬
‫ئ‬
‫خاط‪.‬‬ ‫تعيينها سيجعل قيمتها ‪ false‬لكل العناص‪ ،‬هو إيحاء‬

‫‪Global Attributes‬‬ ‫‪230‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪id‬‬
‫خاصية تمنح العنرص معرفا فريدا ‪ ،‬يجب أال يتكرر مع أي عنرص آخر يف نفس الصفحة‪،‬‬
‫ويستخدم يف تنسيق العنرص‪ ،‬أو يف األكواد الثمجية‪ ،‬أو يف التنقل ربي أجزاء الصفحة‬
‫‪ ، fragments‬والخاصية ‪ id‬ال تقبل إال قيمة واحدة فقط‪ ،‬وف حالة إسناد ر‬
‫أكث من قيمة بينها‬ ‫ي‬
‫غث صحيحة‪.‬‬ ‫مسافة فارغة (مثل الخاصية ‪ )class‬ستعتث القيمة ر‬
‫وتكون قيمة الخاصية نصا‪ ،‬وال تبدأ برقم أو رمز أو مسافة فارغة‪ ،‬ورغم أنه يمكن أن تبدأ‬
‫بحرف أو ك_ك أو ك‪-‬ك ‪ ،‬إال أنه يفضل أن تبدأ دائما بحرف‪ ،‬وقد يتخللها أي عدد من األرقام أو‬
‫ك_ك أو ك ‪-‬ك وال يتخللها أي رموز أو أي مسافات فارغة‪.‬‬
‫وعليه فإن هذه القيم صحيحة‪. pid , p2id , _pid , -pid , p_id , p-id :‬‬
‫غث صحيحة‪. .pid , @pid , p$id , p id , 3p.id :‬‬ ‫وهذه القيم ر‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪#a1‬‬
‫; ‪background: orange‬‬
‫;‪width: max-content‬‬
‫;‪font-weight: bold‬‬
‫;‪padding: 5px‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<p id="a1">This paraghrap is styled by using id</p‬‬
‫>‪</body‬‬
‫الحظ أن العنرص <‪ >p‬قد تم‬
‫تنسيقه بالـ ‪ ، css‬حيث تم ربط‬
‫الن تم تعيينها للعنرص‬
‫التنسيق داخل العنرص <‪ >style‬بالعنرص <‪ >p‬باستخدام الخاصية ‪ id‬ي‬
‫<‪. >p‬‬

‫‪Global Attributes‬‬ ‫‪231‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪lang‬‬
‫الغث قابل للتعديل‪،‬‬ ‫خاصية يسند لها قيمة عبارة عن اللغة المستخدمة يف محتوى العنرص‪ ،‬ر‬
‫غث معرفة‪ ،‬لذلك‬ ‫أو يف قيمة العنرص القابلة للتعديل‪ ،‬والقيمة االفثاضية لهذه الخاصية تكون ر‬
‫تعي هذه الخاصية‪ ،‬وتسند لها قيمة تعث عن لغة الصفحة‪ ،‬وتكون قيمة‬ ‫يجب عليك دائما أن ر‬
‫حرفي يعثان عن هذه اللغة مثل‪. en , fr , ar :‬‬‫ر‬ ‫الخاصية يف الغالب‪ ،‬عبارة عن‬
‫تأب منها هذه‬
‫الن ي‬ ‫تىل هذه الحروف بعض الرموز ‪ ،‬أو الالحقات لتدل عىل المنطقة ي‬ ‫وقد ي‬
‫اإلنجلثية يف‬
‫ر‬ ‫وتعن‬
‫ي‬ ‫كبثين مثل‪، en-GB :‬‬ ‫حرفي ر‬‫ر‬ ‫اللغة‪ ،‬وقد تتكون هذه الالحقات من‬
‫وتعن األسبانية يف أسبانيا‪ ،‬وقد تتكون هذه الالحقات من ثالثة أرقام تدل‬ ‫ي‬ ‫بريطانيا‪ ،‬و ‪es-ES‬‬
‫الوسط‪.‬‬
‫ي‬ ‫وتعن األسبانية يف أمريكا‬
‫ي‬ ‫عىل هذه المنطقة‪ ،‬مثل ‪es-013‬‬
‫>‪</p‬هذا العنرص يستخدم اللغة العربية>"‪<p lang="ar‬‬
‫>‪<p lang="en">This paragraph uses English Language</p‬‬
‫>‪<p lang="fr">Ce paragraphe est défini en français.</p‬‬

‫‪Global Attributes‬‬ ‫‪232‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪style‬‬
‫خاصية تقوم بتنسيق العنرص بتنسيقات ‪ ، css‬داخل وسم االفتتاح للعنرص ‪opening tag‬‬
‫ً‬
‫وهو ما يعرف بالـ ‪ ، inline style‬وذلك بدال من استخدام العنرص <‪ >style‬داخل العنرص‬
‫<‪ ، >head‬أو استخدام ملف ‪ css‬يضم كل التنسيقات وربطه بملف ‪ html‬عن طريق العنرص‬
‫<‪ >link‬داخل العنرص <‪. >head‬‬
‫النوعي اآلخرين ‪internal ,‬‬
‫ر‬ ‫يعتث تنسيق العنرص باستخدام الخاصية ‪ style‬أقوى من‬
‫‪ ، external‬حيث إنه أشع لوجوده يف وسم بداية العنرص‪ ،‬باإلضافة إل أنه شديد التخصص‬
‫حيث يتم تعيينه للعنرص المراد تنسيقه ر‬
‫مباشة‪.‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪width: 215px‬‬
‫;‪background: darkred‬‬
‫;‪color: pink‬‬
‫;‪padding: 5px‬‬
‫;‪font-weight: normal‬‬
‫}‬
‫>‪</style‬‬
‫>‪<body‬‬
‫;‪<div style="width: 215px; background: blue; color: white‬‬
‫>";‪padding: 5px;font-weight: bold‬‬
‫‪This div is styled by inline style‬‬
‫>‪</div‬‬
‫>‪</body‬‬
‫الحظ أن العنرص تم تنسيقه‬
‫بتنسيقات الخاصية ‪ style‬يف وسم‬
‫االفتتاح‪ ،‬وتم تجاهل تنسيقات العنرص<‪ >style‬الموجود داخل العنرص <‪. >head‬‬

‫‪Global Attributes‬‬ ‫‪233‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪title‬‬
‫خاصية تقدم معلومات إضافية عن العنرص‪ ،‬تكون عىل هيئة تلميح ‪ ، tooltip‬يظهر عند‬
‫المرور بالفأرة فوق العنرص‪ ،‬مثل العنرص <‪ ، >abbr‬والعنرص <‪ ، >dfn‬كما تستخدم قيمة هذه‬
‫اَ للصفحة‪ ،‬انظر ص ‪. 215‬‬ ‫الخاصية مع العنرص <‪ ، >meta‬لتحديد التنسيق االفث ي‬
‫سثث قيمة الخاصية من العنرص األب‪،‬‬ ‫تعيي الخاصية ‪ title‬للعنرص‪ ،‬فإنه ر‬‫وإذا لم يتم ر‬
‫كالتال‪:‬‬
‫ي‬ ‫تعي الخاصية له‬
‫الذي تم ر‬
‫‪<abbr title="North Atalntic Treaty Organization"> NATO‬‬
‫>‪<div>Political Organization</div‬‬
‫>‪</abbr‬‬
‫الحظ أن مرور الفأرة عىل العنرص االبن أدى‬
‫لظهور تلميح الخاصية ‪ ، title‬بالرغم من عدم‬
‫تعيي الخاصية له‪ ،‬وإنما تم تعيينها للعنرص األب‬‫ر‬
‫وورثها العنرص االبن‪.‬‬
‫ولكن إذا لم نرد للعنرص االبن أن يرث العنرص األب‪ ،‬وال يظهر التلميح عند مرور الفأرة‬
‫بتعيي الخاصية ‪ title‬له‪ ،‬ونسند لها قيمة عبارة عن سلسلة نصية فارغة‪:‬‬
‫ر‬ ‫فوقه‪ ،‬فنقوم‬
‫‪<abbr title="North Atalntic Treaty Organization">NATO‬‬
‫>‪<div title="">Political Organization</div‬‬
‫>‪</abbr‬‬

‫تعيي الخاصية ‪ title‬له‪،‬‬

‫وعموما‪ ،‬فإن أي عنرص يتم ر‬
‫سوف يظهر تلميح ‪ ، tooltip‬يعرض قيمة الخاصية‪ ،‬عند‬
‫مرور الفأرة فوقه‪.‬‬

‫>"‪<img src="mount.jpg" width="200" title="Amazing Nature‬‬

‫‪Global Attributes‬‬ ‫‪234‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪tabindex‬‬
‫كث لوحة المفاتيح ‪ focus‬ربي العناص‪ ،‬حيث تكون قيمتها عبارة‬ ‫خاصية تختص بنقل تر ر‬
‫كث ربي عناص الصفحة‪ ،‬ويكون‬ ‫معي‪ ،‬يمثل ترتيب هذا العنرص يف دورة انتقال الث ر‬ ‫عن رقم ر‬
‫االنتفال بالثتيب ربي العناص بواسطة الضغط عىل زر ‪. tab‬‬
‫وتسند لهذه الخاصية عدة أنواع من القيم‪:‬‬
‫كث إل العنرص ربي عناص الصفحة‪.‬‬ ‫معي النتقال الث ر‬
‫تعن ترتيب ر‬ ‫‪ -‬قيمة موجبة ‪ :‬ي‬
‫كث إليه‪ ،‬وأنه خارج ترتيب‬
‫تعن أن العنرص ليس له ترتيب النتقال الث ر‬ ‫‪ -‬قيمة سالبة ‪ :‬ي‬
‫كث أبدا‪.‬‬‫العناص ولن ينتقل إليه الث ر‬
‫كث إل هذا العنرص‪ ،‬يكون بعد كل العناص ذات‬ ‫تعن أن ترتيب انتقال الث ر‬ ‫‪ -‬القيمة ‪ : 0‬ي‬
‫الثتيب الموجب‪.‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫{‪div‬‬
‫;‪display: inline-block‬‬
‫;‪width: max-content‬‬
‫;‪background: darkorange‬‬
‫;‪color: navy‬‬
‫;‪padding: 5px‬‬
‫;‪font-weight: normal‬‬
‫}‬
‫>‪</style‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪<div tabindex="3">Tab order 3</div‬‬
‫>‪<div tabindex="-1">Tab order -1</div‬‬
‫>‪<div tabindex="2">Tab order 2</div‬‬
‫>‪<div tabindex="0">Tab order 0</div‬‬
‫>‪<div tabindex="1">Tab order 1</div‬‬
‫>‪</body‬‬

‫‪Global Attributes‬‬ ‫‪235‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫قم بالضغط المتكرر عىل الزر ‪ Tab‬والحظ أن‪:‬‬

‫كث ‪ focus‬مطلقا‪.‬‬ ‫العنرص ‪ Tab order -1‬لم ينتقل إليه الث ر‬
‫كث بعد العنرص ‪ Tab order 3‬وهو آخر ترتيب‬ ‫العنرص ‪ Tab order 0‬انتقل إليه الث ر‬
‫موجب ربي العناص‪.‬‬
‫كث من العنرص األب إل العنرص االبن‪ ،‬طالما لم نقم بتحديد ترتيب له يف دورة‬ ‫ال ينتقل الث ر‬
‫كث ال يتم وراثته‪ ،‬والعنرص األ ب والعنرص االبن يعامالن كعنرصين‬ ‫‪ ،tabindex‬بمعن أن الث ر‬
‫منفصلي‪.‬‬
‫ر‬
‫ً‬
‫عمىل‪ ،‬بدال من أن تلجأ إل تعديل قيمة‬
‫المنطق وال ي‬
‫ي‬ ‫يفضل دائما أن تضع العناص يف ترتيبها‬
‫الخاصة ‪ ، tabindex‬ألن برامج قراءة الشاشة قد تواجه صعوبة يف قراءة ترتيب العناص‬
‫المعدل‪.‬‬
‫كث كقيمة للخاصية‬
‫اعلم أن أعىل قيمة موجبة يمكن أن يصل إليها ترتيب انتقال الث ر‬
‫ه ‪. 32767‬‬ ‫‪ tabindex‬ي‬

‫إذا تساوى عنرصان يف قيمة الخاصية ‪ ، tabindex‬فإن العنرص الذي سينتقل إليه‬
‫كث سيكون حسب اتجاه العنرص األب‪ ،‬الذي يحتوي هذه العناص‪ ،‬فإذا كان اتجاهه من‬ ‫الث ر‬
‫اليمي‪ ،‬وإذا‬
‫ر‬ ‫كث سينتقل ربي العناص الداخلية من اليسار إل‬ ‫اليمي ‪ ، ltr‬فإن الث ر‬
‫ر‬ ‫اليسار إل‬
‫كث سينتقل ربي العناص الداخلية‬‫اليمي إل اليسار ‪ ، rtl‬فإن الث ر‬
‫ر‬ ‫كان اتجاه العنرص األب من‬
‫اليمي إل اليسار‪.‬‬
‫من ر‬

‫‪Global Attributes‬‬ ‫‪236‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪inputmode‬‬
‫معي‪ ،‬وذلك عن‬ ‫الن سيقوم المستخدم بإدخالها يف حقل ر‬ ‫خاصية تحدد نوع البيانات ي‬
‫تأثث‬
‫الن ستظهر للمستخدم‪ ،‬وبالطبع ليس لهذه الخاصية ر‬ ‫طريق تحديد نوع لوحة المفاتيح ي‬
‫عند عرض الصفحة عىل أجهزة الحاسب‪ ،‬ألن لوحة المفاتيح المادية تضم كل أنواع‬
‫تأثث هذه الخاصية يظهر عند عرض صفحة الويب عىل الهاتف الجوال أو‬ ‫المدخالت‪ ،‬وإنما ر‬
‫ُ‬
‫الن سيتم‬‫ي‬ ‫و‬ ‫‪،‬‬‫المطلوبة‬ ‫المدخالت‬ ‫نوع‬ ‫تناسب‬ ‫‪،‬‬‫اضية‬‫افث‬ ‫مفاتيح‬ ‫لوحة‬ ‫عرض‬ ‫ت‬ ‫التابلت‪ ،‬حيث‬
‫تحديدها عن طريق هذه الخاصية‪.‬‬
‫ويمكن إسناد عدة قيم لهذه الخاصية‪:‬‬
‫تعن عدم وجود لوحة مفاتيح افثاضية‪.‬‬ ‫‪ : none -‬قيمة ي‬
‫تعن عرض لوحة المفاتيح القياسية للغة المستخدمة‪.‬‬ ‫‪ : text -‬قيمة ي‬
‫تعن عرض لوحة مفاتيح إلدخال كسور األرقام‪ ،‬أي تحتوي عىل فاصل‬ ‫‪ : decimal -‬قيمة ي‬
‫عشي (سواء كان نقطة أو فاصلة)‪.‬‬ ‫ر‬
‫تعن عرض لوحة مفاتيح إلدخال األرقام من ‪ 0‬إل ‪. 9‬‬ ‫‪ : numeric -‬قيمة ي‬
‫تعن عرض لوحة مفاتيح إلدخال أرقام الهاتف‪ ،‬تحتوي األرقام من ‪ 0‬إل ‪9‬‬ ‫‪ : tel -‬قيمة ي‬
‫باإلضافة إل ك‪#‬ك و ك*ك ‪.‬‬
‫تعن عرض لوحة مفاتيح محسنة‪ ،‬قد تحتوي عىل زر رجوع أو زر اعتماد‬ ‫‪ : search -‬قيمة ي‬
‫‪. submit‬‬
‫وب أي تحتوي ك@ك ‪.‬‬ ‫تعن عرض لوحة مفاتيح إلدخال الثيد اإللكث ي‬ ‫‪ : email -‬قيمة ي‬
‫وب تحتوي ك‪ /‬ك ‪.‬‬‫تعن عرض لوحة مفاتيح إلدخال عنوان موقع إلكث ي‬ ‫‪ : url -‬قيمة ي‬
‫‪<input‬‬ ‫>"‪type="text" name="user" inputmode="text‬‬
‫‪<input‬‬ ‫>"‪type="number" name="age" inputmode="numeric‬‬
‫‪<input‬‬ ‫>"‪type="email" name="mail" inputmode="email‬‬
‫‪<input‬‬ ‫>"‪type="tel" name="phone" inputmode="tel‬‬
‫‪<input‬‬ ‫>"‪type="search" name="find" inputmode="search‬‬

‫‪Global Attributes‬‬ ‫‪237‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫الخصائص العامة‬

‫‪Microdata‬‬
‫مجموعة خصائص يمكن إضافتها للعنرص‪ ،‬للمساعدة يف برامج قراءة الشاشة‪ ،‬أو المساعدة‬
‫معي‪.‬‬
‫معي‪ ،‬أو استخدامه يف تنسيق ر‬ ‫برمج ر‬
‫ي‬ ‫يف استخدام هذا العنرص يف نص‬
‫وهذه الخصائص تتكون من اسم لهذه الخاصية وقيمة لها‪.‬‬
‫‪itemscope‬‬
‫خاصية تحدد نطاق عمل البيانات الوصفية ‪ metadata‬الخاصة بهذه الخاصية‪ ،‬حيث‬
‫معي‪.‬‬
‫تفيد هذه الخاصية‪ ،‬ببدء إضافة خاصية جديدة لعنرص ر‬
‫‪itemid‬‬
‫تعيي هذه الخاصية إال‬
‫الن يتم إضافتها‪ ،‬وال يتم ر‬
‫خاصية تحدد معرف فريد لهذه الخاصية ي‬
‫الخاصيتي ‪ itemscope‬و ‪ itemtype‬له‪ ،‬ويكون عبارة عن عنوان‬
‫ر‬ ‫تعيي‬
‫للعنرص الذي تم ر‬
‫وب صحيح ‪ ، url‬أو عنوان ‪ urn‬دون تحديد موقعه أو صحته‪.‬‬
‫إلكث ي‬
‫‪itemtype‬‬
‫الن يتم استخدامها يف تعريف‬
‫خاصية توضح العنوان ‪ url‬الذي يحتوي عىل المفردات‪ ،‬ي‬
‫الخاصية الجديدة‪ ،‬ومن أمثلة هذا العنوان ‪. schema.org‬‬
‫‪itemprop‬‬
‫خاصية تقوم بإضافة خاصية جديدة للعنرص‪ ،‬وكذلك إضافة قيمة لهذه الخاصية‪ ،‬ويتم‬
‫التال‪:‬‬
‫إضافة القيمة بعدة طرق كما يف الكود ي‬
‫وسم البداية والنهاية (سطر ‪. )3‬‬
‫ي‬ ‫‪ -‬قد تكون ربي‬
‫‪ -‬قد تكون قيمة للخاصية ‪ src‬إذا كان اسم الخاصية ‪( image‬سطر ‪.)4‬‬
‫‪ -‬قد يتم تعريف عنرص <‪ >data‬ووضع الخاصية وقيمتها داخله (سطر ‪.)5‬‬
‫أكث من قيمة (سطر ‪.)8‬‬‫‪ -‬قد يكون للخاصية ر‬
‫أكث من اسم (سطر ‪ 7‬و ‪.)8‬‬ ‫‪ -‬قد يكون للخاصية ر‬
‫‪ -‬قد تكون الخاصية متداخلة ‪ nested‬أي يتم تعيينها لعنرص ابن له ‪ itemscope‬داخل‬
‫عنرص أب له ‪ itemscope‬آخر (سطر ‪. )6‬‬

‫‪Global Attributes‬‬ ‫‪238‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫الخصائص العامة‬

<div itemscope itemtype="schema.org/Person"

itemid="urn:name:55:12:5923">
<p itemprop="name"> Wail Monir </p>
<img itemprop="image" src="wailmonir.jpg ">
<data itemprop="age" value="48">The author age</data>
<div itemscope>
<span itemprop="address">Egypt, Cairo</span>
<span itemprop="address new_address">Egypt, Alexandria</span>
</div>
</div>

itemref
‫تعيي الخاصية‬
‫ له ولم يتم ر‬itemscope ‫تعيي الخاصية‬ ‫ تم ر‬،‫خاصية يتم تعيينها لعنرص‬
،‫ لها‬itemprop ‫تعيي الخاصية‬
‫ تم ر‬،‫ وذلك لربطه بعناص أخرى خارجية‬،‫ له‬itemtype
‫ للعناص الخارجية المرتبطة بهذا‬id ‫ويسند لهذه الخاصية قيمة عبارة عن المعرف الفريد‬
.‫العنرص‬
<div itemscope itemref="dv1 im"></div>
<p itemprop="name" id="dv1"> Wail Monir </p>
<img itemprop="image" id="im" src="wailmonir.jpg ">

‫ ولكنها تستخدم كدليل‬، microdata ‫هذه الخاصية ال تدخل ضمن خصائص‬

itemscope ‫للمطورين يف التعرف عىل العناص الخارجية المرتبطة بالعنرص الذي تم تحديد‬
.‫له‬

Global Attributes 239 [email protected]

‫خصائص الحدث‬
Event Attributes
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص الحدث ‪Event Attributes‬‬

‫والن تكون عبارة‬ ‫ر‬
‫ه خصائص تعمل كشط‪ ،‬عند تحققه‪ ،‬يتم تنفيذ قيمة هذه الخاصية‪ ،‬ي‬ ‫ي‬
‫وف الغالب يكون هذا الكود عبارة عن كود‬
‫برمج‪ ،‬ينفذ وظيفة معينة‪ ،‬ي‬
‫ي‬ ‫عن ‪ ، script‬أي كود‬
‫الشط الذي‬ ‫‪ ، javascript‬ويمكن أن تكون هذه القيمة تنسيق ‪ ، css‬يمكن تطبيقه عند تحقق ر‬
‫تتطلبه هذه الخاصية‪.‬‬
‫كبث من الخصائص تحت كل نوع‪،‬‬ ‫ويوجد العديد من أنواع هذه الخصائص‪ ،‬ويوجد عدد ر‬
‫وحيث إن المجال ال يتسع لل رشح المفصل‪ ،‬والتطبيق عىل كل هذه الخصائص‪ ،‬إذ أنها ر‬
‫كثثة‬
‫ً‬
‫العدد كما ذكرنا‪ ،‬وربما تحتاج مرجعا منفصال ليغطيها بشكل كامل‪ ،‬كما أنها تحتاج معرفة جيدة‬
‫وشحها رشحا مبسطا لنتعرف عىل‬ ‫بلغة الجافاسكريبت‪ ،‬إال أننا سنقوم بعرض كل الخصائص‪ ،‬ر‬
‫كثث من هذه‬ ‫وظيفتها‪ ،‬وطبيعة عملها‪ ،‬وسنقوم بتطبيق بعض األكواد البسيطة عىل ر‬
‫وتأثثها عىل الصفحة أو عناصها ‪.‬‬
‫الخصائص‪ ،‬لتوضيح سلوكها ر‬
‫قد يصعب عىل أي مبتدئ أن يستوعب تفاصيل كود ‪ Javascript‬الذي يتم تنفيذه‪،‬‬
‫أنن قد استخدمت أكوادا بسيطة جدا وشبه مكررة‪ ،‬ولكن االستيعاب الجيد‬ ‫بالرغم من ي‬
‫الحال‪ ،‬المطلوب فقط أن تقرأ الكود جيدا‪،‬‬
‫ي‬ ‫مطلوبي يف الوقت‬
‫ر‬ ‫غث‬‫والفهم األكيد لهذا الكود‪ ،‬ر‬
‫غيث‬
‫وتفهم ما تسطيع منه قدر إمكانك‪ ،‬ثم تقوم بكتابته يف محرر النصوص‪ ،‬وشاهد الت ر‬
‫الشط المتعلق بوقوع الحدث‪ ،‬ليكون ذلك تمهيدا طيبا لك‪ ،‬عندما تبدأ‬‫المتوقع عند تحقق ر‬
‫يف دراسة ‪ Javascript‬قريبا‪.‬‬

‫‪Event Attributes‬‬ ‫‪243‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص حدث الصفحة ‪Window Event Attributes‬‬

‫وه‪:‬‬
‫خصائص متعلقة بالصفحة ككل‪ ،‬ويتم تعيينها يف الغالب للعنرص <‪ >body‬ي‬
‫مج بعد الموافقة عىل طباعة الصفحة‪.‬‬
‫‪ : onafterprint -‬يتم تنفيذ الكود الث ي‬
‫>")'‪<body onafterprint="alert('Ready for more printing …..‬‬
‫>‪</body‬‬
‫الحظ أنك بعد أن تضغط عىل ‪ Ctl+p‬من لوحة‬
‫المفاتيح‪ ،‬أو تضغط عىل األمر …‪ ، Print‬من القائمة‬
‫الجانبية الخاصة للمتصفح‪ ،‬ستفتح لك صفحة إعدادات‬
‫الطباعة‪ ،‬وبعد أن توافق عىل اإلعدادات ثم تضغط ‪Print‬‬
‫لتنفيذ أمر الطباعة‪:‬‬

‫تظهر لك رسالة‪ ،‬تعرض النص الموجود يف الكود‪:‬‬

‫مج قبل طباعة الصفحة‪.‬‬

‫‪ : onbeforeprint -‬يتم تنفيذ الكود الث ي‬
‫>")'‪<body onbeforeprint="alert('You are going to print this page‬‬
‫>‪</body‬‬

‫‪Event Attributes‬‬ ‫‪244‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫الحظ أنك بعد أن تضغط عىل ‪ Ctl+p‬من لوحة المفاتيح‪ ،‬أو األمر …‪ Print‬من القائمة‬
‫لتجهث الصفحة‬
‫ر‬ ‫الجانبية الخاصة للمتصفح‪ ،‬وقبل أن تفتح لك صفحة إعدادات الطباعة‪،‬‬
‫مج‪.‬‬‫باإلعدادات المطلوبة للطباعة‪ ،‬تظهر لك رسالة‪ ،‬تعرض النص الموجود يف الكود الث ي‬
‫مج قبل االنتقال إل صفحة أخرى‪ ،‬ورغم أنك‬ ‫‪ : onbeforeunload -‬يتم تنفيذ الكود الث ي‬
‫مج الذي سيتم تنفيذه‪ ،‬إال أن هذا النص لن يظهر فعليا‪ ،‬ولكن‬
‫يجب أن تعد نصا يف الكود الث ي‬
‫ً‬
‫تظهر بدال منه رسالة افثاضية‪ ،‬تخثك بأنك تغادر الصفحة الحالية‪.‬‬
‫>")(‪<body onbeforeunload="return myfunc‬‬
‫‪<a href="https://cdn.pixabay.com/photo/2018/05/17/09/18/away-‬‬
‫‪3408119_960_720.jpg" target="_top">Go to My Photo‬‬
‫>‪</a‬‬
‫>‪<script‬‬
‫{)(‪function myfunc‬‬
‫)"‪return ("Good Bye‬‬
‫}‬
‫>‪</script‬‬
‫>‪</body‬‬

‫الحظ أنه بعد الضغط عىل الرابط‪ ،‬تظهر الرسالة قبل االنتقال إل الصفحة‬
‫الن كتبتها‪.‬‬
‫الجديدة‪ ،‬ويتم تجاهل الرسالة ي‬
‫تعيي هذه الخاصية‬
‫معي‪ ،‬ويتم ر‬‫مج عند حدوث خطأ ر‬ ‫‪ : onerror -‬يتم تنفيذ الكود الث ي‬
‫للعناص <‪ >img‬و <‪ >object‬و <‪ >link‬و <‪ >script‬والنوع ‪ image‬من العنرص <‪. >input‬‬
‫‪<link rel="stylesheet" href="file.css" onerror="alert('No such file, check it‬‬
‫>")'‪again....‬‬

‫‪Event Attributes‬‬ ‫‪245‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫وبالتال ظهرت‬
‫ي‬ ‫مج‪،‬‬‫الحظ أن عدم وجود الملف الموجود يف الرابط‪ ،‬أدي لتفعيل الكود الث ي‬
‫الرسالة الخاصة بعدم وجود الملف المطلوب داخل العنرص <‪. >link‬‬
‫تشعن‬
‫ي‬ ‫تغيث يف عنوان رابط‬‫مج عند حدوث ر‬ ‫‪ : onhashchange -‬يتم تنفيذ الكود الث ي‬
‫التغيث يف جزء الصفحة ‪ ، anchor part‬الذي يتم االنتقال إليه والذي‬
‫ر‬ ‫داخل الصفحة‪ ،‬ويكون‬
‫يبدأ بالرمز ك‪#‬ك‪.‬‬
‫>")'!!! ‪<body onhashchange="alert('Anchor Has changed‬‬
‫| >‪<a href="#dv1">One</a‬‬
‫>‪<a href="#dv2">Two</a><br‬‬
‫>‪<div id="dv1">- First Part</div><br><br><br‬‬
‫>‪<div id="dv2">- Second Part</div‬‬
‫>‪</body‬‬

‫ابط ‪ ، anchor‬عند الضغط عىل أحدهما بصورة متتابعة‪ ،‬ال تظهر الرسالة‪،‬‬ ‫الحظ وجود ر ي‬
‫تغث ‪. anchor part‬‬‫ولكن عند تبادل الضغط بينهما‪ ،‬تظهر الرسالة نتيجة ر‬
‫مج بعد انتهاء تحميل الصفحة وعناصها‪ ،‬وهذا الحدث‬ ‫‪ : onload -‬يتم تنفيذ الكود الث ي‬
‫مدعوم يف العناص <‪ >body‬و <‪ >iframe‬و <‪ >img‬و<‪ >style‬و <‪ >link‬و <‪ >script‬والنوع‬
‫‪ image‬من العنرص <‪. >input‬‬
‫‪Event Attributes‬‬ ‫‪246‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

‫ واالختالف أنه يتم تنفيذ الكود‬، onload ‫تأثث الخاصية‬‫ لها نفس ر‬: onpageshow -
ً
.‫ ثم العرض‬،‫أوال‬ ‫ ليتم التحميل‬، onload ‫ أي بعد تنفيذ‬،‫مج بعد انتهاء تحميل الصفحة‬
‫الث ي‬
<body onload="alert('Loading has done .')" onpageshow="alert('Now, it
is showtime >>>')">
<img src="https://cdn.pixabay.com/photo/2017/10/10/07/48/hills-
2836301_960_720.jpg" width="100" height="60">
<img src="https://cdn.pixabay.com/photo/2014/09/14/18/04/dandelion-
445228_960_720.jpg" width="100" height="60">
</body>

ً
.‫ ثانيا‬onpageshow ‫ ثم الحدث‬،‫ أوال‬onload ‫الحظ أنه تم تنفيذ الحدث‬
‫ وهذه‬،offline ‫مج عندما يكون عمل المتصفح‬
‫ يتم تنفيذ الكود الث ي‬: onoffline -
. Chrome ‫غث مدعوم رتي يف متصفح‬‫والن تليها ر‬
‫الخاصية ي‬
<body onoffline="alert('We are going to offline')">
</body>

Event Attributes 247 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫ولجعل متصفح ‪ Firefox‬يعمل ‪ ، offline‬قم‬

‫بالضغط عىل مفتاح ‪ ، alt‬ليظهر لك رشيط القوائم‬
‫العلوي‪ ،‬ومن القائمة ‪ file‬اخث ‪، Work Offline‬‬
‫مج‪.‬‬
‫والحظ ظهور الرسالة الموجودة يف الكود الث ي‬

‫مج عندما يعمل المتصفح ‪. online‬‬ ‫‪ : ononline -‬يتم تنفيذ الكود الث ي‬
‫قم بالضغط عىل ‪ Work Offline‬إللغاء العالمة أمامها‪،‬‬
‫للعودة مرة أخرى للعودة للعمل ‪ ، Online‬والحظ ظهور‬
‫مج‪.‬‬
‫الرسالة الموجودة يف الكود الث ي‬
‫>")'‪<body ononline="alert('We are back online‬‬
‫>‪</body‬‬

‫تغيث أبعاد الصفحة‪.‬‬

‫مج عند ر‬
‫‪ : onresize -‬يتم تنفيذ الكود الث ي‬
‫>‪<body onresize="alert('Changing Window Dimensions >>>>')"> </body‬‬

‫‪Event Attributes‬‬ ‫‪248‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫قم بسحب الصفحة من أحد أطرافها للداخل أو الخارج‪ ،‬ألعىل أو ألسفل والحظ ظهور‬
‫تغيث أبعاد الصفحة‪.‬‬
‫مج بمجرد ر‬ ‫الرسالة الموجودة بالكود الث ي‬
‫مج عند إغالق المتصفح‪ ،‬أو عند االنتقال إل صفحة‬
‫‪ : onunload -‬يتم تنفيذ الكود الث ي‬
‫غث الصفحة الحالية‪.‬‬
‫أخرى ر‬
‫>")'‪<body onunload="alert('We are leaving, Good Bye, Guys.‬‬
‫‪<a href="https://cdn.pixabay.com/photo/2017/12/23/22/12/orange-‬‬
‫>‪3036097_960_720.jpg">Leave this page to my photo</a‬‬
‫>‪</body‬‬
‫قد ال تعمل هذه الخاصية بالشكل المتوقع‪ ،‬نظرا الختالف إعدادات المتصفحات‪.‬‬
‫ه أحداث مدعومة يف العنرص‬‫الن تدعمها‪ ،‬ي‬‫الن لم أذكر العناص ي‬ ‫األحداث ي‬
‫>‪ <body‬فقط‪ ،‬أي يتم تعيينها يف وسم البداية للعنرص >‪. <body‬‬

‫‪Event Attributes‬‬ ‫‪249‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص حدث النموذج ‪Form Event Attributes‬‬

‫خصائص تنشط أحداثها بفعل التعامل مع عنرص النموذج <‪ ، >form‬أو التعامل مع عناصه‬
‫تعيي هذه الخصائص للعنرص <‪ >form‬وعناصه الداخلية‪.‬‬ ‫الداخلية‪ ،‬حيث يتم ر‬
‫مج أو التنسيق‬
‫‪ : onblur -‬يتم تنفيذ الكود الث ي‬
‫كث لعنرص‬‫كث (نقل الث ر‬
‫عند خروج العنرص من الث ر‬
‫آخر عن طريق مفتاح ‪ tab‬أو الضغط بالفأرة عىل‬
‫عنرص آخر)‪.‬‬
‫مج أو‬
‫‪ : onfocus -‬يتم تنفيذ الكود الث ي‬
‫كث لهذا العنرص (عن طريق‬ ‫التنسيق‪ ،‬عند انتقال الث ر‬
‫مفتاح ‪ tab‬أو الضغط بالفأرة عىل هذا العنرص)‪.‬‬
‫> "‪<form style="border:solid;width:200px;padding:10px‬‬
‫"‪<input type="text" placeholder="Enter Your email‬‬
‫"'‪onblur="style='background:yellow‬‬
‫>‪onfocus="style='background:lightgreen'"><br><br‬‬
‫"‪<input type="pasword" placeholder="Enter password‬‬
‫"'‪onblur="style='background:yellow‬‬
‫>‪onfocus="style='background:lightgreen'"><br><br‬‬
‫>"‪<input type="Submit‬‬
‫>‪</form‬‬
‫كث‪ ،‬وتلونها باللون األخرص‬
‫تغث لون خلفية العنرص للون األصفر ‪ ،‬عند فقدان الث ر‬‫الحظ ر‬
‫كث إليه مرة أخرى‪.‬‬
‫عند انتقال الث ر‬
‫الخاصيتان السابقتان تدعمان كل عناص ‪ html‬ما عدا >‪ <html‬و >‪ <bdo‬و>‪<br‬‬
‫و>‪ <param‬و>‪ <iframe‬و>‪ <head‬وكل عناص ‪ metadata‬ما عدا العنرص >‪. <link‬‬
‫‪ : oninput -‬يتم تنفيذ التنسيق أو الكود الث ي‬
‫مج عند بدء إدخال القيمة إل العنرص‪،‬‬
‫والخاصية مدعومة يف عنرص <‪ >textarea‬و األنواع ‪ text‬و‪ search‬و‪ password‬من‬
‫العنرص >‪. <input‬‬
‫مج بعد الخروج من العنرص‪ ،‬أو بعد انتقال‬
‫‪ : onchange -‬يتم تنفيذ التنسيق أو الكود الث ي‬

‫‪Event Attributes‬‬ ‫‪250‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

>select< ‫> والعنرص‬textarea< ‫ والخاصية مدعومة يف العنرص‬،‫كث لوحة المفاتيح خارجه‬‫تر ر‬

‫ من العنرص‬range‫ و‬file‫ و‬radio‫ و‬checkbox‫ و‬search‫ و‬password ‫ و‬text ‫واألنواع‬
. <input>
<form style="border:solid;width:200px;padding:10px" >
<input type="text" placeholder="Enter Your email" name="user" value=""
onchange="style='background:yellow'"><br><br>
<input type="text" placeholder="Enter Your email" name="user" value=""
oninput="style='background:lightblue'">
<input type="Submit">
</form>

before input oninput onchange

، oninput ‫ عند بدء إدخال البيانات بفعل الخاصية‬،‫تغث لون خلفية حقل اإلدخال‬
‫الحظ ر‬
‫تغث لونه مرة أخرى بفعل‬
‫ ر‬،‫كث خارجه‬ ‫ ونقل الث ر‬،‫وبعد إدخال البيانات والخروج من الحقل‬
. onchange ‫الخاصية‬
‫ يتم تنفيذ الكود أو التنسيق عند الضغط عىل العنرص بمفتاح الفأرة‬: oncontextmenu -
. html ‫ والخاصية مدعومة يف كل عناص‬،‫ وقبل ظهور القائمة‬،‫األيمن‬
<div oncontextmenu="alert('You just right clicked the element')">
Right click here, please <div>

.‫ أدى لتنفيذ الكود وظهور الرسالة‬،‫الحظ أن الضغط بمفتاح الفأرة األيمن عىل العنرص‬
Event Attributes 251 [email protected]
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

‫غث متوافقة مع نوع‬

‫ ر‬،‫مج إذا كانت القيم المدخلة‬
‫ يتم تنفيذ الكود الث ي‬: oninvalid -
. >input< ‫ والخاصية مدعومة يف العنرص‬،‫ بيانات العنرص‬type
<form style="border:solid;width:200px;padding:10px" >
<input type="email" placeholder="Enter Your email" name="user"
value=""
oninvalid="alert('Invalid entries, try again!!!')"><br><br>
<input type="password" placeholder="Enter password" name="pass"
value=""><br><br>
<input type="Submit">
</form>

‫ وقبل مسح قيم‬، reset ‫مج بعد الضغط عىل زر‬ ‫ يتم تنفيذ الكود الث ي‬: onreset -
. >form< ‫ والخاصية مدعومة يف العنرص‬، ‫الن تم إدخالها سابقا‬
‫العناص ي‬
<form style="border:solid;width:200px;padding:10px" onreset="alert('You
are erasing the values you entered!!')">
<input type="email" placeholder="Enter Your email" name="user"
value=""><br><br>
<input type="password" placeholder="Enter password" name="pass"
value="" ><br><br>
<input type="Submit" > <input type="Reset" >
</form>

Event Attributes 252 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

، search ‫مج بعد كتابة نص داخل العنرص من النوع‬

‫ يتم تنفيذ الكود الث ي‬: onsearch -
‫ ومدعومة يف النوع‬Edge ‫ و‬Firefox ‫غث مدعومة يف متصفح‬‫ والخاصية ر‬، enter ‫ثم الضغط‬
. >input< ‫ من العنرص‬search
<form>
<input type="search" placeholder="Find something or someone"
name="find"
onsearch="alert('Your making some search !!')"><br><br>
</form>

‫ والخاصية مدعومة‬،‫مج عند اختيار نص داخل العنرص‬

‫ يتم تنفيذ الكود الث ي‬: onselect -
. >input< ‫ من العنرص‬file ‫ و‬password‫ و‬text ‫> واألنواع‬textarea< ‫يف العنرص‬
<form>
<input type="text" placeholder="Enter your name "
onselect="alert('You have just selected some text')"><br><br>
<input type="Submit" >
</form>

Event Attributes 253 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

.‫ عند اختيار النص أو جزء منه‬،‫الحظ ظهور الرسالة‬

‫ والخاصية‬، submit ‫مج بعد الضغط عىل زر‬
‫ يتم تنفيذ الكود الث ي‬: onsubmit -
. >form< ‫مدعومة يف العنرص‬
<form style="border:solid;width:200px;padding:10px"
onsubmit="alert('You are submitting the values!!')">
<input type="email" placeholder="Enter Your email" name="user"
value=""><br><br>
<input type="password" placeholder="Enter password" name="pass"
value="" ><br><br>
<input type="Submit" >
</form>

. submit ‫الحظ ظهور الرسالة عند الضغط عىل زر‬

Event Attributes 254 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص حدث لوحة المفاتيح ‪Keyboard Event Attributes‬‬

‫خصائص تنشط أحداثها بفعل التعامل مع لوحة المفاتيح‪ ،‬عند إدخال قيم يف بعض‬
‫العناص‪.‬‬
‫مج عند الضغط عىل أي مفتاح‪.‬‬
‫‪ : onkeydown -‬يتم تنفيذ الكود الث ي‬
‫مج عند إدخال حرف بعد الضغط عىل المفتاح‪.‬‬‫‪ : onkeypress -‬يتم تنفيذ الكود الث ي‬
‫"‪<input type="text" placeholder="Enter your name‬‬
‫")'‪onkeypress="alert('The key is pressed.‬‬
‫>")'‪onkeydown="alert('The key is down.‬‬
‫خاصين حدث للعنرص <‪ ، >input‬ورغم أن الخاصية‬ ‫ي‬ ‫بتعيي‬
‫ر‬ ‫الحظ أننا قد قمنا‬
‫‪ onkeypress‬تسبق الخاصية ‪ ، onkeydown‬إال أن تنفيذ حدث الخاصية ‪onkeydown‬‬
‫ً‬
‫معي‪ ،‬ثم يتبعه تنفيذ حدث الخاصية‬‫يحدث أوال‪ ،‬ألنه يبدأ عند الضغط عىل مفتاح ر‬
‫‪ ، onkeypress‬والذي يبدأ عند إدخال الحرف‪ ،‬ولكن قبل ظهوره يف حقل اإلدخال‪:‬‬

‫اعلم أن الخاصية ‪ onkeydown‬تنشط عند الضغط عىل أي مفتاح يف لوحة المفاتيح‪،‬‬

‫بينما الخاصية ‪ onkeypress‬تنشط فقط‪ ،‬عند الضغط عىل الحروف‪ ،‬بمعن أنها ال تنشط‬
‫عند الضغط عىل بعض المفاتيح مثل ‪ Ctl‬و ‪ Shift‬و ‪ Alt‬و ‪ Esc‬و ‪ Delete‬و ‪ Home‬و ‪Insert‬‬
‫وغثها‪.‬‬
‫و‪ Caps-lock‬ر‬
‫‪Event Attributes‬‬ ‫‪255‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬
‫مج عند رفع الضغط عن المفتاح‪.‬‬
‫‪ : onkeyup -‬يتم تنفيذ الكود الث ي‬
‫"‪<input type="text" placeholder="Enter your address‬‬
‫>")'‪onkeyup="alert('The key is released.‬‬

‫معي‪ ،‬أدخل الحرف عدة مرات يف العنرص <‪>input‬‬‫الحظ أن استمرار الضغط عىل مفتاح ر‬
‫وبالتال ظهرت الرسالة‪.‬‬
‫ي‬ ‫ولم تبدأ الخاصية يف تنفيذ الكود‪ ،‬إال بعد رفع الضغط عن المفتاح‪،‬‬
‫الخصائص الثالث السابقة مدعومة يف كل عناص ‪ html‬ما عدا >‪ < html‬و >‪< bdo‬‬
‫و >‪ < br‬و >‪ < param‬و >‪ < iframe‬و >‪ < head‬وكل عناص ‪ metadata‬ما عدا العنرص‬
‫>‪< link‬‬

‫‪Event Attributes‬‬ ‫‪256‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

Mouse Event Attributes ‫خصائص حدث الفأرة‬

.‫خصائص تنشط أحداثها بفعل تعامل الفأرة مع العناص‬
‫ يتم تنفيذ الكود الث ي‬: onmousedown -
‫ وقبل رفع‬، ‫مج بعد النقر بزر الفأرة األيش‬
.‫الضغط عن الزر‬
<button onmousedown="alert('The button is down !!')">
Do some action</button>

‫ وبعد رفع الضغط عن زر الفأرة‬،‫مج بعد النقر عىل العنرص‬

‫ يتم تنفيذ الكود الث ي‬: onclick -
.‫األيش‬
<button onclick="alert('The button was clicked !!')">
Do some action</button>

.‫مج بعد النقر المزدوج عىل العنرص‬

‫ يتم تنفيذ الكود الث ي‬: ondblclick -
<button ondblclick="alert('The button was double clicked !!')">
Do some action</button>

Event Attributes 257 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬
.‫مج عند مرور الفأرة فوق العنرص‬
‫ يتم تنفيذ الكود الث ي‬: onmousmove -
<button onmousemove="alert('The mouse is over the button')">
Do some action</button>

.‫مج بعد خروج الفأرة من فوق العنرص‬

‫ يتم تنفيذ الكود الث ي‬: onmouseout -
<button onmouseout="alert('The mouse have left the button')">
Do some action</button>

‫ سواء كان‬،‫مج عند رفع الضغط عن زر الفأرة‬

‫ يتم تنفيذ الكود الث ي‬: onmouseup -
.‫الضغط بمفتاح الفأرة األيمن أو األيش‬
<button onmouseup="alert('The button is released after left or right
clicks')"> Do some action</button>

< br> ‫ < و‬bdo> ‫ < و‬html> ‫ ما عدا‬html ‫الخصائص السابقة مدعومة يف كل عناص‬
. < link> ‫ ما عدا العنرص‬metadata ‫ < وكل عناص‬head> ‫ < و‬iframe> ‫ < و‬param> ‫و‬

Event Attributes 258 [email protected]

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬
.‫مج عند دوران عجلة الفأرة فوق العنرص‬
‫ يتم تنفيذ الكود الث ي‬: onwheel -
<button onwheel="alert('The mouse is wheeled right now !!')"> Do some
action</button>

. html ‫هذه الخاصية مدعومة يف كل عناص‬

Event Attributes 259 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص حدث السحب واإلفالت‬

‫‪Drag and Drop Event Attributes‬‬
‫خصائص تنشط أحداثها بفعل عملي ين السحب واإلفالت للعناص‪ ،‬وهذه الخصائص‬
‫لقسمي‪ ،‬قسم يتم تعيينه للعنرص الذي يتم سحبه‪ ،‬وقسم آخر يتم تعيينه لمنطقة‬ ‫ر‬ ‫تنقسم‬
‫السحب أو اإلفالت‪.‬‬
‫الن يتم تعينها للعنرص ‪ ،‬الذي يتم سحبه وإفالته‪:‬‬ ‫ً‬
‫ي‬ ‫‪،‬‬‫خصائص‬ ‫ال‬‫ب‬ ‫أوال‬ ‫وسوف نبدأ‬
‫‪ : ondragstart -‬يتم تنفيذ الكود الث ي‬
‫مج أو التنسيق‪ ،‬عند التقاط العنرص‪ ،‬أو النص‪ ،‬وبدء‬
‫عملية السحب‪.‬‬
‫مج أثناء سحب العنرص إل منطقة اإلفالت‪.‬‬‫‪ : ondrag -‬يتم تنفيذ الكود الث ي‬
‫>"‪<input type="text‬‬
‫"'‪<div ondragstart="style='background:green‬‬
‫>‪ondrag="style='background:red'"><br‬‬
‫>‪Text to drag and drop</div‬‬

‫‪ondragstart‬‬ ‫‪ondrag‬‬
‫الحظ أنه عند بدء سحب العنرص يتحول لون الخلفية للون األخرص‪ ،‬وأثناء عملية‬
‫الخاصيتي)‪.‬‬
‫ر‬ ‫السحب يتحول لون الخلفية إل اللون األحمر (حسب كود التنسيق يف قيمة‬
‫مج عند إفالت العنرص‪.‬‬
‫‪ : ondragend -‬يتم تنفيذ الكود الث ي‬
‫‪<img src="mount.jpg" width="100" ondragend="alert('We have just finish‬‬
‫>")'!! ‪dragging‬‬

‫‪Event Attributes‬‬ ‫‪260‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬
‫الن يتم تعيينها لمنطقة اإلفالت‪:‬‬
‫الثاب‪ ،‬والخصائص ي‬
‫واآلن ننتقل للقسم ي‬
‫مج بعد التقاط العنرص أو النص‪ ،‬وبدء سحبه إل‬
‫‪ : ondragenter -‬يتم تنفيذ الكود الث ي‬
‫أي منطقة صالحة لإلفالت‪.‬‬
‫"‪<input type="text‬‬
‫>")'!!‪ondragenter="alert('We entered the dropping area now‬‬
‫>‪<div> Let's drag this text to input element</div‬‬

‫مج أو التنسيق عند التقاط عنرص أو نص ‪ ،‬وسحبه‬

‫‪ : ondragleave -‬يتم تنفيذ الكود الث ي‬
‫الن يوجد بها‪ ،‬إلفالته يف منطقة أخرى‪.‬‬
‫ليثك منطقة اإلفالت ي‬
‫>‪<input type="text" ondragleave="style='background:red;'"><br><br‬‬
‫>"‪<input type="text‬‬
‫>‪<div> Let's drag this text to input element</div‬‬
‫قم بسحب النص من محتوى العنرص‬
‫<‪ ، >div‬وقم بإفالته يف العنرص <‪ >input‬األول‪،‬‬
‫ثم قم بسحب نفس النص‪ ،‬وإفالته يف العنرص‬
‫الثاب‪ ،‬والحظ تلون خلفية العنرص‬ ‫ي‬ ‫<‪>input‬‬
‫األول (طبقا للكود يف الخاصية ‪ ، )ondragleave‬باللون األحمر عند مغادرة النص إل العنرص‬
‫الثاب‪.‬‬
‫ي‬
‫مج بعد سحب العنرص أو النص‪ ،‬ومروره فوق‬ ‫‪ : ondragover -‬يتم تنفيذ الكود الث ي‬
‫المنطقة المطلوب إفالته فيها‪ ،‬من ربي المناطق الصالحة لإلفالت‪.‬‬
‫>‪<input type="text"><br><br‬‬
‫>")'‪<input type="text" ondragover="alert('We drag over a dropping area‬‬
‫>‪<div > Let's drag this text to input element</div‬‬

‫‪Event Attributes‬‬ ‫‪261‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫الثاب ‪ ،‬وعند‬
‫الحظ أن الكود ال ينفذ‪ ،‬والرسالة ال تظهر عند المرور فوق عنرص <‪ >input‬ي‬
‫المرور فوق العنرص األول‪ ،‬ظهرت الرسالة حسب الكود يف قيمة الخاصية ‪. ondragover‬‬

‫مج الخاص بمنطقة اإلفالت‪ ،‬عند إفالت العنرص أو‬ ‫‪ : ondrop -‬يتم تنفيذ الكود الث ي‬
‫غثها من المناطق األخرى الصالحة لإلفالت‪.‬‬
‫النص يف هذه المنطقة‪ ،‬دون ر‬
‫>‪<input type="text"><br><br‬‬
‫>")'!! ‪<input type="text" ondrop="alert('We are dropping the text here‬‬
‫>‪<div > Let's drag this text to input element</div‬‬

‫الثاب‪.‬‬
‫الحظ أن الرسالة لم تظهر إال عند إفالت النص يف العنرص <‪ >input‬ي‬
‫وكل خصائص حدث السحب واإلفالت‪ ،‬مدعومة يف كل عناص ‪. html‬‬

‫‪Event Attributes‬‬ ‫‪262‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص حدث النسخ والقص واللصق‬

‫‪Clipboard Event Attributes‬‬
‫خصائص تنشط أحداثها بفعل القيام بعمليات النسخ والقص واللصق‪.‬‬
‫مج‬‫‪ : oncopy -‬يتم تنفيذ الكود الث ي‬
‫معي‪ ،‬موجود يف‬ ‫عند محاولة نسخ نص ر‬
‫محتوى أو يف حقل إدخال‪.‬‬

‫>")'‪<div oncopy="alert('We copy the element content‬‬

‫>‪Let's copy this text</div‬‬

‫مج عند‬
‫‪ : oncut -‬يتم تنفيذ الكود الث ي‬
‫معي‪.‬‬
‫محاولة قص نص ر‬

‫>")'!!‪<input type="text" oncut="alert('We are taking this text away‬‬

‫مج عند محاولة‬

‫‪ : onpaste -‬يتم تنفيذ الكود الث ي‬
‫معي‪.‬‬
‫لصق نص داخل عنرص ر‬

‫‪Event Attributes‬‬ ‫‪263‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

<input type="text" onpaste="alert('We got you a new text !!')">

. html ‫وكل خصائص حدث النسخ والقص واللصق مدعومة يف كل عناص‬

Event Attributes 264 [email protected]

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫خصائص حدث الوسائط ‪Media Event Attributes‬‬

‫خصائص تنشط أحداثها بفعل التعامل مع عناص الوسائط‪ ،‬مثل <‪ >img‬و<‪>video‬‬
‫و<‪. >audio‬‬
‫مج عند توقف تحميل مصدر العنرص‪.‬‬ ‫‪ : onabort -‬يتم تنفيذ الكود الث ي‬
‫مج عندما يكون مصدر العنرص جاهزا للتشغيل‪ ،‬مثل‬‫‪ : oncanplay -‬يتم تنفيذ الكود الث ي‬
‫فيديو ال يوجد أخطاء يف تحميله‪ ،‬أو يف تحديد مساره أو نوعه‪.‬‬
‫"‪<video controls width="300" height="200‬‬
‫>")'!!! ‪oncanplay="alert('Video is ready to play‬‬
‫>‪<source src="kids.mp4"></source‬‬
‫>‪</video‬‬

‫مج إذا كان مصدر العنرص مكتمل التحميل‪،‬‬

‫‪ : oncanplaythrough -‬يتم تنفيذ الكود الث ي‬
‫وسيعمل للنهاية دون أن يتوقف لتحميل أي أجزاء منه‪.‬‬
‫"‪<video controls width="300" height="200‬‬
‫>")'!!! ‪oncanplaythrough="alert('Video will play with no stop‬‬
‫>‪<source src="kids.mp4"></source‬‬
‫>‪</video‬‬

‫مج عند كل تحديث يف الثجمة‪.‬‬

‫‪ : oncuechange -‬يتم تنفيذ الكود الث ي‬
‫‪Event Attributes‬‬ ‫‪265‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

<video muted width="300" height="200" >

<source src="kids.mp4"></source>
<track src="kids.vtt" kind="subtitles" default oncuechange="alert('Subtitle
has changed')"></track>
</video>

،‫تغيث توقيت تشغيل الفيديو‬

‫مج عند ر‬ ‫ يتم تنفيذ الكود الث ي‬: ondurationchange -
. 0:00 ‫تغيث عند بداية عرض الفيديو حيث يزيد زمن التشغيل عن‬
‫ويكون أول ر‬
<video controls width="300" height="200" ondurationchange="alert('The
duration has changed')">
<source src="kids.mp4" ></source>
</video>

‫ئ‬
.‫مفاج يف ملف المصدر‬ ‫مج عند حدوث خطأ‬
‫ يتم تنفيذ الكود الث ي‬: onemptied -
<video controls width="300" height="200" onemptied="alert(' Something
wrong happened !!')">
<source src="kids.mp4" ></source>
</video>

.‫مج عند نهاية عرض الفيديو أو نهاية ملف الصوت‬

‫ يتم تنفيذ الكود الث ي‬: onended -
<video controls width="300" height="200" onended="alert('Thanks for
Event Attributes 266 [email protected]
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

watching !!')">
<source src="kids.mp4" ></source>
</video>

.‫مج عند حدوث خطأ يف تحميل الملف‬

‫ يتم تنفيذ الكود الث ي‬: onerror -
<img src="some_image.jpg" width="200" height="120"
onerror="alert('Can not load the image!!!!')">

.‫ أو مساره أو عدم وجود الملف‬، ‫قد يكون الخطأ يف اسم مصدر العنرص‬
.‫مج عند اكتمال تحميل ملف المصدر‬
‫ يتم تنفيذ الكود الث ي‬: onloadeddata -
<video controls width="300" height="200"
onloadeddata="alert('Video has loaded >>>')">
<source src="kids.mp4"></source>
</video>

‫مج عند تحميل البيانات الخاصة‬

‫ يتم تنفيذ الكود الث ي‬: onloadedmetadata -
Event Attributes 267 [email protected]
‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬
.‫ مثل الطول والعرض‬، ‫بإعدادات ملف المصدر‬

.‫مج عند بداية تحميل وعرض ملف المصدر‬

‫ يتم تنفيذ الكود الث ي‬: onloadstart -
<video controls width="300" height="200"
onloadstart="alert('Hello Guys !!')">
<source src="kids.mp4" ></source>
</video>

.‫مج عند توقيف عرض ملف المصدر‬

‫ يتم تنفيذ الكود الث ي‬: onpause -
<video controls width="300" height="200" onpause="alert('Paused!!')">
<source src="kids.mp4"></source>
</video>

.‫مج عند تشغيل ملف المصدر بعد توقيفه‬

‫ يتم تنفيذ الكود الث ي‬: onplay -
<video controls width="300" height="200" onplay="alert('Continue
watching')">
<source src="kids.mp4"></source>
</video>

Event Attributes 268 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫مج طالما كان هناك تقدم يف تحميل وتشغيل ملف‬ ‫‪ : onprogress -‬يتم تنفيذ الكود الث ي‬
‫المصدر‪.‬‬
‫مج عند زيادة أو تقليل شعة عرض ملف‬ ‫‪ : onratechange -‬يتم تنفيذ الكود الث ي‬
‫المصدر‪.‬‬
‫مج عند محاولة االنتقال إل نقطة معينة يف ملف‬ ‫‪ : onseeking -‬يتم تنفيذ الكود الث ي‬
‫المصدر ‪ ،‬عن طريق استخدام رشيط التنقل يف الفيديو‪ ،‬عند أول التقاط للمثلق‪.‬‬
‫"‪<video controls width="300" height="200‬‬
‫>")'‪onseeking="alert('Trying to find some frame‬‬
‫>‪<source src="kids.mp4"></source‬‬
‫>‪</video‬‬

‫مج عند وصول المثلق عىل رشيط االنتقال إل النقطة‬ ‫‪ : onseeked -‬يتم تنفيذ الكود الث ي‬
‫الن يرغب المستخدم يف الوصول إليها لتشغيل الفيديو عند هذه النقطة‪.‬‬
‫ي‬
‫"‪<video controls width="300" height="200‬‬
‫>")'!! ‪onseeked="alert('Already find frame‬‬
‫>‪<source src="kids.mp4" ></source‬‬
‫>‪</video‬‬
‫‪Event Attributes‬‬ ‫‪269‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫تغث يف زمن تشغيل ملف‬ ‫مج كلما حدث ر‬ ‫‪ : ontimeupdate -‬يتم تنفيذ الكود الث ي‬
‫يتغث زمنه‪ ،‬وتظهر الرسالة بشكل دائم‪.‬‬
‫المصدر (فيديو أو صوت)‪ ،‬أي كلما تم تشغيل الفيديو ر‬
‫"‪<video controls width="300" height="200‬‬
‫>")'!! ‪ontimeupdate="alert('Video time is updated‬‬
‫>‪<source src="kids.mp4"></source‬‬
‫>‪</video‬‬

‫‪ : onwaiting -‬يتم تنفيذ الكود الث ي‬

‫مج عند توقف عرض ملف المصدر تلقائيا نتيجة‬
‫التال من الملف‪.‬‬
‫انتظار تحميل الجزء ي‬
‫تغيث حدة الصوت‪.‬‬
‫مج عند ر‬
‫‪ : onvolumechange -‬يتم تنفيد الكود الث ي‬
‫"‪<video controls width="300" height="200‬‬
‫>")'>>> ‪onvolumechange="alert('Trying to change the volume‬‬
‫>‪<source src="kids.mp4"></source‬‬
‫>‪</video‬‬

‫‪Event Attributes‬‬ ‫‪270‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫خصائص الحدث‬

‫كل خصائص حدث الوسائط مدعومة يف العنرصين >‪ <audio‬و>‪ <video‬ماعدا‬

‫الخاصية ‪ onerror‬مدعومة يف العناص >‪ <img‬و>‪ <object‬و>‪ <link‬و>‪<script‬‬
‫والنوع ‪ image‬من العنرص >‪. <input‬‬

‫‪Event Attributes‬‬ ‫‪271‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫خصائص الحدث‬

Misc Event Attributes ‫خصائص حدث أخرى‬

‫أش‬ ‫ ر‬، scroll ‫ يتم تنفيذ الكود الثمج عند عمل‬: onscroll -
‫األفق أو الر ي‬
‫ي‬ ‫لشيط االنتقال‬ ‫ي‬
.‫للعنرص‬
<body style="height:2000px"
onscroll="alert('We are scrolling the page now !!')">

>address<‫> و‬blockquote<‫> و‬body<‫> و‬html< ‫هذه الخاصية مدعومة يف العناص‬

>h6< ‫> إل‬h1<‫> و‬fieldset<‫> و‬form<‫> و‬div<‫> و‬dt< ‫> و‬dl<‫> و‬dd<‫> و‬caption< ‫و‬
>thead< ‫> و‬object<‫> و‬li<‫> و‬ul< ‫> و‬ol<‫> و‬p<‫> و‬pre<‫> و‬select<‫> و‬tbody<‫و‬
. >textarea<‫> و‬tfoot<‫و‬
. >details< ‫مج عند فتح أو غلق العنرص‬
‫ يتم تنفيذ الكود الث ي‬: ontoggle -
<details ontoggle="alert('Open | Close')">
<summary>Web Design Course:</summary>
HTML<br>
CSS<br>
Javascript<br>
Bootstrap
</details>

.‫< فقط‬details> ‫الخاصية مدعومة يف العنرص‬

Event Attributes 272 [email protected]
‫مالحق إضافية‬
‫‪Appendices‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫ملحق ‪1‬‬
‫خصائص مشثكة‬
‫يتناول هذا الملحق رشح بعض الخصائص المشثكة ربي بعض العناص‪ ،‬وحن ال نكرر‬
‫رشح نفس الخاصية ف ر‬
‫أكث من موضع‪ ،‬فقد وضعت هذا الملحق للرجوع إليه‪ ،‬عند الرغبة يف‬ ‫ي‬
‫ه‪:‬‬
‫دراسة أي من هذه الخصائص‪ ،‬و ي‬
‫‪rel‬‬
‫خاصية تحدد نوع الرابط أو الملف المرتبط بالصفحة أو النموذج <‪ ، >form‬ويسند لهذه‬
‫وه‪:‬‬
‫الخاصية العديد من أنواع القيم ي‬
‫‪ : alternate -‬الرابط هو ملف بديل للصفحة‪ ،‬يعمل يف ‪ media‬أو بيئات أخرى يتوافق‬
‫معها‪ ،‬ويعرض الصفحة بشكل مالئم لهذه البيئة‪ ،‬ومسموح بهذه القيمة مع العناص <‪>a‬‬
‫وغث مسموح بها مع العنرص <‪. >form‬‬ ‫و<‪ >area‬و <‪ ، >link‬ر‬
‫‪ : author -‬الرابط هو معلومات عن مطور الصفحة‪ ،‬أو كاتب المقال‪ ،‬ومسموح بهذه‬
‫وغث مسموح بها مع العنرص <‪. >form‬‬‫القيمة مع العناص <‪ >a‬و <‪ >area‬و <‪ ، >link‬ر‬
‫وف حالة عدم‬ ‫‪ : bookmark -‬الرابط هو إشارة مرجعية ألقرب عنرص <‪ >article‬سابق‪ ،‬ي‬
‫وجود عنرص <‪ ، >article‬يكون االرتباط ألقرب عنرص تجزئة يف الصفحة لهذا الرابط‪،‬‬
‫وغث مسموح بها مع العناص <‪>link‬‬ ‫ومسموح بهذه القيمة مع العناص <‪ >a‬و<‪ ، >area‬ر‬
‫و<‪. >form‬‬
‫‪ : canonical -‬الرابط هو عنرص ‪ html‬يساعد مديري الصفحات عىل منع تكرار‬
‫لتحسي أداء‬
‫ر‬ ‫المحتوى‪ ،‬عن طريق تحديد الصفحة األساسية أو الصفحة المفضلة‪ ،‬مما يؤدي‬
‫وغث مسموح بها مع العناص‬ ‫محركات البحث‪ ،‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫<‪ >a‬و <‪ >area‬و<‪. >form‬‬
‫‪ : dns-prefetch -‬الرابط يجعل المتصفح يحلل مسبقا ‪ ، dns server‬الذي يحتوي‬
‫وغث مسموح‬ ‫عنوان ‪ ip‬الخاص بأصل هذا الرابط‪ ،‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫بها مع العناص <‪ >a‬و <‪ >area‬و <‪. >form‬‬
‫يعن أن المستخدم‬‫‪ : external -‬الرابط يؤدي إل مصدر خارج الصفحة الحالية‪ ،‬وهو ما ي‬
‫‪Appendices‬‬ ‫‪275‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫الحال‪ ،‬ومسموح بهذه القيمة مع العناص <‪ >a‬و <‪ >area‬و <‪، >form‬‬ ‫ي‬ ‫سوف يغادر الموقع‬
‫وغث مسموح بها مع العنرص <‪. >link‬‬ ‫ر‬
‫‪ : help -‬الرابط هو ملف لتقديم مساعدة قد تحتاجها أثناء تصفحك‪ ،‬ومسموح بهذه‬
‫القيمة مع العناص <‪ >a‬و <‪ >area‬و <‪ >form‬و<‪. >link‬‬
‫‪ : icon -‬الرابط هو أيقونة تظهر يف رشيط العنوان أو تبويب الصفحة‪ ،‬ومسموح بهذه‬
‫وغث مسموح بها مع العناص <‪ >a‬و <‪ >area‬و<‪. >form‬‬ ‫القيمة مع العنرص <‪ ، >link‬ر‬
‫معي‪ ،‬ومسموح بهذه القيمة مع العناص‬ ‫‪ : license -‬الرابط هو مستند ترخيص منتج ر‬
‫<‪ >a‬و <‪ >area‬و <‪ >form‬و<‪. >link‬‬
‫وه تطبيقات ويب يتم تحميلها مسبقا ثم‬ ‫‪ : manifest -‬الرابط هو تطبيق ‪ ، PWA‬ي‬
‫وغث مسموح بها مع‬ ‫تثبيتها لتعمل ‪ ، offline‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫العناص <‪ >a‬و <‪ >area‬و<‪. >form‬‬
‫معي قبل تحميل الصفحة‪،‬‬ ‫‪ : modulepreload -‬الرابط يقوم بتحميل سكريبت ر‬
‫وغث مسموح بها مع العناص <‪ >a‬و <‪>area‬‬ ‫ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫و<‪. >form‬‬
‫الن سيتم االنتقال إليها‪ ،‬ومسموح بهذه القيمة مع‬
‫‪ : next -‬الرابط هو الصفحة التالية ي‬
‫العناص <‪ >a‬و <‪ >area‬و <‪ >form‬و<‪. >link‬‬
‫يوَ به‪،‬‬
‫ي‬ ‫غث معتمد لدى مطور الصفحة‪ ،‬وال‬ ‫‪ : nofollow -‬الرابط ر‬
‫يشث لمنتج ر‬
‫وغث مسموح بها مع العنرص‬
‫ومسموح بهذه القيمة مع العناص <‪ >a‬و <‪ >area‬و <‪ ، >form‬ر‬
‫<‪. >link‬‬
‫‪ : noopener -‬قيمة تجعل الرابط الذي يفتح يف صفحة فارغة أي "‪، target="_blank‬‬
‫غثها‪ ،‬حيث تقوم هذه‬ ‫عندما يعود للصفحة الحالية‪ ،‬ال يتم توجيهه ألي صفحات أخرى ر‬
‫القيمة بإعطاء الخاصية ‪ window.opener‬القيمة ‪ ، null‬ومسموح بهذه القيمة مع العناص‬
‫وغث مسموح بها مع العنرص <‪. >link‬‬ ‫<‪ >a‬و<‪ >area‬و <‪ >form‬ر‬
‫‪ : noreferrer -‬عدم إرسال عنوان الصفحة أو أي معلومات أخرى إل الرابط من خالل‬
‫وغث‬
‫‪ ، http header‬ومسموح بهذه القيمة مع العناص <‪ >a‬و <‪ >area‬و <‪ ، >form‬ر‬
‫مسموح بها مع العنرص <‪. >link‬‬

‫‪Appendices‬‬ ‫‪276‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫إضاف (مسار يمكن الرجوع منه إل نفس الصفحة)‪،‬‬ ‫‪ : opener -‬الرابط ر ئ‬
‫ينش مسار تصفح‬
‫ي‬
‫عال المستوى (أي ليس له صفحة يعود إليها أو ليس له‬ ‫إذا كان الرابط سيؤدي إل مسار تصفح ي‬
‫صفحة رجوع أو أب يسبقه يف التصفح)‪ ،‬ومسموح بهذه القيمة مع العناص <‪ >a‬و <‪>area‬‬
‫وغث مسموح بها مع العنرص <‪. >link‬‬ ‫و<‪ ، >form‬ر‬
‫سثفر يتتبع الصفحة الحالية‪ ،‬لإلدالء بتعليق أو‬ ‫‪ : pingback -‬الرابط يحدد عنوان ر‬
‫وغث مسموح بها مع‬ ‫اقتباس حول الصفحة‪ ،‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫العناص <‪ >a‬و <‪ >area‬و<‪. >form‬‬
‫ً‬
‫‪ : preconnect -‬الرابط يقدم تلميح للمتصفح‪ ،‬ليفتح اتصاال مسبقا مع الرابط‪ ،‬دون‬
‫إرسال أي بيانات أو تحميل أي محتوى‪ ،‬بحيث يتم جلب المطلوب منه بشعة أكث‪ ،‬ومسموح‬
‫وغث مسموح بها مع العناص <‪ >a‬و <‪ >area‬و<‪. >form‬‬ ‫بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫‪ : prefetch -‬يقوم المتصفح بجلب الملف المرتبط ويخزنه مؤقتا‪ ،‬ألنه قد يكون مطلوبا‬
‫وغث مسموح بها مع العناص‬ ‫الستمرار التصفح‪ ،‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫<‪ >a‬و <‪ >area‬و<‪. >form‬‬
‫يتبي كيفية‬
‫‪ : preload -‬يقوم المتصفح بجلب الملف المرتبط وتخزينه مؤقتا‪ ،‬حن ر‬
‫وغث مسموح‬ ‫توجيهه حسب قيمة الخاصية ‪ ،as‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫بها مع العناص <‪ >a‬و <‪ >area‬و<‪. >form‬‬
‫‪ : prerender -‬يجب عىل المتصفح أن يجلب الصفحة المطلوبة‪ ،‬وأن يستعرضها أو‬
‫وبالتال يشع من عملية تصفح المستخدم‬ ‫ي‬ ‫يحملها يف الخلفية قبل أن يتصفحها المستخدم‪،‬‬
‫وغث مسموح بها مع العناص <‪ >a‬و <‪>area‬‬ ‫لها‪ ،‬ومسموح بهذه القيمة مع العنرص <‪ ، >link‬ر‬
‫و<‪. >form‬‬
‫الن انتقلت منها الصفحة الحالية‪ ،‬ومسموح بهذه‬ ‫‪ : prev -‬الرابط هو الصفحة السابقة ي‬
‫القيمة مع العناص <‪ >a‬و <‪ >area‬و <‪ >form‬و<‪. >link‬‬
‫ه‬ ‫‪ : search -‬الرابط هو مصدر للبحث‪ ،‬وإذا كانت قيمة الخاصية ‪ type‬ي‬
‫يعن أن الرابط هو محرك بحث‪،‬‬ ‫‪ application/opensearchdescription+xml‬فهذا ي‬
‫يمكن أن يضاف يف واجهة الصفحة ليستخدم يف البحث‪ ،‬ومسموح بهذه القيمة مع العناص‬
‫<‪ >a‬و <‪ >area‬و <‪ >form‬و<‪. >link‬‬

‫‪Appendices‬‬ ‫‪277‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫‪ : stylesheet -‬الملف المرتبط بالصفحة هو ملف تنسيق للصفحة‪ ،‬ومسموح بهذه‬
‫وغث مسموح بها مع العناص <‪ >a‬و <‪ >area‬و<‪. >form‬‬
‫القيمة مع العنرص <‪ ، >link‬ر‬
‫يشث إل صفحة تحمل إشعارا عن الصفحة الحالية‪ ،‬ومسموح بهذه القيمة‬
‫‪ : tag -‬الرابط ر‬
‫وغث مسموح بها مع العناص <‪ >link‬و<‪. >form‬‬
‫مع العناص <‪ >a‬و<‪ ، >area‬ر‬

‫‪Appendices‬‬ ‫‪278‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪target‬‬
‫خاصية تحدد الموضع الذي سيفتح فيها الرابط التشع ين عند الضغط عليه‪ ،‬أو الموضع‬
‫الذي سيتجه إليه النموذج <‪ >form‬عند اعتماده‪ ،‬أي عند الضغط عىل زر ‪، submit‬‬
‫والخاصية يسند إليها خمس قيم‪:‬‬
‫‪_blank‬‬
‫تعن أن الرابط أو النموذج سيفتح يف تبويب جديد ‪. new tab‬‬
‫قيمة ي‬
‫‪_self‬‬
‫تعن أن الرابط أو النموذج سيفتح يف نفس اإلطار ‪ ، iframe‬أو نفس الصفحة‬ ‫قيمة ي‬
‫الموجود بها‪.‬‬
‫‪_parent‬‬
‫تعن أن الرابط أو النموذج سيفتح يف اإلطار األب‪ ،‬الذي يحوي اإلطار الموجود فيه‬‫قيمة ي‬
‫الرابط أو النموذج‪.‬‬
‫‪_top‬‬
‫عن أن الرابط أو النموذج سيفتح يف كامل الصفحة الموجود فيها‪.‬‬‫قيمة ت ي‬
‫‪framename‬‬
‫تعن تحديد اسم اإلطار <‪ ، >iframe‬الذي سيفتح فيه الرابط‪.‬‬
‫قيمة ي‬
‫الخاصية ‪ formtarget‬لها نفس السلوك ‪ ،‬ولكن يتم تعيينها إما إل النوع ‪ submit‬من‬
‫النوعي ‪ submit‬و ‪ image‬من العنرص >‪. <input‬‬‫ر‬ ‫العنرص >‪ <button‬أو إل‬

‫‪Appendices‬‬ ‫‪279‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪method‬‬
‫خاصية تحدد طريقة إرسال بيانات النموذج <‪ ، >form‬عند الضغط عىل زر ‪ submit‬أو‬
‫السثفر ‪ ،‬أو إل الصفحة الموجودة يف قيمة الخاصية‬‫ر‬ ‫طريقة إرسال بيانات الصفحة إل‬
‫التشعن أو زر ‪، submit‬‬
‫ي‬ ‫‪ ، action‬أو قيمة الخاصية ‪ ، formaction‬عند الضغط عىل الرابط‬
‫قيمتي‪:‬‬
‫ر‬ ‫وهذه الخاصية تقبل‬
‫‪get‬‬
‫يأب‪:‬‬
‫وتتمث هذه الطريقة بما ي‬
‫ر‬
‫التشعن بعنوان ‪ URL‬الموجود يف ‪، address bar‬‬
‫ي‬ ‫‪ -‬إلحاق بيانات الـ ‪ form‬أو الرابط‬
‫فتكون مرئية للمستخدم عىل هيئة االسم والقيمة ‪. name/value pairs‬‬

‫حوال ‪ 2048‬حرف‪.‬‬ ‫ي‬ ‫‪ -‬طول عنوان ‪ URL‬محدود‬

‫‪ -‬ال تستخدم هذه الطريقة يف إرسال المعلومات الحساسة‪.‬‬
‫‪ -‬تفيد عند عمل ‪ submit‬لمالحظة النتائج يف رشيط العنوان واالستفادة منها‪.‬‬
‫الغث مهمة‪.‬‬
‫‪ -‬أفضل طريقة يف حالة إرسال البيانات ر‬

‫‪post‬‬
‫يأب‪:‬‬
‫وتتمث هذه الطريقة بما ي‬
‫ر‬
‫غث مرئية‬
‫التشعن بـ ‪ http header‬وبذلك تكون ر‬
‫ي‬ ‫‪ -‬إلحاق بيانات الـ ‪ form‬أو بيانات الرابط‬
‫للمستخدم‪.‬‬
‫وغث محدودة لعدد الحروف‪.‬‬ ‫غث محدودة الحجم ر‬ ‫‪ -‬ر‬
‫التشعن‬
‫ي‬ ‫‪ -‬ال تظهر نتائج عملية اعتماد النموذج ‪ ، submit‬أو الضغط عىل الرابط‬
‫للمستخدم‪ ،‬مما يوفر أمانا يف نقل البيانات‪.‬‬
‫والن يفضل أال يطلع عليها المستخدم‪.‬‬
‫ي‬ ‫‪ -‬أفضل طريقة يف نقل البيانات الحساسة‪،‬‬
‫الخاصية ‪ formmethod‬لها نفس السلوك ‪ ،‬ولكن يتم تعيينها إما إل النوع ‪submit‬‬
‫النوعي ‪ submit‬و ‪ image‬من العنرص >‪. <input‬‬‫ر‬ ‫من العنرص >‪ <button‬أو إل‬

‫‪Appendices‬‬ ‫‪280‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪enctype‬‬
‫السثفر بعد اعتمادها‪ ،‬وتستخدم هذه‬
‫ر‬ ‫تشفث بيانات النموذج عند دخولها إل‬
‫ر‬ ‫طريقة‬
‫ه ‪ ، post‬ويسند لهذه‬
‫الخاصيتي ‪ method‬أو ‪ formmethod‬ي‬
‫ر‬ ‫الخاصية إذا كانت قيمة‬
‫الخاصية ثالث قيم‪:‬‬
‫‪application/x-www-form-urlencoded‬‬
‫السثفر ويتم‬
‫تشفث كل الحروف قبل دخولها إل ر‬
‫ر‬ ‫وتعن‬
‫ي‬ ‫القيمة االفثاضية للخاصية‪،‬‬
‫تحويل المسافة الفارغة إل ك‪+‬ك والرموز الخاصة تتحول إل ما يقابلها يف جدول ‪. asci‬‬
‫‪multipart/form-data‬‬
‫قيمة تستخدم عند رفع ‪ upload‬ملف إل النموذج‪ ،‬أي إذا كان النموذج داخله عنرص‬
‫<‪ >input‬وكان النوع أو ‪ type‬لهذا العنرص هو ‪. file‬‬
‫‪text/plain‬‬
‫تشفث أي حروف أو رموز‪ ،‬وإرسال النص عىل هيئته األصلية‪ ،‬وال يوَ‬
‫ر‬ ‫تعن عدم‬‫قيمة ي‬
‫باستخدام هذه القيمة‪.‬‬
‫الخاصية ‪ formenctype‬لها نفس السلوك ‪ ،‬ولكنها تسند إما إل النوع ‪ submit‬من‬
‫النوعي ‪ submit‬و ‪ image‬من العنرص >‪. <input‬‬
‫ر‬ ‫العنرص >‪ <button‬أو إل‬

‫‪crossorigin‬‬
‫خاصية تحدد هل يتم إرسال بيانات خاصة بالصفحة مثل ‪ cookies‬و ‪basic‬‬
‫وغثها‪ ،‬إل المصدر أثناء الحصول عىل الملف المرتبط‪ ،‬أو أثناء التعامل‬‫‪ authentication‬ر‬
‫قيمتي‪:‬‬
‫ر‬ ‫معه‪ ،‬أم ال يتم إرسال أي بيانات‪ ،‬وهذه الخاصية يسند لها‬
‫‪anonymous‬‬
‫رسلة (المصدر)‪.‬‬ ‫ُ‬
‫الحصول عىل الملف دون إرسال أي بيانات للصفحة الم ِ‬
‫‪use-credentials‬‬
‫رسلة (المصدر)‪.‬‬ ‫ُ‬
‫الحصول عىل الملف مع إرسال البيانات المطلوبة للصفحة الم ِ‬
‫‪Appendices‬‬ ‫‪281‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪referrerpolicy‬‬
‫خاصية تحدد إذا كان االنتقال إل الصفحة الحالية أو ‪ destination‬قد تم من خالل‬
‫صفحة سابقة فتسم الصفحة السابقة بـ ‪ referrer‬أو المحيل‪ ،‬ألنها أحالت المستخدم إل‬
‫هذه الصفحة الحالية‪ ،‬ويمكن للصفحة الحالية الحصول عىل معلومات المحيل ‪referrer‬‬
‫عن طريق إرسال ‪ http header‬الخاص بها إل الصفحة الحالية ‪ ، destination‬وتنظيم‬
‫الن يسند إليها عدة قيم‪ ،‬ولكن علينا‬
‫هذه العملية هو وظيفة الخاصية ‪ ، referrerpolicy‬و ي‬
‫ً‬
‫كثثا عند رشح هذه القيم وهو ‪. origin‬‬
‫أوال أن نتعرف عىل مصطلح هام‪ ،‬سوف يقابلنا ر‬
‫‪origin‬‬
‫الرئيش للموقع أو الصفحة ويبدأ من برتوكول ‪ http‬ويسم ‪ schema‬ثم ‪host‬‬
‫ي‬ ‫هو العنوان‬
‫التال‪:‬‬
‫أو ‪ domain‬ثم رقم المنفذ ‪ ، port number‬كما بالشكل ي‬

‫ويسند للخاصية عدة أنواع من القيم‪:‬‬

‫‪no-referrer‬‬
‫لن يتم إرسال أي معلومات عن المحيل أو ‪ referrer‬يف ‪ http header‬إل الصفحة‬
‫الحالية‪.‬‬
‫‪no-referrer-when-downgrade‬‬

‫‪referrer‬‬ ‫‪sent‬‬ ‫‪destination‬‬

‫للصفحتي نفس مستوى‬ ‫ر‬ ‫يجب أن تكون‬
‫برتوكول ‪ http‬أو تكون صفحة المحيل أقل من‬
‫‪https‬‬ ‫√‬ ‫‪https‬‬
‫مستوى الصفحة الحالية‪ ،‬ليتم اإلرسال كما‬
‫‪http‬‬ ‫√‬ ‫‪http‬‬
‫بالجدول المقابل‪:‬‬
‫‪http‬‬ ‫√‬ ‫‪https‬‬
‫الحظ أنه يف الحالة الرابعة لم يتم اإلرسال أو‬
‫‪https‬‬ ‫‪X‬‬ ‫‪http‬‬
‫إحالة أي معلومات يف ‪ http header‬عن المحيل‬
‫برتوكول ‪ http‬عن صفحة المحيل‬ ‫‪ referrer‬ألن الصفحة الحالية ‪ destination‬أقل يف‬
‫‪Appendices‬‬ ‫‪282‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫وبالتال لن تنقل الصفحة األعىل يف مستوى الثوتوكول‪ ،‬معلوماتها إل الصفحة‬
‫ي‬ ‫‪،referrer‬‬
‫األقل منها يف المستوى‪ ،‬وهذا يسم ‪. downgrade‬‬
‫‪origin‬‬
‫الرئيش فقط‪ ،‬أي أنه إذا كان عنوان المحيل هو‬
‫ي‬ ‫إرسال الرابط أو العنوان‬
‫‪ http://www.somesite.com:80/somelink/page.html‬فسيتم إرسال العنوان‬
‫الرئيش وهو ‪. http://www.somsite.com:80‬‬
‫ي‬
‫‪origin-when-cross-origin‬‬
‫إذا كانت صفحة المحيل ‪ referrer‬والصفحة الحالية ‪ destination‬عىل نفس ‪، origin‬‬
‫فيتم اإلرسال‪ ،‬أما إذا كانت الصفحة الحالية عىل ‪ origin‬آخر‪ ،‬فيتم فقط إرسال عنوان المحيل‬
‫الرئيش ‪.origin‬‬
‫ي‬
‫‪same-origin‬‬
‫إذا كانت صفحة المحيل ‪ referrer‬والصفحة الحالية ‪ destination‬عىل نفس العنوان‬
‫الرئيش ‪ origin‬فال‬
‫ي‬ ‫الرئيش أو ‪ origin‬فيتم إرسال ‪ ، http header‬أما إذا اختلف العنوان‬
‫ي‬
‫يتم اإلرسال‪.‬‬
‫‪strict-origin‬‬
‫إذا كانت صفحة المحيل ‪ referrer‬والصفحة الحالية ‪ destination‬لهما نفس المستوى‬
‫الرئيش ‪ ، origin‬أما إذا كانت الصفحة الحالية لها‬
‫ي‬ ‫لثوتكول األمان ‪ https‬فيتم إرسال العنوان‬
‫بروتكول ‪ http‬فال يتم اإلرسال‪.‬‬
‫‪strict-origin-when-cross-origin‬‬
‫إذا اختلف ‪ origin‬الصفحة الحالية ‪ destination‬عن ‪ origin‬المحيل ‪ referrer‬فيتم‬
‫إرسال ‪ origin‬صفحة المحيل ‪ referrer‬إذا اتفقا يف مستوى بروتكول األمان‪ ،‬أوكان بروتوكول‬
‫صفحة المحيل (‪ )http‬أقل من برتوكول الصفحة الحالية (‪ ، )https‬إما إذا كان أعىل‪ ،‬فال يتم‬
‫اإلرسال‪.‬‬
‫‪unsafe-url‬‬
‫وه أجزاء الصفحة أو‬ ‫باف العنوان‪ ،‬ي‬‫والفرع‪ ،‬ولكن ال يتم إرسال ي‬
‫ي‬ ‫الرئيش‬
‫ي‬ ‫يتم إرسال العنوان‬
‫‪ fragments‬وال االسم أوكلمة الش‪.‬‬
‫‪Appendices‬‬ ‫‪283‬‬ ‫‪[email protected]‬‬
 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫ملحق ‪2‬‬
‫محىل ‪Installing a localhost‬‬
‫ي‬ ‫تثبيت خادم‬
‫حىل‪ ،‬ألن بعض المتصفحات ال تقوم‬‫تحتاج بعض الملفات ألن تعمل بواسطة خادم م ي‬
‫أكث من طلب يف نفس الوقت‪ ،‬وهذا يسم بعدم‬ ‫بتنفيذ الطلبات الغث مثامنة‪ ،‬أي تنفيذ ر‬
‫ر‬
‫الثامن‪ ،‬حيث يجب تنفيذ جميع الطلبات يف وقت واحد‪ ،‬وللتغلب عىل هذه المشكلة نقوم‬
‫محىل ‪ localhost‬بأحد الطرق التالية‪:‬‬
‫ي‬ ‫بتثبيت خادم‬
‫محىل عن طريق تثبيت برنامج ‪Python‬‬
‫ي‬ ‫‪ -1‬إنشاء خادم‬
‫قم بزيارة موقع ‪ python.org‬وقم بتحميل أحد نسخ برنامج ‪ python‬المناسبة لجهازك‪،‬‬
‫ثم قم بتثبيته ببساطة مثل أي برنامج عادي‪ ،‬وبعد االنتهاء من تثبيت الثنامج‪ ،‬تأكد من تعريف‬
‫متغثات النظام‪ ،‬وللتأكد من ذلك قم بفتح موجة األوامر ‪ cmd‬عن طريق األمر‬ ‫ر‬ ‫مساره يف‬
‫كالتال‪:‬‬
‫ي‬ ‫‪run as adminstrator‬‬
‫سيتم فتح موجه‬
‫األوامر كما بالشكل‬
‫التال‪:‬‬
‫ي‬

‫اكتب يف سطر األوامر‬

‫‪ python --version‬أو اكتب‬
‫‪ python -V‬ثم اضغط ‪enter‬‬
‫الن سيتم‬ ‫ي‬ ‫والحظ الجملة‬
‫طباعتها‪ ،‬فإذا كانت عبارة عن‬
‫متغثات النظام‪ ،‬أما إذا‬
‫يعن أن مسار الثنامج معرف يف ر‬
‫الن قمت بتثبيتها‪ ،‬فهذا ي‬
‫نسخة البايثون ي‬
‫ظهرت لك الجملة ‪python is not recognized as internal or external command‬‬
‫متغثات النظام‪ ،‬وسوف نقوم بتعريفه يف الخطوات‬‫غث معرف يف ر‬ ‫يعن أن مسار الثنامج ر‬
‫فهذا ي‬
‫التالية‪:‬‬

‫‪Appendices‬‬ ‫‪284‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫من قائمة ‪ start‬اخث ‪ Python 3.9‬ثم اخث )‪ Python 3.9 (64-bit‬ثم اضغط بمفتاح‬
‫الفأرة األيمن واخث ‪ More‬ثم اخث ‪. Open file location‬‬
‫‪0‬‬

‫سيتم فتح ‪ folder‬أيقونات اختصارات الثنامج‪ ،‬اخث )‪ Python 3.9 (64-bit‬ثم اضغط‬
‫بزر الفأرة األيمن‪ ،‬واخث من القائمة ‪. Open file location‬‬

‫التال‪ ،‬قم بنسخ مسار الثنامج المظلل‬

‫سيفتح لك المسار المحفوظ به الثنامج‪ ،‬كما بالشكل ي‬
‫والموجود يف رشيط العنوان‪:‬‬

‫‪Appendices‬‬ ‫‪285‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ HTML5 ‫المرجع الكامل يف‬ ‫مالحق إضافية‬

Control Panel ‫اآلن قم بفتح‬

‫ ثم‬System and Security ‫ثم‬
‫ ثم اخث من القائمة‬System
. Advanced system settings

‫ ثم اضغط‬Advanced ‫اخث التبويب‬

. Environment Variables

Appendices 286 [email protected]

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫‪System‬‬ ‫من الجزء المسم‬
‫المتغث ‪path‬‬
‫ر‬ ‫‪ vaiables‬إذا لم يكن‬
‫معرفا تحت القائمة ‪ ، Variable‬اضغط‬
‫‪. New‬‬

‫اكتب ‪ path‬يف‬
‫‪ Variable name‬ثم قم‬
‫بلصق المسار الذي قمت‬
‫بنسخه من رشيط العنوان‬
‫يف الصفحة السابقة‪ ،‬ثم‬
‫اضغط ‪ ،OK‬والحظ ظهور‬
‫المتغث والعنوان‬
‫ر‬ ‫اسم‬
‫أمامه‪.‬‬

‫المتغث ‪path‬‬
‫ر‬ ‫أما إذا كان‬
‫معرفا وله قيمة‪ ،‬فنختار‬
‫‪ edit‬ويتم إضافة فاصلة‬
‫منقوطة ثم إضافة عنوان‬
‫أو مسار ‪ python‬له‪.‬‬

‫‪Appendices‬‬ ‫‪287‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪1‬‬ ‫قم بفتح موجه‬

‫األوامر ‪ cmd‬كما يظهر‬
‫‪2‬‬
‫‪3‬‬ ‫بالشكل المقابل‪.‬‬

‫وجه ‪ cmd‬أو سطر‬

‫األوامر إل مسار الملف‬
‫‪1‬‬ ‫الذي تريد فتحه‬
‫‪2‬‬ ‫الخادم‬ ‫باستخدام‬
‫المحىل واكتب األمر‬
‫ي‬
‫السثفر بدأ العمل‬
‫ر‬ ‫المحىل ‪ python -m http.server‬والحظ أن‬
‫ي‬ ‫التال لتشغيل الخادم‬
‫ي‬
‫بالفعل عىل منفذ ‪. 8000‬‬

‫قم بفتح متصفحك واكتب يف العنوان‬

‫‪ localhost:8000‬ثم اضغط ‪ ، enter‬والحظ‬
‫ظهور قائمة بجميع ملفاتك يف المتصفح‪ ،‬اخث‬
‫الملف المطلوب تشغيله واضغط عليه‪.‬‬
‫إذا كان لديك صفحة ‪ html‬ولها االسم‬
‫‪ ، index‬فستفتح ر‬
‫مباشة دون المرور عىل هذه‬
‫اَ‬
‫القائمة‪ ،‬أي أنها ستكون االختيار االفث ي‬
‫للتشغيل من خالل الخادم‪.‬‬

‫‪Appendices‬‬ ‫‪288‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫محىل عن طريق ‪vs code‬‬

‫ي‬ ‫‪ – 2‬إنشاء خادم‬
‫للسثفر‬
‫ر‬ ‫يقوم برنامج ‪ visual studio code‬بتثبيت امتداد ‪ ، live server‬حيث إن‬
‫المحىل وظيفة أخرى‪ ،‬فهو يمكنك من مشاهدة تحديثات الكود الذي تكتبه بمجرد حفظه‪،‬‬
‫ي‬
‫دون عمل ‪ refresh‬للصفحة ‪.‬‬
‫قم بتحميل برنامج ‪ vscode‬من الرابط ‪ code.visualstudio.com/Download‬ثم‬
‫قم بتثبيته كالمعتاد‪ ،‬ثم قم بفتحه‪ ،‬ومن‬
‫الجانن قم باختيار الخاصية‬ ‫ر‬
‫الشيط‬
‫ي‬
‫‪ extensions‬كما بالشكل المقابل‪.‬‬

‫اكتب يف خانة البحث ‪ live server‬ثم‬

‫اضغط ‪ ، install‬والحظ قيام الثنامج بتثبيت‬
‫التال بعد انتهاء‬
‫ي‬ ‫االمتداد‪ ،‬ليظهر لك بالشكل‬
‫التثبيت‪:‬‬

‫‪Appendices‬‬ ‫‪289‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫من قائمة ‪ file‬اخث ‪ open folder‬ثم اخث‬
‫الن تريد‬
‫ي‬ ‫الفولدر الذي يحتوي الملفات‬
‫المحىل‪.‬‬
‫ي‬ ‫استعراضها من خالل الخادم‬

‫اخث الفولدر ثم اضغط‬

‫‪. select folder‬‬

‫الجانن اخث ‪ Explorer‬ليفتح الفولدر‬ ‫الشيط‬ ‫من ر‬

‫ي‬
‫الذي اخثته وبداخله الملفات المطلوبة‪.‬‬

‫الن تريد‬
‫اخث الملفات ي‬
‫فتحها ثم اضغط مرة واحدة‬
‫عىل كل ملف‪.‬‬

‫المحىل‪ ،‬انقر‬
‫ي‬ ‫واآلن لتشغيل الخادم‬
‫بزر الفأرة األيمن داخل صفحة‬
‫‪ html‬الن تريد استعراضها ومن القائمة اخث ‪ open with live server‬أو اخث من ر‬
‫الشيط‬ ‫ي‬
‫السفىل ‪Go live‬‬
‫ي‬

‫‪Appendices‬‬ ‫‪290‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫لتتحول ‪ Go live‬إل‬
‫‪ Starting‬ثم ‪Port:5500‬‬
‫وهو المنفذ الذي يعمل‬
‫المحىل‪.‬‬
‫ي‬ ‫عليه الخادم‬
‫ر‬
‫اَ‪ ،‬قم بفتح متصفحك واكتب‬ ‫إذا لم تفتح صفحة ‪ html‬مباشة يف متصفحك االفث ي‬
‫‪ localhost:5500‬يف رشيط العنوان والحظ ظهور الملفات يف الفولدر الذي تم اختياره‪ ،‬اخث‬
‫الملف المطلوب استعراضه واضغط عليه ليفتح لك يف المتصفح‪.‬‬

‫‪Appendices‬‬ ‫‪291‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫ملحق ‪3‬‬
‫إنشاء ملف ترجمة أو ملف مصاحب لملف الفيديو‬
‫يمكنك إنشاء ملف الثجمة يف خطوات بسيطة‪ ،‬كل ما تحتاج إليه هو محرر نصوص‬
‫محىل ‪ localhost‬لتشاهد نتيجة عملك‬
‫ي‬ ‫لتكتب فيه الثجمة‪ ،‬وكذلك تحتاج إل تثبيت خادم‬
‫عىل الطبيعة‪.‬‬
‫‪WEBVTT - Simple VTT file‬‬

‫‪00:00:01.000 --> 00:00:03.000‬‬

‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪NOTE Next cue will not be shown‬‬

‫أنا ماهرة جدا‬

‫‪00:00:04.000 --> 00:00:06.000‬‬
‫طبعا أنا أتمتع بمهارة عالية يف كرة القدم‬

‫‪ - 1‬يجب أن تتأكد من أنك متصل بخادم‬

‫محىل ‪ localhost‬قبل تشغيل ملفات الثجمة‬ ‫ي‬
‫محىل ملحق ‪. 2‬‬ ‫وشح كيفية تثبيت خادم‬‫ر‬
‫ي‬
‫‪ - 2‬افتح ملف جديد يف محرر األكواد الخاص‬
‫بك‪ ،‬واكتب يف السطر األول ‪. WEBVTT‬‬

‫ويوجد بعض ر‬
‫الشوط من الواجب‬
‫وه‪:‬‬
‫مراعاتها عند إعداد ملف الثجمة ي‬
‫‪ -‬الكلمة ‪ WEBVTT‬يجب أن تكون أول ما يكتب يف ملف الثجمة‪ ،‬بمعن أنه يجب أال‬
‫يوجد قبلها أي سطر سواء كان فارغا أو به نص‪ ،‬وأال يوجد قبلها أي مسافات سواء كانت فارغة‬
‫أو بها نص‪ ،‬حن وإن كانت مسافة واحدة‪ ،‬وخالف ذلك سيؤدي إل عدم عمل ملف الثجمة‪.‬‬
‫صغثة أو مزي ــج من‬
‫ر‬ ‫كبثة‪ ،‬بمعن أن كتابتها بحروف‬
‫‪ -‬يجب أن تكتب هذه الكلمة بحروف ر‬
‫‪Appendices‬‬ ‫‪292‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫والكبثة‪ ،‬سيؤدي إل عدم عمل ملف الثجمة‪.‬‬
‫ر‬ ‫الصغثة‬
‫ر‬ ‫الحروف‬
‫‪ -3‬يمكنك إضافة ‪ header‬أو رأس للملف‪ ،‬وهو نص ر‬
‫يشح نقطة معينة‪ ،‬ويتم ذلك‬
‫بإضافة مسافة فارغة بعد كلمة ‪ WEBVTT‬ثم إضافة النص‪ ،‬والذي لن يظهر يف سطر‬
‫الثجمة‪.‬‬
‫‪ - 4‬يفضل أن تثك سطرا فارغا‪ ،‬ثم تبدأ يف سطر جديد كتابة التوقيت الذي ستعرض‬
‫فيه الثجمة عىل ملف الفيديو‪.‬‬

‫تنسيق توقيت الثجمة‪:‬‬

‫‪ -‬يكون تنسيق توقيت الثجمة بهذا الشكل ‪ hh:mm:ss.ttt‬أو ‪ 00:00:00.000‬حيث‬
‫ً‬
‫الثواب‪ ،‬ثم رابعا‬
‫ي‬ ‫ثالثا‬ ‫ثم‬ ‫‪،‬‬‫الدقائق‬ ‫ثانيا‬ ‫ثم‬ ‫‪،‬‬‫الساعات‬ ‫أوال‬ ‫اليمي‪،‬‬
‫ر‬ ‫تمثل األصفار من اليسار إل‬
‫وأخثا الجزء من األلف من الثانية‪.‬‬
‫ر‬
‫‪ -‬يمكن االكتفاء بالثالثة أجزاء األول‪ ،‬واالستغناء عن الجزء المخصص للجزء من الثانية‪،‬‬
‫تستغن عنه‪ ،‬ولكن ال يمكنك االستغناء عن‬ ‫ي‬ ‫وإذا لم تكن يف حاجة لجزء الساعات فيمكن أن‬
‫الثواب‪.‬‬
‫ي‬ ‫جزء الدقائق أو‬
‫‪ -‬يجب أن نبدأ بتوقيت بداية عرض الثجمة يتبعها توقيت نهاية العرض‪ ،‬عىل أن يفصل‬
‫بينهما الرمز ك>‪--‬ك‪ ،‬وبالطبع يجب أن يكون توقيت نهاية العرض أكث من توقيت بدايته‪.‬‬
‫‪ -‬يفضل أن تثك مسافة فارغة ربي توقيت البداية والرمز ك>‪--‬ك بعده‪ ،‬وأن تثك مسافة‬
‫فارغة ربي توقيت النهاية والرمز ك>‪--‬ك قبله‪ ،‬ولكن يف حالة عدم ترك أي مسافة فالملف‬
‫سيعمل بطريقة صحيحة‪.‬‬
‫‪ -‬يمكنك إضافة توقيت عىل هيئة ‪ timestamp tag‬يف سطر الثجمة‪ ،‬وهو وسم يتم‬
‫معي‪ ،‬ويحتوي هذا الوسم عىل التوقيت بالتنسيق السابق‪،‬‬ ‫وضعه ربي الجمل يف سطر ترجمة ر‬
‫ويفيد هذا الوسم يف تحديد توقيت النص النشط ‪ ، active text‬ويكون هو النص ربي هذا‬
‫الوسم وتوقيت النهاية‪ ،‬ويعرف النص قبل هذا الوسم وتوقيت البداية بالنص السابق أو‬
‫‪ ، previous text‬ويطلق عىل طريقة التوقيت هذه ‪ karaoke style text‬ويكون هذا الوسم‬
‫بهذا الشكل‪:‬‬
‫‪00:00:01.000 --> 00:00:04.000‬‬
‫هيا بنا نلعب الكرة‪ >00:00:03.000< ،‬هل تستطبع أن تلعب ي‬
‫مثىل‬

‫‪Appendices‬‬ ‫‪293‬‬ ‫‪[email protected]‬‬

 ‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫الن تريد أن تظهر عىل‬ ‫ر‬
‫التال مباشة اكتب أسطر الثجمة أو ‪ cues‬ي‬ ‫ي‬ ‫‪ - 5‬يف السطر‬
‫أكث قبل سطر الثجمة‪.‬‬ ‫الفيديو وال مشكلة ف إدخال مسافة فارغة أو ر‬
‫ي‬
‫يعن عدم عرض سطور‬ ‫ي‬ ‫‪ - 6‬السطر الفارغ ربي سطر التوقيت وسطور الثجمة‬
‫مباشة‪ ،‬وتعرض سطور الثجمة المتصلة‬ ‫ر‬ ‫الثجمة‪ ،‬طالما لم يسبقها سطر التوقيت‬
‫مباشة أيا كان عددها‪ ،‬طالما لم يفصل بينها سطر فارغ‪.‬‬ ‫ر‬ ‫بسطر التوقيت‬
‫‪ -7‬يمكنك إضافة تعليق عن طريق إضافة سطر فارغ‪ ،‬ثم يف السطر الذي يليه نضيف‬
‫الكلمة ‪ NOTE‬وإضافة النص المطلوب بعدها والذي لن يظهر يف الثجمة‪.‬‬
‫‪ - 8‬ال يجب إدخال الرمز ك>‪--‬ك أو الرموز الخاصة (&‪ )< ,> ,‬يف التعليق واالستعاضة‬
‫عنها بما يكافئها من رموز ‪. html‬‬
‫‪ - 9‬قم بحفظ الملف بامتداد ‪ ، file_name.vtt‬وقم بإسناده كقيمة للخاصية ‪ src‬يف‬
‫العنرص <‪ ، >track‬داخل العنرص <‪. >video‬‬
‫وبتطبيق ما تناولناه عىل الكود السابق‪ ،‬الحظ أن سطر الثجمة األول يظهر يف التوقيت من‬
‫الثانية ‪ 1‬إل الثانية ‪ ،3‬بينما سطر الثجمة الثالث يظهر يف التوقيت من الثانية ‪ 4‬إل الثانية ‪، 6‬‬
‫الثاب كأنا ماهرة جداك تم تجاوزه ولم يظهر‪ ،‬لوجود سطر فارغ قبله‪ ،‬وعدم‬‫حي أن السطر ي‬ ‫يف ر‬
‫وجود توقيت لعرضه قبله ر‬
‫مباشة‪.‬‬

‫إعدادات عرض سطر الثجمة ‪cue‬‬

‫يوجد عدة خصائص تتحكم يف اتجاه وموضع وحجم سطر الثجمة‪ ،‬وتضاف الخاصية بعد‬
‫توقيت النهاية‪ ،‬عىل أن يفصل بينهما مسافة فارغة عىل األقل‪ ،‬ويفصل ربي الخاصية وقيمتها‬
‫ه‪:‬‬
‫والن تليها‪ ،‬مسافة فارغة عىل األقل‪ ،‬وهذه الخصائص ي‬
‫ك‪:‬ك ويفصل ربي الخاصية ي‬
‫‪vertical‬‬
‫خاصية تعرض سطر الثجمة رأسيا‪ ،‬ولها قيمتان‪:‬‬
‫تعن أن يعرض سطر الثجمة من اليسار‪.‬‬ ‫‪ : lr -‬قيمة ي‬
‫اليمي‪.‬‬
‫تعن أن يعرض سطر الثجمة من ر‬ ‫‪ : rl -‬قيمة ي‬
‫)‪WEBVTT – cue settings(vertical‬‬
‫‪00:00:01.000 --> 00:00:04.000 vertical:lr‬‬

‫‪Appendices‬‬ ‫‪294‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪lr‬‬ ‫‪rl‬‬
‫غث مستخدم‪ ،‬ما عدا يف اللغات الصينية‬ ‫غث مألوف أو ر‬
‫أش يبدو ر‬
‫وبما أن االتجاه الر ي‬
‫األفق ‪. horizontal‬‬ ‫باف الخصائص عىل االتجاه‬ ‫ر‬
‫ي‬ ‫واليابانية‪ ،‬فسوف نستكمل شح ي‬
‫‪align‬‬
‫خاصية تحدد محازاة النص‪ ،‬ويسند لها ثالث قيم‪ ،‬فإذا كان النص أفقيا تكون‪:‬‬
‫‪ : start -‬موضع النص الحد األيمن لملف الفيديو‪.‬‬
‫‪ : center -‬موضع النص يف منتصف ملف الفيديو أفقيا‪.‬‬
‫‪ : end -‬موضع النص الحد األيش لملف الفيديو‪.‬‬
‫)‪WEBVTT – cue settings(align‬‬

‫‪00:00:01.000 --> 00:00:04.000 align:center‬‬

‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪start‬‬ ‫‪center‬‬ ‫‪end‬‬

‫‪Appendices‬‬ ‫‪295‬‬ ‫‪[email protected]‬‬
‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪position‬‬
‫خاصية تحدد موضع سطر الثجمة أفقيا من منتصفه بالنسبة لعرض ‪ width‬ملف‬
‫الفيديو‪ ،‬وتقبل قيمتها عىل هيئة نسبة مئوية من بداية عرض أو ‪ width‬ملف الفيديو (من‬
‫ً‬
‫الحد األيش) فتكون مثال‪ 25% :‬أو ‪ 50%‬أو ‪. 75%‬‬
‫)‪WEBVTT – cue settings(position‬‬

‫‪00:00:01.000 --> 00:00:04.000 position:25%‬‬

‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪25%‬‬ ‫‪75%‬‬

‫‪line‬‬
‫خاصية تحدد موضع سطر الثجمة من منتصفه رأسيا بالنسبة الرتفاع ملف الفيديو ‪،‬‬
‫وتقبل قيمتها عىل هيئة نسبة مئوية من بداية ارتفاع ‪ height‬ملف الفيديو (من الحد العلوي)‬
‫ً‬
‫فتكون مثال‪ 10% :‬أو ‪ 60%‬أو ‪. 80%‬‬
‫)‪WEBVTT – cue settings(line‬‬

‫‪00:00:01.000 --> 00:00:04.000 line:10%‬‬

‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪Appendices‬‬ ‫‪296‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫‪10%‬‬ ‫‪80%‬‬

‫‪size‬‬
‫(األفق) كنسبة مئوية من عرض ملف‬
‫ي‬ ‫خاصية تحدد الحجم الذي سيشغله سطر الثجمة‬
‫ً‬
‫الفيديو فتكون مثال‪ 15% :‬أو ‪ 25%‬أو ‪. 50%‬‬
‫)‪WEBVTT – cue settings(size‬‬

‫‪00:00:01.000 --> 00:00:04.000 size:15%‬‬

‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪15%‬‬ ‫‪25%‬‬ ‫‪50%‬‬

‫‪Appendices‬‬ ‫‪297‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬

‫الحظ أن نسبة عرض أو ‪ size‬نص الثجمة يف الشكل السابق‪ ،‬ليست متناسبة مع‬ ‫ل‬

‫ألنن قمت بقص بعض األجزاء الزائدة من صورة الفيديو‪،‬‬ ‫عرض ‪ width‬ملف الفيديو ‪ ،‬ي‬
‫لوضع الصور الثالث بجانب بعضها لسهولة المقارنة بينها‪.‬‬

‫مثال عىل تطبيق ر‬

‫أكث من خاصية عىل سطر الثجمة‪:‬‬
‫‪WEBVTT – cue settings‬‬

‫‪00:00:01.000 --> 00:00:04.000 size:25% line:10% align:start‬‬

‫مثىل‬
‫هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬
‫الحظ أنه يتم الفصل ربي كل‬
‫والن تليها بمسافة واحدة‬
‫ي‬ ‫خاصية‬
‫فارغة عىل األقل‪ ،‬كما يجب أن تالحظ‬
‫أنه ال يمكن الفصل ربي الخاصية‬
‫وقيمتها بأي مسافة فارغة‪ ،‬وإال فلن‬
‫تعمل الخاصية بالشكل المطلوب‪.‬‬

‫استخدام عناص ‪ html‬لتنسيق سطر الثجمة‪:‬‬

‫معي من عناص ‪ ، html‬للتحكم يف تنسيق‬
‫وسم عنرص ر‬
‫ي‬ ‫يمكننا وضع سطر الثجمة ربي‬
‫وسم العنرص <‪ >b‬لنحصل‬‫ي‬ ‫هذا السطر حسب نوع العنرص‪ ،‬فيمكننا وضع سطر الثجمة ربي‬
‫ً‬
‫وغثها من‬
‫وسم العنرص <‪ >i‬ليكون الخط مائال ر‬
‫ي‬ ‫عىل خط سميك‪ ،‬كما يمكننا وضعه ربي‬
‫عناص التحكم يف تنسيق الخط‪.‬‬
‫)‪WEBVTT – cue settings(html elements‬‬

‫‪00:00:01.000 --> 00:00:04.000‬‬

‫مثىل>‪<b><i‬‬
‫>‪</i></b‬هيا بنا نلعب الكرة‪ ،‬هل تستطبع أن تلعب ي‬

‫‪Appendices‬‬ ‫‪298‬‬ ‫‪[email protected]‬‬

‫منث‬
‫وائل ر‬ ‫المرجع الكامل يف ‪HTML5‬‬ ‫مالحق إضافية‬
‫الحظ أن سطر الثجمة ظهر‬
‫وسم‬
‫ي‬ ‫بخط سميك لوجوده ربي‬
‫العنرص <‪ >b‬كما أنه ظهر بخط مائل‬
‫وسم العنرص <‪.>i‬‬
‫ي‬ ‫لوجوده ربي‬

‫الن تتحكم يف سلوك سطر‬

‫الكثث من الخصائص ي‬
‫ر‬ ‫عندما تدرس ‪ css‬قريبا‪ ،‬سوف تتعلم‬
‫وغثها من الخصائص‪.‬‬‫الثجمة‪ ،‬مثل لونه ولون الخلفية ر‬

‫تم بحمد هللا وتوفيقه‬

‫الي ـ ـ ــوم‪ :‬السابع من صفر سنة ‪ 1443‬ه‬

‫الموافق‪ :‬الرابع ر‬
‫عش من سبتمث سنة ‪ 2021‬م‬

‫‪Appendices‬‬ ‫‪299‬‬ ‫‪[email protected]‬‬