Tertarik untuk menjadi web developer? Simak artikel berikut!
Website adalah kumpulan halaman dalam suatu domain yang memuat tentang berbagai informasi agar dapat dibaca dan dilihat oleh pengguna internet. Facebook, Twitter, dan Instagram adalah contoh dari website.
Untuk membentuk sebuah website, setidaknya ada tiga komponen utama, yaitu :
- HTML, bisa diperumpamakan sebagai tulang pada tubuh manusia.
- CSS, bisa diperumpamakan sebagai hiasan (pakaian).
- JavaScript, sebagai gerak dan fungsi anggota tubuh manusia.
A. HTML
Kita masuk pada penjelasan HTML. Jadi, HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk menyusun halaman website. Layaknya tubuh manusia, HTML adalah bagian terpenting dari ketiga komponen lainnya. Ia mampu menampilkan informasi yang dibutuhkan kepada pengguna.
Contoh penggunaan HTML adalah sebagai berikut :
Struktur HTML di atas adalah elemen-elemen yang termasuk paling sering digunakan oleh developer. Setiap elemen akan diawali dengan <tag> dan diakhiri dengan</tag>. Setiap <tag></tag> pada struktur HTML di atas memiliki fungsinya masing-masing, yaitu :
- <div></div>, sebagai tag murni untuk memisahkan konten satu dengan konten lainnya.
- <h1></h1>, sebagai header atau judul utama (ukuran font paling besar).
- <h2></h2>, sebagai subjudul (ukuran font lebih kecil daripada judul utama).
- <p></p>, menampilkan sebuah text paragraf.
- <img></img>, menampilkan gambar. Di mana src adalah atribut untuk lokasi gambar, sedangkan alt adalah atribut teks alternatif yang akan ditampilkan saat foto tidak dapat ditampilkan.
- <a></a>, adalah anchor atau hyperlink untuk menghubungkan pengguna ke halaman website lainnya.
Kalau kalian masih kesulitan memahaminya, silakan buka IDE kalian (contoh : Visual Studio Code) dan buat file dengan format .html . Silakan copy paste HTML di atas kemudian disimpan. Jalankan file .html tersebut menggunakan browser kalian. Hasilnya adalah seperti berikut ini.
B. CSS
Nah, selanjutnya kita akan bahas mengenai CSS. Jadi, apa sih itu CSS? CSS itu ibarat sebuah pakaian atau perhiasan pada tubuh manusia. Tentunya jika tubuh manusia hanya sekadar tulang tentu mengerikan bukan? Maka itulah fungsi dari CSS.
Lihatlah tampilan .html sebelumnya, tentu tidak menarik bukan? Maka kita akan mencoba membuatnya sedikit lebih menarik. Sekarang coba implementasikan perubahan pada file .html kalian.
Tenang jangan panik dulu 😅, bakalku jelasin satu-satu. Sekarang kalian bisa copy paste saja struktur HTML di atas.
- <head></head> digunakan sebagai tempat untuk menyimpan segala hal pendukung untuk sebuah website. Dalam hal ini, di dalamnya kita sisipkan <link></link> yang digunakan sebagai file .css yang akan kita buat. Atribut rel menandakan bahwa itu adalah file .css dan href adalah letak dari file .css tsb (pastikan berada dalam satu folder).
- Atribut class berguna pada file .css untuk mendekorasi tampilan website.
- Atribut id berfungsi untuk menentukan identitas unik suatu elemen.
Kita akan membuat tampilan website seperti di bawah ini.
Kemudian buatlah file styles.css dan ikuti syntax di bawah.
File yang diawali dengan titik (.) merupakan class yang merujuk pada elemen di HTML. Kalian bisa mendekorasi tiap-tiap elemen dengan cara tersebut.
Kalian juga bisa mendekorasi tanpa class (tanpa titik [.]), tetapi semua elemen dengan tag yang sama pada div yang sama akan ikut terdekorasi.
Penjelasan :
- margin-left : sebagai jarak margin dari kiri
- margin-right : sebagai jarak margin dari kanan
- background-color : merubah warna background
- border-radius : untuk membuat sudut div menjadi rounded
- font-family : untuk mengubah style font
- padding-top : sebagai jarak padding dari atas
- display : menentukan perilaku tampilan dari suatu elemen, dalam hal ini flex
- justify-content : salah satu atribut flex untuk menentukan letak konten secara horizontal
- margin-top : sebagai jarak margin dari atas
- text-align : untuk memposisikan letak text
- width : menentukan lebar suatu elemen
Cukup wajar apabila Anda adalah first timer dan sedikit overwhelmed untuk memahami masing-masing istilah di atas. Tenang, Learning takes time 😊
Kalian bisa mengulik lebih dalam tentang CSS di : https://www.w3schools.com/css/default.asp
C. JavaScript
Seperti perumpamaan di atas, JavaScript berguna untuk memberikan fungsionalitas pada sebuah web. Dalam hal ini kita akan membuat :
Ketika user meng-klik tulisan background, maka warna background akan berubah menjadi kuning atau hijau.
Background menjadi Kuning jika diklik kelipatan ganjil, dan Background menjadi hijau jika diklik kelipatan genap.
Sekarang copy paste syntax di bawah ini.
File JavaScript bisa digabungkan dengan file .html atau file .js tersendiri. Saat ini kita gabungkan saja dengan file .html. dengan menambahkan elemen <script></script>
Saya akan jelaskan secara garis besar :
Tipe Variabel :
- const : tipe variabel ini tidak bisa diubah kemudian.
- var : tipe variabel ini lebih fleksibel dan bisa diubah.
Variabel :
- toggleBtn : berguna untuk mendapatkan alamat dari id “#change”
- changeColor : berguna untuk mendapatkan alamat dari class “body”. Di mana “body” adalah elemen untuk keseluruhan tampilan website.
- count : berguna untuk menghitung nilai ketika user klik
Algoritma :
Lihat pada toggleBtn.addEventListener(‘click’, … ) ini artinya kita memberikan perintah : ketika user meng-klik maka jalankan sesuatu.
- Jika count genap, maka tampilkan background kuning.
- Jika count ganjil, maka tampilkan background hijau.
- Count++ artinya menambakan nilai count + 1. Ketika user mengklik text background satu kali, maka count bernilai 1. Jika dua kali, maka count bernilai 2.
Sekian dari artikel ini, jika Anda tertarik lebih lanjut mendalami web development maka Anda bisa mempelajarinya di berbagai course di internet atau di youtube. Mulailah pelajari secara perlahan mengenai basic html, css dan javascript. Setelah itu Anda bisa membuat project-project secara mandiri.
Terima kasih :D
