في هذا الدرس 3تصفّح المواضيع
تُعتبر الروابط المرجعية bookmark links في لغة HTML عناصر مهمة تسهل التنقل في المحتوى الطويل والمعقد. تُنشأ هذه الروابط من خلال استخدام السمة [id] على العنصر المقصود، مثل عنوان h2، لتحديد القسم المراد الذهاب إليه، ثم الربط بين الأقسام باستخدام وسم ["a href="#id name].
هذه الروابط تمكن المستخدم من الانتقال مباشرة إلى الأجزاء المطلوبة دون الحاجة للتنقل عبر الصفحة بأكملها باستخدام الماوس أو الأسهم، مما يحسن من تجربة المستخدم ويوفر الوقت، خاصة في المقالات والصفحات التعليمية الطويلة. تُستخدم هذه الخاصية بشكل فعّال لإنشاء فهرس يسهل الوصول إلى الأقسام المختلفة في الصفحات ذات المحتوى الكثيف.
لإنشاء علامات مرجعية bookmark، يتم اتباع خطوتين:
1. إضافة معرف id خاص بالقسم المراد الذهاب إليه ["id="id name].
2. إنشاء رابط يربط إلى ذلك القسم باستخدام ["a href="#id name].
يجب أن يكون id فريدًا في المستند وغير فارغ وبلا مسافات ASCII. استخدم اسمًا مثل section-id، ثم href="#section-id" في الرابط. يجب أن تتطابق حالة الأحرف بينهما.
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] المراد الوصول إليه.
روابط التحميل في HTML تُستخدم للسماح للمستخدمين بتنزيل الملفات مباشرة من موقع الويب إلى أجهزتهم. يمكن أن تحتوي هذه الروابط على ملفات بأي صيغة، مثل: [pdf] أو [zip] أو [rar] أو [doc]، ويتم إضافتها باستخدام وسم الرابط [<a>] مع السمة [href] للإشارة إلى مسار الملف الذي يمكن تنزيله.
بالإضافة إلى ذلك، يمكن استخدام السمة [download] لاقتراح تنزيل الملف بدل عرضه. لا تضمن السمة فرض التنزيل، وتعمل عادةً لعناوين من الأصل نفسه أو blob/data، وقد تختلف الاستجابة بحسب المتصفح وإعداداته ورؤوس الخادم.
كما يمكن تحديد قيمة لهذه السمة ["download="value] لتحديد اسم جديد للملف قبل تحميله، ولكن هذا الأمر اختياري. إذا لم تُحدد اسمًا، يستنتج المتصفح اسمًا من URL أو نوع المحتوى أو رؤوس الخادم.
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
عند نقر المستخدم على الرابط، يقترح download اسم Master_Document.pdf للملف؛ قد تتجاهل السمة إذا كان الرابط من أصل مختلف أو تقيدها إعدادات المتصفح. رأس Content-Disposition قد يعطي اسمًا له الأولوية.
<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>تُعَدّ خاصية [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 | متاح على Linux؛ راجع إعدادات الاختصار في نسختك | [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.
x هنا مثال على حرف واحد، وvalue موضع عنوان الرابط المطلوب. المفاتيح المتاحة تختلف باختلاف اللغة ولوحة المفاتيح وقد تتعارض مع أدوات الإتاحة.
<a href="value" accesskey="x">text</a>Accesskey Attribute
طريقة إضافة اختصار من لوحة المفاتيح للروابط في لغة HTML، عن طريق إضافة خاصية accesskey attribute لرابط العنصر <a>.
<a href="https://www.closetag.com/tutorials/html" accesskey="h">HTML tutorial</a><br>
<a href="https://www.closetag.com/tutorials/css" accesskey="c">CSS tutorial</a>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.