Skip to content

Commit 3465f3f

Browse files
d3j1xd3j1x
authored
Merge pull request #36 from d3j1x/main
اختبار اتش.تي.إم.إل الأساسي
2 parents 44be64d + e56f92e commit 3465f3f

3 files changed

Lines changed: 295 additions & 4 deletions

File tree

‎basic/basic20.html‎

Lines changed: 254 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="description" content="أساسيات لغة ترميز النص الفائق اتش.تي.إم.إل | اختبار اتش.تي.إم.إل الأساسي"/>
88
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="./styles/basic20.css">
910
<link rel="icon" type="image/x-icon" href="../favicon.png">
1011
<title>HTMLverse | الأساسيات</title>
1112
<link rel="preconnect" href="https://fonts.googleapis.com">
1213
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1314
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
1415

16+
1517
</head>
1618

1719
<body>
@@ -29,15 +31,258 @@ <h1>أساسيات اتش.تي.إم.إل</h1>
2931
<h2>٢٠. اختبار اتش.تي.إم.إل الأساسي</h2>
3032

3133
<span class="hint">اختبار</span>
32-
<p>قريباً</p>
34+
<p></p>
3335
</div>
3436

3537
<section>
38+
<!-- Q1 -->
39+
<h3>١. كيف تعمل خاصية <code class="br">loop</code> داخل عنصر <code class="br">audio</code> ؟</h3>
40+
<div>
41+
<form>
42+
<label><input type="radio" name="q1" value="">يضبط هذا الخيار درجة الصوت ونبرته.</label><br>
43+
<label><input type="radio" name="q1" value="">يسمح لعنصر <code class="br">audio</code> بمزامنة التشغيل مع عناصر الوسائط المتعددة الأخرى على صفحة الويب.</label><br>
44+
<label><input type="radio" name="q1" value="">يعيد تشغيل الصوت بعد انتهائه.</label><br>
45+
<label><input type="radio" name="q1" value="">يُفعّل عنصر <code class="br">audio</code> لإيقاف التشغيل وإعادة تشغيله بتسلسل عشوائي.</label>
46+
</form>
47+
<h4>يعيد تشغيل الصوت بعد انتهائه.</h4>
48+
</div>
3649

37-
50+
<!-- Q2 -->
51+
<h3>٢. ما هو عنصر الفراغ <em>a void element</em> في اتش.تي.إم.إل <em>HTML</em> ؟</h3>
52+
<div>
53+
<form>
54+
<label><input type="radio" name="q2" value="">عنصر لعرض القوائم.</label><br>
55+
<label><input type="radio" name="q2" value="">عنصر يُستخدم لتضمين مقاطع الفيديو على الشاشة.</label><br>
56+
<label><input type="radio" name="q2" value="">عنصر يُستخدم لتضمين الصوت في المستند.</label><br>
57+
<label><input type="radio" name="q2" value="">عنصر بدون أي محتوى أو وسم نهاية.</label>
58+
</form>
59+
<h4>عنصر بدون أي محتوى أو وسم نهاية.</h4>
60+
</div>
3861

39-
62+
<!-- Q3 -->
63+
<h3>٣. أي مما يلي يُعد قيمة صحيحة لسمة <code class="br">id</code> ؟</h3>
64+
<div>
65+
<form>
66+
<label><input type="radio" name="q3" value=""><code class="br">"id="main content</code></label><br>
67+
<label><input type="radio" name="q3" value=""><code class="br">"id="main@content</code></label><br>
68+
<label><input type="radio" name="q3" value=""><code class="br">"id="main-content</code></label><br>
69+
<label><input type="radio" name="q3" value=""><code class="br">"id="main~content</code></label>
70+
</form>
71+
<h4><code class="br">"id="main-content</code></h4>
72+
</div>
73+
74+
<!-- Q4 -->
75+
<h3>٤. كيف يعمل <code class="br">"target="_parent</code> ؟</h3>
76+
<div>
77+
<form>
78+
<label><input type="radio" name="q4" value="">يفتح رابطًا في سياق تصفح جديد.</label><br>
79+
<label><input type="radio" name="q4" value="">يفتح رابطًا في السياق الرئيسي للسياق الحالي.</label><br>
80+
<label><input type="radio" name="q4" value="">يحدد الموضع الذي يجب أن ينتقل إليه المتصفح داخل المستند المرتبط بعد النقر على الرابط.</label><br>
81+
<label><input type="radio" name="q4" value="">يعيد توجيه المستخدم إلى موقع ويب مختلف محدد في سمة <code class="br">href</code>.</label>
82+
</form>
83+
<h4>يفتح رابطًا في السياق الرئيسي للسياق الحالي.</h4>
84+
</div>
85+
86+
<!-- Q5 -->
87+
<h3>٥. ما الفرق بين الخاصية المنطقية <em>a boolean attribute</em> والخاصية العادية <em>a regular attribute</em> ؟</h3>
88+
<div>
89+
<form>
90+
<label><input type="radio" name="q5" value="">يجب أن تُعيّن دائمًا قيمة للسمات المنطقية، بينما لا تحتاج السمات العادية إلى قيم.</label><br>
91+
<label><input type="radio" name="q5" value="">يمكن أن تكون السمة المنطقية موجودة أو غائبة، بينما تحتوي السمة العادية دائمًا على قيمة محددة.</label><br>
92+
<label><input type="radio" name="q5" value="">السمات العادية مطلوبة دائمًا للصور، بينما السمات المنطقية اختيارية.</label><br>
93+
<label><input type="radio" name="q5" value="">يمكن استخدام السمات المنطقية فقط مع مربعات الاختيار، بينما تُستخدم السمات العادية مع أزرار الاختيار.</label>
94+
</form>
95+
<h4>يمكن أن تكون السمة المنطقية موجودة أو غائبة، بينما تحتوي السمة العادية دائمًا على قيمة محددة.</h4>
96+
</div>
97+
98+
<!-- Q6 -->
99+
<h3>٦. ما هو العنصر المستخدم لربط النصوص البرمجية <em>scripts</em> بملف اتش.تي.إم.إل <em>HTML file</em> ؟</h3>
100+
<div>
101+
<form>
102+
<label><input type="radio" name="q6" value=""><code class="br">h2</code></label><br>
103+
<label><input type="radio" name="q6" value=""><code class="br">img</code></label><br>
104+
<label><input type="radio" name="q6" value=""><code class="br">script</code></label><br>
105+
<label><input type="radio" name="q6" value=""><code class="br">ul</code></label>
106+
</form>
107+
<h4><code class="br">script</code></h4>
108+
</div>
109+
110+
<!-- Q7 -->
111+
<h3>٧. ما هو نموذج اتش.تي.إم.إل <em>HTML boilerplate</em> ؟</h3>
112+
<div>
113+
<form>
114+
<label><input type="radio" name="q7" value="">أداة خاصة يستخدمها مطورو الويب لإضافة علامات مائية إلى المستندات.</label><br>
115+
<label><input type="radio" name="q7" value="">قالب يتضمن جميع المعلومات الأساسية اللازمة لمستند اتش.تي.إم.إل <em>HTML document</em> .</label><br>
116+
<label><input type="radio" name="q7" value="">إضافة تُولّد نص <em>lorem ipsum</em> تلقائيًا على الصفحة.</label><br>
117+
<label><input type="radio" name="q7" value="">نوع من لغات الترميز <em>markup language</em> .</label>
118+
</form>
119+
<h4>قالب يتضمن جميع المعلومات الأساسية اللازمة لمستند اتش.تي.إم.إل HTML document .</h4>
120+
</div>
121+
122+
<!-- Q8 -->
123+
<h3>٨. ما هي السمة التي تُطبّق مُعرِّفًا فريدًا <em>a unique identifier</em> على عنصر اتش.تي.إم.إل <em>HTML element</em> ؟</h3>
124+
<div>
125+
<form>
126+
<label><input type="radio" name="q8" value=""><code class="br">href</code></label><br>
127+
<label><input type="radio" name="q8" value=""><code class="br">id</code></label><br>
128+
<label><input type="radio" name="q8" value=""><code class="br">class</code></label><br>
129+
<label><input type="radio" name="q8" value=""><code class="br">action</code></label>
130+
</form>
131+
<h4><code class="br">id</code></h4>
132+
</div>
133+
134+
<!-- Q9 -->
135+
<h3>٩. ما هو كيان اتش.تي.إم.إل <em>HTML entity</em> "مرجع الأحرف" (<em>character reference</em>) ؟</h3>
136+
<div>
137+
<form>
138+
<label><input type="radio" name="q9" value="">صورة تُستخدم لتمثيل حرف في تصميم الويب.</label><br>
139+
<label><input type="radio" name="q9" value="">مجموعة من الأحرف تُستخدم لتمثيل حرف محجوز في اتش.تي.إم.إل <em>HTML</em>.</label><br>
140+
<label><input type="radio" name="q9" value="">وسم تنسيق خاص يُستخدم في اتش.تي.إم.إل <em>HTML</em> .</label><br>
141+
<label><input type="radio" name="q9" value="">تمثيل رسومي لحرف في اتش.تي.إم.إل <em>HTML</em> .</label>
142+
</form>
143+
<h4>مجموعة من الأحرف تُستخدم لتمثيل حرف محجوز في اتش.تي.إم.إل HTML.</h4>
144+
</div>
145+
146+
<!-- Q10 -->
147+
<h3>١٠. ما الغرض من عنصر <code class="br">audio</code> ؟</h3>
148+
<div>
149+
<form>
150+
<label><input type="radio" name="q10" value="">يُستخدم لإضافة الصوت إلى مستند اتش.تي.إم.إل <em>HTML document</em>.</label><br>
151+
<label><input type="radio" name="q10" value="">يُستخدم لتنسيق عناصر <code class="br">audio</code> و <code class="br">video</code> على الصفحة.</label><br>
152+
<label><input type="radio" name="q10" value="">يُستخدم لتمكين المستخدمين من تسجيل أصواتهم مباشرةً على صفحة الويب.</label><br>
153+
<label><input type="radio" name="q10" value="">يُستخدم لجعل النص على صفحة الويب مسموعًا عند النقر عليه.</label>
154+
</form>
155+
<h4>يُستخدم لإضافة الصوت إلى مستند اتش.تي.إم.إل HTML document.</h4>
156+
</div>
157+
158+
<!-- Q11 -->
159+
<h3>١١. أيٌّ مما يلي ليس مثالًا على عنصر اتش.تي.إم.إل <em>HTML element</em> ؟</h3>
160+
<div>
161+
<form>
162+
<label><input type="radio" name="q11" value=""><code class="br">byte</code></label><br>
163+
<label><input type="radio" name="q11" value=""><code class="br">img</code></label><br>
164+
<label><input type="radio" name="q11" value=""><code class="br">h1</code></label><br>
165+
<label><input type="radio" name="q11" value=""><code class="br">link</code></label>
166+
</form>
167+
<h4><code class="br">byte</code></h4>
168+
</div>
169+
170+
<!-- Q12 -->
171+
<h3>١٢. ما دور سمة <code class="br">target</code> داخل عناصر المرساة <em>anchor elements</em> ؟</h3>
172+
<div>
173+
<form>
174+
<label><input type="radio" name="q12" value="">يُستخدم لتحديد مكان فتح المستند المرتبط عند نقر المستخدم عليه.</label><br>
175+
<label><input type="radio" name="q12" value="">يحدد الموضع الذي يجب أن ينتقل إليه المتصفح داخل المستند المرتبط بعد النقر على الرابط.</label><br>
176+
<label><input type="radio" name="q12" value="">يحدد لون الرابط عند تمرير المستخدم فوقه.</label><br>
177+
<label><input type="radio" name="q12" value="">يحدد حجم خط نص الرابط داخل عنصر <code class="br">link</code>.</label>
178+
</form>
179+
<h4>يُستخدم لتحديد مكان فتح المستند المرتبط عند نقر المستخدم عليه.</h4>
180+
</div>
181+
182+
<!-- Q13 -->
183+
<h3>١٣. ما هو المسار المطلق <em>an absolute path</em> ؟</h3>
184+
<div>
185+
<form>
186+
<label><input type="radio" name="q13" value="">مسار نسبي <em>a relative path</em> للملف الحالي.</label><br>
187+
<label><input type="radio" name="q13" value="">مسار <em>A path</em> يتضمن متغيرات <em>includes variables</em> .</label><br>
188+
<label><input type="radio" name="q13" value="">مسار كامل <em>A complete path</em> لمورد، بدءًا من المجلد الجذر <em>from the root directory</em> .</label><br>
189+
<label><input type="radio" name="q13" value="">مسار <em>A path</em> يتضمن أحرف بدل <em>includes wildcard characters</em> .</label>
190+
</form>
191+
<h4>مسار كامل A complete path لمورد، بدءًا من المجلد الجذر from the root directory .</h4>
192+
</div>
193+
194+
<!-- Q14 -->
195+
<h3>١٤. ما دور عنصر <code class="br">link</code> في اتش.تي.إم.إل <em>HTML</em> ؟</h3>
196+
<div>
197+
<form>
198+
<label><input type="radio" name="q14" value="">يُستخدم لتضمين <em>to embed</em> ملفات الصوت أو الفيديو في صفحة الويب.</label><br>
199+
<label><input type="radio" name="q14" value="">يُستخدم للربط بموارد خارجية مثل أوراق الأنماط <em>stylesheets</em> وأيقونات الموقع <em>site icons</em> .</label><br>
200+
<label><input type="radio" name="q14" value="">يُستخدم لتحديد تصميم <em>to define the layout</em> وهيكل صفحة الويب <em>structure of a webpage</em> .</label><br>
201+
<label><input type="radio" name="q14" value="">يُستخدم لإنشاء روابط تشعبية <em>hyperlinks</em> داخل صفحة الويب نفسها.</label>
202+
</form>
203+
<h4>يُستخدم لإنشاء روابط تشعبية hyperlinks داخل صفحة الويب نفسها.</h4>
204+
</div>
205+
206+
<!-- Q15 -->
207+
<h3>١٥. أي مما يلي يُعد قيمة صحيحة للتعامل مع خصائص الرسم البياني المفتوح <em>open graph</em> ؟</h3>
208+
<div>
209+
<form>
210+
<label><input type="radio" name="q15" value=""><code class="br">"og:title"</code></label><br>
211+
<label><input type="radio" name="q15" value=""><code class="br">"og:socialMedia"</code></label><br>
212+
<label><input type="radio" name="q15" value=""><code class="br">"og:mediaOG"</code></label><br>
213+
<label><input type="radio" name="q15" value=""><code class="br">"og:openGraph"</code></label>
214+
</form>
215+
<h4><code class="br">"og:title"</code></h4>
216+
</div>
217+
218+
<!-- Q16 -->
219+
<h3>١٦. أي مما يلي يُعد مثالاً على سمة منطقية <em>a boolean attribute</em> ؟</h3>
220+
<div>
221+
<form>
222+
<label><input type="radio" name="q16" value=""><code class="br">width</code></label><br>
223+
<label><input type="radio" name="q16" value=""><code class="br">src</code></label><br>
224+
<label><input type="radio" name="q16" value=""><code class="br">checked</code></label><br>
225+
<label><input type="radio" name="q16" value=""><code class="br">href</code></label>
226+
</form>
227+
<h4><code class="br">checked</code></h4>
228+
</div>
229+
230+
<!-- Q17 -->
231+
<h3>١٧. أيٌّ مما يلي يُعدّ بناء جملة صحيحًا لعنصر <code class="br">img</code> ؟</h3>
232+
<div>
233+
<form>
234+
<label><input type="radio" name="q17" value=""><code class="br help-code">&lt;img src="image.jpg" desc="Description of the image"&gt;</code></label><br>
235+
<label><input type="radio" name="q17" value=""><code class="br help-code">&lt;img source="image.jpg" desc="Description of the image"&gt;&lt;/img&gt;</code></label><br>
236+
<label><input type="radio" name="q17" value=""><code class="br help-code">&lt;img src="image.jpg" alt="Description of the image"&gt;</code></label><br>
237+
<label><input type="radio" name="q17" value=""><code class="br help-code">&lt;img src="image.jpg" alt="Description of the image"&gt;&lt;/img&gt;</code></label>
238+
</form>
239+
<h4><code class="br help-code">&lt;img src="image.jpg" alt="Description of the image"&gt;</code></h4>
240+
</div>
241+
242+
<!-- Q18 -->
243+
<h3>١٨. ما استخدام عنصر <code class="br">iframe</code> ؟</h3>
244+
<div>
245+
<form>
246+
<label><input type="radio" name="q18" value="">يُستخدم لتضمين مستند آخر داخل مستند اتش.تي.إم.إل الحالي <em>within the current HTML document</em> .</label><br>
247+
<label><input type="radio" name="q18" value="">يُستخدم لإضافة تسميات توضيحية للصور <em>to add captions to images</em> .</label><br>
248+
<label><input type="radio" name="q18" value="">يُستخدم لإضافة معلومات حقوق النشر للوسائط <em>to add copyright information for media</em> .</label><br>
249+
<label><input type="radio" name="q18" value="">يُستخدم لإنشاء روابط تشعبية <em>hyperlinks</em> داخل صفحة الويب نفسها.</label>
250+
</form>
251+
<h4>يُستخدم لتضمين مستند آخر داخل مستند اتش.تي.إم.إل الحالي within the current HTML document .</h4>
252+
</div>
253+
254+
<!-- Q19 -->
255+
<h3>١٩. أيٌّ مما يلي ليس <em>NOT</em> حالة رابط صالحة <em>a valid link state</em> لعناصر المرساة <em>for anchor elements</em> ؟</h3>
256+
<div>
257+
<form>
258+
<label><input type="radio" name="q19" value=""><code class="br">href</code></label><br>
259+
<label><input type="radio" name="q19" value=""><code class="br">visited</code></label><br>
260+
<label><input type="radio" name="q19" value=""><code class="br">active</code></label><br>
261+
<label><input type="radio" name="q19" value=""><code class="br">hover</code></label>
262+
</form>
263+
<h4><code class="br">href</code></h4>
264+
</div>
265+
266+
<!-- Q20 -->
267+
<h3>٢٠. ما دور عنصر <code class="br">title</code> ؟</h3>
268+
<div>
269+
<form>
270+
<label><input type="radio" name="q20" value="">يُستخدم لتضمين مقاطع الفيديو ومحتوى الوسائط المتعددة <em>multimedia content</em> مباشرةً في مستند اتش.تي.إم.إل <em>HTML document</em> .</label><br>
271+
<label><input type="radio" name="q20" value="">يُحدد عنوان المستند <em>the title for a document</em> ويظهر في نافذة أو علامة تبويب المتصفح.</label><br>
272+
<label><input type="radio" name="q20" value="">يُحدد تصميم وموضع العناصر داخل صفحة الويب.</label><br>
273+
<label><input type="radio" name="q20" value="">عنصر يُتيح للمستخدمين تعديل الكود المصدري لصفحة <em>source code</em> الويب.</label>
274+
</form>
275+
<h4>يُحدد عنوان المستند the title for a document ويظهر في نافذة أو علامة تبويب المتصفح.</h4>
276+
</div>
277+
278+
<!-- Centered button -->
279+
<div class="btn-container">
280+
<button class="show-btn" onclick="showAllAnswers()">Show All Answers</button>
281+
</div>
282+
283+
40284
</section>
285+
41286

42287

43288
</div>
@@ -50,7 +295,12 @@ <h2>٢٠. اختبار اتش.تي.إم.إل الأساسي</h2>
50295

51296
</main>
52297

53-
298+
<script>
299+
function showAllAnswers() {
300+
const allAnswers = document.querySelectorAll('h4');
301+
allAnswers.forEach(ans => ans.style.display = 'block');
302+
}
303+
</script>
54304

55305
</body>
56306
</html>

‎basic/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,3 +368,17 @@ section {
368368
.code-block code .value {
369369
color: yellowgreen;
370370
}
371+
372+
.help-code {
373+
display: block;
374+
direction: ltr;
375+
overflow-x: auto;
376+
}
377+
378+
379+
form {
380+
margin-right: 10px;
381+
border: white solid 2px;
382+
border-radius: 2%;
383+
padding: 4px;
384+
}

‎basic/styles/basic20.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
h4 {
2+
display: none; /* hide answers */
3+
margin-top: 5px;
4+
background-color: white;
5+
color: darkgreen;
6+
border: green solid 2px;
7+
padding: 2px;
8+
font-weight: 600;
9+
}
10+
.btn-container {
11+
text-align: center;
12+
margin-top: 20px;
13+
}
14+
.show-btn {
15+
padding: 10px 20px;
16+
background: #4a90e2;
17+
color: white;
18+
border: none;
19+
border-radius: 8px;
20+
cursor: pointer;
21+
font-size: 16px;
22+
font-weight: 600;
23+
transition: 0.2s;
24+
}
25+
.show-btn:hover {
26+
background: #357ab8;
27+
}

0 commit comments

Comments
 (0)