Inspirational journeys

Follow the stories of academics and their research expeditions

Dasar-Dasar Pemograman HTML

Annisa Nanda Pertiwi

Tue, 30 Dec 2025

HTML atau Hypertext Markup Language merupakan sebuah bahasa pemograman yang menggunakan markup atau penanda untuk membuat halaman web. HTML mempunyai peran untuk menentukan struktur tampilan dan konten dalam sebuah website.

Untuk mempelajari HTML, kita perlu menyiapkan 2 tools, yaitu text editor dan browser. Text editor berfungsi untuk menuliskan syntax dalam proses coding. Browser berguna untuk melihat hasil kode yang sudah dibuat. Text editor yang digunakan untuk belajar HTML yaitu, Notepad++, atau Visual Studio Code. Sementara itu untuk browser kita bisa menggunakan Firefox, Edge, atau Chrome.

Setelah menyiakan tools yang dibutuhkan, langkah-langkah yang akan dikerjakan untuk membuat pemograman HTML dasar yaitu:

  1. Buat folder tempat anda menyimpan file latihan pengenalan dasar HTML
  2. Buatlah coding/script HTML dengan editor NotePad++ atau Visual Studio Code
  3. Gunakan browser untuk melihat hasil tampilan dari coding/script HTML yang telah dibuat.

Siapkan file HTML pertama mu        

Setelah menyiapkan semua langkah-langkah diatas, lalu setelahnya buka aplikasi text editor yang kamu gunakan. Kemudian ketik kode di bawah ini.





    

        Belajar Dasar HTML Bersama Inatechno

    

    

        
Hello Sobat Ina


   

Jika sudah selesai mengetik, simpan file dengan nama index.html.

Untuk melihat hasilnya kamu bisa klik dua kali file yang sudah kamu buat dengan menggunakan browser. Maka akan muncul tulisan “Hello Sobat Ina”.

Jika sudah di jalankan mari kita bedah Code diatas






    

  1. pada baris pertama terdapat code   yang menandakan bahwa HTML yang digunakan adalah versi 5.
    2. 




  2.  tag  wajib ada dalam setiap dokumen HTML tanpa menggunakan tag ini file HTML tidak dapat di jalankan. Atribut lang=”en” menyatakan bahwa dokumen yang dibuat menggunakan bahasa Inggris. Jadi fungsi dari atribut ini untuk mendeklarasikan bahasa dari suatu halaman website.
    3. 




  3. Head adalah elemen yang berfungsi menjadi wadah dari elemen metadata (informasi-informasi halaman web yang tidak ditampilkan pada halaman tersebut)  lainnya seperti tag , <meta>, <style>, dan </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Elemen <title>, berfungsi untuk membuat title atau judul yang tampil pada title bar di web browser seperti chrome, edge dan lainnya.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Elemen body merupakan elemen yang menentukan konten utama dokumen HTML yang muncul di browser, elemen apapun itu, baik gambar, judul, paragraf, tabel, dan lainnya, yang diletakkan dalam elemen ini akan muncul, bahkan teks yang tidak dibungkus oleh elemen sekalipun.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><p>Hello Sobat Ina</p>, elemen <p> atau paragraf yang merupakan elemen dasar dari sebuah dokumen teks.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->                    </div>

                    

                                        <h1>0 Comments</h1>
                                        <div class="comment instructor-student-feed-back">
                        <h1>Leave a comment</h1>
                        <div class="row">
                            <div class="col-lg-12">
                                <form action="https://inatechno.id/blog/add_blog_comment/19" method="post" class="feedback-form">
                                    <div class="single-input mb-3">
                                        <textarea name="comment" class="form-control" placeholder="Enter your comments here"></textarea>
                                        <input type="hidden" name="parent_id" value="">
                                    </div>
                                    <button type="submit" class="message-btn px-5">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    
<div class="right-section">
    <div class="search">
        <div class="search-bar">
            <form action="https://inatechno.id/blogs" method="get">
                <button type="submit" class="search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                <input value="" type="text" name="search" class="form-control" placeholder="Type your keywords" id="search-place">
            </form>
        </div>
    </div>
    <div class="title">
        <h4>Kategori</h4>
    </div>
    <div class="categories mb-4">
        <ul>
                                            <li class="d-flex align-items-center">
                    <a href="https://inatechno.id/blogs?category=web-apps" class="me-1">Web Apps</a>
                                            <span class="badge bg-primary rounded-pill ms-auto">14</span>
                                    </li>
                                            <li class="d-flex align-items-center">
                    <a href="https://inatechno.id/blogs?category=mobile-apps" class="me-1">Mobile Apps</a>
                                            <span class="badge bg-primary rounded-pill ms-auto">8</span>
                                    </li>
                                            <li class="d-flex align-items-center">
                    <a href="https://inatechno.id/blogs?category=digital-marketing" class="me-1">Digital Marketing</a>
                                            <span class="badge bg-primary rounded-pill ms-auto">3</span>
                                    </li>
                                            <li class="d-flex align-items-center">
                    <a href="https://inatechno.id/blogs?category=robotics" class="me-1">Robotics</a>
                                            <span class="badge bg-primary rounded-pill ms-auto">1</span>
                                    </li>
                    </ul>
        <a class="text-14px mx-0 mt-4 text-muted" href="https://inatechno.id/blog/categories">Semua kategori</a>
    </div>
    <div class="title">
        <h4>Recent posts</h4>
    </div>

            <div class="post">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-8 col-12">
                   <a href="https://inatechno.id/blog/details/otomatisasi-pengiriman-pesan-whatsapp-massal-dengan-python/44"><h5>Otomatisasi Pengiriman Pesan WhatsApp Massal dengan Python</h5></a>
                   <p><i class="fa-solid fa-calendar-days"></i> Tue, 29 Apr 2025</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                                                <img loading="lazy" src="https://inatechno.id/uploads/blog/thumbnail/placeholder.png" alt="Otomatisasi Pengiriman Pesan WhatsApp Massal dengan Python">
                                    </div>
            </div>
        </div>
            <div class="post">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-8 col-12">
                   <a href="https://inatechno.id/blog/details/tips-untuk-memaksimalkan-strategi-whatsapp-blast-marketing/43"><h5>Tips Untuk Memaksimalkan Strategi WhatsApp Blast Marketing</h5></a>
                   <p><i class="fa-solid fa-calendar-days"></i> Sat, 26 Apr 2025</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                                                <img loading="lazy" src="https://inatechno.id/uploads/blog/thumbnail/080a25c65a476a620bc89a73afe4bc56.png" alt="Tips Untuk Memaksimalkan Strategi WhatsApp Blast Marketing">
                                    </div>
            </div>
        </div>
            <div class="post">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-8 col-12">
                   <a href="https://inatechno.id/blog/details/10-tips-bermanfaat-untuk-memaksimalkan-strategi-whatsapp-blast-marketing/42"><h5>10 Tips Bermanfaat untuk Memaksimalkan Strategi WhatsApp Blast Marketing</h5></a>
                   <p><i class="fa-solid fa-calendar-days"></i> Fri, 25 Apr 2025</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                                                <img loading="lazy" src="https://inatechno.id/uploads/blog/thumbnail/a73393f9273694b51821e4e1e102d332.png" alt="10 Tips Bermanfaat untuk Memaksimalkan Strategi WhatsApp Blast Marketing">
                                    </div>
            </div>
        </div>
                                                    
</div>                </div>
            </div>
        </div>
    </div>
</section><!--------- footer Section Start--------------->
<section class="footer wow  animate__animated animate__fadeIn" data-wow-duration="1000" data-wow-delay="500" data-wow-duration="1000" data-wow-delay="600">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-12 col-sm-12 col-12">
        <img loading="lazy" src="https://inatechno.id/uploads/system/logo-light.png">
        <p>Pelajari training apa saja, kapan saja dan dimana saja. jelajahi semua training terbaik dengan harga terjangkau yang pernah ada!</p>
        <div class="lattest-news newFooterlatest">
          <h1>Berlangganan newsletter kami</h1>
          <form class="ajaxForm resetable" action="https://inatechno.id/home/subscribe_to_our_newsletter" method="post" id="newsletter-form">
            <input type="email" class="form-control" id="subscribe_email" placeholder="Masukkan alamat email Anda" name="email">
                          <button class="form-arrow" type="submit"><i class="fa-solid fa-arrow-right-long"></i></button>
                      </form>
        </div>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5">
        <h1>Top Kategori</h1>
        <ul>
                                              <li>
                <a href="https://inatechno.id/home/courses?category=kotlin">
                  Kotlin                </a>
              </li>
                                                <li>
                <a href="https://inatechno.id/home/courses?category=java">
                  Java                </a>
              </li>
                                                <li>
                <a href="https://inatechno.id/home/courses?category=data-science-basic">
                  Data Science Basic                </a>
              </li>
                                                <li>
                <a href="https://inatechno.id/home/courses?category=video-editing">
                  Video Editing                </a>
              </li>
                                                <li>
                <a href="https://inatechno.id/home/courses?category=laravel">
                  Laravel                </a>
              </li>
                                                <li>
                <a href="https://inatechno.id/home/courses?category=ui-ux">
                  UI | UX Design                </a>
              </li>
                      
        </ul>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6 col-6 mb-5">
        <h1>Tautan yang bermanfaat</h1>
        <ul>
                      <li> <a href="https://inatechno.id/home/become_an_instructor">Menjadi seorang instruktur</a></li>
                    <li> <a href="https://inatechno.id/blog">Blog</a></li>
          <li><a href="https://inatechno.id/home/courses">Semua Training</a></li>
          <li><a href="https://inatechno.id/sign_up">Daftar</a></li>
                            </ul>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5">
        <h1>Bantuan</h1>
        <ul>
          <li><a href="https://inatechno.id/home/contact_us">Hubungi kami</a></li>
          <li><a href="https://inatechno.id/home/about_us">Tentang kami</a></li>
          <li><a href="https://inatechno.id/home/privacy_policy">Kebijakan pribadi</a></li>
          <li><a href="https://inatechno.id/home/terms_and_condition">Syarat dan ketentuan</a></li>
          <li><a href="https://inatechno.id/home/faq">Faq</a></li>
          <li><a href="https://inatechno.id/home/refund_policy">Kebijakan pengembalian</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="eBottomfooter">
    <div class="container">
      <div class="row ">
        <div class="col-lg-6 col-md-12">
          <div>
            <p>Inatechno</p>
          </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <ul class="nav gap-3 justify-content-end">
            <li class="nav-item">
              <a target="_blank" href="https://www.instagram.com/inatechno.id/">
                <svg width="19" height="19" id="instagram" fill="white" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 169.063 169.063" style="enable-background:new 0 0 169.063 169.063;" xml:space="preserve">
                  <g>
                    <path d="M122.406,0H46.654C20.929,0,0,20.93,0,46.655v75.752c0,25.726,20.929,46.655,46.654,46.655h75.752
                      c25.727,0,46.656-20.93,46.656-46.655V46.655C169.063,20.93,148.133,0,122.406,0z M154.063,122.407
                      c0,17.455-14.201,31.655-31.656,31.655H46.654C29.2,154.063,15,139.862,15,122.407V46.655C15,29.201,29.2,15,46.654,15h75.752
                      c17.455,0,31.656,14.201,31.656,31.655V122.407z"></path>
                    <path d="M84.531,40.97c-24.021,0-43.563,19.542-43.563,43.563c0,24.02,19.542,43.561,43.563,43.561s43.563-19.541,43.563-43.561
                      C128.094,60.512,108.552,40.97,84.531,40.97z M84.531,113.093c-15.749,0-28.563-12.812-28.563-28.561
                      c0-15.75,12.813-28.563,28.563-28.563s28.563,12.813,28.563,28.563C113.094,100.281,100.28,113.093,84.531,113.093z"></path>
                    <path d="M129.921,28.251c-2.89,0-5.729,1.17-7.77,3.22c-2.051,2.04-3.23,4.88-3.23,7.78c0,2.891,1.18,5.73,3.23,7.78
                      c2.04,2.04,4.88,3.22,7.77,3.22c2.9,0,5.73-1.18,7.78-3.22c2.05-2.05,3.22-4.89,3.22-7.78c0-2.9-1.17-5.74-3.22-7.78
                      C135.661,29.421,132.821,28.251,129.921,28.251z"></path>
                  </g>
                </svg>

              </a>
            </li>
            <li class="nav-item">
              <a target="_blank" href="https://web.facebook.com/Inatechnofficial/">
                <i class="fa-brands fa-facebook-f"></i>

              </a>
            </li>

            <li class="nav-item">
              <a target="_blank" href="https://www.linkedin.com/company/inatechno">
                <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_22_923)">
                    <path d="M17.5135 0H1.40624C0.634655 0 0.0107422 0.580074 0.0107422 1.29726V16.6991C0.0107422 17.4163 0.634655 17.9999 1.40624 17.9999H17.5135C18.2851 17.9999 18.9127 17.4163 18.9127 16.7026V1.29726C18.9127 0.580074 18.2851 0 17.5135 0ZM5.61858 15.3386H2.81281V6.74644H5.61858V15.3386ZM4.21569 5.57574C3.3149 5.57574 2.58761 4.88317 2.58761 4.02888C2.58761 3.17459 3.3149 2.48201 4.21569 2.48201C5.1128 2.48201 5.84008 3.17459 5.84008 4.02888C5.84008 4.87965 5.1128 5.57574 4.21569 5.57574ZM16.118 15.3386H13.316V11.162C13.316 10.1671 13.2975 8.88392 11.8577 8.88392C10.3994 8.88392 10.1779 9.97025 10.1779 11.0917V15.3386H7.37956V6.74644H10.0672V7.92065H10.1041C10.477 7.24565 11.3925 6.53199 12.7548 6.53199C15.5938 6.53199 16.118 8.31088 16.118 10.6241V15.3386Z" fill="white" />
                  </g>
                  <defs>
                    <clipPath id="clip0_22_923">
                      <rect width="18.902" height="17.9999" fill="white" transform="translate(0.0107422)" />
                    </clipPath>
                  </defs>
                </svg>

              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
<!--------- footer Section End--------------->

<!-- PAYMENT MODAL -->
<!-- Modal -->


<script>
  $('document').ready(function() {
    new WOW().init();
  });
</script>

<script>
  function onSubmit(token) {
    document.getElementById("newsletter-form").submit();
  }
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.view-more-btn').forEach(function(button) {
      button.addEventListener('click', function() {
        let parent = this.previousElementSibling;
        parent.querySelectorAll('.outcome-item.hidden').forEach(function(item) {
          item.classList.remove('hidden');
        });
        this.style.display = 'none';
      });
    });
  });
</script><script src="https://inatechno.id/assets/frontend/default-new/js/bootstrap.bundle.min.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/berli.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/course.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/jquery.meanmenu.min.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/jquery.nice-select.min.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/jquery.webui-popover.min.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/owl.carousel.min.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/script-2.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/slick.min.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/js/venobox.min.js"></script>

<script src="https://inatechno.id/assets/frontend/default-new/js/wow.min.js"></script>

<script src="https://inatechno.id/assets/frontend/default-new/js/script.js"></script>
<script src="https://inatechno.id/assets/frontend/default-new/summernote-0.8.20-dist/summernote-lite.min.js"></script>




<script src="https://inatechno.id/assets/global/toastr/toastr.min.js"></script>
<script src="https://inatechno.id/assets/global/jquery-form/jquery.form.min.js"></script>
<script src="https://inatechno.id/assets/global/tagify/jquery.tagify.js"></script>

<!-- SHOW TOASTR NOTIFIVATION -->


<script type="text/javascript">
function showAjaxModal(url, title, modalType)
{
    $('#modal_ajax .modal-dialog').removeClass('modal-sm');
    $('#modal_ajax .modal-dialog').removeClass('modal-md');
    $('#modal_ajax .modal-dialog').removeClass('modal-lg');
    $('#modal_ajax .modal-dialog').removeClass('modal-xl');
    $('#modal_ajax .modal-dialog').removeClass('modal-fullscreen');

    if(modalType){
        $('#modal_ajax .modal-dialog').addClass('modal-'+modalType);
    }
    // SHOWING AJAX PRELOADER IMAGE
    jQuery('#modal_ajax .modal-body').html('<div class="w-100 text-center pt-5"><img loading="lazy" class="mt-5 mb-5" width="80px" src="https://inatechno.id/assets/global/gif/page-loader-2.gif"></div>');

    // LOADING THE AJAX MODAL
    jQuery('#modal_ajax').modal('show', {backdrop: 'true'});

    // SHOW AJAX RESPONSE ON REQUEST SUCCESS
    $.ajax({
        url: url,
        success: function(response)
        {
            jQuery('#modal_ajax .title').html(title);
            jQuery('#modal_ajax .modal-body').html(response);
        }
    });
}

function lesson_preview(url, title){
    // SHOWING AJAX PRELOADER IMAGE
    jQuery('#lesson_preview .title').html(title);
    jQuery('#lesson_preview .modal-body').html('<div class="w-100 text-center pt-5"><img loading="lazy" class="mt-5 mb-5" width="80px" src="https://inatechno.id/assets/global/gif/page-loader-2.gif"></div>');

    // LOADING THE AJAX MODAL
    jQuery('#lesson_preview').modal('show', {backdrop: 'true'});

    // SHOW AJAX RESPONSE ON REQUEST SUCCESS
    $.ajax({
        url: url,
        success: function(response)
        {
            jQuery('#lesson_preview .modal-body').html(response);
        }
    });
}
</script>

<!-- (Ajax Modal)-->
<div class="modal fade" id="modal_ajax">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="title text-white"></h5>
                <button type="button" class="btn btn-secondary ms-auto py-0 px-2" data-bs-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body" style="overflow:auto;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default text-white" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="lesson_preview" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true" data-bs-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="title"></h5>
                <button type="button" class="btn btn-secondary ms-auto py-0 px-2" data-bs-dismiss="modal" aria-hidden="true" onclick="player.pause();">×</button>
            </div>
            <div class="modal-body" style="overflow:auto;">
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
function confirm_modal(delete_url)
{
    jQuery('#modal-4').modal('show', {backdrop: 'static'});
    document.getElementById('delete_link').setAttribute('href' , delete_url);
}
</script>

<!-- (Normal Modal)-->
<div class="modal fade" id="modal-4">
    <div class="modal-dialog">
        <div class="modal-content" style="margin-top:100px;">

            <div class="modal-header">
                <h5 class="modal-title text-center">Apa kamu yakin ?</h5>
                <button type="button" class="btn btn-outline-secondary px-1 py-0" data-bs-dismiss="modal" aria-hidden="true"><i class="fas fa-times-circle"></i></button>
            </div>


            <div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;">
                <a href="" class="btn btn-danger btn-yes" id="delete_link">Iya</a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tidak</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
function async_modal() {
    const asyncModal = new Promise(function(resolve, reject){
        $('#modal-4').modal('show');
        $('#modal-4 .btn-yes').click(function(){
            resolve(true);
        });
        $('#modal-4 .btn-cancel').click(function(){
            resolve(false);
        });
    });
    return asyncModal;
}
</script>
<script type="text/javascript">
  $(document).ready(function() {
      });
</script>


<!-- Google analytics -->
<!-- Ended Google analytics -->

<!-- Meta pixel -->
<!-- Ended Meta pixel -->


<script type="text/javascript">
  function redirectTo(url, event){
    $(location).attr('href', url);
  }

  function actionTo(url, type = "get", event) {
    //Start prepare get url to post value
      var jsonFormate = '{}';
      if(type == 'post'){
        let pieces = url.split(/[\s?]+/);
        let lastString = pieces[pieces.length - 1];
        jsonFormate = '{"'+lastString.replace('=', '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","').replace("=", '":"').replace("&", '","')+'"}';
      }
      jsonFormate = JSON.parse(jsonFormate);
    //End prepare get url to post value
    $.ajax({
      type: type,
      url: url,
      data: jsonFormate,
      success: function(response) {
        distributeServerResponse(response);
      }
    });

  }

  //Server response distribute
  function distributeServerResponse(response){
    try {
      JSON.parse(response);
      var isValidJson = true;
    } catch (error) {
      var isValidJson = false;
    }
    if (isValidJson) {
      response = JSON.parse(response);
      //For reload after submission
      if(typeof response.reload != "undefined" && response.reload != 0){
        location.reload();
      }

      //For redirect to another url
      if(typeof response.redirectTo != "undefined" && response.redirectTo != 0){
        $(location).attr('href', response.redirectTo);
      }

      //for show a element
      if(typeof response.show != "undefined" && response.show != 0 && $(response.show).length){
        $(response.show).css('display', 'inline-block');
      }
      //for hide a element
      if(typeof response.hide != "undefined" && response.hide != 0 && $(response.hide).length){
        $(response.hide).hide();
      }
      //for fade in a element
      if(typeof response.fadeIn != "undefined" && response.fadeIn != 0 && $(response.fadeIn).length){
        $(response.fadeIn).fadeIn();
      }
      //for fade out a element
      if(typeof response.fadeOut != "undefined" && response.fadeOut != 0 && $(response.fadeOut).length){
        $(response.fadeOut).fadeOut();
      }

      //For adding a class
      if(typeof response.addClass != "undefined" && response.addClass != 0 && $(response.addClass.elem).length){
        $(response.addClass.elem).addClass(response.addClass.content);
      }
      //For remove a class
      if(typeof response.removeClass != "undefined" && response.removeClass != 0 && $(response.removeClass.elem).length){
        $(response.removeClass.elem).removeClass(response.removeClass.content);
      }
      //For toggle a class
      if(typeof response.toggleClass != "undefined" && response.toggleClass != 0 && $(response.toggleClass.elem).length){
        $(response.toggleClass.elem).toggleClass(response.toggleClass.content);
      }

      //For showing error message
      if(typeof response.error != "undefined" && response.error != 0){
        toastr.error(response.error);
      }
      //For showing success message
      if(typeof response.success != "undefined" && response.success != 0){
        toastr.success(response.success);
      }

      //For replace texts in a specific element
      if(typeof response.text != "undefined" && response.text != 0 && $(response.text.elem).length){
        $(response.text.elem).text(response.text.content);
      }
      //For replace elements in a specific element
      if(typeof response.html != "undefined" && response.html != 0 && $(response.html.elem).length){
        $(response.html.elem).html(response.html.content);
      }
      //For replace elements in a specific element
      if(typeof response.load != "undefined" && response.load != 0 && $(response.load.elem).length){
        $(response.load.elem).html(response.load.content);
      }
      //For replace tech in a specific element
      if(typeof response.tech != "undefined" && response.tech != 0 && $(response.tech.elem).length){
        $(response.tech.elem).text(response.tech.content);
      }
      //For appending elements
      if(typeof response.append != "undefined" && response.append != 0 && $(response.append.elem).length){
        $(response.append.elem).append(response.append.content);
      }
      //Fo prepending elements
      if(typeof response.prepend != "undefined" && response.prepend != 0 && $(response.prepend.elem).length){
        $(response.prepend.elem).prepend(response.prepend.content);
      }
      //For appending elements after a element
      if(typeof response.after != "undefined" && response.after != 0 && $(response.after.elem).length){
        $(response.after.elem).after(response.after.content);
      }

      // Update the browser URL and add a new entry to the history
      if(typeof response.pushState != "undefined" && response.pushState != 0){
        history.pushState({}, response.pushState.title, response.pushState.url);
      }

      if(typeof response.script != "undefined" && response.script != 0){
        script
      }
    }
  }

</script><script type="text/javascript">
	$(function () {

		if($('[data-bs-toggle="tooltip"]').length > 0){
			$('[data-bs-toggle="tooltip"]').tooltip();
		}

		if($('.tagify').length > 0){
			$('.tagify:not(.initialized)').tagify();
			$('.tagify:not(.initialized)').addClass('initialized');
		}

		$('a[href="#"]').on('click', function(event){
	      event.preventDefault();
	    });

	    if($('.text_editor:not(.initialized)').length){
			$('.text_editor:not(.initialized)').summernote({
				height: 180,                 // set editor height
				minHeight: null,             // set minimum height of editor
				maxHeight: null,             // set maximum height of editor
				focus: true                  // set focus to editable area after initializing summernote
			});
			$('.text_editor:not(.initialized)').addClass('initialized');
		}


		//When need to add a wishlist button inside a anchor tag
		$('.checkPropagation').on('click', function(event){
			var action = $(this).attr('action');
			var onclickFunction = $(this).attr('onclick');
			var onChange = $(this).attr('onchange');
			var tag = $(this).prop("tagName").toLowerCase();
			console.log(tag);
			if(tag != 'a' && action){
				$(location).attr('href', $(this).attr('action'));
				return false;
			}else if(onclickFunction){
				if(onclickFunction){
					onclickFunction;					
				}
				return false;
			}else if(tag == 'a'){
				return true;
			}
		});

		//Ajax for submission start
		var formElement;
		if($('.ajaxForm:not(.initialized)').length > 0){
			$('.ajaxForm:not(.initialized)').ajaxForm({
				beforeSend: function(data, form) {
					var formElement = $(form);
				},
				uploadProgress: function(event, position, total, percentComplete) {
				},
				complete: function(xhr) {

					setTimeout(function(){
						distributeServerResponse(xhr.responseText);
					}, 400);

					if($('.ajaxForm.resetable').length > 0){
						$('.ajaxForm.resetable')[0].reset();
					}
				},
				error: function(e)
				{
					console.log(e);
				}
			});
			$('.ajaxForm:not(.initialized)').addClass('initialized');
		}
	});

</script>

    
        </body>

</html>