شرح الوسم <tr> في HTML
تعريف الوسم <tr>
نستخدم الوسم <tr> لإضافة سطر في الجدول.
ملاحظة: السطر لا يظهر أي خطوط حوله إلا إن قمت بتعديل تصميمه بواسطة CSS.
دعم المتصفحات للوسم <tr>
الجدول التالي يظهر المتصفحات التي تدعم الوسم <tr>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
خصائص الوسم <tr>
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدام الوسم <tr>
في المثال التالي قمنا بإنشاء جدول يتألف من 3 أسطر و كل سطر فيه 3 خانات.
مثال
<table> <!-- هنا قمنا بتعريف السطر الأول في الجدول و بداخله وضعنا 3 خانات عبارة عن عناوين --> <tr> <th>ID</th> <th>User</th> <th>Phone</th> </tr> <!-- هنا قمنا بتعريف السطر الثاني في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>1</td> <td>mhamad</td> <td>70123456</td> </tr> <!-- هنا قمنا بتعريف السطر الثالث في الجدول و بداخله وضعنا 3 خانات عادية --> <tr> <td>2</td> <td>mira</td> <td>03102013</td> </tr> </table>
التصميم الإفتراضي للوسم <tr>
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
نصائح و ملاحظات
في العادة نقوم بتحسين تصميم الأسطر بواسطة CSS لتظهر بالشكل الذي نريده بدل الإعتماد على التصميم الإفتراضي لها لأنه غير مفيد.
كما أننا قد نقوم بتجميع الأسطر بداخل الوسم <thead> و <tbody> و <tfoot> للتحكم بتصميمهم بشكل أدق.
في المثال التالي قمنا بتغيير لون خلفية الأسطر المفردة إلى رمادي و الأسطر المزدوجة إلى أبيض.
مثال
tr:nth-child(odd) {
background-color: #f1f1f1;
}
tr:nth-child(even) {
background-color: #fff;
}
شرح الوسم <textarea> في HTML
تعريف الوسم <textarea>
نستخدم الوسم <textarea> على النحو التالي لإضافة مربع نص متعدد الأسطر في الصفحة.
<label id="textarea-id">text<label> <textarea id="textarea-id"></textarea>
مكان الكلمة
textarea-idنضعidالوسم<textarea>.مكان الكلمة
textنضع عنوان للوسم<textarea>للإشارة إلى ما هو الهدف منه.
دعم المتصفحات للوسم <textarea>
الجدول التالي يظهر المتصفحات التي تدعم الوسم <textarea>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
خصائص الوسم <textarea>
الخاصية autofocus
يمكن إضافتها للوسم لإعلام المتصفح أنه عند فتح الصفحة سيتم إعتبار أن المستخدم يقف عنده.
ملاحظة: لا يجب وضع هذه الخاصية لأكثر من وسم في نفس الصفحة لأنه لا يمكن الوقوف عند أكثر من وسم في وقت واحد.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 4 | 10 | مدعوم | مدعوم | مدعوم | 4 | ؟ | ؟ | مدعوم |
الخاصية cols
يمكن إضافتها للوسم لتحديد عدد الأحرف القصوى التي يمكن أن تظهر في كل سطر.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأحرف القصوى التي نريدها أن تظهر في كل سطر مع الإشارة إلى أنه إفتراضياً عدد الأحرف القصوى في كل سطر هو 20.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية disabled
يمكن إضافتها للوسم لجعله غير مفعل مما يعني أنه سيظهر في الصفحة و لكن لن يكون بإمكان المستخدم النقر عليه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية form
يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
يجب وضع id النموذج الذي يتبع له كقيمة للخاصية.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية maxlength
يمكن إضافتها للوسم لتحديد أكبر عدد أحرف يمكن إدخالها فيه.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأحرف القصوى التي نريد جعل المستخدم قادر على إدخالها مع الإشارة إلى أنه إفتراضياً يمكنه إدخال ما شاء فيه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 4 | 12 | 4 | ≤12.1 | 5 | ≤37 | 18 | 4 | ≤12.1 | 5 | 1.0 |
الخاصية minlength
يمكن إضافتها للوسم لتحديد أدنى عدد أحرف يجب إدخالها فيه.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأحرف الأدنى التي نريد جعل المستخدم مجبر على أن لا يدخل أقل منها مع الإشارة إلى أنه إفتراضياً يمكنه عدم إدخال أي حرف إن شاء ذلك.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 40 | 17 | 51 | 27 | 10.1 | 40 | 40 | 51 | 27 | 10.3 | 4.0 |
الخاصية name
يجب إضافتها للوسم بهدف إعطائه إسم حتى يتم إرسال الإسم و القيمة المختارة فيه مع البيانات التي يتم إرسالها في النموذج.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية placeholder
يمكن إضافتها للوسم لإظهار نص مساعد بداخل الوسم حين يكون فارغاً.
يجب تمرير النص الذي سيظهر في حال كان فارغاً كقيمة لها.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 4 | 12 | 4 | ≤12.1 | 5 | ≤37 | 18 | 4 | ≤12.1 | 5 | 1.0 |
الخاصية readonly
يمكن إضافتها للوسم لجعل قيمته غير قابلة للتغيير.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية required
يمكن إضافتها له لإجبار المستخدم على اختيار قيمة عنصر غير فارغ (أي يظهر عليه نص) حتى يتمكن من النقر على زر الإرسال الموضوع في النموذج.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 4 | 12 | 4 | ≤12.1 | 5 | ≤37 | 18 | 4 | ≤12.1 | 5 | 1.0 |
الخاصية rows
يمكن إضافتها للوسم لتحديد عدد الأسطر التي يمكن يسعها, أي كأننا نحدد طوله في الصفحة نسبةً لعدد الأسطر التي يمكن أن تظهر فيه.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأسطر القصوى التي نريدها أن تظهر فيه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 1 | 12 | 1 | ≤12.1 | ≤4 | 1 | 18 | 4 | ≤12.1 | ≤3 | 1.0 |
الخاصية spellcheck
يمكن إضافتها للوسم لتحديد ما إن كان يجب التأكد من عدم وجود أخطاء إملائية في النص الذي يتم إدخاله أم لا.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية spellcheck لتحديد كيف سيتم التعامل مع النص الذي يتم إدخاله في الوسم.
| القيمة | معناها |
|---|---|
true |
لجعل المتصفح يتأكد من صحة النص الذي يتم إدخاله. |
default |
هذه القيمة الإقتراضية و هي تعني المتصفح يختار إن كان سيتأكد من صحة النص الذي يتم إدخاله أم لا يفعل نسبةً للوضع الإفتراضي الموضوع في المتصفح. |
false |
لجعل المتصفح لا يتأكد من صحة النص الذي يتم إدخاله. |
الخاصية wrap
يمكن إضافتها للوسم لتحديد ما إن كان سيتم إرسال النص الذي يتم إدخاله فيه كما يظهر بالضبط فيه أم أنه سيتم إرساله و كأنه مكتوب على سطر واحد.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية wrap لتحديد كيف سيتم إرسال النص الذي يتم إدخاله في الوسم.
| القيمة | معناها |
|---|---|
hard |
لجعل المتصفح يرسل النص المدخل في الوسم تماماً كما يراه المستخدم. هذه القيمة تعتمد بشكل أساسي على عدد الأحرف القصوى التي يمكن إدخالها في كل سطر و التي يتم تحديدها بواسطة الخاصية cols. |
soft |
لجعل المتصفح يرسل النس المدخل في الوسم كسطر واحد فقط مع الحفظا على المسافات الفارغة بين الكلمات. |
إستخدام الوسم <textarea>
في المثال التالي قمنا بإضافة مربع نص متعدد الأسطر بواسطة الوسم <textarea> مع وضع قيمة أولية فيه.
المثال الأول
<label for="biography">Biography</label><br> <textarea name="biography" id="biography">Harmash.com is published in 2014.</textarea>
في المثال التالي قمنا بإضافة مربع نص متعدد الأسطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر بواسطة الخاصية cols و عدد الأسطر الإفتراضية التي ستظهر فيه بواسطة الخاصية rows.
المثال الثاني
<label for="biography">Biography</label><br> <textarea name="biography" id="biography" cols="40" rows="4">Harmash.com is published in 2014.</textarea>
في المثال التالي قمنا بإضافة الخاصية readonly لمربع النص المتعدد الأسطر لجعل قيمته قابلة للقراءة فقط.
المثال الثالث
<label for="biography">Biography</label><br> <textarea name="biography" id="biography" cols="40" rows="4" readonly>Harmash.com is published in 2014.</textarea>
في المثال التالي قمنا بإضافة الخاصية readonly لمربع نص المتعدد الأسطر لجعله غير مفعّل, أي لا يمكن تغيير قيمته أو نسخها.
المثال الرابع
<label for="biography">Biography</label><br> <textarea name="biography" id="biography" cols="40" rows="4" disabled>Harmash.com is published in 2014.</textarea>
في المثال التالي قمنا بإضافة الخاصية wrap="hard" لمربع نص المتعدد الأسطر لجعل النص المدخل فيه يتم إرساله كما هو للموقع.
ملاحظة: الموقع الذي يعرض ما يتم إرساله يجب أن يعرضه بداخل <pre> حتى يظهر كما هو.
المثال الخامس
<label for="biography">Biography</label><br> <textarea name="biography" id="biography" cols="40" rows="4" wrap="hard">Harmash.com is published in 2014.</textarea>
التصميم الإفتراضي للوسم <textarea>
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
إفتراضياً يستطيع المستخدم النقر على زاوية الوسم <textarea> السفلية و سحبها لتكبيره أو تصغيره.
الآن يمكنك منع المستخدم من إمكانية تكبير و تصغير حجمه بواسطة CSS كالتالي.
مثال
textarea {
resize: none;
}
شرح الوسم <figure> في HTML
تعريف الوسم <figure>
نستخدم الوسم <figure> على هذا النحو <figure> </figure> لتخصيص مكان في الصفحة بهدف عرض صورة, كود أو رسم بداخله.
بداخل هذا الوسم يمكن إضافة الوسم <figcaption> لعرض وصف للشيء المعروض فيه و هذا الأمر يمكن فعله بشكل إختياري.
دعم المتصفحات للوسم <figure>
الجدول التالي يظهر المتصفحات التي تدعم الوسم <figure>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 8 | 12 | 4 | 11 | 5.1 | مدعوم | مدعوم | 4 | 11 | 5.1 | مدعوم |
خصائص الوسم <figure>
الوسم <figure> لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدام الوسم <figure>
في المثال التالي قمنا بعرض صورة و وصف خاص بها بداخل وسم <figure>.
المثال الأول
<figure> <img src="planets.PNG"> <figcaption>Fig 1 - The solar system.</figcaption> </figure>
في المثال التالي قمنا بتحسين ظهور الصورة و الوصف الخاص بها بواسطة كود CSS.
المثال الثاني
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 254px;
margin: auto;
}
img {
max-width: 254px;
height: auto;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 6px 3px;
text-align: center;
}
التصميم الإفتراضي للوسم <figure>
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
شرح الوسم <figcaption> في HTML
تعريف الوسم <figcaption>
نستخدم الوسم <figcaption> لعرض وصف للشيء الموضوع بداخل الوسم <figure> على النحو التالي.
<figure> <img src="example.png"> <figcaption>text</figcaption> </figure>
مكان الكلمة text نمرر النص الذي سيتم عرضه كوصف لهذا الشيء.
دعم المتصفحات للوسم <figcaption>
الجدول التالي يظهر المتصفحات التي تدعم الوسم <figcaption>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 8 | 12 | 4 | 11 | 5.1 | مدعوم | مدعوم | 4 | 11 | 5.1 | مدعوم |
خصائص الوسم <figcaption>
الوسم figcaption لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدام الوسم <figcaption>
في المثال التالي استخدمنا الوسم figcaption بإضافة صورة و وصف خاص بها.
المثال الأول
<figure> <img src="planets.PNG"> <figcaption>Fig 1 - The solar system.</figcaption> </figure>
في المثال التالي قمنا بتحسين ظهور الصورة و الوصف الخاص بها بواسطة كود CSS.
المثال الثاني
figure {
border: thin #c0c0c0 solid;
display: flex;
flex-flow: column;
padding: 5px;
max-width: 254px;
margin: auto;
}
img {
max-width: 254px;
height: auto;
}
figcaption {
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 6px 3px;
text-align: center;
}
التصميم الإفتراضي للوسم <figcaption>
بشكل عام جميع المتصفحات تعرض الوسم figcaption بالتنسيق التالي.
figcaption {
display: block;
}
نصائح و ملاحظات
يمكنك وضع وصف الشيء الموضوع فوقه أو تحته على حسب تصميمك و يمكنك تعديل طريقة ظهورهم بواسطة CSS ليظهروا بالشكل الذي تريده.