Skip to content

Commit 5b14c41

Browse files
d3j1xd3j1x
authored
Merge pull request #55 from d3j1x/main
١٠. اختبار اتش.تي.إم.إل الدلالية
2 parents 07c0480 + dd52cdd commit 5b14c41

2 files changed

Lines changed: 283 additions & 4 deletions

File tree

‎semantic/semantic10.html‎

Lines changed: 256 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
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/semantic10.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">
@@ -27,20 +28,266 @@ <h1>اتش.تي.إم.إل الدلالية</h1>
2728
<main>
2829

2930
<!-- semantic 8 -->
30-
<div class="box">
31+
<section class="box">
3132
<div class="sub-title">
3233
<h2>١٠. اختبار اتش.تي.إم.إل الدلالية</h2>
3334
<span class="hint">اختبار</span>
34-
<p>قريبا</p>
35+
<p></p>
3536
</div>
3637

3738
<section>
39+
<!-- Q1 -->
40+
<h3>١. ما هو "اتش.تي.إم.إل" العرضي <em>Presentational HTML</em> ؟</h3>
41+
<div>
42+
<form>
43+
<label><input type="radio" name="q1" value="">يُحدد تنسيق HTML العرضي التصميم العام للموقع الإلكتروني وهيكل التنقل فيه.</label><br>
44+
<label><input type="radio" name="q1" value="">يتحكم تنسيق HTML العرضي في كيفية تخزين البيانات على الخادم.</label><br>
45+
<label><input type="radio" name="q1" value="">يستخدم تنسيق HTML العرضي عناصر للتحكم في مظهر المحتوى، وليس معناه أو هيكله.</label><br>
46+
<label><input type="radio" name="q1" value="">يُستخدم تنسيق HTML العرضي لتضمين محتوى الوسائط المتعددة.</label>
47+
</form>
48+
<h4>يستخدم تنسيق HTML العرضي عناصر للتحكم في مظهر المحتوى، وليس معناه أو هيكله.</h4>
49+
</div>
50+
51+
<!-- Q2 -->
52+
<h3>٢. ما هو دور العنصر <code class="br">pre</code> ؟</h3>
53+
<div>
54+
<form>
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><br>
58+
<label><input type="radio" name="q2" value="">يُستخدم لتمثيل عنصر نائب داخل مكون ويب.</label>
59+
</form>
60+
<h4>يُستخدم لتمثيل نص مُنسق مسبقًا.</h4>
61+
</div>
62+
63+
<!-- Q3 -->
64+
<h3>٣. ما هو دور العنصر <code class="br">h1</code> ؟</h3>
65+
<div>
66+
<form>
67+
<label><input type="radio" name="q3" value="">يُحدد هذا العنصر العنوان الرئيسي لصفحة الويب، مُشيرًا إلى موضوعها الأساسي.</label><br>
68+
<label><input type="radio" name="q3" value="">يُمثل هذا العنصر الجذر أو العنصر الأعلى مستوى في مستند HTML.</label><br>
69+
<label><input type="radio" name="q3" value="">يُستخدم هذا العنصر لتجميع عناصر العناوين المتعددة في الصفحة.</label><br>
70+
<label><input type="radio" name="q3" value="">يُستخدم هذا العنصر كحاوية للبيانات الوصفية في مستند HTML.</label>
71+
</form>
72+
<h4>يُحدد هذا العنصر العنوان الرئيسي لصفحة الويب، مُشيرًا إلى موضوعها الأساسي.</h4>
73+
</div>
74+
75+
<!-- Q4 -->
76+
<h3>٤. ما هو دور العنصر <code class="br">address</code> ؟</h3>
77+
<div>
78+
<form>
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="">يُنشئ قائمة تنقل للموقع الإلكتروني.</label><br>
82+
<label><input type="radio" name="q4" value="">يُنسق النص كنصٍ مرتفع.</label>
83+
</form>
84+
<h4>يُستخدم لعرض معلومات الاتصال لقسمٍ ما في صفحة ويب.</h4>
85+
</div>
86+
87+
<!-- Q5 -->
88+
<h3>٥. أي من العناصر التالية لا يحمل أي معنى دلالي؟</h3>
89+
<div>
90+
<form>
91+
<label><input type="radio" name="q5" value=""><code class="br">main</code></label><br>
92+
<label><input type="radio" name="q5" value=""><code class="br">footer</code></label><br>
93+
<label><input type="radio" name="q5" value=""><code class="br">article</code></label><br>
94+
<label><input type="radio" name="q5" value=""><code class="br">div</code></label>
95+
</form>
96+
<h4><code class="br">div</code></h4>
97+
</div>
98+
99+
<!-- Q6 -->
100+
<h3>٦. أي من العناصر التالية يُستخدم لتمثيل لحظة زمنية محددة؟</h3>
101+
<div>
102+
<form>
103+
<label><input type="radio" name="q6" value=""><code class="br">time</code></label><br>
104+
<label><input type="radio" name="q6" value=""><code class="br">div</code></label><br>
105+
<label><input type="radio" name="q6" value=""><code class="br">ins</code></label><br>
106+
<label><input type="radio" name="q6" value=""><code class="br">output</code></label>
107+
</form>
108+
<h4><code class="br">time</code></h4>
109+
</div>
110+
111+
<!-- Q7 -->
112+
<h3>٧. ما هي حالة الاستخدام النموذجية لعنصر <code class="br">ruby</code> ؟</h3>
113+
<div>
114+
<form>
115+
<label><input type="radio" name="q7" value="">يُحدد هذا الخيار ترميز الأحرف في المستند.</label><br>
116+
<label><input type="radio" name="q7" value="">يُدرج جدولًا لعرض البيانات الجدولية.</label><br>
117+
<label><input type="radio" name="q7" value="">يُستخدم لعرض نطق الأحرف الآسيوية الشرقية.</label><br>
118+
<label><input type="radio" name="q7" value="">يُضمّن مشغل فيديو أو صوت في المستند.</label>
119+
</form>
120+
<h4>يُستخدم لعرض نطق الأحرف الآسيوية الشرقية.</h4>
121+
</div>
122+
123+
<!-- Q8 -->
124+
<h3>٨. ما هو العنصر المستخدم لتسليط الضوء على الكلمات الرئيسية في الملخصات أو أسماء المنتجات في المراجعات؟</h3>
125+
<div>
126+
<form>
127+
<label><input type="radio" name="q8" value=""><code class="br">table</code></label><br>
128+
<label><input type="radio" name="q8" value=""><code class="br">template</code></label><br>
129+
<label><input type="radio" name="q8" value=""><code class="br">b</code></label><br>
130+
<label><input type="radio" name="q8" value=""><code class="br">ruby</code></label>
131+
</form>
132+
<h4><code class="br">b</code></h4>
133+
</div>
134+
135+
<!-- Q9 -->
136+
<h3>٨. ما هو دور العنصر <code class="br">u</code> ؟</h3>
137+
<div>
138+
<form>
139+
<label><input type="radio" name="q9" value="">يُنسّق النص بخطوط مخصصة.</label><br>
140+
<label><input type="radio" name="q9" value="">يُحدد ترميز الأحرف في المستند.</label><br>
141+
<label><input type="radio" name="q9" value="">يُنشئ قائمة منسدلة لاختيار الخيارات.</label><br>
142+
<label><input type="radio" name="q9" value="">يُستخدم لتمثيل النص المضمن الذي أُضيفت إليه تعليقات توضيحية غير نصية.</label>
143+
</form>
144+
<h4>يُستخدم لتمثيل النص المضمن الذي أُضيفت إليه تعليقات توضيحية غير نصية.</h4>
145+
</div>
146+
147+
<!-- Q10 -->
148+
<h3>١٠. أي من العناصر التالية يُستخدم لتمثيل اقتباس مطول؟</h3>
149+
<div>
150+
<form>
151+
<label><input type="radio" name="q10" value=""><code class="br">blockquote</code></label><br>
152+
<label><input type="radio" name="q10" value=""><code class="br">textarea</code></label><br>
153+
<label><input type="radio" name="q10" value=""><code class="br">article</code></label><br>
154+
<label><input type="radio" name="q10" value=""><code class="br">sup</code></label>
155+
</form>
156+
<h4><code class="br">blockquote</code></h4>
157+
</div>
158+
159+
<!-- Q11 -->
160+
<h3>١١. أي من العناصر التالية يُستخدم لتقديم وصف أو تعريف للمصطلح الموجود داخل قائمة الوصف؟</h3>
161+
<div>
162+
<form>
163+
<label><input type="radio" name="q11" value=""><code class="br">dt</code></label><br>
164+
<label><input type="radio" name="q11" value=""><code class="br">dd</code></label><br>
165+
<label><input type="radio" name="q11" value=""><code class="br">div</code></label><br>
166+
<label><input type="radio" name="q11" value=""><code class="br">dl</code></label>
167+
</form>
168+
<h4><code class="br">dd</code></h4>
169+
</div>
170+
171+
<!-- Q12 -->
172+
<h3>١٢. أي من العناصر التالية يُستخدم عادةً مع عنصر <code class="br">code</code> ؟</h3>
173+
<div>
174+
<form>
175+
<label><input type="radio" name="q12" value=""><code class="br">summary</code></label><br>
176+
<label><input type="radio" name="q12" value=""><code class="br">div</code></label><br>
177+
<label><input type="radio" name="q12" value=""><code class="br">pre</code></label><br>
178+
<label><input type="radio" name="q12" value=""><code class="br">ins</code></label>
179+
</form>
180+
<h4><code class="br">pre</code></h4>
181+
</div>
182+
183+
<!-- Q13 -->
184+
<h3>١٣. أي من السمات التالية تُستخدم لترجمة التواريخ والأوقات إلى تنسيق قابل للقراءة آلياً؟</h3>
185+
<div>
186+
<form>
187+
<label><input type="radio" name="q13" value=""><code class="br">accept</code></label><br>
188+
<label><input type="radio" name="q13" value=""><code class="br">datetime</code></label><br>
189+
<label><input type="radio" name="q13" value=""><code class="br">alt</code></label><br>
190+
<label><input type="radio" name="q13" value=""><code class="br">rel</code></label>
191+
</form>
192+
<h4><code class="br">datetime</code></h4>
193+
</div>
194+
195+
<!-- Q14 -->
196+
<h3>١٤. لماذا من المهم عدم تخطي مستويات العنوان؟</h3>
197+
<div>
198+
<form>
199+
<label><input type="radio" name="q14" value="">يؤدي تخطي مستويات العناوين إلى ظهور النص بألوان مختلفة.</label><br>
200+
<label><input type="radio" name="q14" value="">يُحسّن تخطي مستويات العناوين سرعة تحميل الصفحة.</label><br>
201+
<label><input type="radio" name="q14" value="">يُحسّن تخطي مستويات العناوين جمالية تصميم الموقع الإلكتروني.</label><br>
202+
<label><input type="radio" name="q14" value="">قد يُربك تخطي مستويات العناوين برامج قراءة الشاشة ويُعيق الوصول إلى المحتوى من خلال الإخلال بالتسلسل الهرمي المنطقي للمحتوى.</label>
203+
</form>
204+
<h4>قد يُربك تخطي مستويات العناوين برامج قراءة الشاشة ويُعيق الوصول إلى المحتوى من خلال الإخلال بالتسلسل الهرمي المنطقي للمحتوى.</h4>
205+
</div>
206+
207+
<!-- Q15 -->
208+
<h3>١٥. أي من العناصر التالية هو عنصر حطML عرضي مهمل؟</h3>
209+
<div>
210+
<form>
211+
<label><input type="radio" name="q15" value=""><code class="br">div</code></label><br>
212+
<label><input type="radio" name="q15" value=""><code class="br">article</code></label><br>
213+
<label><input type="radio" name="q15" value=""><code class="br">footer</code></label><br>
214+
<label><input type="radio" name="q15" value=""><code class="br">font</code></label>
215+
</form>
216+
<h4><code class="br">font</code></h4>
217+
</div>
218+
219+
<!-- Q16 -->
220+
<h3>١٦. أي من العناصر التالية يُستخدم لتمثيل روابط التنقل؟</h3>
221+
<div>
222+
<form>
223+
<label><input type="radio" name="q16" value=""><code class="br">figure</code></label><br>
224+
<label><input type="radio" name="q16" value=""><code class="br">div</code></label><br>
225+
<label><input type="radio" name="q16" value=""><code class="br">section</code></label><br>
226+
<label><input type="radio" name="q16" value=""><code class="br">nav</code></label>
227+
</form>
228+
<h4><code class="br">nav</code></h4>
229+
</div>
230+
231+
<!-- Q17 -->
232+
<h3>١٧. أي من العناصر التالية يمثل مصطلح وصف داخل قائمة وصف؟</h3>
233+
<div>
234+
<form>
235+
<label><input type="radio" name="q17" value=""><code class="br">del</code></label><br>
236+
<label><input type="radio" name="q17" value=""><code class="br">dfn</code></label><br>
237+
<label><input type="radio" name="q17" value=""><code class="br">dd</code></label><br>
238+
<label><input type="radio" name="q17" value=""><code class="br">dt</code></label>
239+
</form>
240+
<h4><code class="br">dt</code></h4>
241+
</div>
242+
243+
<!-- Q18 -->
244+
<h3>١٨. ما هو دور العنصر <code class="br">i</code> ؟</h3>
245+
<div>
246+
<form>
247+
<label><input type="radio" name="q18" value="">يُستخدم لتنسيق البيانات الرقمية وترتيبها من الأصغر إلى الأكبر.</label><br>
248+
<label><input type="radio" name="q18" value="">يُستخدم لتمثيل النصوص الاصطلاحية والمصطلحات التقنية والتصنيفات العلمية.</label><br>
249+
<label><input type="radio" name="q18" value="">يُستخدم لإضافة شرح أو مفتاح توضيحي لمربعات الإفصاح.</label><br>
250+
<label><input type="radio" name="q18" value="">يُستخدم لتمثيل النصوص المُشار إليها لأغراض مرجعية.</label>
251+
</form>
252+
<h4>يُستخدم لتمثيل النصوص الاصطلاحية والمصطلحات التقنية والتصنيفات العلمية.</h4>
253+
</div>
254+
255+
<!-- Q19 -->
256+
<h3>١٩. أي من العناصر التالية يُستخدم للتأكيد على النص؟</h3>
257+
<div>
258+
<form>
259+
<label><input type="radio" name="q19" value=""><code class="br">optgroup</code></label><br>
260+
<label><input type="radio" name="q19" value=""><code class="br">anchor</code></label><br>
261+
<label><input type="radio" name="q19" value=""><code class="br">div</code></label><br>
262+
<label><input type="radio" name="q19" value=""><code class="br">em</code></label>
263+
</form>
264+
<h4><code class="br">em</code></h4>
265+
</div>
266+
267+
<!-- Q20 -->
268+
<h3>٢٠. أي من السمات التالية تُستخدم لتحديد مصدر أو مرجع المحتوى المقتبس في الاقتباسات؟</h3>
269+
<div>
270+
<form>
271+
<label><input type="radio" name="q20" value=""><code class="br">lang</code></label><br>
272+
<label><input type="radio" name="q20" value=""><code class="br">class</code></label><br>
273+
<label><input type="radio" name="q20" value=""><code class="br">alt</code></label><br>
274+
<label><input type="radio" name="q20" value=""><code class="br">cite</code></label>
275+
</form>
276+
<h4><code class="br">cite</code></h4>
277+
</div>
278+
279+
<!-- Centered button -->
280+
<div class="btn-container">
281+
<button class="show-btn" onclick="showAllAnswers()">Show All Answers</button>
282+
</div>
283+
284+
38285
</section>
39286

40287

41288

42289

43-
</div>
290+
</section>
44291

45292
<!-- Pages -->
46293
<div class="page-nav">
@@ -50,7 +297,12 @@ <h2>١٠. اختبار اتش.تي.إم.إل الدلالية</h2>
50297

51298
</main>
52299

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

55307

56308

‎semantic/styles/semantic10.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)