أساسيات HTML

مرحباً بك في درس أساسيات HTML! HTML (HyperText Markup Language) هي اللغة القياسية لإنشاء صفحات الويب. إنها ليست لغة برمجة، بل هي لغة ترميز تستخدم لتحديد بنية ومحتوى صفحة الويب.

1. ما هو HTML؟

HTML تخبر المتصفح كيف يعرض المحتوى (نصوص، صور، روابط، جداول، إلخ). كل صفحة ويب تراها تتكون من HTML في جوهرها. تستخدم HTML "العلامات" (tags) لتمييز أجزاء مختلفة من المحتوى.

2. البنية الأساسية لصفحة HTML

كل صفحة HTML لها بنية أساسية محددة. إليك مثال:

Code View

<!DOCTYPE html>
    <html lang="ar">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>صفحتي الأولى</title>
    </head>
    <body>
        <h1>مرحباً بالعالم!</h1>
        <p>هذه هي الفقرة الأولى في صفحتي.</p>
    </body>
    </html>

شرح العناصر الأساسية:

: يحدد نوع المستند ويخبر المتصفح أن هذه صفحة HTML5.
: العنصر الجذر لجميع صفحات HTML. يضم كل المحتوى الآخر. السمة lang="ar" تحدد لغة المستند.
: يحتوي على معلومات وصفية عن الصفحة (metadata) التي لا تظهر مباشرة على الصفحة، مثل عنوان الصفحة (الذي يظهر في تبويب المتصفح) وروابط لملفات CSS أو JavaScript.
: يحدد ترميز الأحرف للمستند، وهو ضروري لعرض النصوص بشكل صحيح (خاصة اللغات التي تحتوي على أحرف غير لاتينية مثل العربية).
: مهم لاستجابة التصميم على مختلف الأجهزة.
</code>: يحدد عنوان الصفحة الذي يظهر في شريط عنوان المتصفح أو في تبويب المتصفح.</li> <li><code class="inline-code"><body></code>: يحتوي على كل المحتوى المرئي لصفحة الويب (النصوص، الصور، الروابط، إلخ).</li> </ul> <h2>3. العلامات (Tags) والعناصر (Elements)</h2> <p>تتكون HTML من علامات. معظم العلامات تأتي في أزواج: علامة فتح (مثل <code class="inline-code"><h1></code>) وعلامة إغلاق (مثل <code class="inline-code"></h1></code>). المحتوى بينهما يسمى "عنصر". بعض العلامات هي علامات فارغة (self-closing tags) ولا تتطلب علامة إغلاق، مثل <code class="inline-code"><img></code> و <code class="inline-code"><br></code>.</p> <h2>4. علامات HTML الشائعة</h2> <h3>العناوين (Headings)</h3> <p>تستخدم لتعريف العناوين الرئيسية والفرعية. تتراوح من <code class="inline-code"><h1></code> (الأكثر أهمية) إلى <code class="inline-code"><h6></code> (الأقل أهمية).</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><h1>هذا عنوان رئيسي (H1)</h1> <h2>هذا عنوان فرعي (H2)</h2> <h3>عنوان أصغر (H3)</h3></code></pre></div> <h3>الفقرات (Paragraphs)</h3> <p>تستخدم لإنشاء فقرات نصية عادية.</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><p>هذه فقرة نصية عادية في صفحة الويب.</p> <p>يمكنك كتابة عدة فقرات، وسيقوم المتصفح بإضافة مسافة بينها.</p></code></pre></div> <h3>الروابط (Links)</h3> <p>تستخدم لإنشاء روابط تشعبية تنقل المستخدم إلى صفحة أخرى أو جزء آخر من نفس الصفحة. تستخدم علامة <code class="inline-code"><a></code> (anchor) والسمة <code class="inline-code">href</code> لتحديد الوجهة.</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><a href="https://www.google.com">الذهاب إلى جوجل</a> <a href="/about.html">عن الموقع</a></code></pre></div> <p>يمكنك أيضاً استخدام السمة <code class="inline-code">target="_blank"</code> لفتح الرابط في تبويب جديد.</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><a href="https://www.openai.com" target="_blank">زيارة OpenAI في تبويب جديد</a></code></pre></div> <h3>الصور (Images)</h3> <p>تستخدم لإدراج الصور في صفحة الويب. تستخدم علامة <code class="inline-code"><img></code> وهي علامة فارغة. تتطلب سمتين أساسيتين: <code class="inline-code">src</code> (مصدر الصورة) و <code class="inline-code">alt</code> (نص بديل يظهر إذا لم يتم تحميل الصورة أو لمستخدمي قارئات الشاشة).</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><img src="صورة.jpg" alt="وصف للصورة"> <img src="https://via.placeholder.com/150" alt="صورة توضيحية"></code></pre></div> <h3>القوائم (Lists)</h3> <p>تستخدم لعرض قوائم من العناصر.</p> <h4>قائمة غير مرتبة (Unordered List - <code class="inline-code"><ul></code>)</h4> <p>تستخدم لعرض عناصر بدون ترتيب معين (عادة ما تكون بنقاط).</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><ul> <li>عنصر القائمة الأول</li> <li>عنصر القائمة الثاني</li> <li>عنصر القائمة الثالث</li> </ul></code></pre></div> <h4>قائمة مرتبة (Ordered List - <code class="inline-code"><ol></code>)</h4> <p>تستخدم لعرض عناصر بترتيب معين (عادة ما تكون بأرقام).</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><ol> <li>الخطوة الأولى</li> <li>الخطوة الثانية</li> <li>الخطوة الثالثة</li> </ol></code></pre></div> <h3>عناصر التجميع (Divs and Spans)</h3> <ul> <li><code class="inline-code"><div></code>: عنصر تجميع على مستوى الكتلة (block-level). يستخدم لتجميع أجزاء كبيرة من المحتوى وتطبيق التنسيقات عليها باستخدام CSS.</li> <li><code class="inline-code"><span></code>: عنصر تجميع على مستوى السطر (inline-level). يستخدم لتطبيق التنسيقات على أجزاء صغيرة من النص داخل فقرة أو عنوان.</li> </ul> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><div style="background-color: lightblue; padding: 10px;"> <p>هذا المحتوى داخل عنصر div.</p> <p>يمكنك <span style="color: red; font-weight: bold;">تمييز</span> أجزاء من النص باستخدام span.</p> </div></code></pre></div> <h2>5. السمات (Attributes)</h2> <p>السمات توفر معلومات إضافية عن عناصر HTML. يتم وضعها في علامة الفتح للعنصر، وتتكون من اسم وقيمة (مثال: <code class="inline-code">name="value"</code>).</p> <ul> <li><code class="inline-code">href</code>: تحدد وجهة الرابط (<code class="inline-code"><a href="..."></code>).</li> <li><code class="inline-code">src</code>: تحدد مسار ملف الصورة (<code class="inline-code"><img src="..."></code>).</li> <li><code class="inline-code">alt</code>: نص بديل للصورة (<code class="inline-code"><img alt="..."></code>).</li> <li><code class="inline-code">class</code>: لتحديد فئة للعنصر، تستخدم للتنسيق بواسطة CSS أو التفاعل بواسطة JavaScript.</li> <li><code class="inline-code">id</code>: لتحديد معرف فريد للعنصر، يجب أن يكون فريداً في الصفحة بأكملها.</li> <li><code class="inline-code">style</code>: لتطبيق تنسيقات CSS مباشرة على العنصر (تنسيق داخلي).</li> </ul> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><p class="intro" id="first-paragraph" style="color: blue;">هذه فقرة ذات سمات.</p></code></pre></div> <h2>6. تعليقات HTML (HTML Comments)</h2> <p>تستخدم التعليقات لشرح الكود أو تعطيل أجزاء منه مؤقتاً. لا تظهر التعليقات في المتصفح.</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"> <p>هذه فقرة عادية.</p> </code></pre></div> <h2>7. HTML الدلالية (Semantic HTML)</h2> <p>تساعد عناصر HTML الدلالية على وصف معنى المحتوى بدلاً من مجرد وصف مظهره. هذا يحسن قابلية الوصول (Accessibility) وتحسين محركات البحث (SEO).</p> <ul> <li><code class="inline-code"><header></code>: يمثل مقدمة أو مجموعة من عناصر الملاحة.</li> <li><code class="inline-code"><nav></code>: يمثل قسم الروابط الملاحية.</li> <li><code class="inline-code"><main></code>: يمثل المحتوى الرئيسي الفريد للمستند.</li> <li><code class="inline-code"><article></code>: يمثل محتوى مستقلاً بذاته (مثل مقال مدونة أو منشور منتدى).</li> <li><code class="inline-code"><section></code>: يمثل قسماً مستقلاً من المحتوى.</li> <li><code class="inline-code"><aside></code>: يمثل محتوى ذي صلة بالمحتوى الرئيسي ولكن يمكن عرضه بشكل منفصل (مثل شريط جانبي).</li> <li><code class="inline-code"><footer></code>: يمثل تذييل المستند أو قسمه الأقرب.</li> </ul> <p>مثال على استخدام العناصر الدلالية:</p> <div dir="ltr" style="background:#1e1e1e; border-radius:10px; margin:25px 0; overflow:hidden; border:1px solid #333; text-align:left;"><div style="background:#2d2d2d; padding:10px 15px; display:flex; justify-content:space-between; align-items:center; direction:ltr;"><span style="color:#888; font-size:12px; font-family:sans-serif;">Code View</span><button onclick="var b=this; navigator.clipboard.writeText(b.parentElement.nextElementSibling.innerText); b.innerText='✔ تم'; setTimeout(function(){b.innerText='📋 نسخ';},2000);" style="background:#444; color:#fff; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:12px;">📋 نسخ</button></div><pre style="margin:0; padding:20px; overflow-x:auto; background:#1e1e1e; direction:ltr !important;"><code class="language-javascript" style="font-family:Consolas, monospace; font-size:14px; color:#d4d4d4; line-height:1.5; display:block; text-align:left;"><header> <nav> <a href="/">الرئيسية</a> <a href="/about">عنا</a> </nav> </header> <main> <section> <h1>مرحباً في موقعنا</h1> <p>هذا هو المحتوى الرئيسي.</p> </section> <article> <h2>عنوان المقال</h2> <p>محتوى المقال هنا.</p> </article> </main> <footer> <p>© 2023 حقوق النشر محفوظة.</p> </footer></code></pre></div> <h2>خاتمة</h2> <p>لقد قمت الآن بتغطية أساسيات HTML. هذه هي اللبنات الأساسية لأي صفحة ويب. مع هذه المعرفة، يمكنك البدء في بناء صفحات الويب الخاصة بك. الخطوة التالية هي تعلم CSS لتصميم صفحاتك وجعلها تبدو جميلة، ثم JavaScript لجعلها تفاعلية!</p> </div></div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script>setTimeout(function(){document.querySelectorAll('pre code').forEach(el=>{hljs.highlightElement(el);});},1000);</script> <div style="display: flex; justify-content: space-between; margin-top: 40px; padding: 20px; border-top: 1px solid #eee; direction: rtl;"><a href="https://www.jawarablog.com/2026/05/html-editors_0735246598.html" style="background:#6c757d; color:#fff; padding:8px 15px; border-radius:5px; text-decoration:none;">← السابق</a><a href="https://www.jawarablog.com/p/html-course-index.html" style="color:#007bff; text-decoration:none;">الفهرس</a><a href="https://www.jawarablog.com/2026/05/paragraphs-in-html_099228465.html" style="background:#1a73e8; color:#fff; padding:8px 15px; border-radius:5px; text-decoration:none;">التالي →</a></div></div> </article> </div> </div></div> </div> </div> </div> <footer class='footer-section border-top py-4 bg-white'> <div class='container text-center'> <div class='admin-links mb-2'> <a class='text-muted mx-3 text-decoration-none small' href='/p/terms-and-conditions.html'>شروط الاستخدام</a> <a class='text-muted mx-3 text-decoration-none small' href='/p/disclaimer.html'>إخلاء المسؤولية</a> <a class='text-muted mx-3 text-decoration-none small' href='/p/privacy-policy.html'>سياسة الخصوصية</a> </div> <p class='text-muted mb-0 small'>© 2026 مدونة جوارا</p> </div> </footer> <script defer='defer' src='https://code.jquery.com/jquery-3.6.0.min.js'></script> <script type='text/javascript'> //<![CDATA[ window.addEventListener('DOMContentLoaded', function() { // إصلاح القائمة في الجوال $('#mobile-menu-btn').on('click', function(e){ e.stopPropagation(); $('#mobile-menu').toggleClass('active'); $(this).find('i').toggleClass('fa-bars fa-xmark'); }); $(document).on('click', function(e) { if (!$(e.target).closest('#mobile-menu, #mobile-menu-btn').length) { $('#mobile-menu').removeClass('active'); $('#mobile-menu-btn i').addClass('fa-bars').removeClass('fa-xmark'); } }); $(window).scroll(function() { if ($(this).scrollTop() > 300) { $('#backToTop').fadeIn(); } else { $('#backToTop').fadeOut(); } }); }); //]]> </script> <div id='backToTop' onclick='window.scrollTo({top: 0, behavior: "smooth"});' style='position: fixed; bottom: 20px; right: 20px; background: #0d6efd; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: none; text-align: center; line-height: 40px; cursor: pointer; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.2);'>↑</div> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/654365252-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AAVkm1uI9dwX9ei5SPxtXTQRNzPo:1778499273898';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1884567730976316944','//www.jawarablog.com/2026/05/html-basics-technical-lesson.html','1884567730976316944'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1884567730976316944', 'title': '\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627', 'url': 'https://www.jawarablog.com/2026/05/html-basics-technical-lesson.html', 'canonicalUrl': 'https://www.jawarablog.com/2026/05/html-basics-technical-lesson.html', 'homepageUrl': 'https://www.jawarablog.com/', 'searchUrl': 'https://www.jawarablog.com/search', 'canonicalHomepageUrl': 'https://www.jawarablog.com/', 'blogspotFaviconUrl': 'https://www.jawarablog.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'ar', 'localeUnderscoreDelimited': 'ar', 'languageDirection': 'rtl', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - Atom\x22 href\x3d\x22https://www.jawarablog.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - RSS\x22 href\x3d\x22https://www.jawarablog.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1884567730976316944/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627 - Atom\x22 href\x3d\x22https://www.jawarablog.com/feeds/5106266242541276880/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-5381666393741404', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'isGoogleEverywhereLinkTooltipEnabled': true, 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/67692f944efa753a', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': '\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637', 'key': 'link', 'shareMessage': '\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 Facebook', 'target': 'facebook'}, {'name': '\u0643\u062a\u0627\u0628\u0629 \u0645\u062f\u0648\u0646\u0629 \u062d\u0648\u0644 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629', 'key': 'blogThis', 'shareMessage': '\u0643\u062a\u0627\u0628\u0629 \u0645\u062f\u0648\u0646\u0629 \u062d\u0648\u0644 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 Pinterest', 'target': 'pinterest'}, {'name': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'key': 'email', 'shareMessage': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27ar\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '5106266242541276880', 'postImageUrl': '...', 'pageName': '\u0623\u0633\u0627\u0633\u064a\u0627\u062a HTML', 'pageTitle': '\u0645\u062f\u0648\u0646\u0629 \u062c\u0648\u0627\u0631\u0627: \u0623\u0633\u0627\u0633\u064a\u0627\u062a HTML', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': '\u062a\u0639\u062f\u064a\u0644', 'linkCopiedToClipboard': '\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0631\u0627\u0628\u0637 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0641\u0638\u0629', 'ok': '\u062d\u0633\u0646\u064b\u0627', 'postLink': '\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': '\u0645\u062e\u0635\u0635', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': '\u0623\u0633\u0627\u0633\u064a\u0627\u062a HTML', 'description': '\u062a\u0642\u0646\u064a\u0629 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a\u060c \u0627\u0644\u062d\u0648\u0633\u0628\u0629 \u0627\u0644\u0633\u062d\u0627\u0628\u064a\u0629\u060c \u0627\u0644\u0623\u0645\u0646 \u0627\u0644\u0633\u064a\u0628\u0631\u0627\u0646\u064a\u060c \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u0648\u0627\u0644\u0628\u0631\u0645\u062c\u0629.', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v7lXoD3b3UZlBhNgz-ru-UU3qUHCXEMuMeuevqnZIASoDdfzBKy19tljla', 'url': 'https://www.jawarablog.com/2026/05/html-basics-technical-lesson.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5106266242541276880}}]); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3943208901-lbx__ar.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle_rtl.css'}, 'displayModeFull')); </script> </body> </html>