freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774c367417b2b2512a9d	Know When Alt Text Should be Left Blank	0		معرفة متى يجب ترك النص البديل فارغًا

Description

في آخر تحد ، علمت أن تضمين سمة alt على علامات img إلزامي. ومع ذلك ، في بعض الأحيان يتم تجميع الصور مع تسمية توضيحية تشرحها بالفعل ، أو يتم استخدامها للزينة فقط. في هذه الحالات قد يبدو النص alt زائدا أو غير ضروري. في الحالات التي تكون فيها الصورة مفسّرة بالفعل بمحتوى نصي ، أو لا تضيف معنى إلى صفحة ما ، فإن img لا تزال بحاجة إلى سمة alt ، ولكن يمكن ضبطها على سلسلة فارغة. إليك مثال على ذلك: <img src="visualDecoration.jpeg" alt=""> عادةً ما تقع صور الخلفية تحت التصنيف "الزخرفي" أيضًا. ومع ذلك ، يتم تطبيقها عادةً مع قواعد CSS ، وبالتالي فهي ليست جزءًا من عملية قراءة برامج الترميز. ملحوظة
بالنسبة للصور التي تحتوي على تسمية توضيحية ، قد تحتاج إلى تضمين نص alt ، لأنه يساعد محركات البحث على فهرسة محتوى الصورة.

Instructions

قام الكاراف كات بترميز صفحة الهيكل العظمي لجزء المدونة الخاص بموقعه على الويب. انه يخطط لإضافة استراحة بصرية بين مادتيه مع صورة زخرفية لسيف الساموراي. أضف سمة alt لعلامة img واضبطها على سلسلة فارغة. (لاحظ أن الصورة src لا ترتبط بملف فعلي - لا تقلق أنه لا توجد سيوف تظهر في الشاشة.)

Tests

tests:
  - text: يجب أن تحتوي علامة <code>img</code> سمة <code>alt</code> .
    testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
  - text: يجب تعيين سمة <code>alt</code> لسلسلة فارغة.
    testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'

Challenge Seed

<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>To Come...</p>
</article>

<img src="samuraiSwords.jpeg">

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>To Come...</p>
</article>

Solution

// solution required

3.0 KiB Raw Blame History