Skip to content

Commit afcc18f

Browse files
d3j1xd3j1x
committed
٤. أ. كيف تعمل علامات الاقتباس المضمنة Inline Quotes والمكدسة Block في اتش.تي.إم.إل HTML ؟
1 parent 29e2a59 commit afcc18f

1 file changed

Lines changed: 177 additions & 4 deletions

File tree

‎semantic/semantic4.html‎

Lines changed: 177 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,201 @@ <h1>اتش.تي.إم.إل الدلالية</h1>
2626

2727
<main>
2828

29-
<!-- semantic 1 -->
30-
<div class="box">
29+
<!-- semantic 4 -->
30+
<section class="box">
3131
<div class="sub-title">
3232
<h2>٤. التعامل مع العناصر الدلالية للنص والوقت</h2>
3333
<span class="hint">نظري</span>
34-
<p>قريبا</p>
34+
<p></p>
3535
</div>
3636

3737
<section id="1">
38+
<h3>أ. كيف تعمل علامات الاقتباس المضمنة Inline Quotes والمكدسة Block في اتش.تي.إم.إل HTML ؟</h3>
39+
40+
<p>في "اتش.تي.إم.إل" HTML، تُستخدم العناصر المقتبسة <em>Quoted elements</em> لتمييز النص المقتبس <em>quoted text</em> عن المحتوى المحيط به. هذا يُعطي النص المقتبس <em>quoted text</em> تنسيقًا يسهل التعرف عليه <em>easy to identify</em>.</p>
41+
42+
<p>يجب استخدام عنصر الاقتباس المقتطع <strong>The block quotation element</strong> لتمثيل مقطع مقتبس من مصدر آخر. يُستخدم هذا العنصر بشكل أساسي للاقتباسات الموسعة. إذا كان لمصدر الاقتباس عنوان <em>address</em>، يُمكنك الاستشهاد به باستخدام سمة الاستشهاد <code class="br">cite</code>. يجب أن تكون قيمة هذه السمة عنوان URL صالحًا.</p>
43+
44+
<h4>هذا مثال على اقتباس <em>quote</em> داخل عنصر اقتباس الكتلة <em>block quotation</em> :</h4>
45+
46+
<div class="code-block">
47+
<pre><code>
48+
<span class="tag">&lt;blokquote <span class="attr">cite=</span><span class="value">"https://www.freecodecamp.org/news/learn-to-code-book/"</span>&gt;
49+
<span class="txt">"هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟"</span>
50+
&lt;/blockquote&gt;</span>
51+
</code></pre>
52+
</div>
53+
54+
<div class="preview">
55+
<blokquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
56+
"هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟"
57+
</blockquote>
58+
</div>
59+
60+
<p>يحتوي هذا العنصر على سمة <code class="br">cite</code>. قيمة هذه السمة هي عنوان URL للمصدر. مع أن هذه السمة لا تُغيّر طريقة عرض الاقتباس، إلا أنها مفيدة جدًا لتزويد قارئات الشاشة ومحركات البحث <em>search engines</em> بمعلومات أكثر حول الاقتباس <em>the quote</em>. في المتصفح، ستلاحظ أن النص مُسطر قليلاً <em>slightly indented</em>.</p>
61+
62+
<p>إذا كنت ترغب في بدء وإنهاء الاقتباس بعلامات اقتباس <em>quotation marks</em>، فقد تحتاج إلى كتابتها صراحةً داخل النص. يمكنك كتابة النص مباشرةً داخل عنصر الاقتباس <em>The block quotation element</em>، كما فعلتُ للتو، أو وضعه داخل فقرة واحدة أو أكثر. هذا مفيد عندما يحتوي النص على فقرات متعددة، ولكنك ترغب في إبقاءها داخل نفس الاقتباس <em>The same block quote</em>.</p>
63+
64+
65+
<h4>فيما يلي مثال مكون من أربع فقرات:</h4>
66+
67+
<div class="code-block">
68+
<pre><code>
69+
<span class="tag">&lt;blokquote <span class="attr">cite=</span><span class="value">"https://www.freecodecamp.org/news/learn-to-code-book/"</span>&gt;
70+
71+
<span class="tag">&lt;p&gt;<span class="txt">.ابنِ مشاريعك. أرِها لأصدقائك. ابنِ مشاريع لأصدقائك</span>&lt;/p&gt;</span>
72+
<span class="tag">&lt;p&gt;<span class="txt">.ابنِ شبكة علاقاتك. ساعد من تلتقي بهم في طريقك. ما تدرّ يعود إليك. ستحصل على ما تستحقه</span>&lt;/p&gt;</span>
73+
<span class="tag">&lt;p&gt;<span class="txt">.لم يفت الأوان. الحياة طويلة</span>&lt;/p&gt;</span>
74+
<span class="tag">&lt;p&gt;<span class="txt">.ستتذكر هذه اللحظة بعد سنوات من الآن، وستكون سعيدًا لأنك اتخذت هذه الخطوة</span>&lt;/p&gt;</span>
75+
76+
&lt;/blockquote&gt;</span>
77+
</code></pre>
78+
</div>
79+
80+
<div class="preview">
81+
<blokquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
82+
<p>ابنِ مشاريعك. أرِها لأصدقائك. ابنِ مشاريع لأصدقائك.</p>
83+
<p>ابنِ شبكة علاقاتك. ساعد من تلتقي بهم في طريقك. ما تدرّ يعود إليك. ستحصل على ما تستحقه.</p>
84+
<p>لم يفت الأوان. الحياة طويلة.</p>
85+
<p>ستتذكر هذه اللحظة بعد سنوات من الآن، وستكون سعيدًا لأنك اتخذت هذه الخطوة.</p>
86+
</blockquote>
87+
</div>
88+
89+
<p>جميع الفقرات مُضمنة في عنصر اقتباس مُقسّم واحد <em>The same block quotation element</em>، ما يعني أنها جزء من الاقتباس نفسه. كما هو واضح، يحتوي العنصر على سمة <code class="br">cite</code> بعنوان <b>URL</b> للمصدر. في المتصفح، ستجد أن الفقرات الأربع مُحاذاة لبعضها البعض، ولكنها مُسطرة بالنسبة لحاويتها <i>to their container</i>.</p>
90+
91+
<p>حتى الآن، كنتُ أستخدم خاصية الاستشهاد <code class="br">cite</code> لتحديد مصدر الاقتباس <em>the source of the quotation</em>، لكنها لا تُظهر المصدر <em>the source</em> للمستخدم، بل تعمل فقط خلف الكواليس <i>behind the scenes</i>.</p>
92+
93+
<p>إذا كنت ترغب في إسناد المصدر بصريًا <i>visually</i>، يمكنك إضافة عنصر استشهاد، <code class="br">cite</code> ، خارج عنصر الاقتباس المقتطع <em>The block quotation element</em>. يختلف هذا عن سمة <code class="br">cite</code>. عنصر الاستشهاد <strong>The citation element</strong> هو عنصر "اتش.تي.إم.إل" HTML يمكنك استخدامه لتمييز عنوان <i>title</i> عمل إبداعي مرجعي، مثل كتاب، أو مقال، أو أغنية، أو فيلم، أو موقع إلكتروني، أو بحث.</p>
94+
95+
<h4>وهنا مثال:</h4>
96+
97+
<div class="code-block">
98+
<pre><code>
99+
<span class="tag">&lt;div&gt;</span>
100+
101+
<span class="tag">&lt;blockquote <span class="attr">cite=</span><span class="value">"https://www.freecodecamp.org/news/learn-to-code-book/"</span>&gt;</span>
102+
هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
103+
<span class="tag">&lt;/blockquote&gt;</span>
104+
105+
<span class="tag">&lt;p&gt;</span>—Quincy Larson, <span class="tag">&lt;cite&gt;</span>كيفية تعلم البرمجة والحصول على وظيفة مطور برامج [كتاب كامل].<span class="tag">&lt;/cite&gt;&lt;/p&gt;</span>
106+
107+
<span class="tag">&lt;/div&gt;</span>
108+
</code></pre>
109+
</div>
110+
111+
<div class="preview">
112+
<div>
113+
114+
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
115+
هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
116+
</blockquote>
117+
118+
<p> —Quincy Larson, <cite>كيفية تعلم البرمجة والحصول على وظيفة مطور برامج [كتاب كامل].</cite></p>
119+
120+
</div>
121+
</div>
122+
123+
<p>يحتوي عنصر الاقتباس المقتطع <em>The block quotation element</em> على نص مقتبس <em>quoted text</em>. أسفل العنصر، يمكنك رؤية فقرة باسم المؤلف، متبوعةً بعنصر استشهاد <em>a citation element</em>. يحتوي عنصر الاستشهاد <em>The citation element</em> على عنوان الكتاب الذي استُخدم فيه الاقتباس <i>the quotation</i>.</p>
124+
125+
<p>إذا ذهبت إلى المتصفح، فسيكون المصدر <em>the source</em> واضحًا الآن، وستجد أن الاقتباس مأخوذ من كتاب لكوينسي لارسون <i>Quincy Larson</i>. عنوان الكتاب هو <i>"كيف تتعلم البرمجة والحصول على وظيفة مطور برامج"</i>.</p>
126+
127+
<p>يُنصح باستخدام علامات اقتباس <em>block quotes</em> كتلك للاقتباسات الطويلة من مصادر أخرى. ولكن في بعض الأحيان، قد تحتاج فقط إلى اقتباس بضع كلمات ضمن فقرة أكبر.</p>
128+
129+
<p>هذا هو بالضبط الغرض من عنصر الاقتباس المضمّن <em>The inline quotation element</em>. فهو مخصص للاقتباسات المضمّنة القصيرة <em>short inline quotations</em> من مصادر أخرى. تُضيف معظم المتصفحات الحديثة علامات اقتباس <em>quotation marks</em> حول الاقتباس المضمّن <em>the inline quote</em> تلقائيًا <i>automatically</i> عند استخدام هذا العنصر.</p>
130+
131+
<h4>هذا مثال:</h4>
132+
133+
134+
<div class="code-block">
135+
<pre><code>
136+
<span class="tag">&lt;p&gt;</span>
137+
،كما قال كوينسي لارسون
138+
<span class="tag">&lt;q <span class="attr">cite=</span><span class="value">"https://www.freecodecamp.org/news/learn-to-code-book/"</span>&gt;</span>
139+
.الزخم هو كل شيء
140+
<span class="tag">&lt;/q&gt;</span>
141+
<span class="tag">&lt;/p&gt;</span>
142+
</code></pre>
143+
</div>
144+
145+
146+
<div class="preview">
147+
148+
<p>
149+
كما قال كوينسي لارسون،
150+
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/">
151+
الزخم هو كل شيء.
152+
</q>
153+
</p>
154+
</div>
155+
156+
157+
<p>يمكنك رؤية عنصر فقرة <em>a paragraph element</em> يحتوي على نص. جزء من النص عبارة عن اقتباس مضمّن <em>an inline quote</em>، لأنه داخل عنصر الاقتباس المضمّن <em>the inline quotation element</em>. يمكنك أيضًا إضافة سمة <code class="br">cite</code> لنسب المصدر.</p>
158+
159+
<p>يعمل هذا تمامًا كما كان يعمل مع عنصر الاقتباس <em>the block quotation element</em>. لن تكون هناك أي تغييرات بصرية، ولكنه سيوفر لقارئات الشاشة ومحركات البحث معلومات أكثر حول الاقتباس <i>the quote</i>.</p>
160+
161+
<p>في المتصفح، ستجد أن النص المقتبس <em>the quoted text</em> جزء من الفقرة، وهو محاط بعلامات اقتباس <em>quotation marks</em>. تُضيف معظم المتصفحات الحديثة علامات الاقتباس هذه تلقائيًا.</p>
162+
163+
<p>ما الفرق بين علامات الاقتباس المقتطعة <em>block quotes</em> والمضمنة <em>inline quotes</em>؟ يُنصح باستخدام علامات الاقتباس المقتطعة <strong>Block quotes</strong> للاقتباسات الموسعة من مصادر أخرى، بينما يُنصح باستخدام علامات الاقتباس المضمنة <strong>Inline quotes</strong> للاقتباسات القصيرة من مصادر أخرى والتي يجب أن تكون جزءًا من فقرات موجودة.</p>
164+
165+
166+
167+
<!-- QUESTIONS -->
168+
<div class="questions">
169+
<h4>أسئلة :</h4>
170+
171+
<h5>ما هو عنصر "اتش.تي.إم.إل" HTML المُستخدم لعرض اقتباسات مُوسّعة من مصادر أخرى؟</h5>
172+
173+
<p>١. <code class="br">q</code> ❌</p>
174+
<p><mark>٢. <code class="br">blockquote</code> ✅</mark></p>
175+
<p>٣. <code class="br">cite</code> ❌</p>
176+
<p>٤. <code class="br">p</code> ❌</p>
177+
178+
179+
<br>
180+
181+
<h5>ما هو الغرض من عنصر <code class="br">cite</code> في "اتش.تي.إم.إل" HTML ؟</h5>
182+
183+
<p>١. لعرض الاقتباسات المضمنة <em>inline quotations</em>. ❌</p>
184+
<p>٢. لتحديد رابط URL مصدر الاقتباس. ❌</p>
185+
<p><mark>٣. لتمييز عنوان <em>title</em> العمل الإبداعي المُشار إليه. ✅</mark></p>
186+
<p>٤. لعرض الاقتباسات المُوسّعة <em>extended quotations</em>. ❌</p>
187+
188+
189+
<br>
190+
191+
<h5>ما هي سمة "اتش.تي.إم.إل" HTML المُستخدمة لتحديد مصدر الاقتباس في عنصر اقتباس مُضمّن أو مُكبّر؟</h5>
192+
193+
<p>١. <code class="br">href</code> ❌</p>
194+
<p>٢. <code class="br">src</code> ❌</p>
195+
<p>٣. <code class="br">title</code> ❌</p>
196+
<p><mark>٤. <code class="br">cite</code> ✅</mark></p>
197+
198+
199+
200+
</div>
201+
202+
203+
204+
205+
206+
207+
38208
</section>
39209

40210
<section id="2">
211+
<h3>ب. كيف تعرض الاختصارات Abbreviations في اتش.تي.إم.إل HTML ؟</h3>
41212
</section>
42213

43214
<section id="3">
215+
<h3>ج. كيف تعرض العناوين Addresses في اتش.تي.إم.إل HTML ؟</h3>
44216
</section>
45217

46218
<section id="4">
219+
<h3>د. كيف تعرض الأوقات Times والتاريخ Dates في اتش.تي.إم.إل HTML ؟</h3>
47220
</section>
48221

49222

50-
</div>
223+
</section>
51224

52225
<!-- Pages -->
53226
<div class="page-nav">

0 commit comments

Comments
 (0)