Articles
مقدمة إلى HTML
العلامات المتعلقة بعرض الشيفرة، الاقتباسات، والقوائم

العلامات المتعلقة بعرض الشيفرة، الاقتباسات، والقوائم

توضح هذه المقالة العلامات المتعلقة بعرض الشيفرة، الاقتباسات، والقوائم۔

يوضح هذا كيفية كتابة كود المصدر، الاقتباسات، التعليقات التوضيحية، والقوائم في HTML.۔

YouTube Video

علامات عرض التعليمات البرمجية

علامة <code>

Inline code example: let x = 10; 
1Inline code example: <code>let x = 10;</code>
  • علامة <code> هي عنصر مضمّن يُستخدم للإشارة إلى الشفرة أو مقتطفات البرامج داخل وثيقة HTML.۔
  • بالافتراضي، تُعرض بخط أحادي المسافة، مما يعزز من قراءة الشفرة.۔

علامة <pre> 

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>
  • تُستخدم علامة <pre> لعرض النص بتنسيقه الأصلي داخل مستند HTML.۔ باستخدام هذه العلامة، يتم الحفاظ على المسافات والفواصل في النص، مما يحافظ على تنسيقه الأصلي.۔ تُستخدم بشكل رئيسي لعرض المحتوى الذي يحتاج إلى الحفاظ على التنسيق، مثل الشفرة البرمجية، الشعر، أو الفن النصي.۔
    function hello() {
        console.log("Hello, world!");
    }
    
1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>
  • في علامة <pre>, يتم الحفاظ على الفراغات، لذا إذا كان هناك فراغ قبل العلامة الختامية، فسيظهر سطر فارغ في النهاية كما هو الحال في هذا المثال.۔

علامة <samp>

Sample system output: Error: Invalid input. 
1Sample system output: <samp>Error: Invalid input.</samp>
  • علامة <samp> هي علامة HTML تُستخدم لتمثيل مخرجات برنامج حاسوبي.۔ تُستخدم للإشارة إلى المخرجات أو الرسائل من برنامج أو نظام.۔

علامة <kbd>

Keyboard input example: Ctrl + C 
1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>
  • علامة <kbd> هي علامة HTML تُستخدم لتمثيل إدخال المستخدم.۔ تُستخدم للإشارة إلى إدخال لوحة المفاتيح أو إدخال الأوامر، مثل الاختصارات.۔

علامة <var>

Variable example: x = 5; 
1Variable example: <var>x</var> = 5;
  • تُستخدم علامة <var> لتمثيل المتغيرات في برنامج أو معادلة.۔ تُستخدم لتأكيد أسماء المتغيرات أو المتغيرات في الصيغ الرياضية.۔

علامات تُستخدم للاقتباسات وغيرها.

علامة <blockquote>

This is a blockquote for longer quotations. 
1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>
  • تُستخدم علامة <blockquote> لتمثيل الاقتباسات الطويلة أو النصوص من مصادر أخرى، وتُعرض عادة على مستوى الكتلة.۔

علامة <q>

This is a short quote: Short quote example. 
1This is a short quote: <q>Short quote example.</q>
  • علامة <q> هي عنصر مضمّن يُستخدم لتمثيل الاقتباسات القصيرة.۔ يمكن استخدام هذه العلامة لتحديد جزء من النص أو جملة كاقتباس.۔ النص المضمّن داخل علامة <q> يُعرض عادة بعلامات الاقتباس.۔ يمكن أيضًا تضمين علامة <q> داخل بعضها البعض.۔ في هذه الحالة، تُستخدم أنواع مختلفة من علامات الاقتباس بشكل عام للاقتباس الداخلي.۔

علامة <cite>

Reference to a book: The Great Gatsby 
1Reference to a book: <cite>The Great Gatsby</cite>
  • علامة <cite> هي عنصر مضمّن يُستخدم للإشارة إلى مصدر الاقتباس أو المرجع.۔ تُستخدم بشكل رئيسي للإشارة إلى مصدر العمل، مثل عناوين الأعمال، المقالات، الأبحاث، الصفحات الإلكترونية، أو الكتب.۔

علامة <address>

123 Main Street, Springfield, USA
1<address>123 Main Street, Springfield, USA</address>
  • تُستخدم علامة <address> لتمثيل معلومات الاتصال المتعلقة بمؤلف أو مالك وثيقة أو قسم.۔ عادةً ما تحتوي هذه العلامة على عناوين البريد الإلكتروني، أرقام الهواتف، العناوين الفعلية، ومعلومات مشابهة.۔

وسم <time> 

1<time datetime="2024-12-04">December 4, 2024</time>
  • يُستخدم وسم <time> لتمثيل نقطة زمنية معينة، أو مدة زمنية، أو وقت متكرر.۔ يمكن أن يتضمن هذا الوسم تواريخ وأوقات لتوفير معنى دلالي للمستند.۔

وسم <data>

Current Year 
1<data value="2024">Current Year</data>
  • يُستخدم وسم <data> لربط المحتوى القابل للقراءة البشرية بالقيم القابلة للتفسير بواسطة الآلة.۔ هذا الوسم مفيد لتحديد البيانات بطريقة يمكن معالجتها بسهولة بواسطة البرامج.۔

علامات <details> و <summary>

More information

Here is some additional content.

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>
  • تُنشئ العلامة <details> عنصر واجهة قابلة للطي والتوسيع.۔ باستخدامها مع العلامة <summary>، يمكنك إعداد قسم قابل للنقر لإظهار المزيد من التفاصيل، وغالبًا ما تُستخدم للعروض التفاعلية مثل 'اقرأ المزيد'.۔

العلامات المستخدمة لعرض القوائم

علامة <ul>

  • Item 1
  • Item 2
  • Item 3
1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>
  • هذه علامة تُستخدم لإنشاء قوائم غير مرتبة.۔ يتم تعريف كل عنصر في القائمة باستخدام علامة <li>.۔ افتراضيًا، يتم عرض نقطة سوداء أمام كل عنصر في القائمة.۔

علامة <ol>

  1. Step 1
  2. Step 2
  3. Step 3
1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>
  • تُستخدم هذه العلامة لإنشاء قائمة مرتبة.۔ يتم تعريف كل عنصر في القائمة باستخدام علامة <li>.۔ افتراضيًا، يتم عرض الأرقام للإشارة إلى ترتيب العناصر.۔

علامة <dl>

Term 1
Definition of Term 1
Term 2
Definition of Term 2
1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>
  • تُستخدم هذه العلامة لإنشاء قائمة من الأزواج المكونة من المصطلحات والتعريفات، أو الأسماء والتفاصيل.۔ يتم تعريف عناصر القائمة باستخدام علامات <dt> و <dd>.۔ يتم كتابة المصطلح أو الاسم في علامة <dt>، ويتم كتابة التعريف أو الشرح في علامة <dd>.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

علامات متعلقة بالنصالعناصر المتعلقة بالجداول