gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: converted single to triple backticks9 (#36236)

Browse Source
This commit is contained in:
Randell Dawson
2019-06-20 14:49:26 -07:00
committed by Tom
parent ab2523953b
commit da6bd27eec
75 changed files with 1904 additions and 1733 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
guide/arabic/html/tutorials/center-an-image-using-text-align-center/index.md
View File

@@ -10,46 +10,46 @@ localeTitle: توسيط صورة باستخدام Text Align Center
### مثال
`
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
`
```html
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
```
**ملاحظة:** يجب أن يكون العنصر الرئيسي عنصر كتلة. إذا لم يكن عنصر كتلة ، يجب عليك إضافة `display: block;` خاصية CSS مع خاصية `text-align` .
`
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>
`
```html
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>
```
**العرض التوضيحي:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)

20
guide/arabic/html/tutorials/embedding-youtube-videos/index.md
View File

@@ -18,11 +18,11 @@ localeTitle: تضمين مقاطع الفيديو على Youtube
* عنصر `<frame>` (لا تنسى إغلاقه!)
* سمات `width` `height`
`
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=v8kFT4I31es">
</iframe>
`
```html
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=v8kFT4I31es">
</iframe>
```
يتم إدراج القيم المدرجة ، ولكن لا تتردد في تغييرها بالطريقة التي تريدها.
@@ -30,8 +30,8 @@ localeTitle: تضمين مقاطع الفيديو على Youtube
ماذا يجب أن نفعل إذا كنا نرغب في جعل هذا اللاعب يبدأ اللعب تلقائيًا؟ ما عليك سوى الإضافة إلى قيمة الرابط `?autoplay=1` . ولكن كن حذرًا ، فقد يكون الأمر مزعجًا بالنسبة إلى الكثير من الأشخاص الذين يزورون صفحتك على الويب.
`
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
</iframe>
`
```html
<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1">
</iframe>
```

22
guide/arabic/html/tutorials/how-to-create-an-html-button-that-acts-like-a-link/index.md
View File

@@ -8,27 +8,27 @@ localeTitle: كيفية إنشاء زر HTML التي تعمل مثل الارت
إحدى الطرق هي ببساطة لف علامة `<button>` في علامة `<a>` :
`
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
`
```html
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>
```
يؤدي هذا إلى تحويل الزر بالكامل إلى رابط.
الخيار الثاني هو إنشاء الرابط الخاص بك كما تفعل عادةً مع العلامة `<a>` ثم إعداده عبر CSS:
`
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
`
```html
<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a>
```
بمجرد إنشاء الرابط ، يمكنك استخدام CSS لجعله يبدو وكأنه زر. على سبيل المثال ، يمكنك إضافة حد ولون خلفية وبعض الأنماط عندما يحوم المستخدم في الرابط ...
هناك طريقة أخرى لإضافة زر وهي التفاف `input` داخل علامات `form` . حدد عنوان URL الهدف المطلوب في سمة إجراء النموذج.
`
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
`
```html
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
```
#### معلومات اكثر:

74
guide/arabic/html/tutorials/how-to-horizontally-center-a-div-tag-in-another-div-tag/index.md
View File

@@ -8,22 +8,22 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
لنبدأ بإنشاء علامتين div مع فئتي "parent" و "child". سيكون الوالد الحاوية لدينا ، وسيكون الطفل هو `<div>` الذي نركز عليه أفقيًا.
`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
</head>
<body>
<div class="parent">
<div class="child">
<p>This is the center.</p>
</div>
</div>
</body>
</html>
`
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How to Horizontally Center a Div Tag in Another Div Tag</title>
</head>
<body>
<div class="parent">
<div class="child">
<p>This is the center.</p>
</div>
</div>
</body>
</html>
```
هناك عدة طرق يمكنك من خلالها معالجة هذا الأمر ، ولكن دعنا نركز على هذا البرنامج التعليمي على اثنين. سنقوم في `flexbox` باستخدام `<div>` باستخدام `margin` وفي الثانية سنستخدم `flexbox` .
@@ -31,16 +31,17 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
إذا قمت بتحديد `width` على div div ، يمكنك استخدام `margin: auto` . سيؤدي هذا إلى توسيط طفلك `<div>` عن طريق توزيع هوامش اليسار واليمين بالتساوي.
`.parent {
border: 2px solid red;
}
.centered-child {
width: 50%;
margin: auto;
border: 1px solid black;
}
`
```css
.parent {
border: 2px solid red;
}
.centered-child {
width: 50%;
margin: auto;
border: 1px solid black;
}
```
### مثال على توسيط علامة Div مع Flexbox
@@ -48,16 +49,17 @@ localeTitle: كيفية توسيط علامة Div في علامة Div أخرى
لتوسيط طفل `<div>` باستخدام flexbox ، يلزمك استخدام `display: flex` مع `justify-content: center` الضبط `justify-content: center` على الأصل `<div>` .
`.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.centered-child {
border: 1px solid black;
}
`
```css
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.centered-child {
border: 1px solid black;
}
```
#### معلومات اكثر:

12
guide/arabic/html/tutorials/how-to-use-links/index.md
View File

@@ -16,15 +16,15 @@ localeTitle: كيفية استخدام الروابط
في HTML ، يتم تعريف الارتباطات بالعلامة:
`
<a href="url">link text</a>
`
```html
<a href="url">link text</a>
```
مثال
`
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
`
```html
<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a>
```
تحدد السمة href عنوان الوجهة (https://www.freecodecamp.org) للرابط.

44
guide/arabic/html/tutorials/how-to-use-lists/index.md
View File

@@ -12,13 +12,13 @@ localeTitle: كيفية استخدام القوائم
##### الشفرة
`
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
`
```html
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
```
##### مثال
@@ -32,13 +32,13 @@ localeTitle: كيفية استخدام القوائم
##### الشفرة
`
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
`
```html
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
```
#### مثال
@@ -52,14 +52,14 @@ localeTitle: كيفية استخدام القوائم
##### الشفرة
`
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
`
```html
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
```
##### انتاج |

30
guide/arabic/html/tutorials/images-in-html/index.md
View File

@@ -12,33 +12,33 @@ localeTitle: الصور في HTML
## مثال
`
<img src="URL of the Image" alt="Descriptive Title" />
`
```html
<img src="URL of the Image" alt="Descriptive Title" />
```
### لتحديد ارتفاع وعرض صورة ، يمكنك استخدام سمة الارتفاع والعرض:
`
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
`
```html
<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/>
```
### يمكنك أيضًا تحديد سمك الحدود (0 يعني عدم وجود حد):
`
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
`
```html
<img src="URL of the Image" alt="Descriptive Title" border="2"/>
```
### محاذاة صورة:
`
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
`
```html
<img src="URL of the Image" alt="Descriptive Title" align="left"/>
```
### يمكنك أيضًا استخدام الأنماط في سمة نمط:
`
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
`
```html
<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/>
```
#### معلومات اكثر

10
guide/arabic/html/tutorials/text-formatting-in-html/index.md
View File

@@ -10,8 +10,9 @@ localeTitle: تنسيق النص في HTML
يمكنك بسهولة تغيير معنى النص الخاص بك باستخدام عنصر `<b>` HTML. يجعل الكلمات جريئة ، والتي تعمل على إفراد جزء التسلسل. فمثلا:
`The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
`
```
The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>!
```
يمكنك أيضًا استخدام `<strong>` أيضًا - إنها تضيف أيضًا أهمية "قوية" دلالية. لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.
@@ -19,8 +20,9 @@ localeTitle: تنسيق النص في HTML
عادة ما تستخدم عند اقتباس شيء ما أو وضع ترجمة للكلمة في الكثير من المقالات. يجعلها مائلة - فقط تخيل ركلها قليلاً في الأحرف الصحيحة. فمثلا:
`Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
`
```
Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>.
```
يمكنك أيضًا استخدام `<em>` أيضًا - حيث تضيف أيضًا أهمية دلالية "مؤكدة". لا يتعرف متصفحك على فرق بين هذين العنصرين ، ولكنه موجود.