diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ar/learn/html | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/ar/learn/html')
| -rw-r--r-- | files/ar/learn/html/index.html | 60 | ||||
| -rw-r--r-- | files/ar/learn/html/introduction_to_html/getting_started/index.html | 760 | ||||
| -rw-r--r-- | files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html | 657 | ||||
| -rw-r--r-- | files/ar/learn/html/introduction_to_html/index.html | 61 | ||||
| -rw-r--r-- | files/ar/learn/html/tables/index.html | 37 |
5 files changed, 0 insertions, 1575 deletions
diff --git a/files/ar/learn/html/index.html b/files/ar/learn/html/index.html deleted file mode 100644 index 0e2a90b71a..0000000000 --- a/files/ar/learn/html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'تعلم HTML: أدلة ودروس' -slug: Learn/HTML -tags: - - Beginner - - CodingScripting - - HTML - - NeedsContent - - NeedsTranslation - - TopicStub -translation_of: Learn/HTML ---- -<p> </p> - -<p><font><font><font>لبناء المواقع، يجب أن نعرف عن {{معجم ( 'HTML')}} - التكنولوجيا الأساسية المستخدمة لتحديد هيكل صفحة ويب. </font></font></font><font><font>يستخدم HTML لتحديد ما إذا كان ينبغي الاعتراف محتوى الويب الخاص بك كفقرة، القائمة، العنوان، وصلة، صورة، لاعب الوسائط المتعددة، شكل، أو واحد من العديد من العناصر الأخرى المتاحة أو حتى عنصر الجديد الذي قمت بتحديده.</font></font></p> - -<h2 id="مسار_التعلم"><font><font>مسار التعلم</font></font></h2> - -<p><font><font>من الناحية المثالية يجب أن تبدأ رحلة التعلم عن طريق تعلم HTML. ابدأ القراءة </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction"><font><font>مقدمة إلى HTML</font></font></a><font><font> . ثم تستطيع الانتقال إلى تعلم حول مواضيع أكثر تقدما مثل:</font></font></p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS"><font><font><font>CSS</font></font></font></a><font><font><font> ، وكيفية استخدامه لHTML أسلوب (على سبيل المثال تغيير حجم النص والخطوط المستخدمة، إضافة الحدود والظلال، تخطيط صفحتك مع عدة أعمدة، إضافة الرسوم المتحركة والتأثيرات البصرية الأخرى.)</font></font></font></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript"><font><font><font>جافا سكريبت</font></font></font></a><font><font><font> ، وكيفية استخدامها لإضافة وظائف حيوية على صفحات الويب (على سبيل المثال العثور على موقعك ورسم على الخريطة، جعل تظهر عناصر واجهة المستخدم / تختفي عند تبديل زر، حفظ بيانات المستخدمين محليا على أجهزة الكمبيوتر الخاصة بهم، والكثير أكثر بكثير.)</font></font></font></li> -</ul> - -<p><font><font>قبل البدء في هذا الموضوع، يجب أن يكون لديك معرفة أساسية على الأقل مع استخدام أجهزة الكمبيوتر، واستخدام شبكة الإنترنت بشكل سلبي (أي مجرد النظر اليها، واستهلاك المحتوى). </font></font><font><font><font>يجب ان تكون بيئة العمل الأساسية اقامة النحو المفصل في</font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font><font>تثبيت البرامج الأساسية</font></font></font></a><font><font><font> ، وفهم كيفية إنشاء وإدارة الملفات، كما هو مفصل في </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font><font>التعامل مع الملفات</font></font></font></a><font><font><font> - على حد سواء هي جزء من لدينا </font></font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></font></a><font><font><font> وحدة مبتدئا كاملة ل.</font></font></font></p> - -<p><font><font>فمن المستحسن أن تعمل من خلال </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web"><font><font>الشروع في العمل مع شبكة الإنترنت</font></font></a><font><font> قبل محاولة هذا الموضوع، ومع ذلك فإنه ليس من الضروري على الاطلاق. كثيرا ما تتم تغطيتها في </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics"><font><font>أساسيات HTML</font></font></a><font><font> تغطي المادة أيضا فيما لدينا </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a><font><font> وحدة، وإن كان ذلك في مزيد من التفاصيل الكثير.</font></font></p> - -<h2 id="وحدات"><font><font>وحدات</font></font></h2> - -<p><font><font>هذا الموضوع يحتوي على الوحدات التالية، في الترتيب المقترح للعمل من خلالها. يجب عليك بالتأكيد تبدأ مع أول واحد.</font></font></p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML"><font><font>مقدمة إلى HTML</font></font></a></dt> - <dd><font><font>هذه الوحدة يمهد الطريق، والحصول على استخدمته لمفاهيم هامة وتركيب، والنظر في تطبيق HTML إلى النص، وكيفية إنشاء ارتباطات تشعبية، وكيفية استخدام HTML لهيكلة صفحة ويب.</font></font></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding"><font><font>الوسائط المتعددة وتضمينها</font></font></a></dt> - <dd><font><font>هذه الوحدة يستكشف كيفية استخدام HTML لتشمل الوسائط المتعددة في صفحات الويب الخاصة بك، بما في ذلك الطرق المختلفة التي يمكن أن تكون الصور المدرجة، وكيفية تضمين الفيديو والصوت، وحتى صفحات الويب الأخرى كلها.</font></font></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables"><font><font>جداول HTML</font></font></a></dt> - <dd><font><font>يمكن أن تمثل جداول البيانات على صفحة ويب في ومفهومة الطريقة يكون تحديا. هذه الوحدة تغطي العلامات الجدول الأساسية، جنبا إلى جنب مع ميزات أكثر تعقيدا مثل تنفيذ التسميات وملخصات.</font></font></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms"><font><font>نماذج HTML</font></font></a></dt> - <dd><font><font>أشكال هي جزء مهم جدا من الشبكة - هذه توفر الكثير من الوظائف التي تحتاج إليها للتفاعل مع المواقع على شبكة الإنترنت، على سبيل المثال تسجيل وتسجيل الدخول، وإرسال ردود الفعل، وشراء المنتجات، وأكثر من ذلك. هذه الوحدة التي يحصل لك مع خلق الأجزاء العميل من الأشكال.</font></font></dd> -</dl> - -<h2 id="حل_المشاكل_المشتركة_HTML"><font><font>حل المشاكل المشتركة HTML</font></font></h2> - -<p><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto"><font><font>استخدام HTML لحل المشاكل المشتركة</font></font></a><font><font> يوفر روابط لأقسام المحتوى شرح كيفية استخدام HTML لحل مشاكل شائعة جدا عند إنشاء صفحة ويب: التعامل مع العناوين، وإضافة الصور ومقاطع الفيديو، مؤكدا المحتوى، وخلق شكل أساسي، الخ</font></font></p> - -<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><font><font>HTML (لغة توصيف النص التشعبي)</font></font></a><font><font> على MDN</font></font></dt> - <dd><font><font>نقطة الدخول الرئيسية للثائق HTML على MDN، بما في ذلك عنصر مفصلة والسمة المراجع - إذا كنت تريد أن تعرف ما سمات عنصر ديه أو ما تقدر سمة لها، على سبيل المثال، وهذا هو مكان عظيم للبدء.</font></font></dd> -</dl> - -<p> </p> - -<p> </p> - -<div id="eJOY__extension_root" style=""> </div> diff --git a/files/ar/learn/html/introduction_to_html/getting_started/index.html b/files/ar/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 35213057e3..0000000000 --- a/files/ar/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,760 +0,0 @@ ---- -title: ابدء مع HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary" dir="rtl">في هذه المقالة سنغطي أساسيات لغة ترميز النص الفائق (HTML). سنقوم بتوفير تعريف للعناصر، السمات، وجميع المصطلحات الأخرى التي قد تكون قد سمعتها من قبل، ومتى يتم استخدامها في اللغة. سنقوم أيضاً بشرح كيف يتم كتابة العنصر في اللغة، وكيف يتم تنظيم وثيقة لغة ترميز النص الفائق، وسنشرح الميزات الأساسية الأخرى في اللغة. على طول الشرح، سنقوم باستخدام بعض الأمثلة، لنخلق نوعاً من الإثارة!</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th dir="rtl" scope="row">المتطلبات:</th> - <td dir="rtl">أساسيات استخدام الحاسوب، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA_%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A7%D8%AA_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9">البرمجيات الأساسية مثبتة</a>، <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">معرفة أساسية حول التعامل</a> <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/%D8%A7%D9%84%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D9%85%D8%B9_%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA">مع الملفات</a>.</td> - </tr> - <tr> - <th dir="rtl" scope="row">الهدف:</th> - <td dir="rtl">الحصول على معرفة مبدئية باللغة، والحصول على بعض التدريبات لكتابة بعض العناصر في اللغة.</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="ما_هي_HTML؟">ما هي HTML؟</h2> - -<p dir="rtl">لغة ترميز النص الفائق ليس لغة برمجة؛ وإنما <em>لغة ترميزيّة</em> (markup language) تُستخدم لإخبار المتصفح بكيفيّة تنظيم صفحات الويب التي تزورها. يُمكن أن تكون هذه اللغة معقدة أو بسيطة كما يرغبها أن تكون مطور الويب. تتألف هذه اللغة من مجموعة من العناصر، والتي تحيط أو <em>تُرَمِز</em> أجزاء من المحتوى لتجعلها تظهر أو تتصرف بطريقة معينة. الوسوم المغلقة يُمكن أن تحوِّل جزء من النص إلى رابط يشير لموقع آخر، أو يمكن أن تجعل الكلمات مائلة، وهلم جرا. على سبيل المثال، انظر للسطر التالي:</p> - -<pre dir="rtl">قطتي شديدة الجمال</pre> - -<p dir="rtl">إذا أردنا جعل هذا النص فقرة، يمكننا القيام بهذا عن طريق توصيفه على أنه فقرة عن طريق إحاطته بعنصر الفقرة ({{htmlelement("p")}}):</p> - -<pre class="brush: html"><p>قطتي شديدة الجمال</p></pre> - -<div class="note"> -<p dir="rtl"><strong>ملاحظة</strong>: عناصر لغة ترميز النص الفائق غير حساسة لحالة الحرف، أي يُمكِن كتابتها باستخدام حروف صغيرة أو كبيرة. على سبيل المثال يمكن كتابة العنصر {{htmlelement("title")}} بالشكل <code><title></code>، أو <code><TITLE></code>، أو <code><Title></code>، أو <code><TiTlE></code>، إلخ. جميع تلك الأشكال ستعمل بدون مشاكل. الأفضل هو كتابة جميع العنصار بحروف صغيرة لأسباب تنسيقيّة، ومقروئيّة، وغيرها من الأسباب الأخرى.</p> -</div> - -<h2 dir="rtl" id="تشريح_عنصر_لغة_ترميز_النص_الفائق">تشريح عنصر لغة ترميز النص الفائق</h2> - -<p dir="rtl">دعنا نستكشف عنصر الفقرة ذاك أكثر قليلاً:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15908/beautiful-cat.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p dir="rtl">الأجزاء الرئيسية من عنصرنا هي:</p> - -<ol dir="rtl"> - <li><strong>وسم الفتح</strong> (أو وسم البداية أو الوسم الإفتتاحي): يتألف من اسم العنصر (في حالتنا <code>p</code>)، محاطاً بقوس مفتوح وآخر مُغلَق. هذا المكوِّن يحدد بداية العنصر، أو بداية تأثيره (في حالتنا يحدد أين تبدأ الفقرة).</li> - <li><strong>وسم الإغلاق</strong> (أو وسم النهاية أو الوسم الختامي): مشابه لوسم البداية، ماعدا أنه يتضمن شرطة مائلة (/) قبل اسم العنصر. هذا المكوِّن يحدد نهاية (في حالتنا نهاية الفقرة). يُعَد نسيان وضع وسم الإغلاق أحد الأخطاء الشائعة التي يقع بها المبتدئون والتي تؤدي إلى مشاكل تنظيميّة في الصفحة (خروج النص من مكان مثلاً).</li> - <li><strong>المحتوى</strong>: هذا المكوِّن يمثل محتوى الذي يُرمِزُهُ العنصر، والذي هو في حالتنا النص.</li> - <li><strong>العنصر</strong>: يتألف من وسم البداية، ووسم الإغلاق، والمحتوى (جميع المحتويات السابقة).</li> -</ol> - -<h3 dir="rtl" id="التعلم_النشط_إنشاء_أول_عنصر_لك_في_لغة_ترميز_النص_الفائق">التعلم النشط: إنشاء أول عنصر لك في لغة ترميز النص الفائق</h3> - -<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> عن طريق إحاطته باستخدام الوسمين <code><em></code> و <code></em></code> (ضع <code><em></code> قبله <em>لفتح العنصر</em>، و <code></em></code> بعده <em>لإغلاق العنصر</em>)، هذا ينبغي أن يحوِّل النص إلى مائل. يمكنك رؤية التغييرات في منطقة <em>الخرج</em>.</p> - -<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادتها إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> - This is my text. -</textarea> - -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<p> </p> - -<pre class="brush: css">html { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<em>This is my text.</em>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 dir="rtl" id="العناصر_المتداخلة">العناصر المتداخلة</h3> - -<p dir="rtl">يمكنك وضع عنصر بداخل عنصر أخر أيضاً، وهذا ما يدعى <strong>بالتداخل</strong> (nesting). إذا أردنا تحديد أن قطتنا جميلة <strong>جداً</strong>، يمكننا إحاطة الكلمة "جداً" بالعنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a>، الذي يدل على تأكيد الكلمة بشدّة:</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>جداً</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> - -<p dir="rtl">عليك أن تتأكد من أن عناصرك متداخلة بشكل صحيح. في المثال أعلاه قمنا بفتح العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/p" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><p></code></a> أولاً، وبعده العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a>، وبالتالي علينا إغلاق العنصر <a class="new" href="https://developer.mozilla.org/ar/docs/Web/HTML/Element/strong" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><strong></code></a> ويليه الآخر. فالشكل التالي ليس صحيحاً:</p> - -<pre class="example-bad brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>قطتي جميلة</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">>جداً</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span></code></pre> - -<p dir="rtl">على العناصر أن تُفتَح وتُغلَق بشكل صحيح ليكونوا بشكل واضح داخل أو خارج بعضهما البعض. فإذا تشابكوا بشكل خاطئ كما في الأعلى، سيقوم مُتصفحك بمحاولة القيام بأفضل تخمين حيال ما تحاول القيام به، والذي قد يؤدي إلى نتائج تنسيقيّة خاطئة. لذلك لا تقم بهذا!</p> - -<h3 dir="rtl" id="العناصر_المستحوذة_والمُضمَنِة">العناصر المستحوذة والمُضمَنِة</h3> - -<p dir="rtl">يوجد تصنيفين مهمين للعناصر في لغة الترميز النص الفائق، والذين ينبغي عليك معرفتهم، وهم العناصر المستحوذة (أو الكتلية block elements) والعناصر المُضمَنِة (inline elements).</p> - -<ul dir="rtl"> - <li>ستظهر العناصر الكتلية (Block-level elements) الموجودة في كتلة ظاهرة في الصفحة في سطر جديد مهما كان المحتوى الذي قبلها، وأي محتوى سيأتي بعدها سيظهر أيضاً في سطر جديد. تميل العناصر الكتلية إلى أن تكون عناصر هيكلية للصفحة التي تُمثلُها، فعلى سبيل المثال، الفقرات، والقوائم، وقوائم الملاحة (Navigation Menus)، والذيول (Footers)، إلخ. لا تتداخل العنصر الكتلي بداخل عنصر مضمن، ولكن قد يتداخل بداخل عنصر كتلي آخر.</li> - <li>العناصر المضمنة هي تلك العناصر لتي تُحتوى بداخل العناصر الكتلية وتحيط بأجزاء صغيرة فقط من محتوى الوثيقة، وليس فقرات كاملة أو مجموعات من المحتويات. العنصر المضمن لا يُنشئ سطر جديد ليظهر في الوثيقة، فيمكن أن يظهر بشكل طبيعي بجانب فقرة، على سبيل المثال العنصر {{htmlelement("a")}} (رابط تشعيبي) أو العناصر التوكيدية مثل {{htmlelement("em")}} أو {{htmlelement("strong")}}.</li> -</ul> - -<p dir="rtl">خذ المثال التالي:</p> - -<pre class="brush: html"><em>first</em><em>second</em><em>third</em> - -<p>fourth</p><p>fifth</p><p>sixth</p> -</pre> - -<p dir="rtl">العنصر {{htmlelement("em")}} هو عنصر مضمن، لذلك كما ترى أدناه، العناصر الثلاثة الأولى تتوضع بنفس السطر بدون وجود مسافات بينها. من الناحية الأخرى، العنصر {{htmlelement("p")}} هو عنصر كتلي، لذلك كل عنصر يظهر على سطر جديد، بمسافات سفلية وعلوية بين كل واحد (تخضع المسافات <a href="/ar/docs/Learn/CSS/Introduction_to_CSS">لتنسيق لغة صفحات الطرز المتراصة</a> الإفتراضي الذي يفرضه على الفقرات).</p> - -<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p dir="rtl"><strong>ملاحظة</strong>: لغة ترميز النص الفائق الإصدار الخامس أعادت تعريف تصنيفات العناصر: انظر إلى <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">تصنيفات محتوى العناصر</a>. في حين أن هذه التعريفات أكثر دقة وأقل غموضاً من السابقة، إلاّ أنهم أكثر تعقيداً من ناحية الفهم، لذلك سنكمل باستخدام التعريفات القديمة في هذا الموضوع</p> -</div> - -<div class="note"> -<p dir="rtl"><strong>ملاحظة</strong>: المصطلحات "كتلي" و "ضمني" المستخدمة في هذا الموضوع، لا ينبغي أن يشوشوك مع المصطلحات المستخدمة في مقالة <a href="/ar/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">أنواع صناديق لغة صفحات الطرز المتراصة</a> التي تحمل نفس الاسم. في حين أنهم مرتبطين إفتراضياً، إلا أن تغيير نوع العرض في صفحات الطرز المتراصة لا يغير تصنيف العنصر ولا يؤثر على العناصر التي تحتوي وعلى ولا على العناصر التي سيتم إحتواءها. أحد الأسباب التي جعلت لغة ترميز النص الفائق الإصدار الخامس تتخلى عن هذه المصطلحات هي لمنع هذا الارتباك.</p> -</div> - -<div class="note"> -<p dir="rtl"><strong>ملاحظة</strong>: يمكنك إيجاد صفحات مرجعية مفيدة تتضمن قوائم تحوي العناصر الكتلية والمضمنة، انظر إلى <a href="/ar/docs/Web/HTML/Block-level_elements">العناصر الكتلية</a> و <a href="/ar/docs/Web/HTML/Inline_elements">العناصر المضمنة</a>.</p> -</div> - -<h3 dir="rtl" id="العناصر_الفارغة">العناصر الفارغة</h3> - -<p dir="rtl">لا تتبع جميع العناصر النمط المشروح أعلاه، والذي هو عبارة عن وضع وسم الفتح، وبعده المحتوى، وبعده وسم الإغلاق. فبعض العناصر تتألف من وسم مُفرَد، والذي يستخدم عادةً لإدخال/تضمين شيء في الوثيقة. على سبيل المثال، يُضمِن العنصر {{htmlelement("img")}} صورة في الصفحة في الموضع الذي عُرِفَ فيه:</p> - -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p dir="rtl">ينبغي أن يُخرِج ذلك السطر الشكل التالي في صفحتك:</p> - -<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p dir="rtl"><strong>ملاحظة</strong>: تسمى العناصر الفارغة أحياناً <em>بالعناصر الخاوية</em> (void elements).</p> -</div> - -<h2 dir="rtl" id="السمات">السمات</h2> - -<p dir="rtl">يمكن للعناصر أيضاً أنت تحتوي على سمات، والتي تبدو كشيء من هذا القبيل:</p> - -<p><img alt='&amp;amp;lt;p class="editor-note">قطتي شديدة الجمال&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/15909/beautiful-cat-attribute.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p dir="rtl">تحتوي السمات على معلومات إضافية حول العنصر والتي لا تريد أن تظهرها في المحتوي الفعلي. في حالتنا تسمح لك السمة <code>class</code> أن تعطي العنصر مُعرِف والذي يمكن استخدامه لاحقاً للإشارة للعنصر وإعطائه تنسيق معين وأشياء أخرى.</p> - -<p dir="rtl">السمة يجب أن تملك دائماً:</p> - -<ol dir="rtl"> - <li>مسافة بينها وبين اسم العنصر (أو السمة التي تسبقها، إذا كان العنصر يملك بالفعل سمةً أو أكثر).</li> - <li>اسم السمة، متبوعاً بإشارة يساوي.</li> - <li>علامتي تنصيص تحيط بقيمة السمة.</li> -</ol> - -<h3 dir="rtl" id="التعلم_النشط_إضافة_سمات_إلى_عنصر">التعلم النشط: إضافة سمات إلى عنصر</h3> - -<p dir="rtl">يمكننا أخذ العنصر {{htmlelement("a")}} كمثال آخر. يعد الحرف "a" إختصاراً لكلمة "مرساة (anchor)"، يحول هذا العنصر النص الذي يحيط به إلى رابط تشعبي. يُمكن أن يأخذ هذا العنصر عدداً من السمات، منها:</p> - -<ul dir="rtl"> - <li>السمة <code>href</code>: تحدد قيمة هذه السمة عنوان الويب الذي يشير إليه الرابط؛ لينتقل إلى المتصفح عند الضغط عليه. على سبيل المثال، <code>href="https://www.mozilla.org/"</code>.</li> - <li>السمة <code>title</code>: تحدد قيمة هذه السمة معلومات إضافية حول الرابط، مثل ما هي الصفحة التي يشير إليها هذا الرابط. على سبيل المثال، يمكننا وضع القيمة: <code>title="The Mozilla homepage"</code>. سيظهر هذا النص كتلميح عند التحويم على الرابط.</li> - <li>السمة <code>target</code>: تحدد هذه السمة سياق التصفح الذي سيفتح به الرابط. فعلى سبيل المثال، القيمة <code>target="_blank"</code> ستعرض الرابط (الموقع الذي يشير إلى الرابط) في نافذة جديدة. إذا أردت عرض الرابط في الصحة الحالية، فلا تستخدم هذه السمة وحسب.</li> -</ul> - -<p dir="rtl">قم بتعديل السطر أدناه في منطقة <em>الإدخال</em> لتحويله إلى رابط يشير لموقعك المفضل. أولاً، أضف العنصر <code><a></code>. ثانياً، أضف السمتين <code>href</code> و <code>title</code>. وأخيراً، عَرِف السمة <code>target</code> لفتح الرابط في نافذة جديدة. ستكون قادراً على رؤية التغييرات بشكل حي في منطقة <em>الإخراج</em>. ينبغي أن ترى أنه عند التحويم على الرابط سيُعرض محتوى السمة <code>title</code>، وعند الضغط عليه سيتم الإنتقال إلى عنوان الويب الموجود في السمة <code>href</code>. تذكر أنه ينبغي عليك وضع مسافة بين اسم العنصر وكل سمة يملكها.</p> - -<p dir="rtl">إذا قمت بخطأ ما، فيمكنك دائماً تصفير (إعادت الشيفرة إلى ما كانت عليه) الشيفرة باستخدام زر <em>التصفير</em>. إذا كنت عالقاً بشكل كامل، فيمكنك الضغط على <em>زر عرض الحل</em> لرؤية الجواب.</p> - -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;A link to my favourite website.&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<p> </p> - -<p> </p> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favourite website</a>.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 dir="rtl" id="السمات_البوليانية_(المنطقية)">السمات البوليانية (المنطقية)</h3> - -<p dir="rtl">سترى أحياناً سمات تُكتَب من دون قيمة. تدعى هذه السمات بالسمات المنطقية، ويمكن أن تأخذ هذه السمات قيمة واحدة، والتي هي عادةً اسم السمة نفسها. على سبيل المثال، السمة {{htmlattrxref("disabled", "input")}}، والتي يُمكن أن تُسندها لعناصر الإدخال إذا أردت تعطيلها حتى لا يستطيع المستخدم إدخال أية بيانات فيها.</p> - -<pre><input type="text" disabled="disabled"></pre> - -<p dir="rtl">كاختصار، يمكنك كتابة السمة أيضاً بالشكل التالي (قمنا أيضاً بإضافة عنصر إدخال غير مُعطَل لتوضيح الفكرة أكثر):</p> - -<pre class="brush: html"><input type="text" disabled> - -<input type="text"> -</pre> - -<p dir="rtl">المثالين سيعطيانك نفس النتيجة:</p> - -<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 dir="rtl" id="حذف_علامات_الإقتباس_من_حول_قيم_السمات">حذف علامات الإقتباس من حول قيم السمات</h3> - -<p>When you look around the World Wide Web, you'll come across all kind of strange markup styles, including attribute values without quotes. This is allowable in certain circumstances, but will break your markup in others. For example, if we revisit our link example from earlier, we could write a basic version with only the <code>href</code> attribute, like this:</p> - -<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> - -<p>However, as soon as we add the <code>title</code> attribute in this style, things will go wrong:</p> - -<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> - -<p>At this point the browser will misinterpret your markup, thinking that the <code>title</code> attribute is actually three attributes — a title attribute with the value "The", and two boolean attributes, <code>Mozilla</code> and <code>homepage</code>. This is obviously not what was intended, and will cause errors or unexpected behavior in the code, as seen in the live example below. Try hovering over the link to see what the title text is!</p> - -<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Our advice is to always include the attribute quotes — it avoids such problems, and results in more readable code too.</p> - -<h3 dir="rtl" id="هل_استخدم_علامة_تنصيص_مزدوجة_أم_مفردة؟">هل استخدم علامة تنصيص مزدوجة أم مفردة؟</h3> - -<p>In this article you'll notice that the attributes are all wrapped in double quotes. You might however see single quotes in some people's HTML. This is purely a matter of style, and you can feel free to choose which one you prefer. Both the following lines are equivalent:</p> - -<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>You should however make sure you don't mix them together. The following will go wrong!</p> - -<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>If you've used one type of quote in your HTML, you can include the other type of quote without causing any problems:</p> - -<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>However if you want to include a quote within the quotes where both the quotes are of the same type(single quote or double quote), you'll have to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">use HTML entities</a> for the quotes.</p> - -<h2 dir="rtl" id="تشريح_وثيقة_لغة_ترميز_النص_الفائق">تشريح وثيقة لغة ترميز النص الفائق</h2> - -<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>Here we have:</p> - -<ol> - <li><code><!DOCTYPE html></code>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this: - - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.</li> - <li><code><html></html></code>: The {{htmlelement("html")}} element. This element wraps all the content on the entire page, and is sometimes known as the root element.</li> - <li><code><head></head></code>: The {{htmlelement("head")}} element. This element acts as a container for all the stuff you want to include on the HTML page that <em>isn't</em> the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.</li> - <li><code><meta charset="utf-8"></code>: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later.</li> - <li><code><title></title></code>: The {{htmlelement("title")}} element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favorite it.</li> - <li><code><body></body></code>: The {{htmlelement("body")}} element. This contains <em>all</em> the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.</li> -</ol> - -<h3 dir="rtl" id="التعلم_النشط_إضافة_بعض_الميزات_لوثيقة_ترميز_النص_الفائق">التعلم النشط: إضافة بعض الميزات لوثيقة ترميز النص الفائق</h3> - -<p>If you want to experiment with writing some HTML on your local computer, you can:</p> - -<ol> - <li>Copy the HTML page example listed above.</li> - <li>Create a new file in your text editor.</li> - <li>Paste the code into the new text file.</li> - <li>Save the file as <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can also find this basic HTML template on the <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p>You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">So in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case.) We'd like you to have a go at implementing the following steps:</p> - -<ul> - <li>Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an <code><h1></code> opening tag and <code></h1></code> closing tag.</li> - <li>Edit the paragraph content to include some text about something you are interested in.</li> - <li>Make any important words stand out in bold by wrapping them inside a <code><strong></code> opening tag and <code></strong></code> closing tag</li> - <li>Add a link to your paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">explained earlier in the article</a>.</li> - <li>Add an image to your document, below the paragraph, as <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">explained earlier in the article</a>. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)</li> -</ul> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<p> </p> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;This is my page&lt;/p&gt; -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -img { - max-width: 100%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<p> </p> - -<p> </p> - -<p> </p> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> - -<p> </p> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 dir="rtl" id="المساحات_الفارغة_في_لغة_ترميز_النص_الفائق">المساحات الفارغة في لغة ترميز النص الفائق</h3> - -<p>In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:</p> - -<pre class="brush: html"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p>No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider formatting it.</p> - -<h2 id="Entity_references_Including_special_characters_in_HTML">Entity references: Including special characters in HTML</h2> - -<p>In HTML, the characters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> and <code>&</code> are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?</p> - -<p>We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semicolon (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Literal character</th> - <th scope="col">Character reference equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p>In the below example, you can see two paragraphs, which are talking about web technologies:</p> - -<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> - -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> - -<p>In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <code><p></code> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.</p> - -<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: A chart of all the available HTML character entity references can be found on Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> -</div> - -<h2 dir="rtl" id="التعليقات_في_لغة_ترميز_النص_الفائق">التعليقات في لغة ترميز النص الفائق</h2> - -<p>In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.</p> - -<p>To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <code><!--</code> and <code>--></code>, for example:</p> - -<pre class="brush: html"><p>I'm not inside a comment</p> - -<!-- <p>I am!</p> --></pre> - -<p>As you can see below, the first paragraph appears in the live output, but the second one doesn't.</p> - -<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 dir="rtl" id="الملخص">الملخص</h2> - -<p>You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!</p> - -<div class="note"> -<p><strong>Note</strong>: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout). HTML and CSS go very well together, as you'll soon discover.</p> -</div> - -<h2 dir="rtl" id="انظر_أيضاً">انظر أيضاً</h2> - -<ul dir="rtl"> - <li> - <p><a href="/ar/docs/Web/HTML/Applying_color">إضافة لون إلى عناصر لغة ترميز النص الفائق باستخدام صفحات الطرز المتراصة.</a></p> - </li> -</ul> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index fba39b360c..0000000000 --- a/files/ar/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,657 +0,0 @@ ---- -title: أساسيات النصوص في لغة ترميز النص الفائق -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -tags: - - العنونة - - الفقرات - - النصوص - - دليل - - مبدئين - - مقدمة إلى لغة ترميز النص الفائق -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary" dir="rtl">أحد الأهداف الرئيسية للغة ترميز النص الفائق هي هيكلة النصوص وإعطائها هدف ووظيفة (كما تُعرف هذه الوظيفة ب {{glossary("semantics")}}) حتّى يتمكن المتصفح بعرض النصوص بطريقة مناسبة. تشرح هذه المقالة الطريقة التي يُمكن استخدام هذه اللغة لهيكلة صفحة تتكون من نصوص، عن طريق إضافة عناوين وفقرات، ومؤكدات على الكلمات (حروف غامقة ومائلة، على سبيل المثال)، وإنشاء قوائم، وغيرها.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th dir="rtl" scope="row">المتطلبات:</th> - <td dir="rtl">معرف بسيطة بلغة ترميز النص الفائقة، كما هو مشروح في <a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">مقالة البدء مع اللغة</a>.</td> - </tr> - <tr> - <th dir="rtl" scope="row">الهدف:</th> - <td dir="rtl">تعلم كيفية ترميز صفحة بسيطة مؤلفة من نصوص لإعطائها هيكلية ووظيفة.</td> - </tr> - </tbody> -</table> - -<h2 dir="rtl" id="الأساسيات_العناوين_والفقرات">الأساسيات: العناوين والفقرات</h2> - -<p dir="rtl">تتألف معظم النصوص المُنظمة من عناوين وفقرات، بغض النظر عما إذا كنت تقرأ قصة، أو جريدة، أو كتاب جامعي، أو مجلة ... إلخ.</p> - -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> - -<p dir="rtl">بحيث يجعل المحتوى المنظم القراءة أكثر سهولة ومتعة.</p> - -<p dir="rtl">في لغة ترميز النص الفائق، تحاط الفقرات بالعنصر {{htmlelement("p")}}، كالتالي:</p> - -<pre class="brush: html"><p>I am a paragraph, oh yes I am.</p></pre> - -<p dir="rtl">وتحاط العناوين بوسوم العنونة المخصصة:</p> - -<pre class="brush: html"><h1>I am the title of the story.</h1></pre> - -<p dir="rtl">يوجد ست عناوين متدرجة المستويات، وهي {{htmlelement("h1")}}، و {{htmlelement("h2")}}، و {{htmlelement("h3")}}، و {{htmlelement("h4")}}، و {{htmlelement("h5")}}، و {{htmlelement("h6")}}. يمثل الوسم <code><h1></code> العنوان الرئيسي، بينما يمثل الوسم <code><h2></code> عنوان فرعي، والوسم <code><h3></code> عنوان فرعي للعنوان الفرعي الأول، وهكذا.</p> - -<h3 dir="rtl" id="تنفيذ_التسلسل_الهيكلي">تنفيذ التسلسل الهيكلي</h3> - -<p dir="rtl">على سبيل المثال، في قصة ما، سيمثل الوسم <code><h1></code> عنوان القصة، والوسم <code><h2></code> سيمثل عنوان كل فصل، بينما سيمثل الوسم <code><h3></code> القسم الفرعي لكل فصل،وهلم جرا.</p> - -<pre class="brush: html"><h1>The Crushing Bore</h1> - -<p>By Chris Mills</p> - -<h2>Chapter 1: The dark night</h2> - -<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> - -<h2>Chapter 2: The eternal silence</h2> - -<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> - -<h3>The specter speaks</h3> - -<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p></pre> - -<p dir="rtl">فتحديد وظيفة بعض العناصر يعود لك، طالما أنك تستخدم تسلسل منطقي. ولكنك تحتاج إلى أن تضع بالإعتبار بعض الأمور عندما تقوم بتنظيم محتوى مشابه:</p> - -<ul dir="rtl"> - <li>من الأفضل أن تستخدم والوسم <code><h1></code> مرة واحدة في كل صفحة، حيث يعد يمثل هذا الوسم أعلى مستويات العنونة، وبقية العناوين تتوضع أسفله بشكل تسلسلي.</li> - <li>تأكد أنك تستخدم العناوين بترتيبها التسلسلي الصحيح. أي لا تستخدم الوسم <code><h3></code> لتمثيل عنوان فرعي، وتستخدم بعده الوسم <code><h2></code> لتمثيل عنوان فرعي من درجة ثانية، فهذا لا يبدو منطقياً، كما يؤدي إلى نتائج غريبة!</li> - <li>من الست درجات عنونة المتاحة، حاول ألاَّ تستخدم أكثر من ثلاثة في كل صفحة، مالم يكن هذا ضرورياً.<span id="result_box" lang="ar"><span> حيث أنَّ المستندات ذات المستويات المتعددة (أي تسلسل هرمي عميق) تصبح غير عملية وصعبة التنقل.</span> <span>في مثل هذه الحالات، من المستحسن نشر المحتوى على صفحات متعددة إذا كان ذلك ممكناً.</span></span></li> -</ul> - -<h3 dir="rtl" id="لماذا_نحتاج_الهيكلة_(التنظيم)؟">لماذا نحتاج الهيكلة (التنظيم)؟</h3> - -<p dir="rtl">للإجابة على هذا السؤال، دعنا نأخذ على الملف <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>، يعتبر هذا الملف نقطة البداية لمثالنا في هذه المقالة (وهي وصفحة حمص جميلة). يجب عليك حفظ نسخة من هذا الملف على جهازك، فستحتاجه في تمارين لاحقة. تحتوي جسم الوثيقة على عدة أجزاء من المحتوى، وهي غير مُرمَزِة بأي شكل، ولكنهم مفصولين بسطور.</p> - -<p dir="rtl">بكل الأحوال، عندما ستفتح هذه الوثيقة في متصفحك، سترى أنَّ النص سيظهر كقطعة كبيرة!</p> - -<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> - -<p dir="rtl">يرجع هذا لعدم وجود عناصر لتنظم المحتوى، ولذلك لم يتمكن المتصفح بمعرفة أي جزء هو عنوان وأي جزء هو فقرة. المزيد:</p> - -<ul dir="rtl"> - <li>يميل المستخدمون لتصفح صفحات الويب بسرعة شديدة لإيجاد محتوى متعلق، فغالباً ما يقومون بقراءة العناوين كبداية (<a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">المستخدمون عادةً ما يقضون وقت قصير جداً في صفحة الويب</a>). فإذا لم يجدوا شيء مفيد خلال بضعة ثواني، فسوف يشعرون بالملل ويقومون بالذهاب إلى مكان آخر.</li> - <li><span id="result_box" lang="ar"><span>تعتبر محركات البحث التي تفهرس محتويات صفحتك العناوين كلمات رئيسية مهمة التأثير على ترتيب الصفحة عند البحث.</span> <span>وبدون العناوين، ستؤدي صفحتك بشكل سيء من حيث </span></span>{{glossary("SEO")}}<span lang="ar"><span> (تحسين محركات البحث).</span></span></li> - <li>غالباً لا يقوم المعاق بصرياً بقراءة صفحات الويب، حيث يقوم بالإستماع لها بدلاً من ذلك. يتم ذلك باستخدم برمجية تسمى بقارئ الشاشة. توفر هذه البرمجية طرق للوصول السريع للنص المُعطى. فمن بين العديد من الأساليب المستخدمة، توفر هذه البرمجية طريقة للحصول على خلاصة المستند من خلال قراءة العناوين، مما يسمح للمستخدمين بالحصول على المعلومات التي يريدونها بسرعة. فإذا كانت العناوين غير متوفرة، سيضطر هؤلاء للسماع للمستند بأكمله.</li> - <li dir="ltr">To style content with {{glossary("CSS")}}, or make it do interesting things with {{glossary("JavaScript")}}, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.</li> -</ul> - -<p>We therefore need to give our content structural markup.</p> - -<h3 id="Active_learning_Giving_our_content_structure">Active learning: Giving our content structure</h3> - -<p>Let's jump straight in with a live example. In the example below, add elements to the raw text in the <em>Input</em> field so that it appears as a heading and two paragraphs in the <em>Output</em> field.</p> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">My short story - -I am a policewoman and my name is Trish. - -My legs are made of cardboard and I am married to a fish.</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> - -<h3 id="Why_do_we_need_semantics">Why do we need semantics?</h3> - -<p>Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of everyday objects is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (do any countries use red to mean "go"? I hope not.)</p> - -<p>In a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. In this context the {{htmlelement("h1")}} element is also a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p> - -<pre class="brush: html"><h1>This is a top level heading</h1></pre> - -<p>By default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using CSS). More importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above.)</p> - -<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p> - -<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> - -<p>This is a {{htmlelement("span")}} element. It has no semantics. You use it to wrap content when you want to apply CSS to it (or do something to it with JavaScript) without giving it any extra meaning (You'll find out more about these later on in the course.) We've applied some CSS to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. It is a good idea to use the relevant HTML element for the job.</p> - -<h2 id="Lists">Lists</h2> - -<p>Now let's turn our attention to lists. Lists are everywhere in life — from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! Lists are everywhere on the Web too, and we've got three different types to worry about.</p> - -<h3 id="Unordered">Unordered</h3> - -<p>Unordered lists are used to mark up lists of items for which the order of the items doesn't matter — let's take a shopping list as an example.</p> - -<pre>milk -eggs -bread -hummus</pre> - -<p>Every unordered list starts off with a {{htmlelement("ul")}} element — this wraps around all the list items:</p> - -<pre class="brush: html"><ul> -milk -eggs -bread -hummus -</ul></pre> - -<p>The last step is to wrap each list item in a {{htmlelement("li")}} (list item) element:</p> - -<pre class="brush: html"><ul> - <li>milk</li> - <li>eggs</li> - <li>bread</li> - <li>hummus</li> -</ul></pre> - -<h4 id="Active_learning_Marking_up_an_unordered_list">Active learning: Marking up an unordered list</h4> - -<p>Try editing the live sample below to create your very own HTML unordered list.</p> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">milk -eggs -bread -hummus</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 6em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> - -<h3 id="Ordered">Ordered</h3> - -<p>Ordered lists are lists in which the order of the items <em>does</em> matter — let's take a set of directions as an example:</p> - -<pre>Drive to the end of the road -Turn right -Go straight across the first two roundabouts -Turn left at the third roundabout -The school is on your right, 300 meters up the road</pre> - -<p>The markup structure is the same as for unordered lists, except that you have to wrap the list items in an {{htmlelement("ol")}} element, rather than <code><ul></code>:</p> - -<pre class="brush: html"><ol> - <li>Drive to the end of the road</li> - <li>Turn right</li> - <li>Go straight across the first two roundabouts</li> - <li>Turn left at the third roundabout</li> - <li>The school is on your right, 300 meters up the road</li> -</ol></pre> - -<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> - -<p>Try editing the live sample below to create your very own HTML ordered list.</p> - -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">Drive to the end of the road -Turn right -Go straight across the first two roundabouts -Turn left at the third roundabout -The school is on your right, 300 meters up the road</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> - -<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> - -<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p> - -<div class="hidden"> -<h6 id="Playable_code_4">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">Quick hummus recipe - - This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. - - Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. - - Ingredients - - 1 can (400g) of chick peas (garbanzo beans) - 175g of tahini - 6 sundried tomatoes - Half a red pepper - A pinch of cayenne pepper - 1 clove of garlic - A dash of olive oil - - Instructions - - Remove the skin from the garlic, and chop coarsely - Remove all the seeds and stalk from the pepper, and chop coarsely - Add all the ingredients into a food processor - Process all the ingredients into a paste. - If you want a coarse "chunky" hummus, process it for a short time - If you want a smooth hummus, process it for a longer time - - For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. - - Storage - - Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. - - Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); - -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> - -<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> - -<h3 id="Nesting_lists">Nesting lists</h3> - -<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p> - -<pre class="brush: html"><ol> - <li>Remove the skin from the garlic, and chop coarsely.</li> - <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> - <li>Add all the ingredients into a food processor.</li> - <li>Process all the ingredients into a paste.</li> - <li>If you want a coarse "chunky" hummus, process it for a short time.</li> - <li>If you want a smooth hummus, process it for a longer time.</li> -</ol></pre> - -<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p> - -<pre class="brush: html"><ol> - <li>Remove the skin from the garlic, and chop coarsely.</li> - <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> - <li>Add all the ingredients into a food processor.</li> - <li>Process all the ingredients into a paste. - <ul> - <li>If you want a coarse "chunky" hummus, process it for a short time.</li> - <li>If you want a smooth hummus, process it for a longer time.</li> - </ul> - </li> -</ol></pre> - -<p>Try going back to the previous active learning example and updating the second list like this.</p> - -<h2 id="Emphasis_and_importance">Emphasis and importance</h2> - -<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p> - -<h3 id="Emphasis">Emphasis</h3> - -<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p> - -<p>I am glad you weren't late.</p> - -<p>I am <em>glad</em> you weren't <em>late</em>.</p> - -<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p> - -<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p> - -<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> - -<h3 id="Strong_importance">Strong importance</h3> - -<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> - -<p>This liquid is <strong>highly toxic</strong>.</p> - -<p>I am counting on you. <strong>Do not</strong> be late!</p> - -<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p> - -<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> - -<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> - -<p>You can nest strong and emphasis inside one another if desired:</p> - -<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — -if you drink it, <strong>you may <em>die</em></strong>.</p></pre> - -<h3 id="Active_learning_Let's_be_important!">Active learning: Let's be important!</h3> - -<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p> - -<div class="hidden"> -<h6 id="Playable_code_5">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input"><h1>Important notice</h1> - -<p>On Sunday January 9th 2010, a gang of goths were -spotted stealing several garden gnomes from a shopping -center in downtown Milwaukee. They were all wearing green -jumpsuits and silly hats, and seemed to be having a whale -of a time. If anyone has any information about this -incident, please contact the police now.</p></textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show suggestion" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> - -<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> - -<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> - -<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> - -<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p> - -<ul> - <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> - <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> - <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> -</ul> - -<div class="note"> -<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p> -</div> - -<pre class="brush: html"><!-- scientific names --> -<p> - The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) - is the most common hummingbird in Eastern North America. -</p> - -<!-- foreign words --> -<p> - The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, - <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. -</p> - -<!-- a known misspelling --> -<p> - Someday I'll learn how to <u>spel</u> better. -</p> - -<!-- Highlight keywords in a set of instructions --> -<ol> - <li> - <b>Slice</b> two pieces of bread off the loaf. - </li> - <li> - <b>Insert</b> a tomato slice and a leaf of - lettuce between the slices of bread. - </li> -</ol></pre> - -<h2 id="Summary">Summary</h2> - -<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> - -<p> </p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> - -<p> </p> diff --git a/files/ar/learn/html/introduction_to_html/index.html b/files/ar/learn/html/introduction_to_html/index.html deleted file mode 100644 index f237220f27..0000000000 --- a/files/ar/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: مقدمة إلى HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - HTML - - صفحة هبوط - - لغة ترميز النص الفائق -translation_of: Learn/HTML/Introduction_to_HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary" dir="rtl">تعد لغة ترميز النص الفائق (HTML) لغة بسيطة جداً في صميمها، فهي مكوِّنة من عناصر يمكن تطبيقها على أجزاء من النص لإعطائها شكل أو وصف مختلف في الوثيقة (هل هذا النص فقرة؟ قائمة نقطية؟ هل هو جزء من جدول؟)، وتقوم بهيكلة الوثيقة إلى أقسام مُقسمة منطقياً (هل تملك تلك الصفحة رأس؟ ثلاث أعمدة من المحتوى؟ قائمة؟)، وتقوم بتضمين محتوى مثل الصور والفيديوهات في الصفحة. هذا القسم سوف يقدم لك أول وظيفتين سلف ذكرهما، كما سيغطي المفاهيم الأساسية والبنيّة الكتابيّة (syntax) التي تحتاج معرفتها لفهم اللغة.</p> - -<h2 dir="rtl" id="المتطلبات">المتطلبات</h2> - -<p dir="rtl">لا تحتاج لأي معرفة مسبقة في لغة ترميز النص الفائق للبدء في هذه الوحدة، ولكن يجب على الأقل أن تملك معرفة مبدئيّة حول استخدام الحواسيب، واستخدام متصفح الويب بشكل سلبي (بمعنى أخر، النظر إليه والتعامل مع المحتوى). يجب أن تملك بيئة عمل مُعدِة كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">تثبيت البرمجيات الأساسية</a>، ويجب أن يكون لديك معرفة بكيفيّة إنشاء وإدارة الملفات، كما شُرِح في مقالة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">التعامل مع الملفات</a>. كلا المقالتين السابقتين جزء من وحدة <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> المخصصة للمبتدئين.</p> - -<div class="note"> -<p dir="rtl"><strong>ملاحظة</strong>: إن كنت تعمل على حاسوب، جهاز لوحي، أو شيء آخر ولا تملك القدرة على إنشاء ملفات، يمكنك تجربة (معظم) الأمثلة هنا باستخدام محرر شيفرات برمجيّة على الأنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 dir="rtl" id="مقالات_تعليميّة">مقالات تعليميّة</h2> - -<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية، والتي ستتكلم عن جميع المواضيع الأساسيّة في هذه اللغة وستعطيك فرصة لتختبر بعض المهارات.</p> - -<dl> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Getting_started">البدء مع لغة ترميز النص الفائق</a></dt> - <dd dir="rtl">تغطي هذه المقالة أساسيات لغة ترميز النص الفائق، لقد شرحنا هنا العناصر، السمات، وجميع المصطلحات المهمة الأخرى التي قد سمعت عنها، وقد قمنا بشرحها بطريقة ملائمة. لقد قمنا أيضاً بشرح كيفيّة هيكلة (إنشاء) عنصر في اللغة، وكيف يتم استخدام اللغة لهيكلة صفحة قياسيّة، وقمنا بشرح مزايا اللغة الأخرى الأساسيّة. سوف نستخدم أيضاً خلال الشرح بعض الأمثلة لنخلق بعضاً من الإثارة!</dd> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">ماذا يوجد في رأس الصفحة؟ البيانات الوصفية في لغة ترميز النص الفائق</a></dt> - <dd dir="rtl">رأس وثيقة لغة ترميز النص الفائق هو الجزء الذي <strong>لا</strong> يظهر في متصفح الويب عندما يتم تحميل الصفحة. يحتوي رأس الوثيقة على معلومات مثل عنوان الصفحة، وروابط ملفات صفحات الأنماط الانسيابية (إذا أردت أنْ تُنسِق محتوى وثيقتك باستخدام هذه اللغة)، وروابط لأيقونات المُفضلة (favicons)، والبيانات الوصفيّة (هي معلومات حول الوثيقة، مثل من كَتَبها، وكلمات مفتاحيّة مهمة تصفها).</dd> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">أساسيات النصوص في لغة ترميز النص الفائق</a></dt> - <dd dir="rtl">إحدى الوظائف الرئيسيّة للغة ترميز النص الفائق هي وصف النصوص (إعطائها معنىً ودلالة)؛ حتّى يستطيع المتصفح أن يعلم كيف سيعرضها بشكل صحيح. هذه المقالة تقوم بعرض كيف يمكنك استخدام هذه اللغة لتقطيع النص إلى هياكل من العناوين والفقرات، وتعليم الكلمات على أنَّها مهمة، وإنشاء قوائم، والكثير من الأمور الأخرى.</dd> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">إنشاء الوصلات</a></dt> - <dd dir="rtl">الوصلات مهمة جداً، فهي التي تجعل الويب ويباً. هذه المقالة تشرح طريقة إنشاء وصلات، وتناقش الطرق المثلى لاستخدامها.</dd> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">تنسيق النصوص بشكل متقدم</a></dt> - <dd dir="rtl">يوجد العديد من العناصر الأخرى في لغة ترميز النص الفائق لتنسيق النصوص، والتي لم نتكلم عنها في مقالة<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> أساسيات النصوص في لغة ترميز النص الفائق</a>. العناصر المشروحة في هذه المقالة قليل الاستخدام، ولكن من الجيد معرفتها. في هذه المقالة ستتعلم التعامل مع<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> </a>الاقتباسات، القوائم الوصفيّة، الشيفرات البرمجيّة، كتابة كلمات علويّة وسفليّة (مثل التربيع عندما يكتب على عدد بالشكل 2<sup>2</sup>)، معلومات الاتصال، والمزيد من الأمور.</dd> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">هيكليّة الوثيقة والموقع</a></dt> - <dd dir="rtl">كما يتم تعريف الأجزاء الفرديّة من صفحتك (مثل الفقرة والصورة)، تُستخدَم لغة ترميز النص الفائق أيضاً لتعريف أقسام موقعك (مثل الرأس، الشريط، وأعمدة المحتوى الرئيسي). هذه المقالة تشرح كيفيّة تخطيط الهيكل الأساسي للموقع، وكيفيّة استخدام اللغة لتمثيل ذلك الهيكل.</dd> - <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">تنقيح شيفرة لغة ترميز النص الفائق</a></dt> - <dd dir="rtl">كتابة وثيقة بلغة ترميز النص الفائق أمر سهل، ولكن ماذا إن حدث خطأ ما، ولم تستطع معرفة مكان ذلك الخطأ؟ هذه المقالة ستقدم لك بعض الأدوات التي ستساعدك على حل المشاكل المشابهة.</dd> -</dl> - -<h2 dir="rtl" id="اختبارات">اختبارات</h2> - -<p dir="rtl">الاختبارات (التقييمات) التالية ستختبر فهمك لأساسيات اللغة المُغطاة في المقالات أعلاه.</p> - -<dl> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">تنسيق رسالة</a></dt> - <dd dir="rtl">سوف تتعلم كتابة رسالة عاجلاً أم آجلاً. إنه لمن المثال المفيد لتجربة مهاراتنا في تنسيق النصوص! لذلك هذا الاختبار سوف يعطيك رسالة لتقوم بتنسيقها.</dd> - <dt dir="rtl"><a href="/ar/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">هيكلة محتوى الصفحة</a></dt> - <dd dir="rtl">هذا الاختبار سوف يختبر قدراتك على استخدام لغة ترميز النص الفائق لهيكلة محتوى صفحة بسيطة، تحتوي على رأس، ذيل، شريط، محتوى رئيسي، وشريط جانبي.</dd> -</dl> - -<h2 dir="rtl" id="طالِع_أيضاً">طالِع أيضاً</h2> - -<dl> - <dt dir="rtl"><a href="https://teach.mozilla.org/activities/web-lit-basics/">أساسيات محو أمية ويب</a></dt> - <dd dir="rtl">درس ممتاز من شركة موزيلا يقوم باستكشاف واختبار الكثير من المهارات التي تحدثنا عنها في وحدة <em>مقدمة </em>إلى HTML<em>.</em> المتعلمون سيحصلون على دراية في قراءة، كتابة، والمشاركة في الويب من خلال هذه الوحدة التي تتألف من ست أجزاء. اكتشف أساسيات الويب من خلال التعلم بطريقة إنتاجيّة وتعاونيّة.</dd> -</dl> - -<div id="eJOY__extension_root" style=""> </div> diff --git a/files/ar/learn/html/tables/index.html b/files/ar/learn/html/tables/index.html deleted file mode 100644 index de12a6ae1a..0000000000 --- a/files/ar/learn/html/tables/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: جداول HTML -slug: Learn/HTML/Tables -translation_of: Learn/HTML/Tables -original_slug: Learn/HTML/الجداول ---- -<div dir="rtl">{{LearnSidebar}}</div> - -<p class="summary" dir="rtl">تتمثل مهمة شائعة جدًا في HTML في هيكلة البيانات الجدولية ، ولديها عدد من العناصر والسمات لهذا الغرض فقط. إلى جانب القليل من CSS للتصميم ، يجعل HTML من السهل عرض جداول المعلومات على شبكة الإنترنت مثل خطة درس مدرستك أو الجدول الزمني في حمام السباحة المحلي الخاص بك أو إحصائيات حول الديناصورات المفضلة لديك أو فريق كرة القدم. تنقلك هذه الوحدة إلى كل ما تحتاج إلى معرفته حول هيكلة بيانات الجداول باستخدام HTML.</p> - -<h2 dir="rtl" id="المتطلبات_الأساسية">المتطلبات الأساسية</h2> - -<p dir="rtl">قبل بدء هذه الوحدة ، يجب أن تكون قد قمت بالفعل بتغطية أساسيات HTML - راجع <a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة إلى HTML</a>.</p> - -<div class="note" dir="rtl"> -<p><strong>ملاحظة</strong>: إذا كنت تعمل على جهاز كمبيوتر / جهاز لوحي / جهاز آخر حيث لا تملك القدرة على إنشاء ملفاتك الخاصة ، فيمكنك تجربة (أكثر من) أمثلة التعليمات البرمجية في برنامج الترميز عبر الإنترنت مثل <a href="http://jsbin.com/">JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 dir="rtl" id="خطوط_إرشاد">خطوط إرشاد</h2> - -<p dir="rtl">تحتوي هذه الوحدة على المقالات التالية:</p> - -<dl> - <dt dir="rtl"><a href="/en-US/docs/Learn/HTML/Tables/Basics">أساسيات جدول HTML</a></dt> - <dd dir="rtl">تبدأ هذه المقالة في البدء بجداول HTML ، والتي تغطي الأساسيات ذاتها ، مثل الصفوف والخلايا ، والعناوين ، وخلايا تجعل الأعمدة والصفوف متعددة ، وكيفية تجميع كل الخلايا في عمود معًا لأغراض التصميم.</dd> - <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">الميزات المتقدمة لجداول HTML وسهولة الوصول إليها </a></dt> - <dd dir="rtl">في المقالة الثانية في هذه الوحدة ، نلقي نظرة على بعض الميزات المتقدمة لجداول HTML - مثل التسميات التوضيحية / الملخصات وتجميع صفوفك في أقسام رأس الجدول والجسم والتذييل - وكذلك النظر في إمكانية الوصول إلى الجداول للمستخدمين ذوي الإعاقات البصرية .</dd> -</dl> - -<h2 dir="rtl" id="تقييم">تقييم</h2> - -<dl> - <dt dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">هيكلة بيانات الكوكب </a></dt> - <dd dir="rtl">في تقييم الجدول الخاص بنا ، نوفر لك بعض البيانات حول الكواكب في نظامنا الشمسي ، ونجعلك تنظّمها في جدول HTML.</dd> -</dl> - -<div id="eJOY__extension_root"></div> |