Bagaimana HTML, CSS dan JavaScript Bekerja ?

Join Komunitas TipsKoding.com

Untuk orang yang benar-benar belum pernah koding sebelumnya dan kemudian tertarik pada dunia desain web, ketika melihat antarmuka/tampilan sebuah web, baik dari segi tata letak, desain, dan lain sebagainya  tentu itu akan membuatnya begitu terkesima dan WOW. Dan jika itu adalah yang anda rasakan, dan seketika muncul pemikiran di benak anda, bagaimana bisa ? juga tersirat bahwa itu adalah hal yang akan sulit.

Jangan ! jangan langsung memvonis bahwa itu akan menjadi sulit ! karena mudah atau sulit itu adalah hal yang sangat relatif. Yang jelas akan ada level yang harus dilalui untuk sampai pada titik kita mampu mendesain sebuah web yang baik bahkan akan lebih baik dari yang pernah kita lihat sebelumnya.

Jika anda hanya sekedar ingin mempunyai web atau blog dan merasa tidak tertarik membuatnya sendiri maka anda bisa gunakan fasilitas yang sudah ada, baik itu gratis atau berbayar. Misal buat saja blog menggunakan platform blog seperti blogger.com, wordpress.com, wix.com, squarespace dan sebagainya. Dipastikan anda bisa 0% ngoding, karena hampir semua hal yang dibutuhkan untuk blogging sudah tersedia di platform tersebut, anda hanya tinggal mempelajari cara kerja untuk mengelolanya dan semua cara pengelolaan sudah disiapkan dalam dokumentasi dari platform blog tersebut.

Tetapi jika anda berniat untuk menekuni bidang desain web dan membangun web dari nol ataupun ingin memiliki kemampuan untuk merekayasa desain sebuah desain web maka bahasa pertama yang perlu anda pelajari adalah HTML (Hypertext Markup Language), selanjutnya fahami CSS (Cascading Style Sheet) dan akan lebih maksimal jika anda faham JS (JavaScript).

HTML adalah bahasa script yang fokus pada pembentukan struktur atau element seperti tulisan, gambar, tabel, form, video, audio dan sebagainya yang biasa kita lihat dalam sebuah web. Berikut adalah contoh script HTML :

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Document</title>
</head>
<body>
<h1 id="judul">Document Title</h1>
<p id="paragraf"> Lorem, ipsum dolor sit amet
elit. Officia, inventore amet necessitatibus
molestiae provident obcaecati accusantium
quisquam debitis.
</p>
</body>
</html>
[/html]

Hasil dalam browser :

CSS bertugas untuk mempercantik tampilan dari struktur atau elemen HTML, baik dari segi ukuran, warna, jenis huruf, background, style dari link, dan sebagainya. Ada beberapa cara untuk menerapkan css ke halaman html, yaitu inline element, internal css, dan external css. Untuk penjelasan lebih lanjut silahkan baca artikel ini : Bagaimana menerapkan CSS untuk HTML.

Berikut adalah contoh css dengan teknik internal css akan memberi dampak struktur/elemen html, biasanya para web desainer menyebutnya untuk mempercantik halaman html.

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Document</title>
<style>
body{
background-color: rgba(50, 50, 100, 0.3);
}
h1{
font-family: Cambria, ‘Times New Roman’, serif;
font-size: 20pt;
background-color: blueviolet;
}
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 15pt;
}
</style>
</head>
<body>
<h1 id="judul">Document Title</h1>
<p id="paragraf"> Lorem, ipsum dolor sit amet
elit. Officia, inventore amet necessitatibus
molestiae provident obcaecati accusantium
quisquam debitis.
</p>
</body>
</html>
[/html]

Hasil dalam browser setelah penerapan css :

Sedangkan Javascript bertugas untuk membuat perilaku dari elemen web kita lebih hidup, karena banyak hal yang tidak bisa dipenuhi ketika kita hanya menggunakan HTML dan CSS. Namun biasanya para pemula akan mulai sering mengerutkan dahi saat mendalami bahasa scripting ini, karena berdasarkan pengalaman pribadi dan kebanyakan orang mengalami hal yang sama. 😀 Jadi harus kuat-kuatin deh mental dan motivasi saat mulai mempelajari bahasa scripting ini. Tapi jika kamu sudah memiliki pengalaman belajar algoritma pemrograman maka itu akan sangat membantu. Dalam javascript kita akan mulai dikenalkan pada pendeklarasian variabel, tipe data, operator, fungsi dan sebagainya.

Coba tambahkan script berikut pada dokumen html diatas.

[javascript]
<script>
function myFunction() {
var x = document.getElementById("judul");

if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}

var y = document.getElementById("paragraf");
if (y.style.display === "none") {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
</script>
[/javascript]

Setelah itu tambahkan elemen button berikut didalam elemen body yang berfungsi untuk memanggil fungsi yang dibuat dalam javascript tersebut:

[html]
<button onclick="myFunction()">Klik Saya</button>
[/html]

Maka hasilnya akan seperti ini :

Tentu itu hanyalah sebuah contoh sederhana, begitu banyak hal yang harus dipelajari. Berikut ini adalah contoh apa yang bisa javascript lakukan dalam halaman html kita.

Ini adalah game untuk menebak angka antara 1 and 100. Kamu punya 10 kali kesempatan untuk menebak. Kami akan memberi tahu jika angkanya terlalu tinggi atau terlalu rendah



Tidak ada cara lain untuk lebih tahu dan merasakan bagaimana HTML, CSS dan Javascript bekerja selain dengan memulai mempelajari dan mempraktekannya. Selain itu yang terpenting adalah kamu benar-benar merasa nyaman untuk mempelajari semuanya, setiap kerumitan yang datang jadikan sebagai sebuah tantangan yang akan mendatangkan kebanggaan tersendiri jika kamu mampu mencari solusinya.

Ikuti terus tipskoding.com untuk mendapatkan update terbaru tutorial koding terutama bagi kamu yang masih merasa pemula.

keepLearning & Sharing, don't forget tipskoding.com. 🙂

Join Komunitas TipsKoding.com

Article Tags

Facebook Comments

POST A COMMENT.