في عصرنا الحالي، أصبح إنشاء موقع ويب يعتبر تحدًا مثيرًا ومليئًا بالإمكانيات الإبداعية. يعد HTML (لغة توصيف النصوص) هو الأساس الذي يقوم عليه تصميم المواقع، ولكن تنسيقه بشكل فعّال وجمالي يتطلب المزيد من الجهد وفهم العديد من التقنيات الأخرى. سنقدم هنا نظرة شاملة تبدأ من إعداد المشروع وتمتد إلى تنسيق المحتوى وإضافة الديناميات.
1. تخطيط المشروع:
قبل أن نبدأ في كتابة الشيفرة، يجب علينا تحديد هدف الموقع وهيكليته. يُفضل رسم خريطة للموقع (sitemap) لتحديد صفحاته وترتيبها.
2. إعداد الـ HTML:
ابدأ بإنشاء ملف HTML رئيسي. يمكنك استخدام العناصر الأساسية مثل </code>, و <code><body></code>. قم بتضمين أقسام مختلفة للمحتوى مثل header و main و footer.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>عنوان الموقع<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">header</span>></span>
<span class="hljs-comment"><!-- رأس الموقع هنا --></span>
<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
<span class="hljs-tag"><<span class="hljs-name">main</span>></span>
<span class="hljs-comment"><!-- المحتوى الرئيسي هنا --></span>
<span class="hljs-tag"></<span class="hljs-name">main</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span>></span>
<span class="hljs-comment"><!-- تذييل الموقع هنا --></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
</code></div></div></pre>
<p><strong>3. تنسيق الصفحة باستخدام CSS:</strong></p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
<p>استخدم CSS لتحسين تصميم صفحتك. يمكنك إضافة ملف CSS خارجي أو كتابة قواعد CSS مباشرة في الصفحة.</p><div class="stream-item stream-item-in-post stream-item-inline-post aligncenter"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>css</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-comment">/* ملف الستايل الخارجي style.css */</span>
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Arial'</span>, sans-serif;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f0f0f0</span>;
}
<span class="hljs-selector-tag">header</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#333</span>;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
}
<span class="hljs-selector-tag">main</span> {
<span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;
}
<span class="hljs-selector-tag">footer</span> {
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#333</span>;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
}
</code></div></div></pre>
<p><strong>4. إضافة الصور والوسائط:</strong></p>
<p>استخدم عناصر HTML مثل <code><img></code> لإضافة الصور، و<code><audio></code> أو <code><video></code> للوسائط المتعددة.</p>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"صورة.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"وصف الصورة"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">audio</span> <span class="hljs-attr">controls</span>></span>
<span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"صوت.mp3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"audio/mp3"</span>></span>
Your browser does not support the audio element.
<span class="hljs-tag"></<span class="hljs-name">audio</span>></span>
</code></div></div></pre>
<p><strong>5. جعل الموقع متجاوب:</strong></p>
<p>اجعل موقعك يتكيف مع مختلف أحجام الشاشات باستخدام تقنيات الاستجابة (Responsive Design).</p>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>css</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-comment">/* في ملف style.css */</span>
<span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">600px</span>) {
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
}
}
</code></div></div></pre>
<p><strong>6. إضافة الديناميات باستخدام JavaScript:</strong></p>
<p>استخدم JavaScript لجعل صفحتك تتفاعل بشكل ديناميكي مع المستخدم.</p>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-comment">// كود JavaScript هنا</span>
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></div></div></pre>
<p><strong>7. اختبار وتحسين:</strong></p>
<p>اختبر الموقع باستمرار على متصفحات مختلفة وأجهزة مختلفة. قم بتحسين الأداء والتصميم بناءً على التجارب والردود.</p>
<p><strong>8. نشر الموقع:</strong></p>
<p>اختر استضافة مناسبة وقم بنشر ملفات الموقع. يمكنك استخدام خدمات مثل GitHub Pages أو Netlify للنشر بسهولة.</p>
<p>بهذا الشكل، يمكنك البدء في مشروع موقع ويب باستخدام HTML وتنسيقه بشكل جمالي باستخدام CSS، مع إضافة الديناميات اللازمة باستخدام JavaScript. قد يستغرق الأمر بعض الوقت لتحقيق المهارة الكاملة، لكن التدريب المستمر سيساعدك في تطوير قدراتك والوصول إلى نتائج رائعة.</p>
</div>
</div>
<h2>المزيد من المعلومات</h2>
<p><img decoding="async" src="https://it-solutions.center/pic/more_info.png" class="center"></p>
<div data-message-author-role="assistant" data-message-id="9840b9e6-ee62-4b59-8e6e-da6943b75f4d" class="min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>بالطبع، دعونا نوسع على المواضيع المهمة التي تتعلق بإعداد وتنسيق مشروع موقع ويب باستخدام HTML وCSS:</p>
<p><strong>9. استخدام العناصر الأساسية في HTML:</strong></p>
<ul>
<li><code>
<div></code>: لتجميع العناصر وتنظيم الصفحة.</li>
<li><code>
<p></code>: لعرض فقرة نص.</li>
<li><code><a></code>: لإضافة روابط.</li>
<li><code>
<ul></code>, <code></p>
<ol></code>, <code></p>
<li></code>: لإنشاء قوائم نقطية وترقيمية.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>نص فقرة هنا.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>عنصر قائمة 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>عنصر قائمة 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://example.com"</span>></span>رابط خارجي<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></div></div></pre>
<p><strong>10. تحسين تجربة المستخدم بواسطة CSS:</strong></p>
<ul>
<li>استخدم مفاهيم الـ Flexbox و Grid لتنظيم تخطيط الصفحة.</li>
<li>ضبط حواف العناصر باستخدام الـ Border والـ Margin والـ Padding.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>css</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-comment">/* في ملف style.css */</span>
<span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">justify-content</span>: space-between;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;
}
</code></div></div></pre>
<p><strong>11. الألوان والخطوط:</strong></p>
<ul>
<li>استخدم قيم HEX أو RGB لتحديد الألوان.</li>
<li>اختر خطوطًا مناسبة باستخدام خاصية <code>font-family</code>.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>css</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-comment">/* في ملف style.css */</span>
<span class="hljs-selector-tag">body</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-number">#333</span>;
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'Arial'</span>, sans-serif;
}
</code></div></div></pre>
<p><strong>12. إدارة الصفحات باستخدام الروابط:</strong></p>
<ul>
<li>استخدم الروابط الداخلية لتوجيه المستخدمين بين الصفحات.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"صفحة1.html"</span>></span>الصفحة الأولى<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"صفحة2.html"</span>></span>الصفحة الثانية<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
</code></div></div></pre>
<p><strong>13. تضمين الفيديو والصوت:</strong></p>
<ul>
<li>استخدم <code><iframe></code> لتضمين مقاطع الفيديو من YouTube أو أي مصدر آخر.</li>
<li>استخدم <code><audio></code> لتضمين ملفات الصوت.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"560"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"315"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://www.youtube.com/embed/VIDEO_ID"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
<span class="hljs-tag"><<span class="hljs-name">audio</span> <span class="hljs-attr">controls</span>></span>
<span class="hljs-tag"><<span class="hljs-name">source</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"audio.mp3"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"audio/mp3"</span>></span>
Your browser does not support the audio element.
<span class="hljs-tag"></<span class="hljs-name">audio</span>></span>
</code></div></div></pre>
<p><strong>14. جعل الصور تتناسب مع الشاشة:</strong></p>
<ul>
<li>استخدم خاصية <code>max-width: 100%;</code> لجعل الصور متجاوبة.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>css</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-comment">/* في ملف style.css */</span>
<span class="hljs-selector-tag">img</span> {
<span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>;
<span class="hljs-attribute">height</span>: auto;
}
</code></div></div></pre>
<p><strong>15. تحسين SEO باستخدام الـ Meta Tags:</strong></p>
<ul>
<li>أضف عناصر <code><meta></code> لتحسين محركات البحث (SEO).</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"وصف الموقع هنا"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"كلمات مفتاحية هنا"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"اسم المؤلف"</span>></span>
</code></div></div></pre>
<p><strong>16. الاعتماد على التحقق من صحة الكود:</strong></p>
<ul>
<li>استخدم خدمات التحقق من صحة الكود مثل W3C Validator للتأكد من أن الصفحة تتبع المعايير.</li>
</ul>
<p><strong>17. تكامل مكتبات الـ JavaScript:</strong></p>
<ul>
<li>استخدم مكتبات JavaScript مثل jQuery لتسهيل العمليات وتحسين التفاعل.</li>
</ul>
<pre><div class="bg-black rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 dark:bg-token-surface-primary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>html</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/jquery-3.6.4.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></div></div></pre>
<p><strong>18. إضافة تحقيق الأمان:</strong></p>
<ul>
<li>استخدم HTTPS لتأمين اتصال المستخدم بالموقع.</li>
<li>تجنب استخدام الصور والملفات من مصادر غير آمنة.</li>
</ul>
<p>هذه تعتبر إشارات إضافية لتحسين مشروع موقع الويب الخاص بك، ويمكنك دائمًا استكشاف مفاهيم أعمق مثل JavaScript الحديثة والـ CSS Grid لتحسين تجربة المستخدم وتوسيع إمكانيات موقعك.</p>
</div>
</div>
</p>
<div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div><div class="post-bottom-meta post-bottom-tags post-tags-modern"><div class="post-bottom-meta-title"><span class="tie-icon-tags" aria-hidden="true"></span> الوسوم</div><span class="tagcloud"><a href="https://it-solutions.center/tag/css/" rel="tag">CSS</a> <a href="https://it-solutions.center/tag/flexbox/" rel="tag">Flexbox</a> <a href="https://it-solutions.center/tag/grid/" rel="tag">Grid</a> <a href="https://it-solutions.center/tag/html/" rel="tag">html</a> <a href="https://it-solutions.center/tag/javascript/" rel="tag">javascript</a> <a href="https://it-solutions.center/tag/%d8%aa%d8%ac%d8%a7%d9%88%d8%a8%d9%8a%d8%a9/" rel="tag">تجاوبية</a> <a href="https://it-solutions.center/tag/%d8%aa%d8%ac%d8%b1%d8%a8%d8%a9-%d8%a7%d9%84%d9%85%d8%b3%d8%aa%d8%ae%d8%af%d9%85/" rel="tag">تجربة المستخدم</a> <a href="https://it-solutions.center/tag/%d8%aa%d8%ad%d8%b3%d9%8a%d9%86-seo/" rel="tag">تحسين SEO</a> <a href="https://it-solutions.center/tag/%d8%aa%d8%b5%d9%85%d9%8a%d9%85-%d9%85%d9%88%d8%a7%d9%82%d8%b9/" rel="tag">تصميم مواقع</a> <a href="https://it-solutions.center/tag/%d8%aa%d8%b6%d9%85%d9%8a%d9%86-%d8%a7%d9%84%d9%88%d8%b3%d8%a7%d8%a6%d8%b7/" rel="tag">تضمين الوسائط</a></span></div>
</div><!-- .entry-content /-->
<div id="post-extra-info">
<div class="theiaStickySidebar">
<div class="single-post-meta post-meta clearfix"><span class="date meta-item tie-icon">19/01/2024</span><div class="tie-alignright"><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 7 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> 2 دقائق</span> </div></div><!-- .post-meta -->
<div id="share-buttons-top" class="share-buttons share-buttons-top">
<div class="share-links share-centered icons-only">
<a href="https://www.facebook.com/sharer.php?u=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&url=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&title=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&name=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&description=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&title=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&redirect_uri=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&redirect_uri=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&text=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&body=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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":"Article","dateCreated":"2024-01-19T13:34:32+03:00","datePublished":"2024-01-19T13:34:32+03:00","dateModified":"2024-01-19T13:34:32+03:00","headline":"\u062a\u0623\u0644\u0642 \u0641\u064a \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628 \u0645\u0630\u0647\u0644 \u0628\u0640 HTML \u0648CSS: \u062f\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646","name":"\u062a\u0623\u0644\u0642 \u0641\u064a \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628 \u0645\u0630\u0647\u0644 \u0628\u0640 HTML \u0648CSS: \u062f\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646","keywords":"CSS,Flexbox,Grid,html,javascript,\u062a\u062c\u0627\u0648\u0628\u064a\u0629,\u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645,\u062a\u062d\u0633\u064a\u0646 SEO,\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0627\u0642\u0639,\u062a\u0636\u0645\u064a\u0646 \u0627\u0644\u0648\u0633\u0627\u0626\u0637","url":"https:\/\/it-solutions.center\/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4\/","description":"\u0641\u064a \u0639\u0635\u0631\u0646\u0627 \u0627\u0644\u062d\u0627\u0644\u064a\u060c \u0623\u0635\u0628\u062d \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628 \u064a\u0639\u062a\u0628\u0631 \u062a\u062d\u062f\u064b\u0627 \u0645\u062b\u064a\u0631\u064b\u0627 \u0648\u0645\u0644\u064a\u0626\u064b\u0627 \u0628\u0627\u0644\u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a\u0629. \u064a\u0639\u062f HTML (\u0644\u063a\u0629 \u062a\u0648\u0635\u064a\u0641 \u0627\u0644\u0646\u0635\u0648\u0635) \u0647\u0648 \u0627\u0644\u0623\u0633\u0627\u0633 \u0627\u0644\u0630\u064a \u064a\u0642\u0648\u0645 \u0639\u0644\u064a\u0647 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\u060c \u0648\u0644\u0643\u0646 \u062a\u0646\u0633\u064a\u0642\u0647 \u0628\u0634\u0643\u0644 \u0641\u0639\u0651\u0627\u0644 \u0648\u062c\u0645\u0627\u0644\u064a \u064a\u062a\u0637\u0644\u0628 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646","copyrightYear":"2024","articleSection":"\u0627\u0644\u0628\u0631\u0645\u062c\u0629","articleBody":"\u0641\u064a \u0639\u0635\u0631\u0646\u0627 \u0627\u0644\u062d\u0627\u0644\u064a\u060c \u0623\u0635\u0628\u062d \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628 \u064a\u0639\u062a\u0628\u0631 \u062a\u062d\u062f\u064b\u0627 \u0645\u062b\u064a\u0631\u064b\u0627 \u0648\u0645\u0644\u064a\u0626\u064b\u0627 \u0628\u0627\u0644\u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a\u0629. \u064a\u0639\u062f HTML (\u0644\u063a\u0629 \u062a\u0648\u0635\u064a\u0641 \u0627\u0644\u0646\u0635\u0648\u0635) \u0647\u0648 \u0627\u0644\u0623\u0633\u0627\u0633 \u0627\u0644\u0630\u064a \u064a\u0642\u0648\u0645 \u0639\u0644\u064a\u0647 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\u060c \u0648\u0644\u0643\u0646 \u062a\u0646\u0633\u064a\u0642\u0647 \u0628\u0634\u0643\u0644 \u0641\u0639\u0651\u0627\u0644 \u0648\u062c\u0645\u0627\u0644\u064a \u064a\u062a\u0637\u0644\u0628 \u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u062c\u0647\u062f \u0648\u0641\u0647\u0645 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0623\u062e\u0631\u0649. \u0633\u0646\u0642\u062f\u0645 \u0647\u0646\u0627 \u0646\u0638\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u062a\u0628\u062f\u0623 \u0645\u0646 \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0648\u062a\u0645\u062a\u062f \u0625\u0644\u0649 \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0627\u062a.1. \u062a\u062e\u0637\u064a\u0637 \u0627\u0644\u0645\u0634\u0631\u0648\u0639:\u0642\u0628\u0644 \u0623\u0646 \u0646\u0628\u062f\u0623 \u0641\u064a \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0634\u064a\u0641\u0631\u0629\u060c \u064a\u062c\u0628 \u0639\u0644\u064a\u0646\u0627 \u062a\u062d\u062f\u064a\u062f \u0647\u062f\u0641 \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0647\u064a\u0643\u0644\u064a\u062a\u0647. \u064a\u064f\u0641\u0636\u0644 \u0631\u0633\u0645 \u062e\u0631\u064a\u0637\u0629 \u0644\u0644\u0645\u0648\u0642\u0639 (sitemap) \u0644\u062a\u062d\u062f\u064a\u062f \u0635\u0641\u062d\u0627\u062a\u0647 \u0648\u062a\u0631\u062a\u064a\u0628\u0647\u0627.2. \u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0640 HTML:\u0627\u0628\u062f\u0623 \u0628\u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641 HTML \u0631\u0626\u064a\u0633\u064a. \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0645\u062b\u0644 , , , \u0648 . \u0642\u0645 \u0628\u062a\u0636\u0645\u064a\u0646 \u0623\u0642\u0633\u0627\u0645 \u0645\u062e\u062a\u0644\u0641\u0629 \u0644\u0644\u0645\u062d\u062a\u0648\u0649 \u0645\u062b\u0644 header \u0648 main \u0648 footer.htmlCopy code\n\n\n \n \n \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0648\u0642\u0639\n\n\n \n \n \n\n \n \n \n\n \n \n \n\n\n3. \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS:\u0627\u0633\u062a\u062e\u062f\u0645 CSS \u0644\u062a\u062d\u0633\u064a\u0646 \u062a\u0635\u0645\u064a\u0645 \u0635\u0641\u062d\u062a\u0643. \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0645\u0644\u0641 CSS \u062e\u0627\u0631\u062c\u064a \u0623\u0648 \u0643\u062a\u0627\u0628\u0629 \u0642\u0648\u0627\u0639\u062f CSS \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0627\u0644\u0635\u0641\u062d\u0629.cssCopy code\/* \u0645\u0644\u0641 \u0627\u0644\u0633\u062a\u0627\u064a\u0644 \u0627\u0644\u062e\u0627\u0631\u062c\u064a style.css *\/\n\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n\nheader {\n background-color: #333;\n color: #fff;\n padding: 10px;\n}\n\nmain {\n padding: 20px;\n}\n\nfooter {\n background-color: #333;\n color: #fff;\n padding: 10px;\n}\n4. \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0635\u0648\u0631 \u0648\u0627\u0644\u0648\u0633\u0627\u0626\u0637:\u0627\u0633\u062a\u062e\u062f\u0645 \u0639\u0646\u0627\u0635\u0631 HTML \u0645\u062b\u0644 \u0644\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0635\u0648\u0631\u060c \u0648 \u0623\u0648 \u0644\u0644\u0648\u0633\u0627\u0626\u0637 \u0627\u0644\u0645\u062a\u0639\u062f\u062f\u0629.htmlCopy code\n\n \n Your browser does not support the audio element.\n\n5. \u062c\u0639\u0644 \u0627\u0644\u0645\u0648\u0642\u0639 \u0645\u062a\u062c\u0627\u0648\u0628:\u0627\u062c\u0639\u0644 \u0645\u0648\u0642\u0639\u0643 \u064a\u062a\u0643\u064a\u0641 \u0645\u0639 \u0645\u062e\u062a\u0644\u0641 \u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 (Responsive Design).cssCopy code\/* \u0641\u064a \u0645\u0644\u0641 style.css *\/\n@media screen and (max-width: 600px) {\n body {\n font-size: 14px;\n }\n}\n6. \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0627\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 JavaScript:\u0627\u0633\u062a\u062e\u062f\u0645 JavaScript \u0644\u062c\u0639\u0644 \u0635\u0641\u062d\u062a\u0643 \u062a\u062a\u0641\u0627\u0639\u0644 \u0628\u0634\u0643\u0644 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u0645\u0639 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645.htmlCopy code\n \/\/ \u0643\u0648\u062f JavaScript \u0647\u0646\u0627\n\n7. \u0627\u062e\u062a\u0628\u0627\u0631 \u0648\u062a\u062d\u0633\u064a\u0646:\u0627\u062e\u062a\u0628\u0631 \u0627\u0644\u0645\u0648\u0642\u0639 \u0628\u0627\u0633\u062a\u0645\u0631\u0627\u0631 \u0639\u0644\u0649 \u0645\u062a\u0635\u0641\u062d\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u0629 \u0648\u0623\u062c\u0647\u0632\u0629 \u0645\u062e\u062a\u0644\u0641\u0629. \u0642\u0645 \u0628\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621 \u0648\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u0644\u062a\u062c\u0627\u0631\u0628 \u0648\u0627\u0644\u0631\u062f\u0648\u062f.8. \u0646\u0634\u0631 \u0627\u0644\u0645\u0648\u0642\u0639:\u0627\u062e\u062a\u0631 \u0627\u0633\u062a\u0636\u0627\u0641\u0629 \u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u0642\u0645 \u0628\u0646\u0634\u0631 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0645\u0648\u0642\u0639. \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u062f\u0645\u0627\u062a \u0645\u062b\u0644 GitHub Pages \u0623\u0648 Netlify \u0644\u0644\u0646\u0634\u0631 \u0628\u0633\u0647\u0648\u0644\u0629.\u0628\u0647\u0630\u0627 \u0627\u0644\u0634\u0643\u0644\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0628\u062f\u0621 \u0641\u064a \u0645\u0634\u0631\u0648\u0639 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648\u062a\u0646\u0633\u064a\u0642\u0647 \u0628\u0634\u0643\u0644 \u062c\u0645\u0627\u0644\u064a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS\u060c \u0645\u0639 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0627\u062a \u0627\u0644\u0644\u0627\u0632\u0645\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 JavaScript. \u0642\u062f \u064a\u0633\u062a\u063a\u0631\u0642 \u0627\u0644\u0623\u0645\u0631 \u0628\u0639\u0636 \u0627\u0644\u0648\u0642\u062a \u0644\u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0645\u0647\u0627\u0631\u0629 \u0627\u0644\u0643\u0627\u0645\u0644\u0629\u060c \u0644\u0643\u0646 \u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0627\u0644\u0645\u0633\u062a\u0645\u0631 \u0633\u064a\u0633\u0627\u0639\u062f\u0643 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0642\u062f\u0631\u0627\u062a\u0643 \u0648\u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0646\u062a\u0627\u0626\u062c \u0631\u0627\u0626\u0639\u0629.\u0627\u0644\u0645\u0632\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\n\n\u0628\u0627\u0644\u0637\u0628\u0639\u060c \u062f\u0639\u0648\u0646\u0627 \u0646\u0648\u0633\u0639 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0627\u0636\u064a\u0639 \u0627\u0644\u0645\u0647\u0645\u0629 \u0627\u0644\u062a\u064a \u062a\u062a\u0639\u0644\u0642 \u0628\u0625\u0639\u062f\u0627\u062f \u0648\u062a\u0646\u0633\u064a\u0642 \u0645\u0634\u0631\u0648\u0639 \u0645\u0648\u0642\u0639 \u0648\u064a\u0628 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 HTML \u0648CSS:9. \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0641\u064a HTML:: \u0644\u062a\u062c\u0645\u064a\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0635\u0641\u062d\u0629.: \u0644\u0639\u0631\u0636 \u0641\u0642\u0631\u0629 \u0646\u0635.: \u0644\u0625\u0636\u0627\u0641\u0629 \u0631\u0648\u0627\u0628\u0637., , : \u0644\u0625\u0646\u0634\u0627\u0621 \u0642\u0648\u0627\u0626\u0645 \u0646\u0642\u0637\u064a\u0629 \u0648\u062a\u0631\u0642\u064a\u0645\u064a\u0629.htmlCopy code\n \u0646\u0635 \u0641\u0642\u0631\u0629 \u0647\u0646\u0627.\n \n \u0639\u0646\u0635\u0631 \u0642\u0627\u0626\u0645\u0629 1\n \u0639\u0646\u0635\u0631 \u0642\u0627\u0626\u0645\u0629 2\n \n \u0631\u0627\u0628\u0637 \u062e\u0627\u0631\u062c\u064a\n\n10. \u062a\u062d\u0633\u064a\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0628\u0648\u0627\u0633\u0637\u0629 CSS:\u0627\u0633\u062a\u062e\u062f\u0645 \u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u0640 Flexbox \u0648 Grid \u0644\u062a\u0646\u0638\u064a\u0645 \u062a\u062e\u0637\u064a\u0637 \u0627\u0644\u0635\u0641\u062d\u0629.\u0636\u0628\u0637 \u062d\u0648\u0627\u0641 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0640 Border \u0648\u0627\u0644\u0640 Margin \u0648\u0627\u0644\u0640 Padding.cssCopy code\/* \u0641\u064a \u0645\u0644\u0641 style.css *\/\ndiv {\n display: flex;\n justify-content: space-between;\n border: 1px solid #ccc;\n margin: 10px;\n padding: 10px;\n}\n11. \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u062e\u0637\u0648\u0637:\u0627\u0633\u062a\u062e\u062f\u0645 \u0642\u064a\u0645 HEX \u0623\u0648 RGB \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u0646.\u0627\u062e\u062a\u0631 \u062e\u0637\u0648\u0637\u064b\u0627 \u0645\u0646\u0627\u0633\u0628\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u062e\u0627\u0635\u064a\u0629 font-family.cssCopy code\/* \u0641\u064a \u0645\u0644\u0641 style.css *\/\nbody {\n color: #333;\n font-family: 'Arial', sans-serif;\n}\n12. \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0635\u0641\u062d\u0627\u062a \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0631\u0648\u0627\u0628\u0637:\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0644\u062a\u0648\u062c\u064a\u0647 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646 \u0628\u064a\u0646 \u0627\u0644\u0635\u0641\u062d\u0627\u062a.htmlCopy code\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0623\u0648\u0644\u0649\n\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629\n13. \u062a\u0636\u0645\u064a\u0646 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0648\u0627\u0644\u0635\u0648\u062a:\u0627\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u0636\u0645\u064a\u0646 \u0645\u0642\u0627\u0637\u0639 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0645\u0646 YouTube \u0623\u0648 \u0623\u064a \u0645\u0635\u062f\u0631 \u0622\u062e\u0631.\u0627\u0633\u062a\u062e\u062f\u0645 \u0644\u062a\u0636\u0645\u064a\u0646 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0635\u0648\u062a.htmlCopy code\n\n\n \n Your browser does not support the audio element.\n\n14. \u062c\u0639\u0644 \u0627\u0644\u0635\u0648\u0631 \u062a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0627\u0644\u0634\u0627\u0634\u0629:\u0627\u0633\u062a\u062e\u062f\u0645 \u062e\u0627\u0635\u064a\u0629 max-width: 100%; \u0644\u062c\u0639\u0644 \u0627\u0644\u0635\u0648\u0631 \u0645\u062a\u062c\u0627\u0648\u0628\u0629.cssCopy code\/* \u0641\u064a \u0645\u0644\u0641 style.css *\/\nimg {\n max-width: 100%;\n height: auto;\n}\n15. \u062a\u062d\u0633\u064a\u0646 SEO \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0640 Meta Tags:\u0623\u0636\u0641 \u0639\u0646\u0627\u0635\u0631 \u0644\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b (SEO).htmlCopy code\n\n\n16. \u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0639\u0644\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0643\u0648\u062f:\u0627\u0633\u062a\u062e\u062f\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0635\u062d\u0629 \u0627\u0644\u0643\u0648\u062f \u0645\u062b\u0644 W3C Validator \u0644\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u062a\u062a\u0628\u0639 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631.17. \u062a\u0643\u0627\u0645\u0644 \u0645\u0643\u062a\u0628\u0627\u062a \u0627\u0644\u0640 JavaScript:\u0627\u0633\u062a\u062e\u062f\u0645 \u0645\u0643\u062a\u0628\u0627\u062a JavaScript \u0645\u062b\u0644 jQuery \u0644\u062a\u0633\u0647\u064a\u0644 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0648\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u062a\u0641\u0627\u0639\u0644.htmlCopy code\n18. \u0625\u0636\u0627\u0641\u0629 \u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0623\u0645\u0627\u0646:\u0627\u0633\u062a\u062e\u062f\u0645 HTTPS \u0644\u062a\u0623\u0645\u064a\u0646 \u0627\u062a\u0635\u0627\u0644 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0628\u0627\u0644\u0645\u0648\u0642\u0639.\u062a\u062c\u0646\u0628 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0635\u0648\u0631 \u0648\u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0645\u0646 \u0645\u0635\u0627\u062f\u0631 \u063a\u064a\u0631 \u0622\u0645\u0646\u0629.\u0647\u0630\u0647 \u062a\u0639\u062a\u0628\u0631 \u0625\u0634\u0627\u0631\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629 \u0644\u062a\u062d\u0633\u064a\u0646 \u0645\u0634\u0631\u0648\u0639 \u0645\u0648\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643\u060c \u0648\u064a\u0645\u0643\u0646\u0643 \u062f\u0627\u0626\u0645\u064b\u0627 \u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0645\u0641\u0627\u0647\u064a\u0645 \u0623\u0639\u0645\u0642 \u0645\u062b\u0644 JavaScript \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0648\u0627\u0644\u0640 CSS Grid \u0644\u062a\u062d\u0633\u064a\u0646 \u062a\u062c\u0631\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0648\u062a\u0648\u0633\u064a\u0639 \u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a \u0645\u0648\u0642\u0639\u0643.","publisher":{"@id":"#Publisher","@type":"Organization","name":"\u0645\u0631\u0643\u0632 \u062d\u0644\u0648\u0644 \u062a\u0643\u0646\u0648\u0644\u0648\u062c\u064a\u0627 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a","logo":{"@type":"ImageObject","url":"https:\/\/it-solutions.center\/wp-content\/uploads\/2024\/05\/it-solutions-center-high-resolution-logo-white-transparent.png"}},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/it-solutions.center\/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"IT-Solutions","url":"https:\/\/it-solutions.center\/author\/ayoob\/"}}</script>
<div id="share-buttons-bottom" class="share-buttons share-buttons-bottom">
<div class="share-links share-centered icons-only">
<a href="https://www.facebook.com/sharer.php?u=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&url=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&title=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&name=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&description=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&title=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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="https://web.skype.com/share?url=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&text=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&redirect_uri=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&redirect_uri=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&text=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&body=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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="stream-item stream-item-below-post"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
<div class="post-components">
<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">
<h3 class="post-title"><a href="https://it-solutions.center/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%b5%d8%ad%d9%8a%d8%ad-%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-node-js-%d8%af%d9%88%d9%86-%d9%88%d8%ac%d9%88%d8%af-%d8%a7%d9%84%d9%83%d9%88%d8%af-%d9%81%d9%8a-%d8%a7/">كيفية تصحيح أخطاء Node.js دون وجود الكود في الـ stack trace</a></h3>
<div class="post-meta clearfix"><span class="date meta-item tie-icon">12/03/2024</span></div><!-- .post-meta --> </div><!-- .related-item /-->
<div class="related-item tie-standard">
<h3 class="post-title"><a href="https://it-solutions.center/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d8%ac%d8%b2%d8%a1-%d9%85%d8%ad%d8%af%d8%af-%d9%81%d9%8a-excel-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-vba/">تغيير خصائص جزء محدد في Excel باستخدام VBA</a></h3>
<div class="post-meta clearfix"><span class="date meta-item tie-icon">03/04/2024</span></div><!-- .post-meta --> </div><!-- .related-item /-->
<div class="related-item tie-standard">
<h3 class="post-title"><a href="https://it-solutions.center/%d8%ad%d9%84-%d9%85%d8%b4%d9%83%d9%84%d8%a9-%d8%aa%d9%88%d9%82%d9%81-%d8%a7%d9%84%d8%b9%d8%af-%d8%a7%d9%84%d8%aa%d9%86%d8%a7%d8%b2%d9%84%d9%8a-%d9%81%d9%8a-java/">حل مشكلة توقف العد التنازلي في Java</a></h3>
<div class="post-meta clearfix"><span class="date meta-item tie-icon">19/02/2024</span></div><!-- .post-meta --> </div><!-- .related-item /-->
<div class="related-item tie-standard">
<h3 class="post-title"><a href="https://it-solutions.center/%d8%aa%d8%ae%d8%b5%d9%8a%d8%b5-%d9%86%d9%85%d9%88%d8%b0%d8%ac-%d8%a7%d9%84%d9%85%d8%b3%d8%aa%d8%ae%d8%af%d9%85-%d9%81%d9%8a-django-%d8%a3%d9%81%d8%b6%d9%84-%d8%a7%d9%84%d9%85%d9%85%d8%a7%d8%b1%d8%b3/">تخصيص نموذج المستخدم في Django: أفضل الممارسات</a></h3>
<div class="post-meta clearfix"><span class="date meta-item tie-icon">14/02/2024</span></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-left">
<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 posts-list-big-first has-first-big-post">
<ul class="posts-list-items">
<li class="widget-single-post-item widget-post-list tie-standard">
<div class="post-widget-body no-small-thumbs">
<a class="post-title the-subtitle" href="https://it-solutions.center/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d9%83%d8%aa%d8%a7%d8%a8%d8%a9-%d8%aa%d8%b9%d8%b1%d9%81-%d8%b9%d9%84%d9%89-%d9%86%d8%b8%d8%a7%d9%85-%d8%a7%d9%84%d8%aa%d8%b4%d8%ba%d9%8a%d9%84-%d9%81%d9%8a-c/">كيفية كتابة تعرف على نظام التشغيل في C#</a>
<div class="post-meta">
<span class="date meta-item tie-icon">05/03/2024</span> </div>
</div>
</li>
</ul><!-- .related-posts-list /-->
</div>
</div><!-- #related-posts /-->
</div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style="">
<div class="stream-item stream-item-in-post stream-item-in-post-1"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3293364314201893"
crossorigin="anonymous"></script>
<!-- defults -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3293364314201893"
data-ad-slot="2303082872"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div></div>
<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 site-info-layout-2">
<div class="container">
<div class="tie-row">
<div class="tie-col-md-12">
<div class="copyright-text copyright-text-first">جميع الحقوق محفوظة مركز حلول تكنولوجيا المعلومات</div><ul class="social-icons"></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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86&url=https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://api.whatsapp.com/send?text=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86%20https://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/" 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://it-solutions.center/%d8%aa%d8%a3%d9%84%d9%82-%d9%81%d9%8a-%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d9%88%d9%82%d8%b9-%d9%88%d9%8a%d8%a8-%d9%85%d8%b0%d9%87%d9%84-%d8%a8%d9%80-html-%d9%88css-%d8%af%d9%84%d9%8a%d9%84-%d8%b4/&text=%D8%AA%D8%A3%D9%84%D9%82%20%D9%81%D9%8A%20%D8%A5%D9%86%D8%B4%D8%A7%D8%A1%20%D9%85%D9%88%D9%82%D8%B9%20%D9%88%D9%8A%D8%A8%20%D9%85%D8%B0%D9%87%D9%84%20%D8%A8%D9%80%20HTML%20%D9%88CSS%3A%20%D8%AF%D9%84%D9%8A%D9%84%20%D8%B4%D8%A7%D9%85%D9%84%20%D9%84%D9%84%D9%85%D8%A8%D8%AA%D8%AF%D8%A6%D9%8A%D9%86" 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> </div><!-- .share-links /-->
</div><!-- .share-buttons /-->
<div class="mobile-share-buttons-spacer"></div>
<a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body">
<span class="tie-icon-angle-up"></span>
<span class="screen-reader-text">زر الذهاب إلى الأعلى</span>
</a>
</div><!-- #tie-wrapper /-->
<aside class=" side-aside normal-side dark-skin dark-widgetized-area is-fullwidth appear-from-left" 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://it-solutions.center/">
<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="hide-menu-icons">
</div><!-- #mobile-menu /-->
<div id="mobile-social-icons" class="social-icons-widget solid-social-icons">
<ul></ul>
</div><!-- #mobile-social-icons /-->
</div><!-- #mobile-container /-->
</div><!-- .side-aside-wrapper /-->
</aside><!-- .side-aside /-->
</div><!-- #tie-container /-->
</div><!-- .background-overlay /-->
<!--googleoff: all--><div id="cookie-law-info-bar" data-nosnippet="true"><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.</br><div class="wt-cli-ccpa-element"> <a style="color:#333333" class="wt-cli-ccpa-opt-out">Do not sell my personal information</a>.</div></div><div class="cli-bar-btn_container"><a role='button' class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin:0px 10px 0px 5px">Settings</a><a role='button' data-cli_action="accept" id="cookie_action_close_header" class="medium cli-plugin-button cli-plugin-main-button cookie_action_close_header cli_action_button wt-cli-accept-btn">Accept</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true">
<div class="cli-modal-dialog" role="document">
<div class="cli-modal-content cli-bar-popup">
<button type="button" class="cli-modal-close" id="cliModalClose">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg>
<span class="wt-cli-sr-only">Close</span>
</button>
<div class="cli-modal-body">
<div class="cli-container-fluid cli-tab-container">
<div class="cli-row">
<div class="cli-col-12 cli-align-items-stretch cli-px-0">
<div class="cli-privacy-overview">
<h4>Privacy Overview</h4> <div class="cli-privacy-content">
<div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.</div>
</div>
<a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a> </div>
</div>
<div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container">
<div class="cli-tab-section">
<div class="cli-tab-header">
<a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab">
Necessary </a>
<div class="wt-cli-necessary-checkbox">
<input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked" />
<label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label>
</div>
<span class="cli-necessary-caption">Always Enabled</span>
</div>
<div class="cli-tab-content">
<div class="cli-tab-pane cli-fade" data-id="necessary">
<div class="wt-cli-cookie-description">
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information. </div>
</div>
</div>
</div>
<div class="cli-tab-section">
<div class="cli-tab-header">
<a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="non-necessary" data-toggle="cli-toggle-tab">
Non-necessary </a>
<div class="cli-switch">
<input type="checkbox" id="wt-cli-checkbox-non-necessary" class="cli-user-preference-checkbox" data-id="checkbox-non-necessary" checked='checked' />
<label for="wt-cli-checkbox-non-necessary" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Non-necessary</span></label>
</div>
</div>
<div class="cli-tab-content">
<div class="cli-tab-pane cli-fade" data-id="non-necessary">
<div class="wt-cli-cookie-description">
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cli-modal-footer">
<div class="wt-cli-element cli-container-fluid cli-tab-container">
<div class="cli-row">
<div class="cli-col-12 cli-align-items-stretch cli-px-0">
<div class="cli-tab-footer wt-cli-privacy-overview-actions">
<a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div>
<div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div>
<!--googleon: all--><div id="reading-position-indicator"></div><div id="autocomplete-suggestions" class="autocomplete-suggestions"></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://it-solutions.center/">
<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" id="wpo_min-footer-0-js-extra">
/* <![CDATA[ */
var wpcf7 = {"api":{"root":"https:\/\/it-solutions.center\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"};
var tie = {"is_rtl":"1","ajaxurl":"https:\/\/it-solutions.center\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"1","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","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\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"","lang_no_results":"\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0646\u062a\u0627\u0626\u062c","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""};
/* ]]> */
</script>
<script type="text/javascript" src="https://it-solutions.center/wp-content/cache/wpo-minify/1715681435/assets/wpo-minify-footer-e16b372e.min.js" id="wpo_min-footer-0-js"></script>
<script>
WebFontConfig ={
google:{
families: [ 'Changa::latin&display=swap' ]
}
};
(function(){
var wf = document.createElement('script');
wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.defer = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script><script type="text/javascript">
jQuery.ajax({
type : "GET",
url : "https://it-solutions.center/wp-admin/admin-ajax.php",
data : "postviews_id=368772&action=tie_postviews",
cache: !1,
success: function( data ){
jQuery(".single-post-meta").find(".meta-views").html( data );
}
});
</script>
</body>
</html>
