هتمل ، لغة ترميز النص التشعبي ، هي واحدة من الأدوات الرئيسية لإنشاء صفحات الويب. عند إنشاء موقع ويب ، من المهم أن تكون قادرا على إنشاء مجموعة متنوعة من العناصر ، بما في ذلك أزرار الارتباط. زر الارتباط هو عنصر تفاعلي يسمح لك بالانتقال إلى صفحة أخرى أو تنزيل ملف بالنقر فوق.
إنشاء زر الارتباط في هتمل بسيط جدا ويمكن القيام به باستخدام علامة. تحدد هذه العلامة رابطا يمكن للمستخدمين استخدامه للانتقال إلى صفحات أو ملفات أخرى.
لإنشاء زر ارتباط في هتمل ، يجب عليك استخدام السمة هريف تشير إلى عنوان الصفحة أو الملف الذي تريد التنقل. على سبيل المثال ، فإنه سيتم إنشاء رابط زر إلى موقع على شبكة الانترنت example.com .
بالإضافة إلى ذلك ، يمكنك إضافة نص لعرضه على زر الارتباط ، إذا لزم الأمر. فقط ضع النص بين علامتي الفتح والإغلاق. على سبيل المثال ، انقر هنا سيقوم بإنشاء زر ارتباط مع النص "انقر هنا".
- أساسيات إنشاء زر الارتباط في هتمل
- الخطوة 1: إنشاء ارتباط
- الخطوة 2: إضافة أنماط إلى الرابط
- الخطوة 3: إضافة عرض زر إلى الرابط
- سؤال وجواب
- ما بناء الجملة يجب أن تستخدم لإنشاء زر الارتباط في أتش تي أم أل?
- هل من الممكن إنشاء زر الارتباط دون استخدام فئة المغلق?
- كيف يمكنني فتح رابط في علامة تبويب جديدة عند النقر على زر?
- هل من الممكن أن نمط زر الارتباط باستخدام المغلق?
أساسيات إنشاء زر الارتباط في هتمل
في أتش تي أم أل ، يمكنك استخدام عنصر باستخدام السمات والأنماط لإنشاء زر ارتباط. فيما يلي الخطوات الأساسية:
- لجعل الزر يبدو وكأنه كتلة ، أضف نمط كس باستخدام سمة النمط:
نص الزر
لتصميم الزر ، يمكنك استخدام العناصر
وعناصر هتمل الأخرى ، ووضع أنماط لهم عبر كس.
نص الزر
بعد الانتهاء من الخطوات المذكورة أعلاه ، سيتم إنشاء زر الارتباط وعرضه على صفحة الويب الخاصة بك.
الخطوة 1: إنشاء ارتباط
| الرابط هو أحد العناصر الرئيسية لصفحة الويب. يسمح للمستخدم بالانتقال إلى صفحة أخرى إما داخل موقع الويب الحالي أو إلى موقع ويب آخر على الإنترنت. | لإنشاء ارتباط في هتمل ، نستخدم علامة. داخل هذه العلامة ، يمكننا وضع نص سيتم عرضه للمستخدم والذي سيكون رابطا قابلا للنقر. |
|---|---|
| مثال على رابط بسيط: | هذا هو الرابط |
| في هذا المثال ، النص "هذا ارتباط" هو ارتباط قابل للنقر يعيد توجيه المستخدم إلى العنوان المحدد "https://www.example.com ". | باستخدام سمة هريف ، نحدد الرابط حيث سيتم إعادة توجيه المستخدم بعد النقر على الرابط. يجب أن تكون قيمة سمة هريف داخل علامات الاقتباس ، كما في المثال أعلاه. |
| لاحظ أن نص الرابط مغلق داخل علامتي الفتح والإغلاق. يسمح هذا للمتصفح بعرض نص الرابط وجعله قابلا للنقر. | الخطوة 2: إضافة أنماط إلى الرابط |
| بعد أن أنشأنا الرابط ، يمكننا إضافة أنماط لجعلها تبدو أكثر جاذبية وتتناسب مع التصميم العام لصفحة الويب الخاصة بنا. | يمكن إضافة الأنماط باستخدام سمات النمط أو باستخدام ملف كس خارجي. في هذه الحالة ، سوف نستخدم سمة النمط. يوجد أدناه مثال يوضح الأنماط المختلفة التي يمكن تطبيقها على الرابط: |
| نمط | مثال |
لون النص
الرابط
تسطير
الرابط
الخط
الرابط
حجم النص
الرابط
مائل
الرابط
يمكنك دمج الأنماط عن طريق إضافة عدة سمات إلى الرابط. على سبيل المثال:
الرابط
في هذا المثال ، سيكون للرابط لون نص أزرق ، غامق ومسطر.
يمكن أيضا تطبيق الأنماط باستخدام الفئات والمعرفات. يتيح لك ذلك إعادة استخدام الأنماط على عناصر مختلفة من صفحة الويب الخاصة بك. سيتم تغطية هذا في الخطوات التالية.
الخطوة 3: إضافة عرض زر إلى الرابط
الآن بعد أن أصبح لدينا رابط ، دعنا نضيف مظهر زر إليه حتى يفهم المستخدم على الفور أنه عنصر قابل للنقر.
للقيام بذلك ، يمكننا استخدام كس (أوراق الأنماط المتتالية).
1. الصق رمز كس التالي داخل العلامة :
.زر {
عرض: مضمنة كتلة;
الحشو: 12 بكسل 24 بكسل;
حجم الخط: 16 بكسل;
وزن الخط: غامق;
زخرفة النص: لا شيء;
لون الخلفية: #4كاف 50;
اللون: أبيض;
نصف قطر الحدود: 4 بكسل;
الحدود: لا شيء;
المؤشر: المؤشر;
}
.زر: تحوم {
لون الخلفية: #45 أمبير 049;
}
2. التفاف الرابط حول العنصر مع فئة " زر " على النحو التالي:
انقر هنا
3. احفظ التغييرات وقم بتحديث الصفحة في المتصفح. الآن يجب أن يبدو الرابط الخاص بك كزر!