أساسيات لغة HTML: دليل شامل لفهم بنية صفحات الويب
تُعتبر لغة HTML (HyperText Markup Language) حجر الأساس في تصميم وبناء صفحات الويب، فهي اللغة التي تحدد بنية المحتوى على الإنترنت، وتُستخدم لوصف العناصر المختلفة داخل الصفحة مثل النصوص، الصور، الروابط، والجداول. منذ نشأتها في أوائل التسعينيات، أصبحت HTML الوسيلة الأساسية لتقديم المعلومات عبر شبكة الإنترنت، حيث توفر الإطار الهيكلي الذي يعتمد عليه متصفحو الويب لعرض المحتوى بشكل منسق وسهل القراءة.
في هذا المقال، سيتم تناول أساسيات لغة HTML بشكل مفصل، يبدأ من التعريف بها، ثم شرح المكونات الأساسية للغة، وأهم الوسوم المستخدمة، بالإضافة إلى توضيح كيفية استخدام HTML في إنشاء صفحات ويب متكاملة. كما سيتم توضيح كيف تتكامل HTML مع لغات أخرى مثل CSS وJavaScript لتعزيز الوظائف وتحسين مظهر الصفحات.
تعريف لغة HTML وأهميتها
لغة HTML هي لغة توصيف تُستخدم لبناء صفحات الويب، حيث تقوم بوصف عناصر الصفحة بواسطة ما يُعرف بالوسوم (Tags). تتكون صفحات الويب من مستندات مكتوبة بلغة HTML، ويقوم المتصفح بقراءة هذه الوسوم وتحويلها إلى عناصر مرئية يمكن للمستخدم التفاعل معها. تتميز HTML بكونها سهلة التعلم نسبيًا مقارنةً باللغات البرمجية الأخرى، فهي ليست لغة برمجة بالمعنى التقليدي، بل لغة وصف تُستخدم لوضع الهيكل العام للمحتوى.
تكمن أهمية HTML في كونها الأساس الذي يُبنى عليه كل محتوى الإنترنت تقريبًا، فهي تُمكن المطورين من تنظيم النصوص، الصور، الروابط، الجداول، والقوائم، مما يجعل المحتوى متناسقًا ومنظمًا. من دون HTML، سيكون من الصعب عرض المحتوى على الويب بطريقة واضحة ومنسقة.
بنية مستند HTML
يتكون مستند HTML من مجموعة من الوسوم المنظمة في شكل هيكلي هرمي. تبدأ الصفحة بوسم البداية وتنتهي بوسم النهاية . داخل هذا الوسم، هناك قسمان رئيسيان:
-
رأس الصفحة (Head): يحدد معلومات غير مرئية للمستخدم بشكل مباشر، مثل عنوان الصفحة، الترميز المستخدم، والروابط إلى ملفات CSS أو جافاسكريبت.
-
جسم الصفحة (Body): يحتوي على المحتوى المرئي الذي يظهر للمستخدم، مثل النصوص، الصور، الروابط، والقوائم.
الهيكل العام لمستند HTML
-
: يُعرّف نوع المستند ويشير إلى أن هذه الصفحة مكتوبة بلغة HTML5، وهي النسخة الأحدث من HTML. -
: يحدد أن محتوى الصفحة مكتوب باللغة العربية، مما يساعد محركات البحث والمتصفحات على التعامل مع المحتوى بشكل صحيح. -
: يحدد ترميز الصفحة، وUTF-8 هو الترميز المستخدم على نطاق واسع لدعم معظم لغات العالم. -
</code>: يعرض عنوان الصفحة في شريط العنوان أو تبويب المتصفح.</p> </li> </ul> <hr data-start="2496" data-end="2499" class="" style=""> <h2 data-start="2501" data-end="2527" class="" id="mwx-section-4">الوسوم الأساسية في HTML</h2> <h3 data-start="2529" data-end="2570" class="" id="mwx-section-5">1. الوسم <code data-start="2542" data-end="2548"></p> <h1></code> إلى <code data-start="2553" data-end="2559"></p> <h6></code> – العناوين</h3> <p data-start="2572" data-end="2710" class="">تُستخدم وسوم العناوين لتقسيم المحتوى إلى أقسام منسقة بترتيب هرمي، حيث يمثل <code data-start="2647" data-end="2653"></p> <h1></code> العنوان الرئيسي، بينما <code data-start="2677" data-end="2683"></p> <h6></code> هو أدنى مستوى من العناوين.</p> <pre class="overflow-visible!" data-start="2712" data-end="2768"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span></span><span>>هذا عنوان رئيسي</span><span><span class="hljs-tag"></<span class="hljs-name">h1</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h2</span></span></span><span>>عنوان فرعي</span><span><span class="hljs-tag"></<span class="hljs-name">h2</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="2770" data-end="2798" class="" id="mwx-section-6">2. الوسم <code data-start="2783" data-end="2788"></p> <p></code> – الفقرات</h3> <p data-start="2800" data-end="2881" class="">يستخدم لوضع نصوص الفقرات، حيث يقوم بإنشاء فاصل بين الفقرات وجعلها تظهر بشكل منسق.</p> <pre class="overflow-visible!" data-start="2883" data-end="2929"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>هذه فقرة نصية توضح المحتوى.</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="2931" data-end="2959" class="" id="mwx-section-7">3. الوسم <code data-start="2944" data-end="2949"><a></code> – الروابط</h3> <p data-start="2961" data-end="3039" class="">يتيح هذا الوسم إنشاء روابط تشعبية تسمح بالتنقل إلى صفحات أخرى أو مواقع خارجية.</p> <pre class="overflow-visible!" data-start="3041" data-end="3111"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"https://www.example.com"</span></span><span>>زر لزيارة موقع خارجي</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="3113" data-end="3141" class="" id="mwx-section-8">4. الوسم <code data-start="3126" data-end="3133"><img></code> – الصور</h3> <p data-start="3143" data-end="3279" class="">يستخدم لإدراج الصور داخل الصفحة، ويتطلب تحديد مسار الصورة بواسطة الخاصية <code data-start="3216" data-end="3221">src</code>، ويمكن إضافة نص بديل عبر الخاصية <code data-start="3255" data-end="3260">alt</code> لتوفير وصف للصورة.</p> <pre class="overflow-visible!" data-start="3281" data-end="3331"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">img</span></span></span><span> </span><span><span class="hljs-attr">src</span></span><span>=</span><span><span class="hljs-string">"image.jpg"</span></span><span> </span><span><span class="hljs-attr">alt</span></span><span>=</span><span><span class="hljs-string">"وصف الصورة"</span></span><span>> </span></span></code></div></div></pre> <h3 data-start="3333" data-end="3378" class="" id="mwx-section-9">5. الوسم <code data-start="3346" data-end="3352"></p> <ul></code>, <code data-start="3354" data-end="3360"></p> <ol></code>, <code data-start="3362" data-end="3368"></p> <li></code> – القوائم</h3> <ul data-start="3380" data-end="3473"> <li data-start="3380" data-end="3413" class="" style=""> <p data-start="3382" data-end="3413" class=""><code data-start="3382" data-end="3388"></p> <ul></code>: قائمة غير مرتبة (نقاط).</p> </li> <li data-start="3414" data-end="3444" class="" style=""> <p data-start="3416" data-end="3444" class=""><code data-start="3416" data-end="3422"></p> <ol></code>: قائمة مرتبة (مرقمة).</p> </li> <li data-start="3445" data-end="3473" class="" style=""> <p data-start="3447" data-end="3473" class=""><code data-start="3447" data-end="3453"></p> <li></code>: عنصر داخل القائمة.</p> </li> </ul> <pre class="overflow-visible!" data-start="3475" data-end="3550"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">ul</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>>العنصر الأول</span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>>العنصر الثاني</span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">ul</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="3552" data-end="3583" class="" id="mwx-section-10">6. الوسم <code data-start="3565" data-end="3572"></p> <div></code> و <code data-start="3575" data-end="3583"><span></code></h3> <ul data-start="3585" data-end="3693"> <li data-start="3585" data-end="3635" class="" style=""> <p data-start="3587" data-end="3635" class=""><code data-start="3587" data-end="3594"></p> <div></code>: عنصر كتلي يستخدم لتجميع عدة عناصر معًا.</p> </li> <li data-start="3636" data-end="3693" class="" style=""> <p data-start="3638" data-end="3693" class=""><code data-start="3638" data-end="3646"><span></code>: عنصر نصي يستخدم لتنسيق أجزاء صغيرة داخل النص.</p> </li> </ul> <hr data-start="3695" data-end="3698" class="" style=""> <h2 data-start="3700" data-end="3729" class="" id="mwx-section-11">الخصائص Attributes في HTML</h2> <p data-start="3731" data-end="3822" class="">كل وسم من وسوم HTML يمكن أن يحتوي على خصائص تضيف وظائف أو سمات إضافية. من أشهر هذه الخصائص:</p> <ul data-start="3824" data-end="4097"> <li data-start="3824" data-end="3868" class="" style=""> <p data-start="3826" data-end="3868" class=""><code data-start="3826" data-end="3830">id</code>: معرف فريد يُستخدم للتعرف على العنصر.</p> </li> <li data-start="3869" data-end="3932" class="" style=""> <p data-start="3871" data-end="3932" class=""><code data-start="3871" data-end="3878">class</code>: تصنيف يتيح تطبيق أنماط متعددة على مجموعة من العناصر.</p> </li> <li data-start="3933" data-end="4008" class="" style=""> <p data-start="3935" data-end="4008" class=""><code data-start="3935" data-end="3942">style</code>: يحدد تنسيقًا معينًا داخل الوسم نفسه (غير مستحب استخدامه كثيرًا).</p> </li> <li data-start="4009" data-end="4036" class="" style=""> <p data-start="4011" data-end="4036" class=""><code data-start="4011" data-end="4017">href</code>: خاص بروابط <code data-start="4030" data-end="4035"><a></code>.</p> </li> <li data-start="4037" data-end="4069" class="" style=""> <p data-start="4039" data-end="4069" class=""><code data-start="4039" data-end="4044">src</code>: خاص بالصور ووسائط أخرى.</p> </li> <li data-start="4070" data-end="4097" class="" style=""> <p data-start="4072" data-end="4097" class=""><code data-start="4072" data-end="4077">alt</code>: وصف الصورة البديل.</p> </li> </ul> <hr data-start="4099" data-end="4102" class="" style=""> <h2 data-start="4104" data-end="4131" class="" id="mwx-section-12">HTML5: التطورات والمزايا</h2> <p data-start="4133" data-end="4317" class="">مع التطور الكبير لشبكة الإنترنت، ظهرت نسخة متقدمة من HTML تعرف بـ HTML5، والتي أضافت العديد من الوسوم الجديدة التي تُسهل بناء المواقع الحديثة وتدعم الوسائط المتعددة. من الوسوم الجديدة:</p> <ul data-start="4319" data-end="4617"> <li data-start="4319" data-end="4358" class="" style=""> <p data-start="4321" data-end="4358" class=""><code data-start="4321" data-end="4331"></p> <header></code>: يمثل رأس الصفحة أو القسم.</p> </li> <li data-start="4359" data-end="4388" class="" style=""> <p data-start="4361" data-end="4388" class=""><code data-start="4361" data-end="4368"></p> <nav></code>: يمثل قائمة التنقل.</p> </li> <li data-start="4389" data-end="4433" class="" style=""> <p data-start="4391" data-end="4433" class=""><code data-start="4391" data-end="4402"></p> <section></code>: يمثل قسمًا مستقلاً في الصفحة.</p> </li> <li data-start="4434" data-end="4481" class="" style=""> <p data-start="4436" data-end="4481" class=""><code data-start="4436" data-end="4447"></p> <article></code>: يمثل مقالًا أو محتوى قائم بذاته.</p> </li> <li data-start="4482" data-end="4514" class="" style=""> <p data-start="4484" data-end="4514" class=""><code data-start="4484" data-end="4494"></p> <footer></code>: يمثل تذييل الصفحة.</p> </li> <li data-start="4515" data-end="4575" class="" style=""> <p data-start="4517" data-end="4575" class=""><code data-start="4517" data-end="4526"><video></code> و <code data-start="4529" data-end="4538"><audio></code>: لتضمين ملفات الفيديو والصوت مباشرة.</p> </li> <li data-start="4576" data-end="4617" class="" style=""> <p data-start="4578" data-end="4617" class=""><code data-start="4578" data-end="4588"><canvas></code>: لإنشاء رسومات ورسوم متحركة.</p> </li> </ul> <p data-start="4619" data-end="4723" class="">هذه الوسوم تساعد في تنظيم الصفحة بشكل أفضل وتحسين تجربة المستخدم وسهولة قراءة الكود من قبل محركات البحث.</p> <hr data-start="4725" data-end="4728" class="" style=""> <h2 data-start="4730" data-end="4766" class="" id="mwx-section-13">التكامل بين HTML وCSS وJavaScript</h2> <p data-start="4768" data-end="4889" class="">تعتبر HTML بمثابة الهيكل العظمي للصفحة، ولكن مظهر الصفحة وسلوكها يتم التحكم به بواسطة لغتين أساسيتين هما CSS وJavaScript.</p> <ul data-start="4891" data-end="5230"> <li data-start="4891" data-end="5078" class="" style=""> <p data-start="4893" data-end="5078" class=""><strong data-start="4893" data-end="4925">CSS (Cascading Style Sheets)</strong>: تستخدم لتنسيق مظهر عناصر HTML، مثل الألوان، الخطوط، الهوامش، والمحاذاة. تسمح CSS بفصل المحتوى عن التصميم، مما يسهل تعديل مظهر الصفحة دون تغيير محتواها.</p> </li> <li data-start="5080" data-end="5230" class="" style=""> <p data-start="5082" data-end="5230" class=""><strong data-start="5082" data-end="5096">JavaScript</strong>: هي لغة برمجة تُستخدم لإضافة التفاعلية إلى الصفحة، مثل التحقق من صحة النماذج، إنشاء القوائم المنسدلة، أو تنفيذ التأثيرات الديناميكية.</p> </li> </ul> <hr data-start="5232" data-end="5235" class="" style=""> <h2 data-start="5237" data-end="5279" class="" id="mwx-section-14">إنشاء صفحة ويب بسيطة باستخدام HTML وCSS</h2> <p data-start="5281" data-end="5363" class="">يمكن توضيح كيفية إنشاء صفحة ويب متكاملة بسيطة تجمع بين HTML وCSS في المثال التالي:</p> <pre class="overflow-visible!" data-start="5365" data-end="6983"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-meta">html</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">html</span></span></span><span> </span><span><span class="hljs-attr">lang</span></span><span>=</span><span><span class="hljs-string">"ar"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">head</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">meta</span></span></span><span> </span><span><span class="hljs-attr">charset</span></span><span>=</span><span><span class="hljs-string">"UTF-8"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">title</span></span></span><span>>صفحة ويب بسيطة</span><span><span class="hljs-tag"></<span class="hljs-name">title</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">style</span></span></span><span>><span class="language-css"> </span></span><span><span class="hljs-selector-tag">body</span></span><span> { </span><span><span class="hljs-attribute">font-family</span></span><span>: Arial, sans-serif; </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#f0f0f0</span></span><span>; </span><span><span class="hljs-attribute">margin</span></span><span>: </span><span><span class="hljs-number">20px</span></span><span>; } </span><span><span class="hljs-selector-tag">header</span></span><span> { </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#004080</span></span><span>; </span><span><span class="hljs-attribute">color</span></span><span>: white; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">20px</span></span><span>; </span><span><span class="hljs-attribute">text-align</span></span><span>: center; } </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> { </span><span><span class="hljs-attribute">list-style-type</span></span><span>: none; </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#0066cc</span></span><span>; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">10px</span></span><span>; </span><span><span class="hljs-attribute">overflow</span></span><span>: hidden; } </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> </span><span><span class="hljs-selector-tag">li</span></span><span> { </span><span><span class="hljs-attribute">display</span></span><span>: inline; </span><span><span class="hljs-attribute">margin-right</span></span><span>: </span><span><span class="hljs-number">15px</span></span><span>; } </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> </span><span><span class="hljs-selector-tag">li</span></span><span> </span><span><span class="hljs-selector-tag">a</span></span><span> { </span><span><span class="hljs-attribute">color</span></span><span>: white; </span><span><span class="hljs-attribute">text-decoration</span></span><span>: none; </span><span><span class="hljs-attribute">font-weight</span></span><span>: bold; } </span><span><span class="hljs-selector-tag">section</span></span><span> { </span><span><span class="hljs-attribute">background-color</span></span><span>: white; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">20px</span></span><span>; </span><span><span class="hljs-attribute">margin-top</span></span><span>: </span><span><span class="hljs-number">15px</span></span><span>; } </span><span><span class="hljs-selector-tag">footer</span></span><span> { </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#004080</span></span><span>; </span><span><span class="hljs-attribute">color</span></span><span>: white; </span><span><span class="hljs-attribute">text-align</span></span><span>: center; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">10px</span></span><span>; </span><span><span class="hljs-attribute">margin-top</span></span><span>: </span><span><span class="hljs-number">15px</span></span><span>; } </span><span><span class="hljs-tag"></<span class="hljs-name">style</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">head</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">body</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">header</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span></span><span>>مرحبًا بكم في موقعي</span><span><span class="hljs-tag"></<span class="hljs-name">h1</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">header</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">nav</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">ul</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>الرئيسية</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>حول</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>خدمات</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>اتصل بنا</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">ul</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">nav</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">section</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h2</span></span></span><span>>مقدمة</span><span><span class="hljs-tag"></<span class="hljs-name">h2</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>هذه صفحة ويب بسيطة مصممة باستخدام HTML وCSS لعرض المحتوى بشكل منظم وجميل.</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">section</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">footer</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>حقوق النشر © 2025</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">footer</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">body</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">html</span></span></span><span>> </span></span></code></div></div></pre> <hr data-start="6985" data-end="6988" class="" style=""> <h2 data-start="6990" data-end="7016" class="" id="mwx-section-15">استخدام الجداول في HTML</h2> <p data-start="7018" data-end="7128" class="">الجداول هي وسيلة مهمة لعرض البيانات المنظمة في صفوف وأعمدة. يستخدم وسم <code data-start="7089" data-end="7098"></p> <table></code> مع مجموعة من الوسوم الداخلية:</p> <ul data-start="7130" data-end="7231"> <li data-start="7130" data-end="7159" class="" style=""> <p data-start="7132" data-end="7159" class=""><code data-start="7132" data-end="7138"></p> <tr></code>: تعريف صف في الجدول.</p> </li> <li data-start="7160" data-end="7202" class="" style=""> <p data-start="7162" data-end="7202" class=""><code data-start="7162" data-end="7168"></p> <th></code>: تعريف خلية رأسية (عنوان العمود).</p> </li> <li data-start="7203" data-end="7231" class="" style=""> <p data-start="7205" data-end="7231" class=""><code data-start="7205" data-end="7211"></p> <td></code>: تعريف خلية بيانات.</p> </li> </ul> <h3 data-start="7233" data-end="7255" class="" id="mwx-section-16">مثال على جدول HTML</h3> <pre class="overflow-visible!" data-start="7257" data-end="7590"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">html</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-html"><span><span><span class="hljs-tag"><<span class="hljs-name">table</span></span></span><span> </span><span><span class="hljs-attr">border</span></span><span>=</span><span><span class="hljs-string">"1"</span></span><span> </span><span><span class="hljs-attr">cellpadding</span></span><span>=</span><span><span class="hljs-string">"10"</span></span><span> </span><span><span class="hljs-attr">cellspacing</span></span><span>=</span><span><span class="hljs-string">"0"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">tr</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">th</span></span></span><span>>الاسم</span><span><span class="hljs-tag"></<span class="hljs-name">th</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">th</span></span></span><span>>العمر</span><span><span class="hljs-tag"></<span class="hljs-name">th</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">th</span></span></span><span>>المدينة</span><span><span class="hljs-tag"></<span class="hljs-name">th</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">tr</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">tr</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">td</span></span></span><span>>محمد</span><span><span class="hljs-tag"></<span class="hljs-name">td</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">td</span></span></span><span>>30</span><span><span class="hljs-tag"></<span class="hljs-name">td</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">td</span></span></span><span>>القاهرة</span><span><span class="hljs-tag"></<span class="hljs-name">td</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">tr</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">tr</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">td</span></span></span><span>>سارة</span><span><span class="hljs-tag"></<span class="hljs-name">td</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">td</span></span></span><span>>25</span><span><span class="hljs-tag"></<span class="hljs-name">td</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">td</span></span></span><span>>الرياض</span><span><span class="hljs-tag"></<span class="hljs-name">td</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">tr</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">table</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="7592" data-end="7612" class="" id="mwx-section-17">شرح خصائص الجدول</h3> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="7614" data-end="7871" class="w-fit min-w-(--thread-content-width)"> <thead data-start="7614" data-end="7663"> <tr data-start="7614" data-end="7663"> <th data-start="7614" data-end="7629" data-col-size="sm">الخاصية</th> <th data-start="7629" data-end="7663" data-col-size="sm">الوظيفة</th> </tr> </thead> <tbody data-start="7713" data-end="7871"> <tr data-start="7713" data-end="7763"> <td data-start="7713" data-end="7728" data-col-size="sm">border</td> <td data-start="7728" data-end="7763" data-col-size="sm">يحدد عرض وحجم الحدود حول الجدول</td> </tr> <tr data-start="7764" data-end="7820"> <td data-start="7764" data-end="7779" data-col-size="sm">cellpadding</td> <td data-start="7779" data-end="7820" data-col-size="sm">يحدد المسافة بين محتوى الخلية وحدودها</td> </tr> <tr data-start="7821" data-end="7871"> <td data-start="7821" data-end="7836" data-col-size="sm">cellspacing</td> <td data-col-size="sm" data-start="7836" data-end="7871">يحدد المسافة بين الخلايا</td> </tr> </tbody> </table> <div class="sticky end-(--thread-content-margin) h-0 self-end select-none"> <div class="absolute end-0 flex items-end" style="height: 33px;"><span class="" data-state="closed"><button class="bg-token-bg-primary hover:bg-token-bg-tertiary text-token-text-secondary my-1 rounded-sm p-1 transition-opacity group-[:not(:hover):not(:focus-within)]:pointer-events-none group-[:not(:hover):not(:focus-within)]:opacity-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md-heavy"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg></button></span></div> </div> </div> </div> <hr data-start="7873" data-end="7876" class="" style=""> <h2 data-start="7878" data-end="7915" class="" id="mwx-section-18">قواعد ونصائح أساسية عند كتابة HTML</h2> <ul data-start="7917" data-end="8369"> <li data-start="7917" data-end="8018" class="" style=""> <p data-start="7919" data-end="8018" class=""><strong data-start="7919" data-end="7934">تنظيم الكود</strong>: يجب كتابة الأكواد بشكل منسق وواضح مع استخدام التراجع (Indentation) لتسهيل القراءة.</p> </li> <li data-start="8019" data-end="8121" class="" style=""> <p data-start="8021" data-end="8121" class=""><strong data-start="8021" data-end="8037">إغلاق الوسوم</strong>: يجب التأكد من إغلاق كل الوسوم المفتوحة، ما عدا الوسوم الذاتية الإغلاق مثل <code data-start="8113" data-end="8120"><img></code>.</p> </li> <li data-start="8122" data-end="8209" class="" style=""> <p data-start="8124" data-end="8209" class=""><strong data-start="8124" data-end="8145">استخدام التعليقات</strong>: تساعد التعليقات في توضيح أجزاء الكود خاصة في المشاريع الكبيرة.</p> </li> <li data-start="8210" data-end="8295" class="" style=""> <p data-start="8212" data-end="8295" class=""><strong data-start="8212" data-end="8235">استخدام خصائص اللغة</strong>: تحديد اللغة في وسم <code data-start="8256" data-end="8264"></code> يساعد محركات البحث والمتصفحات.</p> </li> <li data-start="8296" data-end="8369" class="" style=""> <p data-start="8298" data-end="8369" class=""><strong data-start="8298" data-end="8317">الترميز المناسب</strong>: اختيار الترميز <code data-start="8334" data-end="8341">UTF-8</code> يدعم النص العربي بشكل صحيح.</p> </li> </ul> <hr data-start="8371" data-end="8374" class="" style=""> <h2 data-start="8376" data-end="8397" class="" id="mwx-section-19">مستقبل HTML وتطوره</h2> <p data-start="8399" data-end="8736" class="">لغة HTML ليست ثابتة، بل تخضع للتحديث المستمر من قبل مجموعة W3C والمعايير العالمية للويب. يعمل المطورون على إضافة مزايا جديدة تواكب التطورات التقنية مثل دعم الواقع المعزز، تحسين أداء الوسائط المتعددة، وتعزيز أمان البيانات. كما تسعى HTML إلى أن تبقى سهلة الاستخدام ومرنة بحيث يمكن للمبرمجين من جميع المستويات تطوير صفحات ويب متطورة وسريعة.</p> <hr data-start="8738" data-end="8741" class="" style=""> <h2 data-start="8743" data-end="8753" class="" id="mwx-section-20">الخلاصة</h2> <p data-start="8755" data-end="9158" class="">تُعتبر لغة HTML أساسًا لا غنى عنه في بناء صفحات الويب، حيث توفر الهيكلية اللازمة لعرض المحتوى بشكل منظم ومرتب. معرفتك بأساسيات HTML تمكّنك من تصميم صفحات ويب بسيطة، لكنها قابلة للتطوير لتشمل تفاعلًا وجماليات إضافية عبر التكامل مع CSS وJavaScript. تبني مهارات قوية في HTML هو الخطوة الأولى نحو احتراف تطوير الويب، ويمثل فهم هذه اللغة نقطة الانطلاق لأي مطور يرغب في الدخول إلى عالم البرمجة وتصميم المواقع.</p> <hr data-start="9160" data-end="9163" class="" style=""> <h2 data-start="9165" data-end="9184" class="" id="mwx-section-21">المصادر والمراجع</h2> <ul data-start="9186" data-end="9319" data-is-last-node="" data-is-only-node=""> <li data-start="9186" data-end="9246" class="" style=""> <p data-start="9188" data-end="9246" class="">W3Schools – HTML Tutorial: <a data-start="9215" data-end="9246" rel="noopener" target="_new" class="cursor-pointer">https://www.w3schools.com/html/</a></p> </li> <li data-start="9247" data-end="9319" class="" style=""> <p data-start="9249" data-end="9319" class="">MDN Web Docs – HTML: <a data-start="9270" data-end="9319" data-is-last-node="" rel="noopener" target="_new" class="" href="https://developer.mozilla.org/en-US/docs/Web/HTML">https://developer.mozilla.org/en-US/docs/Web/HTML</a></p> </li> </ul> </div> </div> </div> </div> <div class="mwx-article-help"><span>معلومة تحتاج إلى تصحيح؟ حدّد الجملة وأرسل بلاغًا واضحًا.</span><a class="mwr-report-button" href="https://mwade3.com/report/?post=3025748" data-report-post="3025748"><span aria-hidden="true">⚑</span> أبلغ عن هذا المحتوى</a></div> </article> <aside class="mwx-reading-sidebar" aria-label="استكشف الموقع"><div class="mwx-side-box"><span class="mwx-eyebrow">دليلك في مواضيع</span><h2>مساحة لكلّ اهتمام.</h2><p>انتقل إلى مجال جديد، أو أكمل القراءة في موضوع تحبّه.</p><a class="mwx-button" href="https://mwade3.com/categories/">اكتشف المجالات <svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div><nav class="mwx-side-toc" aria-label="محتويات الصفحة"><h2>في هذه الصفحة</h2><a href="#mwx-section-1">تعريف لغة HTML وأهميتها</a><a href="#mwx-section-2">بنية مستند HTML</a><a href="#mwx-section-4">الوسوم الأساسية في HTML</a><a href="#mwx-section-11">الخصائص Attributes في HTML</a><a href="#mwx-section-12">HTML5: التطورات والمزايا</a><a href="#mwx-section-13">التكامل بين HTML وCSS وJavaScript</a><a href="#mwx-section-14">إنشاء صفحة ويب بسيطة باستخدام HTML وCSS</a><a href="#mwx-section-15">استخدام الجداول في HTML</a><a href="#mwx-section-18">قواعد ونصائح أساسية عند كتابة HTML</a><a href="#mwx-section-19">مستقبل HTML وتطوره</a><a href="#mwx-section-20">الخلاصة</a><a href="#mwx-section-21">المصادر والمراجع</a></nav><nav class="mwx-side-links" aria-label="روابط مفيدة"><h2>روابط مفيدة</h2><a href="https://mwade3.com/about-us/">من نحن<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a><a href="https://mwade3.com/contact-us/">تواصل معنا<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a><a href="https://mwade3.com/faq/">الأسئلة الشائعة<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a><a href="https://mwade3.com/info/">دليل الموقع والسياسات<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></nav></aside> </div> <section class="mwx-section mwx-related"><div class="mwx-section-heading"><div><span class="mwx-eyebrow">أكمل الاستكشاف</span><h2>قد تحب أن تقرأ أيضًا</h2></div></div><div class="mwx-cards"> <article class="mwx-card "> <a class="mwx-card-art mwx-tone-technology" href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" tabindex="-1" aria-hidden="true"> <img width="768" height="547" src="https://mwade3.com/wp-content/uploads/logo-768x547.png" class="mwx-card-image" alt="" decoding="async" srcset="https://mwade3.com/wp-content/uploads/logo-768x547.png 768w, https://mwade3.com/wp-content/uploads/logo-300x214.png 300w, https://mwade3.com/wp-content/uploads/logo.png 1008w" sizes="auto, (max-width: 768px) 100vw, 768px" /> </a> <div class="mwx-card-copy"> <a class="mwx-kicker" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a> <h2><a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/">إنشاء مدونة باستخدام Node.js</a></h2> <p>إنشاء مدوّنة باستخدام Node.js وExpress (الجزء الأول) في عصر التطور التكنولوجي المتسارع، أصبحت منصات التدوين ال…</p> <div class="mwx-card-bottom"><button class="mwx-save-button mwx-save-compact" type="button" disabled data-save-id="3153372" data-save-title="إنشاء مدونة باستخدام Node.js" data-save-url="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" aria-pressed="false" aria-label="حفظ للقراءة لاحقًا: إنشاء مدونة باستخدام Node.js"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4Z"/></svg><span>حفظ للقراءة</span></button><time datetime="2025-06-11T10:08:09+03:00">11 يونيو 2025</time><a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" aria-label="اقرأ: إنشاء مدونة باستخدام Node.js"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div> </div> </article> <article class="mwx-card "> <a class="mwx-card-art mwx-tone-technology" href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" tabindex="-1" aria-hidden="true"> <img width="768" height="547" src="https://mwade3.com/wp-content/uploads/logo-768x547.png" class="mwx-card-image" alt="" decoding="async" srcset="https://mwade3.com/wp-content/uploads/logo-768x547.png 768w, https://mwade3.com/wp-content/uploads/logo-300x214.png 300w, https://mwade3.com/wp-content/uploads/logo.png 1008w" sizes="auto, (max-width: 768px) 100vw, 768px" /> </a> <div class="mwx-card-copy"> <a class="mwx-kicker" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a> <h2><a href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/">تحويل HTML إلى قالب ووردبريس</a></h2> <p>مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس يشكل ووردبريس أحد أكثر أنظمة إدارة المحتوى ا…</p> <div class="mwx-card-bottom"><button class="mwx-save-button mwx-save-compact" type="button" disabled data-save-id="3153351" data-save-title="تحويل HTML إلى قالب ووردبريس" data-save-url="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" aria-pressed="false" aria-label="حفظ للقراءة لاحقًا: تحويل HTML إلى قالب ووردبريس"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4Z"/></svg><span>حفظ للقراءة</span></button><time datetime="2025-06-11T10:03:35+03:00">11 يونيو 2025</time><a href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" aria-label="اقرأ: تحويل HTML إلى قالب ووردبريس"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div> </div> </article> <article class="mwx-card "> <a class="mwx-card-art mwx-tone-technology" href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" tabindex="-1" aria-hidden="true"> <img width="768" height="547" src="https://mwade3.com/wp-content/uploads/logo-768x547.png" class="mwx-card-image" alt="" decoding="async" srcset="https://mwade3.com/wp-content/uploads/logo-768x547.png 768w, https://mwade3.com/wp-content/uploads/logo-300x214.png 300w, https://mwade3.com/wp-content/uploads/logo.png 1008w" sizes="auto, (max-width: 768px) 100vw, 768px" /> </a> <div class="mwx-card-copy"> <a class="mwx-kicker" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a> <h2><a href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/">تنظيم الشيفرة في JavaScript</a></h2> <p>تصميم النّصوص البرمجيّة: تنظيم JavaScript يُعدُّ تنظيم النصوص البرمجية في JavaScript من الركائز الأساسية التي…</p> <div class="mwx-card-bottom"><button class="mwx-save-button mwx-save-compact" type="button" disabled data-save-id="3153329" data-save-title="تنظيم الشيفرة في JavaScript" data-save-url="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" aria-pressed="false" aria-label="حفظ للقراءة لاحقًا: تنظيم الشيفرة في JavaScript"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4Z"/></svg><span>حفظ للقراءة</span></button><time datetime="2025-06-11T09:59:03+03:00">11 يونيو 2025</time><a href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" aria-label="اقرأ: تنظيم الشيفرة في JavaScript"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div> </div> </article> </div></section> </main> <footer class="mwx-footer"> <div class="mwx-container mwx-footer-grid"> <div class="mwx-footer-brand"><a class="mwx-brand" href="https://mwade3.com/"><span class="mwx-brand-mark" aria-hidden="true"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v16M12 5C9 3 5 3 2 4v15c4-1 7-1 10 2 3-3 6-3 10-2V4c-3-1-7-1-10 1Z"/></svg></span><span><strong>مواضيع<span class="mwx-brand-dot">.</span></strong><small>كل قراءة، فكرة جديدة</small></span></a><p>معرفة وأدوات تساعدك في يومك.<br>اقرأ، جرّب، ورتّب ما يهمك.</p></div> <nav aria-label="استكشف مواضيع"><h2>استكشف</h2><a href="https://mwade3.com/tools/">أدوات مواضيع</a><a href="https://mwade3.com/paths/">مسارات الاستكشاف</a><a href="https://mwade3.com/library/">مكتبتي</a><a href="https://mwade3.com/">الرئيسية</a><a href="https://mwade3.com/categories/">المجالات والتصنيفات</a><a href="https://mwade3.com/last/">آخر المواضيع</a><a href="https://mwade3.com/faq/">الأسئلة الشائعة</a></nav> <nav aria-label="عن الموقع"><h2>عن مواضيع</h2><a href="https://mwade3.com/weather/">الطقس</a><a href="https://mwade3.com/today/">التاريخ والمناسبات</a><a href="https://mwade3.com/about-us/">من نحن</a><a href="https://mwade3.com/%d9%85%d8%a8%d8%a7%d8%af%d8%a6-%d8%a7%d9%84%d9%86%d8%b4%d8%b1-%d9%81%d9%8a-%d9%85%d9%86%d8%b5%d8%a9-%d9%85%d9%88%d8%a7%d8%b6%d9%8a%d8%b9/">مبادئ النشر</a><a href="https://mwade3.com/contact-us/">تواصل معنا</a><a href="https://mwade3.com/report/">الإبلاغ عن محتوى</a></nav> <nav aria-label="السياسات والحقوق"><h2>السياسات والحقوق</h2><a href="https://mwade3.com/privacy/">سياسة الخصوصية</a><a href="https://mwade3.com/cookies/">ملفات تعريف الارتباط</a><button type="button" class="mwx-footer-privacy" data-mwc-open-preferences>خيارات الخصوصية</button><a href="https://mwade3.com/terms/">شروط الاستخدام</a><a href="https://mwade3.com/info/">جميع السياسات والمعلومات</a></nav> </div> <div class="mwx-container mwx-footer-bottom"><span>© 2026 مواضيع. جميع الحقوق محفوظة.</span><a href="https://mwade3.com/contact-us/">تواصل معنا من الموقع <svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 6 9 7 9-7"/></svg></a><a href="#mwx-site" class="mwx-back-top">إلى أعلى الصفحة ↑</a></div> </footer> <div class="mwx-toast" role="status" aria-live="polite" hidden></div></div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/jannah-new/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="mwc-privacy-js-before"> window.mwcConsentConfig={"version":"2026-10-12.1","expiryDays":180,"cookieName":"mwc_consent","privacyUrl":"https:\/\/mwade3.com\/privacy\/","cookiesUrl":"https:\/\/mwade3.com\/cookies\/","termsUrl":"https:\/\/mwade3.com\/terms\/","contactUrl":"https:\/\/mwade3.com\/contact-us\/","language":"ar","advertising":false,"lastUpdatedAr":"12 \u062a\u0634\u0631\u064a\u0646 \u0627\u0644\u0623\u0648\u0644 2026","lastUpdatedEn":"12 October 2026"}; //# sourceURL=mwc-privacy-js-before </script> <script data-wp-strategy="defer" defer id="mwc-privacy-js" src="https://mwade3.com/wp-content/plugins/mwade3-privacy/assets/privacy.js?ver=1.0.0"></script> <script data-wp-strategy="defer" defer id="mwx-site-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/site.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwx-calculations-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/calculations.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwx-portal-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/portal.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwx-live-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/live.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwc-desk-js" src="https://mwade3.com/wp-content/plugins/mwade3-contact/assets/desk.js?ver=1.0.0"></script> <script id="wp-consent-api-js-extra"> var consent_api = {"consent_type":"optin","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent","services":[]}; //# sourceURL=wp-consent-api-js-extra </script> <script id="wp-consent-api-js" src="https://mwade3.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=2.1.0"></script> <div id="mwc-privacy-root" class="mwc-root" data-version="2026-10-12.1"></div> <noscript><div class="mwc-noscript" lang="ar" dir="rtl">ملفات الارتباط الاختيارية متوقفة لأن JavaScript غير متاح. يمكنك قراءة <a href="https://mwade3.com/cookies/">سياسة ملفات الارتباط</a>.</div></noscript> </body> </html>