عناصر الاقتباس والاستشهاد في اتش تي ام ال HTML Quotation and Citation Elements
HTML Quotation and Citation Elements
مقدمة: درس عن عناصر HTML للنصوص والاقتباسات
في عالم تطوير الويب، تعتبر النصوص أحد العناصر الأساسية التي تشكل هيكل ومحتوى الصفحات الإلكترونية. لتعزيز هذا الأساس، يقدم هذا الدرس استكشافًا لبعض عناصر HTML المهمة المخصصة للنصوص والاقتباسات.
سنتعرف في هذا الدرس على كيفية استخدام عناصر مثل <blockquote> و <q> لتحديد وتمييز المقتبسات، بالإضافة إلى <cite> لتحديد مصدر الاقتباس. سنتناول أيضًا
<abbr> الذي يُستخدم لتحديد الاختصارات و <bdo> لتغيير اتجاه النص بشكل مخصص.
من خلال أمثلة عملية وتفصيل شرح خطوة بخطوة، سنتعلم كيفية تنسيق النصوص بشكل فعال وكيفية استخدام هذه العناصر بشكل صحيح لتحسين تجربة المستخدم على صفحات الويب.
سنتابع معا لاستكشاف الأساسيات
وفهم السياق الذي يحيط بكل عنصر وكيف يمكن دمجها بشكل متقن في تطوير الويب.
لدينا في HTML عدة عناصر تستخدم لهذا الغرض، وسأشرح بعضها مع الأمثلة.
<blockquote> (بلوك كوت):
يُستخدم لتحديد مقتطف نص من مصدر آخر.
يجب أن يحتوي على عنصر فرعي <p> لتحديد النص المقتبس.
مثال
<blockquote> <p>هذا نص اقتبسته من مصدر آخر.</p> </blockquote>
<q> (كوت):
يستخدم لتحديد نص قصير يتم اقتباسه من مصدر آخر.
غالبًا ما يتم عرض النص داخل علامات اقتباس تلقائيًا.
مثال
<p>قال <q>هذا نص اقتبسه</q>.</p>
<cite> (سايت):
يُستخدم لتحديد مصدر الاقتباس.
مثال:
<p>هذا نص اقتبسه من <cite>مصدر الاقتباس</cite>.</p>
<abbr> (أببر):
يُستخدم لتحديد اختصار، ويمكن أن يكون ضمن عناصر الاقتباس.
<p>قال <q><abbr title="World Health Organization">WHO</abbr></q>.</p>
<cite> (سايت) داخل <blockquote>:
يُستخدم لتحديد مصدر الاقتباس داخل عنصر <blockquote>.
<blockquote> <p>هذا نص اقتبسه من مصدر آخر. <cite>اسم المصدر</cite></p> </blockquote>
هذه أمثلة بسيطة على كيفية استخدام هذه العناصر في HTML لتنظيم وتوضيح الاقتباسات والاستشهادات في صفحات الويب.
مثال شامل مع الشرح خطوة بخطوة عن:<blockquote> (بلوك كوت):
إليك مثال شامل يستخدم عنصر <blockquote> في HTML مع شرح خطوة بخطوة:
الشيفرة البرمجية:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر Blockquote في HTML</title> </head> <body> <h1>استخدام عنصر Blockquote في HTML</h1> <p>النص العادي هنا يصف سياق الصفحة.</p> <blockquote> <p>الحقيقة لا تتغير بناءً على آراء الناس أو مشاعرهم. الحقيقة هي الحقيقة، وليست أمرًا قابلًا للتفاوض.</p> </blockquote> <p>النص العادي يمكن أن يتابع بعد الاقتباس.</p> </body> </html>
الشرح خطوة بخطوة:
- <blockquote>: يتم استخدام هذا العنصر لتحديد مقتطف من النص الذي يأتي من مصدر آخر.
- <p> داخل <blockquote>: يتم استخدام عنصر <p> لتحديد النص الذي يتم اقتباسه. هنا، يتم وضع النص داخل <p> داخل <blockquote>.
- النص العادي قبل وبعد <blockquote>: يمكن وضع أي نص آخر بين عناصر HTML العادية، وسيتم عرضها كجزء من الصفحة.
مثال شامل مع الشرح عن:<q> (كوت):
إليك مثال شامل يستخدم عنصر <q> في HTML مع شرح خطوة بخطوة:
الشيفرة البرمجية:
<!DOCTYPE html> <html lang="ar" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر Q في HTML</title> </head> <body> <h1>استخدام عنصر Q في HTML</h1> <p>النص العادي هنا يصف سياق الصفحة.</p> <p> قال صلى الله عليه وسلم <q>انما الاعمال بالنيات وانما لكل امريء ما نوى.</q></p> <p>هدي نبوي يؤكد ان اعمالنا مرهونة بنياتنا </p> </body> </html>
شرح خطوة بخطوة:
- <q>: يُستخدم هذا العنصر لتحديد نص قصير يتم اقتباسه من مصدر آخر.
- النص العادي قبل <q> وبعد <q>: يمكن وضع <q> داخل أي عنصر نصي في HTML. في هذا المثال، تم وضع <q> داخل عنصر <p> ليظهر النص العادي قبل وبعد الاقتباس.
- علامات الاقتباس التلقائية: يلاحظ أن النص داخل <q> يُعرض بين علامتي اقتباس تلقائيًا، مما يسهل على المتصفح تحديد الجزء المقتبس من النص.
مثال شامل مع الشرح عن:<cite> (سايت):
مثال شامل يستخدم عنصر <cite> في HTML مع شرح خطوة بخطوة:
الشيفرة البرمجية:
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر Cite في HTML</title> </head> <body> <h1>استخدام عنصر Cite في HTML</h1> <p>النص العادي هنا يصف سياق الصفحة.</p> <blockquote> <p>الحقيقة لا تتغير بناءً على آراء الناس أو مشاعرهم. الحقيقة هي الحقيقة، وليست أمرًا قابلًا للتفاوض. <cite>غاندي</cite></p> </blockquote> <p>النص العادي يمكن أن يتابع بعد الاقتباس.</p> </body> </html>
شرح خطوة بخطوة:
- <cite>: يُستخدم هذا العنصر لتحديد مصدر الاقتباس. في هذا المثال، يتم استخدام <cite> للإشارة إلى اسم المؤلف (غاندي).
- <blockquote> و<p> داخل <blockquote>: تم استخدام <blockquote> لتحديد مقتطف من النص، وداخله تم استخدام <p> لتحديد النص الذي يتم اقتباسه،
بالإضافة إلى <cite> لتحديد مصدر الاقتباس. - النص العادي قبل وبعد <blockquote>: يمكن وضع أي نص آخر بين عناصر HTML العادية، وسيتم عرضها كجزء من الصفحة.
مثال شامل مع الشرح عن :<abbr> (أببر):
إليك مثال شامل يستخدم عنصر <abbr> في HTML مع شرح خطوة بخطوة:
الشيفرة البرمجية:
<!DOCTYPE html> <html lang="ar" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر Abbr في HTML</title> </head> <body> <h1>استخدام عنصر Abbr في HTML</h1> <p>النص العادي هنا يصف سياق الصفحة.</p> <p>قال <q><abbr title="World Health Organization">WHO</abbr></q> إن الصحة هي حق أساسي لكل إنسان.</p> <p>النص العادي يمكن أن يتابع بعد الاقتباس.</p> </body> </html>
شرح خطوة بخطوة:
- <abbr>: يُستخدم هذا العنصر لتحديد اختصار، ويمكن أيضًا إضافة الخاصية title لتوفير توضيح عند تحويل المؤشر إليه.
- title=”World Health Organization”: في هذا المثال، تم استخدام title لتوضيح أن الاختصار “WHO” يرمز إلى “World Health
Organization”. - <q> مع <abbr>: يمكن تضمين <abbr> داخل عناصر أخرى مثل <q> لتحديد اقتباس يحتوي على اختصار.
- النص العادي قبل وبعد <q> و <abbr>: يمكن وضع أي نص آخر بين عناصر HTML العادية، وسيتم عرضها كجزء من الصفحة.
مثال شامل مع الشرح عن <cite> (سايت) داخل <blockquote>:
بالطبع، إليك مثال شامل يستخدم عنصر <cite> داخل <blockquote> في HTML مع شرح خطوة بخطوة:
الشيفرة البرمجية:
<!DOCTYPE html> <html lang="ar" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر Cite داخل Blockquote في HTML</title> </head> <body> <h1>استخدام عنصر Cite داخل Blockquote في HTML</h1> <blockquote> <p>الحقيقة لا تتغير بناءً على آراء الناس أو مشاعرهم. الحقيقة هي الحقيقة، وليست أمرًا قابلًا للتفاوض. <cite>غاندي</cite></p> </blockquote> <p>النص العادي يمكن أن يتابع بعد الاقتباس.</p> </body> </html>
شرح خطوة بخطوة:
- <blockquote>: يتم استخدام <blockquote> لتحديد مقتطف من النص الذي يأتي من مصدر آخر.
- <p> داخل <blockquote>: يتم استخدام <p> داخل <blockquote> لتحديد النص الذي يتم اقتباسه.
- <cite> داخل <p> داخل <blockquote>: يتم استخدام <cite> لتحديد مصدر الاقتباس داخل عنصر <blockquote>.
- النص العادي بعد <blockquote>: يمكن وضع أي نص آخر بين عناصر HTML العادية، وسيتم عرضها كجزء من الصفحة.
< HTML <address مع مثال شامل
عنصر <address> في HTML يُستخدم لتحديد معلومات الاتصال للمؤلف أو المالك القانوني للصفحة أو القسم الحالي.
يمكن أن تتضمن هذه المعلومات عنوان البريد الإلكتروني، رقم الهاتف، عنوان
الشارع، أو أي معلومات أخرى.
مثال شامل مع الشرح:
<!DOCTYPE html> <html lang="ar" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر Address في HTML</title> </head> <body> <h1>تواصل معنا</h1> <address> <p>العنوان: <br> شارع السلام، المدينة، البلد</p> <p>البريد الإلكتروني: <a href="mailto:info@example.com">info@example.com</a></p> <p>رقم الهاتف: +111123456789</p> </address> <p>نص إضافي يمكن أن يتابع بعد عنصر العنوان.</p> </body> </html>
شرح:
- <address>: يتم استخدامه لتحديد معلومات الاتصال. يمكن أن يحتوي على فقرات (<p>) لتنظيم المعلومات بشكل جيد.
- <p> داخل <address>: يستخدم لوضع فقرات منفصلة لكل نوع من معلومات الاتصال (العنوان، البريد الإلكتروني، رقم الهاتف).
- <a href=”mailto:info@example.com”>: يتم استخدام <a> لإنشاء رابط بريد إلكتروني، وmailto: يشير إلى أنه سيتم فتح تطبيق البريد الإلكتروني عند
النقر على الرابط. - النص العادي بعد <address>: يمكن وضع أي نص آخر بين عناصر HTML العادية، وسيتم عرضها كجزء من الصفحة.
عنصر <HTML <bdo>
عنصر <bdo> في HTML يُستخدم لتحديد اتجاه النص (من اليمين لليسار أو من اليسار لليمين). <bdo> هو اختصار لـ
“Bi-Directional Override”، ويُستخدم
لتحديد اتجاه النص بشكل مخصص.
مثال شامل مع الشرح:
<!DOCTYPE html> <html lang="ar" dir=rtl> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مثال على عنصر BDO في HTML</title> </head> <body> <h1>تغيير اتجاه النص باستخدام BDO</h1> <p>نص عادي يظهر بشكل افتراضي.</p> <bdo dir="rtl">نص من اليمين لليسار.</bdo> <p>نص عادي يمكن أن يتابع بعد تطبيق BDO.</p> <bdo dir="ltr">Text from right to left.</bdo> <p>نص عادي يمكن أن يتابع بعد تطبيق BDO باتجاه مختلف.</p> </body> </html>
شرح:
- <bdo>: يُستخدم لتحديد اتجاه النص. يمكن أن يكون القيم المقبولة للخاصية dir هي “rtl” (من اليمين لليسار) أو “ltr” (من اليسار لليمين).
- dir=”rtl”: يُعين اتجاه النص إلى اليمين لليسار.
- dir=”ltr”: يُعين اتجاه النص إلى اليسار لليمين.
- النص العادي بعد <bdo>: يمكن وضع أي نص آخر بين عناصر HTML العادية، وسيتم عرضها كجزء من الصفحة.
اختيار عن هذا الدرس:15 سؤال مع الشرح
1. ماذا يستخدم عنصر <blockquote> في HTML للدلالة عليه؟
أ) لتحديد اختصار.
ب) لتحديد مقتطف من النص.
ج) لإنشاء رابط.
د) لتحديد اقتباس طويل.
الإجابة الصحيحة: ب) لتحديد مقتطف من النص.
الشرح: <blockquote> يستخدم لتحديد مقتطف من النص، غالبًا ما يتم اقتباسه من مصدر آخر.
2. ما الذي يعنيه عنصر <q> في HTML؟
أ) اختصار.
ب) اقتباس نصي قصير.
ج) تحديد اسم مصدر.
د) عنصر لتحديد اتجاه النص.
الإجابة الصحيحة: ب) اقتباس نصي قصير.
الشرح: <q> يستخدم لتحديد نص قصير يتم اقتباسه من مصدر آخر.
3. ماذا يُستخدم عنصر <cite> لتحديد في HTML؟
أ) اقتباس من النص.
ب) اسم مصدر الاقتباس.
ج) اختصار.
د) تحديد اتجاه النص.
الإجابة الصحيحة: ب) اسم مصدر الاقتباس.
الشرح: <cite> يستخدم لتحديد مصدر الاقتباس.
4. ماذا يفعل عنصر <abbr> في HTML؟
أ) يستخدم لتحديد اتجاه النص.
ب) يستخدم لتحديد اختصار.
ج) يستخدم لإنشاء رابط.
د) يستخدم لتحديد مصدر الاقتباس.
الإجابة الصحيحة: ب) يستخدم لتحديد اختصار.
الشرح: <abbr> يستخدم لتحديد اختصار، ويمكن أن يكون ضمن عناصر الاقتباس.
5. ماذا يعني <address> في HTML؟
أ) يستخدم لتحديد مقتطف من النص.
ب) يستخدم لتحديد اتجاه النص.
ج) يستخدم لتحديد معلومات الاتصال.
د) يستخدم لتحديد اقتباس طويل.
الإجابة الصحيحة: ج) يستخدم لتحديد معلومات الاتصال.
الشرح: <address> يستخدم لتحديد معلومات الاتصال، مثل العنوان وعنوان البريد الإلكتروني.
6. ما هو الهدف الرئيسي لعنصر <bdo> في HTML؟
أ) تحديد اقتباس من النص.
ب) تحديد اتجاه النص بشكل مخصص.
ج) تحديد مصدر الاقتباس.
د) تحديد اختصار.
الإجابة الصحيحة: ب) تحديد اتجاه النص بشكل مخصص.
الشرح: <bdo> يستخدم لتحديد اتجاه النص بشكل مخصص.
7. ما هو العنصر الذي يستخدم لإظهار العناصر النصية بخط عريض؟
أ) <strong>.
ب) <em>.
ج) <b>.
د) <i>.
الإجابة الصحيحة: ج) <b>.
الشرح: <b> يستخدم لتحديد النص بخط عريض (bold).
8. ما الذي يُستخدم عنصر <mark> للدلالة عليه في HTML؟
أ) تحديد عنصر للاقتباس.
ب) تحديد نص قصير.
ج) تحديد نص بلون مميز.
د) تحديد نص مميز أو مهم.
الإجابة الصحيحة: د) تحديد نص مميز أو مهم.
الشرح: <mark> يستخدم لتحديد نص مميز أو مهم داخل النص.
9. ما العنصر الذي يُستخدم لتحديد قائمة غير مرتبة في HTML؟
أ) <ol>.
ب) <ul>.
ج) <li>.
د) <dl>.
الإجابة الصحيحة: ب) <ul>.
الشرح: <ul> يستخدم لتحديد قائمة غير مرتبة.
10. ما هي وظيفة <ins> في HTML؟
أ) تحديد عنصر للاقتباس.
ب) تحديد نص محذوف.
ج) تحديد نص مضاف.
د) تحديد اختصار.
الإجابة الصحيحة: ج) تحديد نص مضاف.
الشرح: <ins> يستخدم لتحديد نص مضاف إلى النص الأصلي.