دليل HTML و CSS الشامل

جدول المحتوى
HTML/CSS 101: مقدمة شاملة لأساسيات تصميم صفحات الويب

مقدمة

في عصر التقنية الحديثة، أصبح تصميم وتطوير المواقع الإلكترونية من المهارات الأساسية التي يحتاجها الأفراد والشركات على حد سواء. تعتبر HTML (لغة ترميز النصوص التشعبية) و CSS (أوراق الأنماط المتتالية) من الأدوات الأساسية في هذا المجال. يتيح لك تعلم هذه التقنيات إنشاء مواقع ويب تفاعلية وجذابة. سنتناول في هذا المقال مقدمة شاملة عن HTML و CSS، من خلال شرح المفاهيم الأساسية لكلا اللغتين وأهمية كل منهما في تصميم صفحات الويب.
ما هي HTML؟

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

تتكون صفحة HTML من مجموعة من العناصر (Tags) التي تحدد شكل ومحتوى الصفحة. يحتوي كل عنصر على محتوى يمكن أن يكون نصاً أو صورة أو رابطاً أو حتى مقطع فيديو. بناء صفحة HTML الأساسية يبدأ بعناصر أساسية، مثل:
: العنصر الجذري الذي يحتوي على كامل المحتوى.
: يحتوي على معلومات غير مرئية للمستخدم، مثل العنوان (Title) والروابط الخاصة بأوراق الأنماط (CSS) أو السكربتات (JavaScript).
: يحتوي على المحتوى الفعلي الذي يظهر للمستخدم مثل النصوص، الصور، والجداول.
2. عناصر HTML الأساسية

العناوين (Headings): يتم تحديد العناوين باستخدام عناصر من
إلى
. يمثل
العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.
الفقرات (Paragraphs): تُستخدم العنصر
لإنشاء فقرات نصية داخل الصفحة.
الروابط (Links): يتم إنشاء الروابط باستخدام العنصر ، حيث يتم تحديد الرابط باستخدام سمة href.
الصور (Images): يتم تضمين الصور داخل الصفحة باستخدام العنصر مع تحديد مصدر الصورة باستخدام سمة src.
القوائم (Lists): تُستخدم القوائم غير المرتبة (Unordered lists) باستخدام العنصر
لتمثيل كل عنصر في القائمة.
3. تنظيم الصفحة باستخدام العناصر

الجداول (Tables): يتم استخدام العنصر

 لإنشاء الجداول. يتكون الجدول من صفوف (
) وأعمدة (
).


النماذج (Forms): تُستخدم النماذج لجمع البيانات من المستخدمين. يتم تعريف النماذج باستخدام العنصر 

، وتحتوي على عناصر مثل , </code>, و <code data-start="2254" data-end="2264"><button></code>.</p>
</li>
</ul>
<h4 data-start="2267" data-end="2282" class=""><span class="ez-toc-section" id="%D9%85%D8%A7_%D9%87%D9%8A_CSS%D8%9F"></span>ما هي CSS؟<span class="ez-toc-section-end"></span></h4>
<p data-start="2284" data-end="2544" class=""><strong data-start="2284" data-end="2291">CSS</strong> هي اختصار لـ “Cascading Style Sheets” (أوراق الأنماط المتتالية)، وهي لغة تُستخدم لتنسيق وتصميم شكل المحتوى المقدم عبر HTML. تسمح <strong data-start="2421" data-end="2428">CSS</strong> للمطورين بتحديد كيفية ظهور العناصر على الصفحة من حيث الألوان، الخطوط، التباعد، الترتيب، وغيرها من التفاصيل المرئية.</p>
<h5 data-start="2546" data-end="2563" class=""><span class="ez-toc-section" id="1_%D8%A8%D9%86%D9%8A%D8%A9_CSS"></span>1. بنية CSS<span class="ez-toc-section-end"></span></h5>
<p data-start="2565" data-end="2603" class="">تتكون قاعدة CSS من ثلاثة أجزاء رئيسية:</p>
<ul data-start="2604" data-end="2916">
<li data-start="2604" data-end="2708" class="" style="">
<p data-start="2606" data-end="2708" class=""><strong data-start="2606" data-end="2627">المحدد (Selector)</strong>: هو العنصر الذي تريد تطبيق الأنماط عليه، مثل <code data-start="2673" data-end="2676">p</code> أو <code data-start="2680" data-end="2693">.class-name</code> أو <code data-start="2697" data-end="2707">#id-name</code>.</p>
</li>
<li data-start="2709" data-end="2815" class="" style="">
<p data-start="2711" data-end="2815" class=""><strong data-start="2711" data-end="2732">القيمة (Property)</strong>: هو نوع التنسيق الذي ترغب في تطبيقه، مثل <code data-start="2774" data-end="2781">color</code>, <code data-start="2783" data-end="2794">font-size</code>, <code data-start="2796" data-end="2814">background-color</code>.</p>
</li>
<li data-start="2816" data-end="2916" class="" style="">
<p data-start="2818" data-end="2916" class=""><strong data-start="2818" data-end="2836">القيمة (Value)</strong>: هو القيمة التي سيتم تطبيقها على الخاصية المحددة، مثل <code data-start="2891" data-end="2896">red</code>, <code data-start="2898" data-end="2904">16px</code>, <code data-start="2906" data-end="2915">#ffffff</code>.</p>
</li>
</ul>
<p data-start="2918" data-end="2937" class="">مثال على قاعدة CSS:</p>
<pre class="overflow-visible!" data-start="2938" data-end="2987"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">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 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-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>
<h5 data-start="2989" data-end="3020" class=""><span class="ez-toc-section" id="2_%D8%B7%D8%B1%D9%82_%D8%A5%D8%B6%D8%A7%D9%81%D8%A9_CSS_%D8%A5%D9%84%D9%89_HTML"></span>2. طرق إضافة CSS إلى HTML<span class="ez-toc-section-end"></span></h5>
<p data-start="3022" data-end="3063" class="">هناك ثلاث طرق رئيسية لإضافة CSS إلى HTML:</p>
<ul data-start="3064" data-end="3394">
<li data-start="3064" data-end="3184" class="" style="">
<p data-start="3066" data-end="3184" class=""><strong data-start="3066" data-end="3104">الأنماط الداخلية (Internal Styles)</strong>: يتم إدخال أكواد CSS داخل ملف HTML باستخدام العنصر <code data-start="3156" data-end="3165"></p>
<style></code> في القسم <code data-start="3175" data-end="3183"><head></code>.</p>
</li>
<li data-start="3185" data-end="3292" class="" style="">
<p data-start="3187" data-end="3292" class=""><strong data-start="3187" data-end="3225">الأنماط الخارجية (External Styles)</strong>: يتم ربط ملف CSS خارجي باستخدام العنصر <code data-start="3265" data-end="3273"><link></code> في القسم <code data-start="3283" data-end="3291"><head></code>.</p>
</li>
<li data-start="3293" data-end="3394" class="" style="">
<p data-start="3295" data-end="3394" class=""><strong data-start="3295" data-end="3330">الأنماط المدمجة (Inline Styles)</strong>: يتم إدخال أكواد CSS مباشرة داخل العنصر باستخدام السمة <code data-start="3386" data-end="3393">style</code>.</p>
</li>
</ul>
<h5 data-start="3396" data-end="3421" class=""><span class="ez-toc-section" id="3_%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA_%D9%81%D9%8A_CSS"></span>3. الأساسيات في CSS<span class="ez-toc-section-end"></span></h5>
<ul data-start="3423" data-end="4048">
<li data-start="3423" data-end="3527" class="" style="">
<p data-start="3425" data-end="3527" class=""><strong data-start="3425" data-end="3445">الألوان (Colors)</strong>: يمكنك تحديد الألوان باستخدام أسماء الألوان (مثل "red") أو قيم RGB أو HEX أو HSL.</p>
</li>
<li data-start="3531" data-end="3641" class="" style="">
<p data-start="3533" data-end="3641" class=""><strong data-start="3533" data-end="3551">الخطوط (Fonts)</strong>: يمكنك تغيير الخطوط باستخدام خاصية <code data-start="3587" data-end="3600">font-family</code>، ويمكن تحديد الحجم باستخدام <code data-start="3629" data-end="3640">font-size</code>.</p>
</li>
<li data-start="3645" data-end="3799" class="" style="">
<p data-start="3647" data-end="3799" class=""><strong data-start="3647" data-end="3687">الهوامش (Margins) والتباعد (Padding)</strong>: تُستخدم خاصية <code data-start="3703" data-end="3711">margin</code> لتحديد المسافات بين العناصر، بينما تُستخدم خاصية <code data-start="3761" data-end="3770">padding</code> لتحديد المسافات داخل العنصر.</p>
</li>
<li data-start="3803" data-end="3874" class="" style="">
<p data-start="3805" data-end="3874" class=""><strong data-start="3805" data-end="3825">الحدود (Borders)</strong>: تُستخدم خاصية <code data-start="3841" data-end="3849">border</code> لإضافة حدود حول العناصر.</p>
</li>
<li data-start="3876" data-end="4048" class="" style="">
<p data-start="3878" data-end="4048" class=""><strong data-start="3878" data-end="3922">التنقل والتموضع (Positioning and Layout)</strong>: توفر CSS مجموعة متنوعة من طرق التنسيق، مثل <strong data-start="3967" data-end="3978"><code data-start="3969" data-end="3976">float</code></strong> و <strong data-start="3981" data-end="3994"><code data-start="3983" data-end="3992">flexbox</code></strong> و <strong data-start="3997" data-end="4007"><code data-start="3999" data-end="4005">grid</code></strong>، لتحديد كيفية ترتيب العناصر داخل الصفحة.</p>
</li>
</ul>
<h5 data-start="4050" data-end="4094" class=""><span class="ez-toc-section" id="4_%D8%A7%D8%B3%D8%AA%D8%AC%D8%A7%D8%A8%D8%A9_%D8%A7%D9%84%D8%AA%D8%B5%D9%85%D9%8A%D9%85_Responsive_Design"></span>4. استجابة التصميم (Responsive Design)<span class="ez-toc-section-end"></span></h5>
<p data-start="4096" data-end="4360" class="">يتطلب تطوير مواقع ويب حديثة أن تكون متجاوبة، أي أنها تتكيف مع أحجام الشاشات المختلفة، سواء كانت شاشة سطح مكتب أو جهاز محمول. يمكن تحقيق ذلك باستخدام <strong data-start="4245" data-end="4280">وسائط الاستعلام (Media Queries)</strong>، التي تسمح بتطبيق أنماط CSS محددة بناءً على خصائص الجهاز مثل العرض أو الارتفاع.</p>
<pre class="overflow-visible!" data-start="4362" data-end="4459"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">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 rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-css"><span><span><span class="hljs-keyword">@media</span></span><span> screen </span><span><span class="hljs-keyword">and</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">body</span></span><span> {
    </span><span><span class="hljs-attribute">background-color</span></span><span>: lightblue;
  }
}
</span></span></code></div></div></pre>
<h4 data-start="4461" data-end="4488" class=""><span class="ez-toc-section" id="%D8%A7%D9%84%D8%B9%D9%84%D8%A7%D9%82%D8%A9_%D8%A8%D9%8A%D9%86_HTML_%D9%88_CSS"></span>العلاقة بين HTML و CSS<span class="ez-toc-section-end"></span></h4>
<p data-start="4490" data-end="4689" class=""><strong data-start="4490" data-end="4498">HTML</strong> و <strong data-start="4501" data-end="4508">CSS</strong> هما عماد تصميم وتطوير صفحات الويب. بينما تقوم HTML بتحديد هيكل المحتوى، تتيح <strong data-start="4586" data-end="4593">CSS</strong> للمطورين إضافة التصفية والتنسيق. معًا، يسهمان في جعل تجربة المستخدم أكثر جذابة وسهلة الاستخدام.</p>
<h4 data-start="4691" data-end="4732" class=""><span class="ez-toc-section" id="%D8%A3%D9%81%D8%B6%D9%84_%D8%A7%D9%84%D9%85%D9%85%D8%A7%D8%B1%D8%B3%D8%A7%D8%AA_%D9%81%D9%8A_%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></h4>
<ol data-start="4734" data-end="5311">
<li data-start="4734" data-end="4841" class="" style="">
<p data-start="4737" data-end="4841" class=""><strong data-start="4737" data-end="4761">التنظيم الجيد للشفرة</strong>: يجب أن تكون الشفرة منظمة وسهلة الفهم. استخدم المسافات والفواصل لتحديد الهياكل.</p>
</li>
<li data-start="4845" data-end="4976" class="" style="">
<p data-start="4848" data-end="4976" class=""><strong data-start="4848" data-end="4877">استخدام العناصر بشكل سليم</strong>: اختر العناصر الأنسب للمحتوى. على سبيل المثال، استخدم <code data-start="4932" data-end="4942"></p>
<header></code> للترويسات و <code data-start="4955" data-end="4965"></p>
<footer></code> للتذييلات.</p>
</li>
<li data-start="4980" data-end="5092" class="" style="">
<p data-start="4983" data-end="5092" class=""><strong data-start="4983" data-end="5017">الاستفادة من خصائص CSS الحديثة</strong>: مثل <strong data-start="5023" data-end="5034">flexbox</strong> و <strong data-start="5037" data-end="5045">grid</strong>، التي توفر طرقًا مرنة وفعالة لترتيب المحتويات.</p>
</li>
<li data-start="5094" data-end="5193" class="" style="">
<p data-start="5097" data-end="5193" class=""><strong data-start="5097" data-end="5132">التحقق من التوافق عبر المتصفحات</strong>: تأكد من أن موقعك يعمل بشكل صحيح في جميع المتصفحات والأجهزة.</p>
</li>
<li data-start="5195" data-end="5311" class="" style="">
<p data-start="5198" data-end="5311" class=""><strong data-start="5198" data-end="5230">تقليل الحجم الإجمالي للصفحات</strong>: حاول تقليل حجم ملفات HTML و CSS باستخدام الأدوات المناسبة مثل <strong data-start="5294" data-end="5310">minification</strong>.</p>
</li>
</ol>
<h4 data-start="5313" data-end="5325" class=""><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></h4>
<p data-start="5327" data-end="5627" class="">إن تعلم <strong data-start="5335" data-end="5343">HTML</strong> و <strong data-start="5346" data-end="5353">CSS</strong> يعد خطوة أساسية لكل من يرغب في دخول عالم تطوير وتصميم الويب. تمنحك هذه التقنيات القدرة على إنشاء صفحات ويب مميزة وسهلة الاستخدام، مما يسهم في تحسين تجربة المستخدم. ومع تطور هذه اللغات وظهور التقنيات الحديثة، من المهم مواكبة التغييرات والممارسات الجديدة لتحقيق أفضل النتائج.</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">اخر تحديث 21/05/2025</span><div class="tie-alignright"><span class="meta-views meta-item warm"><span class="tie-icon-fire" aria-hidden="true"></span> 23 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> تمت قراءة 3 دقيقة</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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&title=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&name=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&description=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&title=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&text=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&text=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&body=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-05-21T10:12:03+03:00","datePublished":"2025-05-21T10:12:03+03:00","dateModified":"2025-05-21T10:12:03+03:00","headline":"\u062f\u0644\u064a\u0644 HTML \u0648 CSS \u0627\u0644\u0634\u0627\u0645\u0644","name":"\u062f\u0644\u064a\u0644 HTML \u0648 CSS \u0627\u0644\u0634\u0627\u0645\u0644","keywords":[],"url":"https:\/\/mwade3.com\/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84\/","description":"HTML\/CSS 101: \u0645\u0642\u062f\u0645\u0629 \u0634\u0627\u0645\u0644\u0629 \u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0645\u0642\u062f\u0645\u0629 \u0641\u064a \u0639\u0635\u0631 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0623\u0635\u0628\u062d \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u0646 \u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u062a\u064a \u064a\u062d\u062a\u0627\u062c\u0647\u0627 \u0627\u0644\u0623\u0641\u0631\u0627\u062f \u0648\u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0639\u0644\u0649 \u062d\u062f \u0633\u0648\u0627\u0621. \u062a\u0639\u062a\u0628\u0631 HTML (\u0644\u063a\u0629","copyrightYear":"2025","articleSection":"\u062a\u0637\u0628\u064a\u0642\u0627\u062a","articleBody":"HTML\/CSS 101: \u0645\u0642\u062f\u0645\u0629 \u0634\u0627\u0645\u0644\u0629 \u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628\n\u0645\u0642\u062f\u0645\u0629\n\u0641\u064a \u0639\u0635\u0631 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0623\u0635\u0628\u062d \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u0646 \u0627\u0644\u0645\u0647\u0627\u0631\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0627\u0644\u062a\u064a \u064a\u062d\u062a\u0627\u062c\u0647\u0627 \u0627\u0644\u0623\u0641\u0631\u0627\u062f \u0648\u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0639\u0644\u0649 \u062d\u062f \u0633\u0648\u0627\u0621. \u062a\u0639\u062a\u0628\u0631 HTML (\u0644\u063a\u0629 \u062a\u0631\u0645\u064a\u0632 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u062a\u0634\u0639\u0628\u064a\u0629) \u0648 CSS (\u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629) \u0645\u0646 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u062c\u0627\u0644. \u064a\u062a\u064a\u062d \u0644\u0643 \u062a\u0639\u0644\u0645 \u0647\u0630\u0647 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0627\u0642\u0639 \u0648\u064a\u0628 \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u062c\u0630\u0627\u0628\u0629. \u0633\u0646\u062a\u0646\u0627\u0648\u0644 \u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u0645\u0642\u0627\u0644 \u0645\u0642\u062f\u0645\u0629 \u0634\u0627\u0645\u0644\u0629 \u0639\u0646 HTML \u0648 CSS\u060c \u0645\u0646 \u062e\u0644\u0627\u0644 \u0634\u0631\u062d \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0643\u0644\u0627 \u0627\u0644\u0644\u063a\u062a\u064a\u0646 \u0648\u0623\u0647\u0645\u064a\u0629 \u0643\u0644 \u0645\u0646\u0647\u0645\u0627 \u0641\u064a \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628.\n\u0645\u0627 \u0647\u064a HTML\u061f\nHTML \u0647\u064a \u0627\u062e\u062a\u0635\u0627\u0631 \u0644\u0640 \"HyperText Markup Language\"\u060c \u0648\u0647\u064a \u0644\u063a\u0629 \u062a\u0631\u0645\u064a\u0632 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0647\u064a\u0643\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0644\u0623\u064a \u0635\u0641\u062d\u0629 \u0648\u064a\u0628. \u062a\u0639\u062f HTML \u0627\u0644\u0623\u0633\u0627\u0633 \u0627\u0644\u0630\u064a \u064a\u062a\u0645 \u0628\u0646\u0627\u0621 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0639\u0644\u064a\u0647\u060c \u062d\u064a\u062b \u062a\u0642\u0648\u0645 \u0628\u062a\u062d\u062f\u064a\u062f \u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0635\u0641\u062d\u0629 \u0648\u0643\u064a\u0641\u064a\u0629 \u0639\u0631\u0636\u0647 \u0639\u0644\u0649 \u0627\u0644\u0645\u062a\u0635\u0641\u062d.\n1. \u0628\u0646\u064a\u0629 HTML\n\u062a\u062a\u0643\u0648\u0646 \u0635\u0641\u062d\u0629 HTML \u0645\u0646 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 (Tags) \u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062f \u0634\u0643\u0644 \u0648\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0635\u0641\u062d\u0629. \u064a\u062d\u062a\u0648\u064a \u0643\u0644 \u0639\u0646\u0635\u0631 \u0639\u0644\u0649 \u0645\u062d\u062a\u0648\u0649 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0646\u0635\u0627\u064b \u0623\u0648 \u0635\u0648\u0631\u0629 \u0623\u0648 \u0631\u0627\u0628\u0637\u0627\u064b \u0623\u0648 \u062d\u062a\u0649 \u0645\u0642\u0637\u0639 \u0641\u064a\u062f\u064a\u0648. \u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0629 HTML \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u064a\u0628\u062f\u0623 \u0628\u0639\u0646\u0627\u0635\u0631 \u0623\u0633\u0627\u0633\u064a\u0629\u060c \u0645\u062b\u0644:\n\n\n: \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u062c\u0630\u0631\u064a \u0627\u0644\u0630\u064a \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0643\u0627\u0645\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649.\n\n\n: \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u063a\u064a\u0631 \u0645\u0631\u0626\u064a\u0629 \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u060c \u0645\u062b\u0644 \u0627\u0644\u0639\u0646\u0648\u0627\u0646 (Title) \u0648\u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 (CSS) \u0623\u0648 \u0627\u0644\u0633\u0643\u0631\u0628\u062a\u0627\u062a (JavaScript).\n\n\n: \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0641\u0639\u0644\u064a \u0627\u0644\u0630\u064a \u064a\u0638\u0647\u0631 \u0644\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u062b\u0644 \u0627\u0644\u0646\u0635\u0648\u0635\u060c \u0627\u0644\u0635\u0648\u0631\u060c \u0648\u0627\u0644\u062c\u062f\u0627\u0648\u0644.\n\n\n2. \u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\n\n\n\u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 (Headings): \u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0639\u0646\u0627\u0635\u0631 \u0645\u0646  \u0625\u0644\u0649 . \u064a\u0645\u062b\u0644  \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0644\u0635\u0641\u062d\u0629\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0645\u062b\u0644  \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0623\u0635\u063a\u0631.\n\n\n\u0627\u0644\u0641\u0642\u0631\u0627\u062a (Paragraphs): \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0639\u0646\u0635\u0631  \u0644\u0625\u0646\u0634\u0627\u0621 \u0641\u0642\u0631\u0627\u062a \u0646\u0635\u064a\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0641\u062d\u0629.\n\n\n\u0627\u0644\u0631\u0648\u0627\u0628\u0637 (Links): \u064a\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631 \u060c \u062d\u064a\u062b \u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0631\u0627\u0628\u0637 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0645\u0629 href.\n\n\n\u0627\u0644\u0635\u0648\u0631 (Images): \u064a\u062a\u0645 \u062a\u0636\u0645\u064a\u0646 \u0627\u0644\u0635\u0648\u0631 \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631  \u0645\u0639 \u062a\u062d\u062f\u064a\u062f \u0645\u0635\u062f\u0631 \u0627\u0644\u0635\u0648\u0631\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0633\u0645\u0629 src.\n\n\n\u0627\u0644\u0642\u0648\u0627\u0626\u0645 (Lists): \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u063a\u064a\u0631 \u0627\u0644\u0645\u0631\u062a\u0628\u0629 (Unordered lists) \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631 \u060c \u0648\u0627\u0644\u0642\u0648\u0627\u0626\u0645 \u0627\u0644\u0645\u0631\u062a\u0628\u0629 (Ordered lists) \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631 \u060c \u0645\u0639 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631  \u0644\u062a\u0645\u062b\u064a\u0644 \u0643\u0644 \u0639\u0646\u0635\u0631 \u0641\u064a \u0627\u0644\u0642\u0627\u0626\u0645\u0629.\n\n\n3. \u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\n\n\n\u0627\u0644\u062c\u062f\u0627\u0648\u0644 (Tables): \u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631  \u0644\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u062c\u062f\u0627\u0648\u0644. \u064a\u062a\u0643\u0648\u0646 \u0627\u0644\u062c\u062f\u0648\u0644 \u0645\u0646 \u0635\u0641\u0648\u0641 () \u0648\u0623\u0639\u0645\u062f\u0629 ().\n\n\n\u0627\u0644\u0646\u0645\u0627\u0630\u062c (Forms): \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0646\u0645\u0627\u0630\u062c \u0644\u062c\u0645\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646. \u064a\u062a\u0645 \u062a\u0639\u0631\u064a\u0641 \u0627\u0644\u0646\u0645\u0627\u0630\u062c \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631 \u060c \u0648\u062a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 \u0645\u062b\u0644 , , \u0648 .\n\n\n\u0645\u0627 \u0647\u064a CSS\u061f\nCSS \u0647\u064a \u0627\u062e\u062a\u0635\u0627\u0631 \u0644\u0640 \"Cascading Style Sheets\" (\u0623\u0648\u0631\u0627\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062a\u062a\u0627\u0644\u064a\u0629)\u060c \u0648\u0647\u064a \u0644\u063a\u0629 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u0646\u0633\u064a\u0642 \u0648\u062a\u0635\u0645\u064a\u0645 \u0634\u0643\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0645\u0642\u062f\u0645 \u0639\u0628\u0631 HTML. \u062a\u0633\u0645\u062d CSS \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0628\u062a\u062d\u062f\u064a\u062f \u0643\u064a\u0641\u064a\u0629 \u0638\u0647\u0648\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062d\u0629 \u0645\u0646 \u062d\u064a\u062b \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0627\u0644\u062e\u0637\u0648\u0637\u060c \u0627\u0644\u062a\u0628\u0627\u0639\u062f\u060c \u0627\u0644\u062a\u0631\u062a\u064a\u0628\u060c \u0648\u063a\u064a\u0631\u0647\u0627 \u0645\u0646 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0645\u0631\u0626\u064a\u0629.\n1. \u0628\u0646\u064a\u0629 CSS\n\u062a\u062a\u0643\u0648\u0646 \u0642\u0627\u0639\u062f\u0629 CSS \u0645\u0646 \u062b\u0644\u0627\u062b\u0629 \u0623\u062c\u0632\u0627\u0621 \u0631\u0626\u064a\u0633\u064a\u0629:\n\n\n\u0627\u0644\u0645\u062d\u062f\u062f (Selector): \u0647\u0648 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0630\u064a \u062a\u0631\u064a\u062f \u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0639\u0644\u064a\u0647\u060c \u0645\u062b\u0644 p \u0623\u0648 .class-name \u0623\u0648 #id-name.\n\n\n\u0627\u0644\u0642\u064a\u0645\u0629 (Property): \u0647\u0648 \u0646\u0648\u0639 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0630\u064a \u062a\u0631\u063a\u0628 \u0641\u064a \u062a\u0637\u0628\u064a\u0642\u0647\u060c \u0645\u062b\u0644 color, font-size, background-color.\n\n\n\u0627\u0644\u0642\u064a\u0645\u0629 (Value): \u0647\u0648 \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u062a\u064a \u0633\u064a\u062a\u0645 \u062a\u0637\u0628\u064a\u0642\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629\u060c \u0645\u062b\u0644 red, 16px, #ffffff.\n\n\n\u0645\u062b\u0627\u0644 \u0639\u0644\u0649 \u0642\u0627\u0639\u062f\u0629 CSS:\ncssCopyEditp {\n  color: red;\n  font-size: 16px;\n}\n\n2. \u0637\u0631\u0642 \u0625\u0636\u0627\u0641\u0629 CSS \u0625\u0644\u0649 HTML\n\u0647\u0646\u0627\u0643 \u062b\u0644\u0627\u062b \u0637\u0631\u0642 \u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0625\u0636\u0627\u0641\u0629 CSS \u0625\u0644\u0649 HTML:\n\n\n\u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 (Internal Styles): \u064a\u062a\u0645 \u0625\u062f\u062e\u0627\u0644 \u0623\u0643\u0648\u0627\u062f CSS \u062f\u0627\u062e\u0644 \u0645\u0644\u0641 HTML \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631  \u0641\u064a \u0627\u0644\u0642\u0633\u0645 .\n\n\n\u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062e\u0627\u0631\u062c\u064a\u0629 (External Styles): \u064a\u062a\u0645 \u0631\u0628\u0637 \u0645\u0644\u0641 CSS \u062e\u0627\u0631\u062c\u064a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0635\u0631  \u0641\u064a \u0627\u0644\u0642\u0633\u0645 .\n\n\n\u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u062f\u0645\u062c\u0629 (Inline Styles): \u064a\u062a\u0645 \u0625\u062f\u062e\u0627\u0644 \u0623\u0643\u0648\u0627\u062f CSS \u0645\u0628\u0627\u0634\u0631\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0635\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0633\u0645\u0629 style.\n\n\n3. \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0641\u064a CSS\n\n\n\u0627\u0644\u0623\u0644\u0648\u0627\u0646 (Colors): \u064a\u0645\u0643\u0646\u0643 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 (\u0645\u062b\u0644 \"red\") \u0623\u0648 \u0642\u064a\u0645 RGB \u0623\u0648 HEX \u0623\u0648 HSL.\n\n\n\u0627\u0644\u062e\u0637\u0648\u0637 (Fonts): \u064a\u0645\u0643\u0646\u0643 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u062e\u0637\u0648\u0637 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 font-family\u060c \u0648\u064a\u0645\u0643\u0646 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u062d\u062c\u0645 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 font-size.\n\n\n\u0627\u0644\u0647\u0648\u0627\u0645\u0634 (Margins) \u0648\u0627\u0644\u062a\u0628\u0627\u0639\u062f (Padding): \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u062e\u0627\u0635\u064a\u0629 margin \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u060c \u0628\u064a\u0646\u0645\u0627 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u062e\u0627\u0635\u064a\u0629 padding \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0646\u0635\u0631.\n\n\n\u0627\u0644\u062d\u062f\u0648\u062f (Borders): \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u062e\u0627\u0635\u064a\u0629 border \u0644\u0625\u0636\u0627\u0641\u0629 \u062d\u062f\u0648\u062f \u062d\u0648\u0644 \u0627\u0644\u0639\u0646\u0627\u0635\u0631.\n\n\n\u0627\u0644\u062a\u0646\u0642\u0644 \u0648\u0627\u0644\u062a\u0645\u0648\u0636\u0639 (Positioning and Layout): \u062a\u0648\u0641\u0631 CSS \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062a\u0646\u0648\u0639\u0629 \u0645\u0646 \u0637\u0631\u0642 \u0627\u0644\u062a\u0646\u0633\u064a\u0642\u060c \u0645\u062b\u0644 float \u0648 flexbox \u0648 grid\u060c \u0644\u062a\u062d\u062f\u064a\u062f \u0643\u064a\u0641\u064a\u0629 \u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u062f\u0627\u062e\u0644 \u0627\u0644\u0635\u0641\u062d\u0629.\n\n\n4. \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 (Responsive Design)\n\u064a\u062a\u0637\u0644\u0628 \u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0627\u0642\u0639 \u0648\u064a\u0628 \u062d\u062f\u064a\u062b\u0629 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0645\u062a\u062c\u0627\u0648\u0628\u0629\u060c \u0623\u064a \u0623\u0646\u0647\u0627 \u062a\u062a\u0643\u064a\u0641 \u0645\u0639 \u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629\u060c \u0633\u0648\u0627\u0621 \u0643\u0627\u0646\u062a \u0634\u0627\u0634\u0629 \u0633\u0637\u062d \u0645\u0643\u062a\u0628 \u0623\u0648 \u062c\u0647\u0627\u0632 \u0645\u062d\u0645\u0648\u0644. \u064a\u0645\u0643\u0646 \u062a\u062d\u0642\u064a\u0642 \u0630\u0644\u0643 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u0633\u0627\u0626\u0637 \u0627\u0644\u0627\u0633\u062a\u0639\u0644\u0627\u0645 (Media Queries)\u060c \u0627\u0644\u062a\u064a \u062a\u0633\u0645\u062d \u0628\u062a\u0637\u0628\u064a\u0642 \u0623\u0646\u0645\u0627\u0637 CSS \u0645\u062d\u062f\u062f\u0629 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u062c\u0647\u0627\u0632 \u0645\u062b\u0644 \u0627\u0644\u0639\u0631\u0636 \u0623\u0648 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639.\ncssCopyEdit@media screen and (max-width: 600px) {\n  body {\n    background-color: lightblue;\n  }\n}\n\n\u0627\u0644\u0639\u0644\u0627\u0642\u0629 \u0628\u064a\u0646 HTML \u0648 CSS\nHTML \u0648 CSS \u0647\u0645\u0627 \u0639\u0645\u0627\u062f \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0635\u0641\u062d\u0627\u062a \u0627\u0644\u0648\u064a\u0628. \u0628\u064a\u0646\u0645\u0627 \u062a\u0642\u0648\u0645 HTML \u0628\u062a\u062d\u062f\u064a\u062f \u0647\u064a\u0643\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649\u060c \u062a\u062a\u064a\u062d CSS \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062a\u0635\u0641\u064a\u0629 \u0648\u0627\u0644\u062a\u0646\u0633\u064a\u0642. \u0645\u0639\u064b\u0627\u060c \u064a\u0633\u0647\u0645\u0627\u0646 \u0641\u064a \u062c\u0639\u0644 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0623\u0643\u062b\u0631 \u062c\u0630\u0627\u0628\u0629 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645.\n\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0641\u064a \u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648 CSS\n\n\n\u0627\u0644\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u062c\u064a\u062f \u0644\u0644\u0634\u0641\u0631\u0629: \u064a\u062c\u0628 \u0623\u0646 \u062a\u0643\u0648\u0646 \u0627\u0644\u0634\u0641\u0631\u0629 \u0645\u0646\u0638\u0645\u0629 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u0641\u0647\u0645. \u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0648\u0627\u0644\u0641\u0648\u0627\u0635\u0644 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0647\u064a\u0627\u0643\u0644.\n\n\n\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0634\u0643\u0644 \u0633\u0644\u064a\u0645: \u0627\u062e\u062a\u0631 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u0646\u0633\u0628 \u0644\u0644\u0645\u062d\u062a\u0648\u0649. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u0627\u0633\u062a\u062e\u062f\u0645  \u0644\u0644\u062a\u0631\u0648\u064a\u0633\u0627\u062a \u0648  \u0644\u0644\u062a\u0630\u064a\u064a\u0644\u0627\u062a.\n\n\n\u0627\u0644\u0627\u0633\u062a\u0641\u0627\u062f\u0629 \u0645\u0646 \u062e\u0635\u0627\u0626\u0635 CSS \u0627\u0644\u062d\u062f\u064a\u062b\u0629: \u0645\u062b\u0644 flexbox \u0648 grid\u060c \u0627\u0644\u062a\u064a \u062a\u0648\u0641\u0631 \u0637\u0631\u0642\u064b\u0627 \u0645\u0631\u0646\u0629 \u0648\u0641\u0639\u0627\u0644\u0629 \u0644\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u0645\u062d\u062a\u0648\u064a\u0627\u062a.\n\n\n\u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0639\u0628\u0631 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a: \u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0645\u0648\u0642\u0639\u0643 \u064a\u0639\u0645\u0644 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0648\u0627\u0644\u0623\u062c\u0647\u0632\u0629.\n\n\n\u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u062c\u0645 \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0644\u0644\u0635\u0641\u062d\u0627\u062a: \u062d\u0627\u0648\u0644 \u062a\u0642\u0644\u064a\u0644 \u062d\u062c\u0645 \u0645\u0644\u0641\u0627\u062a HTML \u0648 CSS \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0645\u062b\u0644 minification.\n\n\n\u0627\u0644\u062e\u0644\u0627\u0635\u0629\n\u0625\u0646 \u062a\u0639\u0644\u0645 HTML \u0648 CSS \u064a\u0639\u062f \u062e\u0637\u0648\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0643\u0644 \u0645\u0646 \u064a\u0631\u063a\u0628 \u0641\u064a \u062f\u062e\u0648\u0644 \u0639\u0627\u0644\u0645 \u062a\u0637\u0648\u064a\u0631 \u0648\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0648\u064a\u0628. \u062a\u0645\u0646\u062d\u0643 \u0647\u0630\u0647 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0642\u062f\u0631\u0629 \u0639\u0644\u0649 \u0625\u0646\u0634\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0648\u064a\u0628 \u0645\u0645\u064a\u0632\u0629 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u060c \u0645\u0645\u0627 \u064a\u0633\u0647\u0645 \u0641\u064a \u062a\u062d\u0633\u064a\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645. \u0648\u0645\u0639 \u062a\u0637\u0648\u0631 \u0647\u0630\u0647 \u0627\u0644\u0644\u063a\u0627\u062a \u0648\u0638\u0647\u0648\u0631 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u062d\u062f\u064a\u062b\u0629\u060c \u0645\u0646 \u0627\u0644\u0645\u0647\u0645 \u0645\u0648\u0627\u0643\u0628\u0629 \u0627\u0644\u062a\u063a\u064a\u064a\u0631\u0627\u062a \u0648\u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0641\u0636\u0644 \u0627\u0644\u0646\u062a\u0627\u0626\u062c.","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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84\/","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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&title=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&name=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&description=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&title=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&text=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&body=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-3042856 tie-slide-1 tie-standard">
					<a href="https://mwade3.com/woocommerce-%d9%85%d9%86%d8%b5%d8%a9-%d8%a7%d9%84%d8%aa%d8%ac%d8%a7%d8%b1%d8%a9-%d8%a7%d9%84%d8%a5%d9%84%d9%83%d8%aa%d8%b1%d9%88%d9%86%d9%8a%d8%a9/" class="all-over-thumb-link" aria-label="WooCommerce منصة التجارة الإلكترونية"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/woocommerce-%d9%85%d9%86%d8%b5%d8%a9-%d8%a7%d9%84%d8%aa%d8%ac%d8%a7%d8%b1%d8%a9-%d8%a7%d9%84%d8%a5%d9%84%d9%83%d8%aa%d8%b1%d9%88%d9%86%d9%8a%d8%a9/">WooCommerce منصة التجارة الإلكترونية</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-2977018 tie-slide-2 tie-standard">
					<a href="https://mwade3.com/%d9%85%d8%aa%d8%ac%d8%b1-%d9%85%d8%a7%d9%8a%d9%83%d8%b1%d9%88%d8%b3%d9%88%d9%81%d8%aa-%d9%81%d9%8a-%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2-11/" class="all-over-thumb-link" aria-label="متجر مايكروسوفت في ويندوز 11"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d9%85%d8%aa%d8%ac%d8%b1-%d9%85%d8%a7%d9%8a%d9%83%d8%b1%d9%88%d8%b3%d9%88%d9%81%d8%aa-%d9%81%d9%8a-%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2-11/">متجر مايكروسوفت في ويندوز 11</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-3010859 tie-slide-3 tie-standard">
					<a href="https://mwade3.com/libreoffice-calc-%d9%85%d8%b9%d8%a7%d9%84%d8%ac-%d8%ac%d8%af%d8%a7%d9%88%d9%84-%d8%a7%d9%84%d8%a8%d9%8a%d8%a7%d9%86%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d9%81%d8%aa%d9%88%d8%ad/" class="all-over-thumb-link" aria-label="LibreOffice Calc: معالج جداول البيانات المفتوح"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/libreoffice-calc-%d9%85%d8%b9%d8%a7%d9%84%d8%ac-%d8%ac%d8%af%d8%a7%d9%88%d9%84-%d8%a7%d9%84%d8%a8%d9%8a%d8%a7%d9%86%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d9%81%d8%aa%d9%88%d8%ad/">LibreOffice Calc: معالج جداول البيانات المفتوح</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-3042222 tie-slide-4 tie-standard">
					<a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%aa%d9%88%d9%82%d9%8a%d8%b9-%d8%a7%d8%ad%d8%aa%d8%b1%d8%a7%d9%81%d9%8a-%d9%81%d9%8a-outlook/" class="all-over-thumb-link" aria-label="إنشاء توقيع احترافي في Outlook"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%aa%d9%88%d9%82%d9%8a%d8%b9-%d8%a7%d8%ad%d8%aa%d8%b1%d8%a7%d9%81%d9%8a-%d9%81%d9%8a-outlook/">إنشاء توقيع احترافي في Outlook</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-3010657 tie-slide-5 tie-standard">
					<a href="https://mwade3.com/onedrive-%d9%88%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2-10-%d8%a7%d9%84%d8%aa%d9%83%d8%a7%d9%85%d9%84-%d8%a7%d9%84%d9%85%d8%ab%d8%a7%d9%84%d9%8a/" class="all-over-thumb-link" aria-label="OneDrive وويندوز 10: التكامل المثالي"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/onedrive-%d9%88%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2-10-%d8%a7%d9%84%d8%aa%d9%83%d8%a7%d9%85%d9%84-%d8%a7%d9%84%d9%85%d8%ab%d8%a7%d9%84%d9%8a/">OneDrive وويندوز 10: التكامل المثالي</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-3040499 tie-slide-6 tie-standard">
					<a href="https://mwade3.com/%d8%a5%d8%b9%d8%af%d8%a7%d8%af%d8%a7%d8%aa-%d9%85%d8%a7%d8%ac%d9%86%d8%aa%d9%88-%d8%a7%d9%84%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a9-%d8%a7%d9%84%d9%85%d8%aa%d9%82%d8%af%d9%85%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-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d8%a5%d8%b9%d8%af%d8%a7%d8%af%d8%a7%d8%aa-%d9%85%d8%a7%d8%ac%d9%86%d8%aa%d9%88-%d8%a7%d9%84%d8%a3%d8%b3%d8%a7%d8%b3%d9%8a%d8%a9-%d8%a7%d9%84%d9%85%d8%aa%d9%82%d8%af%d9%85%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-3005235 tie-slide-1 tie-standard">
					<a href="https://mwade3.com/%d8%a5%d8%af%d8%a7%d8%b1%d8%a9-%d8%a7%d9%84%d9%85%d9%84%d9%81%d8%a7%d8%aa-%d9%88%d8%a7%d9%84%d9%85%d8%ac%d9%84%d8%af%d8%a7%d8%aa-%d9%81%d9%8a-%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2-10/" class="all-over-thumb-link" aria-label="إدارة الملفات والمجلدات في ويندوز 10"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d8%a5%d8%af%d8%a7%d8%b1%d8%a9-%d8%a7%d9%84%d9%85%d9%84%d9%81%d8%a7%d8%aa-%d9%88%d8%a7%d9%84%d9%85%d8%ac%d9%84%d8%af%d8%a7%d8%aa-%d9%81%d9%8a-%d9%88%d9%8a%d9%86%d8%af%d9%88%d8%b2-10/">إدارة الملفات والمجلدات في ويندوز 10</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-3045083 tie-slide-2 tie-standard">
					<a href="https://mwade3.com/%d8%a3%d9%81%d8%b6%d9%84-%d8%b7%d8%b1%d9%82-%d9%84%d8%ad%d9%81%d8%b8-%d9%88%d8%aa%d8%b5%d8%af%d9%8a%d8%b1-powerpoint/" class="all-over-thumb-link" aria-label="أفضل طرق لحفظ وتصدير PowerPoint"></a>
					<div class="thumb-overlay"><div class="container"><span class="post-cat-wrap"><a class="post-cat tie-cat-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d8%a3%d9%81%d8%b6%d9%84-%d8%b7%d8%b1%d9%82-%d9%84%d8%ad%d9%81%d8%b8-%d9%88%d8%aa%d8%b5%d8%af%d9%8a%d8%b1-powerpoint/">أفضل طرق لحفظ وتصدير PowerPoint</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-3040720 tie-slide-3 tie-standard">
					<a href="https://mwade3.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d9%81%d9%82%d8%b1%d8%a7%d8%aa-%d9%81%d9%8a-%d9%88%d9%88%d8%b1%d8%af-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-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d9%81%d9%82%d8%b1%d8%a7%d8%aa-%d9%81%d9%8a-%d9%88%d9%88%d8%b1%d8%af-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-3007619 tie-slide-4 tie-standard">
					<a href="https://mwade3.com/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a7%d9%84%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%81%d9%8a-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" 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-1717702" href="https://mwade3.com/category/%d8%aa%d8%b7%d8%a8%d9%8a%d9%82%d8%a7%d8%aa/">تطبيقات</a></span><div class="thumb-content">
				<h2 class="thumb-title"><a href="https://mwade3.com/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%a7%d9%84%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%81%d9%8a-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/">كيفية إنشاء الصفحات في ووردبريس</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">WooCommerce منصة التجارة الإلكترونية</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-6">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">متجر مايكروسوفت في ويندوز 11</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-1">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">LibreOffice Calc: معالج جداول البيانات المفتوح</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-2">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">إنشاء توقيع احترافي في Outlook</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-3">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">OneDrive وويندوز 10: التكامل المثالي</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-4">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">إعدادات ماجنتو الأساسية المتقدمة</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-5">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">إدارة الملفات والمجلدات في ويندوز 10</h3>

														</div>
													</div><!-- slide /-->

													
													<div class="slide tie-slide-6">
														<div class="slide-overlay">

															
															<h3 class="thumb-title">أفضل طرق لحفظ وتصدير PowerPoint</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><!-- .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%d8%b5%d8%af%d8%a7%d9%82%d8%a9-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%a7%d9%84%d8%b4%d8%ae%d8%b5%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%d8%b5%d8%af%d8%a7%d9%82%d8%a9-%d9%84%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-%d8%a7%d9%84%d8%b4%d8%ae%d8%b5%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/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a7%d9%84%d8%aa%d8%b9%d8%a7%d9%85%d9%84-%d9%85%d8%b9-%d8%b3%d9%84%d8%a8%d9%8a%d8%a9-%d8%a7%d9%84%d8%a2%d8%ae%d8%b1%d9%8a%d9%86/" 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/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%a7%d9%84%d8%aa%d8%b9%d8%a7%d9%85%d9%84-%d9%85%d8%b9-%d8%b3%d9%84%d8%a8%d9%8a%d8%a9-%d8%a7%d9%84%d8%a2%d8%ae%d8%b1%d9%8a%d9%86/" 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="أمان تسجيل الدخول في ووردبريس" href="https://mwade3.com/%d8%a3%d9%85%d8%a7%d9%86-%d8%aa%d8%b3%d8%ac%d9%8a%d9%84-%d8%a7%d9%84%d8%af%d8%ae%d9%88%d9%84-%d9%81%d9%8a-%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" fetchpriority="high" /></a>
								<h3 class="post-title"><a href="https://mwade3.com/%d8%a3%d9%85%d8%a7%d9%86-%d8%aa%d8%b3%d8%ac%d9%8a%d9%84-%d8%a7%d9%84%d8%af%d8%ae%d9%88%d9%84-%d9%81%d9%8a-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/">أمان تسجيل الدخول في ووردبريس</a></h3>

								<div class="post-meta clearfix"></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
							<div class="related-item tie-standard">

								
			<a aria-label="كيفية تحديد توقيت العرض في PowerPoint" href="https://mwade3.com/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ad%d8%af%d9%8a%d8%af-%d8%aa%d9%88%d9%82%d9%8a%d8%aa-%d8%a7%d9%84%d8%b9%d8%b1%d8%b6-%d9%81%d9%8a-powerpoint/" 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/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ad%d8%af%d9%8a%d8%af-%d8%aa%d9%88%d9%82%d9%8a%d8%aa-%d8%a7%d9%84%d8%b9%d8%b1%d8%b6-%d9%81%d9%8a-powerpoint/">كيفية تحديد توقيت العرض في PowerPoint</a></h3>

								<div class="post-meta clearfix"></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
							<div class="related-item tie-standard">

								
			<a aria-label="إدراج الفيديو والصوت في PowerPoint" href="https://mwade3.com/%d8%a5%d8%af%d8%b1%d8%a7%d8%ac-%d8%a7%d9%84%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d9%88%d8%a7%d9%84%d8%b5%d9%88%d8%aa-%d9%81%d9%8a-powerpoint/" 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%d8%af%d8%b1%d8%a7%d8%ac-%d8%a7%d9%84%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d9%88%d8%a7%d9%84%d8%b5%d9%88%d8%aa-%d9%81%d9%8a-powerpoint/">إدراج الفيديو والصوت في PowerPoint</a></h3>

								<div class="post-meta clearfix"></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
							<div class="related-item tie-standard">

								
			<a aria-label="حماية ونسخ احتياطي لووردبريس" href="https://mwade3.com/%d8%ad%d9%85%d8%a7%d9%8a%d8%a9-%d9%88%d9%86%d8%b3%d8%ae-%d8%a7%d8%ad%d8%aa%d9%8a%d8%a7%d8%b7%d9%8a-%d9%84%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%ad%d9%85%d8%a7%d9%8a%d8%a9-%d9%88%d9%86%d8%b3%d8%ae-%d8%a7%d8%ad%d8%aa%d9%8a%d8%a7%d8%b7%d9%8a-%d9%84%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/">حماية ونسخ احتياطي لووردبريس</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%a5%d8%af%d8%a7%d8%b1%d8%a9-%d8%a7%d9%84%d9%85%d8%ae%d8%b2%d9%88%d9%86-%d9%81%d9%8a-%d8%a8%d8%b1%d9%8a%d8%b3%d8%aa%d8%a7%d8%b4%d9%88%d8%a8/" 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%a5%d8%af%d8%a7%d8%b1%d8%a9-%d8%a7%d9%84%d9%85%d8%ae%d8%b2%d9%88%d9%86-%d9%81%d9%8a-%d8%a8%d8%b1%d9%8a%d8%b3%d8%aa%d8%a7%d8%b4%d9%88%d8%a8/">إدارة المخزون في بريستاشوب</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/%d8%b1%d8%a8%d8%b7-%d8%a5%d9%83%d8%b3%d9%84-%d8%a8%d8%a8%d9%88%d8%b1%d8%a8%d9%88%d9%8a%d9%86%d8%aa-%d8%a8%d8%b3%d9%87%d9%88%d9%84%d8%a9/" 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%b1%d8%a8%d8%b7-%d8%a5%d9%83%d8%b3%d9%84-%d8%a8%d8%a8%d9%88%d8%b1%d8%a8%d9%88%d9%8a%d9%86%d8%aa-%d8%a8%d8%b3%d9%87%d9%88%d9%84%d8%a9/">ربط إكسل ببوربوينت بسهولة</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="إدارة تقارير WooCommerce بفعالية" href="https://mwade3.com/%d8%a5%d8%af%d8%a7%d8%b1%d8%a9-%d8%aa%d9%82%d8%a7%d8%b1%d9%8a%d8%b1-woocommerce-%d8%a8%d9%81%d8%b9%d8%a7%d9%84%d9%8a%d8%a9/" 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%a5%d8%af%d8%a7%d8%b1%d8%a9-%d8%aa%d9%82%d8%a7%d8%b1%d9%8a%d8%b1-woocommerce-%d8%a8%d9%81%d8%b9%d8%a7%d9%84%d9%8a%d8%a9/">إدارة تقارير WooCommerce بفعالية</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="دليل استخدام برنامج Memsource للترجمة" href="https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac-memsource-%d9%84%d9%84%d8%aa%d8%b1%d8%ac%d9%85%d8%a9/" 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%af%d9%84%d9%8a%d9%84-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d8%ac-memsource-%d9%84%d9%84%d8%aa%d8%b1%d8%ac%d9%85%d8%a9/">دليل استخدام برنامج Memsource للترجمة</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="أدوات وخصائص OmegaT المتقدمة" href="https://mwade3.com/%d8%a3%d8%af%d9%88%d8%a7%d8%aa-%d9%88%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-omegat-%d8%a7%d9%84%d9%85%d8%aa%d9%82%d8%af%d9%85%d8%a9/" 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%a3%d8%af%d9%88%d8%a7%d8%aa-%d9%88%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-omegat-%d8%a7%d9%84%d9%85%d8%aa%d9%82%d8%af%d9%85%d8%a9/">أدوات وخصائص OmegaT المتقدمة</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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&url=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&title=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&name=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&description=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84&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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&title=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&redirect_uri=https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/&text=%D8%AF%D9%84%D9%8A%D9%84%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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%20HTML%20%D9%88%20CSS%20%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84%20https://mwade3.com/%d8%af%d9%84%d9%8a%d9%84-html-%d9%88-css-%d8%a7%d9%84%d8%b4%d8%a7%d9%85%d9%84/" 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":"e9acb2f471"};
/* ]]> */
</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=3043916&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 10:17 (UTC:3) -->
كيفية تشغيل الكاميرا على الكمبيوتر

الاحتراق التام وغير التام

أخطاء يجب تجنبها عند تعلم بايثون

تشاد: كل ما تحتاج معرفته

مفهوم الدولة المدينة وأثرها

الفساد وأثره على الفقر

الإنترنت وتطور العالم الرقمي

التبادل التجاري: الأنواع والأثر الاقتصادي

الإرشاد التربوي وأهميته التعليمية

فحص المنافذ المفتوحة بـNmap

دليل HTML و CSS الشامل

HTML/CSS 101: مقدمة شاملة لأساسيات تصميم صفحات الويب

مقدمة

ما هي HTML؟

1. بنية HTML

2. عناصر HTML الأساسية

إلى
. يمثل
العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.

. يمثل
العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.

العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.

العنوان الأصغر.

3. تنظيم الصفحة باستخدام العناصر

HTML/CSS 101: مقدمة شاملة لأساسيات تصميم صفحات الويب

مقدمة

ما هي HTML؟

1. بنية HTML

2. عناصر HTML الأساسية

إلى . يمثل العنوان الرئيسي للصفحة، بينما يمثل العنوان الأصغر.

. يمثل العنوان الرئيسي للصفحة، بينما يمثل العنوان الأصغر.

العنوان الرئيسي للصفحة، بينما يمثل العنوان الأصغر.

العنوان الأصغر.

3. تنظيم الصفحة باستخدام العناصر

إلى
. يمثل
العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.

. يمثل
العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.

العنوان الرئيسي للصفحة، بينما يمثل
العنوان الأصغر.
