Tutorial Membuat Website Sederhana dengan HTML, CSS, dan JavaScript

Membuat website sendiri mungkin terdengar menakutkan bagi pemula, namun dengan panduan yang tepat, Anda akan menemukan bahwa ini adalah proses yang menarik dan memberdayakan. Tutorial ini akan memandu Anda membuat website sederhana menggunakan tiga teknologi dasar web: HTML untuk struktur, CSS untuk tampilan, dan JavaScript untuk interaktivitas.

Prasyarat:

Text Editor: Anda memerlukan program untuk menulis kode. Beberapa pilihan populer gratis adalah Visual Studio Code, Sublime Text, atau Atom. Notepad bawaan Windows atau TextEdit di Mac juga bisa digunakan, namun text editor khusus coding akan lebih memudahkan.
Web Browser: Untuk melihat hasil website Anda. Google Chrome, Mozilla Firefox, atau Safari adalah pilihan yang baik.

Langkah 1: Merencanakan Website Anda (Sangat Sederhana)

Untuk tutorial ini, kita akan membuat halaman profil sederhana yang berisi:

Nama
Foto (placeholder)
Deskripsi singkat
Tombol yang akan menampilkan pesan ketika diklik

Langkah 2: Membuat Struktur Dasar dengan HTML (index.html)

HTML (HyperText Markup Language) adalah tulang punggung website Anda. Ia mendefinisikan struktur dan konten.

Buat folder baru di komputer Anda untuk proyek website ini. Beri nama, misalnya, ProyekWebsiteSaya.
Buka text editor Anda.
Buat file baru dan simpan dengan nama index.html di dalam folder ProyekWebsiteSaya.
Salin dan tempel kode HTML berikut ke dalam file index.html:

Yuk Bikin Website kalian dengan berlangganan di domainesia

Langkah 3: Memberikan Gaya dengan CSS (style.css)

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan tata letak elemen HTML.

Di dalam folder ProyekWebsiteSaya, buat file baru dan simpan dengan nama style.css.
Salin dan tempel kode CSS berikut ke dalam file style.css:

Penjelasan Kode CSS:

Selektor: Bagian sebelum kurung kurawal {} (misalnya body, header, #profil). Ini menentukan elemen HTML mana yang akan diberi gaya.
- body: Menargetkan elemen <body>.
- header h1: Menargetkan elemen <h1> di dalam elemen <header>.
- #profil: Menargetkan elemen dengan id="profil". ID bersifat unik.
Properti dan Nilai: Di dalam kurung kurawal, Anda mendefinisikan properti (misalnya font-family, background-color) dan nilainya (misalnya Arial, #f4f4f4).
font-family: Mengatur jenis font.
background-color: Mengatur warna latar belakang.
color: Mengatur warna teks.
padding: Memberikan ruang di dalam batas elemen.
margin: Memberikan ruang di luar batas elemen.
text-align: Mengatur perataan teks.
border-radius: Membuat sudut elemen menjadi melengkung (digunakan untuk foto profil lingkaran).
box-shadow: Menambahkan efek bayangan.
cursor: pointer: Mengubah kursor menjadi ikon tangan saat diarahkan ke tombol.
transition: Menambahkan efek animasi halus saat properti berubah (misalnya saat :hover).
:hover: Pseudo-class yang menerapkan gaya saat kursor mouse berada di atas elemen.
position: fixed: Membuat elemen tetap pada posisinya meskipun halaman di-scroll (digunakan untuk footer).

Langkah 4: Menambahkan Interaktivitas dengan JavaScript (script.js)

JavaScript memungkinkan Anda membuat website lebih dinamis dan interaktif.

Di dalam folder ProyekWebsiteSaya, buat file baru dan simpan dengan nama script.js.
Salin dan tempel kode JavaScript berikut ke dalam file script.js:

Penjelasan Kode JavaScript:

document.addEventListener('DOMContentLoaded', function() { ... });: Ini memastikan bahwa kode JavaScript baru akan dijalankan setelah seluruh halaman HTML selesai dimuat dan diproses oleh browser. Ini penting untuk menghindari error jika script mencoba mengakses elemen HTML yang belum ada.
const tombolSapa = document.getElementById('tombol-sapa');:
- document.getElementById('tombol-sapa'): Metode ini digunakan untuk memilih elemen HTML yang memiliki id="tombol-sapa".
- const tombolSapa: Variabel tombolSapa sekarang menyimpan referensi ke elemen tombol tersebut. const berarti nilai variabel ini tidak akan diubah.
if (tombolSapa) { ... }: Pengecekan ini dilakukan untuk memastikan elemen tombol benar-benar ditemukan sebelum mencoba menambahkan event listener. Ini adalah praktik yang baik untuk menghindari error.
tombolSapa.addEventListener('click', function() { ... });:
- addEventListener: Metode ini “mendengarkan” sebuah event (kejadian) pada elemen yang dipilih.
- 'click': Jenis event yang didengarkan adalah klik mouse.
- function() { ... }: Ini adalah anonymous function (fungsi tanpa nama) yang akan dijalankan ketika event ‘click’ terjadi pada tombolSapa.
- alert('Halo! Terima kasih sudah menyapa.');: Perintah ini akan menampilkan kotak dialog (alert) di browser dengan pesan yang diberikan.
Bagian yang ditandai (Opsional) menunjukkan bagaimana Anda bisa memanipulasi konten lain di halaman menggunakan JavaScript, seperti mengubah teks nama atau sumber gambar. Anda bisa menghapus atau mengembangkannya sesuai kebutuhan.
- document.querySelector('#profil h2'): Metode ini memilih elemen pertama yang cocok dengan selektor CSS yang diberikan (dalam hal ini, elemen <h2> yang berada di dalam elemen dengan id="profil").
- namaProfil.textContent = "Budi Setiawan";: Mengubah konten teks dari elemen yang dipilih.
- fotoProfil.src = 'gambar-baru.jpg';: Mengubah atribut src (sumber gambar) dari elemen gambar.

Langkah 5: Melihat Hasil Website Anda

Buka file index.html di web browser Anda. Anda bisa melakukannya dengan cara:
- Klik kanan pada file index.html di file explorer Anda, lalu pilih “Open with” dan pilih browser Anda.
- Seret file index.html ke jendela browser yang terbuka.

Anda sekarang akan melihat halaman profil sederhana Anda. Coba klik tombol “Sapa Saya!” untuk melihat interaksi JavaScript.

Langkah Selanjutnya:

Ganti Placeholder:
- Ganti placeholder.jpg di index.html dengan nama file gambar Anda. Pastikan gambar tersebut ada di folder ProyekWebsiteSaya atau berikan path yang benar.
- Ubah teks “Nama Saya” dan deskripsi di index.html dengan informasi Anda.
- Ubah “© 2025 Nama Anda” di index.html.
Eksplorasi Lebih Lanjut:
- HTML: Pelajari lebih banyak tag HTML untuk menambahkan berbagai jenis konten (daftar, tabel, formulir, dll.).
- CSS: Eksplorasi properti CSS lainnya untuk mengubah warna, font, tata letak (Flexbox, Grid), dan menambahkan animasi.
- JavaScript: Pelajari lebih lanjut tentang manipulasi DOM (Document Object Model), menangani event, membuat fungsi, dan berinteraksi dengan API.
Sumber Belajar:
- MDN Web Docs (Mozilla Developer Network): Sumber referensi terlengkap untuk HTML, CSS, dan JavaScript.
- W3Schools: Tutorial interaktif yang bagus untuk pemula.
- freeCodeCamp: Kurikulum belajar coding gratis yang komprehensif.

Selamat! Anda telah berhasil membuat website sederhana pertama Anda dengan HTML, CSS, dan JavaScript. Ini adalah langkah awal yang bagus dalam perjalanan Anda menjadi seorang pengembang web. Teruslah berlatih dan bereksperimen!

Yuk Bikin Website kalian dengan berlangganan di domainesia

Bagikan artikel ini ke:

Tentang Penulis

Yoda P Gunawan

Sarjana ekonomi dari jurusan manajemen dan bisnis yang sekarang lebih sering bekerja di bidang teknologi sebagai programmer & terkadang menjadi desainer untuk beberapa project.Pernah membuka Konsultan bisnis sendiri , dan juga bekerja untuk beberapa perusahaan, baik nasional maupun multinasional. Waktu berlalu saat ini penulis kembali merintis karir lagi dan mencari peluang rejeki di era yang dinamis seperti saat ini.