blob: b88df66840437c3f20dd8fba364a7f8032463253 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
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)
|
