تكوين عناصر صفحة الويب باستخدام هتمل يمكن أن تكون بسيطة جدا وفعالة. أحد العناصر الشائعة لصفحة الويب هو الزر الذي يمكنه تنفيذ إجراءات مختلفة عند النقر عليه. في هذه المقالة ، سننظر في كيفية إضافة زر" قراءة المزيد " باستخدام هتمل.
لإنشاء زر" قراءة المزيد " ، سنحتاج إلى عنصر الزر وسمة النقر ، والتي تحدد الإجراء الذي يتم تنفيذه عند النقر فوق الزر. على سبيل المثال ، يمكننا استخدام جافا سكريبت لإخراج نص إضافي أو فتح صفحة جديدة.
من المهم ملاحظة أنه يمكن تزيين الزر باستخدام كس لجعله يبدو أكثر جاذبية ويتناسب مع تصميم صفحة الويب الخاصة بك. هنا سوف نركز فقط على إضافة زر باستخدام هتمل.
- إنشاء عنصر زر
- ضبط النص على الزر
- تعيين رابط إلى زر
- تطبيق الأنماط على زر
- وضع زر على صفحة ويب
- وضع زر داخل المحتوى
- إضافة معالج حدث عند النقر على زر
- سؤال وجواب
- كيف يمكنني إضافة زر" قراءة المزيد " على صفحة ويب?
- ماذا يجب أن يكون نص زر "قراءة المزيد"?
- هل من الممكن أن أسلوب" اقرأ المزيد " زر في أتش تي أم أل?
إنشاء عنصر زر
إنشاء عنصر زر على صفحة ويب باستخدام هتمل بسيط للغاية. للقيام بذلك ، يمكنك استخدام العلامة أو عن طريق تعيين سمة النوع="زر" إليها.
مثال على استخدام علامة :
- افتح العلامة.
- داخل العلامة ، أضف النص الذي سيتم عرضه على الزر. على سبيل المثال: ادفعني!.
- أغلق العلامة.
مثال على استخدام علامة :
- افتح العلامة.
- اضبط سمة النوع بالقيمة "زر". على سبيل المثال:
يمكن استخدام كلا خياري إنشاء الأزرار على صفحة موقع الويب لأداء وظائف مختلفة مثل إرسال نموذج وتنفيذ البرامج النصية والمزيد.
ضبط النص على الزر
لإضافة زر إلى صفحة ويب باستخدام هتمل ، يمكنك استخدام علامة. تنشئ هذه العلامة زرا تفاعليا يمكن للمستخدم النقر فوقه.
لتعيين النص على الزر ، تحتاج إلى إضافة نص بين علامتي الفتح والإغلاق. على سبيل المثال ، لتعيين النص "قراءة المزيد" على الزر ، يمكنك استخدام الكود التالي:
إقرأ المزيد
عندما يتم عرض الصفحة في المتصفح ، سيبدو الزر كما يلي:
إقرأ المزيد
يمكنك أيضا إضافة أنماط للزر باستخدام سمات العلامة. على سبيل المثال ، يمكنك تعيين لون خلفية الزر ولون النص وحجم الخط وخصائص أخرى:
إقرأ المزيد
ونتيجة لذلك ، فإن زر تبدو شيئا من هذا القبيل:
إقرأ المزيد
تعيين رابط إلى زر
يعد الزر" قراءة المزيد " عنصرا مهما في تصميم صفحة الويب. يسمح للمستخدم بعرض المعلومات التفصيلية بسهولة ويسر أو الانتقال إلى صفحات أخرى من الموقع. لتعيين ارتباط إلى زر ، يمكنك استخدام علامة تحدد الارتباط التشعبي.
لإضافة الزر "قراءة المزيد" وتعيين رابط ، يمكنك استخدام الكود التالي:
- قم بإنشاء عنصر وحدد سمة هريف ، التي تحتوي على عنوان الصفحة المراد التنقل إليها عند النقر فوق الزر. على سبيل المثال:
إقرأ المزيد
- ضع النص" اقرأ المزيد " بين علامتي الفتح والإغلاق للعنصر. على سبيل المثال:
إقرأ المزيد
- إضافة أنماط وتصميم زر باستخدام العلامات أو ، فضلا عن استخدام المغلق. على سبيل المثال:
إقرأ المزيد
وبالتالي ، عند النقر على زر" قراءة المزيد " ، سيتم إعادة توجيه المستخدم إلى الصفحة المحددة في سمة هريف. بفضل هذه الطريقة البسيطة ، يمكنك إضافة زر "قراءة المزيد" وإنشاء تنقل مناسب على صفحة الويب.
تطبيق الأنماط على زر
عند إنشاء زر" قراءة المزيد " على صفحة ويب باستخدام هتمل ، يمكنك تطبيق أنماط مختلفة لتصميمه.
بادئ ذي بدء ، يمكنك إضافة فئة أو معرف إلى زر لتطبيق الأنماط فقط على هذا الزر المحدد. على سبيل المثال:
إقرأ المزيد
والآن دعنا نطبق بعض الأنماط على الزر:
}
| Применить анимацию при наведении на кнопку: |
.اقرأ المزيد {
- }
Ячейка 3