Memulai Membuat Website Pertamamu Tanpa Instal Apapun
Tidak punya pengetahuan programming tetapi ingin memiliki website? Tenang, untuk memulai belajar membuat website tidak sesulit itu kok. Bahkan, kamu bisa melakukannya tanpa instal apapun. Cuma dengan aplikasi Notepad dan browser kesayangan kamu, kamu bisa membuat website.
Mari kita mulai.
Yang Harus Disiapkan
Walaupun kamu tidak harus menginstal apapun, tentunya tetap harus ada yang disiapkan. Berikut ini adalah hal-hal yang harus disiapkan,
- Niat. Tanpa ini kamu ga akan bisa.
- Text editor. Jika kamu menggunakan Windows, gunakan Notepad. Ada banyak text editor lain yang bisa digunakan seperti Sublime, Notepad++, dan VSCode, namun untuk sekarang cukup menggunakan Notepad.
- Browser. Gunakan browser yang kamu biasa gunakan, baik itu Chrome, Firefox, Safari, atau yang lain.
Seharusnya, kamu sudah memiliki semuanya di komputer kamu tanpa melakukan instalasi apapun.
Komponen Utama
Di dalam sebuah website, secara umum, terdiri dari tiga komponen utama. Komponen tersebut yakni
-
HTML
HTML merupakan file yang mendefinisikan struktur dari sebuah website. Selain itu file ini berisikan metadata website tersebut yang contohnya seperti judul halaman, style dan script yang digunakan.
-
CSS
File CSS digunakan untuk mendefinisikan style atau tampilan dari sebuah website. Biasanya file inilah yang kamu ubah untuk memperindah tampilan.
-
JS (Javascript)
Javascript digunakan untuk melakukan scripting dan programming terhadap sebuah website. Biasanya digunakan untuk melakukan perubahan pada website secara dinamis bergantung dari input pengguna.
Kita akan membuat file-file diatas di komputer kamu untuk dapat membuat website.
Membuat File HTML
Untuk membuat file HTML, sama seperti membuat file biasa. Di Windows, buat sebuah folder, lalu klik kanan pilih ‘New –> Text Document’. Kemudian namakan filemu menjadi index.html. Pastikan filemu benar-benar berakhiran html dan bukan txt, ya!
Kemudian, isi file HTML kamu dengan kode berikut ini,
<html>
<head>
<title>Halaman Pertama</title>
</head>
<body>
Halo Dunia!
</body>
</html>
Contoh jika kamu menulis di Notepad bisa dilihat di bawah ini,
Kemudian, buka file index.html yang sudah kamu simpan menggunakan browser. Di contoh ini, browser yang digunakan adalah Chrome.
Kamu akan melihat hasil dari file HTML yang kamu buat akan ditampilkan oleh browser. Selamat kamu berhasil melakukan langkah pertama dalam membuat website.
Penjelasan Kode
<html>
<head>
<title>Halaman Pertama</title>
</head>
<body>
Halo Dunia!
</body>
</html>
HTML menggunakan tag yang diawali oleh tanda <...> dan diakhiri oleh </...> dalam mendeklarasikan struktur. Tag paling awal yang harus ada pada sebuah file HTML adalah tag <html>. Selanjutnya diikuti oleh 2 bagian utama yakni tag <head> dan <body>.
Tag <head> berisi metadata dari file HTML tersebut. Pada contoh di atas adalah judul halaman yang didefinisikan menggunakan tag <title>. Ada banyak tipe metadata yang bisa digunakan, beberapa diantaranya akan dijelaskan pada bagian CSS dan JS.
Tag <body> merupakan struktur yang akan ditampilkan oleh browser. Di dalam bagian inilah sebuah website dibentuk. Rangka website ditulis di bagian ini, yang nantinya dapat dipercantik dengan menggunakan file CSS. Pada contoh di atas, bagian ini hanya berisi teks sederhana yaitu Halo Dunia! yang langsung ditampilkan pada browser tanpa melalui pemrosesan apapun.
Membuat File CSS
Agar tampilan website mu lebih menarik, kamu butuh file CSS. File CSS ini berguna untuk membuat tampilan website sesuai dengan keinginanmu.
Pertama-tama, kita ubah file HTML kamu menjadi seperti ini,
<html>
<head>
<title>Halaman Pertama</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="utama" class="tulisan">
Halo Dunia!
</div>
</body>
</html>
Sekarang, coba kita ubah website polos tersebut menjadi lebih menarik. Buat file bernama style.css dan salin kode berikut ini ke dalam file kamu.
.tulisan {
font-size: 50px;
background-color: red;
color: white;
}
Buka kembali file index.html mu di browser atau refresh browser kamu jika kamu masih membukanya. Kamu seharusnya akan melihat perubahan tampilan pada website yang kamu buat menjadi seperti ini,
Penjelasan
Penjelasan akan dibagi menjadi 2 bagian yakni untuk HTML dan CSS.
HTML
Kode pertama paling atas yang ditambahkan pada file HTML adalah:
<link rel="stylesheet" href="./style.css" />
Kode ini digunakan untuk memberitahu browser untuk menggunakan file style.css dalam menampilkan website.
Kode kedua yang ditambahkan adalah
<div id="utama" class="tulisan">
Halo Dunia!
</div>
Tag <div> berfungsi untuk membuat suatu blok baru yang bernama division. Simpelnya, dia memberikan blok polos tanpa tampilan yang bisa kita ubah-ubah semau kita.
Selain itu, tag <div> membuat kita bisa memberikan atribut id dan class pada suatu elemen. Penggunaan kedua atribut ini akan dijelaskan di bawah.
CSS
.tulisan {
font-size: 50px;
background-color: red;
color: white;
}
Kode diatas dapat diartikan menjadi:
Untuk tag yang memiliki
classbernama ‘tulisan’ (.tulisan), lakukan hal ini: buat ukuran tulisan menjadi 50 pixel (font-size: 50px), ganti warna background menjadi merah (background-color: red), dan ubah warna tulisan menjadi putih (color: white).
Membuat File JS (Javascript)
File Javascript (JS) digunakan untuk melakukan perubahan pada website kamu berdasarkan input pengguna atau juga data yang tersedia. Contoh paling simpel yang akan kita lakukan disini adalah merubah teks ketika pengguna menekan tombol.
Pertama, kembali ganti kode HTML di file index.html mu menjadi seperti ini
<html>
<head>
<title>Halaman Pertama</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<div id="utama" class="tulisan">
Halo Dunia!
</div>
<button onclick="ubahTulisan()">Tekan Aku</button>
</body>
</html>
Selanjutnya, buat file baru bernama script.js yang berisi kode berikut,
function ubahTulisan() {
document.getElementById("utama").innerHTML = "Halo Kamu";
}
Kode diatas akan berjalan ketika pengguna website menekan tombol bertuliskan “Tekan Aku”.
Kemudian, buka kembali browser kamu dan refresh pada website yang telah kamu buat. Akan terlihat seperti ini.
Kemudian ketika kamu menekan tombol “Tekan Aku”, tulisan akan berubah menjadi:
Penjelasan
Penjelasan akan dibagi menjadi 2 bagian yakni untuk HTML dan JS.
HTML
<script src="./script.js"></script>
Bagian ini menyuruh browser untuk menggunakan script yang ada di file script.js dan menjalankannya jika terdapat input pengguna yang membuat script tersebut berjalan.
<button onclick="ubahTulisan()">Tekan Aku</button>
Bagian ini menambahkan elemen tombol pada website kamu. Selain itu elemen tombol ini memiliki attribute berupa onclick yang artinya pada saat tombol ini di klik oleh pengguna, fungsi bernama ubahTulisan() akan dijalankan. Fungsi ini ada di file script.js yang sudah kamu buat.
JS
function ubahTulisan() {
document.getElementById("utama").innerHTML = "Halo Kamu";
}
Isi dari file Javascript ini adalah sebuah definisi fungsi bernama ubahTulisan(). Fungsi ini akan mengubah teks pada elemen yang memiliki atribut id sama dengan “utama”. Tulisannya akan berubah menjadi “Halo Kamu”.
Hasil Akhir
Selamat! Kamu berhasil membuat sebuah website simpel. Website kamu dapat berinteraksi dengan pengguna walaupun sangat terbatas, yakni melalui sebuah tombol. Selain itu kamu juga berhasil mengubah tampilan website menggunakan CSS.
Langkah Selanjutnya
Jika kamu tertarik untuk melanjutkan belajar membuat website berikut topik-topik yang dapat kamu cari untuk dipelajari:
- CSS Bootstrap. Digunakan sebagai alat bantu untuk membuat tampilan yang menarik.
- Javascript Programming Language. Mempelajari lebih dalam mengenai Javascript karena web development akan sangat berkutat pada bahasa ini.
- XAMPP dan PHP. XAMPP digunakan untuk membuat server sehingga kamu bisa memiliki database dan backend. PHP digunakan sebagai bahasa pemrograman di bagian server atau backend.
- NodeJS dan NPM. Sebagai server dan backend yang saat ini banyak digunakan oleh startup.
Bagikan di
Kolom Diskusi