Belajar Membuat Web dengan HTML dan CSS: Tips dan Trik! – Halo Sahabat Softize, jika kamu ingin membuat web HTML CSS, maka ada beberapa hal yang perlu kamu ketahui. Dalam pembuatan web ini, kamu tentunya membutuhkan software atau aplikasi edit HTML CSS seperti Sublime Text atau Dreamweaver. Selain itu, kamu juga harus memahami bahasa markup HTML dan styling CSS.

Langkah pertama dalam pembuatan web HTML CSS adalah membuat struktur HTML. Setiap halaman pada web selalu dimulai dengan tag <html> dan diakhiri dengan tag </html>. Di dalam tag HTML, terdapat tag <head> untuk menambahkan informasi penting tentang halaman seperti judul dan tag penghubung CSS. Di bagian body, kamu bisa menambahkan elemen seperti gambar, video, dan teks beserta gaya styling-nya menggunakan CSS.

Dalam pembuatan web HTML CSS, target utamanya adalah agar web terlihat menarik dan mudah digunakan oleh pengunjung. Oleh karena itu, kamu perlu memperhatikan desain web secara menyeluruh mulai dari tata letak, warna, dan tipografi. Pastikan web memiliki tampilan yang responsive agar bisa diakses dengan baik melalui berbagai jenis perangkat.

Secara singkat, untuk membuat web HTML CSS kamu memerlukan software edit HTML CSS, memahami bahasa markup HTML dan CSS, membuat struktur HTML, menambahkan elemen dengan gaya styling, memperhatikan desain web secara keseluruhan, dan membuat web yang responsif. Jangan lupa selalu mencari referensi dari sumber terpercaya dan jangan ragu untuk eksperimen dengan berbagai elemen dan gaya styling kekinian.

Cara Membuat Web Html Css – Langkah-langkah

Pengenalan Cara Membuat Web Html Css

Cara membuat web HTML CSS adalah sebuah metode yang banyak digunakan oleh pengembang web di seluruh dunia. HTML dan CSS merupakan bahasa markup dan styling yang digunakan untuk mengembangkan situs web yang berkualitas. HTML digunakan untuk menentukan struktur dan konten dari halaman web sedangkan CSS digunakan untuk mengontrol tata letak dan tampilan visual dari halaman web.

Tujuan Cara Membuat Web Html Css

Tujuan utama dalam membuat web HTML CSS adalah untuk menghasilkan situs web yang dapat dibuka pada berbagai perangkat dan juga untuk memastikan bahwa halaman web dapat diakses dengan mudah dan cepat. Tujuan lainnya adalah untuk menghasilkan situs web yang memiliki desain yang menarik, mudah dipahami dan digunakan oleh pengunjung.

Logika Dasar dari Cara Membuat Web Html Css

Untuk membuat web HTML CSS, hal pertama yang harus dilakukan adalah membangun struktur HTML. Struktur HTML mencakup tag elemen seperti

, , dll. Kemudian, gunakan CSS untuk menambahkan gaya dan tata letak ke halaman web melalui penggunaan properti seperti font-size, background-color, dan margin.

Tabel Daftar Coding Cara Membuat Web Html Css

Kode HTML	Deskripsi
<html>	Tag pembuka dokumen HTML
<head>	Tempat untuk menambahkan informasi tentang halaman
<body>	Bagian utama dari halaman web
<p>	Elemen untuk menentukan paragraf pada halaman
<div>	Elemen untuk mengelompokkan konten pada halaman
<span>	Elemen untuk menentukan bagian kecil teks pada halaman

Fungsi dan Prosedur Cara Membuat Web Html Css

Fungsi utama dalam membuat web HTML CSS adalah membuat struktur HTML dan melakukan styling menggunakan CSS. Ada beberapa prosedur yang harus dilakukan, antara lain menentukan max-width, menentukan font-size dan color, menambahkan background-color dan border, dsb. Semua hal tersebut harus didefinisikan secara rinci dan terperinci melalui penggunaan CSS.

Studi Kasus dari Cara Membuat Web Html Css

Sebagai studi kasus, Anda bisa mengembangkan situs web untuk bisnis online atau blog dengan menggunakan HTML dan CSS. Pastikan untuk menentukan struktur yang tepat, tata letak yang baik, serta konten yang berkualitas agar pengunjung dapat menemukan informasi dengan mudah.

Urutan Tugas dalam Cara Membuat Web Html Css

Berikut adalah urutan tugas dalam membuat web HTML CSS:1. Membuat struktur HTML dasar dari halaman web2. Menentukan tata letak dan styling dengan CSS3. Melakukan optimasi dan pengujian halaman web4. Melakukan publikasi halaman web ke internetContoh-contoh:- Menambahkan background-color pada elemen :

body {  background-color: #f0f0f0;}

– Menentukan font-size dan color untuk tag <h1> :

h1 {  font-size: 36px;  color: #333;}

Dengan mengikuti urutan tugas di atas, dapat memudahkan proses pembuatan halaman web menggunakan HTML CSS.

Contoh Tugas dari Cara Membuat Web Html Css

Tugasnya adalah membuat halaman web sederhana dengan menggunakan HTML dan CSS. Berikut adalah contoh coding dengan format coding yang rapih untuk membuat struktur dasar web:

<!DOCTYPE html><html lang="en">  <head>    <title>Tutorial Membuat Web</title>  </head>  <body>    <h1>Selamat Datang di Web Tutorialku</h1>    <p>Ini adalah tutorial tentang cara membuat web menggunakan HTML dan CSS.</p>  </body></html>

Dalam contoh tersebut, dibangun struktur dasar halaman web dengan menambahkan elemen , , , dan <body data-rsssl=1>, serta menambahkan judul halaman dan konten utama. Kita lanjutCara Membuat Web Html Css dengan beberapa panduan dan tips yang berguna untuk meningkatkan kemampuan Anda dalam mengembangkan situs web yang berkualitas. <table> </p> <p><h2>Kesalahan Coding pada Cara Membuat Web Html Css</h2> <h3>1. Terlalu banyak penggunaan tag div</h3> <p>Kesalahan umum yang sering dilakukan oleh pemula adalah terlalu banyak menggunakan tag div dalam coding website mereka. Padahal, sebenarnya tag div hanya digunakan untuk membagi halaman menjadi bagian-bagian yang lebih kecil. Jika terlalu banyak menggunakan tag div, maka akan membuat website menjadi sangat berat dan lambat saat diakses.</p> <h3>2. Tidak mengoptimalkan gambar</h3> <p>Gambar adalah salah satu elemen penting dalam website. Namun, jika gambar tidak dioptimalkan dengan baik, maka akan membuat website menjadi sangat lambat saat diakses. Terlebih lagi jika website tersebut memiliki banyak gambar. Oleh karena itu, sebelum mengupload gambar, pastikan untuk mengoptimalkannya terlebih dahulu.</p> <h3>3. Tidak menggunakan CSS External</h3> <p>CSS External merupakan file CSS yang berada di luar <a href="https://www.softize.net/html/">file HTML</a>. Dengan menggunakan CSS External, maka akan membuat coding website menjadi lebih rapi dan mudah dimengerti. Namun, masih banyak pemula yang tidak menggunakan CSS External dan memasukkan kode CSS di dalam file HTML, sehingga membuat coding website menjadi tidak efektif.</p> <p><h2>Solusi Kesalahan Coding pada Cara Membuat Web Html Css</h2> <h3>1. Menggunakan tag div secara bijak</h3> <p>Untuk menghindari penggunaan tag div yang berlebihan, pastikan untuk hanya menggunakan tag div pada bagian-bagian yang memang diperlukan saja. Selain itu, gunakan juga tag lain seperti section atau article untuk membagi halaman website menjadi bagian-bagian yang lebih kecil.</p> <h3>2. Mengoptimalkan gambar dengan benar</h3> <p>Agar gambar tidak membuat website menjadi lambat, pastikan untuk mengoptimalkannya terlebih dahulu. Caranya adalah dengan mengompres gambar agar ukurannya menjadi lebih kecil tanpa mengurangi kualitasnya. Selain itu, gunakan juga format gambar yang tepat, seperti JPEG untuk foto dan PNG untuk logo atau grafik.</p> <h3>3. Menggunakan CSS External</h3> <p>Untuk membuat coding website menjadi lebih efektif, sebaiknya gunakan CSS External. Dengan begitu, maka akan memudahkan dalam melakukan perubahan pada tampilan website tanpa harus mengubah isi dari file HTML. Selain itu, juga bisa menghemat waktu dan tenaga dalam proses coding.</p> <table class="table"> <tr> <th>Cara Membuat Web Html Css</th> <th>Keterangan</th> </tr> <tr> <td>Membuat struktur HTML</td> <td>Membuat kerangka dasar dari dengan menggunakan tag HTML</td> </tr> <tr> <td>Menambahkan CSS External</td> <td>Menambahkan file CSS External ke dalam file HTML</td> </tr> <tr> <td>Memasukkan konten</td> <td>Memasukkan teks, gambar, video, atau elemen lain ke dalam website</td> </tr> <tr> <td>Mengoptimalkan website</td> <td>Mengoptimalkan website agar lebih cepat dan efektif dalam menampilkan konten</td> </tr> </table> <p>Dengan menghindari kesalahan coding pada Cara Membuat Web Html Css dan menggunakan solusi yang tepat, maka akan membuat website menjadi lebih rapi, cepat, dan mudah dimengerti. Selain itu, juga akan membantu dalam meningkatkan performa dari tersebut.</p> <h2>Keuntungan dan Kekurangan Membuat Web dengan HTML CSS</h2> <p>Membuat web dengan HTML CSS memiliki beberapa keuntungan dan kekurangan. Keuntungannya, Anda dapat membuat desain web yang menarik dan mempesona. Dengan HTML CSS, Anda dapat mengatur tampilan web secara rinci dan detail sehingga dapat menciptakan halaman web yang menarik bagi pengguna.</p> <p>Namun, kekurangan dari membuat web dengan HTML CSS adalah Anda harus memahami kode HTML CSS jika ingin membuatnya dengan sempurna. Karena itu, untuk membuat web dengan HTML CSS dengan baik, Anda harus memiliki pengetahuan dasarnya.</p> <h2>Tips Cara Membuat Web dengan HTML CSS Secara Efektif</h2> <p>Agar web yang Anda buat terlihat profesional dan menarik, ada beberapa tips yang dapat diikuti:</p> <h3>1. Perencanaan</h3> <p>Selalu rencanakan apa yang ingin Anda buat sebelum mulai belajarnya. Penggunaan sketsa atau diagram dapat membantu Anda mengorganisasi ide dan membuat rencana yang lebih terstruktur.</p> <h3>2. Kenali Kode</h3> <p>Anda perlu memiliki pengetahuan dasar tentang HTML CSS sebelum mulai belajar web. Pelajari kode HTML CSS dan gunakan tutorial atau referensi saat mulai belajarnya.</p> <h3>3. Gunakan Tools yang Tepat</h3> <p>Anda dapat menggunakan berbagai tools seperti Text Editor atau Sublime Text untuk membantu Anda dalam menulis dan mengedit kode HTML CSS Anda.</p> <h3>4. Pilih Layout yang Cocok</h3> <p>Pilih layout yang sesuai dengan konten web dan pusatkan pada tampilan user-friendly. Perhatikan warna, font, dan tata letak agar tampilan web lebih terstruktur dan mudah di navigasi.</p> <p>Dengan mengikuti tips di atas, Anda dapat membuat web yang menarik dan berfungsi dengan baik dengan HTML CSS. Namun, jangan lupa untuk selalu meng-update dan melatih diri Anda dalam menggunakan kode HTML CSS agar tetap produktif dalam menciptakan tampilan web yang menarik dan profesional.</p> <h2>Pertanyaan & Jawban: Cara Membuat Web Html Css</h2> <table class="table"> <tr> <th>Pertanyaan</th> <th>Jawaban</th> </tr> <tr> <td>Apa itu HTML?</td> <td>HTML atau Hypertext Markup Language adalah bahasa markup yang digunakan untuk membuat halaman web.</td> </tr> <tr> <td>Apa itu CSS?</td> <td>CSS atau Cascading Style Sheets adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dari halaman web yang dibuat menggunakan HTML.</td> </tr> <tr> <td>Bagaimana cara membuat halaman web dengan HTML?</td> <td>Untuk membuat halaman web dengan HTML, pertama-tama buatlah file HTML menggunakan teks editor seperti Notepad. Kemudian, tulis kode HTML yang diperlukan dan simpan file tersebut dengan ekstensi .html. Buka file tersebut menggunakan browser web untuk melihat hasilnya.</td> </tr> <tr> <td>Bagaimana cara menambahkan CSS ke halaman web?</td> <td>Untuk menambahkan CSS ke halaman web, buatlah file CSS yang terpisah dan letakkan di dalam tag <code><head></code> pada file HTML. Kemudian, tulis kode CSS yang diperlukan untuk mengatur tampilan halaman web sesuai keinginan.</td> </tr> </table> <h2>Kesimpulan dari Cara Membuat Web Html Css</h2> <p>Berdasarkan informasi di atas, dapat disimpulkan bahwa HTML dan CSS merupakan dua bahasa yang sangat penting dalam pembuatan halaman web. HTML digunakan untuk membuat struktur dasar halaman web, sedangkan CSS digunakan untuk mengatur tampilan halaman web tersebut. Dalam membuat halaman web dengan HTML dan CSS, pastikan untuk mengetahui kode dan sintaks yang diperlukan serta mengikuti prinsip-prinsip desain web yang baik agar hasilnya optimal dan menarik bagi pengunjung.</p> <div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://www.softize.net/css/cara-mudah-buat-input-login-dengan-css-saja/" target="_self" rel="nofollow" class="u1202328f877cdd7e35d4d2fb19c12716"><style> .u1202328f877cdd7e35d4d2fb19c12716 , .u1202328f877cdd7e35d4d2fb19c12716 .postImageUrl , .u1202328f877cdd7e35d4d2fb19c12716 .centered-text-area { min-height: 80px; position: relative; } .u1202328f877cdd7e35d4d2fb19c12716 , .u1202328f877cdd7e35d4d2fb19c12716:hover , .u1202328f877cdd7e35d4d2fb19c12716:visited , .u1202328f877cdd7e35d4d2fb19c12716:active { border:0!important; } .u1202328f877cdd7e35d4d2fb19c12716 .clearfix:after { content: ""; display: table; clear: both; } .u1202328f877cdd7e35d4d2fb19c12716 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #FFFFFF; } .u1202328f877cdd7e35d4d2fb19c12716:active , .u1202328f877cdd7e35d4d2fb19c12716:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #FFFFFF; } .u1202328f877cdd7e35d4d2fb19c12716 .centered-text-area { width: 100%; position: relative; } .u1202328f877cdd7e35d4d2fb19c12716 .ctaText { border-bottom: 0 solid #fff; color: #141414; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u1202328f877cdd7e35d4d2fb19c12716 .postTitle { color: #16A085; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u1202328f877cdd7e35d4d2fb19c12716 .ctaButton { background-color: #eaeaea!important; color: #141414; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(https://www.softize.net/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u1202328f877cdd7e35d4d2fb19c12716:hover .ctaButton { background-color: #eaeaea!important; } .u1202328f877cdd7e35d4d2fb19c12716 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u1202328f877cdd7e35d4d2fb19c12716 .u1202328f877cdd7e35d4d2fb19c12716-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u1202328f877cdd7e35d4d2fb19c12716:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u1202328f877cdd7e35d4d2fb19c12716-content"><span class="ctaText">BACA:</span> <span class="postTitle">Cara Mudah Buat Input Login dengan Css Saja</span></div></div></div><div class="ctaButton"></div></a></div> </div> <footer class="entry-meta" aria-label="Meta postingan"> <nav id="nav-below" class="post-navigation" aria-label="Posts"> <div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://www.softize.net/css/membuat-header-css-lengkap-dengan-praktis-dan-cepat/" rel="prev">Membuat Header CSS Lengkap dengan Praktis dan Cepat</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://www.softize.net/node-js/mudah-praktis-belajar-cek-node-js/" rel="next">Mudah & Praktis: Belajar Cek Node Js!</a></span></div> </nav> </footer> </div> </article> <div class="comments-area"> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Tinggalkan komentar <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/belajar-membuat-web-dengan-html-dan-css-tips-dan-trik/#respond" style="display:none;">Batalkan balasan</a></small></h3><p class="must-log-in">Anda harus <a href="https://www.softize.net/wp-login.php?redirect_to=https%3A%2F%2Fwww.softize.net%2Fcss%2Fbelajar-membuat-web-dengan-html-dan-css-tips-dan-trik%2F">masuk</a> untuk berkomentar.</p> </div> </div> </div> </main> </div> </div> </div> <div class="site-footer footer-bar-active footer-bar-align-center"> <footer class="site-info" aria-label="Situs" itemtype="https://schema.org/WPFooter" itemscope> <div class="inside-site-info"> <div class="footer-bar"> <aside id="block-9" class="widget inner-padding widget_block widget_text"> <p><strong>Disclaimer:</strong> Web Softize merupakan platform yang membahas tentang aplikasi, software, dan coding. Konten yang kami sajikan bertujuan untuk memberikan informasi dan panduan kepada para pembaca. Kami berusaha untuk menyajikan informasi yang akurat dan up-to-date, namun kami tidak menjamin bahwa setiap informasi yang diberikan adalah benar dan tepat. Kami juga tidak bertanggung jawab atas kerugian yang mungkin timbul dari penggunaan informasi yang diberikan. Setiap pembaca harus bertanggung jawab untuk melakukan verifikasi dan pengecekan ulang sebelum mengambil tindakan berdasarkan informasi yang diterima dari Web Softize. Kami sangat menghargai kepercayaan Anda dan berusaha untuk memastikan bahwa setiap informasi yang kami sajikan bermanfaat dan berguna bagi para pembaca.</p> </aside> </div> <div class="copyright-bar"> ©SoftizeNews Copyright 2023 </div> </div> </footer> </div> <a title="Gulirkan kembali ke puncak laman" aria-label="Gulirkan kembali ke puncak laman" rel="nofollow" href="#" class="generate-back-to-top" data-scroll-speed="400" data-start-scroll="300"> <span class="gp-icon icon-arrow-up"><svg viewBox="0 0 330 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M305.863 314.916c0 2.266-1.133 4.815-2.832 6.514l-14.157 14.163c-1.699 1.7-3.964 2.832-6.513 2.832-2.265 0-4.813-1.133-6.512-2.832L164.572 224.276 53.295 335.593c-1.699 1.7-4.247 2.832-6.512 2.832-2.265 0-4.814-1.133-6.513-2.832L26.113 321.43c-1.699-1.7-2.831-4.248-2.831-6.514s1.132-4.816 2.831-6.515L158.06 176.408c1.699-1.7 4.247-2.833 6.512-2.833 2.265 0 4.814 1.133 6.513 2.833L303.03 308.4c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span> </a><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script> <div class="gp-modal gp-search-modal" id="gp-search"> <div class="gp-modal__overlay" tabindex="-1" data-gpmodal-close> <div class="gp-modal__container"> <form role="search" method="get" class="search-modal-form" action="https://www.softize.net/"> <label class="screen-reader-text">Cari untuk:</label> <div class="search-modal-fields"> <input type="search" class="search-field" placeholder="Cari …" value="" name="s" /> <button aria-label="Cari"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" /></svg></span></button> </div> </form> </div> </div> </div>  <script id='generate-menu-js-extra'> var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Buka Submenu","closeSubMenuLabel":"Tutup submenu"}; </script> <script src='https://www.softize.net/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.3.1' id='generate-menu-js'></script> <script src='https://www.softize.net/wp-content/themes/generatepress/assets/dist/modal.js?ver=3.3.1' id='generate-modal-js' defer></script> <script id='generate-back-to-top-js-extra'> var generatepressBackToTop = {"smooth":"1"}; </script> <script src='https://www.softize.net/wp-content/themes/generatepress/assets/js/back-to-top.min.js?ver=3.3.1' id='generate-back-to-top-js'></script> <script src='https://www.softize.net/wp-includes/js/comment-reply.min.js?ver=c6d4f54ff5f7e221a70cdd46daa396b3' id='comment-reply-js' defer></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://www.softize.net/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script> </body> </html>