mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-11-23 06:03:07 +03:00
121 lines
5.6 KiB
HTML
121 lines
5.6 KiB
HTML
---
|
|
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)
|