Improving Arabic translation on several "Basic HTML and HTML5" section files (#34908)
* Improving Arabic translation Improving Arabic translation in say-hello-to-html-elements.arabic.md file * Translating Description and Improving Arabic Translation. Translated the Description from the English version. Also Improving the Arabic translation. * Fixing a mistake in translating the tests. * Fixing a mistake I made while translating the tests in headline-with-the-h2-element.arabic.md * Improving the Arabic translation and fixing grammar. * adding space to (I'm a p tag) in line 10 * fixing bad indentation. * fixing bad indentation (mistake by me) * fixing bad indentation (mistake by me) * Add missing Description and Test text Adding missing description text and Test text from English version. Also general improvements to the Translation. * Adding missing description text and Test text Adding missing description text and Test text in in uncomment-html.arabic.md from English version. Also general improvements to the Translation. * Improving the Arabic translation * Minor updates to the translation * Overall Enhancement to the translation. * General translation improvement Improving the translation on the Description, Instructions and the Tests. Separate text to different lines for better readability. * Improving "Link to External Pages with Anchor Elements" Arabic Translation. * Matching characters and entities to the English version.
This commit is contained in:
Mo7amm1d
Randell Dawson
@ -6,22 +6,37 @@ videoUrl: ''
|
||||
localeTitle: إضافة الصور إلى موقع الويب الخاص بك
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك إضافة الصور إلى موقع الويب الخاص بك باستخدام عنصر <code>img</code> ، والإشارة إلى عنوان URL للصورة المحددة باستخدام السمة <code>src</code> . مثال على ذلك: <code><img src="https://www.your-image-source.com/your-image.jpg"></code> لاحظ أن عناصر <code>img</code> ذاتية الإغلاق. <strong>يجب أن</strong> تحتوي جميع عناصر <code>img</code> على سمة <code>alt</code> . يستخدم النص داخل سمة <code>alt</code> لقارئات الشاشة لتحسين إمكانية الوصول ويظهر في حالة فشل تحميل الصورة. ملاحظة: إذا كانت الصورة مزخرفة تمامًا ، فإن استخدام سمة <code>alt</code> فارغة هو أفضل ممارسة. من الناحية المثالية ، يجب ألا تحتوي سمة <code>alt</code> على أحرف خاصة ما لم تكن هناك حاجة إليها. دعنا نضيف سمة <code>alt</code> إلى مثال <code>img</code> بنا أعلاه: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code> </section>
|
||||
## الوصف
|
||||
<section id="description">
|
||||
يمكنك إضافة الصور إلى موقع الويب الخاص بك باستخدام العنصر <code>img</code> ، والإشارة إلى رابط الصورة المحددة باستخدام السمة <code>src</code> .
|
||||
مثال على ذلك:
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg"></code>
|
||||
لاحظ أن العنصر <code>img</code> ذاتي الإغلاق.
|
||||
<strong>يجب أن</strong> تحتوي جميع عناصر <code>img</code> على السمة <code>alt</code> . يستخدم النص داخل السمة <code>alt</code> لقارئات الشاشة لتحسين إمكانية الوصول، ويظهر في حالة فشل تحميل الصورة.
|
||||
ملاحظة: إذا كانت الصورة مزخرفة تمامًا ، فإن استخدام السمة <code>alt</code> بلا نص هو أفضل ممارسة.
|
||||
من الناحية المثالية ، يجب ألا تحتوي السمة <code>alt</code> على أحرف خاصة ما لم تكن هناك حاجة إليها.
|
||||
دعنا نضيف السمة <code>alt</code> إلى مثال العنصر <code>img</code> أعلاه: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> لنحاول إضافة صورة إلى موقعنا على الويب: إدراج علامة <code>img</code> ، قبل عنصر <code>h2</code> . الآن تعيين السمة <code>src</code> بحيث يشير إلى هذا العنوان: <code>https://bit.ly/fcc-relaxing-cat</code> أخيرا لا تنس أن تعطي صورتك نص <code>alt</code> . </section>
|
||||
## التعليمات
|
||||
<section id="instructions">
|
||||
لنحاول إضافة صورة إلى موقعنا على الويب:
|
||||
إدراج الوسم <code>img</code> ، قبل العنصر <code>h2</code>.
|
||||
الآن قم بتعيين قيمة السمة <code>src</code> بحيث تشير إلى هذا العنوان:
|
||||
<code>https://bit.ly/fcc-relaxing-cat</code>
|
||||
أخيرا لا تنس أن تعطي صورتك نص بديل <code>alt</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: يجب أن تحتوي صفحتك على عنصر صورة.
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
- text: يجب أن تحتوي صورتك على سمة <code>src</code> تشير إلى الصورة الصغيرة.
|
||||
- text: يجب أن تحتوي صورتك على سمة <code>src</code> تشير إلى صورة القطة الصغيرة.
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
- text: <strong>يجب أن</strong> يحتوي عنصر الصورة على سمة <code>alt</code> .
|
||||
- text: <strong>يجب أن</strong> يحتوي عنصر الصورة على السمة <code>alt</code> .
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
|
||||
```
|
||||
|
||||
@ -3,29 +3,32 @@ id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: تعليق من HTML
|
||||
localeTitle: إضافة التعليقات في HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> تذكر أنه لبدء التعليق ، تحتاج إلى استخدام <code><!--</code> وإنهاء تعليق ، تحتاج إلى استخدام <code>--></code> هنا سوف تحتاج إلى إنهاء التعليق قبل بدء عنصر <code>h2</code> الخاص بك. </section>
|
||||
## الوصف
|
||||
<section id="description">
|
||||
تذكر أنه لبدء التعليق تحتاج إلى استخدام الوسم <code><!--</code> ، ولإنهاء التعليق تحتاج إلى استخدام الوسم <code>--></code>. هنا سوف تحتاج إلى إنهاء التعليق قبل بدء العنصر <code>h2</code> الخاص بك.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> قم بالتعليق على عنصر <code>h1</code> والعنصر <code>p</code> ، ولكن ليس عنصر <code>h2</code> الخاص بك. </section>
|
||||
|
||||
## Tests
|
||||
## التعليمات
|
||||
<section id="instructions"> قم بتعليق العنصرين <code>h1</code> و<code>p</code> ، اما العنصر <code>h2</code> فاتركه دون تعليق. </section>
|
||||
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: قم بالتعليق على عنصر <code>h1</code> بحيث لا يكون مرئيًا على صفحتك.
|
||||
- text: قم بتعليق العنصر <code>h1</code> بحيث لا يكون مرئيًا على صفحتك.
|
||||
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
|
||||
- text: اترك عنصر <code>h2</code> مُعالج بحيث يكون مرئيًا على صفحتك.
|
||||
- text: اترك العنصر <code>h2</code> دون تعليق ليكون مرئيا على صفحتك.
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
- text: قم بالتعليق على عنصر <code>p</code> الخاص بك بحيث لا يكون مرئيًا على صفحتك.
|
||||
- text: قم بتعليق العنصر <code>p</code> بحيث لا يكون مرئيًا على صفحتك.
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: تأكد من إغلاق كل تعليقاتك باستخدام <code>--></code> .
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
- text: لا تقم بتغيير ترتيب <code>h1</code> <code>h2</code> أو <code>p</code> في التعليمة البرمجية.
|
||||
- text: لا تقم بتغيير ترتيب <code>h1</code> أو <code>h2</code> أو <code>p</code> في الكود البرمجي.
|
||||
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
|
||||
```
|
||||
|
||||
@ -6,22 +6,22 @@ videoUrl: ''
|
||||
localeTitle: احذف عناصر HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
## الوصف
|
||||
<section id="description"> لا يمتلك هاتفنا مساحة عمودية كبيرة. دعونا نزيل العناصر غير الضرورية حتى نتمكن من البدء في بناء CatPhotoApp. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> احذف عنصر <code>h1</code> حتى نتمكن من تبسيط طريقة العرض الخاصة بنا. </section>
|
||||
## الخطوات
|
||||
<section id="instructions"> احذف العنصر <code>h1</code> حتى نتمكن من تبسيط طريقة العرض. </section>
|
||||
|
||||
## Tests
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: احذف عنصر <code>h1</code> .
|
||||
- text: احذف العنصر <code>h1</code> .
|
||||
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
|
||||
- text: اترك عنصر <code>h2</code> على الصفحة.
|
||||
- text: اترك العنصر <code>h2</code> على الصفحة.
|
||||
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
|
||||
- text: اترك عنصر <code>p</code> الخاص بك على الصفحة.
|
||||
- text: اترك العنصر <code>p</code> على الصفحة.
|
||||
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
|
||||
|
||||
```
|
||||
|
||||
@ -3,21 +3,30 @@ id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
localeTitle: 'ملء الفراغات بإستخدام النص النائب'
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
## الوصف
|
||||
<section id='description'>
|
||||
عادة ما يستخدم مطورو الويب النص <code>lorem ipsum text</code> كنص بديل. وهو نص عشوائي مأخوذ من فقرة مشهورة لكاتب روما القديمة شيشرون.
|
||||
وقد استخدم هذا النص من قبل الطابعيين منذ القرن السادس عشر واستمر هذا التقليد في الويب.
|
||||
حسنا، خمسة قرون طويلة بما فيه الكفاية. بما اننا سنقوم ببناء تطبيق صور القطط (CatPhotoApp)، لنستخدم شيء مثل <code>kitty ipsum text</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> استبدال النص داخل عنصر <code>p</code> مع الكلمات القليلة الأولى من هذا النص ipsum كيتي: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code> </section>
|
||||
|
||||
## Tests
|
||||
## التعليمات
|
||||
<section id="instructions">
|
||||
استبدال النص الموجود بداخل العنصر <code>p</code> بالكلمات الأولى من النص التالي:
|
||||
<code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>
|
||||
</section>
|
||||
|
||||
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
- text: يجب ان يحتوي العنصر <code>p</code> على الكلمات الأولى من النص<code>kitty ipsum text</code>.
|
||||
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@ -3,31 +3,33 @@ id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: العنوان مع العنصر h2
|
||||
localeTitle: إنشاء عنوان بإستخدام العنصر h2
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
## الوصف
|
||||
<section id='description'>
|
||||
في الدروس القادمة، سنقوم بإنشاء تطبيق ويب للصور القطع قطعة بقطعة. العنصر <code>h2</code> الذي ستضيفه في هذه الخطوة، سيقوم بإضافة عنوان من المستوى الثاني لصفحة الويب. هذا العنصر يخبر المتصفح بنية موقعك. العنصر <code>h1</code> غالباً ما يستخدم في العنوان الرئيسي، بينما العنصر <code>h2</code> يستخدم بشكل عام في العنوان الفرعية. هنالك ايضا عناصر اخرى وهي <code>h3</code> و <code>h4</code> و <code>h5</code> و <code>h6</code> و هي تمثل مستويات مختلفة من العناوين الفرعية.</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إضافة علامة <code>h2</code> تقول "CatPhotoApp" لإنشاء <code>element</code> HTML ثاني أسفل العنصر <code>h1</code> "Hello World". </section>
|
||||
## التعليمات
|
||||
<section id="instructions"> إضافة وسم <code>h2</code> يعرض الجملة "CatPhotoApp" لإنشاء <code>عنصر</code> HTML ثاني أسفل العنصر <code>h1</code> "Hello World". </section>
|
||||
|
||||
## Tests
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: قم بإنشاء عنصر <code>h2</code> .
|
||||
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
|
||||
- text: ''
|
||||
- text: 'قم بإنشاء العنصر <code>h2</code>.'
|
||||
testString: 'assert(($("h2").length > 0), "انشئ عنصر <code>h2</code>.");'
|
||||
- text: 'تأكد من إغلاق قوس العنصر <code>h2</code>.'
|
||||
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
|
||||
- text: ''
|
||||
- text: 'العنصر <code>h2</code> يجب أن يحتوي على النص التالي "CatPhotoApp".'
|
||||
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
|
||||
- text: يجب أن يحتوي العنصر <code>h1</code> على النص "Hello World".
|
||||
- text: العنصر <code>h1</code> يجب أن يحتوي على النص التالي "Hello World".
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
|
||||
```
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
@ -3,25 +3,25 @@ id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
localeTitle: 'الإعلام بإستخدام عنصر الفقرات'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> تعد العناصر <code>p</code> العنصر المفضل لنص الفقرة على مواقع الويب. <code>p</code> قصيرة في "الفقرة". يمكنك إنشاء عنصر فقرة مثل: <code><p>I'm ap tag!</p></code> </section>
|
||||
## الوصف
|
||||
<section id="description"> يعد العنصر <code>p</code> هو العنصر المفضل لنصوص الفقرات في مواقع الويب. <code>p</code>هي اختصار لكلمة في "paragraph" (**وتعني فقرة**). يمكنك إنشاء عنصر الفقرة كالتالي: <code><p>I'm a p tag!</p></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> قم بإنشاء عنصر <code>p</code> أسفل عنصر <code>h2</code> ، وأعطه النص "Hello Paragraph". </section>
|
||||
## التعليمات
|
||||
<section id="instructions"> قم بإنشاء عنصر <code>p</code> أسفل العنصر <code>h2</code> ، واكتب به هذا النص "Hello Paragraph". </section>
|
||||
|
||||
## Tests
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: قم بإنشاء عنصر <code>p</code> .
|
||||
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
|
||||
- text: يجب أن يحتوي عنصر <code>p</code> على النص "Hello Paragraph".
|
||||
- text: انشئ العنصر <code>p</code>.
|
||||
testString: 'assert(($("p").length > 0), "Create an <code>h2</code> element.");'
|
||||
- text: يجب أن يحتوي العنصر <code>p</code> على النص التالي "Hello Paragraph".
|
||||
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
|
||||
- text: تأكد من أن عنصر <code>p</code> لديه علامة إغلاق.
|
||||
- text: تأكد من أن العنصر <code>p</code> لديه وسم إغلاق.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
@ -6,30 +6,30 @@ videoUrl: ''
|
||||
localeTitle: مقدمة إلى عناصر HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يقدم HTML5 مزيدًا من علامات HTML الوصفية. تشمل هذه <code>header</code> <code>footer</code> <code>nav</code> <code>video</code> <code>article</code> <code>section</code> وغيرها. تجعل هذه العلامات HTML أسهل في القراءة ، وتساعد أيضًا في تحسين محركات البحث (SEO) وإمكانية الوصول. تساعد علامة HTML5 <code>main</code> محركات البحث والمطورين الآخرين في العثور على المحتوى الرئيسي لصفحتك. <strong>ملحوظة</strong> <br> تتم تغطية العديد من علامات HTML5 الجديدة وفوائدها في قسم "إمكانية الوصول التطبيقي". </section>
|
||||
## الوصف
|
||||
<section id="description"> يقدم HTML5 مزيدًا من وسوم HTML الوصفية. تشمل تلك الوسوم <code>header</code> و <code>footer</code> <code>nav</code> و <code>video</code> و <code>article</code> و <code>section</code> وغيرها. تجعل هذه الوسوم كود HTML الخاص بك، أسهل في القراءة، وتساعد أيضًا في تحسين محركات البحث (SEO) وإمكانية الوصول. وسم <code>main</code> وهو احد اوسمة HTML5،وهو يساعد محركات البحث والمطورين الآخرين في العثور على المحتوى الرئيسي لصفحتك. <strong>ملحوظة</strong> <br> تتم تغطية العديد من وسوم HTML5 الجديدة وفوائدها في قسم "إمكانية الوصول التطبيقي". </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إنشاء الثاني <code>p</code> العنصر بعد القائمة <code>p</code> عنصر مع النص كيتي هوز التالية: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> التفاف الفقرات مع علامة <code>main</code> فتح وإغلاق. </section>
|
||||
## التعليمات
|
||||
<section id="instructions"> إنشئ عنصر <code>p</code> ثاني بعد العنصر <code>p</code> الموجود واضف له نص kitty ipsum التالي: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code> قم بكتابة الفقرات بداخل وسمي بداية ونهائية للعنصر <code>main</code>. </section>
|
||||
|
||||
## Tests
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: تحتاج 2 <code>p</code> العناصر مع النص كيتي هوز.
|
||||
- text: يجب ان يكون هنالك عنصرين <code>p</code> بهما نص Kitty Ipsum.
|
||||
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
|
||||
- text: تأكد من أن كل عنصر من عناصر <code>p</code> لديه علامة إغلاق.
|
||||
- text: تأكد من ان كل عناصر <code>p</code> لها وسم إغلاق.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
- text: يجب أن يحتوي عنصر <code>p</code> على الكلمات القليلة الأولى من <code>kitty ipsum text</code> الإضافية المتوفرة.
|
||||
- text: يجب أن يحتوي عنصر <code>p</code> على الكلمات القليلة الأولى من نص <code>kitty ipsum text</code> الإضافي المزود.
|
||||
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
|
||||
- text: يجب أن يحتوي <code>main</code> عنصر <code>main</code> واحد.
|
||||
- text: يجب أن يحتوي الكود على عنصر <code>main</code> واحد.
|
||||
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
|
||||
- text: يجب أن يحتوي العنصر <code>main</code> على عنصرين فقرة كأطفال.
|
||||
- text: يجب أن يحتوي العنصر <code>main</code> على عنصرين فقرة كأطفال (اي بداخل العنصر).
|
||||
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
|
||||
- text: يجب أن تأتي العلامة الافتتاحية <code>main</code> قبل علامة الفقرة الأولى.
|
||||
- text: يجب أن يأتي الوسم الافتتاحي <code>main</code> قبل علامة الفقرة الأولى.
|
||||
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
|
||||
- text: يجب أن تأتي علامة الإغلاق <code>main</code> بعد علامة فقرة الإغلاق الثانية.
|
||||
- text: يجب أن يأتي وسم الإغلاق <code>main</code> بعد علامة فقرة الإغلاق الثانية.
|
||||
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
|
||||
|
||||
```
|
||||
|
||||
@ -3,25 +3,32 @@ id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: وصلة إلى الصفحات الخارجية مع عناصر مرساة
|
||||
localeTitle: ربط الصفحات الخارجية بستخدام عناصر المرساة Anchor
|
||||
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> يمكنك استخدام عناصر <code>anchor</code> للربط بمحتوى خارج صفحة الويب الخاصة بك. تحتاج عناصر <code>anchor</code> إلى عنوان ويب مقصود يسمى سمة <code>href</code> . هم أيضا بحاجة إلى مرساة النص. في ما يلي مثال: <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code> ثم يعرض المتصفح النص <strong>"روابط إلى freecodecamp.org"</strong> كحلقة يمكنك النقر عليها. وسيأخذك هذا الرابط إلى عنوان الويب <strong>https://www.freecodecamp.org</strong> . </section>
|
||||
<section id="description">
|
||||
يمكنك استخدام العنصر <code>anchor</code> للربط بمحتوى خارج صفحة الويب الخاصة بك.
|
||||
يحتاج العنصر <code>anchor</code> إلى عنوان ويب يسمى بالسمة <code>href</code>. هذه السمة تحتاج نص للرابط.
|
||||
في ما يلي مثال:
|
||||
<code><a href="https://freecodecamp.org">روابط إلى freecodecamp.org</a></code> ثم يعرض المتصفح النص <strong>"روابط إلى freecodecamp.org"</strong> كرابط يمكنك النقر عليها.
|
||||
وسيأخذك هذا الرابط إلى عنوان الويب <strong>https://www.freecodecamp.org</strong>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إنشاء <code>a</code> العنصر الذي يربط <code>http://freecatphotoapp.com</code> ولديه "صور القط"، كما لها <code>anchor text</code> . </section>
|
||||
<section id="instructions"> إنشاء العنصر <code>a</code> الذي يربط <code>http://freecatphotoapp.com</code> له النص "cat photos"، في <code> نص الرابط</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: الخاص بك <code>a</code> يجب أن يكون العنصر في <code>anchor text</code> من "صور القط".
|
||||
- text: يجب أن يحتوي العنصر <code>a</code> الخاص بك على "cat photos" كنص للرابط <code>anchor text </code>.
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: 'تحتاج إلى <code>a</code> العنصر الذي يربط <code>http://freecatphotoapp .com</code>'
|
||||
- text: 'تحتاج إلى عنصر <code>a</code> يربط بالعنوان <code>http://freecatphotoapp.com</code>'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
- text: تأكد من <code>a</code> عنصر يحتوي على علامة إغلاق.
|
||||
- text: تأكد من ان العنصر <code>a</code> يحتوي على وسم إغلاق.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
|
||||
@ -3,21 +3,32 @@ id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
localeTitle: 'قل مرحبا لعناصر HTML'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> مرحبًا بك في تحديات ترميز HTML لـ freeCodeCamp. ستوجهك هذه الخطوات من خلال تطوير الويب خطوة بخطوة. أولاً ، ستبدأ ببناء صفحة ويب بسيطة باستخدام HTML. يمكنك تحرير <code>code</code> في <code>code editor</code> الخاص بك ، والذي تم تضمينه في صفحة الويب هذه. هل ترى الرمز في محرر التعليمات البرمجية الذي يقول <code><h1>Hello</h1></code> ؟ هذا هو <code>element</code> HTML. تحتوي معظم عناصر HTML على <code>opening tag</code> <code>closing tag</code> . تبدو علامات الفتح بالشكل التالي: <code><h1></code> تبدو علامات الإغلاق كما يلي: <code></h1></code> الفرق الوحيد بين علامات الفتح والإغلاق هو شرطة مائلة للأمام بعد قوس الفتح لعلامة إغلاق. لكل تحد اختبارات يمكنك تشغيلها في أي وقت بالنقر فوق الزر "تشغيل الاختبارات". عندما تجتاز جميع الاختبارات ، ستتم مطالبتك بإرسال الحل والانتقال إلى التحدي التالي في الترميز. </section>
|
||||
## الوصف
|
||||
<section id="description"> مرحبًا بك في تحديات الـ HTML البرمجية الخاصة بـ freeCodeCamp . من خلال هذه التحديات ستتعلم تطوير الويب خطوة بخطوة. أولاً ، ستبدأ ببناء صفحة ويب بسيطة باستخدام HTML.
|
||||
يمكنك تحرير <code>الكود</code> في <code>محرر الأكواد</code> الخاص بك ، والذي تم تضمينه في صفحة الويب هذه.
|
||||
هل ترى الكود <code><h1>Hello</h1></code> الموجودة في محرر الأكواد ؟ هذا هو <code>العنصر</code> في لغة الـ HTML.
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> لتمرير الاختبار على هذا التحدي ، قم بتغيير نص عنصر <code>h1</code> ليقول "Hello World". </section>
|
||||
تحتوي معظم عناصر لغة الـ HTML على <code>وسم الفتح</code> و <code>وسم الإغلاق</code>.
|
||||
|
||||
## Tests
|
||||
تبدو علامات الفتح بالشكل التالي:
|
||||
<code><h1></code> ،
|
||||
اما علامات الإغلاق فهي كما يلي:
|
||||
<code></h1></code>.
|
||||
|
||||
الفرق الوحيد بين علامتي الفتح والإغلاق هو علامة الشَرطة المائلة للأمام بعد قوس الفتح، لوسم الإغلاق. لكل تحدٍ اختبارات يمكنك تنفيذها في أي وقت بالنقر على زر "تشغيل الاختبارات". عندما تجتاز جميع الاختبارات ، سيطلب منك إرسال الحل والانتقال للتحدي البرمجي التالي. </section>
|
||||
|
||||
## التعليمات
|
||||
<section id="instructions"> لاجتياز في هذا التحدي، قم بتغيير نص العنصر <code>h1</code> لإخراج الجملة "Hello World". </section>
|
||||
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
- text: 'العنصر <code>h1</code> يجب ان يحتوي على النص "Hello World".'
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
|
||||
```
|
||||
|
||||
@ -3,31 +3,38 @@ id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Uncomment HTML
|
||||
localeTitle: إلغاء التعليقات في HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
undefined
|
||||
## الوصف
|
||||
<section id='description'>
|
||||
التعليق طريقة لترك تعليقات للمطورين الاخرين في الكود دون التأثير على المخرجات التي تعرض للمستخدم النهائي.
|
||||
ايضا، هو طريقة مناسبة لجعل الكود غير نشط (اي لا ينفذ) دون حذفه بالكامل.
|
||||
التعليقات في الـ HTML تبدأ بالوسم <code><!--</code> وتنتهي بالوسم <code>--></code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> إلغاء <code>h2</code> عناصر <code>h1</code> و <code>h2</code> و <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
## التعليمات
|
||||
<section id="instructions"> الغي التعليقات من هذه العناصر <code>h1</code> و <code>h2</code> و <code>p</code>.
|
||||
</section>
|
||||
|
||||
## الاختبارات
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: اجعل عنصر <code>h1</code> مرئيًا على صفحتك من خلال إلغاء تحميله.
|
||||
- text: اجعل العنصر <code>h1</code> مرئيًا على صفحتك من خلال إلغاء التعليق.
|
||||
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
|
||||
- text: اجعل عنصر <code>h2</code> مرئيًا على صفحتك من خلال إلغاء تحميله.
|
||||
- text: اجعل العنصر <code>h2</code> مرئيًا على صفحتك من خلال إلغاء التعليق.
|
||||
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
|
||||
- text: اجعل العنصر <code>p</code> مرئيًا على صفحتك من خلال إلغاء تحميله.
|
||||
- text: اجعل العنصر <code>p</code> مرئيًا على صفحتك من خلال إلغاء التعليق.
|
||||
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
|
||||
- text: تأكد من حذف جميع علامات التعليق الزائدة ، مثل <code>--></code> .
|
||||
- text: تأكد من حذف جميع وُسُوم نهاية التعليق مثل <code>--></code> .
|
||||
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags, i.e. <code>--></code>.");'
|
||||
|
||||
```
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
|
||||
Reference in New Issue
Block a user