mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2025-04-27 07:33:57 +00:00
[HTML/ar] Translate HTML to Arabic (#2627)
Create ar-ar dir and save the file into it. This is just a translation of the html English file. Please consider forcing right-to-left when (and if) this will be added to the website.
This commit is contained in:
parent
81c7372cea
commit
bd1a18fb44
120
ar-ar/html-ar.html.markdown
Normal file
120
ar-ar/html-ar.html.markdown
Normal file
@ -0,0 +1,120 @@
|
||||
---
|
||||
language: html
|
||||
filename: learnhtml-tf.html
|
||||
contributors:
|
||||
- ["Christophe THOMAS", "https://github.com/WinChris"]
|
||||
translators:
|
||||
- ["Ader", "https://github.com/y1n0"]
|
||||
---
|
||||
|
||||
HTML اختصار ل HyperText Markup Language، أي "لغة ترميز النص التشعبي".
|
||||
هي لغة تمكننا من كتابة صفحات موجهة لشبكة الويب العالمي.
|
||||
هي لغة توصيف للنص، تسمح بكتابة صفحات ويب عن طريق تحديد كيفية عرض النصوص والمعلومات.
|
||||
في الحقيقة، ملفات html هي ملفات تحتوي على نصوص بسيطة.
|
||||
ما هو توصيف النص هذا؟ هو طريقة لتنظيم معلومات النص عن طريق إحاطته بوُسوم فتح ووسوم غلق.
|
||||
هذه الوسوم تعطي معاني محددة للنص الذي تحيطه.
|
||||
كباقي لغات الحاسوب، هناك الكثير من إصدارات HTML. سنتحدث هنا عن HTLM5.
|
||||
|
||||
**ملاحظة:** يمكنك تجريب مختلف الوسوم والعناصر بينما تقرأ الدرس عبر موقع كـ [codepen](http://codepen.io/pen/) حتى ترى تأثيرها وتعرف كيف تعمل وتتعود على استعمالها.
|
||||
هذه المادة تُعنى أساسا بتركيب HTML .وبعض النصائح المفيدة
|
||||
|
||||
|
||||
```html
|
||||
<!-- التعاليق تحاط بوسوم كما في هذا السطر -->
|
||||
|
||||
<!-- #################### الوسوم #################### -->
|
||||
|
||||
<!-- هنا مثال لملف html الذي سنقوم بالعمل عليه. -->
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>موقعي</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>مرحبا بالعالم!</h1>
|
||||
<a href = "http://codepen.io/anon/pen/xwjLbZ">الق نظرة كيف يبدو هذا من هنا</a>
|
||||
<p>هذه فقرة.</p>
|
||||
<p>هذه فقرة أخرى.</p>
|
||||
<ul>
|
||||
<li>هذا عنصر من لائحة غير مرقمة. (لائحة بالعرائض)</li>
|
||||
<li>هذا عنصر آخر</li>
|
||||
<li>وهذا آخر عنصر في اللائحة</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- ملف HTML يُبتدأ دائما بتبيين أنه ملف HTML للمتصفح -->
|
||||
<!doctype html>
|
||||
|
||||
<!-- بعد هذا، يبدأ بفتح الوسم <html> -->
|
||||
<html>
|
||||
|
||||
<!-- الذي سيغلق في نهاية الملف بـ </html>. -->
|
||||
</html>
|
||||
|
||||
<!-- لا يجب كتابة أي شيء بعد وسم النهاية ذاك. -->
|
||||
|
||||
<!-- داخل هذين الوسمين (<html></html>) نجد: -->
|
||||
|
||||
<!-- "ترئيس" محدد ب <head> (يجب أن يغلق بـ </head>) -->
|
||||
<!-- الترأيس يحتوي على أوصاف وبعض المعلومات الإضافية التي لا تظهر في المتصفح, تدعي metadata (المعلومات الوصفية) -->
|
||||
|
||||
<head>
|
||||
<title>موقعي</title><!-- الوسم <title> يحدد للمتصفح العنوان الذي يظهر في المكان المخصص للعنوان في نافذة المتصفح. -->
|
||||
</head>
|
||||
|
||||
<!-- بعد الجزء الخاص بـ <head>، نجد الوسم <body> -->
|
||||
<!-- حتى هنا، لا شيء مما كُتب سيظهر في النافذة الرئيسية للمتصفح. -->
|
||||
<!-- يجب ان نملأ "جسد" الصفحة بالمحتوى الذي نريد أن نُظهر -->
|
||||
|
||||
<body>
|
||||
<h1>مرحبا بالعالم!</h1> <!-- الوسم <h1> خاص بالعناوين الكبيرة. -->
|
||||
<!-- هناك أيضا وسوم خاصة بالعناوين الفرعية من h1، الأكثر أهمية h2 والذي يليه حتى h6 الذي هو آخر عنوان داخلي. -->
|
||||
<a href = "http://codepen.io/anon/pen/xwjLbZ">ألق نظرة كيف يبدو هذا من هنا</a> <!-- يظهر رابطا للصفحة التي داخل السمة href="" -->
|
||||
<p>هذه فقرة.</p> <!-- يمكن من اضافة نصوص للصفحة. يميز الفقرات -->
|
||||
<p>هذه فقرة أخرى.</p>
|
||||
<ul> <!-- الوسم <ul> يخلق لائحة بالعرائض -->
|
||||
<!-- إذا أردت لائحة مرقمة، هناك الوسم <ol>. ويكون الترتيب فيه حسب تموضع العناصر داخله، الأول فالأول. -->
|
||||
<li>هذا عنصر من لائحة غير مرقمة. (لائحة بالعرائض)</li>
|
||||
<li>هذا عنصر آخر</li>
|
||||
<li>وهذا آخر عنصر في اللائحة</li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
<!-- وهكذا، كتابة ملفات HTML جد بسيطة -->
|
||||
|
||||
<!-- يمكنك كذلك إضافة أنواع أخرى من الوسوم -->
|
||||
|
||||
<!-- لادخال صورة: -->
|
||||
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- مصدر الصورة يحدد داخل السمة: src="" -->
|
||||
<!-- مصدرها يمكن أن يكون رابطا أو مسارا لصورة في حاسوبك -->
|
||||
|
||||
<!-- يمكنك كذلك تشكيل جداول. -->
|
||||
|
||||
<table> <!-- نفتح الجدول بالوسم <table> -->
|
||||
<tr> <!-- <tr> تسمح بتشكيل صف. -->
|
||||
<th>العنوان الأول</th> <!-- <th> تسمح لنا بإعطاء عنوان لهذا العمود. -->
|
||||
<th>العنوان الثاني</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>الصف الأول، العمود الأول</td> <!-- <td> تسمح بتشكيل الأعمدة، أو خانات داخل كل صف. -->
|
||||
<td>الصف الأول، العمود الثاني</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>الصف الثاني، العمود الأول</td>
|
||||
<td>الصف الثاني، العمود الأول</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
```
|
||||
|
||||
## الاستعمال
|
||||
|
||||
HTML يُكتب في ملفات تنتهي بـ `.html`.
|
||||
|
||||
## لمعرفة المزيد
|
||||
|
||||
* [wikipedia](https://en.wikipedia.org/wiki/HTML)
|
||||
* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
||||
* [W3School](http://www.w3schools.com/html/html_intro.asp)
|
Loading…
Reference in New Issue
Block a user