عناصر الاقتباس HTML Quotation and Citation Elements

-

بنتعلم في هذا الدرس شو هي عناصر الاقتباس Quotation في HTML التي تستخدم لإدراج نصوص مقتبسه من مواقع الأنترنت، وبالتالي يجب ن يكون هذا النص مختلف عن غيره من النصوص واهم هذه tag element التي تستخدم :

<blockquote>,<q>, <abbr>, <address>, <cite>, <bdo>

تمام نطبق امثله على كل نوع حتي فهم المطلوب

<blockquote>

في هاذ element يتم تحديد جزء مقتبس من مكان آخر، وعادتا ما يتم وضع مسافه بادئة ل

<blockquote> elements

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

مثال :

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First blockquote</title>
</head>
<body> 
<!DOCTYPE html>
<html>
<body>
     اقتباس من 
<p><blockquote cite="www.blockquote.com">أن تنظر للمستقبل بأمل، خير لك من أن تنظر للماضي بالندم
  </blockquote></p>
</body>
</html>
</body>
</html>

شغل الصفحة وشوف النتيجة:

<q>

تستخدم لعرض اقتباس صغير، تقوم المتصفحات عادتا بإدراج علامة quotation marks حول النص المقتبس 
مثال :

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First blockquote</title>
</head>
<body> 
<!DOCTYPE html>
<html>
<body>
     اقتباس من 
<p><q>أن تنظر للمستقبل بأمل، خير لك من أن تنظر للماضي بالندم
  </q></p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة :
<abbr>

تستخدم مع الاختصارات abbreviation او acronym مثل "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM"
حيث يمكن ان توفر هذه الاختصارات معلومات مفيدة للمتصفحات browsers ومحركات البحث search-engines
طبق المثال التالي في صفحة HTML 

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First blockquote</title>
</head>
<body> 
<!DOCTYPE html>
<html>
<body>
    <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body>
</html>
</body>
</html>
وشوف النتيجة :

طبقنا اقتباس من موقع منظمة الصحة العالمية وعرضنا عنوان الموقع عند تحريك mouse فوقها.

<address>
تحدد علامة
HTML <address>
لعرض معلومات الاتصال لمؤلف / مالك المستند أو المقالة.
يمكن أن تكون معلومات الاتصال عبارة عن عنوان بريد إلكتروني ، وعنوان URL ، وعنوان فعلي ، ورقم هاتف ، وما إلى ذلك. عادةً ما يتم عرض النص الموجود في element <address> بخط مائل ، وستضيف المتصفحات دائمًا فاصل أسطر قبل وبعد عنصر <address>.
طبق المثال التالي في صفحة HTML 

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First blockquote</title>
</head>
<body> 
<!DOCTYPE html>
<html>
<body>
    <p>Devkum WebSite</p>
    <address>
        Written by Devkum team.<br> 
        Visit us at:<br>
        Devkum.com<br>
        Jordan<br>
        Jordan
        </address>
</body>
</html>
</body>
</html>
والنتيجة بتكون:
<cite>

تستخدم مع الاعمال الإبداعية  creative work مثل (كتاب book، قصيدة poem، أغنية song، فيلم movie، لوحة painting، تمثال sculpture، إلخ).
ملاحظة: اسم الشخص ليس عنوان العمل.
ويتم عادتا عرض النص هنا بشكل مائل:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First blockquote</title>
</head>
<body> 
<!DOCTYPE html>
<html>
<body>
    <p>bell art</p>
    <img src="bellAlert.gif" width="50" height="50" alt="bell art">
    <p><cite>Bell art</cite> by bel art. created in 1950.</p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة :
<bdo>

BDO تعني تجاوز ثنائي الاتجاه.

تُستخدم علامة <bdo>  لعمل override على اتجاه النص الحالي، يعني ممكن عكس اتجاه النص ويتطلب استخدام ميزة RTL او LTR 
طبق المثال التالي :

<!DOCTYPE html>
<html lang="en">
<head>
<title>My First blockquote</title>
</head>
<body> 
<!DOCTYPE html>
<html>
<body>
    <p>أن تنظر للمستقبل بأمل، خير لك من أن تنظر للماضي بالندم<br></p>
 
    <!--Inside <bdo> tag-->
     
<p><bdo dir="ltr">أن تنظر للمستقبل بأمل، خير لك من أن تنظر للماضي بالندم</bdo></p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة: