رموز الأسهم في HTML
يا هلا بالمهندسين! لما تحتاج تضيف سهم في صفحتك الـ HTML، سواء كان للإشارة لاتجاه معين، زر "رجوع"، أو أيقونة بسيطة، فيه طرق كثير تقدر تستخدمها. الموضوع أبسط مما تتخيل، وراح نمر عليها سوا.
1. استخدام كيانات HTML (HTML Entities)
هذي أسهل وأكثر الطرق شيوعاً. فيه كيانات جاهزة للأسهم اللي نستخدمها كثير، وهي سهلة التذكر والقراءة.
- السهم لليسار:
←(←) - السهم لليمين:
→(→) - السهم للأعلى:
↑(↑) - السهم للأسفل:
↓(↓) - السهم المزدوج لليسار:
⇐(⇐) - السهم المزدوج لليمين:
⇒(⇒)
مثال على الاستخدام:
<p>اضغط هنا للرجوع: ← الصفحة السابقة</p>
<p>انتقل للتالي: الصفحة التالية →</p>
<p>للأعلى: ↑</p>
<p>للأسفل: ↓</p>2. استخدام الكيانات الرقمية (Numeric Entities)
إذا ما لقيت كيان HTML مباشر، أو تبغى تستخدم سهم معين له كود يونيكود، تقدر تستخدم الكيانات الرقمية. فيه نوعين: عشري (Decimal) وسداسي عشري (Hexadecimal).
العشري (Decimal)
يبدأ بـ &# ويتبعه الرقم العشري المقابل لرمز اليونيكود.
- مثال: سهم لليسار
←(←) - مثال: سهم لليمين
→(→)
السداسي عشري (Hexadecimal)
يبدأ بـ &#x ويتبعه الرقم السداسي عشري. هذي الطريقة شائعة لما تتعامل مع رموز اليونيكود مباشرة، وهي اللي غالبًا تشوفها في وثائق اليونيكود.
- مثال: سهم لليسار
←(←) - مثال: سهم لليمين
→(→) - مثال: سهم سميك لليمين
➡(➡)
مثال على الاستخدام:
<p>سهم لليسار (عشري): ←</p>
<p>سهم لليمين (سداسي عشري): →</p>
<p>سهم سميك لليمين: ➡</p>ملاحظة: تقدر تلقى قائمة كاملة لرموز الأسهم وأكوادها (سواء عشرية أو سداسية عشرية) في جداول رموز اليونيكود (Unicode Character Tables) لما تبحث عنها أونلاين.
3. استخدام رموز اليونيكود مباشرة (Direct Unicode Characters)
في بعض الحالات، خاصة لما تكون ملفاتك مشفرة بـ UTF-8 (وهو الغالب حالياً)، تقدر تحط رمز السهم مباشرة في الكود بدون استخدام كيانات.
<p>رجوع ←</p>
<p>التالي →</p>
<p>أعلى ↑</p>ملاحظة مهمة: تأكد إن صفحتك فيها
<meta charset="UTF-8">في قسم الـ<head>عشان تضمن إن كل الرموز تظهر صحيحة على كل المتصفحات والأجهزة.
4. استخدام CSS (لتحكم أكبر)
إذا تبغى تتحكم بشكل السهم وحجمه ولونه وموقعه بدقة أكبر، ممكن تستخدم CSS مع الـ ::before أو ::after لإضافة الرمز. هذي الطريقة تعطيك مرونة عالية في التنسيق.
مثال CSS:
.next-button::after {
content: '\2192'; /* كود سداسي عشري للسهم لليمين */
margin-left: 5px;
color: #007bff;
font-size: 1.2em;
/* تقدر تضيف أي تنسيقات ثانية هنا */
}مثال HTML:
<button class="next-button">التالي</button>وبكذا تكون عرفت أغلب الطرق لإضافة رموز الأسهم في HTML. اختر الطريقة اللي تناسب احتياجك، لكن غالباً كيانات HTML أو الكيانات الرقمية هي الأسهل والأسرع للتطبيقات البسيطة. بالتوفيق!