-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbasic3.html
More file actions
295 lines (243 loc) · 18.1 KB
/
Copy pathbasic3.html
File metadata and controls
295 lines (243 loc) · 18.1 KB
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="أساسيات لغة ترميز النص الفائق اتش.تي.إم.إل | فهم خصائص اتش.تي.إم.إل"/>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="../favicon.png">
<title>HTMLVerse | الأساسيات</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a class="red" href="./index.html#3">X</a>
<h1>أساسيات اتش.تي.إم.إل</h1>
</header>
<main>
<!-- BASIC 3 -->
<div class="box">
<div class="sub-title">
<h2>٣. فهم خصائص اتش.تي.إم.إل</h2>
<span class="hint">نظري</span>
<p>في هذه الوحدة، ستتعلم عن دور اتش.تي.إم.إل HTML في الويب Web، وما هي خصائص اتش.تي.إم.إل HTML.</p>
</div>
<section id="1">
<h3>أ. ما الدور الذي يلعبه اتش.تي.إم.إل HTML في الويب Web؟</h3>
<p> اتش.تي.إم.إل <abbr title="HyperText Markup Language">HTML</abbr>، يرمز إلى لغة ترميز النص الفائق، هو لغة ترميز لإنشاء صفحات الويب <em>Web</em>. عندما تزور موقعًا إلكترونيًا وترى محتوى مثل الفقرات والعناوين والروابط والصور ومقاطع الفيديو؛ فهذا هو اتش.تي.إم.إل HTML.</p>
<h4>إليك مثال صغير يستخدم عناصر اتش.تي.إم.إل HTML:</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<h1>عنصر العنوان الرئيسي</h1>
<p>أنا عنصر فقرة.</p>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<h1>عنصر العنوان الرئيسي</h1>
<p>أنا عنصر فقرة.</p>
</div>
<br>
<p>تمثل لغة اتش.تي.إم.إل HTML محتوى وهيكل صفحة الويب من خلال استخدام العناصر. معظم العناصر سيكون لها وسم افتتاحي ووسم إغلاق. أحيانًا يُشار إلى هذه الوسوم على أنها وسوم بداية ونهاية. بين هذين الوسمين، سيكون لديك المحتوى. يمكن أن يكون هذا المحتوى نصًا أو عناصر اتش.تي.إم.إل HTML أخرى.</p>
<p>تبدأ كل من العلامات الافتتاحية والختامية بقوس زاوي أيسر <code class="br">></code>، وتنتهي بقوس زاوي أيمن <code class="br"><</code>، ويوضع اسم العلامة بين هذين القوسين. على الرغم من أن أسماء علامات اتش.تي.إم.إل HTML لا تميز بين الحروف الكبيرة والصغيرة، إلا أنه من المقبول على نطاق واسع ومن الأفضل كتابتها بأحرف صغيرة.</p>
<h4>إليك نظرة أقرب على وسمات الفقرة الافتتاحية والختامية فقط:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<p>
</p>
</code></pre>
</div>
<p>ما يميز وسم البداية عن وسم الإغلاق هو الشرطة المائلة الأمامية <code class="br">/</code> الموضوعة مباشرة بعد القوس الزاوي الأيسر في وسم الإغلاق. بعض عناصر اتش.تي.إم.إل HTML لا تحتوي على وسم إغلاق. هذه تُعرف بالعناصر الفراغية.</p>
<h4>إليك مثال على عنصر صورة وهو عنصر فارغ:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<img>
</code></pre>
</div>
<p>لاحظ أن عنصر الصورة هذا ليس له وسم إغلاق ولا يحتوي على أي محتوى. العناصر الفارغة لا يمكن أن تحتوي على أي محتوى ولها وسم بدء فقط.</p>
<h4>أحيانًا سترى عناصر فارغة تستخدم <code class="br">/</code> قبل <code class="br"><</code> هكذا:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<img />
</code></pre>
</div>
<p>بينما يختار العديد من منسقي الأكواد مثل خاصية "بريتتيير" <em>Prettier</em> تضمين <code class="br">/</code> في العناصر الفارغة، تشير مواصفات اتش.تي.إم.إل HTML إلى أن وجود <code class="br">/</code> "لا يُعتبر وسم البداية وسمًا ذاتيًا الإغلاق بل إنه غير ضروري ولا يؤثر بأي شكل من الأشكال".</p>
<p>في تطوير الواقع العملي، سترى كلا الشكلين، لذا من المهم أن تكون على دراية بكليهما.</p>
<p>إذا كنت ترغب في عرض صورة، ستحتاج إلى تضمين بعض الخصائص داخل عنصر الصورة الخاص بك. الخاصية هي قيمة خاصة تُستخدم لضبط سلوك عنصر اتش.تي.إم.إل HTML.</p>
<h4>إليك مثال على عنصر صورة يحتوي على سمة "اس.ار.سي" <code class="br">src</code>.</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<img src="https://openarabtech.github.io/HTMLVerse/basic/assets/running-cats.jpg">
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview">
<img src="assets/running-cats.jpg">
</div>
<p>تُستخدم السمة "اس.ار.سي" <code class="br">src</code> لتحديد موقع تلك الصورة. بالنسبة لعناصر الصور، من الممارسات الجيدة تضمين سمة أخرى تُسمى السمة "ألتْ" <code class="br">alt</code>. تُستخدم السمة "ألتْ" <code class="br">alt</code> لتوفير نص وصفي قصير للصور</p>
<h4>إليك مثال على عنصر صورة مع سمات "اس.ار.سي" <code class="br">src</code> و "ألتْ" <code class="br">alt</code>:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<img src="https://openarabtech.github.io/HTMLVerse/basic/assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة.">
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview">
<img src="assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة.">
</div>
<p>قد تتساءل إذا كان اتش.تي.إم.إل HTML بمفرده كافياً لبناء موقع ويب. حسنًا، الإجابة هي: يعتمد ذلك. إذا كنت تبني مشروعًا عمليًا صغيرًا يعرض فقط النصوص والصور، قد يكون اتش.تي.إم.إل HTML
وحده كافيًا. ومع ذلك، إذا كنت بصدد إنشاء موقع ويب حديث واحترافي، فستحتاج إلى اتش.تي.إم.إل HTML و "سي.اس.اس" <abbr title="Cascading Style Sheets">CSS</abbr> و "جافاسكريبت" <abbr title="JavaScript programming language">JavaScript</abbr>.</p>
<p>اتش.تي.إم.إل HTML يستخدم للمحتوى والبنية. "سي.اس.اس" CSS يستخدم لتصميم الصفحة. "جافاسكريبت" JavaScript
يستخدم لإضافة التفاعل على صفحات الويب الخاصة بك. تشبيه جيد لذلك هو مقارنة اتش.تي.إم.إل HTML و "سي.اس.اس" CSS و "جافاسكريبت" JavaScript
بمبنى مكتمل.</p>
<p>تمثل اتش.تي.إم.إل HTML الكتل والخرسانة والحديد التي تكوّن الجدران. إنها الأساس الذي يجعل المبنى قويًا. تمثل "سي.اس.اس" CSS التصميم الداخلي والخارجي الذي يجعل المنزل جميلاً. تمثل "جافاسكريبت" JavaScript نظام الكهرباء والمياه الذي يضمن الوصول المستمر إلى المياه والكهرباء.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ماذا تعني اتش.تي.إم.إل HTML ؟</h5>
<p>١. لغة صانع النص الفائق ❌</p>
<p>٢. لغة علامة النص الفائق ❌</p>
<p>٣. لغة تنسيق النص الفائق ❌</p>
<p><mark>٤. لغة ترميز النص الفائق ✅ (HyperText Markup Language)</mark></p>
<br>
<h5>أي مما يلي هو الصيغة الصحيحة لعلامة الإغلاق؟</h5>
<p>١. <;p> ❌</p>
<p>٢. <p> ❌</p>
<p><mark>٣. <p/> ✅</mark></p>
<p>٤. <///p/> ❌</p>
<br>
<h5>أي مما يلي يعد سمة صالحة تستخدم داخل عنصر <code class="br">img</code> ؟</h5>
<p><mark>١. src ✅</mark></p>
<p>٢. bold ❌</p>
<p>٣. closing ❌</p>
<p>٤. div ❌</p>
</div>
</section>
<section id="2">
<h3>ب. ما هي السمات وكيف تعمل؟</h3>
<p>السمة هي قيمة تُوضع داخل وسم فتح عنصر اتش.تي.إم.إل HTML. تُوفر السمات معلومات إضافية حول العنصر أو تُحدد كيفية عمله.</p>
<p>هذا هو بناء الجملة الأساسي لسمة ما:</p>
<h4>القاعدة :</h4>
<div class="rules">
<p><strong>
<element attribute="value"></element>
</strong></p>
</div>
<div class="translate">
<p><strong>
<العنصر السمة="القيمة"></العنصر>
</strong></p>
</div>
<p>اسم السمة متبوع بعلامة يساوي <code class="br">=</code> وقيمة بين علامتي اقتباس. يمكن أن تكون القيمة سلسلة نصية أو رقمًا، حسب السمة.</p>
<p>يستخدم هذا المثال الأول سمتي "اتش.ريف" <code class="br">href</code> و "تارغيت" <code class="br">target</code>
. تُحدد سمة "اتش.ريف" <code class="br">href</code> عنوان "للرابط" <abbr title="Uniform Resource Locator">URL</abbr>
، بينما تُحدد سمة "تارغيت" <code class="br">target</code>
مكان فتح الرابط.</p>
<h4>المثال :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<a href="https://openarabtech.github.io/HTMLVerse/" target="__blank">تصفح موقع عالم اتش.تي.إم.إل</a>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview">
<a href="https://arabiverse.github.io/HTMLverse/" target="__blank">تصفح موقع عالم اتش.تي.إم.إل</a>
</div>
<p>بدون سمة "اتش.ريف" <code class="br">href</code>، لن يعمل الرابط لعدم وجود عنوان URL للوجهة. لذا، يجب تضمين سمة "اتش.ريف" <code class="br">href</code> هذه لجعل الرابط فعالاً. تتيح لك خاصية تارغيت="ــبلانك" <code class="br">"target="__blank</code> فتح الرابط في علامة تبويب جديدة بالمتصفح. ستتعلم المزيد عن سمة "تارغيت" في الدروس القادمة.</p>
<p>السمات المشتركة الأخرى هي السمة "اس.ار.سي" <code class="br">src</code>، والسمة "التْ" <code class="br">alt</code>، أو البديلة - والتي تستخدم لتحديد مصدر الصورة وتوفير نص وصفي بديل للصورة، على التوالي.</p>
<h4>مثال :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<img src="https://openarabtech.github.io/HTMLVerse/basic/assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة.">
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview">
<img src="assets/cats.jpg" alt="قطتان صغيرتان مخططان نائمَتان معًا على الأريكة.">
</div>
<p>على غرار سمة "اتش.ريف" <code class="br">href</code>، تُعدّ سمة "اس.ار.سي" <code class="br">src</code> ضروريةً لأنها تُحدد ملف الصورة المراد عرضه. سمة "التْ" <code class="br">alt</code> ليست ضروريةً، ولكن يُنصح بها لأغراض إمكانية الوصول. تعني إمكانية الوصول ضمان قدرة الجميع، بمن فيهم ذوو الإعاقة، على استخدام وفهم أشياء مثل مواقع الويب والتطبيقات والمساحات المادية. ستتعلم المزيد عن إمكانية الوصول في الدروس القادمة.</p>
<p>بعض السمات فريدة بعض الشيء من حيث بناء جملتها النحوية مثل السمة "شيكيد" <code class="br">checked</code></p>
<h4>مثال :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<input type="checkbox" checked />
</code></pre>
</div>
<h4>معاينة :</h4>
<p>حاول النقر فوق مربع الاختيار في نافذة المعاينة لرؤيته يتناوب بين حالة محددة وحالة غير محددة.</p>
<div class="preview">
<input type="checkbox" checked />
</div>
<p>في المثال التالي، لدينا عنصر "إدخال" <code class="br">input</code> مع ضبط سمة "النوع" <code class="br">type</code> على "مربع اختيار" <code class="br">checkbox</code>. تُستخدم المدخلات لجمع البيانات من المستخدمين، وتُحدد سمة "النوع" <code class="br">type</code> نوع الإدخال. في هذه الحالة، يكون هذا الإدخال "مربع اختيار" <code class="br">checkbox</code>. ستتعلم المزيد عن كيفية عمل المدخلات في الدروس القادمة.</p>
<p>تُستخدم السمة "شيكيد" <code class="br">checked</code> لتحديد خانة الاختيار التي يجب تحديدها افتراضيًا. لا تتطلب السمة "شيكيد" <code class="br">checked</code> قيمة. في حال وجودها، سيتم تحديد خانة الاختيار افتراضيًا. أما في حال عدم وجودها، فسيتم إلغاء تحديد خانة الاختيار. تُعرف هذه السمة باسم السمة المنطقية "بوليان" <strong>boolean</strong>. ستتعلم المزيد عن القيم المنطقية بشكل عام عند الانتقال إلى قسم "جافاسكريبت" JavaScript
.</p>
<h4>مثال :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<input type="checkbox" />
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview">
<input type="checkbox" />
</div>
<p>هناك العديد من السمات المنطقية الشائعة التي ستصادفها في اتش.إم.إل HTML، مثل معطل "ديزايبليد" <code class="br">disabled</code> وللقراءة فقط "ريد.أنلي" <code class="br">readonly</code> ومطلوب "ريكوايريد" <code class="br">required</code>. تُستخدم هذه السمات لتحديد حالة العنصر، مثل ما إذا كان "معطلاً" <code class="br">disabled</code> أو "للقراءة فقط" <code class="br">readonly</code> أو "مطلوباً" <code class="br">required</code>.</p>
<h4>مثال :</h4>
<p>هذا مثال على عنصر إدخال نص "مُعطّل" <code class="br">disabled</code> افتراضيًا.</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<input type="text" disabled />
</code></pre>
</div>
<h4>معاينة :</h4>
<p>جرّب النقر على عنصر الإدخال في نافذة المعاينة.</p>
<div class="preview">
<input type="text" disabled>
</div>
<h4>مثال :</h4>
<p>هذا مثال على عنصر إدخال نص غير مُعطّل افتراضيًا.</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<input type="text" />
</code></pre>
</div>
<h4>معاينة :</h4>
<p>يجب أن يكون بإمكانك الآن النقر فوقه والكتابة داخل الحقل.</p>
<div class="preview">
<input type="text" >
</div>
<p>تحتوي لغة اتش.تي.إم.إل HTML على العديد من السمات التي يُمكن استخدامها لتخصيص سلوك ومظهر عناصر صفحة الويب. يُعد فهم كيفية استخدام "السمات" <strong>attributes</strong> أمرًا أساسيًا لإنشاء محتوى ويب تفاعلي وسهل الوصول. في الدروس القليلة القادمة، ستتعلم المزيد عن سمات اتش.تي.إم.إل HTML وكيفية استخدامها بفعالية في مشاريع تطوير الويب الخاصة بك.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>أي مما يلي يعد مثالاً على سمة منطقية boolean attribute ؟</h5>
<p>١. src ❌</p>
<p>٣. href ❌</p>
<p><mark>٤. disabled ✅ </mark></p>
<p>٤. alt ❌</p>
<br>
<h5>ما هو دور السمة attribute في اتش.تي.إم.إل HTML ؟</h5>
<p><mark>١. توفر السمات attributes معلومات إضافية وتساعد في تحديد سلوك عناصر اتش.تي.إم.إل HTML. ✅</mark></p>
<p>٢. تغير السمات Attributes لون الخلفية للعنصر. ❌</p>
<p>٣. السمات Attributes تغير حجم الخط للعنصر. ❌</p>
<p>٤. السمات Attributes تضيف وظيفة جافاسكريبت JavaScript إلى عنصر. ❌</p>
<br>
<h5>أي مما يلي هو بناء الجملة الصحيح للسمة المنطقية boolean attribute ؟</h5>
<p><mark>١. <input type="checkbox" checked> ✅</mark></p>
<p>٢. <input type="checkbox" checked="on"> ❌</p>
<p>٣. <input type="checkbox" checked="off"> ❌</p>
<p>٤. <input type="checkbox" checked="isChecked"> ❌</p>
</div>
</section>
</div>
<!-- Pages -->
<div class="page-nav">
<a class="prev" href="./basic2.html">→ السابق</a>
<a class="next" href="./basic4.html">التالي ←</a>
</div>
</main>
</body>
</html>