HTML, CSS, JavaScript, Tiga Serangkai Perakit Front End Website

Perbedaan Front-End dan Back-End pada pemrograman Web, kita mulai membahas hal-hal yang berhubungan dengan pemrograman front end, yaitu HTML, CSS, dan JavaScript. Sebenarnya apa itu HTML? apa itu CSS? apa itu JavaScript? Apa bedanya? Beberapa orang saat memulai tahap awal web development kadang mempertanyakan hal tersebut, mungkin kamu salah satunya. Ketiga hal ini adalah sesuatu yang lumrah dipakai dalam pemrograman web pada saat ini. Dan untuk kejelasan tentang pertanyaan yang muncul diatas tadi, akan saya coba jawab di artikel ini. Oh iya, artikel ini adalah bagian dari seri Pelatihan Pengembangan Web yang saya tulis ketika ada waktu luang, untuk sekedar berbagi dan mengisi blog ini.

HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Wikipedia

Dalam pemrograman front end web, sesuatu yang wajib ada adalah HTML, sedangkan css dan javascript adalah pilihan, tidak ada tetap dapat berjalan, ada akan menjadi lebih bagus. HTML adalah kerangka darii halaman. HTML bukanlah bahasa pemrograman, melainkan bahasa markah. HTML mengandung berbagai informasi seperti judul halaman, meta tag, dan isi halaman itu sendiri semuanya terdapat pada html, sehingga dalam halaman web, HTML adalah yang paling mutlak harus ada. HTML dapat diibaratkan tulisan di kertas biasa. Contoh dari HTML ada dibawah ini.
<!DOCTYPE html>
<html>
<head>
	<title>Ini Judul</title>
</head>
<body>
<h1>Hello World</h1>
<p>Hello World adalah halo dunia dalam bahasa inggris</p>
</body>
</html>

CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Wikipedia

Seperti namanya dan juga artikel wikipedia, CSS adalah sebuah style, gaya, aturan-aturan tentang komponen-komponen HTML sehingga menjadi lebih terstruktur, menarik atau untuk tujuan lainnya. CSS juga bukan merupakan bahasa pemrograman dan tidak akan menghasilkan apapun jika tidak ada HTMLnya. CSS hanya mengandung informasi mengenai aturan-aturan penerapan style/gaya pada halaman. Jika HTML adalah tulisan di kertas biasa, maka dengan adanya css, kamu bisa merubah tulisan tersebut menjadi lebih rapi, memberikan warna untuk beberapa bagian tertentu, meratakan ke kanan, kiri, dsb. Contoh dari CSS ada di bawah ini.
*,body{
  padding:0;
  margin:0;
}
h1{
  color:green;
}
p{
  padding: 20px;
  text-align: justify;
}

JavaScript

Javascript adalah bahasa pemrograman yang berjalan/ dijalankan oleh browser. Apa artinya ini? artinya adalah kode-kode yang ditulis dalam javascript, akan dikirimkan dalam bentuk kode sumbernya ke browser dan baru dieksekusi oleh browser. Kemampuan javascript adalah mampu membaca,menambah,mengurangi isi dari HTML. Jika HTML diibaratkan kertas bertuliskan sesuatu yang biasa, dan css adalah yang mewarnai dan merapikan tulisan, maka dengan ditambahkan javascript, itu bukan lagi sebuah tulisan di kertas. Namun sudah berubah menjadi papan tulis non permanen yang isinya walaupun sudah ditampilkan dapat diubah-ubah sesuka hati. Contoh dari JavaScript ada dibawah ini.
alert("Selamat datang di Kitablog");
document.getElementById('kontenku').setText('Textnya ganti ini ya');
Tak perlu bingung dengan apa yang dilakukan kode-kode yang saya tulis diatas, karena pembahasannya akan membutuhkan artikel sendiri. Yang terpenting adalah kalian mengetahui terlebih dahulu penyusun front end website dan bisa membedakan fungsinya. HTML kerangkanya, CSS adalah style/gaya, dan JavaScript adalah mesin yang akan memperbolehkan kita untuk mengubah-ubah isi web saat sudah diterima di browser.]]>

About: totop275


2 thoughts on “HTML, CSS, JavaScript, Tiga Serangkai Perakit Front End Website”

Leave a Reply

Your email address will not be published. Required fields are marked *