يعد زر الرجوع جزءا مهما من واجهة المستخدم التي تتيح للمستخدمين العودة إلى الصفحة السابقة أو إلى الخطوة السابقة في التنقل. يحتاج مطورو الويب إلى معرفة كيفية إنشاء زر رجوع في هتمل لضمان سهولة استخدام موقع الويب أو تطبيق الويب الخاص بهم.
. يرشد هذا الرمز المتصفح لتشغيل الأمر" رجوع " في محفوظات الاستعراض.
. لذلك ، للحصول على حل أكثر موثوقية ، يوصى باستخدام معالج جافا سكريبت لحدث النقر على الزر.
لإنشاء زر الرجوع باستخدام جافا سكريبت انقر فوق معالج الأحداث ، يمكنك استخدام التعليمات البرمجية التالية:
العودة
سيؤدي هذا الرمز إلى إنشاء زر رجوع يقوم بتنفيذ الأمر الخلفي في محفوظات الاستعراض عند النقر عليه.
- كيفية إنشاء زر الرجوع في هتمل: طريقة سهلة لمطوري الويب
- الخطوة 1: استخدام العلامة
- الخطوة 2: إضافة سمة هريف
- الخطوة 3: تخصيص مظهر الزر
- سؤال وجواب
- كيف يمكنني إنشاء زر الرجوع في أتش تي أم أل?
- هل هناك أي طرق أخرى لإنشاء زر الرجوع?
- كيف يمكنني إظهار النص أو الرمز على زر الرجوع?
- هل من الممكن أن أسلوب الزر مرة أخرى?
- هل من الممكن إنشاء زر الرجوع باستخدام الأطر أو المكتبات?
كيفية إنشاء زر الرجوع في هتمل: طريقة سهلة لمطوري الويب
غالبا ما يحتاج مطورو الويب إلى إضافة زر رجوع إلى صفحات الويب الخاصة بهم حتى يتمكن المستخدمون من العودة بسهولة إلى الصفحة السابقة. في هتمل ، هناك طريقة سهلة لإنشاء مثل هذا الزر باستخدام رابط و " التاريخ.عودة () " الملكية.
دعونا نرى مثالا:
- إنشاء زر باستخدام علامة " أ "وتعيينه السمة" هريف "مع قيمة" جافا سكريبت:التاريخ.عودة ()".
- أضف نص الزر بين علامتي الفتح والإغلاق "أ". على سبيل المثال ، العودة.
وهنا ما رمز سوف تبدو:
| العودة |
ضع هذا الرمز على صفحة الويب الخاصة بك حيث تريد وضع زر الرجوع. عندما ينقر المستخدم على الزر ، سيعود إلى الصفحة السابقة في سجل المتصفح.
يرجى ملاحظة أن زر الرجوع لن يعمل إلا إذا كان لدى المستخدم سجل تصفح. إذا كان المستخدم قد فتح للتو صفحة الويب الخاصة بك ، فقد يكون زر الرجوع غير نشط.
الخطوة 1: باستخدام العلامة
الخطوة الأولى لإنشاء زر الرجوع في هتمل هي استخدام العلامة (مرساة). تستخدم هذه العلامة لإنشاء روابط لصفحات أو أقسام أخرى داخل الصفحة الحالية.
لإنشاء زر الرجوع ، سوف نستخدم السمة هريف من العلامة لتحديد عنوان ورل أو مسار الصفحة للذهاب إلى عند النقر على الزر.
نموذج التعليمات البرمجية:
العودة
في هذا المثال ، استخدمنا قيمة السمة هريف كما جافا سكريبت: التاريخ.العودة (). هذا هو رمز جافا سكريبت الذي يستدعي وظيفة السجل.العودة () للذهاب إلى الصفحة السابقة في تاريخ المتصفح.
يمكنك أيضا استخدام رابط نسبي أو مطلق لتحديد صفحة أو قسم معين:
العودة
الآن بعد أن عرفت كيفية استخدام العلامة لإنشاء زر الرجوع ، انتقل إلى الخطوة التالية لمعرفة كيفية تصميم هذا الزر وإضافة وظائف أخرى.
الخطوة 2: إضافة سمة هريف
بعد إنشاء الزر باستخدام العلامة في الخطوة السابقة ، تحتاج إلى إضافة سمة هريف لتحديد الرابط الذي سيتم النقر عليه عند النقر فوق الزر.
مطلوب السمة هريف للعلامة التي يتم استخدامها لإنشاء روابط. بدلا من استخدام علامة ، يمكننا استخدام العلامة لإنشاء زر باستخدام أنماط كس.
هنا هو رمز المثال حيث يتم إنشاء الزر باستخدام العلامة والسمة هريف:
- قم بإنشاء عنصر بنص يجب عرضه على الزر:
- العودة
- إضافة السمة هريف وتحديد الرابط الذي تريد التنقل عند النقر على زر:
- العودة
في المثال أعلاه ، سينقلك النقر فوق الزر" رجوع "إلى صفحة تحمل اسم "الفهرس".أتش تي أم أل". تأكد من تحديد أسماء الملفات الصحيحة والمسارات في السمة هريف.
الآن لديك زر مع السمة هريف التي تسمح لك للانتقال إلى صفحة أخرى عند النقر عليها. في الخطوة التالية ، سنضيف نمطا وتصميما للزر.
الخطوة 3: تخصيص مظهر الزر
بعد أن أنشأنا الهيكل الأساسي للزر الخلفي ، يمكننا البدء في تخصيص مظهره باستخدام كس.
هناك العديد من الطرق لتغيير مظهر الزر ، ولكن أحد أبسطها وأكثرها شيوعا هو إضافة أنماط باستخدام الفئات أو المعرفات. على سبيل المثال ، يمكننا إضافة فئة "زر الرجوع" إلى زر الرجوع: رجوع
ثم ، في ملف كس لدينا ، يمكننا إنشاء قاعدة لهذه الفئة وتخصيص مظهره. على سبيل المثال:
.زر الرجوع {لون الخلفية: #4كاف 50;
اللون: أبيض;
الحشو: 10 بكسل 20 بكسل;
الحدود: لا شيء;
نصف قطر الحدود: 4 بكسل;
المؤشر: المؤشر;
}
في هذا المثال ، قمنا بتعيين اللون الأخضر لخلفية الزر ، واللون الأبيض للنص ، وإضافة هوامش 10 بكسل في الأعلى والأسفل ، بالإضافة إلى 20 بكسل على اليسار واليمين. نحن أيضا إزالة الحدود من زر وجعلها تقريب قليلا. سيتغير المؤشر إلى مؤشر عند التمرير فوق الزر.
لا تتردد في تجربة مع خصائص كس مختلفة لتحقيق مظهر الزر المطلوب. يمكنك تغيير الخط وحجم الزر وإضافة الظلال والمزيد.
من المهم أن نتذكر أن استخدام كس يسمح لك لخلق أزرار منمنمة من شأنها أن تبدو حديثة والمهنية. ومع ذلك ، لا تنس أنه من المهم مراعاة إمكانية الوصول وسهولة الاستخدام لجميع المستخدمين.
سؤال وجواب
كيف يمكنني إنشاء زر الرجوع في أتش تي أم أل?
لإنشاء زر الرجوع في هتمل ، يمكنك استخدام علامة مع السمة هريف="#" ، الذي يشير إلى الصفحة الحالية. وبالتالي ، عند النقر فوق الزر ، سيتم تحديث الصفحة وسيعود المستخدم إلى الصفحة السابقة.
هل هناك أي طرق أخرى لإنشاء زر الرجوع?
نعم ، بالإضافة إلى استخدام علامة مع السمة هريف="# " ، يمكنك أيضا استخدام جافا سكريبت. على سبيل المثال ، يمكنك كتابة وظيفة من شأنها أن تؤدي تاريخ التحولات مرة أخرى عند الضغط على زر أو مفتاح معين.
كيف يمكنني إظهار النص أو الرمز على زر الرجوع?
لعرض النص على زر الرجوع ، يمكنك استخدام علامة بدلا من علامة. داخل العلامة ، يمكنك تحديد النص باستخدام العلامة أو استخدام سمة القيمة. لعرض رمز ، يمكنك استخدام علامة أو خصائص كس مثل صورة الخلفية.
هل من الممكن أن أسلوب الزر مرة أخرى?
نعم ، يمكن تصميم زر الرجوع باستخدام كس. يمكنك تعيين خصائص مثل لون الخلفية ولون الخط وحجم الخط والهوامش وخصائص أخرى لإنشاء مظهر الزر المطلوب.
هل من الممكن إنشاء زر الرجوع باستخدام الأطر أو المكتبات?
نعم ، هناك العديد من الأطر والمكتبات التي تبسط إنشاء زر الرجوع والتصميم. على سبيل المثال ، يمكنك استخدام أطر التمهيد أو مكتبات كس مثل الخط رهيبة لإضافة الرموز إلى زر العودة.