HTML Link Types
أنواع الروابط في لغة HTML
في هذا الدرس ستتعلم كيفية استخدام <a> في HTML لإنشاء روابط متنوعة تشمل: [bookmarks] للانتقال السريع داخل الصفحة، خاصية [download] لتنزيل الملفات، و [accesskey] لتسهيل الوصول عبر لوحة المفاتيح.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Link Types
أنواع الروابط في لغة HTML
</>
Creating Bookmark Anchors In HTML
انشاء رابط كعلامة مرجعية في لغة HTML
تُعتبر الروابط المرجعية bookmark links في لغة HTML عناصر مهمة تسهل التنقل في المحتوى الطويل والمعقد. تُنشأ هذه الروابط من خلال استخدام السمة [id] في عنصر [<a>] لتحديد القسم المراد الذهاب إليه، ثم الربط بين الأقسام باستخدام وسم ["a href="#id name].
هذه الروابط تمكن المستخدم من الانتقال مباشرة إلى الأجزاء المطلوبة دون الحاجة للتنقل عبر الصفحة بأكملها باستخدام الماوس أو الأسهم، مما يحسن من تجربة المستخدم ويوفر الوقت، خاصة في المقالات والصفحات التعليمية الطويلة. تُستخدم هذه الخاصية بشكل فعّال لإنشاء فهرس يسهل الوصول إلى الأقسام المختلفة في الصفحات ذات المحتوى الكثيف.
لإنشاء علامات مرجعية bookmark، يتم اتباع خطوتين:
1. إضافة معرف id خاص بالقسم المراد الذهاب إليه ["id="id name].
2. إنشاء رابط يربط إلى ذلك القسم باستخدام ["a href="#id name].
Add an Id Attribute to the Desired Section
الخطوة الأولى: إضافة معرف للعنصر أو القسم المحدد لتمكين الوصول المباشر إليه. يتم ذلك من خلال استخدام السمة [id] مع العنصر المراد الانتقال إليه.
<h2 id="js"> JavaScript </h2>
<p>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.</p>
Create a Link and Add It to the Section
الخطوة الثانية: إنشاء رابط واستخدام خاصية [href] لإضافة علامة الشباك [#] متبوعةً بمعرف القسم [id] المراد الوصول إليه.
<h2 id="js"> JavaScript </h2>
ملاحظات
</>
Creating Download Links In HTML
إنشاء روابط تحميل في لغة HTML
روابط التحميل في HTML تُستخدم للسماح للمستخدمين بتنزيل الملفات مباشرة من موقع الويب إلى أجهزتهم. يمكن أن تحتوي هذه الروابط على ملفات بأي صيغة، مثل: [pdf] أو [zip] أو [rar] أو [doc]، ويتم إضافتها باستخدام وسم الرابط [<a>] مع السمة [href] للإشارة إلى مسار الملف الذي يمكن تنزيله.
بالإضافة إلى ذلك، يمكن استخدام السمة [download] لتوجيه المتصفح لتحميل الملف مباشرة بدلاً من عرضه، مما يساعد في فرض التحميل.
كما يمكن تحديد قيمة لهذه السمة ["download="value] لتحديد اسم جديد للملف قبل تحميله، ولكن هذا الأمر اختياري. إذا لم تُحدد اسمًا، فسيتم تحميل الملف باسمه الأصلي الموجود على الخادم.
Creating Download Links
يمكنك إضافة رابط تحميل من جهازك المحلي، أو من خادم خارجي كما يتضح في المثال التالي.
<a href="https://www.closetag.com/files/test.zip">Download Zip file</a> <a href="https://www.closetag.com/files/masters.pdf">Download PDF file</a>
Using [download] Attribute to Specify Filename and Download Directly
عند نقر المستخدم على الرابط، سيتم تحميل الملف من [https://www.closetag.com/files/masters.pdf] ويُحفظ باسم [Master_Document.pdf].
<a href="https://www.closetag.com/files/masters.pdf" download="Master_Document.pdf">Download PDF file</a>
Local Download Links in HTML
إنشاء روابط تحميل للملفات المخزنة محليًا ضمن الموقع، كما يتضح في المثال التالي.
<a href="files/test.zip" download="Local_Test.zip">Download Local Zip file</a> <a href="files/masters.pdf" download>Download Local PDF file</a>
ملاحظة هامة
عند إنشاء روابط تحميل للملفات المحلية في HTML، تأكد من أن الملف المراد تحميله موجود في نفس مجلد المشروع أو الصفحة التي تصممها. مثل [files/test.zip] يعني أن الملف [test.zip] يجب أن يكون موجودًا داخل مجلد يسمى [files] في نفس مكان ملفات المشروع. وهذا يضمن أن الرابط يعمل بشكل صحيح ويسمح للمستخدمين بتنزيل الملفات دون أي مشاكل. وتأكد دائمًا من صحة مسارات الملفات لتجنب الأخطاء.
</>
Accesskey Attribute In HTML
طريقة إضافة اختصار من لوحة المفاتيح لروابط HTML
تُعَدّ خاصية [accesskey] في HTML واحدة من الأدوات المهمة التي تُستخدم لتسهيل الوصول إلى عناصر صفحات الويب. تُتيح هذه الخاصية تحديد مفاتيح اختصار على لوحة المفاتيح للعناصر مثل الروابط أو الأزرار بدلاً من النقر عليه بزر الماوس، مما يسهل على المستخدمين التنقل بسرعة، خاصة للمستخدمين الذين يعتمدون على لوحة المفاتيح لأغراض الوصول.
يمكن تطبيق [accesskey] من خلال إضافة الخاصية إلى العنصر مثل [<a>]، ويمكن أن تكون القيمة حرفًا أو رقمًا. مثلاً، لتشغيل رابط معين في متصفح كروم على نظام ويندوز، يمكن استخدام [Alt + accesskey]. ومن المهم مراعاة توافق المفاتيح المختارة مع أنظمة التشغيل والمتصفحات المختلفة.
في هذا الجدول، سنتعرف على اختصارات الوصول السريعة المستخدمة لفتح الروابط في المتصفحات المختلفة لأنظمة التشغيل، ويندوز ولينكس وماك.
N/A: تعني [Not Applicable] أو [Not Available]. في الجدول، تشير إلى أن المتصفح غير متاح أو لا يعمل على نظام التشغيل المحدد. على سبيل المثال، [Internet Explorer] لا يعمل على لينكس أو ماك لأنه خاص بنظام ويندوز فقط، لذلك تظهر [N/A] في خانات لينكس وماك.
| Browser | Windows | Linux | Mac |
| Chrome | [alt] + accesskey | [alt] + accesskey | [control] + [alt] + accesskey |
| Edge | [alt] + accesskey | N/A | [control] + [alt] + accesskey |
| Internet Explorer | [alt] + accesskey | N/A | N/A |
| Firefox | [alt] + [shift] + accesskey | [alt] + [shift] + accesskey | [control] + [alt] + accesskey |
| Safari | N/A | N/A | [control] + [alt] + accesskey |
| Opera 15+ | [alt] + accesskey | [alt] + accesskey | [control] + [alt] + accesskey |
Accesskey Attribute Syntax
طريقة كتابة خاصية accesskey داخل عنصر <a> في لغة HTML.
<a href="value" accesskey="character" >text</a>key
Accesskey Attribute
طريقة إضافة اختصار من لوحة المفاتيح للروابط في لغة HTML، عن طريق إضافة خاصية accesskey attribute لرابط العنصر <a>.
<a href="https://www.closetag.com/tutorial/html/" accesskey="h">HTML tutorial</a><br> <a href="https://www.closetag.com/tutorial/css/" accesskey="c">CSS tutorial</a>
توضيح هام
- خاصية [accesskey] في HTML ليست مفتاحًا فعليًا على لوحة المفاتيح، وإنما هي اختصار برمجي يسمح بالوصول السريع إلى عناصر محددة مثل الروابط والأزرار في صفحة الويب باستخدام تركيبات مفاتيح تختلف حسب المتصفح ونظام التشغيل.
- ينبغي استخدام [accesskey] بحذر لضمان توافق مفاتيح الاختصار مع أنظمة ومتصفحات المستخدمين المختلفة، ولتجنب التعارض والمشكلات. يُنصح دائمًا بإجراء اختبارات شاملة لضمان حصول جميع المستخدمين على تجربة مرضية.
- تأكد من أن الصفحة مفعلة أو في حالة التركيز لاستخدام الخاصية بفعالية [مثل الضغط بالماوس في الصفحة لتنشيطها].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
