انتقل إلى المحتوى
مساحة عربية للمعرفة والأدوات اليوميةتعرّف على مواضيع
مواضيع.كل قراءة، فكرة جديدة
مكتبتيتواصل معنا
البرمجة

أساسيات إنشاء موقع ويب

نُشر في مواضيع
أبلغ عن هذا المحتوى
في هذه الصفحة
  1. ما هي HTML ولماذا تعتبر أساسية؟
  2. الهيكل الأساسي لصفحة HTML
  3. تعليمات HTML الأساسية وأهمها
  4. خصائص السمات (Attributes) في HTML
  5. التعامل مع النصوص وتنسيقها
  6. إدراج الوسائط المتعددة
  7. إنشاء النماذج (Forms)
  8. مفهوم DOM وعلاقته بـ HTML
  9. قواعد هامة في كتابة HTML
  10. تحسين محركات البحث SEO باستخدام HTML
  11. للعناوين الفرعية). كتابة نص بديل للصور (alt) يصف محتوى الصورة. استخدام وسم لوصف المحتوى والكلمات المفتاحية. تنظيم المحتوى في فقرات واضحة وعناصر معنونة. ضمان سرعة تحميل الصفحة عبر تقليل حجم الملفات والاهتمام بهيكل الكود. مقارنة بين HTML وCSS وJavaScript
  12. أدوات تحرير HTML
  13. ملخص للعناصر الأساسية في HTML

أساسيات إنشاء موقع ويب باستخدام تعليمات HTML

في عصر الرقمنة الذي نعيشه اليوم، أصبح وجود موقع ويب هو ضرورة لكل فرد أو مؤسسة تطمح إلى التواجد على الإنترنت والتواصل مع جمهورها بشكل فعّال. ومع أن تقنيات تطوير الويب عديدة ومتنوعة، يبقى HTML (لغة ترميز النصوص التشعبية) الركيزة الأساسية التي تُبنى عليها صفحات الويب. فهم أساسيات HTML هو الخطوة الأولى لأي شخص يرغب في إنشاء موقع إلكتروني، مهما كان مستوى خبرته التقنية. هذا المقال يستعرض بالتفصيل مبادئ HTML، كيفية استخدام تعليماتها لإنشاء صفحات ويب، وأهم المفاهيم المرتبطة بها، ليكون مرجعًا غنيًا يمكن الاعتماد عليه.

ما هي HTML ولماذا تعتبر أساسية؟

HTML هي اختصار لـ HyperText Markup Language، أي “لغة ترميز النص التشعبي”، وهي اللغة الأساسية التي تُستخدم لبناء هيكل صفحات الويب. ليست لغة برمجة بالمعنى التقليدي، وإنما هي لغة ترميزية تقوم بوصف مكونات الصفحة، مثل العناوين، الفقرات، الصور، والروابط. بدون HTML، لن يتمكن المتصفح من عرض المحتوى بشكل منظم وسهل القراءة.

تتكون صفحات الويب من ملفات نصية بسيطة تحتوي على تعليمات HTML التي تُفسرها متصفحات الويب لتعرض المحتوى بشكل جمالي ومنسق للمستخدم. لذا، معرفة كيفية كتابة هذه التعليمات وفهم هيكلها هو أمر لا غنى عنه لأي مطور ويب.

الهيكل الأساسي لصفحة HTML

لكل صفحة HTML بنية أساسية يجب الالتزام بها حتى يتم عرضها بشكل صحيح عبر جميع المتصفحات. هذه البنية تبدأ بعلامة التي تمثل الجذر الذي يحتوي جميع عناصر الصفحة، وتتفرع إلى جزئين رئيسيين: و .

1. عنصر

هو العنصر الجذري الذي يضم كامل محتوى الصفحة، ويبدأ دائمًا بعلامة البداية وينتهي بعلامة النهاية .

2. عنصر

يتضمن هذا القسم معلومات غير مرئية للمستخدم مباشرة، لكنه ضروري للمتصفح ولأغراض تحسين محركات البحث (SEO). يحتوي عادةً على:

  • عنوان الصفحة داخل عنصر </code>.</p> </li> <li data-start="1698" data-end="1727" class="" style=""> <p data-start="1700" data-end="1727" class="">تعاريف الترميز (مثل UTF-8).</p> </li> <li data-start="1728" data-end="1770" class="" style=""> <p data-start="1730" data-end="1770" class="">روابط لملفات CSS أو جافاسكريبت الخارجية.</p> </li> <li data-start="1771" data-end="1826" class="" style=""> <p data-start="1773" data-end="1826" class="">بيانات وصفية (Meta Tags) تساعد في تحسين محركات البحث.</p> </li> </ul> <h3 data-start="1828" data-end="1848" class="" id="mwx-section-5">3. عنصر <code data-start="1840" data-end="1848"></code></h3> <p data-start="1850" data-end="1973" class="">يحتوي على جميع العناصر المرئية التي تظهر على صفحة الويب مثل النصوص، الصور، الفيديوهات، الروابط، الأزرار، الجداول، والقوائم.</p> <p data-start="1975" data-end="2010" class="">مثال على الهيكل الأساسي لصفحة HTML:</p> <pre class="overflow-visible!" data-start="2012" data-end="2234"><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>>مثال على صفحة HTML</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">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">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">p</span></span></span><span>>هذه فقرة نصية توضح أساسيات 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">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> <h2 data-start="2236" data-end="2267" class="" id="mwx-section-6">تعليمات HTML الأساسية وأهمها</h2> <h3 data-start="2269" data-end="2302" class="" id="mwx-section-7">1. العناوين <code data-start="2285" data-end="2291"></p> <h1></code> إلى <code data-start="2296" data-end="2302"></p> <h6></code></h3> <p data-start="2304" data-end="2488" class="">تمثل عناوين النصوص وتختلف في الأهمية والحجم، حيث <code data-start="2353" data-end="2359"></p> <h1></code> هو العنوان الرئيسي والأكبر، و<code data-start="2389" data-end="2395"></p> <h6></code> هو العنوان الأدنى. استخدام العناوين بشكل صحيح يساعد في تنظيم المحتوى ويوفر تجربة قراءة أفضل.</p> <h3 data-start="2490" data-end="2510" class="" id="mwx-section-8">2. الفقرات <code data-start="2505" data-end="2510"></p> <p></code></h3> <p data-start="2512" data-end="2637" class="">عنصر الفقرة يستخدم لتقسيم النصوص إلى أجزاء سهلة القراءة. يمكن أن يحتوي على نصوص عادية أو حتى عناصر أخرى مثل الروابط أو الصور.</p> <h3 data-start="2639" data-end="2668" class="" id="mwx-section-9">3. الروابط التشعبية <code data-start="2663" data-end="2668"><a></code></h3> <p data-start="2670" data-end="2766" class="">تسمح للزوار بالانتقال إلى صفحات أخرى أو مواقع خارجية من خلال النقر على النص أو الصورة المرتبطة.</p> <p data-start="2768" data-end="2780" class="">صيغة الرابط:</p> <pre class="overflow-visible!" data-start="2782" data-end="2843"><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="2845" data-end="2865" class="" id="mwx-section-10">4. الصور <code data-start="2858" data-end="2865"><img></code></h3> <p data-start="2867" data-end="3009" class="">تستخدم لإضافة الصور إلى صفحة الويب، مع تحديد مصدر الصورة باستخدام السمة <code data-start="2939" data-end="2944">src</code>، والنص البديل الذي يظهر في حالة عدم تحميل الصورة باستخدام <code data-start="3003" data-end="3008">alt</code>.</p> <p data-start="3011" data-end="3016" class="">مثال:</p> <pre class="overflow-visible!" data-start="3018" data-end="3068"><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">"logo.png"</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="3070" data-end="3084" class="" id="mwx-section-11">5. القوائم</h3> <p data-start="3086" data-end="3110" class="">تنقسم إلى نوعين رئيسيين:</p> <ul data-start="3112" data-end="3244"> <li data-start="3112" data-end="3172" class="" style=""> <p data-start="3114" data-end="3172" class=""><strong data-start="3114" data-end="3140">القوائم المرتبة <code data-start="3132" data-end="3138"></p> <ol></code></strong>: تعطي ترقيمًا تلقائيًا للعناصر.</p> </li> <li data-start="3173" data-end="3244" class="" style=""> <p data-start="3175" data-end="3244" class=""><strong data-start="3175" data-end="3205">القوائم غير المرتبة <code data-start="3197" data-end="3203"></p> <ul></code></strong>: تظهر عناصر القائمة مع نقاط (Bullets).</p> </li> </ul> <p data-start="3246" data-end="3287" class="">كل عنصر داخل القائمة يتم وضعه ضمن <code data-start="3280" data-end="3286"></p> <li></code>.</p> <p data-start="3289" data-end="3306" class="">مثال قائمة مرتبة:</p> <pre class="overflow-visible!" data-start="3308" data-end="3379"><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">ol</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">ol</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="3381" data-end="3405" class="" id="mwx-section-12">6. الجداول <code data-start="3396" data-end="3405"></p> <table></code></h3> <p data-start="3407" data-end="3482" class="">تستخدم الجداول لعرض البيانات المنظمة في صفوف وأعمدة، وتتكون من عناصر فرعية:</p> <ul data-start="3484" data-end="3552"> <li data-start="3484" data-end="3507" class="" style=""> <p data-start="3486" data-end="3507" class=""><code data-start="3486" data-end="3492"></p> <tr></code>: صف من الجدول.</p> </li> <li data-start="3508" data-end="3529" class="" style=""> <p data-start="3510" data-end="3529" class=""><code data-start="3510" data-end="3516"></p> <th></code>: رأس العمود.</p> </li> <li data-start="3530" data-end="3552" class="" style=""> <p data-start="3532" data-end="3552" class=""><code data-start="3532" data-end="3538"></p> <td></code>: خلية بيانات.</p> </li> </ul> <p data-start="3554" data-end="3564" class="">مثال مبسط:</p> <pre class="overflow-visible!" data-start="3566" data-end="3707"><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-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">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">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> <h2 data-start="3709" data-end="3745" class="" id="mwx-section-13">خصائص السمات (Attributes) في HTML</h2> <p data-start="3747" data-end="3830" class="">تمكن السمات من تعديل سلوك أو مظهر عناصر HTML، وتكتب داخل وسم العنصر. من أهم السمات:</p> <ul data-start="3832" data-end="4028"> <li data-start="3832" data-end="3864" class="" style=""> <p data-start="3834" data-end="3864" class=""><code data-start="3834" data-end="3838">id</code>: لتعريف معرف فريد للعنصر.</p> </li> <li data-start="3865" data-end="3904" class="" style=""> <p data-start="3867" data-end="3904" class=""><code data-start="3867" data-end="3874">class</code>: لتصنيف العنصر ضمن فئة معينة.</p> </li> <li data-start="3905" data-end="3951" class="" style=""> <p data-start="3907" data-end="3951" class=""><code data-start="3907" data-end="3914">style</code>: لتطبيق أنماط CSS مباشرة على العنصر.</p> </li> <li data-start="3952" data-end="3989" class="" style=""> <p data-start="3954" data-end="3989" class=""><code data-start="3954" data-end="3960">href</code>: لتحديد رابط في عناصر <code data-start="3983" data-end="3988"><a></code>.</p> </li> <li data-start="3990" data-end="4028" class="" style=""> <p data-start="3992" data-end="4028" class=""><code data-start="3992" data-end="3997">src</code>: لتحديد مصدر الصور أو الوسائط.</p> </li> </ul> <p data-start="4030" data-end="4035" class="">مثال:</p> <pre class="overflow-visible!" data-start="4037" data-end="4138"><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-attr">id</span></span><span>=</span><span><span class="hljs-string">"intro"</span></span><span> </span><span><span class="hljs-attr">class</span></span><span>=</span><span><span class="hljs-string">"text-large"</span></span><span> </span><span><span class="hljs-attr">style</span></span><span>=</span><span><span class="hljs-string">"color: blue;"</span></span><span>> نص تعريفي ملون وكبير الحجم. </span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span></span></code></div></div></pre> <h2 data-start="4140" data-end="4169" class="" id="mwx-section-14">التعامل مع النصوص وتنسيقها</h2> <p data-start="4171" data-end="4225" class="">HTML توفر مجموعة كبيرة من العناصر لتنسيق النصوص، منها:</p> <ul data-start="4227" data-end="4527"> <li data-start="4227" data-end="4332" class="" style=""> <p data-start="4229" data-end="4332" class=""><strong data-start="4229" data-end="4266">العناصر الغامقة <code data-start="4247" data-end="4257"><strong></code> و<code data-start="4259" data-end="4264"><b></code></strong>: لتحديد نص غامق، مع اختلاف بسيط في الدلالة (الأول يعبر عن أهمية).</p> </li> <li data-start="4333" data-end="4408" class="" style=""> <p data-start="4335" data-end="4408" class=""><strong data-start="4335" data-end="4359">المائل <code data-start="4344" data-end="4350"><em></code> و<code data-start="4352" data-end="4357"><i></code></strong>: لتنسيق نص مائل، مع دلالة على التأكيد في <code data-start="4401" data-end="4407"><em></code>.</p> </li> <li data-start="4409" data-end="4468" class="" style=""> <p data-start="4411" data-end="4468" class=""><strong data-start="4411" data-end="4437">السطور المقطوعة <code data-start="4429" data-end="4435"><br /></code></strong>: تستخدم لفصل النص بأسطر جديدة.</p> </li> <li data-start="4469" data-end="4527" class="" style=""> <p data-start="4471" data-end="4527" class=""><strong data-start="4471" data-end="4497">النصوص المقطوعة <code data-start="4489" data-end="4495"></p> <hr> <p></code></strong>: لرسم خط فاصل بين أجزاء النص.</p> </li> </ul> <p data-start="4529" data-end="4603" class="">استخدام هذه العناصر بشكل مدروس يحسن من تجربة القراءة والتنقل داخل المحتوى.</p> <h2 data-start="4605" data-end="4630" class="" id="mwx-section-15">إدراج الوسائط المتعددة</h2> <p data-start="4632" data-end="4704" class="">بالإضافة إلى الصور، يمكن إدراج مقاطع فيديو أو صوت عبر تعليمات HTML خاصة:</p> <ul data-start="4706" data-end="4805"> <li data-start="4706" data-end="4765" class="" style=""> <p data-start="4708" data-end="4765" class="">الفيديو: <code data-start="4717" data-end="4726"><video></code> مع تحديد مصدر الفيديو داخل <code data-start="4754" data-end="4764"><source></code>.</p> </li> <li data-start="4766" data-end="4805" class="" style=""> <p data-start="4768" data-end="4805" class="">الصوت: <code data-start="4775" data-end="4784"><audio></code> مع تحديد مصدر الصوت.</p> </li> </ul> <p data-start="4807" data-end="4825" class="">مثال لإدراج فيديو:</p> <pre class="overflow-visible!" data-start="4827" data-end="4941"><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">video</span></span></span><span> </span><span><span class="hljs-attr">controls</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">source</span></span></span><span> </span><span><span class="hljs-attr">src</span></span><span>=</span><span><span class="hljs-string">"movie.mp4"</span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"video/mp4"</span></span><span>> المتصفح لا يدعم تشغيل الفيديو. </span><span><span class="hljs-tag"></<span class="hljs-name">video</span></span></span><span>> </span></span></code></div></div></pre> <h2 data-start="4943" data-end="4967" class="" id="mwx-section-16">إنشاء النماذج (Forms)</h2> <p data-start="4969" data-end="5110" class="">النماذج هي الطريقة الأساسية للتفاعل بين المستخدم وموقع الويب، حيث يمكن جمع البيانات مثل التسجيل أو التعليقات. تتكون النماذج من عدة عناصر مثل:</p> <ul data-start="5112" data-end="5301"> <li data-start="5112" data-end="5146" class="" style=""> <p data-start="5114" data-end="5146" class=""><code data-start="5114" data-end="5122"></p> <form></code>: العنصر الحاوي للنموذج.</p> </li> <li data-start="5147" data-end="5214" class="" style=""> <p data-start="5149" data-end="5214" class=""><code data-start="5149" data-end="5158"><input></code>: حقول إدخال متنوعة (نص، كلمة مرور، أزرار، اختيار، …).</p> </li> <li data-start="5215" data-end="5251" class="" style=""> <p data-start="5217" data-end="5251" class=""><code data-start="5217" data-end="5229"><textarea></code>: حقل نص متعدد الأسطر.</p> </li> <li data-start="5252" data-end="5301" class="" style=""> <p data-start="5254" data-end="5301" class=""><code data-start="5254" data-end="5264"><select></code> و <code data-start="5267" data-end="5277"><option></code>: قائمة منسدلة للاختيار.</p> </li> </ul> <p data-start="5303" data-end="5320" class="">مثال لنموذج بسيط:</p> <pre class="overflow-visible!" data-start="5322" data-end="5496"><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">form</span></span></span><span> </span><span><span class="hljs-attr">action</span></span><span>=</span><span><span class="hljs-string">"/submit"</span></span><span> </span><span><span class="hljs-attr">method</span></span><span>=</span><span><span class="hljs-string">"post"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">label</span></span></span><span> </span><span><span class="hljs-attr">for</span></span><span>=</span><span><span class="hljs-string">"name"</span></span><span>>الاسم:</span><span><span class="hljs-tag"></<span class="hljs-name">label</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"text"</span></span><span> </span><span><span class="hljs-attr">id</span></span><span>=</span><span><span class="hljs-string">"name"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"name"</span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">input</span></span></span><span> </span><span><span class="hljs-attr">type</span></span><span>=</span><span><span class="hljs-string">"submit"</span></span><span> </span><span><span class="hljs-attr">value</span></span><span>=</span><span><span class="hljs-string">"إرسال"</span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">form</span></span></span><span>> </span></span></code></div></div></pre> <h2 data-start="5498" data-end="5526" class="" id="mwx-section-17">مفهوم DOM وعلاقته بـ HTML</h2> <p data-start="5528" data-end="5800" class="">DOM (Document Object Model) هو نموذج تمثيل صفحة الويب كهيكل شجري للعناصر، حيث كل عنصر HTML يمثل عقدة (Node) يمكن التعامل معها برمجيًا عبر لغات مثل جافاسكريبت. هذا يسمح بالتفاعل الديناميكي مع محتوى الصفحة، مثل تغيير النص، الصور، أو إضافة عناصر جديدة دون إعادة تحميل الصفحة.</p> <p data-start="5802" data-end="5876" class="">فهم DOM يفتح آفاقًا متقدمة في تطوير المواقع ويعزز إمكانيات HTML التقليدية.</p> <h2 data-start="5878" data-end="5905" class="" id="mwx-section-18">قواعد هامة في كتابة HTML</h2> <ul data-start="5907" data-end="6381"> <li data-start="5907" data-end="6005" class=""> <p data-start="5909" data-end="6005" class=""><strong data-start="5909" data-end="5941">الالتزام بكتابة وسوم الإغلاق</strong>: العديد من عناصر HTML تحتاج إلى وسم إغلاق لتجنب أخطاء في العرض.</p> </li> <li data-start="6006" data-end="6101" class=""> <p data-start="6008" data-end="6101" class=""><strong data-start="6008" data-end="6045">استخدام التنسيق والهوامش المناسبة</strong>: كتابة الكود بطريقة منظمة وواضحة تسهل الصيانة والتعديل.</p> </li> <li data-start="6102" data-end="6176" class=""> <p data-start="6104" data-end="6176" class=""><strong data-start="6104" data-end="6141">اختيار أسماء معبرة للـ id و class</strong>: لتسهيل الربط مع CSS و JavaScript.</p> </li> <li data-start="6177" data-end="6263" class=""> <p data-start="6179" data-end="6263" class=""><strong data-start="6179" data-end="6217">الاهتمام بمعايير التوافق والواصفات</strong>: لضمان عمل الموقع في جميع المتصفحات والأجهزة.</p> </li> <li data-start="6264" data-end="6381" class=""> <p data-start="6266" data-end="6381" class=""><strong data-start="6266" data-end="6297">استخدام عناصر HTML5 الحديثة</strong>: مثل <code data-start="6303" data-end="6313"></p> <header></code>, <code data-start="6315" data-end="6325"></p> <footer></code>, <code data-start="6327" data-end="6338"></p> <section></code>, <code data-start="6340" data-end="6351"></p> <article></code> لتوضيح بنية الصفحة بشكل أفضل.</p> </li> </ul> <h2 data-start="6383" data-end="6422" class="" id="mwx-section-19">تحسين محركات البحث SEO باستخدام HTML</h2> <p data-start="6424" data-end="6541" class="">يعد استخدام تعليمات HTML بشكل صحيح أمرًا جوهريًا لتحسين ظهور الموقع في نتائج محركات البحث. بعض الممارسات المهمة تشمل:</p> <ul data-start="6543" data-end="6847"> <li data-start="6543" data-end="6627" class=""> <p data-start="6545" data-end="6627" class="">استخدام عناصر العنوان بشكل صحيح (<code data-start="6578" data-end="6584"></p> <h1></code> للعنوان الرئيسي، <code data-start="6602" data-end="6608"></p> <h2 id="mwx-section-20"></code> للعناوين الفرعية).</p> </li> <li data-start="6628" data-end="6675" class=""> <p data-start="6630" data-end="6675" class="">كتابة نص بديل للصور (<code data-start="6651" data-end="6656">alt</code>) يصف محتوى الصورة.</p> </li> <li data-start="6676" data-end="6731" class=""> <p data-start="6678" data-end="6731" class="">استخدام وسم <code data-start="6690" data-end="6698"></code> لوصف المحتوى والكلمات المفتاحية.</p> </li> <li data-start="6732" data-end="6777" class=""> <p data-start="6734" data-end="6777" class="">تنظيم المحتوى في فقرات واضحة وعناصر معنونة.</p> </li> <li data-start="6778" data-end="6847" class=""> <p data-start="6780" data-end="6847" class="">ضمان سرعة تحميل الصفحة عبر تقليل حجم الملفات والاهتمام بهيكل الكود.</p> </li> </ul> <h2 data-start="6849" data-end="6884" class="">مقارنة بين HTML وCSS وJavaScript</h2> <ul data-start="6886" data-end="7052"> <li data-start="6886" data-end="6919" class=""> <p data-start="6888" data-end="6919" class=""><strong data-start="6888" data-end="6896">HTML</strong>: هيكل الصفحة ومحتواها.</p> </li> <li data-start="6920" data-end="6992" class=""> <p data-start="6922" data-end="6992" class=""><strong data-start="6922" data-end="6929">CSS</strong>: تنسيق وتصميم الشكل الخارجي للصفحة (الألوان، الخطوط، التخطيط).</p> </li> <li data-start="6993" data-end="7052" class=""> <p data-start="6995" data-end="7052" class=""><strong data-start="6995" data-end="7009">JavaScript</strong>: برمجة التفاعلات والديناميكية داخل الصفحة.</p> </li> </ul> <p data-start="7054" data-end="7142" class="">إن إتقان HTML هو الخطوة الأولى، تليها تعلم CSS وJavaScript لتحقيق موقع ويب متكامل وجذاب.</p> <h2 data-start="7144" data-end="7163" class="" id="mwx-section-21">أدوات تحرير HTML</h2> <p data-start="7165" data-end="7231" class="">هناك العديد من برامج تحرير الأكواد التي تسهل كتابة صفحات HTML مثل:</p> <ul data-start="7233" data-end="7450"> <li data-start="7233" data-end="7298" class=""> <p data-start="7235" data-end="7298" class="">محررات نصية بسيطة: Notepad++، Sublime Text، Visual Studio Code.</p> </li> <li data-start="7299" data-end="7349" class=""> <p data-start="7301" data-end="7349" class="">أدوات تطوير متقدمة: Adobe Dreamweaver، WebStorm.</p> </li> <li data-start="7350" data-end="7450" class=""> <p data-start="7352" data-end="7450" class="">أدوات بناء مواقع بدون كتابة كود (CMS): ووردبريس، جوملا، لكنها تعتمد بشكل كبير على HTML في الخلفية.</p> </li> </ul> <h2 data-start="7452" data-end="7484" class="" id="mwx-section-22">ملخص للعناصر الأساسية في HTML</h2> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="7486" data-end="8667" class="w-fit min-w-(--thread-content-width)"> <thead data-start="7486" data-end="7585"> <tr data-start="7486" data-end="7585"> <th data-start="7486" data-end="7502" data-col-size="sm">العنصر</th> <th data-start="7502" data-end="7540" data-col-size="sm">الوصف</th> <th data-start="7540" data-end="7585" data-col-size="md">مثال الاستخدام</th> </tr> </thead> <tbody data-start="7684" data-end="8667"> <tr data-start="7684" data-end="7782"> <td data-start="7684" data-end="7700" data-col-size="sm"><code data-start="7686" data-end="7694"></code></td> <td data-start="7700" data-end="7737" data-col-size="sm">الجذر الرئيسي للصفحة</td> <td data-start="7737" data-end="7782" data-col-size="md"><code data-start="7739" data-end="7769"> ... </code></td> </tr> <tr data-start="7783" data-end="7880"> <td data-start="7783" data-end="7799" data-col-size="sm"><code data-start="7785" data-end="7793"><head></code></td> <td data-col-size="sm" data-start="7799" data-end="7835">معلومات عن الصفحة (غير مرئية)</td> <td data-col-size="md" data-start="7835" data-end="7880">يحتوي على <code data-start="7847" data-end="7856"><title></code>, <code data-start="7858" data-end="7866"></code>, إلخ</td> </tr> <tr data-start="7881" data-end="7980"> <td data-start="7881" data-end="7897" data-col-size="sm"><code data-start="7883" data-end="7891"></code></td> <td data-start="7897" data-end="7933" data-col-size="sm">محتوى الصفحة المرئي</td> <td data-col-size="md" data-start="7933" data-end="7980">النص، الصور، الفيديو، إلخ</td> </tr> <tr data-start="7981" data-end="8078"> <td data-start="7981" data-end="7998" data-col-size="sm"><code data-start="7983" data-end="7989"></p> <h1></code> – <code data-start="7992" data-end="7998"></p> <h6></code></td> <td data-start="7998" data-end="8033" data-col-size="sm">عناوين نصوص مختلفة المستويات</td> <td data-start="8033" data-end="8078" data-col-size="md"><code data-start="8035" data-end="8061"></p> <h1>العنوان الرئيسي</h1> <p></code></td> </tr> <tr data-start="8079" data-end="8176"> <td data-start="8079" data-end="8095" data-col-size="sm"><code data-start="8081" data-end="8086"></p> <p></code></td> <td data-start="8095" data-end="8130" data-col-size="sm">فقرة نصية</td> <td data-start="8130" data-end="8176" data-col-size="md"><code data-start="8132" data-end="8152"></p> <p>هذا نص فقرة</p> <p></code></td> </tr> <tr data-start="8177" data-end="8273"> <td data-start="8177" data-end="8193" data-col-size="sm"><code data-start="8179" data-end="8184"><a></code></td> <td data-start="8193" data-end="8227" data-col-size="sm">رابط تشعبي</td> <td data-start="8227" data-end="8273" data-col-size="md"><code data-start="8229" data-end="8258"><a href="url">نص الرابط</a></code></td> </tr> <tr data-start="8274" data-end="8370"> <td data-start="8274" data-end="8290" data-col-size="sm"><code data-start="8276" data-end="8283"><img></code></td> <td data-start="8290" data-end="8325" data-col-size="sm">صورة</td> <td data-start="8325" data-end="8370" data-col-size="md"><code data-start="8327" data-end="8367"><img decoding="async" src="image.jpg" alt="وصف الصورة"></code></td> </tr> <tr data-start="8371" data-end="8469"> <td data-start="8371" data-end="8387" data-col-size="sm"><code data-start="8373" data-end="8379"></p> <ul></code>, <code data-start="8381" data-end="8387"></p> <ol></code></td> <td data-col-size="sm" data-start="8387" data-end="8422">قوائم غير مرتبة ومرتبة</td> <td data-col-size="md" data-start="8422" data-end="8469"><code data-start="8424" data-end="8448"></p> <ul> <li>عنصر</li> </ul> <p></code></td> </tr> <tr data-start="8470" data-end="8566"> <td data-start="8470" data-end="8486" data-col-size="sm"><code data-start="8472" data-end="8481"></p> <table></code></td> <td data-start="8486" data-end="8520" data-col-size="sm">جدول</td> <td data-start="8520" data-end="8566" data-col-size="md"><code data-start="8522" data-end="8563"></p> <table> <tr> <td>بيانات</td> </tr> </table> <p></code></td> </tr> <tr data-start="8567" data-end="8667"> <td data-start="8567" data-end="8583" data-col-size="sm"><code data-start="8569" data-end="8577"></p> <form></code></td> <td data-start="8583" data-end="8618" data-col-size="sm">نموذج تفاعل</td> <td data-start="8618" data-end="8667" data-col-size="md"><code data-start="8620" data-end="8665"></p> <form action="#"><input type="text"></form> <p></code></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="8669" data-end="8672" class=""> <p data-start="8674" data-end="9162" class="">في الختام، يعد HTML اللغة الأساسية لإنشاء صفحات الويب، وهي تمثل البنية الأساسية التي ترتكز عليها تقنيات الويب الأخرى. إتقان أساسيات HTML وفهم كيفية كتابة تعليماتها بشكل صحيح هو حجر الأساس لبناء مواقع ناجحة وفعالة. من خلال التعرف على عناصر HTML، السمات، الهيكل، وكيفية إدراج المحتوى المتنوع، يستطيع المطور أن يبدأ في إنشاء صفحات تفاعلية ومتناغمة مع معايير الويب الحديثة ومتطلبات تحسين محركات البحث. هذا يعزز من تجربة المستخدم ويضمن وصول الموقع إلى أكبر شريحة ممكنة من الجمهور عبر الإنترنت.</p> <hr data-start="9164" data-end="9167" class=""> <h3 data-start="9169" data-end="9189" class="" id="mwx-section-23">المصادر والمراجع</h3> <ul data-start="9191" data-end="9301" data-is-last-node="" data-is-only-node=""> <li data-start="9191" data-end="9235" class=""> <p data-start="9193" data-end="9235" class="">W3Schools: <a data-start="9204" data-end="9235" rel="noopener" target="_new" class="cursor-pointer">https://www.w3schools.com/html/</a></p> </li> <li data-start="9236" data-end="9301" class=""> <p data-start="9238" data-end="9301" class="">MDN Web Docs: <a data-start="9252" data-end="9301" 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=3020219" data-report-post="3020219"><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-6">تعليمات HTML الأساسية وأهمها</a><a href="#mwx-section-13">خصائص السمات (Attributes) في HTML</a><a href="#mwx-section-14">التعامل مع النصوص وتنسيقها</a><a href="#mwx-section-15">إدراج الوسائط المتعددة</a><a href="#mwx-section-16">إنشاء النماذج (Forms)</a><a href="#mwx-section-17">مفهوم DOM وعلاقته بـ HTML</a><a href="#mwx-section-18">قواعد هامة في كتابة HTML</a><a href="#mwx-section-19">تحسين محركات البحث SEO باستخدام HTML</a><a href="#mwx-section-20">للعناوين الفرعية). كتابة نص بديل للصور (alt) يصف محتوى الصورة. استخدام وسم لوصف المحتوى والكلمات المفتاحية. تنظيم المحتوى في فقرات واضحة وعناصر معنونة. ضمان سرعة تحميل الصفحة عبر تقليل حجم الملفات والاهتمام بهيكل الكود. مقارنة بين HTML وCSS وJavaScript</a><a href="#mwx-section-21">أدوات تحرير HTML</a><a href="#mwx-section-22">ملخص للعناصر الأساسية في HTML</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>