الاقتباسات في HTML

في HTML، يمكنك استخدام الاقتباسات لتمييز النصوص المقتبسة من مصادر خارجية أو للتأكيد على أجزاء معينة من النص. هناك نوعان رئيسيان من الاقتباسات في HTML:

• الاقتباس القصير (<q>): يستخدم لتمييز اقتباس قصير داخل فقرة.
• الاقتباس الطويل (<blockquote>): يستخدم لتمييز اقتباس طويل يتم عرضه على شكل فقرة مستقلة.

كيفية استخدام <q> للاقتباسات القصيرة

العنصر <q> يُستخدم لإدراج اقتباس قصير ضمن نص آخر. يقوم المتصفح بإضافة علامات الاقتباس تلقائيًا حول النص المحدد. إليك مثالًا بسيطًا:

النص: <p>يقول أينشتاين: <q>الخيال أهم من المعرفة</q>.</p>

الناتج:

يقول أينشتاين: الخيال أهم من المعرفة.

كيفية استخدام <blockquote> للاقتباسات الطويلة

العنصر <blockquote> يُستخدم لإدراج اقتباسات طويلة قد تحتاج إلى فقرة منفصلة. يمكن أيضًا إضافة مصدر الاقتباس باستخدام السمة cite. إليك مثالًا:

النص: <blockquote cite="https://www.example.com">الكثير من الأمور الجميلة في الحياة تأتي من المثابرة والعمل الدؤوب.</blockquote>

الناتج:

الكثير من الأمور الجميلة في الحياة تأتي من المثابرة والعمل الدؤوب.

ملاحظة: استخدام السمة cite ليس إلزاميًا، لكنه يضيف مصداقية للمحتوى المقتبس.

مقارنة بين <q> و <blockquote>

الفرق	<q>	<blockquote>
الاستخدام	للاقتباسات القصيرة داخل النص	للاقتباسات الطويلة بشكل فقرة مستقلة
إضافة علامات الاقتباس	يتم إضافتها تلقائيًا بواسطة المتصفح	يجب إضافتها يدويًا إذا رغبت بذلك
السمة cite	غير مدعوم	مدعوم لإضافة مصدر الاقتباس

استخدامات متقدمة لـ <blockquote>

يمكنك تنسيق الاقتباسات الطويلة باستخدام CSS لجعلها أكثر جاذبية بصريًا. على سبيل المثال، يمكنك إضافة حدود، خلفيات، أو تغيير الخط.

النص:
blockquote {
  border-left: 5px solid #ccc;
  padding-left: 10px;
  color: #555;
  font-style: italic;
}

تحذير: تجنب استخدام الاقتباسات بشكل مفرط في محتوى الصفحة حيث يمكن أن يؤثر ذلك سلبًا على تجربة المستخدم.

1. استخدام <abbr> للاختصارات

العنصر <abbr> يُستخدم لتعريف الاختصارات أو الاختصارات المختصرة. عند وضع المؤشر فوق النص المختصر، يظهر النص الكامل.

النص: <p>نستخدم <abbr title="Hypertext Markup Language">HTML</abbr> لبناء صفحات الويب.</p>

الناتج:

نستخدم HTML لبناء صفحات الويب.

2. استخدام <address> لعرض العناوين

العنصر <address> يُستخدم لتحديد معلومات الاتصال، مثل العناوين البريدية أو الإلكترونية.

النص: <address>123 شارع التقنية، مدينة الويب، بلد التطوير</address>

الناتج:

123 شارع التقنية، مدينة الويب، بلد التطوير

3. استخدام <cite> لاقتباس عناوين الكتب والمقالات

العنصر <cite> يُستخدم لتحديد عنوان مصدر مثل كتاب، مقال، أو عمل فني.

النص: <p>كتاب <cite>فن البرمجة</cite> يعتبر مرجعًا هامًا للمطورين.</p>

الناتج:

كتاب فن البرمجة يعتبر مرجعًا هامًا للمطورين.

4. استخدام <bdo> لتغيير اتجاه النص

العنصر <bdo> يُستخدم لتغيير اتجاه النص. هذا مفيد عند التعامل مع لغات من اليمين إلى اليسار (مثل العربية).

النص: <bdo dir="rtl">HTML هي لغة البرمجة المفضلة لدي</bdo>

الناتج:

HTML هي لغة البرمجة المفضلة لدي

تحذير: استخدم <bdo> بحذر، حيث يمكن أن يغير ترتيب النص بشكل كبير.

تلخيص الدرس

لقد تعرفنا في هذا الدرس على كيفية استخدام أربعة من العناصر المهمة في HTML:

• <abbr>: لتعريف الاختصارات وتوضيح معانيها عند مرور المؤشر فوقها.
• <address>: لتحديد معلومات الاتصال بشكل قياسي.
• <cite>: لاقتباس عناوين الكتب والمقالات والمصادر الأخرى.
• <bdo>: لتغيير اتجاه النص، وهو مفيد للغات من اليمين إلى اليسار.

من المهم استخدام هذه العناصر بشكل صحيح لتعزيز تجربة المستخدم وإبراز المحتوى بطريقة واضحة ومرتبة.

تعديل المقال