diff options
Diffstat (limited to 'ar-ar/html-ar.html.markdown')
| -rw-r--r-- | ar-ar/html-ar.html.markdown | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/ar-ar/html-ar.html.markdown b/ar-ar/html-ar.html.markdown new file mode 100644 index 00000000..f17164cf --- /dev/null +++ b/ar-ar/html-ar.html.markdown @@ -0,0 +1,121 @@ +--- +language: html +lang: ar-ar +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) |