-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbasic5.html
More file actions
343 lines (248 loc) · 18.8 KB
/
Copy pathbasic5.html
File metadata and controls
343 lines (248 loc) · 18.8 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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
<!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#5">X</a>
<h1>أساسيات اتش.تي.إم.إل</h1>
</header>
<main>
<!-- BASIC 5 -->
<div class="box">
<div class="sub-title">
<h2>٥. فهم قالب اتش.تي.إم.إل الأساسي</h2>
<span class="hint">نظري</span>
<p>في هذه الدروس، ستتعلم عن قالب Boilerplate اتش.تي.إم.إل HTML الجاهز وهو نموذج معد مسبقًا لصفحات الويب Web الخاصة بك.</p>
</div>
<section id="1">
<h3>أ. ما هو دور عنصر الرابط link في لغة اتش.تي.أم.إل HTML، وكيف يمكن استخدامه للربط بملفات الأنماط Stylesheets الخارجية؟</h3>
<p>دعونا نتعلم عن عنصر الرابط <code class="br">link</code>، وكيفية استخدامه للربط بملفات الأنماط <code class="br">stylesheets</code> الخارجية.</p>
<p>يُستخدم عنصر الرابط <code class="br">link</code> لربط الموارد الخارجية مثل أوراق الأنماط <code class="br">stylesheets</code> وأيقونات <strong>icons</strong> الموقع.</p>
<h4>إليك الصياغة الأساسية لاستخدام عنصر الرابط <code class="br">link</code> لملف CSS خارجي:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<link rel="stylesheet" href=./styles.css">
</code></pre>
</div>
<p>تُستخدم السمة "ريل" <code class="br">rel</code> لتحديد العلاقة بين المورد المرتبط ومستند اتش.تي.إم.إل HTML. في هذه الحالة، نحتاج إلى تحديد أن المورد المرتبط هو ورقة أنماط <code class="br">stylesheets</code>.</p>
<p>يعتبر من أفضل الممارسات فصل ملفات اتش.تي.إم.إل HTML و "سي.اس.اس" CSS في ملفات مختلفة. سيستخدم المطورون عنصر الرابط "لينك" <code class="br">link</code> لملف "سي.اس.اس" CSS الخارجي بدلاً من كتابة كل شيء داخل مستند اتش.تي.إم.إل HTML.</p>
<p>تُستخدم خاصية "اتش.ريف" <code class="br">href</code> لتحديد موقع عنوان URL للمورد الخارجي.</p>
<p>تشير النقطة <code class="br">.</code> متبوعة بشرطة مائلة <code class="br">/</code> في المثال إلى الكمبيوتر للنظر في المجلد الحالي، أو الدليل، عن ملف <strong>styles.css</strong>.</p>
<h4>يجب وضع عنصر الرابط <code class="br">link</code> داخل عنصر الرأس <code class="br">head</code> كما هو موضح في المثال التالي:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أمثلة على عنصر الرابط</title>
<link rel="stylesheet" href="./styles.css">
</head>
</code></pre>
</div>
<p>غالبًا ما سترى عدة "عناصر رابط" <strong>link elements</strong> داخل "قاعدة كود" <em>codebase</em> احترافية تربط بأنماط <code class="br">stylesheets</code> وأشكال <code class="br">fonts</code> وأيقونات <strong>icons</strong> مختلفة. إليك مثالًا على استخدام عنصر الرابط <code class="br">link</code> للربط "بخط خارجي" <em>external Font</em>
من غوغل <em>Google</em> يُسمى "بلاي.وريت كوبا" <strong>Playwright Cuba</strong>:</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<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=Playwrite+CU:wght@100..400&display=swap" rel="stylesheet">
</code></pre>
</div>
<p>خطوط غوغل google
هي مجموعة من "الخطوط المخصصة" <em>custom fonts</em> المجانية <em>free</em> و"المفتوحة المصدر" <strong>open source</strong> التي يمكنك استخدامها داخل أي مشروع. يمكنك اختيار الخطوط <code class="br">(fonts)</code>
التي ترغب في استخدامها وسيوفر لك غوغل google الكود اللازم لِـ اتش.تي.إم.إل HTML و"سي.اس.اس" CSS. في هذا المثال، قيمة "بري.كونكت" <code class="br">preconnect</code> لخاصية "ريل" <code class="br">rel</code> تخبر المتصفح <em>browser</em> بإنشاء اتصال مبكر مع القيمة المحددة في خاصية "اتش.ريف" <code class="br">href</code>. يتم ذلك لتسريع أوقات تحميل <strong>loading</strong> هذه الموارد الخارجية.</p>
<p>استخدام شائع آخر لعنصر الرابط <code class="br">link</code> هو الربط بالأيقونات icons.</p>
<h4> إليك مثالاً على الربط <code class="br">link</code> بأيقونة الموقع favicon :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<link rel="icon" href="favicon.ico" />
</code></pre>
</div>
<p>أيقونة الموقع المفضلة، والتي تُعرف اختصارًا "فافيكون" <em>favicon</em>، هي أيقونة icon صغيرة تُعرض عادةً في تبويب المتصفح <em>browser tab</em> بجانب عنوان الموقع. يستخدم الكثير من المواقع أيقونة "فافيكون" favicon لعرض رمز علامتهم التجارية <em>brand icon</em>.</p>
<!-- QUESTIONS -->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما هو دور عنصر الرابط <code class="br">link</code> في اتش.تي.إم.إل HTML ؟</h5>
<p>١. يحدد نوع المحتوى للموارد المرتبطة. ❌</p>
<p>٢. يحدد رؤية المورد المرتبط على صفحة الويب. ❌</p>
<p>٣. يُعرف حجم الخط للمورد المرتبط عند عرضه. ❌</p>
<p><mark>٤. يُستخدم للربط بالموارد الخارجية مثل أوراق الأنماط وأيقونات الموقع. ✅</mark></p>
<br>
<h5>ما هو دور الخاصية "ريل" <code class="br">rel</code> داخل عنصر الرابط <code class="br">link</code>؟</h5>
<p>١. يُستخدم للإشارة إلى لغة المستند المرتبط. ❌</p>
<p><mark>٢. يُستخدم لتحديد العلاقة بين المورد المرتبط ومستند اتش.تي.إم.إل HTML. ✅</mark></p>
<p>٣. يُستخدم لتحديد نوع الوسائط للمستند المرتبط. ❌</p>
<p>٤. يُستخدم لتحديد حجم المستند المرتبط. ❌</p>
<br>
<h5>ما هو الفافيكون favicon؟</h5>
<p>١. نوع من ملفات "جافاسكريبت" JavaScript يُستخدم لتعزيز وظائف الموقع. ❌</p>
<p>٢. نوع من الخطوط <code class="br">fonts</code> يُستخدم لتنسيق النص على الموقع. ❌</p>
<p><mark>٣. أيقونة صغيرة تعرض عادةً في تبويب المتصفح بجانب عنوان الموقع. ✅</mark></p>
<p>٤. ميزة أمان تُستخدم لمنع هجمات البرمجة عبر المواقع XSS. ❌</p>
</div>
</section>
<section id="2">
<h3>ب. ما هو "نموذج اتش.تي.إم.إل" HTML Boilerplate ولماذا هو مهم؟</h3>
<p>دعونا نتعلم المزيد عن قالب اتش.تي.إم.إل <strong>HTML boilerplate</strong>.</p>
<p>ما هو قالب اتش.تي.إم.إل HTML boilerplate ؟ إنه أشبه بقالب جاهز لصفحات الويب <em>webpages</em>. تخيّل أنه أساس أي منزل. يتضمن القالب الهيكل الأساسي والعناصر الأساسية التي يحتاجها كل مستند اتش.تي.إم.إل HTML. فهو يوفر عليك الوقت ويساعد على ضمان إعداد صفحاتك بشكل صحيح.</p>
<h4>إليك مثال:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>عالم اتش.تي.إم.إل</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
</body>
</html>
</code></pre>
</div>
<p>دعونا نحلل الأجزاء الرئيسية لهذا النموذج. أولًا، هناك إعلان "دوك.تايب" <code class="br">DOCTYPE</code>:</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
</code></pre>
</div>
<p>يُخبر المتصفحات بإصدار اتش.تي.إم.إل HTML الذي تستخدمه. ثم يأتي "وسم اتش.تي.إم.إل" <code class="br">html</code>:</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar">
<!-- جميع العناصر الأخرى تذهب إلى الداخل هنا -->
</html>
</code></pre>
</div>
<p>يُغطي هذا العنصر جميع محتوياتك، ويُمكنه تحديد لغة صفحتك. داخل وسم اتش.تي.إم.إل <code class="br">html</code>، ستجد قسمين رئيسيين: رأس الصفحة <code class="br">head</code> ونصها <code class="br">body</code> :</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar">
<head>
<!-- تظهر هنا البيانات الوصفية المهمة "متاداتا" (metadata) -->
</head>
<body>
<!-- العناوين والفقرات والصور وما إلى ذلك تذهب إلى الداخل هنا -->
</body>
</html>
</code></pre>
</div>
<p>يحتوي القسم الرئيسي <strong>head section</strong> على معلومات مهمة خلف الكواليس:</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>عالم اتش.تي.إم.إل</title>
<link rel="stylesheet" href="./styles.css" />
</head>
</code></pre>
</div>
<p>تحتوي بيانات موقعك الوصفية، الموجودة في عناصر التعريف <strong>metadata</strong>، على تفاصيل حول أمور مثل ترميز الأحرف <strong>character encoding</strong>، وكيفية معاينة رابط صفحتك على مواقع مثل منصة فيسبوك. يُحدد عنوان موقعك، الموجود في عنصر العنوان، النص الذي يظهر في علامة تبويب browser tab أو نافذة المتصفح <em>window</em>. وأخيرًا، عادةً ما تربط أوراق الأنماط الخارجية <em>external stylesheets</em> لصفحتك في قسم الرأس head section باستخدام عناصر الارتباط link elements.</p>
<p>قسم الجسم <strong>body section</strong> هو المكان الذي يوضع فيه كل المحتوى الخاص بك:</p>
<div class="sourcecode">
<pre><span>code <br></span><code>
<body>
<h1>أنا عنوان رئيسي</h1>
<p>مثال لنص الفقرة</p>
</body>
</code></pre>
</div>
<p>الآن، ما أهمية النموذج المعياري <em>boilerplate</em>؟ إنه يضمن هيكلة صفحاتك بشكل صحيح وعملها بكفاءة على مختلف المتصفحات <em>browsers</em>. يساعدك استخدام النموذج المعياري boilerplate على تجنب الأخطاء الشائعة واتباع أفضل الممارسات. إنه نقطة انطلاق ممتازة لأي مشروع ويب web. تذكر أنه يمكنك تخصيص نموذجك المعياري ليناسب احتياجاتك. مع اكتسابك الخبرة، يمكنك إضافة عناصر أو علامات تعريفية مفضلة لديك. مع استمرارك في تحسين نموذجك المعياري، ستجد أنه يوفر لك الوقت عند بدء مشاريع جديدة.</p>
<p>في المرة القادمة التي تبدأ فيها ملف اتش.تي.إم.إل <strong>HTML file</strong> جديدًا، فكّر في استخدام نموذج جاهز boilerplate. سيمنحك هذا أساسًا متينًا للبناء عليه.</p>
<!-- QUESTIONS -->
<div class="questions">
<h4>أسئلة :</h4>
<h5>أين تريد تعيين ترميز الأحرف character encoding لصفحتك؟</h5>
<p>١. عنصر "ميتا" <code class="br">meta</code> في الجسم <code class="br">body</code>. ❌</p>
<p>٢. عنصر الرأس <code class="br">head</code> في الجسم <code class="br">body</code>. ❌</p>
<p><mark>٣. عنصر "ميتا" <code class="br">meta</code> في الرأس <code class="br">head</code>. ✅</mark></p>
<p>٤. في "دوك.تايب" <code class="br">DOCTYPE</code>. ❌</p>
<br />
<h5>أين تريد تعيين اللغة lang لصفحتك؟</h5>
<p><mark>١. في وسم اتش.تي.إم.إل html الافتتاحي. ✅</mark></p>
<p>٢. عنصر "ميتا" meta في الجسم body. ❌</p>
<p>٣. عنصر الرأس head في الجسم body. ❌</p>
<p>٤. عنصر "ميتا" meta في الرأس head. ❌</p>
<br />
<h5>ما هو الغرض من القالب النمطي boilerplate ؟</h5>
<p>١. يوفر هيكلًا أساسيًا لمواقعك الإلكترونية.</p>
<p>٢. يضمن لك عدم إغفال أي عناصر أساسية.</p>
<p>٣. يسمح لك بالبدء بكتابة محتوى صفحتك بشكل أسرع.</p>
<p>٤. جميع ما سبق. ✅</strong></p>
</section>
<section id="3">
<h3>ج. ما هو ترميز الأحرف "يو.تي.اف-٨" UTF-8 ، ولماذا هو مطلوب؟</h3>
<p>ما هو ترميز الأحرف "يو.تي.اف-٨" <code class="br">UTF-8</code> ، ولماذا هو مطلوب؟</p>
<p>"يو.تي.اف-٨" <code class="br">UTF-8</code>، أو "تنسيق تحويل يو.سي.اس ٨" <em>UCS Transformation Format 8</em>، هو ترميز أحرف موحد يُستخدم على نطاق واسع على الإنترنت. وترميز الأحرف <em>Character encoding</em> هو الطريقة التي تستخدمها أجهزة الكمبيوتر لتخزين الأحرف كبيانات <strong>data</strong>. في جوهره، كل نص على صفحة ويب هو سلسلة من الأحرف المخزنة كبايت <strong>bytes</strong> واحد أو أكثر. في الحوسبة <strong>computing</strong>، البايت هو وحدة بيانات تتكون من ٨ بيت <strong>8 bits</strong>، أو أرقام ثنائية <strong>binary digits</strong>. يدعم "يو.تي.اف-٨" <code class="br">UTF-8</code> جميع أحرف "مجموعة أحرف يونيكود" Unicode character set، وهذا يشمل الأحرف والرموز من جميع أنظمة الكتابة واللغات والرموز التقنية.</p>
<h4>فيما يلي مثال لاستخدام عنصر "ميتا" <code class="br">meta</code> مع سمة "شارسات" <code class="br">charset</code> لتعيين ترميز الأحرف إلى "يو.تي.اف-٨" <code class="br">UTF-8</code>:</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<meta charset="UTF-8" />
</code></pre>
</div>
<p>من خلال ضبط ترميز الأحرف إلى "يو.تي.اف-٨" <code class="br">UTF-8</code>، سيتم ضمان عرض الحرف <strong>"e"</strong> المميز <strong>"é"</strong> بشكل صحيح على الصفحة.</p>
<h4>فيما يلي مثال كود موسع لاستخدام ترميز الأحرف "يو.تي.اف-٨" <code class="br">UTF-8</code> :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مثال ترميز الأحرف</title>
</head>
<body>
<p>هذا مثال على ترميز الأحرف: café, naïve, résumé.</p>
</body>
</html>
</code></pre>
</div>
<p>بالنسبة لكل مشروع جديد تقوم بإنشائه، يجب عليك تضمين عنصر "ميتا" <code class="br">meta</code> هذا مع تعيين سمة "شارسيت" <code class="br">charset</code> إلى "يو.تي.افء٨" <code class="br">UTF-8</code>.</p>
<!-- QUESTIONS -->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما هي الخاصية المستخدمة لتعيين ترميز الأحرف "يو.تي.اف-٨" <code class="br">UTF-8</code> لمستندات اتش.تي.إم.إل HTML؟</h5>
<p>١. pattern ❌</p>
<p>٢. content ❌</p>
<p><mark>٣. "شارسيت" <code class="br">charset</code> ✅</mark></p>
<p>٤. lang ❌</p>
<br />
<h5>ما هو ترميز الأحرف Character encoding ؟</h5>
<p><mark>١. طريقة تستخدمها أجهزة الكمبيوتر لتخزين الأحرف كبيانات data. ✅</mark></p>
<p>٢. طريقة لضغط compress ملفات النصوص. ❌</p>
<p>٣. يحدد الخط المستخدم لعرض display النص على الشاشة. ❌</p>
<p>٤. يشير إلى عملية تحويل converting اللغة المنطوقة إلى نص مكتوب ❌</p>
<br />
<h5>كم عدد البيتات bits الموجودة داخل البايت byte ؟</h5>
<p>١. (1) ❌</p>
<p>٢. (33) ❌</p>
<p>٣. (7) ❌</p>
<p><mark>٤. (8) ✅</mark></p>
</section>
</div>
<!-- Pages -->
<div class="page-nav">
<a class="prev" href="./basic4.html">→ السابق</a>
<a class="next" href="./basic6.html">التالي ←</a>
</div>
</main>
</body>
</html>