في هذا الدرس 7تصفّح المواضيع
إلى جانب النصوص والفقرات العامة، تتطلب صفحات الويب التعليمية والتوثيقات البرمجية وسوماً دلالية متخصصة لنوعين رئيسيين من البيانات: عناصر الاقتباس والتوثيق (لإسناد العبارات ونقل النصوص وحفظ حقوق المراجع)، وعناصر الشفرات التقنية (لتمثيل الأكواد البرمجية وأزرار لوحة المفاتيح ومخرجات الأنظمة).
ويحقق الاعتماد على هذه العناصر المتخصصة فوائد معمارية بالغة: فمحركات البحث تستطيع تتبع الاقتباسات وربطها بروابط مصادرها الموثوقة، وقارئات الشاشة تميز المصطلحات البرمجية عن اللغة البشرية العادية، والمطورون ينشئون مكتبات توثيق هندسية متماسكة دون عناء.
<!-- Quotation from authoritative specification -->
<blockquote cite="https://html.spec.whatwg.org/">
<p>HTML is the standard markup language for the web.</p>
</blockquote>
<!-- Technical computing reference -->
<p>To inspect elements, run <code>console.log()</code>.</p>يمثل الوسم الكتلي <blockquote> حاوية مخصصة للاقتباسات الطويلة المنقولة عن مصدر خارجي أو خطابات رسمية. ويعرضه المتصفح تلقائياً بإزاحة أفقية مريحة (هامش افتراضي بنحو 40 بكسل على الجانبين) لتمييزه بصرياً عن بقية المقال.
وتعد الميزة التقنية الأبرز لهذا الوسم خاصية cite؛ وهي خاصية تقبل رابط URL يقود مباشرة إلى المصدر الأصلي للاقتباس على الشبكة. ونظراً لأن قيمة هذه الخاصية مخصصة لمحركات البحث وخوارزميات التحليل ولا تظهر على الشاشة، يحرص المطور على كتابة اسم المرجع في سطر مرئي أسفل الاقتباس.
<blockquote cite="https://www.w3.org/Consortium/mission">
<p>
The social value of the Web is that it
enables human communication, commerce, and knowledge.
</p>
</blockquote>
<p>— <cite>W3C Mission Statement</cite></p>حين تحتاج إلى تضمين عبارة مقتبسة وجيزة أو جملة قصيرة وسط سياق الفقرة المستمر دون كسر السطر، استخدم الوسم السطري <q>. وعلى العكس من <blockquote>، لا ينشئ هذا الوسم أسطر جديدة أو هوامش كتلية.
وتتمثل الميزة الذكية للوسم <q> في أن المتصفح يضيف علامات التنصيص تلقائياً حول النص المقتبس وفق اللغة المحددة للمستند (مثل علامات التنصيص الإنجليزية “ ” أو الأقواس الزهرية العربية « »). لذا يُحظر كتابة علامات تنصيص يدوية داخل الوسم حتى لا تظهر علامات تنصيص مزدوجة مكررة للمستخدم.
<p>
Tim Berners-Lee famously stated that
<q cite="https://w3.org">this is for everyone</q>
during the opening ceremony.
</p>يمثل الوسم <cite> عنوان عمل إبداعي أو مؤلف علمي أو مرجع موثق. ويشمل ذلك أسماء الكتب، والأوراق البحثية، والمقالات، والقصائد، والأفلام، والمواقع المرجعية المعتمدة. ويعرضه المتصفح افتراضياً بنمط خط مائل دلالي.
وقد أوضحت مواصفة W3C صراحةً أن وسم <cite> مخصص لـ اسم العمل أو الكتاب حصراً، وليس لاسم الشخص المؤلف؛ فكتابة <cite>مقدمة ابن خلدون</cite> صائبة تماماً، بينما كتابة اسم المؤلف المجرد داخل <cite> تُعد مخالفة دلالية للمعايير القياسية.
<p>
For detailed networking principles, consult
<cite>Computer Networks</cite> by Tanenbaum.
</p>تعج هندسة الويب الحديثة بالاختصارات التقنية المركبة: مثل HTML و CSS و DOM و API. وهنا يبرز دور الوسم <abbr> لتمثيل الاختصار، مع إمكانية تزويده بالتفسير الكامل للاختصار عبر خاصية title.
وتعرض المتصفحات وسم <abbr> بخط منقط خفيف أسفل الكلمة مع إظهار نافذة تلميح (Tooltip) تشرح المعنى عند تمرير مؤشر الفأرة. ولضمان سهولة الوصول لمستخدمي الهواتف الذكية، تنص أفضل الممارسات على كتابة الاسم الكامل للاختصار عند وروده للمرة الأولى في سياق المقال بجانب الوسم.
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr>
publishes international technical standards for
<abbr title="HyperText Markup Language">HTML</abbr>.
</p>يمثل الوسم <code> مقطعاً من كود برمجي، أو أمر طرفية، أو اسم متغير، أو استدعاء دالة، أو وسم هيكلي. وتُعرض النصوص داخله بخط أحادي المسافة (Monospaced) يميزها بوضوح عن النص الإنشائي العادي.
وعند الرغبة في عرض كتلة برمجية متعددة الأسطر، يُدمج الوسمان معاً بصيغة <pre><code>...</code></pre>. وتذكر دائماً أن الأقواس الزاوية داخل كود HTML يجب تحويلها إلى رموز الهروب < و > لمنع المتصفح من تفسيرها كوسوم حية وتنفيذها بالخطأ.
يوضح الجدول المرجعي التالي الدور الدلالي والنمط الافتراضي لعناصر الحوسبة التقنية الثلاثة:
| العنصر | الفئة الدلالية في المعايير | المحتوى النموذجي | نوع الخط الافتراضي |
|---|---|---|---|
<code> | شفرة ومفردات برمجية | أسماء الدوال والمتغيرات والوسوم | خط أحادي المسافة Monospace |
<kbd> | مدخلات المستخدم واللوحة | اختصارات المفاتيح ونقرات الإدخال | خط أحادي المسافة Monospace |
<samp> | مخرجات شاشة الأوامر | سجلات الطرفية ورسائل الخادم | خط أحادي المسافة Monospace |
<p>
Use the <code>fetch()</code> API to load remote JSON.
Always inspect the <code>status</code> property.
</p>يكتمل الثلاثي التقني في معايير HTML5 بعنصرين متقدمين لا غنى عنهما في الشروح التقنية:
- الوسم
<kbd>(مدخلات المستخدم): يمثل المدخلات التي يقوم بها الإنسان، وخاصة اختصارات لوحة المفاتيح مثل<kbd>Ctrl</kbd> + <kbd>S</kbd>، وكذلك نقرات الفأرة والأوامر الصوتية. ويمكن تنسيقه بسهولة عبرCSSليبدو كأزرار لوحة مفاتيح حقيقية مجسمة. - الوسم
<samp>(مخرجات النظام): يمثل مخرجات برمجية أو استجابة شاشة الطرفية أو رسائل أخطاء النظام (مثل رسائل أخطاء الاتصال أو تأكيدات نجاح التثبيت).
<p>To exit the program, press <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>
<p>The terminal will output:</p>
<samp>Process terminated with code 0.</samp>ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس صياغة الاقتباسات الكتلية عبر <blockquote> والسطرية عبر <q>; وتوثيق المراجع عبر <cite>; وشرح الاختصارات عبر <abbr>; وتمييز الأكواد عبر <code> وأزرار اللوحة عبر <kbd> ومخرجات النظام عبر <samp>. الخطوة التالية: انتقل الآن إلى الفصل الخامس عشر لدراسة «الروابط في لغة HTML» وبنية الوسم a والخصائص والروابط المطلقة والنسبية ومعايير الوصول.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Blockquote اقتباس كتلي
- عنصر كتلي في HTML يُستخدم لإدراج اقتباس مطول منقول عن مصدر خارجي مع إمكانية ربطه بعنوان المصدر عبر خاصية cite.
- للمراجعة
- 02 Work Citation توثيق المرجع
- التمثيل الدلالي لعنوان عمل إبداعي أو مؤلف علمي منشور باستخدام الوسم cite.
- للمراجعة
- 03 Keyboard Input Element عنصر مدخلات لوحة المفاتيح
- الوسم kbd الذي يمثل الأزرار والاختصارات والمدخلات التي يضغطها المستخدم في الشروحات التقنية.
- للمراجعة
- 04 Sample Output Element عنصر مخرجات النظام
- الوسم samp المخصص لتمثيل مخرجات عينة من برنامج حاسوبي أو استجابة سطر الأوامر في شاشة الطرفية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CLI CLI
- Command Line Interface
- واجهة سطر الأوامر النصية المستخدمة لتنفيذ التعليمات البرمجية والتحكم في النظام.
- للمراجعة
- 02 POSIX POSIX
- Portable Operating System Interface
- عائلة المعايير القياسية المحددة لضمان التوافق بين أنظمة التشغيل المختلفة.
- للمراجعة
- 03 GUI GUI
- Graphical User Interface
- واجهة المستخدم الرسومية التي تعتمد على النوافذ والأيقونات المرئية بدلاً من الأوامر النصية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
صمم اقتباساً علمياً كبلياً باستخدام blockquote مع رابط المصدر في خاصية cite وتوثيق اسم الكتاب عبر وسم cite.
-
أنشئ دليلاً تدريبياً يشرح أمراً برمجياً باستخدام code وزر لوحة مفاتيح باستخدام kbd ومخرجات شاشة الأوامر باستخدام samp.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.