كيفية تصميم وتنسيق صفحة الويب الأساسية باستخدام تعليمات HTML
يمثّل تصميم وتنسيق صفحة الويب أحد الأسس الجوهرية التي يقوم عليها تطوير المحتوى الرقمي في العصر الحديث، وتُعدّ لغة HTML (HyperText Markup Language) الركيزة الأولى في بناء هيكل صفحات الويب على شبكة الإنترنت. إنها لغة توصيفية تُستخدم لتحديد العناصر والمكونات الأساسية للصفحة، مثل العناوين، الفقرات، الصور، الروابط، الجداول، القوائم، والنماذج. تتكامل HTML مع لغات أخرى مثل CSS وJavaScript، لكن المقال التالي سيركز بشكل خاص على كيفية تصميم وتنسيق صفحة ويب باستخدام تعليمات HTML فقط، بهدف تقديم نظرة مفصلة وشاملة لكل عنصر من عناصر بناء الصفحة.
مفهوم لغة HTML وأهميتها
HTML ليست لغة برمجة تقليدية، وإنما هي لغة توصيف تُستخدم لوصف هيكل صفحة الويب ومحتواها. تحتوي على مجموعة من العناصر (Tags) المحاطة بأقواس زاويّة (مثل ) والتي تُستخدم لتحديد نوعية المحتوى المعروض للمستخدم. تتيح HTML للمطوّر تنظيم وتنسيق النصوص، إدراج الوسائط، التحكم في الروابط، وبناء الهياكل الأساسية لأي مشروع ويب.
تكمن أهمية HTML في كونها اللغة الأساسية التي يفهمها متصفح الويب، فهي تمثل اللبنة الأولى التي يتم من خلالها عرض المحتوى قبل تطبيق التنسيقات أو الوظائف التفاعلية.
الهيكل الأساسي لأي صفحة HTML
يتكوّن أي ملف HTML من بنية أساسية لا بدّ من اتباعها لضمان عمل الصفحة بشكل صحيح. ويمكن تلخيص هذا الهيكل في العناصر التالية:
شرح العناصر الأساسية:
-
: تعريف بنوع المستند ويشير إلى أن هذه الصفحة مكتوبة وفقًا لمعيار HTML5. -
: الجذر الذي يحتوي كل محتويات الصفحة. -
lang="ar": لتحديد لغة الصفحة، وهو مفيد لمحركات البحث وأدوات قراءة الشاشة. -
: يحتوي على معلومات وصفية مثل الترميز، العنوان، والروابط الخارجية. -
: يحدد نوع ترميز الأحرف، وUTF-8 هو الأنسب لدعم اللغات المختلفة. -
</code>: يحدد عنوان الصفحة الذي يظهر في شريط المتصفح.</p> </li> <li data-start="1920" data-end="1976" class="" style=""> <p data-start="1922" data-end="1976" class=""><code data-start="1922" data-end="1930"></code>: يحتوي على المحتوى الفعلي الذي يظهر للمستخدم.</p> </li> </ul> <hr data-start="1978" data-end="1981" class="" style=""> <h2 data-start="1983" data-end="2003" class="" id="mwx-section-4">العناوين والفقرات</h2> <h3 data-start="2005" data-end="2017" class="" id="mwx-section-5">العناوين</h3> <p data-start="2019" data-end="2191" class="">HTML توفّر ستة مستويات من العناوين تبدأ من <code data-start="2062" data-end="2068"></p> <h1></code> (الأكثر أهمية) وتنتهي بـ <code data-start="2094" data-end="2100"></p> <h6></code> (الأقل أهمية). يُستخدم العنوان لتنظيم المحتوى، وهو عنصر أساسي في تحسين محركات البحث (SEO).</p> <pre class="overflow-visible!" data-start="2193" data-end="2282"><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><span class="hljs-tag"><<span class="hljs-name">h3</span></span></span><span>>عنوان فرعي ثانوي</span><span><span class="hljs-tag"></<span class="hljs-name">h3</span></span></span><span>> </span></span></code></div></div></pre> <h3 data-start="2284" data-end="2295" class="" id="mwx-section-6">الفقرات</h3> <p data-start="2297" data-end="2339" class="">يُستخدم الوسم <code data-start="2311" data-end="2316"></p> <p></code> لكتابة الفقرات النصية:</p> <pre class="overflow-visible!" data-start="2341" data-end="2403"><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> <p data-start="2405" data-end="2484" class="">يمكن أيضًا استخدام وسم <code data-start="2428" data-end="2434"><br /></code> لإدراج سطر جديد داخل الفقرة دون بداية فقرة جديدة.</p> <hr data-start="2486" data-end="2489" class="" style=""> <h2 data-start="2491" data-end="2506" class="" id="mwx-section-7">تنسيق النصوص</h2> <p data-start="2508" data-end="2562" class="">HTML توفر مجموعة من الوسوم لتنسيق النصوص داخل الفقرات:</p> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="2564" data-end="2870" class="w-fit min-w-(--thread-content-width)"> <thead data-start="2564" data-end="2583"> <tr data-start="2564" data-end="2583"> <th data-start="2564" data-end="2572" data-col-size="sm">الوسم</th> <th data-start="2572" data-end="2583" data-col-size="sm">الوظيفة</th> </tr> </thead> <tbody data-start="2604" data-end="2870"> <tr data-start="2604" data-end="2654"> <td data-start="2604" data-end="2617" data-col-size="sm"><code data-start="2606" data-end="2616"><strong></code></td> <td data-start="2617" data-end="2654" data-col-size="sm">إبراز النص (غالبًا يظهر بخط عريض)</td> </tr> <tr data-start="2655" data-end="2707"> <td data-start="2655" data-end="2664" data-col-size="sm"><code data-start="2657" data-end="2663"><em></code></td> <td data-start="2664" data-end="2707" data-col-size="sm">التأكيد على النص (غالبًا يظهر بخط مائل)</td> </tr> <tr data-start="2708" data-end="2730"> <td data-start="2708" data-end="2716" data-col-size="sm"><code data-start="2710" data-end="2715"><u></code></td> <td data-start="2716" data-end="2730" data-col-size="sm">تسطير النص</td> </tr> <tr data-start="2731" data-end="2769"> <td data-start="2731" data-end="2742" data-col-size="sm"><code data-start="2733" data-end="2741"><mark></code></td> <td data-start="2742" data-end="2769" data-col-size="sm">تمييز النص بخلفية ملونة</td> </tr> <tr data-start="2770" data-end="2800"> <td data-start="2770" data-end="2782" data-col-size="sm"><code data-start="2772" data-end="2781"><small></code></td> <td data-start="2782" data-end="2800" data-col-size="sm">تقليل حجم الخط</td> </tr> <tr data-start="2801" data-end="2838"> <td data-start="2801" data-end="2811" data-col-size="sm"><code data-start="2803" data-end="2810"><del></code></td> <td data-start="2811" data-end="2838" data-col-size="sm">وضع خط على النص المشطوب</td> </tr> <tr data-start="2839" data-end="2870"> <td data-start="2839" data-end="2849" data-col-size="sm"><code data-start="2841" data-end="2848"><ins></code></td> <td data-start="2849" data-end="2870" data-col-size="sm">إضافة نص (تحت خط)</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> <p data-start="2872" data-end="2877" class="">مثال:</p> <pre class="overflow-visible!" data-start="2879" data-end="2967"><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">strong</span></span></span><span>>هام</span><span><span class="hljs-tag"></<span class="hljs-name">strong</span></span></span><span>> و </span><span><span class="hljs-tag"><<span class="hljs-name">em</span></span></span><span>>مُميز</span><span><span class="hljs-tag"></<span class="hljs-name">em</span></span></span><span>> ويحتوي على </span><span><span class="hljs-tag"><<span class="hljs-name">u</span></span></span><span>>تأكيد</span><span><span class="hljs-tag"></<span class="hljs-name">u</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> <hr data-start="2969" data-end="2972" class="" style=""> <h2 data-start="2974" data-end="2990" class="" id="mwx-section-8">إضافة الروابط</h2> <p data-start="2992" data-end="3042" class="">لإنشاء روابط داخلية أو خارجية يُستخدم الوسم <code data-start="3036" data-end="3041"><a></code>:</p> <pre class="overflow-visible!" data-start="3044" data-end="3122"><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-attr">target</span></span><span>=</span><span><span class="hljs-string">"_blank"</span></span><span>>زيارة الموقع</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>> </span></span></code></div></div></pre> <ul data-start="3124" data-end="3197"> <li data-start="3124" data-end="3148" class="" style=""> <p data-start="3126" data-end="3148" class=""><code data-start="3126" data-end="3132">href</code>: لتحديد الرابط.</p> </li> <li data-start="3149" data-end="3197" class="" style=""> <p data-start="3151" data-end="3197" class=""><code data-start="3151" data-end="3168">target="_blank"</code>: لفتح الرابط في نافذة جديدة.</p> </li> </ul> <hr data-start="3199" data-end="3202" class="" style=""> <h2 data-start="3204" data-end="3218" class="" id="mwx-section-9">إدراج الصور</h2> <p data-start="3220" data-end="3269" class="">يتم استخدام الوسم <code data-start="3238" data-end="3245"><img></code> لإدراج الصور في الصفحة:</p> <pre class="overflow-visible!" data-start="3271" data-end="3346"><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><span class="hljs-attr">width</span></span><span>=</span><span><span class="hljs-string">"400"</span></span><span> </span><span><span class="hljs-attr">height</span></span><span>=</span><span><span class="hljs-string">"300"</span></span><span>> </span></span></code></div></div></pre> <ul data-start="3348" data-end="3460"> <li data-start="3348" data-end="3369" class="" style=""> <p data-start="3350" data-end="3369" class=""><code data-start="3350" data-end="3355">src</code>: مسار الصورة.</p> </li> <li data-start="3370" data-end="3417" class="" style=""> <p data-start="3372" data-end="3417" class=""><code data-start="3372" data-end="3377">alt</code>: نص بديل يُعرض في حال فشل تحميل الصورة.</p> </li> <li data-start="3418" data-end="3460" class="" style=""> <p data-start="3420" data-end="3460" class=""><code data-start="3420" data-end="3427">width</code> و <code data-start="3430" data-end="3438">height</code>: لتحديد أبعاد الصورة.</p> </li> </ul> <hr data-start="3462" data-end="3465" class="" style=""> <h2 data-start="3467" data-end="3477" class="" id="mwx-section-10">القوائم</h2> <h3 data-start="3479" data-end="3506" class="" id="mwx-section-11">قوائم غير مرتبة (نقطية)</h3> <pre class="overflow-visible!" data-start="3508" data-end="3571"><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="3573" data-end="3596" class="" id="mwx-section-12">قوائم مرتبة (مرقمة)</h3> <pre class="overflow-visible!" data-start="3598" data-end="3669"><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> <hr data-start="3671" data-end="3674" class="" style=""> <h2 data-start="3676" data-end="3686" class="" id="mwx-section-13">الجداول</h2> <p data-start="3688" data-end="3761" class="">الجداول تُستخدم لتنظيم البيانات بطريقة مرتبة. تتكوّن من عناصر أساسية مثل:</p> <ul data-start="3763" data-end="3840"> <li data-start="3763" data-end="3788" class="" style=""> <p data-start="3765" data-end="3788" class=""><code data-start="3765" data-end="3774"></p> <table></code>: لبدء الجدول.</p> </li> <li data-start="3789" data-end="3802" class="" style=""> <p data-start="3791" data-end="3802" class=""><code data-start="3791" data-end="3797"></p> <tr></code>: صف.</p> </li> <li data-start="3803" data-end="3824" class="" style=""> <p data-start="3805" data-end="3824" class=""><code data-start="3805" data-end="3811"></p> <th></code>: رأس العمود.</p> </li> <li data-start="3825" data-end="3840" class="" style=""> <p data-start="3827" data-end="3840" class=""><code data-start="3827" data-end="3833"></p> <td></code>: خلية.</p> </li> </ul> <p data-start="3842" data-end="3847" class="">مثال:</p> <pre class="overflow-visible!" data-start="3849" data-end="4047"><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>>مبرمج</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>>مصممة</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> <hr data-start="4049" data-end="4052" class="" style=""> <h2 data-start="4054" data-end="4072" class="" id="mwx-section-14">النماذج (Forms)</h2> <p data-start="4074" data-end="4138" class="">النماذج تُستخدم لجمع البيانات من المستخدمين عبر الحقول المختلفة:</p> <pre class="overflow-visible!" data-start="4140" data-end="4431"><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">br</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">br</span></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">"email"</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">"email"</span></span><span> </span><span><span class="hljs-attr">id</span></span><span>=</span><span><span class="hljs-string">"email"</span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"email"</span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">br</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">br</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">"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> <hr data-start="4433" data-end="4436" class="" style=""> <h2 data-start="4438" data-end="4469" class="" id="mwx-section-15">استخدام التعليقات داخل الكود</h2> <p data-start="4471" data-end="4559" class="">تُستخدم التعليقات لتوثيق الكود أو تجاهل أجزاء منه أثناء التطوير، وتكتب على النحو التالي:</p> <pre class="overflow-visible!" data-start="4561" data-end="4610"><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-comment"><!-- هذا تعليق لا يظهر في المتصفح --></span></span><span> </span></span></code></div></div></pre> <hr data-start="4612" data-end="4615" class="" style=""> <h2 data-start="4617" data-end="4662" class="" id="mwx-section-16">الفصل بين الأقسام باستخدام الوسوم الدلالية</h2> <p data-start="4664" data-end="4743" class="">HTML5 قدّمت مجموعة من الوسوم الدلالية التي تحسّن من تنظيم الصفحة وهيكلتها، مثل:</p> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="4745" data-end="4970" class="w-fit min-w-(--thread-content-width)"> <thead data-start="4745" data-end="4764"> <tr data-start="4745" data-end="4764"> <th data-start="4745" data-end="4753" data-col-size="sm">الوسم</th> <th data-start="4753" data-end="4764" data-col-size="sm">الوظيفة</th> </tr> </thead> <tbody data-start="4785" data-end="4970"> <tr data-start="4785" data-end="4824"> <td data-start="4785" data-end="4798" data-col-size="sm"><code data-start="4787" data-end="4797"></p> <header></code></td> <td data-start="4798" data-end="4824" data-col-size="sm">ترويسة الصفحة أو القسم</td> </tr> <tr data-start="4825" data-end="4851"> <td data-start="4825" data-end="4835" data-col-size="sm"><code data-start="4827" data-end="4834"></p> <nav></code></td> <td data-start="4835" data-end="4851" data-col-size="sm">قائمة التنقل</td> </tr> <tr data-start="4852" data-end="4883"> <td data-start="4852" data-end="4866" data-col-size="sm"><code data-start="4854" data-end="4865"></p> <section></code></td> <td data-start="4866" data-end="4883" data-col-size="sm">قسم من الصفحة</td> </tr> <tr data-start="4884" data-end="4912"> <td data-start="4884" data-end="4898" data-col-size="sm"><code data-start="4886" data-end="4897"></p> <article></code></td> <td data-col-size="sm" data-start="4898" data-end="4912">مقال مستقل</td> </tr> <tr data-start="4913" data-end="4940"> <td data-start="4913" data-end="4925" data-col-size="sm"><code data-start="4915" data-end="4924"></p> <aside></code></td> <td data-start="4925" data-end="4940" data-col-size="sm">محتوى جانبي</td> </tr> <tr data-start="4941" data-end="4970"> <td data-start="4941" data-end="4954" data-col-size="sm"><code data-start="4943" data-end="4953"></p> <footer></code></td> <td data-start="4954" data-end="4970" data-col-size="sm">تذييل الصفحة</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> <p data-start="4972" data-end="4977" class="">مثال:</p> <pre class="overflow-visible!" data-start="4979" data-end="5309"><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">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">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">article</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h3</span></span></span><span>>عنوان مقال</span><span><span class="hljs-tag"></<span class="hljs-name">h3</span></span></span><span>> </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><span class="hljs-tag"></<span class="hljs-name">article</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></code></div></div></pre> <hr data-start="5311" data-end="5314" class="" style=""> <h2 data-start="5316" data-end="5382" class="" id="mwx-section-17">الجدول التالي يلخص أهم وسوم HTML المستخدمة في تصميم صفحة الويب:</h2> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="5384" data-end="5814" class="w-fit min-w-(--thread-content-width)"> <thead data-start="5384" data-end="5403"> <tr data-start="5384" data-end="5403"> <th data-start="5384" data-end="5392" data-col-size="sm">الوسم</th> <th data-start="5392" data-end="5403" data-col-size="sm">الوظيفة</th> </tr> </thead> <tbody data-start="5424" data-end="5814"> <tr data-start="5424" data-end="5450"> <td data-start="5424" data-end="5435" data-col-size="sm"><code data-start="5426" data-end="5434"></code></td> <td data-start="5435" data-end="5450" data-col-size="sm">جذر المستند</td> </tr> <tr data-start="5451" data-end="5479"> <td data-start="5451" data-end="5462" data-col-size="sm"><code data-start="5453" data-end="5461"><head></code></td> <td data-start="5462" data-end="5479" data-col-size="sm">معلومات وصفية</td> </tr> <tr data-start="5480" data-end="5508"> <td data-start="5480" data-end="5492" data-col-size="sm"><code data-start="5482" data-end="5491"><title></code></td> <td data-col-size="sm" data-start="5492" data-end="5508">عنوان الصفحة</td> </tr> <tr data-start="5509" data-end="5536"> <td data-start="5509" data-end="5520" data-col-size="sm"><code data-start="5511" data-end="5519"></code></td> <td data-start="5520" data-end="5536" data-col-size="sm">محتوى الصفحة</td> </tr> <tr data-start="5537" data-end="5563"> <td data-start="5537" data-end="5553" data-col-size="sm"><code data-start="5539" data-end="5552"></p> <h1> - </p> <h6></code></td> <td data-col-size="sm" data-start="5553" data-end="5563">عناوين</td> </tr> <tr data-start="5564" data-end="5580"> <td data-start="5564" data-end="5572" data-col-size="sm"><code data-start="5566" data-end="5571"></p> <p></code></td> <td data-start="5572" data-end="5580" data-col-size="sm">فقرة</td> </tr> <tr data-start="5581" data-end="5597"> <td data-start="5581" data-end="5589" data-col-size="sm"><code data-start="5583" data-end="5588"><a></code></td> <td data-start="5589" data-end="5597" data-col-size="sm">رابط</td> </tr> <tr data-start="5598" data-end="5616"> <td data-start="5598" data-end="5608" data-col-size="sm"><code data-start="5600" data-end="5607"><img></code></td> <td data-start="5608" data-end="5616" data-col-size="sm">صورة</td> </tr> <tr data-start="5617" data-end="5647"> <td data-start="5617" data-end="5638" data-col-size="sm"><code data-start="5619" data-end="5637"></p> <ul>, </p> <ol>, </p> <li></code></td> <td data-col-size="sm" data-start="5638" data-end="5647">قوائم</td> </tr> <tr data-start="5648" data-end="5687"> <td data-start="5648" data-end="5678" data-col-size="sm"><code data-start="5650" data-end="5677"></p> <table>, </p> <tr>, </p> <th>, </p> <td></code></td> <td data-col-size="sm" data-start="5678" data-end="5687">جداول</td> </tr> <tr data-start="5688" data-end="5726"> <td data-start="5688" data-end="5717" data-col-size="sm"><code data-start="5690" data-end="5716"></p> <form>, <input>, <label></code></td> <td data-col-size="sm" data-start="5717" data-end="5726">نماذج</td> </tr> <tr data-start="5727" data-end="5761"> <td data-start="5727" data-end="5745" data-col-size="sm"><code data-start="5729" data-end="5744"></p> <div>, <span></code></td> <td data-col-size="sm" data-start="5745" data-end="5761">تقسيمات عامة</td> </tr> <tr data-start="5762" data-end="5814"> <td data-start="5762" data-end="5796" data-col-size="sm"><code data-start="5764" data-end="5795"></p> <header>, </p> <footer>, </p> <section></code></td> <td data-start="5796" data-end="5814" data-col-size="sm">تقسيمات دلالية</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="5816" data-end="5819" class="" style=""> <h2 data-start="5821" data-end="5831" class="" id="mwx-section-18">الخاتمة</h2> <p data-start="5833" data-end="6248" class="">يُمثّل إتقان لغة HTML الخطوة الأولى لكل من يسعى لتعلّم تطوير الويب أو تصميم المواقع. فهي تتيح للمطورين والمصممين إنشاء بنية واضحة ومنظمة لأي صفحة ويب، كما تُعتبر الأساس الذي تُبنى عليه باقي تقنيات الويب مثل CSS وJavaScript. من خلال معرفة طريقة استخدام العناصر المختلفة مثل العناوين، الفقرات، الجداول، النماذج، والروابط، يمكن بناء صفحات ويب واضحة، سهلة التصفح، وقابلة للفهم من قبل المستخدم ومحركات البحث على حد سواء.</p> <p data-start="6250" data-end="6462" class="">لتصميم صفحات ويب فعّالة باستخدام HTML فقط، يجب الانتباه لتفاصيل الهيكل، الدلالات، وسهولة الاستخدام. ومع مرور الوقت واكتساب الخبرة، سيصبح بالإمكان بناء هياكل متقدمة ومعقدة تدعم الوظائف التفاعلية والتصميم المتجاوب.</p> <p data-start="6464" data-end="6476" class=""><strong data-start="6464" data-end="6476">المراجع:</strong></p> <ol data-start="6478" data-end="6607" data-is-last-node="" data-is-only-node=""> <li data-start="6478" data-end="6546" class="" style=""> <p data-start="6481" data-end="6546" class="">MDN Web Docs: <a data-start="6495" data-end="6544" 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> <li data-start="6547" data-end="6607" class="" style=""> <p data-start="6550" data-end="6607" class="">W3Schools HTML Reference: <a data-start="6576" data-end="6607" data-is-last-node="" rel="noopener" target="_new" class="cursor-pointer">https://www.w3schools.com/html/</a></p> </li> </ol> </div> </div> </div> </div> <div class="mwx-article-help"><span>معلومة تحتاج إلى تصحيح؟ حدّد الجملة وأرسل بلاغًا واضحًا.</span><a class="mwr-report-button" href="https://mwade3.com/report/?post=3019707" data-report-post="3019707"><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">العناوين والفقرات</a><a href="#mwx-section-7">تنسيق النصوص</a><a href="#mwx-section-8">إضافة الروابط</a><a href="#mwx-section-9">إدراج الصور</a><a href="#mwx-section-10">القوائم</a><a href="#mwx-section-13">الجداول</a><a href="#mwx-section-14">النماذج (Forms)</a><a href="#mwx-section-15">استخدام التعليقات داخل الكود</a><a href="#mwx-section-16">الفصل بين الأقسام باستخدام الوسوم الدلالية</a><a href="#mwx-section-17">الجدول التالي يلخص أهم وسوم HTML المستخدمة في تصميم صفحة الويب:</a><a href="#mwx-section-18">الخاتمة</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>