Skip to content

Commit 4ef217d

Browse files
d3j1xd3j1x
committed
٣. إنشاء قائمة بأهم متصفحات الويب
1 parent f57babe commit 4ef217d

2 files changed

Lines changed: 344 additions & 7 deletions

File tree

‎semantic/semantic3.html‎

Lines changed: 331 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,346 @@ <h1>اتش.تي.إم.إل الدلالية</h1>
2727
<main>
2828

2929
<!-- semantic 1 -->
30-
<div class="box">
30+
<section class="box">
3131
<div class="sub-title">
3232
<h2>٣. إنشاء قائمة بأهم متصفحات الويب</h2>
3333
<span class="hint">ورشة عمل</span>
34-
<p>قريبا</p>
34+
<p>في هذه الورشة، ستُنشئ قائمةً بأهم متصفحات الويب <em>web browsers</em>. وقد تم تزويدك بنموذج "اتش.تي.إم.إل" <em>The HTML boilerplate</em>.</p>
3535
</div>
3636

3737
<section>
38+
<h3>نموذج "اتش.تي.إم.إل" <em>The HTML boilerplate</em>.</h3>
39+
40+
41+
<div class="code-block">
42+
<pre><code>
43+
<span class="tag">&lt;!DOCTYPE html&gt;</span>
44+
<span class="tag">&lt;html <span class="attr">lang=</span><span class="value">"ar"</span> <span class="attr">dir=</span><span class="value">"rtl"</span>&gt;</span>
45+
<span class="tag">&lt;head&gt;</span>
46+
<span class="tag">&lt;meta <span class="attr">charset=</span><span class="value">"UTF-8"</span>&gt;</span>
47+
<span class="tag">&lt;meta <span class="attr">name=</span><span class="value">"viewport"</span> <span class="attr">content=</span><span class="value">"width=device-width, initial-scale=1.0"</span>&gt;</span>
48+
<span class="tag">&lt;title&gt;</span>قائمة المتصفحات والأوصاف<span class="tag">&lt;/title&gt;</span>
49+
<span class="tag">&lt;/head&gt;</span>
50+
51+
<span class="tag">&lt;body&gt;</span>
52+
53+
<span class="value">&lt;!-- هنا تضع اكواد التطبيق --&gt;</span>
54+
55+
<span class="tag">&lt;/body&gt;</span>
56+
57+
<span class="tag">&lt;/html&gt;</span>
58+
</code></pre>
59+
</div>
3860
</section>
61+
62+
63+
<section>
64+
<h3>الخطوة الأولى :</h3>
65+
<p>ابدأ بإضافة عنوان إلى صفحتك يتضمن <code class="br-white">قائمة متصفحات الويب الرئيسية</code> باستخدام عنصر <code class="br">h1</code> داخل عنصر <code class="br">body</code>.</p>
66+
67+
68+
<h4>الكود :</h4>
69+
70+
<div class="code-block">
71+
<pre><code>
72+
<span class="tag">&lt;body&gt;</span>
73+
74+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
75+
76+
<span class="tag">&lt;/body&gt;</span>
77+
</code></pre>
78+
</div>
79+
80+
<div class="preview" role="presentation">
81+
<h1>قائمة متصفحات الويب الرئيسية</h1>
82+
</div>
83+
84+
</section>
85+
86+
87+
<section>
88+
<h3>الخطوة الثانية :</h3>
89+
<p>كما تتذكرون من درس سابق، يتم استخدام قوائم الوصف <strong>description lists</strong> لتقديم المصطلحات <em>terms</em> والتعريفات <em>definitions</em> بتنسيق منظم وسهل القراءة.</p>
90+
<h4>وهنا مثال:</h4>
91+
<div class="code-block">
92+
<pre><code>
93+
<span class="tag">&lt;dl&gt;</span>
94+
<span class="tag">&lt;dt&gt;<span class="txt">HTML</span>&lt;/dt&gt;</span>
95+
<span class="tag">&lt;dd&gt;<span class="txt">HyperText Markup Language</span>&lt;/dd&gt;</span>
96+
97+
<span class="tag">&lt;dt&gt;<span class="txt">CSS</span>&lt;/dt&gt;</span>
98+
<span class="tag">&lt;dd&gt;<span class="txt">Cascading Style Sheets</span>&lt;/dd&gt;</span>
99+
<span class="tag">&lt;/dl&gt;</span>
100+
</code></pre>
101+
</div>
102+
<br>
103+
<p>أسفل عنصر <code class="br">h1</code>، أنشئ عنصر <code class="br">dl</code>. سيحتوي هذا العنصر على قائمة المتصفحات <i>list of browsers</i>.</p>
104+
105+
<h4>الكود :</h4>
106+
107+
<div class="code-block">
108+
<pre><code>
109+
<span class="tag">&lt;body&gt;</span>
110+
111+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
112+
113+
<span class="tag">&lt;dl&gt;</span>
114+
115+
<span class="tag">&lt;/dl&gt;</span>
116+
117+
<span class="tag">&lt;/body&gt;</span>
118+
</code></pre>
119+
</div>
120+
121+
<div class="preview" role="presentation">
122+
<h1>قائمة متصفحات الويب الرئيسية</h1>
123+
<dl>
124+
125+
</dl>
126+
</div>
127+
</section>
128+
129+
130+
<section>
131+
<h3>الخطوة الثالثة :</h3>
132+
<p>تتكون قوائم الوصف <em>Description lists</em> من قائمة مصطلحات <em>terms</em> وتفاصيل <em>details</em>. يمثل عنصر <code class="br">dt</code> مصطلح الوصف <strong>the Description Term</strong>، بينما يمثل عنصر <code class="br">dd</code> تفاصيل الوصف <strong>the Description Detail</strong>.</p>
133+
<p>المتصفح الأول الذي ستضيفه إلى قائمة الوصف <em>description list</em> الخاصة بك سيكون لمتصفح "غوغل كروم" Google Chrome.</p>
134+
<p>داخل عنصر <code class="br">dl</code> الخاص بك، أضف عنصر <code class="br">dt</code> يحتوي على النص <code class="br-white">Google Chrome</code>.</p>
135+
<p>أسفل عنصر <code class="br">dt</code>، أضف عنصر <code class="br">dd</code> بالنص التالي:</p>
136+
<p><code class="br-white">هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.</code></p>
137+
138+
<h4>الكود :</h4>
139+
140+
<div class="code-block">
141+
<pre><code>
142+
<span class="tag">&lt;body&gt;</span>
143+
144+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
145+
146+
<span class="tag">&lt;dl&gt;</span>
147+
<span class="tag">&lt;dt&gt;</span><span class="txt">Google Chrome</span><span class="tag">&lt;/dt&gt;</span>
148+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2008</span> <span>وتم إصداره لأول مرة في عام</span> <span>Google</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
149+
<span class="tag">&lt;/dl&gt;</span>
150+
151+
<span class="tag">&lt;/body&gt;</span>
152+
</code></pre>
153+
</div>
154+
155+
<div class="preview" role="presentation">
156+
<h1>قائمة متصفحات الويب الرئيسية</h1>
157+
<dl>
158+
<dt>Google Chrome</dt>
159+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.</dd>
160+
</dl>
161+
</div>
162+
163+
164+
</section>
165+
166+
<section>
167+
<h3>الخطوة الرابعة :</h3>
168+
<p>الآن حان الوقت لإضافة المتصفح الثاني إلى القائمة <em>the list</em>.</p>
169+
<p>أضف عنصر <code class="br">dt</code> آخر أسفل مدخل <code class="br-white">Google Chrome</code> يحتوي على النص <code class="br-white">Firefox</code>.</p>
170+
<p>أسفل عنصر <code class="br">dt</code>، أضف عنصر <code class="br">dd</code> بالنص التالي:</p>
171+
<p><code class="br-white">هذا متصفح ويب مجاني تم تطويره بواسطة شركة Mozilla Corporation وتم إنشاؤه لأول مرة في عام 2004.</code></p>
172+
173+
<h4>الكود :</h4>
174+
175+
<div class="code-block">
176+
<pre><code>
177+
<span class="tag">&lt;body&gt;</span>
178+
179+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
180+
181+
<span class="tag">&lt;dl&gt;</span>
182+
<span class="tag">&lt;dt&gt;</span><span class="txt">Google Chrome</span><span class="tag">&lt;/dt&gt;</span>
183+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2008</span> <span>وتم إصداره لأول مرة في عام</span> <span>Google</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
184+
185+
<span class="tag">&lt;dt&gt;</span><span class="txt">Firefox</span><span class="tag">&lt;/dt&gt;</span>
186+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2004</span> <span>وتم إنشاؤه لأول مرة في عام</span> <span>Mozilla Corporation</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة شركة</span></span><span class="tag">&lt;/dd&gt;</span>
187+
188+
<span class="tag">&lt;/dl&gt;</span>
189+
190+
<span class="tag">&lt;/body&gt;</span>
191+
</code></pre>
192+
</div>
193+
194+
<div class="preview" role="presentation">
195+
<h1>قائمة متصفحات الويب الرئيسية</h1>
196+
<dl>
197+
<dt>Google Chrome</dt>
198+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.</dd>
199+
<dt>Firefox</dt>
200+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة شركة Mozilla Corporation وتم إنشاؤه لأول مرة في عام 2004.</dd>
201+
</dl>
202+
</div>
203+
204+
205+
</section>
206+
207+
208+
<section>
209+
<h3>الخطوة الخامسة :</h3>
210+
<p>المتصفح الثالث الذي ستضيفه إلى القائمة سيكون لمتصفح الويب Safari.</p>
211+
<p>أضف عنصر <code class="br">dt</code> آخر يحتوي على النص <code class="br-white">Safari</code>.</p>
212+
<p>أسفل عنصر <code class="br">dt</code>، أضف عنصر <code class="br">dd</code> بالنص التالي:</p>
213+
<p><code class="br-white">تم تطوير هذا المتصفح بواسطة Apple وهو المتصفح الافتراضي لأجهزة iPhone iPad Mac .</code></p>
214+
215+
<h4>الكود :</h4>
216+
217+
<div class="code-block">
218+
<pre><code>
219+
<span class="tag">&lt;body&gt;</span>
220+
221+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
222+
223+
<span class="tag">&lt;dl&gt;</span>
224+
<span class="tag">&lt;dt&gt;</span><span class="txt">Google Chrome</span><span class="tag">&lt;/dt&gt;</span>
225+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2008</span> <span>وتم إصداره لأول مرة في عام</span> <span>Google</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
226+
227+
<span class="tag">&lt;dt&gt;</span><span class="txt">Firefox</span><span class="tag">&lt;/dt&gt;</span>
228+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2004</span> <span>وتم إنشاؤه لأول مرة في عام</span> <span>Mozilla Corporation</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة شركة</span></span><span class="tag">&lt;/dd&gt;</span>
229+
230+
<span class="tag">&lt;dt&gt;</span><span class="txt">Safari</span><span class="tag">&lt;/dt&gt;</span>
231+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>. iPhone iPad Mac</span> <span>وهو المتصفح الافتراضي لأجهزة</span> <span>Apple</span> <span>تم تطوير هذا المتصفح بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
232+
233+
<span class="tag">&lt;/dl&gt;</span>
234+
235+
<span class="tag">&lt;/body&gt;</span>
236+
</code></pre>
237+
</div>
238+
239+
<div class="preview" role="presentation">
240+
<h1>قائمة متصفحات الويب الرئيسية</h1>
241+
<dl>
242+
<dt>Google Chrome</dt>
243+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.</dd>
244+
<dt>Firefox</dt>
245+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة شركة Mozilla Corporation وتم إنشاؤه لأول مرة في عام 2004.</dd>
246+
<dt>Safari</dt>
247+
<dd>تم تطوير هذا المتصفح بواسطة Apple وهو المتصفح الافتراضي لأجهزة iPhone iPad Mac .</dd>
248+
</dl>
249+
</div>
250+
251+
252+
</section>
253+
254+
<section>
255+
<h3>الخطوة السادسة :</h3>
256+
<p>الآن حان الوقت لإضافة المتصفح الرابع إلى القائمة <em>the list</em>.</p>
257+
<p>أضف عنصر <code class="br">dt</code> آخر يحتوي على النص <code class="br-white">Brave</code>.</p>
258+
<p>أسفل عنصر <code class="br">dt</code>، أضف عنصر <code class="br">dd</code> بالنص التالي:</p>
259+
<p><code class="br-white">هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب Chromium.</code></p>
260+
261+
262+
<h4>الكود :</h4>
263+
264+
<div class="code-block">
265+
<pre><code>
266+
<span class="tag">&lt;body&gt;</span>
267+
268+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
269+
270+
<span class="tag">&lt;dl&gt;</span>
271+
<span class="tag">&lt;dt&gt;</span><span class="txt">Google Chrome</span><span class="tag">&lt;/dt&gt;</span>
272+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2008</span> <span>وتم إصداره لأول مرة في عام</span> <span>Google</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
273+
274+
<span class="tag">&lt;dt&gt;</span><span class="txt">Firefox</span><span class="tag">&lt;/dt&gt;</span>
275+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2004</span> <span>وتم إنشاؤه لأول مرة في عام</span> <span>Mozilla Corporation</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة شركة</span></span><span class="tag">&lt;/dd&gt;</span>
276+
277+
<span class="tag">&lt;dt&gt;</span><span class="txt">Safari</span><span class="tag">&lt;/dt&gt;</span>
278+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>. iPhone iPad Mac</span> <span>وهو المتصفح الافتراضي لأجهزة</span> <span>Apple</span> <span>تم تطوير هذا المتصفح بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
279+
280+
<span class="tag">&lt;dt&gt;</span><span class="txt">Brave</span><span class="tag">&lt;/dt&gt;</span>
281+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.Chromium</span> <span>هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب</span></span><span class="tag">&lt;/dd&gt;</span>
282+
283+
<span class="tag">&lt;/dl&gt;</span>
284+
285+
<span class="tag">&lt;/body&gt;</span>
286+
</code></pre>
287+
</div>
288+
289+
<div class="preview" role="presentation">
290+
<h1>قائمة متصفحات الويب الرئيسية</h1>
291+
<dl>
292+
<dt>Google Chrome</dt>
293+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.</dd>
294+
<dt>Firefox</dt>
295+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة شركة Mozilla Corporation وتم إنشاؤه لأول مرة في عام 2004.</dd>
296+
<dt>Safari</dt>
297+
<dd>تم تطوير هذا المتصفح بواسطة Apple وهو المتصفح الافتراضي لأجهزة iPhone iPad Mac .</dd>
298+
<dt>Brave</dt>
299+
<dd>هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب Chromium.</dd>
300+
</dl>
301+
</div>
302+
303+
</section>
304+
305+
<section>
306+
<h3>الخطوة الأخيرة :</h3>
307+
<p>المتصفح الأخير الذي ستضيفه إلى القائمة <em>the list</em> سيكون لمتصفح Arc.</p>
308+
<p>أضف عنصر <code class="br">dt</code> آخر يحتوي على النص <code class="br-white">Arc</code>.</p>
309+
<p>أسفل عنصر <code class="br">dt</code>، أضف عنصر <code class="br">dd</code> بالنص التالي:</p>
310+
<p><code class="br-white">هذا متصفح ويب مجاني يعتمد على Chromium تم إصداره لأول مرة في عام 2023 بواسطة The Browser Company.</code></p>
311+
312+
313+
<h4>الكود :</h4>
314+
315+
<div class="code-block">
316+
<pre><code>
317+
<span class="tag">&lt;body&gt;</span>
318+
319+
<span class="tag">&lt;h1&gt;<span class="txt">قائمة متصفحات الويب الرئيسية</span>&lt;/h1&gt;</span>
320+
321+
<span class="tag">&lt;dl&gt;</span>
322+
<span class="tag">&lt;dt&gt;</span><span class="txt">Google Chrome</span><span class="tag">&lt;/dt&gt;</span>
323+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2008</span> <span>وتم إصداره لأول مرة في عام</span> <span>Google</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
324+
325+
<span class="tag">&lt;dt&gt;</span><span class="txt">Firefox</span><span class="tag">&lt;/dt&gt;</span>
326+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.2004</span> <span>وتم إنشاؤه لأول مرة في عام</span> <span>Mozilla Corporation</span> <span>هذا متصفح ويب مجاني تم تطويره بواسطة شركة</span></span><span class="tag">&lt;/dd&gt;</span>
327+
328+
<span class="tag">&lt;dt&gt;</span><span class="txt">Safari</span><span class="tag">&lt;/dt&gt;</span>
329+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>. iPhone iPad Mac</span> <span>وهو المتصفح الافتراضي لأجهزة</span> <span>Apple</span> <span>تم تطوير هذا المتصفح بواسطة</span></span><span class="tag">&lt;/dd&gt;</span>
330+
331+
<span class="tag">&lt;dt&gt;</span><span class="txt">Brave</span><span class="tag">&lt;/dt&gt;</span>
332+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.Chromium</span> <span>هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب</span></span><span class="tag">&lt;/dd&gt;</span>
333+
334+
<span class="tag">&lt;dt&gt;</span><span class="txt">Arc</span><span class="tag">&lt;/dt&gt;</span>
335+
<span class="tag">&lt;dd&gt;</span><span class="txt"><span>.The Browser Company</span> <span> تم إصداره لأول مرة في عام 2023 بواسطة</span> <span>Chromium</span> <span>هذا متصفح ويب مجاني يعتمد على</span></span><span class="tag">&lt;/dd&gt;</span>
336+
337+
<span class="tag">&lt;/dl&gt;</span>
338+
339+
<span class="tag">&lt;/body&gt;</span>
340+
</code></pre>
341+
</div>
342+
343+
<div class="preview" role="presentation">
344+
<h1>قائمة متصفحات الويب الرئيسية</h1>
345+
<dl>
346+
<dt>Google Chrome</dt>
347+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة Google وتم إصداره لأول مرة في عام 2008.</dd>
348+
<dt>Firefox</dt>
349+
<dd>هذا متصفح ويب مجاني تم تطويره بواسطة شركة Mozilla Corporation وتم إنشاؤه لأول مرة في عام 2004.</dd>
350+
<dt>Safari</dt>
351+
<dd>تم تطوير هذا المتصفح بواسطة Apple وهو المتصفح الافتراضي لأجهزة iPhone iPad Mac .</dd>
352+
<dt>Brave</dt>
353+
<dd>هذا متصفح ويب مجاني تم إصداره لأول مرة في عام 2016 ويعتمد على متصفح الويب Chromium.</dd>
354+
<dt>Arc</dt>
355+
<dd>هذا متصفح ويب مجاني يعتمد على Chromium تم إصداره لأول مرة في عام 2023 بواسطة The Browser Company.</dd>
356+
357+
</dl>
358+
</div>
359+
360+
</section>
361+
362+
363+
364+
<h5>مبروك على الانتهاء من هذه الورشة!</h5>
365+
366+
39367

40368

41-
</div>
369+
</section>
42370

43371
<!-- Pages -->
44372
<div class="page-nav">

‎semantic/style.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -299,10 +299,15 @@ section {
299299
background-color: rgb(198, 198, 198);
300300
font-size: 1rem;
301301
color: black;
302-
303-
304-
305-
302+
}
303+
304+
.br-white {
305+
border: #1e1e1e solid 1px;
306+
padding: 2px;
307+
font-weight: 900;
308+
background-color: white;
309+
font-size: 1rem;
310+
color: black;
306311
}
307312

308313
.long-link {
@@ -371,6 +376,10 @@ section {
371376
color: yellowgreen;
372377
}
373378

379+
.code-block code .txt {
380+
color: whitesmoke;
381+
}
382+
374383
.help-code {
375384
display: block;
376385
direction: ltr;

0 commit comments

Comments
 (0)