You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<li><strong>التسلسل الهرمي الهيكلي <em>Structural hierarchy</em> لعناصر العناوين:</strong> من المهم استخدام عنصر العنوان <em>heading element</em> الصحيح للحفاظ على التسلسل الهرمي للمحتوى. عنصر <codeclass="br">h1</code> هو أعلى مستوى من العناوين، بينما عنصر <codeclass="br">h6</code> هو أدنى مستوى.</li>
42
+
<li><strong>عناصر "اتش.تي.إم.إل" للعرض <em>Presentational HTML</em> :</strong> العناصر التي تحدد مظهر المحتوى. مثال: عناصر <codeclass="br">center</code> و <codeclass="br">big</code> و <codeclass="br">font</code> التي تم إيقاف استخدامها.</li>
43
+
<li><strong>عناصر "اتش.تي.إم.إل" الدلالية <em>Semantic HTML</em> :</strong> العناصر التي تحمل معنى <em>meaning</em> وبنية <em>structure</em> . مثال: <codeclass="br">header</code> و <codeclass="br">nav</code> و <codeclass="br">figure</code>.</li>
44
+
</ul>
45
+
</section>
46
+
47
+
<section>
48
+
<h3>عناصر HTML الدلالية</h3>
49
+
50
+
<ul>
51
+
<li><strong>عنصر الرأس <em>Header</em> :</strong> يُستخدم لتحديد رأس المستند <em>the header of a document</em> أو القسم <em>section</em> .</li>
52
+
<divclass="code-block"><pre><code>
53
+
<spanclass="tag"><header></span>
54
+
<spanclass="tag"><h1><spanclass="txt">تطبيق صور القطط</span></h1></span>
55
+
<spanclass="tag"><p><spanclass="txt">أهلاً بكم في معرض صور القطط الخاص بنا.</span></p></span>
56
+
<spanclass="tag"></header></span>
57
+
</code></pre></div>
58
+
<br/>
59
+
<li><strong>العنصر الرئيسي <em>Main</em> :</strong> يستخدم لاحتواء المحتوى الرئيسي <em>the main content</em> لصفحة الويب.</li>
<spanclass="tag"><p><spanclass="txt">مرحباً، أنا "شهاب"، وأنا مطور مواقع ويب.</span></p></span>
74
+
<spanclass="tag"></section></span>
75
+
</code></pre></div>
76
+
<br/>
77
+
<li><strong>عنصر قسم التنقل (<codeclass="br">nav</code>) <em>Navigation Section</em> :</strong> يمثل هذا القسم روابط تنقل <em>navigation links</em> .</li>
<spanclass="attr">alt=</span><spanclass="value">".قطتان صغيرتان تنامان معًا على أريكة"</span>
93
+
<spanclass="tag">/></span>
94
+
<spanclass="tag"></figure></span>
95
+
</code></pre></div>
96
+
<br/>
97
+
<li><strong>عنصر التأكيد (<codeclass="br">em</code>) <em>Emphasis</em> :</strong> يُشير إلى النص الذي يحتوي على نبرة تأكيد <em>stress emphasis</em> .</li>
98
+
<divclass="code-block"><pre><code>
99
+
<spanclass="tag"><p></span>
100
+
<spanclass="tag"><em></span>.أحلامك<spanclass="tag"></em></span> لا تتخلى أبدًا عن
101
+
<spanclass="tag"></p></span>
102
+
</code></pre></div>
103
+
<br/>
104
+
<li><strong>عنصر النص الاصطلاحي (<codeclass="br">i</code>) <em>Idiomatic Text</em> :</strong> يستخدم لتسليط الضوء على الصوت أو الحالة المزاجية البديلة، والمصطلحات الاصطلاحية من لغة أخرى، والمصطلحات التقنية، والأفكار.</li>
105
+
<divclass="code-block"><pre><code>
106
+
<sapnclass="tag"><p></sapn>
107
+
.في الهواء<spanclass="tag"><i<spanclass="attr"> lang=</span><spanclass="value">"en"</span>></span> I don't know what <spanclass="tag"></i></span>هناك شيء معين
108
+
<spanclass="tag"></p></span>
109
+
</code></pre></div>
110
+
<p>تُستخدم السمة <codeclass="br">lang</code> داخل وسم <codeclass="br">i</code> المفتوح لتحديد لغة المحتوى. في هذه الحالة، ستكون اللغة هي الانجليزية. لا يُشير عنصر <codeclass="br">i</code> إلى أهمية النص، بل يُظهر فقط أنه مختلف نوعًا ما عن النص المحيط به.</p>
111
+
<br/>
112
+
<li><strong>عنصر ذو أهمية بالغة (<codeclass="br">strong</code>) <em>Strong Importance</em> :</strong> يشير إلى النص ذي الأهمية الكبيرة <em>has strong importance</em> .</li>
113
+
<divclass="code-block"><pre><code>
114
+
<spanclass="tag"><p></span>
115
+
.قد يسبب هذا المنتج ردود فعل تحسسية <spanclass="tag"><strong></span>:تحذير<spanclass="tag"></strong></span>
116
+
<spanclass="tag"></p></span>
117
+
</code></pre></div>
118
+
<br/>
119
+
<li><strong>عنصر "لفت الانتباه إلى" (<codeclass="br">b</code>) <em>Bring Attention To</em> :</strong> يُستخدم هذا الأسلوب لتسليط الضوء على النصوص غير المهمة لمعنى المحتوى. ويُستخدم عادةً لتسليط الضوء على الكلمات المفتاحية في الملخصات أو أسماء المنتجات في المراجعات.</li>
120
+
<divclass="code-block"><pre><code>
121
+
<spanclass="tag"><p></span>
122
+
.لجودة الصوت<spanclass="tag"> <b></span>SuperSound 3000<spanclass="tag"></b> </span>لقد قمنا باختبار العديد من المنتجات، بما في ذلك
123
+
<spanclass="tag"></p></span>
124
+
</code></pre></div>
125
+
<br/>
126
+
<li><strong>عنصر قائمة الوصف (<codeclass="br">dl</code>) <em>Description List</em> :</strong> يستخدم لتمثيل قائمة من مجموعات المصطلحات والأوصاف.</li>
127
+
<li><strong>عنصر مصطلح الوصف (<codeclass="br">dt</code>) <em>Description Term</em> :</strong> يستخدم لتمثيل المصطلح الذي يتم تعريفه.</li>
128
+
<li><strong>عنصر تفاصيل الوصف (<codeclass="br">dd</code>) <em>Description Details</em> :</strong> يستخدم لتمثيل وصف المصطلح.</li>
<li><strong>عنصر الاقتباس المجمّع (<codeclass="br">blockquote</code>) <em>Block Quotation</em> :</strong> يُستخدم هذا العنصر لتمثيل مقطع مقتبس من مصدر آخر. ويحتوي على سمة <codeclass="br">cite</code> ، وقيمتها هي عنوان <b>URL</b> للمصدر.</li>
<spanclass="txt">"هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟"</span>
142
+
</blockquote></span>
143
+
</code></pre></div>
144
+
<br/>
145
+
<li><strong>عنصر الاقتباس (<codeclass="br">cite</code>) <em>Citation</em> :</strong> تُستخدم هذه العلامة لنسب مصدر العمل المرجعي بصريًا. وتُستخدم أيضًا لتمييز عنوان المرجع.</li>
هل يمكنك أن تتخيل كيف سيكون الحال لو كنت مطورًا ناجحًا؟ لو أنشأت أنظمة برمجية يعتمد عليها الناس؟
151
+
<spanclass="tag"></blockquote></span>
152
+
153
+
<spanclass="tag"><p></span>—Quincy Larson, <spanclass="tag"><cite></span>كيفية تعلم البرمجة والحصول على وظيفة مطور برامج [كتاب كامل].<spanclass="tag"></cite></p></span>
154
+
155
+
<spanclass="tag"></div></span>
156
+
</code></pre></div>
157
+
<br/>
158
+
<li><strong>عنصر الاقتباس المضمن (<codeclass="br">q</code>) <em>Inline Quotation</em> :</strong> يستخدم لتمثيل اقتباس قصير ضمن النص.</li>
<li><strong>عنصر الاختصار (<codeclass="br">abbr</code>) <em>Abbreviation</em> :</strong> يُستخدم لتمثيل اختصار أو رمز مختصر. ولمساعدة المستخدمين على فهم معنى الاختصار أو الرمز المختصر، يمكنك عرض شكله الكامل، ووصفًا سهل القراءة، باستخدام سمة <codeclass="br">title</code>.</li>
169
+
<divclass="code-block"><pre><code>
170
+
<spanclass="tag"><p></span>
171
+
هو أساس الويب<spanclass="tag"><abbr <spanclass="attr">title=</span><spanclass="value">"HyperText Markup Language"</span>><spanclass="txt">HTML</span></abbr></span>
172
+
<spanclass="tag"></p></span>
173
+
</code></pre></div>
174
+
<br/>
175
+
<li><strong>عنصر عنوان الاتصال (<codeclass="br">address</code>) <em>Contact Address</em> :</strong> يستخدم لتمثيل معلومات الاتصال.</li>
176
+
<br/>
177
+
<li><strong>عنصر التاريخ الوقت (<codeclass="br">time</code>) <em>Date Time</em> :</strong> يستخدم لتمثيل التاريخ و/أو الوقت. تُستخدم سمة <codeclass="br">datetime</code> لترجمة التواريخ والأوقات إلى تنسيق قابل للقراءة آليًا.</li>
<li><strong>سمة التاريخ (<codeclass="br">datetime</code>) وفقًا لمعيار <em>ISO 8601</em> :</strong> يُستخدم لتمثيل التواريخ والأوقات بتنسيق قابل للقراءة آليًا. التنسيق القياسي هو <codeclass="br">YYYY-MM-DDThh:mm:ss</code> ، حيث يُمثل الحرف <codeclass="br">T</code> الكبير فاصلًا بين التاريخ والوقت.</li>
183
+
<br/>
184
+
<li><strong>عنصر مرتفع (<codeclass="br">sup</code>) <em>Superscript</em> :</strong> يُستخدم لتمثيل النص المرتفع. تشمل حالات الاستخدام الشائعة لعنصر <codeclass="br">sup</code> الأسس، والأحرف المرتفعة، والأعداد الترتيبية.</li>
<li><strong>عنصر منخفض (<codeclass="br">sub</code>) <em>Subscript</em> :</strong> يستخدم لتمثيل النص السفلي. تشمل حالات الاستخدام الشائعة لعنصر النص السفلي الصيغ الكيميائية والحواشي السفلية والرموز السفلية للمتغيرات.</li>
<li><strong>عنصر الكود المضمن (<codeclass="br">code</code>) <em>Inline Code</em> :</strong> يُستخدم لتمثيل جزء من شفرة الحاسوب.</li>
195
+
<li><strong>عنصر نص منسق مسبقًا (<codeclass="br">pre</code>) <em>Preformatted Text</em> :</strong> يمثل نصًا منسقًا مسبقًا.</li>
196
+
<divclass="code-block"><pre><code>
197
+
<spanclass="tag"><pre></span>
198
+
<spanclass="tag"><code></span>
199
+
body {
200
+
color: red;
201
+
}
202
+
<spanclass="tag"></code></span>
203
+
<spanclass="tag"></pre></span>
204
+
</code></pre></div>
205
+
<br/>
206
+
<li><strong>عنصر تعليق غير مفصل (<codeclass="br">u</code>) <em>Unarticulated Annotation</em> :</strong> يُستخدم لتمثيل نطاق من النص المضمن الذي يجب عرضه بطريقة تشير إلى أنه يحتوي على تعليق غير نصي.</li>
<li><strong>عنصر شرح روبي (<codeclass="br">ruby</code>) <em>Ruby Annotation</em> :</strong> تُستخدم هذه الأداة لإضافة تعليقات توضيحية للنصوص تتضمن شرحاً للنطق أو المعنى. ومن الأمثلة على استخدامها في الطباعة في شرق آسيا.</li>
215
+
<li><strong>عنصر الأقواس الاحتياطي في روبي (<codeclass="br">rp</code>) <em>Ruby fallback parenthesis</em> :</strong> يُستخدم كخيار احتياطي للمتصفحات التي تفتقر إلى دعم عرض التعليقات التوضيحية للغة روبي.</li>
216
+
<li><strong>عنصر نص روبي (<codeclass="br">rt</code>) <em>Ruby text</em> :</strong> يُستخدم للإشارة إلى نص التعليق التوضيحي في لغة روبي. ويُستخدم عادةً للنطق أو تفاصيل الترجمة في الطباعة في شرق آسيا.</li>
<li><strong>عنصر الشطب (<codeclass="br">s</code>) <em>Strikethrough</em> :</strong> يُستخدم لتمثيل المحتوى الذي لم يعد دقيقًا أو ذا صلة.</li>
222
+
<divclass="code-block"><pre><code>
223
+
<spanclass="tag"><p></span>
224
+
<spanclass="tag"><s></span>.ستبدأ رحلة المشي غداً عند الظهر<spanclass="tag"></s></span>
225
+
<spanclass="tag"></p></span>
226
+
<spanclass="tag"><p></span>
227
+
.نظراً لظروف جوية غير متوقعة، تم إلغاء الرحلة
228
+
<spanclass="tag"></p></span>
229
+
</code></pre></div>
230
+
<br/>
231
+
<li><strong>الروابط الداخلية <em>Internal links</em> :</strong> يُستخدم هذا الأسلوب للربط بقسم آخر من الصفحة باستخدام <codeclass="br">href="#id"</code> على عنصر <codeclass="br">a</code> ومنح العنصر الوجهة نفس المعرّف <codeclass="br">id</code> . ويُستخدم عادةً للروابط السريعة، وجداول المحتويات، أو الصفحات الطويلة ذات الأقسام المتعددة.</li>
232
+
<divclass="code-block"><pre><code>
233
+
<spanclass="tag"><a <spanclass="attr">href=</span><spanclass="value">"#about-section"</span>><spanclass="txt">."انتقل إلى قسم "نبذة عنا</span></a></span>
0 commit comments