Dasar-Dasar Pemograman HTML
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:
- Buat folder tempat anda menyimpan file latihan pengenalan dasar HTML
- Buatlah coding/script HTML dengan editor NotePad++ atau Visual Studio Code
- 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
- pada baris pertama terdapat code yang menandakan bahwa HTML yang digunakan adalah versi 5.
- 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.
- 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=digital-marketing" class="me-1">Digital Marketing</a>
<span class="badge bg-primary rounded-pill ms-auto">18</span>
</li>
<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=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/3-tahap-penting-dalam-alur-pembuatan-prototype/78"><h5>3 Tahap Penting dalam Alur Pembuatan Prototype</h5></a>
<p><i class="fa-solid fa-calendar-days"></i> Mon, 19 Jan 2026</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="3 Tahap Penting dalam Alur Pembuatan Prototype">
</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/design-thinking-sebagai-pendekatan-kreatif-dalam-menyelesaikan-masalah/77"><h5>Design Thinking sebagai pendekatan Kreatif dalam Menyelesaikan Masalah</h5></a>
<p><i class="fa-solid fa-calendar-days"></i> Mon, 19 Jan 2026</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="Design Thinking sebagai pendekatan Kreatif dalam Menyelesaikan Masalah">
</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/design-thinking-metode-pemecahan-masalah-berbasis-empati-dan-inovasi/76"><h5>Design Thinking: Metode Pemecahan Masalah Berbasis Empati dan Inovasi</h5></a>
<p><i class="fa-solid fa-calendar-days"></i> Mon, 19 Jan 2026</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="Design Thinking: Metode Pemecahan Masalah Berbasis Empati dan Inovasi">
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
</section>
<!--------- footer Section Start--------------->
<section class="footer animate__animated animate__fadeIn" data-wow-duration="1s" data-wow-delay="0.3s">
<!-- Main Footer -->
<div class="container footer-main">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12 col-12">
<img loading="lazy" src="https://inatechno.id/uploads/system/logo-light.png" alt="inatechno">
<p><strong>AI & Technology Education Ecosystem</strong></p>
<p>Inatechno membantu individu, profesional, sekolah, kampus, dan institusi membangun kapabilitas AI, data, software, cloud, dan teknologi digital melalui LMS, training, bootcamp, sertifikasi, dan program khusus organisasi.</p>
<div class="lattest-news newFooterlatest">
<h2 class="h5">AI & Technology Insight</h2>
<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="Email untuk insight dan program terbaru" 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" style="color: white;">
<h2 class="h5">Ecosystem</h2>
<ul>
<li><a href="https://inatechno.id/home/courses">LMS Courses</a></li>
<li><a href="https://inatechno.id/programs">AI & Technology Programs</a></li>
<li><a href="https://inatechno.id/addons/bootcamp/bootcamp_list">Bootcamp</a></li>
<li><a href="https://inatechno.id/addons/workshop/workshop_list">Workshop</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5" style="color: white;">
<h2 class="h5">Focus Areas</h2>
<ul>
<li><a href="https://inatechno.id/home/courses?search=artificial%20intelligence">Artificial Intelligence</a></li>
<li><a href="https://inatechno.id/home/courses?search=data%20analytics">Data & Analytics</a></li>
<li><a href="https://inatechno.id/home/courses?search=software%20development">Software Development</a></li>
<li><a href="https://inatechno.id/home/courses?search=cloud%20devops">Cloud & DevOps</a></li>
<li><a href="https://inatechno.id/home/courses?search=cybersecurity">Cybersecurity</a></li>
<li><a href="https://inatechno.id/home/courses?search=digital%20business">Digital Business</a></li>
<li><a href="https://inatechno.id/home/courses?search=educational%20technology">Educational Technology</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5">
<h2 class="h5">Company</h2>
<ul>
<li><a href="https://inatechno.id/home/about_us">Tentang kami</a></li>
<li><a href="https://inatechno.id/founder">Founder & CEO</a></li>
<li><a href="https://inatechno.id/blogs">Blog</a></li>
<li><a href="https://inatechno.id/home/contact_us">Hubungi kami</a></li>
<li> <a href="https://inatechno.id/home/become_an_instructor">Menjadi seorang instruktur</a></li>
<li><a href="https://inatechno.id/partnership">Partnership</a></li>
<li><a href="https://inatechno.id/request-training">Request Training</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-6 mb-5" style="color: white;">
<h2 class="h5">Support & Legal</h2>
<ul>
<li><a href="https://inatechno.id/home/faq">Faq</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/refund_policy">Kebijakan pengembalian</a></li>
<li><a href="https://inatechno.id/sign_up">Daftar</a></li>
</ul>
</div>
</div>
</div>
<!-- Bottom Footer -->
<div class="eBottomfooter">
<div class="container">
<div class="row ">
<div class="col-lg-6 col-md-12">
<div>
<p>© 2026 PT. Inatechno Berkah Khalifa. AI & Technology Education Ecosystem.</p>
</div>
</div>
<!-- Bottom Social Icons -->
</div>
</div>
</div>
</section>
<!-- Back to Top Button -->
<a href="#" id="backToTop" class="back-to-top-btn" title="Kembali ke atas">
<i class="fa-solid fa-chevron-up"></i>
</a>
<!--------- footer Section End--------------->
<!-- PAYMENT 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';
});
});
// Back to Top button
var backToTop = document.getElementById('backToTop');
if (backToTop) {
window.addEventListener('scroll', function() {
if (window.scrollY > 400) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
backToTop.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
});
</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="https://inatechno.id/" 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>
<div class="it-promo-popup" id="itPromoPopup" data-id="1" data-frequency="24" aria-hidden="true">
<div class="it-promo-popup__backdrop" data-promo-close></div>
<div class="it-promo-popup__dialog" role="dialog" aria-modal="true" aria-labelledby="itPromoPopupTitle">
<button type="button" class="it-promo-popup__close" data-promo-close aria-label="Tutup popup">×</button>
<div class="it-promo-popup__media">
<img src="https://inatechno.id/uploads/promo_popup/c876b6b43381e3ea2d47b322698e5fc1.png" alt="Prompt Engineering Bootcamp Inatechno (PBI) Telah Dibuka!">
</div>
<div class="it-promo-popup__content">
<span class="it-promo-popup__label">Bootcamp</span>
<h2 id="itPromoPopupTitle">Prompt Engineering Bootcamp Inatechno (PBI) Telah Dibuka!</h2>
<div class="it-promo-popup__description">Pelajari ChatGPT, NotebookLM, Gemini, Claude, dan AI Productivity Tools untuk meningkatkan skill akademik, karier, riset, dan produktivitas digital.
Cocok untuk mahasiswa semua jurusan — beginner friendly & praktik langsung!</div>
<button type="button" class="it-promo-popup__cta" data-promo-url="https://inatechno.id/addons/bootcamp/details/11">
Daftar Sekarang </button>
</div>
</div>
</div>
<style>
.it-promo-popup {
position: fixed;
inset: 0;
z-index: 10050;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.it-promo-popup.is-visible {
display: flex;
}
.it-promo-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 16, 32, 0.62);
}
.it-promo-popup__dialog {
position: relative;
width: min(760px, 100%);
max-height: calc(100vh - 40px);
overflow: auto;
display: grid;
grid-template-columns: minmax(240px, 0.92fr) minmax(280px, 1fr);
background: #ffffff;
border-radius: 8px;
box-shadow: 0 24px 72px rgba(9, 24, 51, 0.28);
}
.it-promo-popup__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.94);
color: #263238;
font-size: 26px;
line-height: 30px;
cursor: pointer;
}
.it-promo-popup__media {
min-height: 320px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #071123;
}
.it-promo-popup__media img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.it-promo-popup__content {
padding: 34px;
color: #172033;
}
.it-promo-popup__label {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 10px;
margin-bottom: 14px;
border-radius: 6px;
background: #edf6f3;
color: #0f7a5c;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.it-promo-popup__content h2 {
margin: 0 0 12px;
color: #172033;
font-size: 28px;
line-height: 1.2;
letter-spacing: 0;
}
.it-promo-popup__description {
color: #4c596f;
font-size: 15px;
line-height: 1.65;
}
.it-promo-popup__description p:last-child {
margin-bottom: 0;
}
.it-promo-popup__cta {
margin-top: 22px;
width: 100%;
min-height: 46px;
border: 0;
border-radius: 6px;
background: #1f7a8c;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.it-promo-popup__cta:hover {
background: #176374;
}
@media (max-width: 720px) {
.it-promo-popup {
padding: 14px;
}
.it-promo-popup__dialog {
grid-template-columns: 1fr;
}
.it-promo-popup__media {
min-height: 190px;
aspect-ratio: 16 / 10;
}
.it-promo-popup__content {
padding: 24px;
}
.it-promo-popup__content h2 {
font-size: 23px;
}
}
</style>
<script>
(function() {
var popup = document.getElementById('itPromoPopup');
if (!popup) {
return;
}
var id = popup.getAttribute('data-id');
var frequency = parseInt(popup.getAttribute('data-frequency'), 10) || 24;
var storageKey = 'inatechno_promo_popup_' + id;
var now = Date.now();
var lastShown = 0;
try {
lastShown = parseInt(localStorage.getItem(storageKey) || '0', 10);
} catch (error) {
lastShown = 0;
}
if (lastShown && now - lastShown < frequency * 60 * 60 * 1000) {
return;
}
function requestMetric(url) {
if (!url || typeof fetch !== 'function') {
return;
}
fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {'X-Requested-With': 'XMLHttpRequest'}
}).catch(function() {});
}
function closePopup() {
popup.classList.remove('is-visible');
popup.setAttribute('aria-hidden', 'true');
}
setTimeout(function() {
popup.classList.add('is-visible');
popup.setAttribute('aria-hidden', 'false');
try {
localStorage.setItem(storageKey, String(Date.now()));
} catch (error) {}
requestMetric('https://inatechno.id/home/promo_popup_view/1');
}, 900);
Array.prototype.forEach.call(popup.querySelectorAll('[data-promo-close]'), function(button) {
button.addEventListener('click', closePopup);
});
var cta = popup.querySelector('[data-promo-url]');
if (cta) {
cta.addEventListener('click', function() {
var targetUrl = cta.getAttribute('data-promo-url');
requestMetric('https://inatechno.id/home/promo_popup_click/1');
setTimeout(function() {
window.location.href = targetUrl;
}, 80);
});
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && popup.classList.contains('is-visible')) {
closePopup();
}
});
})();
</script>
</body>
</html>
