❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <q>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <q> على هذا النحو <q>text</q> لعرض النص المقتبس بين " ".

مكان الكلمة text نضع النص الذي نريد عرضه كنص مقتبس.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <q>.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

الخاصية cite

يمكن إضافتها له لذكر المصدر الذي تم نسخ الإقتباس منه. الرابط الذي نضعه في هذه الخاصية لا يظهر في الصفحة بشكل مباشر و لكنه مفيد في حال كان المستخدم يعتمد على قارئ الشاشة ( Screen Reader ) لكي يقرأ له محتوى الصفحة و عندها يخبره بالمصدر الذي تم منه أخذ الإقتباس.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بعرض النص المقتبس بداخل الوسم <q> حتى يتم عرضه بين " ".

المثال الأول

My teacher said: <q>HTML is not a programming language</q>
جرب الكود

في المثال التالي قمنا بذكر المصدر الذي تم جلب الإقتباس منه بواسطة الخاصية cite.

المثال الثاني

HTML is abbrevation for <q cite="https://harmash.com/tutorials/html">Hyper Text Markup language</q>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

q {
    display: inline;
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

نصائح و ملاحظات

إستخدم الوسم <q> في حال أردت عرض نص مقتبس بداخل فقرة عادية.
و إستخدم الوسم <blockquote> في حال أردت عرض نص مقتبس على سطر منفرد يحيطه هامش من كل الجهات.