Kumpulan Script Html
Pengenalan Dasar Tentang Script HTML
Apa Itu Script dalam HTML?
Script dalam HTML merujuk pada potongan kode yang ditambahkan ke halaman web untuk menciptakan interaksi, mengontrol elemen, atau menghubungkan dengan bahasa pemrograman seperti JavaScript. Tag utama yang digunakan adalah <script>. Meskipun HTML sendiri adalah bahasa markup untuk struktur, integrasi script menjadi penting untuk membuat website menjadi lebih dinamis dan menarik.
HTML memungkinkan penyisipan script baik di bagian <head> maupun <body> dokumen. Umumnya, untuk meningkatkan performa, script diletakkan di bagian akhir sebelum </body> ditutup. Script bisa disisipkan langsung dalam dokumen (inline) atau dari file eksternal menggunakan atribut src.
Contoh sederhana script HTML:
<script>
alert('Halo, dunia!');
</script><script> dalam HTML.
Meskipun <script> biasanya digunakan untuk JavaScript, HTML5 telah membuka peluang luas untuk integrasi script lain seperti JSON-LD (untuk SEO) dan WebAssembly. Script juga bisa dikombinasikan dengan framework front-end seperti React atau Vue.js.
Penggunaan script secara bijak dan sesuai dengan tujuan sangat penting. Terlalu banyak script atau peletakan yang salah dapat memperlambat performa situs dan menurunkan pengalaman pengguna. Oleh karena itu, memahami cara kerja dan contoh penggunaannya menjadi hal wajib bagi setiap web developer.
Contoh Script Alert dan Prompt
Interaksi Dasar dengan Pengguna
Script alert dan prompt adalah cara sederhana untuk menciptakan interaksi antara pengguna dan website. alert() menampilkan kotak peringatan, sedangkan prompt() meminta input dari pengguna. Ini merupakan dasar dari interaksi web sebelum form dan UI lebih kompleks dikembangkan.
Contoh penggunaan alert:
<script>
alert('Selamat datang di situs kami!');
</script>
Contoh penggunaan prompt:
<script>
let nama = prompt('Siapa nama Anda?');
alert('Halo, ' + nama + '!');
</script>Perlu diingat bahwa meskipun efektif untuk demonstrasi atau penggunaan cepat, metode ini kurang ideal untuk pengalaman pengguna jangka panjang. Website modern lebih cenderung menggunakan modal box atau form interaktif yang lebih estetis dan fleksibel.
Namun, memahami konsep alert dan prompt tetaplah penting. Mereka merupakan fondasi interaksi JavaScript dan dapat digunakan untuk debugging atau validasi cepat saat proses pengembangan awal.
Script Validasi Form HTML
Meningkatkan Akurasi Input Pengguna
Validasi form adalah salah satu implementasi script HTML yang paling penting dalam sebuah website. Validasi berguna untuk memastikan data yang dimasukkan oleh pengguna sesuai dengan format atau aturan tertentu sebelum dikirimkan ke server. Ini membantu mencegah kesalahan input, meningkatkan keamanan data, serta menghemat beban server.
Contoh form HTML dasar tanpa validasi:
<form>
Nama: <input type="text" id="nama"><br>
Email: <input type="text" id="email"><br>
<input type="submit" value="Kirim">
</form>
<script>
function validasiForm() {
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
if (nama == "" || email == "") {
alert("Semua kolom harus diisi!");
return false;
}
if (!email.includes("@")) {
alert("Format email tidak valid!");
return false;
}
return true;
}
</script>
<form onsubmit="return validasiForm()">
Nama: <input type="text" id="nama"><br>
Email: <input type="text" id="email"><br>
<input type="submit" value="Kirim">
</form>
Dengan validasi seperti ini, pengguna akan diperingatkan jika ada kolom yang kosong atau email tidak valid. Ini meningkatkan pengalaman pengguna dan menghindari data error masuk ke sistem. Validasi bisa dikembangkan lebih jauh, misalnya untuk memverifikasi panjang karakter, pola angka, atau bahkan menggunakan regex.
Dalam praktik profesional, validasi sebaiknya dilakukan ganda: di sisi client (menggunakan script seperti di atas) dan di sisi server (menggunakan PHP, Python, Node.js, dll). Ini penting untuk mencegah celah keamanan seperti XSS atau form spoofing.
Jika kamu menggunakan framework seperti React atau Vue, validasi biasanya dilakukan melalui library tambahan seperti Formik, Vuelidate, atau Yup. Tapi untuk pemula atau website statis, script HTML sederhana ini sudah cukup kuat dan mudah diimplementasikan.
Script Menampilkan Jam dan Tanggal Otomatis
Memperkaya Informasi Real-Time di Website
Menampilkan jam dan tanggal secara otomatis di website bisa meningkatkan kesan profesional dan dinamis. Pengunjung juga akan merasa bahwa informasi di situs tersebut aktual dan relevan. Dalam HTML, kita bisa memanfaatkan JavaScript untuk menyisipkan jam real-time yang diperbarui setiap detik.
Contoh script sederhana:
<div id="jam"></div>
<script>
function tampilkanJam() {
var waktu = new Date();
var jam = waktu.getHours();
var menit = waktu.getMinutes();
var detik = waktu.getSeconds();
jam = jam < 10 ? "0" + jam : jam;
menit = menit < 10 ? "0" + menit : menit;
detik = detik < 10 ? "0" + detik : detik;
document.getElementById("jam").innerHTML = jam + ":" + menit + ":" + detik;
}
setInterval(tampilkanJam, 1000);
</script>
Script ini akan menampilkan jam di elemen dengan ID "jam" dan memperbaruinya setiap detik. Kamu bisa menambahkan gaya CSS agar tampilannya lebih menarik, atau menggabungkannya dengan tanggal.
Selain jam, kamu juga bisa menampilkan tanggal hari ini menggunakan objek `Date()`:
var tanggal = waktu.toLocaleDateString();
document.getElementById("tanggal").innerHTML = tanggal;
Penggunaan jam real-time sangat cocok untuk website perusahaan, media, atau sekolah. Bahkan untuk blog personal pun menambah sentuhan interaktif yang menarik. Jangan lupa untuk menyesuaikan zona waktu sesuai lokasi target audiens.
Jika ingin format jam 12 atau format tanggal Indonesia (misalnya “3 Agustus 2025”), kamu bisa menggunakan metode tambahan dari objek Date atau library seperti Moment.js. Namun untuk kebutuhan dasar, script di atas sudah sangat bermanfaat.
Script Show/Hide Konten dengan Tombol
Membuat Konten Dinamis yang Bisa Dilipat
Dalam desain web modern, fitur Show/Hide sangat berguna untuk menampilkan konten tambahan hanya saat dibutuhkan pengguna. Misalnya dalam FAQ, keterangan tambahan produk, atau form komentar. Dengan menggunakan script HTML dan JavaScript sederhana, kita bisa menciptakan konten yang bisa muncul dan menghilang dengan klik tombol.
Berikut contoh dasar script Show/Hide menggunakan HTML:
<button onclick="toggleKonten()">Tampilkan Deskripsi</button>
<div id="deskripsi" style="display:none;">
Ini adalah deskripsi tambahan yang bisa dilipat.
</div>
<script>
function toggleKonten() {
var konten = document.getElementById("deskripsi");
if (konten.style.display === "none") {
konten.style.display = "block";
} else {
konten.style.display = "none";
}
}
</script>
Script di atas akan menyembunyikan konten saat halaman dimuat, lalu menampilkannya ketika tombol diklik. Tombol yang sama bisa dipakai untuk menyembunyikan konten kembali. Kamu bisa mengubah teks tombol secara dinamis atau menambahkan animasi slide agar lebih menarik.
Show/Hide juga dapat digunakan untuk mempercepat waktu muat halaman, terutama jika kamu memiliki banyak konten yang tidak selalu dibutuhkan di awal. Pengunjung akan merasa situsmu rapi dan tidak membingungkan, karena hanya informasi penting yang langsung terlihat.
Untuk pengalaman pengguna yang lebih interaktif, kamu bisa mengintegrasikan fitur ini dengan CSS transition atau menggunakan pustaka seperti jQuery atau Alpine.js. Namun, prinsip dasarnya tetap bisa dijalankan dengan script sederhana seperti di atas.
Script Accordion HTML untuk FAQ
Efisien untuk Menyusun Pertanyaan Umum
Accordion adalah pola desain UI yang menampilkan daftar item yang dapat diperluas dan dilipat satu per satu. Biasanya digunakan untuk FAQ, fitur produk, atau penjelasan berlapis. Dengan HTML dan JavaScript dasar, kamu bisa membuat accordion yang elegan dan responsif.
Berikut adalah contoh script accordion:
<button class="accordion">Apa itu HTML?</button>
<div class="panel">
HTML adalah singkatan dari HyperText Markup Language...
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
Tambahkan sedikit CSS agar tampilannya lebih menarik:
.accordion {
background-color: #eee;
cursor: pointer;
padding: 10px;
width: 100%;
border: none;
text-align: left;
}
.panel {
display: none;
padding: 10px;
background-color: white;
}
Dengan kombinasi script dan CSS di atas, kamu bisa menyusun banyak bagian informasi menjadi tampilan yang rapi dan user-friendly. Accordion sangat cocok diterapkan untuk web perusahaan, edukasi, atau layanan digital yang punya banyak informasi.
Fitur ini bisa dioptimalkan dengan animasi transisi (transition) atau dengan library seperti Bootstrap Accordion jika kamu ingin tampilan siap pakai. Namun, memahami versi dasar tetaplah penting sebagai dasar pengembangan web.
Menambahkan icon "+" dan "–" juga bisa meningkatkan UX. Gunakan JavaScript untuk mengganti isi tombol sesuai status (aktif atau tidak aktif). Hal kecil ini bisa memberikan kesan profesional dan memperjelas fungsi elemen bagi pengguna awam.
Script Slideshow Gambar Otomatis
Menampilkan Gambar Bergerak yang Menarik
Slideshow gambar adalah fitur visual yang banyak digunakan di halaman utama website, galeri portofolio, atau presentasi produk. Slideshow yang berjalan otomatis dapat menarik perhatian pengunjung lebih lama dan membuat tampilan website tampak lebih profesional. Kita bisa membuatnya hanya dengan HTML, CSS, dan JavaScript sederhana.
Berikut contoh struktur HTML dasar:
<div class="slideshow-container">
<img class="slide" src="https://via.placeholder.com/600x300?text=Slide+1" style="width:100%">
<img class="slide" src="https://via.placeholder.com/600x300?text=Slide+2" style="width:100%">
<img class="slide" src="https://via.placeholder.com/600x300?text=Slide+3" style="width:100%">
</div>
Tambahkan script JavaScript untuk mengatur perputaran slide:
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
</script>
Dengan script ini, gambar akan otomatis berganti setiap 3 detik. Kamu bisa mengatur kecepatan transisi, ukuran, dan juga efek transisi seperti fade atau slide. Untuk tampilan yang lebih profesional, kamu bisa menambahkan navigasi panah kiri-kanan atau titik indikator.
Slideshow gambar sangat efektif untuk menampilkan testimoni, galeri kegiatan, foto destinasi wisata, dan promosi produk. Pastikan gambar yang digunakan telah dioptimasi agar tidak memperlambat waktu muat halaman.
Script Navigasi Tab HTML
Membuat Tampilan Informasi Terorganisir
Tab navigasi sangat berguna untuk menampilkan berbagai konten dalam satu halaman tanpa membuatnya panjang ke bawah. Ini membuat halaman lebih rapi dan mudah dinavigasi, khususnya untuk menampilkan spesifikasi produk, menu layanan, atau penjelasan fitur secara terpisah dalam satu tempat.
Berikut struktur dasar HTML-nya:
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">Tentang Kami</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">Layanan</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">Kontak</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>Tentang Kami</h3>
<p>Isi konten tentang kami...</p>
</div>
<div id="Tab2" class="tabcontent">
<h3>Layanan</h3>
<p>Isi konten layanan...</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>Kontak</h3>
<p>Isi konten kontak...</p>
</div>
Lalu, tambahkan script untuk mengatur perpindahan tab:
<script>
function openTab(evt, tabName) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Navigasi tab ini sangat mudah dikembangkan dan bisa dikombinasikan dengan animasi CSS agar transisinya lebih halus. Kamu juga bisa menambahkan ikon atau mengatur posisi horizontal/vertikal sesuai kebutuhan.
Pastikan hanya satu tab yang tampil saat awal halaman dimuat dengan memberikan display block hanya pada salah satu `.tabcontent` di awal, dan sisanya `display: none;`. Jika ingin lebih canggih, kamu bisa pakai library seperti Bootstrap Tabs atau jQuery UI Tabs.
Script Tooltip dan Popover Sederhana
Memberikan Informasi Tambahan Secara Ringkas
Tooltip adalah elemen kecil yang muncul ketika pengguna mengarahkan kursor ke suatu bagian konten, seperti tombol atau teks penting. Tooltip biasanya digunakan untuk memberikan penjelasan tambahan tanpa harus menampilkan teks secara permanen. Ini sangat berguna untuk meningkatkan pengalaman pengguna tanpa mengganggu tampilan antarmuka.
Berikut adalah contoh tooltip sederhana menggunakan kombinasi HTML dan CSS:
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<div class="tooltip">
Hover saya
<span class="tooltiptext">Ini adalah informasi tambahan</span>
</div>
Dengan kode di atas, pengguna akan melihat pesan kecil muncul saat mengarahkan kursor ke teks “Hover saya”. Tooltip akan hilang secara otomatis saat kursor tidak lagi diarahkan ke elemen tersebut. Kamu bisa menyesuaikan posisi tooltip (atas, bawah, kiri, kanan), warna, animasi, hingga ukuran.
Sementara itu, **popover** adalah versi tooltip yang lebih besar dan bisa berisi informasi lebih lengkap, bahkan gambar atau tombol. Popover sering digunakan pada elemen interaktif seperti ikon bantuan, atau deskripsi fitur dalam aplikasi. Berikut contoh penggunaan popover dasar dengan JavaScript:
<button onclick="togglePopover()" id="popoverBtn">Klik untuk info</button>
<div id="popover" style="display:none; border:1px solid #ccc; padding:10px; position:absolute; background:#fff;">
Ini adalah konten popover. Bisa ditutup atau tetap terbuka.
</div>
<script>
function togglePopover() {
var pop = document.getElementById("popover");
if (pop.style.display === "none") {
pop.style.display = "block";
} else {
pop.style.display = "none";
}
}
</script>
Kamu bisa mengatur posisi popover berdasarkan posisi klik pengguna menggunakan JavaScript lanjutan, atau pakai framework seperti Bootstrap untuk fitur popover yang lebih kompleks dan responsif. Tooltips dan popovers adalah bagian penting dari UI/UX modern dan sangat disarankan untuk website edukasi, toko online, dan aplikasi interaktif.
Penggunaan script seperti ini mendukung aksesibilitas serta membantu pengguna yang belum familiar dengan fungsi atau istilah tertentu di halaman web. Untuk pengguna mobile, popover bisa diganti dengan modal kecil agar tetap nyaman di layar kecil.
Script Counter Angka Dinamis
Menampilkan Statistik Interaktif yang Menarik
Script counter angka dinamis sering digunakan di halaman beranda website organisasi, startup, atau institusi pendidikan untuk menampilkan statistik seperti jumlah pengguna, proyek terselesaikan, atau penghargaan. Angka akan bergerak dari nol hingga target tertentu saat halaman dimuat, memberikan kesan profesional dan modern.
Berikut adalah contoh HTML dan JavaScript sederhana untuk membuat efek counter angka:
<div>
<h2>Pengguna Terdaftar</h2>
<div id="counter" style="font-size: 32px; font-weight: bold;">0</div>
</div>
<script>
let count = 0;
let target = 1000;
let speed = 5;
function counterUp() {
if (count < target) {
count += 10;
document.getElementById("counter").innerText = count;
setTimeout(counterUp, speed);
} else {
document.getElementById("counter").innerText = target;
}
}
window.onload = counterUp;
</script>
Script di atas akan menghitung naik dari 0 hingga 1000 saat halaman dimuat. Kamu bisa menyesuaikan kecepatan, jumlah pertambahan, dan target akhir sesuai kebutuhan. Untuk menambah fleksibilitas, kamu bisa ubah target angka menggunakan atribut `data-target` dan menggunakannya dalam JavaScript agar bisa digunakan di banyak elemen sekaligus.
Counter ini sangat efektif jika digabungkan dengan desain yang atraktif, ikon ilustrasi, dan efek transisi CSS. Pastikan untuk tidak menyalahgunakan counter — tampilkan hanya angka yang benar-benar bermanfaat bagi pengunjung dan memperkuat reputasi situsmu.
Untuk efek lebih lanjut, kamu bisa menggunakan pustaka JavaScript seperti CountUp.js atau GSAP, yang menawarkan animasi lebih halus dan efisien. Namun jika kamu ingin performa maksimal dengan beban ringan, cukup gunakan script sederhana seperti di atas.
Script Animasi Saat Scroll
Menambahkan Efek Gerak pada Elemen Website
Animasi saat scroll (scroll-triggered animation) adalah efek visual yang menampilkan atau menganimasikan elemen hanya ketika pengguna menggulir halaman sampai pada elemen tersebut. Teknik ini banyak digunakan untuk meningkatkan engagement, memperjelas elemen penting, dan membuat tampilan website terasa lebih hidup.
Berikut adalah contoh penggunaan animasi scroll sederhana menggunakan JavaScript dan CSS:
<style>
.scroll-animation {
opacity: 0;
transform: translateY(40px);
transition: all 0.6s ease-out;
}
.scroll-animation.show {
opacity: 1;
transform: translateY(0);
}
</style>
<div class="scroll-animation" id="section1">
<h2>Konten Ini Akan Muncul Saat Scroll</h2>
<p>Efek muncul dari bawah saat halaman digulir.</p>
</div>
<script>
function revealOnScroll() {
const elements = document.querySelectorAll('.scroll-animation');
elements.forEach((el) => {
const windowHeight = window.innerHeight;
const elementTop = el.getBoundingClientRect().top;
const revealPoint = 150;
if (elementTop < windowHeight - revealPoint) {
el.classList.add('show');
}
});
}
window.addEventListener('scroll', revealOnScroll);
window.addEventListener('load', revealOnScroll);
</script>
Dengan kode ini, elemen akan muncul perlahan dari bawah saat pengguna menggulir ke bawah. Kamu bisa mengatur arah (dari kiri, kanan, atas), durasi, dan efek transisi agar sesuai dengan estetika situsmu. Ini akan membuat pengguna lebih fokus pada setiap bagian konten.
Untuk pengembangan lanjutan, gunakan pustaka seperti AOS (Animate On Scroll), ScrollReveal.js, atau Intersection Observer API yang lebih modern dan ringan. Tapi untuk proyek statis atau blog sederhana, script ini sudah cukup efektif dan ringan untuk diterapkan.
Scroll animation membantu membangun narasi visual yang kuat dan menciptakan pengalaman browsing yang imersif. Namun pastikan pengguna tetap dapat mengakses konten penting tanpa harus menunggu animasi selesai — kecepatan dan kenyamanan pengguna tetap prioritas utama.
Script Sticky Navbar (Navigasi yang Tetap di Atas)
Mempermudah Navigasi Saat Pengunjung Scroll
Sticky Navbar adalah fitur navigasi yang tetap berada di bagian atas layar meskipun pengguna melakukan scroll. Fitur ini sangat membantu pengguna untuk berpindah antar bagian website tanpa perlu kembali ke atas. Selain praktis, sticky navbar juga meningkatkan waktu interaksi dan kemudahan akses.
Berikut ini contoh sederhana HTML dan CSS untuk membuat sticky navbar:
<style>
.navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #333;
color: white;
padding: 10px;
z-index: 1000;
}
</style>
<div class="navbar">
<a href="#home" style="color:white; margin-right:10px;">Home</a>
<a href="#about" style="color:white; margin-right:10px;">About</a>
<a href="#contact" style="color:white;">Contact</a>
</div>
Dengan menggunakan properti CSS `position: sticky`, kamu dapat membuat elemen apapun tetap terlihat di layar tanpa menggunakan JavaScript tambahan. Pastikan elemen memiliki `top` yang ditentukan agar efek ini berfungsi. Untuk browser lama, kamu bisa tambahkan fallback menggunakan JavaScript scroll event.
Sticky navbar juga bisa digabungkan dengan perubahan warna dinamis atau animasi ketika pengguna mulai menggulir. Hal ini memberi kesan interaktif dan membuat situs terasa lebih responsif. Kamu dapat menambahkan efek bayangan atau latar belakang transparan sesuai desain situs.
Fitur ini sangat disarankan untuk situs berita, edukasi, blog panjang, hingga toko online yang memiliki banyak navigasi kategori. Pastikan hanya elemen penting saja yang dimasukkan ke dalam navbar agar tidak memenuhi layar pengguna, terutama di perangkat mobile.
Kesimpulan
Belajar HTML Lebih Menyenangkan dengan Eksperimen Script Sendiri
Belajar HTML tidak harus membosankan. Dengan mempraktikkan berbagai script interaktif seperti validasi form, slideshow, show/hide konten, accordion, tooltip, animasi scroll, counter angka, hingga sticky navbar, kamu bisa menciptakan halaman web yang tidak hanya fungsional tetapi juga menarik secara visual.
Script-script sederhana ini sangat berguna bagi pemula yang ingin memahami dasar interaktivitas tanpa harus menguasai JavaScript secara mendalam terlebih dahulu. Kamu bisa menyesuaikan dan mengembangkan masing-masing contoh menjadi lebih kompleks seiring meningkatnya kemampuanmu.
Sebagian besar script yang telah dibagikan juga bisa diintegrasikan ke dalam CMS seperti WordPress, Blogger, atau bahkan sistem LMS edukasi berbasis web. Pastikan kamu menjaga validitas HTML dan memastikan semua elemen berjalan lancar di berbagai browser dan perangkat.
Jika kamu merasa artikel ini bermanfaat, silakan bagikan ke teman-temanmu atau komunitas pengembang web. Atau jika kamu punya pertanyaan seputar script HTML lainnya, jangan ragu untuk berdiskusi di kolom komentar atau melalui forum teknologi favoritmu.
Selamat mencoba, dan semoga kamu semakin semangat belajar HTML!