الكورس

Advertisements

HTML Quotations | In Arabic


HTML Quotations – فى هذا الفصل هنتعرف على كيفية تضمين النصوص المٌقتبسة فى صفحات الويب بإستخدام عناصر الاقتباس في HTML.


 

HTML Quotations

 

تُستخدم عناصر الاقتباس في HTML لإدراج نصوص مقتبسة في صفحة ويب ، أي جزء من النصوص يختلف عن النصوص العادية في صفحة الويب.

 

عناصر الاقتباس في HTML

 

العناصر التى تُستخدم فى تضمين الاقتباسات:

  1. <blockquote>
  2. <q>
  3. <cite>
  4. <abbr>
  5. <address>
  6. <bdo>

 

1. <blockquote>

 

يحدد العنصر <blockquote> نص مٌقتبس من مصدر آخر. يمكنك بسهولة تنسيق الاقتباس باستخدامه.

عادةً ما تقوم المتصفحات بوضع مسافة بادئة لعناصر <blockquote>، كالتالى:

<p>Read this quotation:</p>
<blockquote>
   Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, 
   and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.
</blockquote>

Read this quotation:

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

يتم عرض علامات الاقتباس بشكل عام مع margin على اليسار واليمين، بالإضافة إلى مساحة إضافية صغيرة مضافة فى الأعلى والأسفل.


 

2. <q>

 

يحدد العنصر <q> اقتباسًا قصيرًا (ويسمى short inline quotations).

تقوم المستعرضات عادةً بإدراج علامات الاقتباس/التنصيص حول الاقتباس. كالتالى:

<p>This is a <q>short inline</q> quotation Example!</p>
<p><q>First, solve the problem. Then, write the code.</q> -John Johnson</p>

This is a short inline quotation Example!

First, solve the problem. Then, write the code. -John Johnson


Advertisements

 

3. <cite>

 

يشير العنصر <cite> إلى اقتباس أو عنوان عمل، على سبيل المثال: كتاب أو مقال أو قصيدة أو فيلم، ..إلخ.

عادةً ما يتم عرض النص الموجود في العنصر <cite> بخط مائل (يمكنك تجاوز هذا النمط الإفتراضى باستخدام CSS). كالتالى:

<p><cite>Clean code</cite> the best book for every programmer!</p>

Clean code the best book for every programmer!

اسم الشخص ليس عنوانًا للعمل، وبالتالي يجب عدم استخدام العنصر لتمييز أسماء الأشخاص.

 

السمة cite

 

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

<p><q cite="https://dzone.com/articles/best-programming-jokes-amp-quotes">First, solve the problem. Then, write the code.</q> -John Johnson</p>

First, solve the problem. Then, write the code. -John Johnson


Advertisements

 

4. <abbr>

 

يحدد العنصر <abbr> (إختصار لـ abbreviation) شكلًا مختصرًا لكلمة أو عبارة طويلة، مثل “WWW” و “CSS” و “HTML” و “SSL“، ..إلخ. كالتالى:

<p>The <abbr title="World Wide Web">WWW</abbr> commonly known as the Web, 
is an information system where documents and other web resources are identified by Uniform Resource Locators.</p>

The WWW commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators.

يتم استخدام سمة title داخل وسم <abbr> لتوفير التوسيع الكامل للاختصار ، الذي يتم عرضه بواسطة المتصفحات على شكل تلميح عند تمرير مؤشر الماوس فوق العنصر.


 

5. <address>

 

يحدد العنصر <address> معلومات الاتصال لمؤلف، او لمالك موقع الويب.

يتم إستخدام هذا العنصر لتعريف تفاصيل الاتصال لمؤلف أو مالك المستند، يمكن تكون هذه المعلومات عبارة عن (عنوان بريد إلكترونى – عنوان فعلي (إسم البلد / رقم الشارع والمنزل …إلخ) – عنوان URL – رقم الهاتف، …إلخ). بحيث يمكن للقارئ استخدام هذه التفاصيل للاتصال بمالك المستند، وتعرض معظم المتصفحات العنوان بخط مائل. كالتالى:

<address>
  Email: [email protected]<br>
  Address: Egypt, street number<br>
  Written by: Hamed Essam!
</address>
Email: [email protected]
Address: Egypt, street number
Written by: Hamed Essam!
غالبًا ما يظهر العنصر <address> في بداية المستند أو نهايته.

 

6. <bdo> 

 

يُستخدم الوسم <bdo> (اختصار لـ Bi-Directional Override ) لتجاوز اتجاه النص الحالي.

يتجاوز عنصر <bdo> الاتجاه الحالي للنص ، بحيث يتم تقديم النص داخل اتجاه مختلف. كالتالى:

<p>This text will start from left to right.</p>
<p><bdo dir="rtl">This text will start from right to left.</bdo></p>
<p>سيبدأ هذا النص من اليمين إلى اليسار.</p>
<p><bdo dir="ltr">سيبدأ هذا النص من اليسار إلى اليمين.</bdo></p>

This text will start from left to right.

This text will start from right to left.

سيبدأ هذا النص من اليمين إلى اليسار.

سيبدأ هذا النص من اليسار إلى اليمين.

يجب عليك تحديد سمة dir على هذا العنصر.

هذا العنصر مهم جدا عندما تقوم بإنشاء موقع متعدد اللغات ، يقوم هذا العنصر بتعديل إتجاه النص حسب اللغة ويقوم بحل مشاكل كثيرة جدا.


 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Quotation” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements