HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك
في عصر الإنترنت والتقنية الحديثة، أصبحت مهارات تصميم صفحات الويب من الأساسيات التي ينبغي لأي شخص مهتم بالتكنولوجيا أو تطوير المواقع الإلكترونية أن يتقنها. بين لغات البرمجة العديدة، تبرز HTML و CSS كعمودين فقريين لأي صفحة ويب، وهما البوابة الأولى التي يجب على المبتدئين تعلمها لفهم كيفية بناء وتصميم المحتوى على الإنترنت. هذا المقال يستعرض بشكل مفصل وبأسلوب علمي الحياة العملية للبدء بتصميم أول صفحة ويب باستخدام HTML و CSS، مع التركيز على المبادئ الأساسية، الهيكلية، الأساليب الحديثة، وأفضل الممارسات المتبعة في الصناعة.
مقدمة إلى HTML
HTML، والتي تعني HyperText Markup Language، هي لغة ترميز تُستخدم لوصف بنية صفحات الويب. ببساطة، هي الطريقة التي تخبر المتصفح كيف يُرتب المحتوى ويعرضه. يمكن اعتبار HTML كالعظم أو الهيكل العظمي لأي صفحة ويب.
كل صفحة ويب تعتمد على عناصر HTML لتحديد النصوص، الصور، الروابط، العناوين، الجداول، والقوائم. تُكتب عناصر HTML ضمن وسوم (Tags) محددة تلتف حول المحتوى لتوضيح وظيفته داخل الصفحة.
الهيكل الأساسي لصفحة HTML
يتكون ملف HTML من مجموعة وسوم تحيط بالمحتوى لتحدد طبيعته، وهيكل الصفحة، وأقسامها المختلفة. فيما يلي نموذج أساسي لصفحة HTML:
-
: إعلان نوع المستند وهو أمر ضروري لتحديد نوع HTML المستخدم. -
: الوسم الجذري الذي يحتوي جميع محتويات الصفحة، مع تحديد اللغة بالعربية. -
: يحتوي معلومات غير مرئية للمستخدم مباشرة مثل تعريف الترميز، العنوان، وربط ملفات CSS. -
</code>: عنوان الصفحة الذي يظهر في تبويب المتصفح.</p> </li> <li data-start="1772" data-end="1861"> <p data-start="1774" data-end="1861"><code data-start="1774" data-end="1782"><body></code>: يحتوي المحتوى المرئي الذي يظهر على الصفحة مثل النصوص، الصور، الروابط، وغيرها.</p> </li> </ul> <hr data-start="1863" data-end="1866"> <h2 data-start="1868" data-end="1884"><span class="ez-toc-section" id="%D9%85%D9%82%D8%AF%D9%85%D8%A9_%D8%A5%D9%84%D9%89_CSS"></span>مقدمة إلى CSS<span class="ez-toc-section-end"></span></h2> <p data-start="1886" data-end="2072">CSS، والتي تعني <strong data-start="1902" data-end="1928">Cascading Style Sheets</strong>، هي لغة تنسيق تُستخدم لتحديد مظهر صفحة الويب. بينما HTML تحدد هيكل الصفحة، تقوم CSS بتحديد الألوان، الخطوط، التباعد، والأشكال المختلفة للعناصر.</p> <p data-start="2074" data-end="2238">تتيح CSS للمطور تحكمًا كاملاً في تصميم الصفحة وجعلها أكثر جاذبية، وملاءمة لاحتياجات المستخدم، كما تسهل تعديل التصميم بشكل مركزي دون الحاجة لتغيير المحتوى داخل HTML.</p> <h3 data-start="2240" data-end="2272"><span class="ez-toc-section" id="%D8%B7%D8%B1%D9%82_%D8%A5%D8%AF%D8%B1%D8%A7%D8%AC_CSS_%D9%81%D9%8A_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D8%A7%D9%84%D9%88%D9%8A%D8%A8"></span>طرق إدراج CSS في صفحات الويب<span class="ez-toc-section-end"></span></h3> <p data-start="2274" data-end="2313">يمكن إضافة CSS إلى صفحة HTML بثلاث طرق:</p> <ol data-start="2315" data-end="2865"> <li data-start="2315" data-end="2541"> <p data-start="2318" data-end="2404"><strong data-start="2318" data-end="2346">CSS داخلي (Internal CSS)</strong>: كتابة التنسيقات داخل وسم <code data-start="2373" data-end="2382"></p> <style></code> في داخل وسم <code data-start="2395" data-end="2403"><head></code>.</p> <pre class="overflow-visible!" data-start="2412" data-end="2541"><div class="contain-inline-size rounded-2xl 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-2xl">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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></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">style</span></span></span><span>><span class="language-css"> </span></span><span><span class="hljs-selector-tag">body</span></span><span> { </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#f0f0f0</span></span><span>; </span><span><span class="hljs-attribute">font-family</span></span><span>: Arial, sans-serif; } </span><span><span class="hljs-tag"></<span class="hljs-name">style</span></span></span><span>> </span></span></code></div></div></pre> </li> <li data-start="2543" data-end="2713"> <p data-start="2546" data-end="2649"><strong data-start="2546" data-end="2574">CSS خارجي (External CSS)</strong>: كتابة التنسيقات في ملف منفصل بصيغة <code data-start="2611" data-end="2617">.css</code> وربطه بالصفحة عبر وسم <code data-start="2640" data-end="2648"><link></code>.</p> <pre class="overflow-visible!" data-start="2654" data-end="2713"><div class="contain-inline-size rounded-2xl 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-2xl">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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></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">link</span></span></span><span> </span><span><span class="hljs-attr">rel</span></span><span>=</span><span><span class="hljs-string">"stylesheet"</span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"styles.css"</span></span><span>> </span></span></code></div></div></pre> </li> <li data-start="2715" data-end="2865"> <p data-start="2718" data-end="2802"><strong data-start="2718" data-end="2744">CSS مضمّن (Inline CSS)</strong>: إضافة التنسيق مباشرة في وسم HTML باستخدام خاصية <code data-start="2794" data-end="2801">style</code>.</p> <pre class="overflow-visible!" data-start="2807" data-end="2865"><div class="contain-inline-size rounded-2xl 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-2xl">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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></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-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">h1</span></span></span><span>> </span></span></code></div></div></pre> </li> </ol> <p data-start="2867" data-end="2940">بين هذه الطرق، يُفضل استخدام CSS الخارجي لسهولة التنظيم وإعادة الاستخدام.</p> <hr data-start="2942" data-end="2945"> <h2 data-start="2947" data-end="2987"><span class="ez-toc-section" id="%D8%A8%D9%86%D8%A7%D8%A1_%D8%A3%D9%88%D9%84_%D8%B5%D9%81%D8%AD%D8%A9_%D9%88%D9%8A%D8%A8_%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_HTML_%D9%88_CSS"></span>بناء أول صفحة ويب باستخدام HTML و CSS<span class="ez-toc-section-end"></span></h2> <p data-start="2989" data-end="3109">الآن، بعد التعرف على أساسيات HTML و CSS، سنمر بعملية تصميم صفحة ويب بسيطة لكنها متكاملة تعبر عن مفاهيم التصميم الأساسية.</p> <h3 data-start="3111" data-end="3145"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AE%D8%B7%D9%88%D8%A9_1_%D8%A5%D9%86%D8%B4%D8%A7%D8%A1_%D9%85%D9%84%D9%81_HTML_%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A"></span>الخطوة 1: إنشاء ملف HTML أساسي<span class="ez-toc-section-end"></span></h3> <p data-start="3147" data-end="3216">ابدأ بإنشاء ملف جديد باسم <code data-start="3173" data-end="3185">index.html</code> وضع فيه الهيكل الأساسي التالي:</p> <pre class="overflow-visible!" data-start="3218" data-end="4147"><div class="contain-inline-size rounded-2xl 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-2xl">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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></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"><!DOCTYPE <span class="hljs-keyword">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">meta</span></span></span><span> </span><span><span class="hljs-attr">name</span></span><span>=</span><span><span class="hljs-string">"viewport"</span></span><span> </span><span><span class="hljs-attr">content</span></span><span>=</span><span><span class="hljs-string">"width=device-width, initial-scale=1"</span></span><span> /> </span><span><span class="hljs-tag"><<span class="hljs-name">title</span></span></span><span>>صفحتي الأولى</span><span><span class="hljs-tag"></<span class="hljs-name">title</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">link</span></span></span><span> </span><span><span class="hljs-attr">rel</span></span><span>=</span><span><span class="hljs-string">"stylesheet"</span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"styles.css"</span></span><span> /> </span><span><span class="hljs-tag"></<span class="hljs-name">head</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">body</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">header</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h1</span></span></span><span>>مرحباً بك في موقعي الأول</span><span><span class="hljs-tag"></<span class="hljs-name">h1</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">nav</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">ul</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>الرئيسية</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>عن الموقع</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">li</span></span></span><span>></span><span><span class="hljs-tag"><<span class="hljs-name">a</span></span></span><span> </span><span><span class="hljs-attr">href</span></span><span>=</span><span><span class="hljs-string">"#"</span></span><span>>اتصل بنا</span><span><span class="hljs-tag"></<span class="hljs-name">a</span></span></span><span>></span><span><span class="hljs-tag"></<span class="hljs-name">li</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">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">header</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">main</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">section</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h2</span></span></span><span>>مقدمة عن تصميم الويب</span><span><span class="hljs-tag"></<span class="hljs-name">h2</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>تصميم الويب هو فن وعلم إنشاء صفحات إلكترونية تفاعلية وجذابة باستخدام HTML و CSS وغيرها من التقنيات.</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">section</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">section</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">h2</span></span></span><span>>لماذا نتعلم HTML و CSS؟</span><span><span class="hljs-tag"></<span class="hljs-name">h2</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>لأنهما أساس أي موقع على الإنترنت، ويمنحان القدرة على التحكم الكامل في المحتوى والمظهر.</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">section</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">main</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">footer</span></span></span><span>> </span><span><span class="hljs-tag"><<span class="hljs-name">p</span></span></span><span>>حقوق النشر © 2025 جميع الحقوق محفوظة</span><span><span class="hljs-tag"></<span class="hljs-name">p</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">footer</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">body</span></span></span><span>> </span><span><span class="hljs-tag"></<span class="hljs-name">html</span></span></span><span>> </span></span></code></div></div></pre> <p data-start="4149" data-end="4171">هذا النموذج يحتوي على:</p> <ul data-start="4173" data-end="4348"> <li data-start="4173" data-end="4231"> <p data-start="4175" data-end="4231"><strong data-start="4175" data-end="4198">رأس الصفحة (Header)</strong>: يتضمن عنوان الموقع وقائمة تنقل.</p> </li> <li data-start="4232" data-end="4297"> <p data-start="4234" data-end="4297"><strong data-start="4234" data-end="4260">المحتوى الرئيسي (Main)</strong>: يضم قسمين يحتويان على نصوص توضيحية.</p> </li> <li data-start="4298" data-end="4348"> <p data-start="4300" data-end="4348"><strong data-start="4300" data-end="4325">تذييل الصفحة (Footer)</strong>: يحتوي على حقوق النشر.</p> </li> </ul> <h3 data-start="4350" data-end="4391"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AE%D8%B7%D9%88%D8%A9_2_%D8%A5%D9%86%D8%B4%D8%A7%D8%A1_%D9%85%D9%84%D9%81_CSS_%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82_%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9"></span>الخطوة 2: إنشاء ملف CSS لتنسيق الصفحة<span class="ez-toc-section-end"></span></h3> <p data-start="4393" data-end="4472">قم بإنشاء ملف باسم <code data-start="4412" data-end="4424">styles.css</code> في نفس مجلد ملف HTML، ثم أضف التنسيقات التالية:</p> <pre class="overflow-visible!" data-start="4474" data-end="5427"><div class="contain-inline-size rounded-2xl 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-2xl">css</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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-css"><span><span><span class="hljs-comment">/* تنسيق عام للجسم */</span></span><span> </span><span><span class="hljs-selector-tag">body</span></span><span> { </span><span><span class="hljs-attribute">font-family</span></span><span>: </span><span><span class="hljs-string">'Segoe UI'</span></span><span>, Tahoma, Geneva, Verdana, sans-serif; </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#ffffff</span></span><span>; </span><span><span class="hljs-attribute">color</span></span><span>: </span><span><span class="hljs-number">#333333</span></span><span>; </span><span><span class="hljs-attribute">margin</span></span><span>: </span><span><span class="hljs-number">0</span></span><span>; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">0</span></span><span>; </span><span><span class="hljs-attribute">line-height</span></span><span>: </span><span><span class="hljs-number">1.6</span></span><span>; } </span><span><span class="hljs-comment">/* تنسيق رأس الصفحة */</span></span><span> </span><span><span class="hljs-selector-tag">header</span></span><span> { </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#007acc</span></span><span>; </span><span><span class="hljs-attribute">color</span></span><span>: white; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">20px</span></span><span> </span><span><span class="hljs-number">0</span></span><span>; </span><span><span class="hljs-attribute">text-align</span></span><span>: center; } </span><span><span class="hljs-comment">/* قائمة التنقل */</span></span><span> </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> { </span><span><span class="hljs-attribute">list-style-type</span></span><span>: none; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">0</span></span><span>; </span><span><span class="hljs-attribute">margin</span></span><span>: </span><span><span class="hljs-number">10px</span></span><span> </span><span><span class="hljs-number">0</span></span><span> </span><span><span class="hljs-number">0</span></span><span> </span><span><span class="hljs-number">0</span></span><span>; </span><span><span class="hljs-attribute">display</span></span><span>: flex; </span><span><span class="hljs-attribute">justify-content</span></span><span>: center; </span><span><span class="hljs-attribute">gap</span></span><span>: </span><span><span class="hljs-number">30px</span></span><span>; } </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> </span><span><span class="hljs-selector-tag">li</span></span><span> </span><span><span class="hljs-selector-tag">a</span></span><span> { </span><span><span class="hljs-attribute">color</span></span><span>: white; </span><span><span class="hljs-attribute">text-decoration</span></span><span>: none; </span><span><span class="hljs-attribute">font-weight</span></span><span>: bold; } </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> </span><span><span class="hljs-selector-tag">li</span></span><span> </span><span><span class="hljs-selector-tag">a</span></span><span><span class="hljs-selector-pseudo">:hover</span></span><span> { </span><span><span class="hljs-attribute">text-decoration</span></span><span>: underline; } </span><span><span class="hljs-comment">/* تنسيق العناوين */</span></span><span> </span><span><span class="hljs-selector-tag">h1</span></span><span>, </span><span><span class="hljs-selector-tag">h2</span></span><span> { </span><span><span class="hljs-attribute">margin-bottom</span></span><span>: </span><span><span class="hljs-number">10px</span></span><span>; } </span><span><span class="hljs-comment">/* تنسيق المحتوى الرئيسي */</span></span><span> </span><span><span class="hljs-selector-tag">main</span></span><span> { </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">20px</span></span><span>; </span><span><span class="hljs-attribute">max-width</span></span><span>: </span><span><span class="hljs-number">900px</span></span><span>; </span><span><span class="hljs-attribute">margin</span></span><span>: auto; } </span><span><span class="hljs-selector-tag">section</span></span><span> { </span><span><span class="hljs-attribute">margin-bottom</span></span><span>: </span><span><span class="hljs-number">30px</span></span><span>; } </span><span><span class="hljs-comment">/* تنسيق التذييل */</span></span><span> </span><span><span class="hljs-selector-tag">footer</span></span><span> { </span><span><span class="hljs-attribute">background-color</span></span><span>: </span><span><span class="hljs-number">#f1f1f1</span></span><span>; </span><span><span class="hljs-attribute">text-align</span></span><span>: center; </span><span><span class="hljs-attribute">padding</span></span><span>: </span><span><span class="hljs-number">15px</span></span><span> </span><span><span class="hljs-number">0</span></span><span>; </span><span><span class="hljs-attribute">color</span></span><span>: </span><span><span class="hljs-number">#666666</span></span><span>; </span><span><span class="hljs-attribute">font-size</span></span><span>: </span><span><span class="hljs-number">14px</span></span><span>; </span><span><span class="hljs-attribute">border-top</span></span><span>: </span><span><span class="hljs-number">1px</span></span><span> solid </span><span><span class="hljs-number">#ddd</span></span><span>; } </span></span></code></div></div></pre> <h3 data-start="5429" data-end="5447"><span class="ez-toc-section" id="%D8%B4%D8%B1%D8%AD_%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82%D8%A7%D8%AA"></span>شرح التنسيقات:<span class="ez-toc-section-end"></span></h3> <ul data-start="5449" data-end="5856"> <li data-start="5449" data-end="5508"> <p data-start="5451" data-end="5508"><strong data-start="5451" data-end="5461"><code data-start="5453" data-end="5459">body</code></strong>: تحديد الخط الافتراضي، لون الخلفية، ولون النص.</p> </li> <li data-start="5509" data-end="5570"> <p data-start="5511" data-end="5570"><strong data-start="5511" data-end="5523"><code data-start="5513" data-end="5521">header</code></strong>: خلفية زرقاء ونص أبيض مع محاذاة النص في الوسط.</p> </li> <li data-start="5571" data-end="5654"> <p data-start="5573" data-end="5654"><strong data-start="5573" data-end="5585"><code data-start="5575" data-end="5583">nav ul</code></strong>: إزالة النقاط من قائمة التنقل، وترتيب العناصر أفقياً مع تباعد بينها.</p> </li> <li data-start="5655" data-end="5740"> <p data-start="5657" data-end="5740"><strong data-start="5657" data-end="5674"><code data-start="5659" data-end="5672">nav ul li a</code></strong>: لون النص أبيض بدون خط تحته، مع تغيير التصميم عند المرور بالفأرة.</p> </li> <li data-start="5741" data-end="5803"> <p data-start="5743" data-end="5803"><strong data-start="5743" data-end="5753"><code data-start="5745" data-end="5751">main</code></strong>: تقييد عرض المحتوى المركزي مع وضعه في وسط الشاشة.</p> </li> <li data-start="5804" data-end="5856"> <p data-start="5806" data-end="5856"><strong data-start="5806" data-end="5818"><code data-start="5808" data-end="5816">footer</code></strong>: خلفية رمادية فاتحة مع نص رمادي داكن.</p> </li> </ul> <hr data-start="5858" data-end="5861"> <h2 data-start="5863" data-end="5901"><span class="ez-toc-section" id="%D9%85%D9%81%D8%A7%D9%87%D9%8A%D9%85_%D9%85%D9%87%D9%85%D8%A9_%D9%8A%D8%AC%D8%A8_%D8%B9%D9%84%D9%89_%D8%A7%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86_%D9%81%D9%87%D9%85%D9%87%D8%A7"></span>مفاهيم مهمة يجب على المبتدئين فهمها<span class="ez-toc-section-end"></span></h2> <h3 data-start="5903" data-end="5955"><span class="ez-toc-section" id="1_%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_Elements_%D9%88%D8%A7%D9%84%D9%88%D8%B3%D9%88%D9%85_Tags_%D9%81%D9%8A_HTML"></span>1. <strong data-start="5910" data-end="5955">العناصر (Elements) والوسوم (Tags) في HTML</strong><span class="ez-toc-section-end"></span></h3> <p data-start="5957" data-end="6101">العنصر هو وحدة البناء الأساسية في HTML ويتكون من وسم افتتاحي ووسم إغلاق، مع محتوى بينهما. بعض العناصر تكون بدون وسم إغلاق مثل <code data-start="6083" data-end="6090"><img></code> أو <code data-start="6094" data-end="6100"><br /></code>.</p> <p data-start="6103" data-end="6108">مثال:</p> <pre class="overflow-visible!" data-start="6110" data-end="6186"><div class="contain-inline-size rounded-2xl 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-2xl">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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></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><span class="hljs-tag"><<span class="hljs-name">img</span></span></span><span> </span><span><span class="hljs-attr">src</span></span><span>=</span><span><span class="hljs-string">"image.jpg"</span></span><span> </span><span><span class="hljs-attr">alt</span></span><span>=</span><span><span class="hljs-string">"صورة توضيحية"</span></span><span> /> </span></span></code></div></div></pre> <h3 data-start="6188" data-end="6218"><span class="ez-toc-section" id="2_%D8%A7%D9%84%D8%B3%D9%85%D8%A7%D8%AA_Attributes"></span>2. <strong data-start="6195" data-end="6218">السمات (Attributes)</strong><span class="ez-toc-section-end"></span></h3> <p data-start="6220" data-end="6327">السمات هي معلومات إضافية تضاف إلى الوسوم لتخصيص العنصر. مثل <code data-start="6280" data-end="6286">href</code> في وسم الرابط <code data-start="6301" data-end="6306"><a></code> لتحديد عنوان الوجهة.</p> <p data-start="6329" data-end="6334">مثال:</p> <pre class="overflow-visible!" data-start="6336" data-end="6404"><div class="contain-inline-size rounded-2xl 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-2xl">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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></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="6406" data-end="6447"><span class="ez-toc-section" id="3_%D8%A7%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82_Styling_%D8%A8%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85_CSS"></span>3. <strong data-start="6413" data-end="6447">التنسيق (Styling) باستخدام CSS</strong><span class="ez-toc-section-end"></span></h3> <p data-start="6449" data-end="6527">تقوم CSS بفصل التنسيق عن المحتوى، حيث يتم تحديد مظهر كل عنصر عبر قواعد وأوامر.</p> <p data-start="6529" data-end="6627">مفهوم القواعد (Rulesets) في CSS يتكون من محدد (Selector) ومجموعة خصائص (Properties) وقيم (Values).</p> <p data-start="6629" data-end="6634">مثال:</p> <pre class="overflow-visible!" data-start="6636" data-end="6685"><div class="contain-inline-size rounded-2xl 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-2xl">css</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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-css"><span><span><span class="hljs-selector-tag">p</span></span><span> { </span><span><span class="hljs-attribute">color</span></span><span>: red; </span><span><span class="hljs-attribute">font-size</span></span><span>: </span><span><span class="hljs-number">16px</span></span><span>; } </span></span></code></div></div></pre> <h3 data-start="6687" data-end="6726"><span class="ez-toc-section" id="4_%D8%A7%D9%84%D9%86%D9%85%D9%88%D8%B0%D8%AC_%D8%A7%D9%84%D8%B5%D9%86%D8%AF%D9%88%D9%82%D9%8A_Box_Model"></span>4. <strong data-start="6694" data-end="6726">النموذج الصندوقي (Box Model)</strong><span class="ez-toc-section-end"></span></h3> <p data-start="6728" data-end="6773">كل عنصر في صفحة الويب يعامل كصندوق يحتوي على:</p> <ul data-start="6775" data-end="7010"> <li data-start="6775" data-end="6826"> <p data-start="6777" data-end="6826"><strong data-start="6777" data-end="6799">المحتوى (Content):</strong> النص أو الصور داخل العنصر.</p> </li> <li data-start="6827" data-end="6883"> <p data-start="6829" data-end="6883"><strong data-start="6829" data-end="6849">الحشو (Padding):</strong> المساحة بين المحتوى وحدود العنصر.</p> </li> <li data-start="6884" data-end="6928"> <p data-start="6886" data-end="6928"><strong data-start="6886" data-end="6906">الحدود (Border):</strong> الخط المحيط بالعناصر.</p> </li> <li data-start="6929" data-end="7010"> <p data-start="6931" data-end="7010"><strong data-start="6931" data-end="6951">الهامش (Margin):</strong> المساحة الفارغة خارج الحدود تفصل العنصر عن العناصر الأخرى.</p> </li> </ul> <p data-start="7012" data-end="7063">فهم هذا النموذج ضروري للتحكم بدقة في تنسيق الصفحات.</p> <hr data-start="7065" data-end="7068"> <h2 data-start="7070" data-end="7140"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AC%D8%AF%D9%88%D9%84_%D8%A7%D9%84%D8%AA%D8%A7%D9%84%D9%8A_%D9%8A%D9%88%D8%B6%D8%AD_%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA_%D9%86%D9%85%D9%88%D8%B0%D8%AC_%D8%A7%D9%84%D8%B5%D9%86%D8%AF%D9%88%D9%82_Box_Model_%D9%88%D8%AA%D9%88%D8%B6%D9%8A%D8%AD_%D9%88%D8%B8%D9%8A%D9%81%D8%AA%D9%87%D8%A7"></span>الجدول التالي يوضح مكونات نموذج الصندوق (Box Model) وتوضيح وظيفتها:<span class="ez-toc-section-end"></span></h2> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="7142" data-end="7736" class="w-fit min-w-(--thread-content-width)"> <thead data-start="7142" data-end="7238"> <tr data-start="7142" data-end="7238"> <th data-start="7142" data-end="7157" data-col-size="sm">العنصر</th> <th data-start="7157" data-end="7193" data-col-size="md">الوصف</th> <th data-start="7193" data-end="7238" data-col-size="sm">التأثير على التنسيق</th> </tr> </thead> <tbody data-start="7333" data-end="7736"> <tr data-start="7333" data-end="7428"> <td data-start="7333" data-end="7348" data-col-size="sm">Content</td> <td data-col-size="md" data-start="7348" data-end="7383">مساحة المحتوى الفعلي</td> <td data-col-size="sm" data-start="7383" data-end="7428">حيث يُعرض النص أو الصور</td> </tr> <tr data-start="7429" data-end="7527"> <td data-start="7429" data-end="7444" data-col-size="sm">Padding</td> <td data-start="7444" data-end="7483" data-col-size="md">المسافة الداخلية بين المحتوى والحدود</td> <td data-col-size="sm" data-start="7483" data-end="7527">يزيد المساحة الفارغة داخل الصندوق</td> </tr> <tr data-start="7528" data-end="7622"> <td data-start="7528" data-end="7543" data-col-size="sm">Border</td> <td data-col-size="md" data-start="7543" data-end="7578">الخط المحيط بالمحتوى والحشو</td> <td data-col-size="sm" data-start="7578" data-end="7622">يحدد حدود العنصر ويزيد من وضوحه</td> </tr> <tr data-start="7623" data-end="7736"> <td data-start="7623" data-end="7638" data-col-size="sm">Margin</td> <td data-col-size="md" data-start="7638" data-end="7694">المسافة الخارجية التي تفصل العنصر عن العناصر المجاورة</td> <td data-col-size="sm" data-start="7694" data-end="7736">يتحكم بموقع العنصر ضمن الصفحة بشكل عام</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="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-md-heavy"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg></button></span></div> </div> </div> </div> <hr data-start="7738" data-end="7741"> <h2 data-start="7743" data-end="7784"><span class="ez-toc-section" id="%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA_%D8%B9%D9%85%D9%84%D9%8A%D8%A9_%D9%84%D8%AA%D8%B7%D9%88%D9%8A%D8%B1_%D9%85%D9%87%D8%A7%D8%B1%D8%A7%D8%AA_HTML_%D9%88_CSS"></span>تطبيقات عملية لتطوير مهارات HTML و CSS<span class="ez-toc-section-end"></span></h2> <h3 data-start="7786" data-end="7809"><span class="ez-toc-section" id="%D8%AA%D8%AD%D8%B3%D9%8A%D9%86_%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9_%D8%A7%D9%84%D8%A3%D9%88%D9%84%D9%89"></span>تحسين الصفحة الأولى<span class="ez-toc-section-end"></span></h3> <p data-start="7811" data-end="7973">بعد إنشاء صفحة ويب أساسية، يمكن تطويرها بإضافة المزيد من العناصر التفاعلية والمرئية، مثل الصور، الجداول، القوائم المعقدة، وكذلك استخدام CSS لتحسين المظهر عن طريق:</p> <ul data-start="7975" data-end="8269"> <li data-start="7975" data-end="8051"> <p data-start="7977" data-end="8051"><strong data-start="7977" data-end="8018">استخدام الألوان المتدرجة (Gradients):</strong> تضيف تأثيرات جمالية في الخلفيات.</p> </li> <li data-start="8052" data-end="8111"> <p data-start="8054" data-end="8111"><strong data-start="8054" data-end="8085">تطبيق الظلال (Box Shadows):</strong> لتسليط الضوء على العناصر.</p> </li> <li data-start="8112" data-end="8180"> <p data-start="8114" data-end="8180"><strong data-start="8114" data-end="8137">استخدام خطوط مخصصة:</strong> عبر ربط خطوط من الإنترنت مثل Google Fonts.</p> </li> <li data-start="8181" data-end="8269"> <p data-start="8183" data-end="8269"><strong data-start="8183" data-end="8221">تصميم استجابة (Responsive Design):</strong> لجعل الصفحة تظهر بشكل متناسق على مختلف الأجهزة.</p> </li> </ul> <h3 data-start="8271" data-end="8299"><span class="ez-toc-section" id="%D9%85%D8%AB%D8%A7%D9%84_%D8%B9%D9%84%D9%89_%D8%A7%D8%B3%D8%AA%D8%AC%D8%A7%D8%A8%D8%A9_%D8%A7%D9%84%D8%B5%D9%81%D8%AD%D8%A9"></span>مثال على استجابة الصفحة:<span class="ez-toc-section-end"></span></h3> <pre class="overflow-visible!" data-start="8301" data-end="8399"><div class="contain-inline-size rounded-2xl 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-2xl">css</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 gap-4 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none py-1" aria-label="Copy"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 py-1 select-none"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M12.0303 4.11328C13.4406 2.70317 15.7275 2.70305 17.1377 4.11328C18.5474 5.52355 18.5476 7.81057 17.1377 9.2207L10.8457 15.5117C10.522 15.8354 10.2868 16.0723 10.0547 16.2627L9.82031 16.4395C9.61539 16.5794 9.39783 16.7003 9.1709 16.7998L8.94141 16.8916C8.75976 16.9582 8.57206 17.0072 8.35547 17.0518L7.59082 17.1865L5.19727 17.5859C5.05455 17.6097 4.90286 17.6358 4.77441 17.6455C4.67576 17.653 4.54196 17.6555 4.39648 17.6201L4.24707 17.5703C4.02415 17.4746 3.84119 17.3068 3.72559 17.0957L3.67969 17.0029C3.59322 16.8013 3.59553 16.6073 3.60547 16.4756C3.61519 16.3473 3.6403 16.1963 3.66406 16.0537L4.06348 13.6602C4.1638 13.0582 4.22517 12.6732 4.3584 12.3096L4.45117 12.0791C4.55073 11.8521 4.67152 11.6346 4.81152 11.4297L4.9873 11.1953C5.17772 10.9632 5.4146 10.728 5.73828 10.4043L12.0303 4.11328ZM6.67871 11.3447C6.32926 11.6942 6.14542 11.8803 6.01953 12.0332L5.90918 12.1797C5.81574 12.3165 5.73539 12.4618 5.66895 12.6133L5.60742 12.7666C5.52668 12.9869 5.48332 13.229 5.375 13.8789L4.97656 16.2725L4.97559 16.2744H4.97852L7.37207 15.875L8.08887 15.749C8.25765 15.7147 8.37336 15.6839 8.4834 15.6436L8.63672 15.5811C8.78817 15.5146 8.93356 15.4342 9.07031 15.3408L9.2168 15.2305C9.36965 15.1046 9.55583 14.9207 9.90527 14.5713L14.8926 9.58301L11.666 6.35742L6.67871 11.3447ZM16.1963 5.05371C15.3054 4.16304 13.8616 4.16305 12.9707 5.05371L12.6074 5.41602L15.833 8.64258L16.1963 8.2793C17.0869 7.38845 17.0869 5.94456 16.1963 5.05371Z"></path><path d="M4.58301 1.7832C4.72589 1.7832 4.84877 1.88437 4.87695 2.02441C4.99384 2.60873 5.22432 3.11642 5.58398 3.50391C5.94115 3.88854 6.44253 4.172 7.13281 4.28711C7.27713 4.3114 7.38267 4.43665 7.38281 4.58301C7.38281 4.7295 7.27723 4.8546 7.13281 4.87891C6.44249 4.99401 5.94116 5.27746 5.58398 5.66211C5.26908 6.00126 5.05404 6.43267 4.92676 6.92676L4.87695 7.1416C4.84891 7.28183 4.72601 7.38281 4.58301 7.38281C4.44013 7.38267 4.31709 7.28173 4.28906 7.1416C4.17212 6.55728 3.94179 6.04956 3.58203 5.66211C3.22483 5.27757 2.72347 4.99395 2.0332 4.87891C1.88897 4.85446 1.7832 4.72938 1.7832 4.58301C1.78335 4.43673 1.88902 4.3115 2.0332 4.28711C2.72366 4.17203 3.22481 3.88861 3.58203 3.50391C3.94186 3.11638 4.17214 2.60888 4.28906 2.02441L4.30371 1.97363C4.34801 1.86052 4.45804 1.78333 4.58301 1.7832Z"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-css"><span><span><span class="hljs-keyword">@media</span></span><span> (</span><span><span class="hljs-attribute">max-width</span></span><span>: </span><span><span class="hljs-number">600px</span></span><span>) { </span><span><span class="hljs-selector-tag">nav</span></span><span> </span><span><span class="hljs-selector-tag">ul</span></span><span> { </span><span><span class="hljs-attribute">flex-direction</span></span><span>: column; </span><span><span class="hljs-attribute">gap</span></span><span>: </span><span><span class="hljs-number">10px</span></span><span>; } } </span></span></code></div></div></pre> <p data-start="8401" data-end="8478">هذا التنسيق يجعل قائمة التنقل تتغير إلى عمودية عند عرض الصفحة على شاشة صغيرة.</p> <hr data-start="8480" data-end="8483"> <h2 data-start="8485" data-end="8531"><span class="ez-toc-section" id="%D8%A3%D9%87%D9%85_%D8%A7%D9%84%D9%88%D8%B3%D9%88%D9%85_%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D8%A9_%D9%81%D9%8A_HTML_%D9%85%D8%B9_%D8%B4%D8%B1%D8%AD_%D9%88%D8%B8%D9%8A%D9%81%D8%AA%D9%87%D8%A7"></span>أهم الوسوم المستخدمة في HTML مع شرح وظيفتها<span class="ez-toc-section-end"></span></h2> <div class="_tableContainer_16hzy_1"> <div tabindex="-1" class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse"> <table data-start="8533" data-end="9347" class="w-fit min-w-(--thread-content-width)"> <thead data-start="8533" data-end="8590"> <tr data-start="8533" data-end="8590"> <th data-start="8533" data-end="8546" data-col-size="sm">الوسم</th> <th data-start="8546" data-end="8590" data-col-size="sm">الوظيفة</th> </tr> </thead> <tbody data-start="8648" data-end="9347"> <tr data-start="8648" data-end="8712"> <td data-start="8648" data-end="8668" data-col-size="sm"><code data-start="8650" data-end="8656"></p> <h1></code> إلى <code data-start="8661" data-end="8667"></p> <h6></code></td> <td data-start="8668" data-end="8712" data-col-size="sm">عناوين ذات مستويات مختلفة</td> </tr> <tr data-start="8713" data-end="8769"> <td data-start="8713" data-end="8727" data-col-size="sm"><code data-start="8715" data-end="8720"></p> <p></code></td> <td data-start="8727" data-end="8769" data-col-size="sm">فقرة نصية</td> </tr> <tr data-start="8770" data-end="8826"> <td data-start="8770" data-end="8784" data-col-size="sm"><code data-start="8772" data-end="8777"><a></code></td> <td data-col-size="sm" data-start="8784" data-end="8826">رابط تشعبي</td> </tr> <tr data-start="8827" data-end="8883"> <td data-start="8827" data-end="8841" data-col-size="sm"><code data-start="8829" data-end="8836"><img></code></td> <td data-col-size="sm" data-start="8841" data-end="8883">إدراج صورة</td> </tr> <tr data-start="8884" data-end="8945"> <td data-start="8884" data-end="8902" data-col-size="sm"><code data-start="8886" data-end="8892"></p> <ul></code> و <code data-start="8895" data-end="8901"></p> <ol></code></td> <td data-col-size="sm" data-start="8902" data-end="8945">قوائم غير مرتبة ومرتبة</td> </tr> <tr data-start="8946" data-end="9001"> <td data-start="8946" data-end="8960" data-col-size="sm"><code data-start="8948" data-end="8954"></p> <li></code></td> <td data-col-size="sm" data-start="8960" data-end="9001">عنصر قائمة</td> </tr> <tr data-start="9002" data-end="9059"> <td data-start="9002" data-end="9016" data-col-size="sm"><code data-start="9004" data-end="9011"></p> <div></code></td> <td data-col-size="sm" data-start="9016" data-end="9059">عنصر عام لتجميع المحتويات</td> </tr> <tr data-start="9060" data-end="9116"> <td data-start="9060" data-end="9074" data-col-size="sm"><code data-start="9062" data-end="9070"><span></code></td> <td data-col-size="sm" data-start="9074" data-end="9116">عنصر نصي صغير لتنسيق أجزاء معينة</td> </tr> <tr data-start="9117" data-end="9174"> <td data-start="9117" data-end="9131" data-col-size="sm"><code data-start="9119" data-end="9129"></p> <header></code></td> <td data-col-size="sm" data-start="9131" data-end="9174">رأس الصفحة أو القسم</td> </tr> <tr data-start="9175" data-end="9232"> <td data-start="9175" data-end="9189" data-col-size="sm"><code data-start="9177" data-end="9187"></p> <footer></code></td> <td data-col-size="sm" data-start="9189" data-end="9232">تذييل الصفحة أو القسم</td> </tr> <tr data-start="9233" data-end="9289"> <td data-start="9233" data-end="9247" data-col-size="sm"><code data-start="9235" data-end="9246"></p> <section></code></td> <td data-col-size="sm" data-start="9247" data-end="9289">قسم مستقل داخل الصفحة</td> </tr> <tr data-start="9290" data-end="9347"> <td data-start="9290" data-end="9304" data-col-size="sm"><code data-start="9292" data-end="9300"><main></code></td> <td data-col-size="sm" data-start="9304" data-end="9347">المحتوى الرئيسي للصفحة</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="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon-md-heavy"><path d="M12.668 10.667C12.668 9.95614 12.668 9.46258 12.6367 9.0791C12.6137 8.79732 12.5758 8.60761 12.5244 8.46387L12.4688 8.33399C12.3148 8.03193 12.0803 7.77885 11.793 7.60254L11.666 7.53125C11.508 7.45087 11.2963 7.39395 10.9209 7.36328C10.5374 7.33197 10.0439 7.33203 9.33301 7.33203H6.5C5.78896 7.33203 5.29563 7.33195 4.91211 7.36328C4.63016 7.38632 4.44065 7.42413 4.29688 7.47559L4.16699 7.53125C3.86488 7.68518 3.61186 7.9196 3.43555 8.20703L3.36524 8.33399C3.28478 8.49198 3.22795 8.70352 3.19727 9.0791C3.16595 9.46259 3.16504 9.95611 3.16504 10.667V13.5C3.16504 14.211 3.16593 14.7044 3.19727 15.0879C3.22797 15.4636 3.28473 15.675 3.36524 15.833L3.43555 15.959C3.61186 16.2466 3.86474 16.4807 4.16699 16.6348L4.29688 16.6914C4.44063 16.7428 4.63025 16.7797 4.91211 16.8027C5.29563 16.8341 5.78896 16.835 6.5 16.835H9.33301C10.0439 16.835 10.5374 16.8341 10.9209 16.8027C11.2965 16.772 11.508 16.7152 11.666 16.6348L11.793 16.5645C12.0804 16.3881 12.3148 16.1351 12.4688 15.833L12.5244 15.7031C12.5759 15.5594 12.6137 15.3698 12.6367 15.0879C12.6681 14.7044 12.668 14.211 12.668 13.5V10.667ZM13.998 12.665C14.4528 12.6634 14.8011 12.6602 15.0879 12.6367C15.4635 12.606 15.675 12.5492 15.833 12.4688L15.959 12.3975C16.2466 12.2211 16.4808 11.9682 16.6348 11.666L16.6914 11.5361C16.7428 11.3924 16.7797 11.2026 16.8027 10.9209C16.8341 10.5374 16.835 10.0439 16.835 9.33301V6.5C16.835 5.78896 16.8341 5.29563 16.8027 4.91211C16.7797 4.63025 16.7428 4.44063 16.6914 4.29688L16.6348 4.16699C16.4807 3.86474 16.2466 3.61186 15.959 3.43555L15.833 3.36524C15.675 3.28473 15.4636 3.22797 15.0879 3.19727C14.7044 3.16593 14.211 3.16504 13.5 3.16504H10.667C9.9561 3.16504 9.46259 3.16595 9.0791 3.19727C8.79739 3.22028 8.6076 3.2572 8.46387 3.30859L8.33399 3.36524C8.03176 3.51923 7.77886 3.75343 7.60254 4.04102L7.53125 4.16699C7.4508 4.32498 7.39397 4.53655 7.36328 4.91211C7.33985 5.19893 7.33562 5.54719 7.33399 6.00195H9.33301C10.022 6.00195 10.5791 6.00131 11.0293 6.03809C11.4873 6.07551 11.8937 6.15471 12.2705 6.34668L12.4883 6.46875C12.984 6.7728 13.3878 7.20854 13.6533 7.72949L13.7197 7.87207C13.8642 8.20859 13.9292 8.56974 13.9619 8.9707C13.9987 9.42092 13.998 9.97799 13.998 10.667V12.665ZM18.165 9.33301C18.165 10.022 18.1657 10.5791 18.1289 11.0293C18.0961 11.4302 18.0311 11.7914 17.8867 12.1279L17.8203 12.2705C17.5549 12.7914 17.1509 13.2272 16.6553 13.5313L16.4365 13.6533C16.0599 13.8452 15.6541 13.9245 15.1963 13.9619C14.8593 13.9895 14.4624 13.9935 13.9951 13.9951C13.9935 14.4624 13.9895 14.8593 13.9619 15.1963C13.9292 15.597 13.864 15.9576 13.7197 16.2939L13.6533 16.4365C13.3878 16.9576 12.9841 17.3941 12.4883 17.6982L12.2705 17.8203C11.8937 18.0123 11.4873 18.0915 11.0293 18.1289C10.5791 18.1657 10.022 18.165 9.33301 18.165H6.5C5.81091 18.165 5.25395 18.1657 4.80371 18.1289C4.40306 18.0962 4.04235 18.031 3.70606 17.8867L3.56348 17.8203C3.04244 17.5548 2.60585 17.151 2.30176 16.6553L2.17969 16.4365C1.98788 16.0599 1.90851 15.6541 1.87109 15.1963C1.83431 14.746 1.83496 14.1891 1.83496 13.5V10.667C1.83496 9.978 1.83432 9.42091 1.87109 8.9707C1.90851 8.5127 1.98772 8.10625 2.17969 7.72949L2.30176 7.51172C2.60586 7.0159 3.04236 6.6122 3.56348 6.34668L3.70606 6.28027C4.04237 6.136 4.40303 6.07083 4.80371 6.03809C5.14051 6.01057 5.53708 6.00551 6.00391 6.00391C6.00551 5.53708 6.01057 5.14051 6.03809 4.80371C6.0755 4.34588 6.15483 3.94012 6.34668 3.56348L6.46875 3.34473C6.77282 2.84912 7.20856 2.44514 7.72949 2.17969L7.87207 2.11328C8.20855 1.96886 8.56979 1.90385 8.9707 1.87109C9.42091 1.83432 9.978 1.83496 10.667 1.83496H13.5C14.1891 1.83496 14.746 1.83431 15.1963 1.87109C15.6541 1.90851 16.0599 1.98788 16.4365 2.17969L16.6553 2.30176C17.151 2.60585 17.5548 3.04244 17.8203 3.56348L17.8867 3.70606C18.031 4.04235 18.0962 4.40306 18.1289 4.80371C18.1657 5.25395 18.165 5.81091 18.165 6.5V9.33301Z"></path></svg></button></span></div> </div> </div> </div> <hr data-start="9349" data-end="9352"> <h2 data-start="9354" data-end="9379"><span class="ez-toc-section" id="%D9%86%D8%B5%D8%A7%D8%A6%D8%AD_%D9%85%D8%AA%D9%82%D8%AF%D9%85%D8%A9_%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86"></span>نصائح متقدمة للمبتدئين<span class="ez-toc-section-end"></span></h2> <ol data-start="9381" data-end="10009"> <li data-start="9381" data-end="9506"> <p data-start="9384" data-end="9506"><strong data-start="9384" data-end="9418">احرص على كتابة كود نظيف ومنظم:</strong> استعمل التراجع (Indentation) المناسب، وضع تعليقات تساعدك على فهم الكود عند العودة إليه.</p> </li> <li data-start="9511" data-end="9669"> <p data-start="9514" data-end="9669"><strong data-start="9514" data-end="9549">استخدم أدوات المطور في المتصفح:</strong> جميع المتصفحات الحديثة مثل Chrome، Firefox، تحتوي على أدوات مطور تسمح بمراجعة الهيكل والتنظيم والتنقيح في الوقت الفعلي.</p> </li> <li data-start="9671" data-end="9789"> <p data-start="9674" data-end="9789"><strong data-start="9674" data-end="9696">تعلم نظام الألوان:</strong> فهم كيفية استخدام القيم اللونية في CSS مثل HEX، RGB، HSL يعطيك تحكمًا أكبر في تصميم الألوان.</p> </li> <li data-start="9791" data-end="9896"> <p data-start="9794" data-end="9896"><strong data-start="9794" data-end="9833">التدرج الهرمي (Specificity) في CSS:</strong> تعلم كيف تؤثر قواعد CSS المختلفة على بعضها لمنع تعارض الأنماط.</p> </li> <li data-start="9898" data-end="10009"> <p data-start="9901" data-end="10009"><strong data-start="9901" data-end="9930">مراعاة المعايير العالمية:</strong> مثل كتابة صفحات متوافقة مع مختلف المتصفحات، وسهولة الوصول للأشخاص ذوي الإعاقة.</p> </li> </ol> <hr data-start="10011" data-end="10014"> <h2 data-start="10016" data-end="10026"><span class="ez-toc-section" id="%D8%A7%D9%84%D8%AE%D9%84%D8%A7%D8%B5%D8%A9"></span>الخلاصة<span class="ez-toc-section-end"></span></h2> <p data-start="10028" data-end="10301">تصميم صفحات الويب باستخدام HTML و CSS هو الخطوة الأولى في عالم تطوير الويب. HTML يوفر الهيكل الأساسي والمحتوى، بينما CSS يعطي الصفحة مظهرها وجماليتها. من خلال التعرف على العناصر الأساسية لكل منهما، وإنشاء ملفات منظمة ومنسقة، يستطيع أي مبتدئ أن يصمم صفحة ويب متكاملة ومميزة.</p> <p data-start="10303" data-end="10591">تكرار التدريب العملي، استخدام الموارد التعليمية الحديثة، وتجربة التعديلات المختلفة على الكود، من أفضل الطرق لتعزيز مهارات التصميم. بالاستمرار والممارسة، يصبح بإمكان المصمم المبتدئ الانتقال إلى تقنيات أكثر تقدمًا مثل JavaScript، إطار العمل (Frameworks)، وتصميم واجهات المستخدم الديناميكية.</p> <hr data-start="10593" data-end="10596"> <h3 data-start="10598" data-end="10614"><span class="ez-toc-section" id="%D9%85%D8%B5%D8%A7%D8%AF%D8%B1_%D9%88%D9%85%D8%B1%D8%A7%D8%AC%D8%B9"></span>مصادر ومراجع<span class="ez-toc-section-end"></span></h3> <ul data-start="10616" data-end="10808"> <li data-start="10616" data-end="10680"> <p data-start="10618" data-end="10680">كتاب "HTML and CSS: Design and Build Websites" لـ Jon Duckett.</p> </li> <li data-start="10681" data-end="10808"> <p data-start="10683" data-end="10808">موقع MDN Web Docs التابع لـ Mozilla: <a data-start="10720" data-end="10806" class="" rel="noopener" target="_new" href="https://developer.mozilla.org/ar/docs/Web">https://developer.mozilla.org/ar/docs/Web</a></p> </li> </ul> <hr data-start="10810" data-end="10813"> <p data-start="10815" data-end="10964" data-is-last-node="" data-is-only-node="">المقال السابق يقدم شرحًا مفصلًا وشاملاً لمفهوم تصميم صفحات الويب للمبتدئين، مبني على قواعد علمية معاصرة تتماشى مع معايير صناعة تطوير المواقع الحديثة.</p> </div> </div> </div> </p> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">اخر تحديث 09/06/2025</span><div class="tie-alignright"><span class="meta-views meta-item warm"><span class="tie-icon-fire" aria-hidden="true"></span> 19 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> تمت قراءة 5 دقيقة</span> </div></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="فيسبوك" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فيسبوك</span> </a> <a href="https://twitter.com/intent/tweet?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&title=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="لينكدإن" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لينكدإن</span> </a> <a href="https://www.tumblr.com/share/link?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&name=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&description=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&media=" rel="external noopener nofollow" title="بينتيريست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">بينتيريست</span> </a> <a href="https://reddit.com/submit?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&title=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://web.skype.com/share?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="سكايب" target="_blank" class="skype-share-btn " data-raw="https://web.skype.com/share?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-skype"></span> <span class="screen-reader-text">سكايب</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://api.whatsapp.com/send?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="واتساب" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">واتساب</span> </a> <a href="https://telegram.me/share/url?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="تيلقرام" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">تيلقرام</span> </a> <a href="viber://forward?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ڤايبر" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">ڤايبر</span> </a> <a href="https://line.me/R/msg/text/?%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="لاين" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">لاين</span> </a> <a href="mailto:?subject=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&body=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="المشاركة عبر البريد الألكتروني" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">المشاركة عبر البريد الألكتروني</span> </a> <a href="#" rel="external noopener nofollow" title="طباعة" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">طباعة</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2025-06-09T21:41:58+03:00","datePublished":"2025-06-09T21:41:58+03:00","dateModified":"2025-06-09T21:41:58+03:00","headline":"\u062f\u0644\u064a\u0644 \u062a\u0635\u0645\u064a\u0645 \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628","name":"\u062f\u0644\u064a\u0644 \u062a\u0635\u0645\u064a\u0645 \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628","keywords":[],"url":"https:\/\/mwade3.com\/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8\/","description":"HTML \u0648 CSS \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646: \u0643\u064a\u0641 \u062a\u0635\u0645\u0645 \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0644\u0643 \u0641\u064a \u0639\u0635\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0623\u0635\u0628\u062d\u062a \u0645\u0647\u0627\u0631\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0645\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u0646\u0628\u063a\u064a \u0644\u0623\u064a \u0634\u062e\u0635 \u0645\u0647\u062a\u0645 \u0628\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0623\u0648 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0623\u0646 \u064a\u062a\u0642\u0646\u0647\u0627","copyrightYear":"2025","articleSection":"\u0627\u0644\u0628\u0631\u0645\u062c\u0629","articleBody":"HTML \u0648 CSS \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646: \u0643\u064a\u0641 \u062a\u0635\u0645\u0645 \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0644\u0643\n\u0641\u064a \u0639\u0635\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0648\u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0623\u0635\u0628\u062d\u062a \u0645\u0647\u0627\u0631\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0645\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u0646\u0628\u063a\u064a \u0644\u0623\u064a \u0634\u062e\u0635 \u0645\u0647\u062a\u0645 \u0628\u0627\u0644\u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0623\u0648 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0623\u0646 \u064a\u062a\u0642\u0646\u0647\u0627. \u0628\u064a\u0646 \u0644\u063a\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u0629 \u0627\u0644\u0639\u062f\u064a\u062f\u0629\u060c \u062a\u0628\u0631\u0632 HTML \u0648 CSS \u0643\u0639\u0645\u0648\u062f\u064a\u0646 \u0641\u0642\u0631\u064a\u064a\u0646 \u0644\u0623\u064a \u0635\u0641\u062d\u0629 \u0648\u064a\u0628\u060c \u0648\u0647\u0645\u0627 \u0627\u0644\u0628\u0648\u0627\u0628\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646 \u062a\u0639\u0644\u0645\u0647\u0627 \u0644\u0641\u0647\u0645 \u0643\u064a\u0641\u064a\u0629 \u0628\u0646\u0627\u0621 \u0648\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0639\u0644\u0649 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a. \u0647\u0630\u0627 \u0627\u0644\u0645\u0642\u0627\u0644 \u064a\u0633\u062a\u0639\u0631\u0636 \u0628\u0634\u0643\u0644 \u0645\u0641\u0635\u0644 \u0648\u0628\u0623\u0633\u0644\u0648\u0628 \u0639\u0644\u0645\u064a \u0627\u0644\u062d\u064a\u0627\u0629 \u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0644\u0644\u0628\u062f\u0621 \u0628\u062a\u0635\u0645\u064a\u0645 \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS\u060c \u0645\u0639 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0627\u0644\u0645\u0628\u0627\u062f\u0626 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\u060c \u0627\u0644\u0647\u064a\u0643\u0644\u064a\u0629\u060c \u0627\u0644\u0623\u0633\u0627\u0644\u064a\u0628 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0648\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0627\u0644\u0645\u062a\u0628\u0639\u0629 \u0641\u064a \u0627\u0644\u0635\u0646\u0627\u0639\u0629.\n\n\u0645\u0642\u062f\u0645\u0629 \u0625\u0644\u0649 HTML\nHTML\u060c \u0648\u0627\u0644\u062a\u064a \u062a\u0639\u0646\u064a HyperText Markup Language\u060c \u0647\u064a \u0644\u063a\u0629 \u062a\u0631\u0645\u064a\u0632 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u0648\u0635\u0641 \u0628\u0646\u064a\u0629 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628. \u0628\u0628\u0633\u0627\u0637\u0629\u060c \u0647\u064a \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u062a\u064a \u062a\u062e\u0628\u0631 \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0643\u064a\u0641 \u064a\u064f\u0631\u062a\u0628 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u064a\u0639\u0631\u0636\u0647. \u064a\u0645\u0643\u0646 \u0627\u0639\u062a\u0628\u0627\u0631 HTML \u0643\u0627\u0644\u0639\u0638\u0645 \u0623\u0648 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0639\u0638\u0645\u064a \u0644\u0623\u064a \u0635\u0641\u062d\u0629 \u0648\u064a\u0628.\n\u0643\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u062a\u0639\u062a\u0645\u062f \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 HTML \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0627\u0644\u0635\u0648\u0631\u060c \u0627\u0644\u0631\u0648\u0627\u0628\u0637\u060c \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646\u060c \u0627\u0644\u062c\u062f\u0627\u0648\u0644\u060c \u0648\u0627\u0644\u0642\u0648\u0627\u0626\u0645. \u062a\u064f\u0643\u062a\u0628 \u0639\u0646\u0627\u0635\u0631 HTML \u0636\u0645\u0646 \u0648\u0633\u0648\u0645 (Tags) \u0645\u062d\u062f\u062f\u0629 \u062a\u0644\u062a\u0641 \u062d\u0648\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0644\u062a\u0648\u0636\u064a\u062d \u0648\u0638\u064a\u0641\u062a\u0647 \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0641\u062d\u0629.\n\u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0644\u0635\u0641\u062d\u0629 HTML\n\u064a\u062a\u0643\u0648\u0646 \u0645\u0644\u0641 HTML \u0645\u0646 \u0645\u062c\u0645\u0648\u0639\u0629 \u0648\u0633\u0648\u0645 \u062a\u062d\u064a\u0637 \u0628\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0644\u062a\u062d\u062f\u062f \u0637\u0628\u064a\u0639\u062a\u0647\u060c \u0648\u0647\u064a\u0643\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\u060c \u0648\u0623\u0642\u0633\u0627\u0645\u0647\u0627 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629. \u0641\u064a\u0645\u0627 \u064a\u0644\u064a \u0646\u0645\u0648\u0630\u062c \u0623\u0633\u0627\u0633\u064a \u0644\u0635\u0641\u062d\u0629 HTML:\nhtmlCopyEdit\n\n\n \n \n \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u0623\u0648\u0644\u0649\n\n\n \u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0643 \u0641\u064a \u0639\u0627\u0644\u0645 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628\n \u0647\u0630\u0647 \u0647\u064a \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0644\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS.\n\n\n\n\n\n: \u0625\u0639\u0644\u0627\u0646 \u0646\u0648\u0639 \u0627\u0644\u0645\u0633\u062a\u0646\u062f \u0648\u0647\u0648 \u0623\u0645\u0631 \u0636\u0631\u0648\u0631\u064a \u0644\u062a\u062d\u062f\u064a\u062f \u0646\u0648\u0639 HTML \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645.\n\n\n: \u0627\u0644\u0648\u0633\u0645 \u0627\u0644\u062c\u0630\u0631\u064a \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a \u062c\u0645\u064a\u0639 \u0645\u062d\u062a\u0648\u064a\u0627\u062a \u0627\u0644\u0635\u0641\u062d\u0629\u060c \u0645\u0639 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0644\u063a\u0629 \u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629.\n\n\n: \u064a\u062d\u062a\u0648\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u063a\u064a\u0631 \u0645\u0631\u0626\u064a\u0629 \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u0628\u0627\u0634\u0631\u0629 \u0645\u062b\u0644 \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u062a\u0631\u0645\u064a\u0632\u060c \u0627\u0644\u0639\u0646\u0648\u0627\u0646\u060c \u0648\u0631\u0628\u0637 \u0645\u0644\u0641\u0627\u062a CSS.\n\n\n: \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0630\u064a \u064a\u0638\u0647\u0631 \u0641\u064a \u062a\u0628\u0648\u064a\u0628 \u0627\u0644\u0645\u062a\u0635\u0641\u062d.\n\n\n: \u064a\u062d\u062a\u0648\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0631\u0626\u064a \u0627\u0644\u0630\u064a \u064a\u0638\u0647\u0631 \u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062d\u0629 \u0645\u062b\u0644 \u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0627\u0644\u0635\u0648\u0631\u060c \u0627\u0644\u0631\u0648\u0627\u0628\u0637\u060c \u0648\u063a\u064a\u0631\u0647\u0627.\n\n\n\n\u0645\u0642\u062f\u0645\u0629 \u0625\u0644\u0649 CSS\nCSS\u060c \u0648\u0627\u0644\u062a\u064a \u062a\u0639\u0646\u064a Cascading Style Sheets\u060c \u0647\u064a \u0644\u063a\u0629 \u062a\u0646\u0633\u064a\u0642 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u062d\u062f\u064a\u062f \u0645\u0638\u0647\u0631 \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628. \u0628\u064a\u0646\u0645\u0627 HTML \u062a\u062d\u062f\u062f \u0647\u064a\u0643\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\u060c \u062a\u0642\u0648\u0645 CSS \u0628\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u062e\u0637\u0648\u0637\u060c \u0627\u0644\u062a\u0628\u0627\u0639\u062f\u060c \u0648\u0627\u0644\u0623\u0634\u0643\u0627\u0644 \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0644\u0644\u0639\u0646\u0627\u0635\u0631.\n\u062a\u062a\u064a\u062d CSS \u0644\u0644\u0645\u0637\u0648\u0631 \u062a\u062d\u0643\u0645\u064b\u0627 \u0643\u0627\u0645\u0644\u0627\u064b \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0635\u0641\u062d\u0629 \u0648\u062c\u0639\u0644\u0647\u0627 \u0623\u0643\u062b\u0631 \u062c\u0627\u0630\u0628\u064a\u0629\u060c \u0648\u0645\u0644\u0627\u0621\u0645\u0629 \u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u060c \u0643\u0645\u0627 \u062a\u0633\u0647\u0644 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0634\u0643\u0644 \u0645\u0631\u0643\u0632\u064a \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0644\u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u062f\u0627\u062e\u0644 HTML.\n\u0637\u0631\u0642 \u0625\u062f\u0631\u0627\u062c CSS \u0641\u064a \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628\n\u064a\u0645\u0643\u0646 \u0625\u0636\u0627\u0641\u0629 CSS \u0625\u0644\u0649 \u0635\u0641\u062d\u0629 HTML \u0628\u062b\u0644\u0627\u062b \u0637\u0631\u0642:\n\n\nCSS \u062f\u0627\u062e\u0644\u064a (Internal CSS): \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u062f\u0627\u062e\u0644 \u0648\u0633\u0645 \u0641\u064a \u062f\u0627\u062e\u0644 \u0648\u0633\u0645 .\nhtmlCopyEdit\n body {\n background-color: #f0f0f0;\n font-family: Arial, sans-serif;\n }\n\n\n\n\nCSS \u062e\u0627\u0631\u062c\u064a (External CSS): \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0641\u064a \u0645\u0644\u0641 \u0645\u0646\u0641\u0635\u0644 \u0628\u0635\u064a\u063a\u0629 .css \u0648\u0631\u0628\u0637\u0647 \u0628\u0627\u0644\u0635\u0641\u062d\u0629 \u0639\u0628\u0631 \u0648\u0633\u0645 .\nhtmlCopyEdit\n\n\n\nCSS \u0645\u0636\u0645\u0651\u0646 (Inline CSS): \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0648\u0633\u0645 HTML \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 style.\nhtmlCopyEdit\u0639\u0646\u0648\u0627\u0646 \u0623\u0632\u0631\u0642\n\n\n\n\u0628\u064a\u0646 \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u0642\u060c \u064a\u064f\u0641\u0636\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS \u0627\u0644\u062e\u0627\u0631\u062c\u064a \u0644\u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u062a\u0646\u0638\u064a\u0645 \u0648\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645.\n\n\u0628\u0646\u0627\u0621 \u0623\u0648\u0644 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS\n\u0627\u0644\u0622\u0646\u060c \u0628\u0639\u062f \u0627\u0644\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0623\u0633\u0627\u0633\u064a\u0627\u062a HTML \u0648 CSS\u060c \u0633\u0646\u0645\u0631 \u0628\u0639\u0645\u0644\u064a\u0629 \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0628\u0633\u064a\u0637\u0629 \u0644\u0643\u0646\u0647\u0627 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u062a\u0639\u0628\u0631 \u0639\u0646 \u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629.\n\u0627\u0644\u062e\u0637\u0648\u0629 1: \u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641 HTML \u0623\u0633\u0627\u0633\u064a\n\u0627\u0628\u062f\u0623 \u0628\u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641 \u062c\u062f\u064a\u062f \u0628\u0627\u0633\u0645 index.html \u0648\u0636\u0639 \u0641\u064a\u0647 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0627\u0644\u062a\u0627\u0644\u064a:\nhtmlCopyEdit\n\n\n \n \n \u0635\u0641\u062d\u062a\u064a \u0627\u0644\u0623\u0648\u0644\u0649\n \n\n\n \n \u0645\u0631\u062d\u0628\u0627\u064b \u0628\u0643 \u0641\u064a \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u0623\u0648\u0644\n \n \n \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\n \u0639\u0646 \u0627\u0644\u0645\u0648\u0642\u0639\n \u0627\u062a\u0635\u0644 \u0628\u0646\u0627\n \n \n \n\n \n \n \u0645\u0642\u062f\u0645\u0629 \u0639\u0646 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628\n \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628 \u0647\u0648 \u0641\u0646 \u0648\u0639\u0644\u0645 \u0625\u0646\u0634\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u062c\u0630\u0627\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS \u0648\u063a\u064a\u0631\u0647\u0627 \u0645\u0646 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a.\n \n\n \n \u0644\u0645\u0627\u0630\u0627 \u0646\u062a\u0639\u0644\u0645 HTML \u0648 CSS\u061f\n \u0644\u0623\u0646\u0647\u0645\u0627 \u0623\u0633\u0627\u0633 \u0623\u064a \u0645\u0648\u0642\u0639 \u0639\u0644\u0649 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\u060c \u0648\u064a\u0645\u0646\u062d\u0627\u0646 \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0643\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0641\u064a \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u0645\u0638\u0647\u0631.\n \n \n\n \n \u062d\u0642\u0648\u0642 \u0627\u0644\u0646\u0634\u0631 \u00a9 2025 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629\n \n\n\n\n\u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649:\n\n\n\u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 (Header): \u064a\u062a\u0636\u0645\u0646 \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0642\u0627\u0626\u0645\u0629 \u062a\u0646\u0642\u0644.\n\n\n\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a (Main): \u064a\u0636\u0645 \u0642\u0633\u0645\u064a\u0646 \u064a\u062d\u062a\u0648\u064a\u0627\u0646 \u0639\u0644\u0649 \u0646\u0635\u0648\u0635 \u062a\u0648\u0636\u064a\u062d\u064a\u0629.\n\n\n\u062a\u0630\u064a\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 (Footer): \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u062d\u0642\u0648\u0642 \u0627\u0644\u0646\u0634\u0631.\n\n\n\u0627\u0644\u062e\u0637\u0648\u0629 2: \u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641 CSS \u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0635\u0641\u062d\u0629\n\u0642\u0645 \u0628\u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641 \u0628\u0627\u0633\u0645 styles.css \u0641\u064a \u0646\u0641\u0633 \u0645\u062c\u0644\u062f \u0645\u0644\u0641 HTML\u060c \u062b\u0645 \u0623\u0636\u0641 \u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0627\u0644\u062a\u0627\u0644\u064a\u0629:\ncssCopyEdit\/* \u062a\u0646\u0633\u064a\u0642 \u0639\u0627\u0645 \u0644\u0644\u062c\u0633\u0645 *\/\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #ffffff;\n color: #333333;\n margin: 0;\n padding: 0;\n line-height: 1.6;\n}\n\n\/* \u062a\u0646\u0633\u064a\u0642 \u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 *\/\nheader {\n background-color: #007acc;\n color: white;\n padding: 20px 0;\n text-align: center;\n}\n\n\/* \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u0646\u0642\u0644 *\/\nnav ul {\n list-style-type: none;\n padding: 0;\n margin: 10px 0 0 0;\n display: flex;\n justify-content: center;\n gap: 30px;\n}\n\nnav ul li a {\n color: white;\n text-decoration: none;\n font-weight: bold;\n}\n\nnav ul li a:hover {\n text-decoration: underline;\n}\n\n\/* \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 *\/\nh1, h2 {\n margin-bottom: 10px;\n}\n\n\/* \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a *\/\nmain {\n padding: 20px;\n max-width: 900px;\n margin: auto;\n}\n\nsection {\n margin-bottom: 30px;\n}\n\n\/* \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u062a\u0630\u064a\u064a\u0644 *\/\nfooter {\n background-color: #f1f1f1;\n text-align: center;\n padding: 15px 0;\n color: #666666;\n font-size: 14px;\n border-top: 1px solid #ddd;\n}\n\n\u0634\u0631\u062d \u0627\u0644\u062a\u0646\u0633\u064a\u0642\u0627\u062a:\n\n\nbody: \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u062e\u0637 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0644\u0648\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629\u060c \u0648\u0644\u0648\u0646 \u0627\u0644\u0646\u0635.\n\n\nheader: \u062e\u0644\u0641\u064a\u0629 \u0632\u0631\u0642\u0627\u0621 \u0648\u0646\u0635 \u0623\u0628\u064a\u0636 \u0645\u0639 \u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u0641\u064a \u0627\u0644\u0648\u0633\u0637.\n\n\nnav ul: \u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0646\u0642\u0627\u0637 \u0645\u0646 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u0646\u0642\u0644\u060c \u0648\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0623\u0641\u0642\u064a\u0627\u064b \u0645\u0639 \u062a\u0628\u0627\u0639\u062f \u0628\u064a\u0646\u0647\u0627.\n\n\nnav ul li a: \u0644\u0648\u0646 \u0627\u0644\u0646\u0635 \u0623\u0628\u064a\u0636 \u0628\u062f\u0648\u0646 \u062e\u0637 \u062a\u062d\u062a\u0647\u060c \u0645\u0639 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0639\u0646\u062f \u0627\u0644\u0645\u0631\u0648\u0631 \u0628\u0627\u0644\u0641\u0623\u0631\u0629.\n\n\nmain: \u062a\u0642\u064a\u064a\u062f \u0639\u0631\u0636 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0631\u0643\u0632\u064a \u0645\u0639 \u0648\u0636\u0639\u0647 \u0641\u064a \u0648\u0633\u0637 \u0627\u0644\u0634\u0627\u0634\u0629.\n\n\nfooter: \u062e\u0644\u0641\u064a\u0629 \u0631\u0645\u0627\u062f\u064a\u0629 \u0641\u0627\u062a\u062d\u0629 \u0645\u0639 \u0646\u0635 \u0631\u0645\u0627\u062f\u064a \u062f\u0627\u0643\u0646.\n\n\n\n\u0645\u0641\u0627\u0647\u064a\u0645 \u0645\u0647\u0645\u0629 \u064a\u062c\u0628 \u0639\u0644\u0649 \u0627\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646 \u0641\u0647\u0645\u0647\u0627\n1. \u0627\u0644\u0639\u0646\u0627\u0635\u0631 (Elements) \u0648\u0627\u0644\u0648\u0633\u0648\u0645 (Tags) \u0641\u064a HTML\n\u0627\u0644\u0639\u0646\u0635\u0631 \u0647\u0648 \u0648\u062d\u062f\u0629 \u0627\u0644\u0628\u0646\u0627\u0621 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a HTML \u0648\u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0648\u0633\u0645 \u0627\u0641\u062a\u062a\u0627\u062d\u064a \u0648\u0648\u0633\u0645 \u0625\u063a\u0644\u0627\u0642\u060c \u0645\u0639 \u0645\u062d\u062a\u0648\u0649 \u0628\u064a\u0646\u0647\u0645\u0627. \u0628\u0639\u0636 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u062a\u0643\u0648\u0646 \u0628\u062f\u0648\u0646 \u0648\u0633\u0645 \u0625\u063a\u0644\u0627\u0642 \u0645\u062b\u0644 \u0623\u0648 .\n\u0645\u062b\u0627\u0644:\nhtmlCopyEdit\u0647\u0630\u0647 \u0641\u0642\u0631\u0629 \u0646\u0635\u064a\u0629.\n\n\n2. \u0627\u0644\u0633\u0645\u0627\u062a (Attributes)\n\u0627\u0644\u0633\u0645\u0627\u062a \u0647\u064a \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u062a\u0636\u0627\u0641 \u0625\u0644\u0649 \u0627\u0644\u0648\u0633\u0648\u0645 \u0644\u062a\u062e\u0635\u064a\u0635 \u0627\u0644\u0639\u0646\u0635\u0631. \u0645\u062b\u0644 href \u0641\u064a \u0648\u0633\u0645 \u0627\u0644\u0631\u0627\u0628\u0637 \u0644\u062a\u062d\u062f\u064a\u062f \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0648\u062c\u0647\u0629.\n\u0645\u062b\u0627\u0644:\nhtmlCopyEdit\u0631\u0627\u0628\u0637 \u0625\u0644\u0649 \u0645\u0648\u0642\u0639 \u0645\u062b\u0627\u0644\n\n3. \u0627\u0644\u062a\u0646\u0633\u064a\u0642 (Styling) \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS\n\u062a\u0642\u0648\u0645 CSS \u0628\u0641\u0635\u0644 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0639\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\u060c \u062d\u064a\u062b \u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0645\u0638\u0647\u0631 \u0643\u0644 \u0639\u0646\u0635\u0631 \u0639\u0628\u0631 \u0642\u0648\u0627\u0639\u062f \u0648\u0623\u0648\u0627\u0645\u0631.\n\u0645\u0641\u0647\u0648\u0645 \u0627\u0644\u0642\u0648\u0627\u0639\u062f (Rulesets) \u0641\u064a CSS \u064a\u062a\u0643\u0648\u0646 \u0645\u0646 \u0645\u062d\u062f\u062f (Selector) \u0648\u0645\u062c\u0645\u0648\u0639\u0629 \u062e\u0635\u0627\u0626\u0635 (Properties) \u0648\u0642\u064a\u0645 (Values).\n\u0645\u062b\u0627\u0644:\ncssCopyEditp {\n color: red;\n font-size: 16px;\n}\n\n4. \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0635\u0646\u062f\u0648\u0642\u064a (Box Model)\n\u0643\u0644 \u0639\u0646\u0635\u0631 \u0641\u064a \u0635\u0641\u062d\u0629 \u0627\u0644\u0648\u064a\u0628 \u064a\u0639\u0627\u0645\u0644 \u0643\u0635\u0646\u062f\u0648\u0642 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649:\n\n\n\u0627\u0644\u0645\u062d\u062a\u0648\u0649 (Content): \u0627\u0644\u0646\u0635 \u0623\u0648 \u0627\u0644\u0635\u0648\u0631 \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0635\u0631.\n\n\n\u0627\u0644\u062d\u0634\u0648 (Padding): \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0628\u064a\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u062d\u062f\u0648\u062f \u0627\u0644\u0639\u0646\u0635\u0631.\n\n\n\u0627\u0644\u062d\u062f\u0648\u062f (Border): \u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u062d\u064a\u0637 \u0628\u0627\u0644\u0639\u0646\u0627\u0635\u0631.\n\n\n\u0627\u0644\u0647\u0627\u0645\u0634 (Margin): \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0641\u0627\u0631\u063a\u0629 \u062e\u0627\u0631\u062c \u0627\u0644\u062d\u062f\u0648\u062f \u062a\u0641\u0635\u0644 \u0627\u0644\u0639\u0646\u0635\u0631 \u0639\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u062e\u0631\u0649.\n\n\n\u0641\u0647\u0645 \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0636\u0631\u0648\u0631\u064a \u0644\u0644\u062a\u062d\u0643\u0645 \u0628\u062f\u0642\u0629 \u0641\u064a \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0635\u0641\u062d\u0627\u062a.\n\n\u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u062a\u0627\u0644\u064a \u064a\u0648\u0636\u062d \u0645\u0643\u0648\u0646\u0627\u062a \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0635\u0646\u062f\u0648\u0642 (Box Model) \u0648\u062a\u0648\u0636\u064a\u062d \u0648\u0638\u064a\u0641\u062a\u0647\u0627:\n\u0627\u0644\u0639\u0646\u0635\u0631\u0627\u0644\u0648\u0635\u0641\u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0644\u0649 \u0627\u0644\u062a\u0646\u0633\u064a\u0642Content\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0641\u0639\u0644\u064a\u062d\u064a\u062b \u064a\u064f\u0639\u0631\u0636 \u0627\u0644\u0646\u0635 \u0623\u0648 \u0627\u0644\u0635\u0648\u0631Padding\u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0628\u064a\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u062d\u062f\u0648\u062f\u064a\u0632\u064a\u062f \u0627\u0644\u0645\u0633\u0627\u062d\u0629 \u0627\u0644\u0641\u0627\u0631\u063a\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0646\u062f\u0648\u0642Border\u0627\u0644\u062e\u0637 \u0627\u0644\u0645\u062d\u064a\u0637 \u0628\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u062d\u0634\u0648\u064a\u062d\u062f\u062f \u062d\u062f\u0648\u062f \u0627\u0644\u0639\u0646\u0635\u0631 \u0648\u064a\u0632\u064a\u062f \u0645\u0646 \u0648\u0636\u0648\u062d\u0647Margin\u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0641\u0635\u0644 \u0627\u0644\u0639\u0646\u0635\u0631 \u0639\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062c\u0627\u0648\u0631\u0629\u064a\u062a\u062d\u0643\u0645 \u0628\u0645\u0648\u0642\u0639 \u0627\u0644\u0639\u0646\u0635\u0631 \u0636\u0645\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0634\u0643\u0644 \u0639\u0627\u0645\n\n\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0639\u0645\u0644\u064a\u0629 \u0644\u062a\u0637\u0648\u064a\u0631 \u0645\u0647\u0627\u0631\u0627\u062a HTML \u0648 CSS\n\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\n\u0628\u0639\u062f \u0625\u0646\u0634\u0627\u0621 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0623\u0633\u0627\u0633\u064a\u0629\u060c \u064a\u0645\u0643\u0646 \u062a\u0637\u0648\u064a\u0631\u0647\u0627 \u0628\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u0627\u0644\u0645\u0631\u0626\u064a\u0629\u060c \u0645\u062b\u0644 \u0627\u0644\u0635\u0648\u0631\u060c \u0627\u0644\u062c\u062f\u0627\u0648\u0644\u060c \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0645\u0639\u0642\u062f\u0629\u060c \u0648\u0643\u0630\u0644\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS \u0644\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0645\u0638\u0647\u0631 \u0639\u0646 \u0637\u0631\u064a\u0642:\n\n\n\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0645\u062a\u062f\u0631\u062c\u0629 (Gradients): \u062a\u0636\u064a\u0641 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u062c\u0645\u0627\u0644\u064a\u0629 \u0641\u064a \u0627\u0644\u062e\u0644\u0641\u064a\u0627\u062a.\n\n\n\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0638\u0644\u0627\u0644 (Box Shadows): \u0644\u062a\u0633\u0644\u064a\u0637 \u0627\u0644\u0636\u0648\u0621 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631.\n\n\n\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0637\u0648\u0637 \u0645\u062e\u0635\u0635\u0629: \u0639\u0628\u0631 \u0631\u0628\u0637 \u062e\u0637\u0648\u0637 \u0645\u0646 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0645\u062b\u0644 Google Fonts.\n\n\n\u062a\u0635\u0645\u064a\u0645 \u0627\u0633\u062a\u062c\u0627\u0628\u0629 (Responsive Design): \u0644\u062c\u0639\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u062a\u0638\u0647\u0631 \u0628\u0634\u0643\u0644 \u0645\u062a\u0646\u0627\u0633\u0642 \u0639\u0644\u0649 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0623\u062c\u0647\u0632\u0629.\n\n\n\u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0627\u0644\u0635\u0641\u062d\u0629:\ncssCopyEdit@media (max-width: 600px) {\n nav ul {\n flex-direction: column;\n gap: 10px;\n }\n}\n\n\u0647\u0630\u0627 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u064a\u062c\u0639\u0644 \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062a\u0646\u0642\u0644 \u062a\u062a\u063a\u064a\u0631 \u0625\u0644\u0649 \u0639\u0645\u0648\u062f\u064a\u0629 \u0639\u0646\u062f \u0639\u0631\u0636 \u0627\u0644\u0635\u0641\u062d\u0629 \u0639\u0644\u0649 \u0634\u0627\u0634\u0629 \u0635\u063a\u064a\u0631\u0629.\n\n\u0623\u0647\u0645 \u0627\u0644\u0648\u0633\u0648\u0645 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0641\u064a HTML \u0645\u0639 \u0634\u0631\u062d \u0648\u0638\u064a\u0641\u062a\u0647\u0627\n\u0627\u0644\u0648\u0633\u0645\u0627\u0644\u0648\u0638\u064a\u0641\u0629 \u0625\u0644\u0649 \u0639\u0646\u0627\u0648\u064a\u0646 \u0630\u0627\u062a \u0645\u0633\u062a\u0648\u064a\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u0629\u0641\u0642\u0631\u0629 \u0646\u0635\u064a\u0629\u0631\u0627\u0628\u0637 \u062a\u0634\u0639\u0628\u064a\u0625\u062f\u0631\u0627\u062c \u0635\u0648\u0631\u0629 \u0648 \u0642\u0648\u0627\u0626\u0645 \u063a\u064a\u0631 \u0645\u0631\u062a\u0628\u0629 \u0648\u0645\u0631\u062a\u0628\u0629\u0639\u0646\u0635\u0631 \u0642\u0627\u0626\u0645\u0629\u0639\u0646\u0635\u0631 \u0639\u0627\u0645 \u0644\u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u064a\u0627\u062a\u0639\u0646\u0635\u0631 \u0646\u0635\u064a \u0635\u063a\u064a\u0631 \u0644\u062a\u0646\u0633\u064a\u0642 \u0623\u062c\u0632\u0627\u0621 \u0645\u0639\u064a\u0646\u0629\u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629 \u0623\u0648 \u0627\u0644\u0642\u0633\u0645\u062a\u0630\u064a\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u0623\u0648 \u0627\u0644\u0642\u0633\u0645\u0642\u0633\u0645 \u0645\u0633\u062a\u0642\u0644 \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0644\u0635\u0641\u062d\u0629\n\n\u0646\u0635\u0627\u0626\u062d \u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646\n\n\n\u0627\u062d\u0631\u0635 \u0639\u0644\u0649 \u0643\u062a\u0627\u0628\u0629 \u0643\u0648\u062f \u0646\u0638\u064a\u0641 \u0648\u0645\u0646\u0638\u0645: \u0627\u0633\u062a\u0639\u0645\u0644 \u0627\u0644\u062a\u0631\u0627\u062c\u0639 (Indentation) \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u060c \u0648\u0636\u0639 \u062a\u0639\u0644\u064a\u0642\u0627\u062a \u062a\u0633\u0627\u0639\u062f\u0643 \u0639\u0644\u0649 \u0641\u0647\u0645 \u0627\u0644\u0643\u0648\u062f \u0639\u0646\u062f \u0627\u0644\u0639\u0648\u062f\u0629 \u0625\u0644\u064a\u0647.\n\n\n\u0627\u0633\u062a\u062e\u062f\u0645 \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0637\u0648\u0631 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d: \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0645\u062b\u0644 Chrome\u060c Firefox\u060c \u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0623\u062f\u0648\u0627\u062a \u0645\u0637\u0648\u0631 \u062a\u0633\u0645\u062d \u0628\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0647\u064a\u0643\u0644 \u0648\u0627\u0644\u062a\u0646\u0638\u064a\u0645 \u0648\u0627\u0644\u062a\u0646\u0642\u064a\u062d \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0641\u0639\u0644\u064a.\n\n\n\u062a\u0639\u0644\u0645 \u0646\u0638\u0627\u0645 \u0627\u0644\u0623\u0644\u0648\u0627\u0646: \u0641\u0647\u0645 \u0643\u064a\u0641\u064a\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0644\u0648\u0646\u064a\u0629 \u0641\u064a CSS \u0645\u062b\u0644 HEX\u060c RGB\u060c HSL \u064a\u0639\u0637\u064a\u0643 \u062a\u062d\u0643\u0645\u064b\u0627 \u0623\u0643\u0628\u0631 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0623\u0644\u0648\u0627\u0646.\n\n\n\u0627\u0644\u062a\u062f\u0631\u062c \u0627\u0644\u0647\u0631\u0645\u064a (Specificity) \u0641\u064a CSS: \u062a\u0639\u0644\u0645 \u0643\u064a\u0641 \u062a\u0624\u062b\u0631 \u0642\u0648\u0627\u0639\u062f CSS \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0639\u0644\u0649 \u0628\u0639\u0636\u0647\u0627 \u0644\u0645\u0646\u0639 \u062a\u0639\u0627\u0631\u0636 \u0627\u0644\u0623\u0646\u0645\u0627\u0637.\n\n\n\u0645\u0631\u0627\u0639\u0627\u0629 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629: \u0645\u062b\u0644 \u0643\u062a\u0627\u0628\u0629 \u0635\u0641\u062d\u0627\u062a \u0645\u062a\u0648\u0627\u0641\u0642\u0629 \u0645\u0639 \u0645\u062e\u062a\u0644\u0641 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a\u060c \u0648\u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u0648\u0635\u0648\u0644 \u0644\u0644\u0623\u0634\u062e\u0627\u0635 \u0630\u0648\u064a \u0627\u0644\u0625\u0639\u0627\u0642\u0629.\n\n\n\n\u0627\u0644\u062e\u0644\u0627\u0635\u0629\n\u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS \u0647\u0648 \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 \u0641\u064a \u0639\u0627\u0644\u0645 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628. HTML \u064a\u0648\u0641\u0631 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0648\u0627\u0644\u0645\u062d\u062a\u0648\u0649\u060c \u0628\u064a\u0646\u0645\u0627 CSS \u064a\u0639\u0637\u064a \u0627\u0644\u0635\u0641\u062d\u0629 \u0645\u0638\u0647\u0631\u0647\u0627 \u0648\u062c\u0645\u0627\u0644\u064a\u062a\u0647\u0627. \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062a\u0639\u0631\u0641 \u0639\u0644\u0649 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0643\u0644 \u0645\u0646\u0647\u0645\u0627\u060c \u0648\u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641\u0627\u062a \u0645\u0646\u0638\u0645\u0629 \u0648\u0645\u0646\u0633\u0642\u0629\u060c \u064a\u0633\u062a\u0637\u064a\u0639 \u0623\u064a \u0645\u0628\u062a\u062f\u0626 \u0623\u0646 \u064a\u0635\u0645\u0645 \u0635\u0641\u062d\u0629 \u0648\u064a\u0628 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0648\u0645\u0645\u064a\u0632\u0629.\n\u062a\u0643\u0631\u0627\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0639\u0645\u0644\u064a\u060c \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0648\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u0643\u0648\u062f\u060c \u0645\u0646 \u0623\u0641\u0636\u0644 \u0627\u0644\u0637\u0631\u0642 \u0644\u062a\u0639\u0632\u064a\u0632 \u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u062a\u0635\u0645\u064a\u0645. \u0628\u0627\u0644\u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0648\u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0629\u060c \u064a\u0635\u0628\u062d \u0628\u0625\u0645\u0643\u0627\u0646 \u0627\u0644\u0645\u0635\u0645\u0645 \u0627\u0644\u0645\u0628\u062a\u062f\u0626 \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0625\u0644\u0649 \u062a\u0642\u0646\u064a\u0627\u062a \u0623\u0643\u062b\u0631 \u062a\u0642\u062f\u0645\u064b\u0627 \u0645\u062b\u0644 JavaScript\u060c \u0625\u0637\u0627\u0631 \u0627\u0644\u0639\u0645\u0644 (Frameworks)\u060c \u0648\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629.\n\n\u0645\u0635\u0627\u062f\u0631 \u0648\u0645\u0631\u0627\u062c\u0639\n\n\n\u0643\u062a\u0627\u0628 \"HTML and CSS: Design and Build Websites\" \u0644\u0640 Jon Duckett.\n\n\n\u0645\u0648\u0642\u0639 MDN Web Docs \u0627\u0644\u062a\u0627\u0628\u0639 \u0644\u0640 Mozilla: https:\/\/developer.mozilla.org\/ar\/docs\/Web\n\n\n\n\u0627\u0644\u0645\u0642\u0627\u0644 \u0627\u0644\u0633\u0627\u0628\u0642 \u064a\u0642\u062f\u0645 \u0634\u0631\u062d\u064b\u0627 \u0645\u0641\u0635\u0644\u064b\u0627 \u0648\u0634\u0627\u0645\u0644\u0627\u064b \u0644\u0645\u0641\u0647\u0648\u0645 \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646\u060c \u0645\u0628\u0646\u064a \u0639\u0644\u0649 \u0642\u0648\u0627\u0639\u062f \u0639\u0644\u0645\u064a\u0629 \u0645\u0639\u0627\u0635\u0631\u0629 \u062a\u062a\u0645\u0627\u0634\u0649 \u0645\u0639 \u0645\u0639\u0627\u064a\u064a\u0631 \u0635\u0646\u0627\u0639\u0629 \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062d\u062f\u064a\u062b\u0629.","publisher":{"@id":"#Publisher","@type":"Organization","name":"\u0645\u0648\u0627\u0636\u064a\u0639","logo":{"@type":"ImageObject","url":"https:\/\/mwade3.com\/wp-content\/uploads\/2023\/09\/logo-Black.png"},"sameAs":["https:\/\/www.facebook.com\/mwadee33","https:\/\/www.pinterest.com\/Mwade3com\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/mwade3.com\/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Mwade3","url":"https:\/\/mwade3.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/mwade3.com\/wp-content\/uploads\/logo.png","width":1200,"height":718}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="فيسبوك" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فيسبوك</span> </a> <a href="https://twitter.com/intent/tweet?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&title=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="لينكدإن" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لينكدإن</span> </a> <a href="https://www.tumblr.com/share/link?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&name=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&description=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&media=" rel="external noopener nofollow" title="بينتيريست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">بينتيريست</span> </a> <a href="https://reddit.com/submit?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&title=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://vk.com/share.php?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://api.whatsapp.com/send?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="واتساب" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">واتساب</span> </a> <a href="https://telegram.me/share/url?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="تيلقرام" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">تيلقرام</span> </a> <a href="viber://forward?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ڤايبر" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">ڤايبر</span> </a> <a href="https://line.me/R/msg/text/?%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="لاين" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">لاين</span> </a> <a href="mailto:?subject=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&body=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="المشاركة عبر البريد الألكتروني" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">المشاركة عبر البريد الألكتروني</span> </a> <a href="#" rel="external noopener nofollow" title="طباعة" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">طباعة</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div id="read-next-block" class="container-wrapper read-next-slider-50"> <h2 class="read-next-block-title">اقرأ التالي</h2> <section id="tie-read-next" class="slider-area mag-box"> <div class="slider-area-inner"> <div id="tie-main-slider-50-read-next" class="tie-main-slider main-slider wide-slider-with-navfor-wrapper wide-slider-wrapper slider-vertical-navigation tie-slick-slider-wrapper" data-slider-id="50" data-autoplay="true" data-speed="3000"> <div class="main-slider-inner"> <div class="container slider-main-container"> <div class="tie-slick-slider"> <ul class="tie-slider-nav"></ul> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3017387 tie-slide-1 tie-standard"> <a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-2/" class="all-over-thumb-link" aria-label="تعلم الآلة: المفاهيم والتطبيقات"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa-2/">تعلم الآلة: المفاهيم والتطبيقات</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3013217 tie-slide-2 tie-standard"> <a href="https://mwade3.com/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9-%d8%a7%d9%84%d9%83%d8%a7%d8%a6%d9%86%d9%8a%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7/" class="all-over-thumb-link" aria-label="البرمجة الكائنية: المفاهيم والتطبيقات"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9-%d8%a7%d9%84%d9%83%d8%a7%d8%a6%d9%86%d9%8a%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7/">البرمجة الكائنية: المفاهيم والتطبيقات</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3018237 tie-slide-3 tie-standard"> <a href="https://mwade3.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%b9%d9%84%d9%88%d9%85-%d8%a7%d9%84%d8%ad%d8%a7%d8%b3%d9%88%d8%a8-%d8%a7%d9%84%d8%ad%d8%af%d9%8a%d8%ab%d8%a9/" class="all-over-thumb-link" aria-label="أساسيات علوم الحاسوب الحديثة"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a7%d8%aa-%d8%b9%d9%84%d9%88%d9%85-%d8%a7%d9%84%d8%ad%d8%a7%d8%b3%d9%88%d8%a8-%d8%a7%d9%84%d8%ad%d8%af%d9%8a%d8%ab%d8%a9/">أساسيات علوم الحاسوب الحديثة</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3011931 tie-slide-4 tie-standard"> <a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/" class="all-over-thumb-link" aria-label="تعلم الآلة: المفاهيم والتطبيقات"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%aa%d8%b9%d9%84%d9%85-%d8%a7%d9%84%d8%a2%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%81%d8%a7%d9%87%d9%8a%d9%85-%d9%88%d8%a7%d9%84%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تعلم الآلة: المفاهيم والتطبيقات</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3017731 tie-slide-5 tie-standard"> <a href="https://mwade3.com/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d8%b4%d8%a7%d8%a6%d8%b9%d8%a9-%d9%81%d9%8a-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/" class="all-over-thumb-link" aria-label="أخطاء شائعة في بايثون"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d8%b4%d8%a7%d8%a6%d8%b9%d8%a9-%d9%81%d9%8a-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/">أخطاء شائعة في بايثون</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3023317 tie-slide-6 tie-standard"> <a href="https://mwade3.com/php-%d9%88node-js-%d9%85%d9%82%d8%a7%d8%b1%d9%86%d8%a9-%d8%b4%d8%a7%d9%85%d9%84%d8%a9/" class="all-over-thumb-link" aria-label="PHP وNode.js: مقارنة شاملة"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/php-%d9%88node-js-%d9%85%d9%82%d8%a7%d8%b1%d9%86%d8%a9-%d8%b4%d8%a7%d9%85%d9%84%d8%a9/">PHP وNode.js: مقارنة شاملة</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3110613 tie-slide-1 tie-standard"> <a href="https://mwade3.com/%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d8%ab%d9%86%d8%a7%d8%a1%d8%a7%d8%aa-%d9%81%d9%8a-%d8%af%d9%88%d8%aa-%d9%86%d8%aa/" class="all-over-thumb-link" aria-label="الاستثناءات في دوت نت"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d8%a7%d9%84%d8%a7%d8%b3%d8%aa%d8%ab%d9%86%d8%a7%d8%a1%d8%a7%d8%aa-%d9%81%d9%8a-%d8%af%d9%88%d8%aa-%d9%86%d8%aa/">الاستثناءات في دوت نت</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3015889 tie-slide-2 tie-standard"> <a href="https://mwade3.com/git-%d9%88%d8%a3%d9%87%d9%85%d9%8a%d8%aa%d9%87-%d9%81%d9%8a-%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/" class="all-over-thumb-link" aria-label="Git وأهميته في مشاريع بايثون"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/git-%d9%88%d8%a3%d9%87%d9%85%d9%8a%d8%aa%d9%87-%d9%81%d9%8a-%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-%d8%a8%d8%a7%d9%8a%d8%ab%d9%88%d9%86/">Git وأهميته في مشاريع بايثون</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3020329 tie-slide-3 tie-standard"> <a href="https://mwade3.com/%d9%85%d8%b9%d8%a7%d9%84%d8%ac%d8%a9-%d8%a7%d9%84%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-go/" class="all-over-thumb-link" aria-label="معالجة الأخطاء في لغة Go"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/%d9%85%d8%b9%d8%a7%d9%84%d8%ac%d8%a9-%d8%a7%d9%84%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-go/">معالجة الأخطاء في لغة Go</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> <div style="background-image: url(https://mwade3.com/wp-content/uploads/logo.png)" class="slide slide-id-3015129 tie-slide-4 tie-standard"> <a href="https://mwade3.com/laravel-%d8%a3%d9%82%d9%88%d9%89-%d8%a5%d8%b7%d8%a7%d8%b1-php-%d8%ad%d8%af%d9%8a%d8%ab/" class="all-over-thumb-link" aria-label="Laravel: أقوى إطار PHP حديث"></a> <div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717739" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a></span><div class="thumb-content"> <h2 class="thumb-title"><a href="https://mwade3.com/laravel-%d8%a3%d9%82%d9%88%d9%89-%d8%a5%d8%b7%d8%a7%d8%b1-php-%d8%ad%d8%af%d9%8a%d8%ab/">Laravel: أقوى إطار PHP حديث</a></h2> </div> <!-- .thumb-content /--></div><!-- .container --> </div><!-- .thumb-overlay /--> </div><!-- .slide || .grid-item /--> </div><!-- .tie-slick-slider /--> </div><!-- .slider-main-container /--> </div><!-- .main-slider-inner /--> </div><!-- .main-slider /--> <div class="wide-slider-nav-wrapper vertical-slider-nav "> <ul class="tie-slider-nav"></ul> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="tie-slick-slider"> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">تعلم الآلة: المفاهيم والتطبيقات</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">البرمجة الكائنية: المفاهيم والتطبيقات</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">أساسيات علوم الحاسوب الحديثة</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">تعلم الآلة: المفاهيم والتطبيقات</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-3"> <div class="slide-overlay"> <h3 class="thumb-title">أخطاء شائعة في بايثون</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-4"> <div class="slide-overlay"> <h3 class="thumb-title">PHP وNode.js: مقارنة شاملة</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-5"> <div class="slide-overlay"> <h3 class="thumb-title">الاستثناءات في دوت نت</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-6"> <div class="slide-overlay"> <h3 class="thumb-title">Git وأهميته في مشاريع بايثون</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-1"> <div class="slide-overlay"> <h3 class="thumb-title">معالجة الأخطاء في لغة Go</h3> </div> </div><!-- slide /--> <div class="slide tie-slide-2"> <div class="slide-overlay"> <h3 class="thumb-title">Laravel: أقوى إطار PHP حديث</h3> </div> </div><!-- slide /--> </div><!-- .wide_slider_nav /--> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #wide-slider-nav-wrapper /--> </div><!-- .slider-area-inner --> </section><!-- .slider-area --> </div><!-- #read-next-block --> <div class="prev-next-post-nav container-wrapper media-overlay"> <div class="tie-col-xs-6 prev-post"> <a href="https://mwade3.com/%d9%81%d9%88%d8%a7%d8%a6%d8%af-%d8%a7%d9%84%d9%82%d9%87%d9%88%d8%a9-%d8%a7%d9%84%d8%b5%d8%a8%d8%a7%d8%ad%d9%8a%d8%a9-%d8%a7%d9%84%d8%b5%d8%ad%d9%8a%d8%a9/" style="background-image: url(https://mwade3.com/wp-content/uploads/logo-390x220.png)" class="post-thumb" rel="prev"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> <span class="screen-reader-text">فوائد القهوة الصباحية الصحية</span> </div> </div> </a> <a href="https://mwade3.com/%d9%81%d9%88%d8%a7%d8%a6%d8%af-%d8%a7%d9%84%d9%82%d9%87%d9%88%d8%a9-%d8%a7%d9%84%d8%b5%d8%a8%d8%a7%d8%ad%d9%8a%d8%a9-%d8%a7%d9%84%d8%b5%d8%ad%d9%8a%d8%a9/" rel="prev"> <h3 class="post-title">فوائد القهوة الصباحية الصحية</h3> </a> </div> <div class="tie-col-xs-6 next-post"> <a href="https://mwade3.com/%d8%a3%d8%ba%d9%84%d9%81%d8%a9-%d8%a7%d9%84%d8%a3%d8%b1%d8%b6-%d9%88%d9%88%d8%b8%d8%a7%d8%a6%d9%81%d9%87%d8%a7-%d8%a7%d9%84%d8%ad%d9%8a%d9%88%d9%8a%d8%a9/" style="background-image: url(https://mwade3.com/wp-content/uploads/logo-390x220.png)" class="post-thumb" rel="next"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> <span class="screen-reader-text">أغلفة الأرض ووظائفها الحيوية</span> </div> </div> </a> <a href="https://mwade3.com/%d8%a3%d8%ba%d9%84%d9%81%d8%a9-%d8%a7%d9%84%d8%a3%d8%b1%d8%b6-%d9%88%d9%88%d8%b8%d8%a7%d8%a6%d9%81%d9%87%d8%a7-%d8%a7%d9%84%d8%ad%d9%8a%d9%88%d9%8a%d8%a9/" rel="next"> <h3 class="post-title">أغلفة الأرض ووظائفها الحيوية</h3> </a> </div> </div><!-- .prev-next-post-nav /--> <div id="related-posts" class="container-wrapper"> <div class="mag-box-title the-global-title"> <h3>مواضيع ذات صلة</h3> </div> <div class="related-posts-list"> <div class="related-item tie-standard"> <a aria-label="تهجير قواعد البيانات في Laravel" href="https://mwade3.com/%d8%aa%d9%87%d8%ac%d9%8a%d8%b1-%d9%82%d9%88%d8%a7%d8%b9%d8%af-%d8%a7%d9%84%d8%a8%d9%8a%d8%a7%d9%86%d8%a7%d8%aa-%d9%81%d9%8a-laravel-2/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" fetchpriority="high" /></a> <h3 class="post-title"><a href="https://mwade3.com/%d8%aa%d9%87%d8%ac%d9%8a%d8%b1-%d9%82%d9%88%d8%a7%d8%b9%d8%af-%d8%a7%d9%84%d8%a8%d9%8a%d8%a7%d9%86%d8%a7%d8%aa-%d9%81%d9%8a-laravel-2/">تهجير قواعد البيانات في Laravel</a></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="إنشاء مدونة باستخدام Node.js" 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/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><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></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="تحويل HTML إلى قالب ووردبريس" 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/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><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></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> <div class="related-item tie-standard"> <a aria-label="تنظيم الشيفرة في JavaScript" 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/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="390" height="220" src="https://mwade3.com/wp-content/uploads/logo-390x220.png" class="attachment-jannah-image-large size-jannah-image-large" alt="" decoding="async" /></a> <h3 class="post-title"><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></h3> <div class="post-meta clearfix"></div><!-- .post-meta --> </div><!-- .related-item /--> </div><!-- .related-posts-list /--> </div><!-- #related-posts /--> </div><!-- .post-components /--> </div><!-- .main-content --> <div id="check-also-box" class="container-wrapper check-also-right"> <div class="widget-title the-global-title"> <div class="the-subtitle">نظر أيضا</div> <a href="#" id="check-also-close" class="remove"> <span class="screen-reader-text">إغلاق</span> </a> </div> <div class="widget"> <ul class="posts-list-items"> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="حقن التبعية في دوت نت" href="https://mwade3.com/%d8%ad%d9%82%d9%86-%d8%a7%d9%84%d8%aa%d8%a8%d8%b9%d9%8a%d8%a9-%d9%81%d9%8a-%d8%af%d9%88%d8%aa-%d9%86%d8%aa/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://mwade3.com/wp-content/uploads/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image" alt="" decoding="async" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://mwade3.com/%d8%ad%d9%82%d9%86-%d8%a7%d9%84%d8%aa%d8%a8%d8%b9%d9%8a%d8%a9-%d9%81%d9%8a-%d8%af%d9%88%d8%aa-%d9%86%d8%aa/">حقن التبعية في دوت نت</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="معالجة UTF-8 في PHP" href="https://mwade3.com/%d9%85%d8%b9%d8%a7%d9%84%d8%ac%d8%a9-utf-8-%d9%81%d9%8a-php/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://mwade3.com/wp-content/uploads/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image" alt="" decoding="async" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://mwade3.com/%d9%85%d8%b9%d8%a7%d9%84%d8%ac%d8%a9-utf-8-%d9%81%d9%8a-php/">معالجة UTF-8 في PHP</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="فهم حالة المكون في React" href="https://mwade3.com/%d9%81%d9%87%d9%85-%d8%ad%d8%a7%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%83%d9%88%d9%86-%d9%81%d9%8a-react/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://mwade3.com/wp-content/uploads/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image" alt="" decoding="async" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://mwade3.com/%d9%81%d9%87%d9%85-%d8%ad%d8%a7%d9%84%d8%a9-%d8%a7%d9%84%d9%85%d9%83%d9%88%d9%86-%d9%81%d9%8a-react/">فهم حالة المكون في React</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="تخصيص ونشر مشاريع Rust" href="https://mwade3.com/%d8%aa%d8%ae%d8%b5%d9%8a%d8%b5-%d9%88%d9%86%d8%b4%d8%b1-%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-rust/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://mwade3.com/wp-content/uploads/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image" alt="" decoding="async" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://mwade3.com/%d8%aa%d8%ae%d8%b5%d9%8a%d8%b5-%d9%88%d9%86%d8%b4%d8%b1-%d9%85%d8%b4%d8%a7%d8%b1%d9%8a%d8%b9-rust/">تخصيص ونشر مشاريع Rust</a> <div class="post-meta"> </div> </div> </li> <li class="widget-single-post-item widget-post-list tie-standard"> <div class="post-widget-thumbnail"> <a aria-label="فهم ردود النداء في جافاسكربت" href="https://mwade3.com/%d9%81%d9%87%d9%85-%d8%b1%d8%af%d9%88%d8%af-%d8%a7%d9%84%d9%86%d8%af%d8%a7%d8%a1-%d9%81%d9%8a-%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/" class="post-thumb"> <div class="post-thumb-overlay-wrap"> <div class="post-thumb-overlay"> <span class="tie-icon tie-media-icon"></span> </div> </div> <img width="220" height="150" src="https://mwade3.com/wp-content/uploads/logo-220x150.png" class="attachment-jannah-image-small size-jannah-image-small tie-small-image" alt="" decoding="async" /></a> </div><!-- post-alignleft /--> <div class="post-widget-body "> <a class="post-title the-subtitle" href="https://mwade3.com/%d9%81%d9%87%d9%85-%d8%b1%d8%af%d9%88%d8%af-%d8%a7%d9%84%d9%86%d8%af%d8%a7%d8%a1-%d9%81%d9%8a-%d8%ac%d8%a7%d9%81%d8%a7%d8%b3%d9%83%d8%b1%d8%a8%d8%aa/">فهم ردود النداء في جافاسكربت</a> <div class="post-meta"> </div> </div> </li> </ul><!-- .related-posts-list /--> </div> </div><!-- #related-posts /--> </div><!-- .main-content-row /--></div><!-- #content /--> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Copyright 2025, جميع الحقوق محفوظة لمنصة مواضيع | <span style="color:red;" class="tie-icon-heart"></span> <a href="https://mwade3.com/about-us/">من نحن</a> | <a href="https://mwade3.com/privacy-policy/">إتفاقية الخصوصية</a> | <a href="https://mwade3.com/terms/">الشروط والأحكام</a> | <a href="https://mwade3.com/report/">الإبلاغ عن مشكلة</a> | <a href="https://mwade3.com/contact-us/">اتصل بنا</a> | <a href="https://mwade3.com/faq/">الأسئلة الشائعة</a> | <a href="https://mwade3.com/disclaimer/">إخلاء المسؤولية</a> </footer> </div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/mwadee33"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">فيسبوك</span></a></li><li class="social-icons-item"><a class="social-link pinterest-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.pinterest.com/Mwade3com/"><span class="tie-social-icon tie-icon-pinterest"></span><span class="screen-reader-text">بينتيريست</span></a></li></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="فيسبوك" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فيسبوك</span> </a> <a href="https://twitter.com/intent/tweet?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&title=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="لينكدإن" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لينكدإن</span> </a> <a href="https://www.tumblr.com/share/link?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&name=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&description=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8&media=" rel="external noopener nofollow" title="بينتيريست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">بينتيريست</span> </a> <a href="https://reddit.com/submit?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&title=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ماسنجر" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">ماسنجر</span> </a> <a href="https://api.whatsapp.com/send?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="واتساب" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">واتساب</span> </a> <a href="https://telegram.me/share/url?url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/&text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8" rel="external noopener nofollow" title="تيلقرام" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">تيلقرام</span> </a> <a href="viber://forward?text=%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="ڤايبر" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">ڤايبر</span> </a> <a href="https://line.me/R/msg/text/?%D8%AF%D9%84%D9%8A%D9%84%20%D8%AA%D8%B5%D9%85%D9%8A%D9%85%20%D8%A3%D9%88%D9%84%20%D8%B5%D9%81%D8%AD%D8%A9%20%D9%88%D9%8A%D8%A8%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d8%a3%d9%88%d9%84-%d8%b5%d9%81%d8%ad%d8%a9-%d9%88%d9%8a%d8%a8/" rel="external noopener nofollow" title="لاين" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">لاين</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area slide-sidebar-desktop is-fullwidth appear-from-right" aria-label="القائمة الجانبية الثانوية" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">إغلاق</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://mwade3.com/"> <label> <span class="screen-reader-text">البحث عن:</span> <input type="search" class="search-field" placeholder="بحث …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="بحث" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/mwadee33"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">فيسبوك</span></a></li><li class="social-icons-item"><a class="social-link pinterest-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.pinterest.com/Mwade3com/"><span class="tie-social-icon tie-icon-pinterest"></span><span class="screen-reader-text">بينتيريست</span></a></li></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> <div id="slide-sidebar-widgets"> </div> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <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\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="تفضيلات الموافقة" style="background-color:#F1C40F"> <button class="cky-btn-revisit" aria-label="تفضيلات الموافقة"> <img src="https://mwade3.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#121212;border-color:#2a2a2a"> <button class="cky-banner-btn-close" data-cky-tag="close-button" aria-label="Close"> <img src="https://mwade3.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#F1C40F">منصة مواضيع تقدر مستوى الخصوصية لديك</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#F1C40F"> <p>نحن نستخدم ملفات تعريف الارتباط لتحسين تجربة التصفح الخاصة بك، وتقديم إعلانات أو محتوى مخصص، وتحليل حركة المرور لدينا. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="تخصيص" data-cky-tag="settings-button" style="color:#000000;background-color:#F1C40F;border-color:#90750A">تخصيص</button> <button class="cky-btn cky-btn-reject" aria-label="رفض الكل" data-cky-tag="reject-button" style="color:#0C0000;background-color:#F1C40F;border-color:#5C4B06">رفض الكل</button> <button class="cky-btn cky-btn-accept" aria-label="الموافقة على الكل" data-cky-tag="accept-button" style="color:#000000;background-color:#F1C40F;border-color:#AF8D04">الموافقة على الكل</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#F1C40F;background-color:#121212;border-color:#2A2A2A"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#F1C40F">Customize Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://mwade3.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#F1C40F"> <p>نحن نستخدم ملفات تعريف الارتباط لمساعدتك على التنقل بكفاءة وأداء وظائف معينة. ستجد معلومات تفصيلية حول جميع ملفات تعريف الارتباط ضمن كل فئة موافقة أدناه.</p> <p>يتم تخزين ملفات تعريف الارتباط المصنفة على أنها "ضرورية" على متصفحك لأنها ضرورية لتمكين الوظائف الأساسية للموقع.</p> <p>نستخدم أيضًا ملفات تعريف الارتباط التابعة لجهات خارجية والتي تساعدنا في تحليل كيفية استخدامك لهذا الموقع وتخزين تفضيلاتك وتوفير المحتوى والإعلانات ذات الصلة بك. لن يتم تخزين ملفات تعريف الارتباط هذه في متصفحك إلا بموافقتك المسبقة.</p> <p>يمكنك اختيار تمكين أو تعطيل بعض أو كل ملفات تعريف الارتباط هذه ولكن تعطيل بعضها قد يؤثر على تجربة التصفح لديك.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#F1C40F">Necessary</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#F1C40F">Functional</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#F1C40F">Analytics</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#F1C40F">Performance</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#F1C40F">Advertisement</button><span class="cky-always-active">دائما مفعل</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#F1C40F"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#d0d0d0;background-color:#2a2a2a;border-color:#474444"><p class="cky-empty-cookies-text">لا يوجد ملفات تعريف الأرتباط لعرضها .</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="رفض الكل" data-cky-tag="detail-reject-button" style="color:#0C0000;background-color:#F1C40F;border-color:#5C4B06"> رفض الكل </button> <button class="cky-btn cky-btn-preferences" aria-label="حفظ تفضيلاتي" data-cky-tag="detail-save-button" style="color:#000000;background-color:#F1C40F;border-color:#A58609"> حفظ تفضيلاتي </button> <button class="cky-btn cky-btn-accept" aria-label="الموافقة على الكل" data-cky-tag="detail-accept-button" style="color:#000000;background-color:#F1C40F;border-color:#AF8D04"> الموافقة على الكل </button> </div></div></div></div></script><div id="reading-position-indicator"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">إغلاق</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="بحث"> <form method="get" class="tie-popup-search-form" action="https://mwade3.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="البحث عن" autocomplete="off" placeholder="البحث عن" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">البحث عن</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="text/javascript" src="https://mwade3.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'rtl' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.4" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/mwade3.com\/wp-json\/", "namespace": "contact-form-7\/v1" }, "cached": 1 }; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.4" id="contact-form-7-js"></script> <script type="text/javascript" id="ez-toc-scroll-scriptjs-js-extra"> /* <![CDATA[ */ var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":"","add_self_reference_link":""}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.78" id="ez-toc-scroll-scriptjs-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.78-1764573461" id="ez-toc-js-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-consent-mode-bc2e26cfa69fcd4a8261.js" id="googlesitekit-consent-mode-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"1","ajaxurl":"https:\/\/mwade3.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_2","mobile_menu_parent":"true","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"true","lazyload":"","select_share":"true","select_share_twitter":"true","select_share_facebook":"true","select_share_linkedin":"true","select_share_email":"true","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"default","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\">\n\t\t\t\t<div class=\"spinner\">\n\t\t\t\t\t<div class=\"bounce1\"><\/div>\n\t\t\t\t\t<div class=\"bounce2\"><\/div>\n\t\t\t\t\t<div class=\"bounce3\"> <\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>","type_to_search":"","lang_no_results":"\u0644\u0627 \u064a\u0648\u062c\u062f \u0634\u064a\u0621","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.2.0" id="tie-scripts-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.2.0" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.2.0" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.2.0" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.2.0" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.2.0" id="tie-js-single-js"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/js/mailcheck.min.js?ver=2.3.3" id="mailcheck-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/js/jquery.email-autocomplete.min.js?ver=2.3.3" id="autocomplete-email-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="mystickyelements-fronted-js-js-extra"> /* <![CDATA[ */ var mystickyelements = {"ajaxurl":"https:\/\/mwade3.com\/wp-admin\/admin-ajax.php","ajax_nonce":"c06f7b1119"}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/js/mystickyelements-fronted.min.js?ver=2.3.3" id="mystickyelements-fronted-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="intl-tel-input-js-js-extra"> /* <![CDATA[ */ var mystickyelement_obj = {"plugin_url":"https:\/\/mwade3.com\/wp-content\/plugins\/mystickyelements\/"}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/mystickyelements/intl-tel-input-src/build/js/intlTelInput.js?ver=2.3.3" id="intl-tel-input-js-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" id="wp-consent-api-js-extra"> /* <![CDATA[ */ var consent_api = {"consent_type":"","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent","services":[]}; /* ]]> */ </script> <script type="text/javascript" src="https://mwade3.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=2.0.0" id="wp-consent-api-js"></script> <div class="mystickyelements-fixed mystickyelements-position-left mystickyelements-position-screen-center mystickyelements-position-mobile-left mystickyelements-on-hover mystickyelements-size-medium mystickyelements-mobile-size-medium mystickyelements-entry-effect-slide-in mystickyelements-templates-default"> <div class="mystickyelement-lists-wrap"> <ul class="mystickyelements-lists mysticky"> <li class="mystickyelements-minimize "> <span class="mystickyelements-minimize minimize-position-left minimize-position-mobile-left" style="background: #000000" > ← </span> </li> <li id="mystickyelements-social-facebook" class="mystickyelements-social-icon-li mystickyelements- mystickyelements-social-facebook element-desktop-on element-mobile-on"> <style> </style> <span class="mystickyelements-social-icon social-facebook social-custom" data-tab-setting = 'hover' data-click = "0"data-mobile-behavior="disable" data-flyout="disable" style="background: #4267B2" > <a class="social-link-facebook" href="https://www.facebook.com/mwadee33/" target="_blank" rel="noopener nofollow" data-url="https://www.facebook.com/mwadee33/" data-tab-setting = 'hover' data-mobile-behavior="disable" data-flyout="disable" title="Facebook"> <i class="fab fa-facebook-f" ></i> </a> </span> <span class="mystickyelements-social-text " style= "background: #4267B2;" > <a class="social-link-facebook" href="https://www.facebook.com/mwadee33/" target="_blank" rel="noopener nofollow" data-tab-setting = 'hover' data-flyout="disable" title="Facebook" data-url="https://www.facebook.com/mwadee33/" > Facebook </a> </span> </li> </ul> </div> </div> <script type="text/javascript"> jQuery.ajax({ type : "GET", url : "https://mwade3.com/wp-admin/admin-ajax.php", data : "postviews_id=3146901&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); </script> </body> </html> <!-- Cached by WP-Optimize - https://teamupdraft.com/wp-optimize/ - Last modified: 02/12/2025 01:36 (UTC:3) -->