Mengenal Bahasa Pemrograman CSS

 

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?

Kelebihan CSS

Mudah bagi Anda untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.

Anda pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.

Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

Cara Kerja CSS

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

<style>

p {

color: blue;

text-weight: bold;

}

<style>

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

<style>

p {

text-align: center;

font-size: 16px;

color: pink;

}

</style>

Lihat CSS cheat sheet untuk contoh yang lain.

Mari kita bahas beberapa style CSS, yakni Inline, External, dan Internal.

CSS Style Internal, External, dan Inline

Kami akan membahas masing-masing CSS Style secara singkat. Untuk informasi atau pembahasan yang lebih mendalam, kami menyertakan link di bawah ikhtisar.

CSS Style Internal diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman.

Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.

External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.

CSS Style Inline menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat.

Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.

Untuk mengetahui lebih lanjut, silakan baca artikel kami tentang perbedaan CSS internal, external, dan inline.

Kesimpulan

Berikut beberapa poin yang dapat disimpulkan dari artikel ini:

• CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.
• Ada tiga style di CSS, dan untuk menerapkan CSS di banyak halaman pada waktu bersamaan, gunakan External style.
• Saat ini sudah banyak website yang menggunakan CSS. Hal ini dikarenakan CSS adalah salah satu bahasa markup yang diwajibkan ada.

Read More

Mengenal Bahasa Pemrograman JavaScript

JavaScript adalah bahasa pemrograman yang digunakan dalam pengembangan website agar lebih dinamis dan interaktif. Kalau sebelumnya kamu hanya mengenal HTML dan CSS, nah sekarang kamu jadi tahu bahwa JavaScript dapat meningkatkan fungsionalitas pada halaman web. Bahkan dengan JavaScript ini kamu bisa membuat aplikasi, tools, atau bahkan game pada web.

Sejarah JavaScripst

Pada tahun 1994 JavaScript mulai dikenal, pada saat itu web dan internet sudah mulai berkembang. JavaScript didesain oleh Brendan Eich yang merupakan karyawan Netscape. Transformasi nama JavaScript, dimulai dari Mocha, Mona, LiveScript, hingga akhirnya resmi bernama JavaScript. 

Versi awal bahasa JS hanya dipakai di kalangan Netscape beserta dengan fungsionalitas pun yang masih terbatas. Singkat cerita pada tahun 1996 JavaScript secara resmi dinamakan sebagai ECMAScript. ECMAScript 2 dikembangkan pada tahun 1998 yang dilanjutkan dengan ECMAScript 3 setahun kemudian. ECMAScript terus dikembangkan sampai akhirnya menjadi JavaScript atau JS hingga saat ini. Pada tahun 2016, 92% web diketahui telah menggunakan JavaScript. Itulah mengapa JavaScript atau JS terus berkembang.

Keunggulan JavaScript :

1. General Purpose

Saat ini JavaScript tidak hanya digunakan di sisi client (browser) saja lho. Semenjak adanya Node.js JavaScript dapat digunakan di luar dari browser. Dengan begitu kamu bisa mengembangkan back-end (server), console, program desktop, mobile, IoT, game, dan lainnya menggunakan JavaScript.

2. Mudah untuk Dipelajari

Setiap bahasa pemrograman memiliki tingkat kesulitan yang berbeda. Tingkat kesulitan bisa dilihat dari beberapa faktor. Menurut saya sih, syntax atau penulisan jadi salah satu faktor yang paling penting buat dipelajari. JS masih tergolong mudah dipelajari asalkan kamu serius dalam belajar dan selalu berani melakukan improvement atau bermain-main dengan itu. Masih belum percaya JS mudah dipelajari? Baiklah, ini perbandingan JS dengan beberapa bahasa lainnya. Contohnya dalam menampilkan “Hello World!” ya.

Bahasa C++

#include <iostream>

 

int main()

{

  std::cout << "Hello, world!\n";

  return 0;

}

Bahasa Java

Java

1 2 3 4 5 6

class AppHelloWorld {   public static void main(String[] args) {          System.out.println("Hello World!");       } }

    Bahasa JavaScript

console.log('Hello World!')

Kode program di atas menampilkan hasil yang sama yaitu “Hello World!”. Gimana? terbukti kan, JS jauh lebih ringkas dalam hal penulisan.

3. Sangat Powerfull

Kamu harus tau! JavaScript termasuk bahasa pemrograman yang sudah mature, sifat inilah yang membuat JavaScript sangat powerfull. Dulu, website basisnya masih PHP atau mungkin saja kita pakai WordPress. Semua logika web dibuat dan bergantung pada sisi server. Inilah yang membuat web browser lebih statis. 

Browser modern memiliki sifat interaktif dan dinamis. Logika yang sebelumnya harus di-handle oleh sisi server, kini sepenuhnya dapat di-handle pada sisi client, semua berkat JavaScript.

4. Banyak perusahaan yang mengimplementasikan JS

Siapa yang nggak mau kerja di startup? Iya pasti maulah, jika gajinya besar hehe. Kamu akan dibutuhkan perusahaan seperti startup jika serius untuk belajar JavaScript. 

JavaScript menempati urutan ke-4 soal gaji developer tertinggi di tahun 2018 dengan rata-rata pendapatan adalah $105,415 (Techrepublic). Bayangkan jika dirupiahkan? Apalagi pada tahun ini bisa makin lebih besar nih. Dan lebih manisnya lagi, jika kamu bekerja sebagai developer Google dsb karena mereka semua sudah menerapkan JavaScript sebagai penunjang teknologi. Dan itupun juga tergantung pada level pemrograman kamu dan juga posisi kerja.

5. Dukungan Komunitas

Inilah salah satu alasan JavaScript banyak digandrungi oleh developer. Dukungan dari komunitas adalah hal penting dalam memilih sebuah bahasa pemrograman. Tentu saja, jika kamu sedang mengembangkan sebuah aplikasi, serta  menemukan bug. Dengan dukungan komunitas yang baik, maka kamu akan lebih mudah untuk menemukan solusi dari bug tersebut.

Tools yang Dipakai untuk Belajar JavaScript

Apa saja sih tools yang harus disiapkan untuk belajar JavaScript? Khusus bagi pemula, kamu cukup menggunakan tools berikut:

1. Web Browser (Google Chrome, Firefox, Opera, dll)
2. Teks Editor (rekomendasi: VS Code)
3. Node js 

Mengenal Console JavaScript

Banyak orang yang mengatakan, “Belajar JavaScript itu susah, tidak seperti belajar HTML. Sebab saat melihat hasilnya di web browser, pesan error-nya tidak tampil.” Pendapat ini tidak benar ya karena kamu bisa melihatnya melalui console.

Buka terlebih dahulu Google Chrome, kemudian klik kanan pilih “Inspect” -> Console.

Kamu juga dapat secara langsung menambahkan kode program pada console browser.

1	console.log ("Hallo sobat Dicoding!")

Jika kamu menggunakan node, maka bisa lakukan cara berikut:

Kita dapat simpulkan bahwa console dapat digunakan untuk menguji sebuah fungsi ataupun kode JavaScript. Console dapat kita gunakan juga untuk melihat pesan error saat debugging program. Terus apa lagi ya? Kamu dapat simpulkan sendiri deh.

Contoh Ngoding Dasar dengan JavaScript

Kalau begitu, mari kita coba praktikan dengan menuliskan kode program berikut ini. Kamu bisa gunakan teks editor sepert VScode atau sejenisnya.

Kode Lab:

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

Kode Lab: <!DOCTYPE html> <html> <head>     <title>Hello World Javascript</title> </head> <body>     <script>         console.log("Saya belajar Javascript di Dicoding");         document.write("Hallo Dicoding");     </script> </body> </html>

Jika dilihat di teks editor, maka akan terlihat seperti ini:

Silakan buka berkas belajar2.html dengan cara double klik saja ya. Maka outputnya seperti ini:

Lho, kok nggak muncul tulisan “Saya belajar JavaScript di Dicoding”. Jangan khawatir! Sebab perintah console.log() hanya akan menampilkan pesan ke dalam console JavaScript saja. Sedangkan document.write() berfungsi untuk menulis ke dokumen HTML.

Wah, kita sudah mengenal fungsi console.log() dan document.write(). Mantaps kan.

Simak juga beberapa artikel mengenai JavaScript:

1. 5 Alasan Kenapa JavaScript Penting untuk Web Programmer
2. Mengenal Fungsi Asynchronous Request di JavaScript
3. 5 Framework JavaScript Untuk Programmer Web

Baiklah, itulah yang dapat saya sampaikan. Insyaallah kita akan lanjutkan kembali materi di lain waktu ya. Jika ada pertanyaan atau saran, silahkan isi pada kolom komentar ya.

“Mengukur pembuatan program berdasarkan jumlah baris kode, sama seperti mengukur pembuatan pesawat terbang berdasarkan beratnya.” (Bill Gates)

 

Read More