X

اتش.تي.إم.إل الدلالية

٤. التعامل مع العناصر الدلالية للنص والوقت

نظري

أ. كيف تعمل علامات الاقتباس المضمنة Inline Quotes والمكدسة Block في اتش.تي.إم.إل HTML ؟

في "اتش.تي.إم.إل" HTML، تُستخدم العناصر المقتبسة Quoted elements لتمييز النص المقتبس quoted text عن المحتوى المحيط به. هذا يُعطي النص المقتبس quoted text تنسيقًا يسهل التعرف عليه easy to identify.

يجب استخدام عنصر الاقتباس المقتطع The block quotation element لتمثيل مقطع مقتبس من مصدر آخر. يُستخدم هذا العنصر بشكل أساسي للاقتباسات الموسعة. إذا كان لمصدر الاقتباس عنوان address، يُمكنك الاستشهاد به باستخدام سمة الاستشهاد cite. يجب أن تكون قيمة هذه السمة عنوان URL صالحًا.

هذا مثال على اقتباس quote داخل عنصر اقتباس الكتلة block quotation :


<blokquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
 "هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟"
</blockquote>
"هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟"

يحتوي هذا العنصر على سمة cite. قيمة هذه السمة هي عنوان URL للمصدر. مع أن هذه السمة لا تُغيّر طريقة عرض الاقتباس، إلا أنها مفيدة جدًا لتزويد قارئات الشاشة ومحركات البحث search engines بمعلومات أكثر حول الاقتباس the quote. في المتصفح، ستلاحظ أن النص مُسطر قليلاً slightly indented.

إذا كنت ترغب في بدء وإنهاء الاقتباس بعلامات اقتباس quotation marks، فقد تحتاج إلى كتابتها صراحةً داخل النص. يمكنك كتابة النص مباشرةً داخل عنصر الاقتباس The block quotation element، كما فعلتُ للتو، أو وضعه داخل فقرة واحدة أو أكثر. هذا مفيد عندما يحتوي النص على فقرات متعددة، ولكنك ترغب في إبقاءها داخل نفس الاقتباس The same block quote.

فيما يلي مثال مكون من أربع فقرات:


<blokquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">

 <p>.ابنِ مشاريعك. أرِها لأصدقائك. ابنِ مشاريع لأصدقائك</p>
 <p>.ابنِ شبكة علاقاتك. ساعد من تلتقي بهم في طريقك. ما تدرّ يعود إليك. ستحصل على ما تستحقه</p>
 <p>.لم يفت الأوان. الحياة طويلة</p>
 <p>.ستتذكر هذه اللحظة بعد سنوات من الآن، وستكون سعيدًا لأنك اتخذت هذه الخطوة</p>

</blockquote>

ابنِ مشاريعك. أرِها لأصدقائك. ابنِ مشاريع لأصدقائك.

ابنِ شبكة علاقاتك. ساعد من تلتقي بهم في طريقك. ما تدرّ يعود إليك. ستحصل على ما تستحقه.

لم يفت الأوان. الحياة طويلة.

ستتذكر هذه اللحظة بعد سنوات من الآن، وستكون سعيدًا لأنك اتخذت هذه الخطوة.

جميع الفقرات مُضمنة في عنصر اقتباس مُقسّم واحد The same block quotation element، ما يعني أنها جزء من الاقتباس نفسه. كما هو واضح، يحتوي العنصر على سمة cite بعنوان URL للمصدر. في المتصفح، ستجد أن الفقرات الأربع مُحاذاة لبعضها البعض، ولكنها مُسطرة بالنسبة لحاويتها to their container.

حتى الآن، كنتُ أستخدم خاصية الاستشهاد cite لتحديد مصدر الاقتباس the source of the quotation، لكنها لا تُظهر المصدر the source للمستخدم، بل تعمل فقط خلف الكواليس behind the scenes.

إذا كنت ترغب في إسناد المصدر بصريًا visually، يمكنك إضافة عنصر استشهاد، cite ، خارج عنصر الاقتباس المقتطع The block quotation element. يختلف هذا عن سمة cite. عنصر الاستشهاد The citation element هو عنصر "اتش.تي.إم.إل" HTML يمكنك استخدامه لتمييز عنوان title عمل إبداعي مرجعي، مثل كتاب، أو مقال، أو أغنية، أو فيلم، أو موقع إلكتروني، أو بحث.

وهنا مثال:


<div>
 
 <blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
  هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
 </blockquote>

 <p>—Quincy Larson, <cite>كيفية تعلم البرمجة والحصول على وظيفة مطور برامج [كتاب كامل].</cite></p>

</div>
هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟

—Quincy Larson, كيفية تعلم البرمجة والحصول على وظيفة مطور برامج [كتاب كامل].

يحتوي عنصر الاقتباس المقتطع The block quotation element على نص مقتبس quoted text. أسفل العنصر، يمكنك رؤية فقرة باسم المؤلف، متبوعةً بعنصر استشهاد a citation element. يحتوي عنصر الاستشهاد The citation element على عنوان الكتاب الذي استُخدم فيه الاقتباس the quotation.

إذا ذهبت إلى المتصفح، فسيكون المصدر the source واضحًا الآن، وستجد أن الاقتباس مأخوذ من كتاب لكوينسي لارسون Quincy Larson. عنوان الكتاب هو "كيف تتعلم البرمجة والحصول على وظيفة مطور برامج".

يُنصح باستخدام علامات اقتباس block quotes كتلك للاقتباسات الطويلة من مصادر أخرى. ولكن في بعض الأحيان، قد تحتاج فقط إلى اقتباس بضع كلمات ضمن فقرة أكبر.

هذا هو بالضبط الغرض من عنصر الاقتباس المضمّن The inline quotation element. فهو مخصص للاقتباسات المضمّنة القصيرة short inline quotations من مصادر أخرى. تُضيف معظم المتصفحات الحديثة علامات اقتباس quotation marks حول الاقتباس المضمّن the inline quote تلقائيًا automatically عند استخدام هذا العنصر.

هذا مثال:


<p>
  ،كما قال كوينسي لارسون
 <q cite="https://www.freecodecamp.org/news/learn-to-code-book/">
  .الزخم هو كل شيء
 </q>
</p>

كما قال كوينسي لارسون، الزخم هو كل شيء.

يمكنك رؤية عنصر فقرة a paragraph element يحتوي على نص. جزء من النص عبارة عن اقتباس مضمّن an inline quote، لأنه داخل عنصر الاقتباس المضمّن the inline quotation element. يمكنك أيضًا إضافة سمة cite لنسب المصدر.

يعمل هذا تمامًا كما كان يعمل مع عنصر الاقتباس the block quotation element. لن تكون هناك أي تغييرات بصرية، ولكنه سيوفر لقارئات الشاشة ومحركات البحث معلومات أكثر حول الاقتباس the quote.

في المتصفح، ستجد أن النص المقتبس the quoted text جزء من الفقرة، وهو محاط بعلامات اقتباس quotation marks. تُضيف معظم المتصفحات الحديثة علامات الاقتباس هذه تلقائيًا.

ما الفرق بين علامات الاقتباس المقتطعة block quotes والمضمنة inline quotes؟ يُنصح باستخدام علامات الاقتباس المقتطعة Block quotes للاقتباسات الموسعة من مصادر أخرى، بينما يُنصح باستخدام علامات الاقتباس المضمنة Inline quotes للاقتباسات القصيرة من مصادر أخرى والتي يجب أن تكون جزءًا من فقرات موجودة.

أسئلة :

ما هو عنصر "اتش.تي.إم.إل" HTML المُستخدم لعرض اقتباسات مُوسّعة من مصادر أخرى؟

١. q ❌

٢. blockquote ✅

٣. cite ❌

٤. p ❌


ما هو الغرض من عنصر cite في "اتش.تي.إم.إل" HTML ؟

١. لعرض الاقتباسات المضمنة inline quotations. ❌

٢. لتحديد رابط URL مصدر الاقتباس. ❌

٣. لتمييز عنوان title العمل الإبداعي المُشار إليه. ✅

٤. لعرض الاقتباسات المُوسّعة extended quotations. ❌


ما هي سمة "اتش.تي.إم.إل" HTML المُستخدمة لتحديد مصدر الاقتباس في عنصر اقتباس مُضمّن أو مُكبّر؟

١. href ❌

٢. src ❌

٣. title ❌

٤. cite ✅

ب. كيف تعرض الاختصارات Abbreviations في اتش.تي.إم.إل HTML ؟

الاختصار An abbreviation هو شكل مُختصر من كلمة أو عبارة. على سبيل المثال، كلمة "Dr" متبوعة بنقطة هي اختصار لكلمة "doctor".

هناك نوعان شائعان من الاختصارات: الاختصارات acronyms والأحرف الأولى initialisms.

الاختصار An acronym هو كلمة مكونة من الأحرف الأولى من عبارة، حيث يمثل كل حرف الحرف الأول من كلمة في تلك العبارة.

GUI مثال على اختصار an acronym، وهو اختصار لـ "واجهة المستخدم الرسومية" (Graphical User Interface). بأخذ الأحرف الأولى من كل كلمة "G" و "U" و "I" ، نحصل على اختصار GUI.

يتم تشكيل الحرف الأول An initialism من الكلمة من خلال الأحرف الأولى من العبارة، حيث يمثل كل حرف الحرف الأول the first letter من الكلمة في تلك العبارة.

على سبيل المثال، HTML هو اختصار لـ HyperText Markup Language، ويتم نطقه من خلال تهجئة كل حرف من الحروف "H" و "T" و "M" و "L" .

كلٌّ من الاختصارات acronyms والحروف الأولى initialisms نوعان من الاختصارات. الفرق هو أن الاختصارات acronyms تُنطق ككلمات، بينما تُنطق الحروف الأولى initialisms كحروف مفردة.

إنها مفيدة جدًا لكتابة نصوص أكثر إيجازًا، خاصةً عندما تكون معروفة وسهلة الفهم في سياق معين.

إذا كنت بحاجة لعرض اختصارات abbreviations ، مثل الإختصارات acronyms أو الأحرف الأولى initialisms، في "اتش.تي.إم.إل" HTML، فإن عنصر الاختصار The abbreviation element هو ما تبحث عنه تمامًا. يجب عليك دائمًا شرح معناها الكامل عند استخدامها لأول مرة. بعد ذلك، يمكنك استخدام عنصر الاختصار The abbreviation element لتمييزها وتقديم مزيد من التفاصيل.

فيما يلي مثال حيث يمكنك رؤية فقرة تحتوي على الجملة HTML هو أساس الويب :


<p>
 هو أساس الويب<abbr>HTML</abbr>
</p>

HTML هو أساس الويب

توجد الأحرف الأولى من HTML ضمن عنصر اختصار an abbreviation element. في المتصفح، ستلاحظ أنه لم يتغير شيء، فهو لا يزال يبدو كنص عادي. يوفر عنصر الاختصار The abbreviation element سياقًا مفيدًا، لكن المستخدمين سيظلون يرون الأحرف الأولى كنص عادي.

ذا كنت تريد مساعدة المستخدمين على فهم معنى هذا الاختصار initialism، فيمكنك عرض شكله الكامل باستخدام سمة title.

سمة title اختيارية optional، ولكن إذا قررت تضمينها، فيجب أن تكون وصفًا قابلاً للقراءة من قبل الإنسان للاختصار acronym أو الأحرف الأولى initialism من الاسم.

لنأخذ نفس المثال السابق، ولكن أضف سمة title. ستكون HyperText Markup Language، وهي الشكل الموسع للاسم الأولي initialism:


<p>
 هو أساس الويب<abbr title="HyperText Markup Language">HTML</abbr>
</p>

HTML هو أساس الويب

عادةً، يتغير نمط style عنصر الاختصار the abbreviation element عند إضافة هذه الخاصية attribute. ويعتمد النمط المُحدد على المتصفح. قد تعرض بعض المتصفحات خطًا منقطًا a dotted underline، بينما قد تُحوّل متصفحات أخرى المحتوى إلى أحرف كبيرة صغيرة، أو حتى تُعيّن أنماطًا افتراضية مُعينة، مثل خط منقط. عند تحريك المستخدم مؤشر الماوس فوق الاختصار، يُعرض النموذج الكامل كتلميح a tooltip.

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

يجب عليك استخدام أفضل حكم لديك للعثور على التوازن الصحيح بين المعلومات والعرض لتجنب تشويش النص مع الحفاظ على الوضوح والإيجاز.

أسئلة :

ما هو العنصر في HTML المستخدم للإشارة إلى اختصار abbreviation أو كلمة مختصرة acronym ؟

١. abbr ✅

٢. acronym ❌

٣. abbrev ❌

٤. acron ❌


ما هو الغرض الأساسي من عنصر abbr ؟

١. تنسيق النص كاختصار an abbreviation. ❌

٢. للإشارة إلى اختصار an abbreviation أو كلمة مختصرة acronym وتقديم معلومات إضافية. ✅

٣. لاختصار محتوى صفحة ويب. ❌

٤. لتحسين ترتيب محركات البحث search engine rankings. ❌


ما هي الخاصية التي يمكن استخدامها داخل عنصر abbr لتوفير الشكل الكامل للاختصار أو الاختصار؟

١. explain ❌

٢. description ❌

٣. title ✅

٤. fullform ❌

ج. كيف تعرض العناوين Addresses في اتش.تي.إم.إل HTML ؟

يُستخدم عنصر عنوان جهة الاتصال The contact address element لعرض معلومات الاتصال الخاصة بقسم على صفحة ويب. يتميز هذا العنصر address بتعدد استخداماته، إذ يُمكن استخدامه في صفحات الأعمال، وصفحات المؤلفين، والمواقع الشخصية، وغيرها.

عندما يتعلق الأمر ببناء أقسام الاتصال الخاصة بموقع الويب الخاص بك، يجب عليك استخدام عنصر العنوان الدلالي address بدلاً من عنصر عام مثل div.

فيما يلي مثال لاستخدام عنصر address لصفحة الاتصال الخاصة بالشركة:


<address>

 <h2>اسم الشركة</h2>
 <p>
  ١٢٣٤ شارع إلم <br />
 سبرينغفيلد، إلينوي ٦٢٧٠١ <br />
 الولايات المتحدة الأمريكية
 </p>

 <p>الهاتف <a href="tel:+15555555555"+1 (555) 555-5555</a></p>
 <p>البريد الإلكتروني <a href="mailto:contact@company.com"contact@company.com</a></p>

</address>

في هذا المثال، يوجد اسم الشركة، والعنوان الفعلي، ورقم الهاتف، ومعلومات البريد الإلكتروني. بالنسبة للعنوان الفعلي، يُستخدم عنصر فاصل الأسطر، br ، لإظهار التقسيم بين اسم الشارع والمدينة والبلد.

بالنسبة لرقم الهاتف، لدينا عنصر ربط an anchor element بقيمة href مُعيَّنة لأرقام الهواتف. تُنشئ قيمة +:tel داخل سمة href رابطًا قابلًا للنقر لبدء مكالمة هاتفية على أجهزة مُحدَّدة تدعم هذه الخاصية.

بالنسبة لعنوان البريد الإلكتروني، يتم استخدام عنصر مرساة آخر anchor element مع تعيين قيمة href إلى رابط mailto. تُستخدم روابط mailto في مستندات "اتش.تي.إم.إل" HTML للسماح للمستخدمين بفتح بريد إلكتروني جديد داخل عميل البريد الإلكتروني المفضل لديهم.

من عيوب استخدام رابط mailto أن المستخدمين غالبًا ما يعتبرونه بريدًا عشوائيًا. للأسف، يستخدم الكثير من مرسلي البريد العشوائي Spammers هذا الخيار لإرسال رسائل بريد إلكتروني إلى المستخدمين. لذا، تذكر ذلك عند استخدامه.

أسئلة :

ما هو الغرض من عنصر address ؟

١. يُستخدم لتحديد قسم لروابط التنقل for navigation links. ❌

٢. يُستخدم لعرض معلومات الاتصال to represent contact information لقسم على صفحة ويب. ✅

٣. يُستخدم لتحديد نمط الخط font style لقسم من الصفحة. ❌

٤. يُستخدم لتجميع المحتوى to group content لتنسيقه باستخدام CSS. ❌


ما هو استخدام رابط mailto ؟

١. يُستخدم للربط to link بصفحة ويب. ❌

٢. يُستخدم لإنشاء رابط تنزيل ملف a file download link. ❌

٣. يُستخدم لإعادة التوجيه to redirect إلى موقع ويب آخر. ❌

٤. يُستخدم للسماح للمستخدمين بفتح بريد إلكتروني جديد ضمن برنامج البريد الإلكتروني المُفضّل لديهم. ✅


ما هو الجانب السلبي لاستخدام روابط mailto ؟

١. هذه الروابط هدفٌ لمرسلي البريد العشوائي Spammers لإرسال رسائل بريد إلكتروني إلى المستخدمين. ✅

٢. تُنشئ هذه الروابط صفحة ويب تلقائيًا. ❌

٣. تُحسّن هذه الروابط من تحسين محركات البحث SEO لموقعك الإلكتروني. ❌

٤. تُحسّن هذه الروابط سرعة تحميل موقعك الإلكتروني. ❌

د. كيف تعرض الأوقات Times والتاريخ Dates في اتش.تي.إم.إل HTML ؟

يتم استخدام عنصر time لتمثيل لحظة محددة في الوقت.

فيما يلي مثال لاستخدام عنصر time لتمثيل عشرين ساعة، أو الساعة الثامنة مساءً eight PM .


<p> الحجوزات مخصصة لـ <time datetime="20:00">20:00</time></p>

الحجوزات مخصصة لـ

يتم استخدام سمة datetime لترجمة التواريخ والأوقات إلى تنسيق قابل للقراءة بواسطة الآلة.

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

يجب أن تكون قيمة سمة datetime إما سنة صالحة، أو شهر صالح، أو وقت صالح، أو تاريخ محلي، أو تاريخ عالمي، أو سلسلة مدة صالحة.

فيما يلي مثال آخر لاستخدام عنصر الوقت The time element لتمثيل تاريخ معين:


<p> التخرج سيكون في <time datetime="2024-06-15T15:00">15 يونيو</time></p>

التخرج سيكون في

قيمة سمة datetime بتنسيق ISO 8601. ISO 8601 هو معيار دولي لتمثيل التواريخ والأوقات.

الجزء الأول من هذه القيمة هو السنة والشهر واليوم. الحرف الكبير T في القيمة هو الفاصل بين التاريخ والوقت.

ستكون الساعة الخامسة عشرة والنصف هي الثالثة بعد الظهر three PM .

عندما تحتاج إلى تمثيل الأحداث أو تواريخ النشر أو المواعيد، فمن الأفضل استخدام عنصر time.

أسئلة :

ما الذي تساعد فيه سمة datetime في عنصر الوقت time ؟

١. يُنسّق النص بخط عريض. ❌

٢. يُحوّل التواريخ والأوقات إلى صيغة قابلة للقراءة آليًا. ✅

٣. يُضيف لونًا إلى النص. ❌

٤. يُنشئ روابط تشعبية لصفحات أخرى. ❌


ما هو التنسيق الصحيح لقيمة سمة datetime وفقًا لـ ISO 8601؟

١. YYYY-MM-DDTHH:MM:SS ✅

٢. DD-MM-YYYY HH:MM ❌

٣. MM-DD-YYYY HH:MM AM/PM ❌

٤. YYYY/MM/DD HH:MM:SS ❌


ماذا يمثل الحرف الكبير T في قيمة datetime ISO 8601؟

١. المنطقة الزمنية The time zone . ❌

٢. الفاصل بين التاريخ والوقت. ✅

٣. عنوان المستند. ❌

٤. درجة الحرارة. ❌