Belajar Bahasa Pemrograman HTML, CSS dan Javascript, tidak Sulit (jika memahami prinsipnya)

Sumber gambar: http://4.bp.blogspot.com/

Pengantar

Dalam bukunya yang berjudul “The 8th Habbit”, Stephen R Covey memaparkan teori pembagian zaman, yaitu: Zaman Berburu dan Mengumpulkan Makanan, Zaman Bercocok Tanam, Zaman Industri, Zaman Pekerja Informasi / Pengetahuan dan Zaman Kebijaksanaan. Kita telah melewati tiga zaman, dan saat ini sedang berada pada zaman keempat, yaitu Zaman Pekerja Informasi / Pengetahuan yang ditandai dengan ditemukannya teknologi komputer dan internet. Penemuan kedua teknologi tersebut, menuntut orang-orang agar pandai berkomputer dan memahami dunia internet. Bahkan perkembangan dari zaman keempat ini, menuntut orang-orang agar tidak hanya memahami teknologi komputer dan internet saja, melainkan juga memiliki skill pemrograman. Hal tersebut mengisyaratkan bahwa skill pemrograman tidak mesti hanya dimiliki oleh orang-orang yang berlatar belakang IT (Information and Technology) saja, melainkan juga sebaiknya dimiliki oleh orang-orang yang berlatar belakang apapun karena skill pemrograman memiliki banyak manfaat.

Manfaat-manfaat belajar atau memiliki skill pemrograman pernah dikemukakan oleh beberapa tokoh dunia. Sebut saja Steve Jobs, pendiri komputer Apple, mengatakan:

“I think everybody in this country should learn how to program a computer because it teaches you how to think”, 

yang kurang lebih artinya adalah dengan belajar pemrograman, itu mengajarkan kita untuk berfikir. Kemudian pendiri Facebook, Mark Zuckerberg, juga mengatakan:

“In fifteen years we’ll be teaching programming just like reading and writing, and wondering why we didn’t do it sooner”, 

yang kurang lebih artinya adalah dalam lima belas tahun ke depan (beberapa tahun lagi), orang-orang akan melakukan pembelajaran terhadap pemrograman, dan takjub mengapa tidak dilakukan dari awal-awal. Tokoh selanjutnya adalah Kresna Galuh, CEO CodePolitan, mengatakan bahwa

“Ketika kita memiliki skill coding (skill pemrograman), kita akan leluasa untuk berkarya membuat sebuah aplikasi yang akan menyelesaikan banyak masalah”.

Realitas dari tuntutan untuk memiliki skill pemrograman adalah pengaturan template-template blog yang disediakan oleh penyedia template blog gratis dewasa ini. Sebut saja http://www.templateism.com/. Dalam website tersebut, disediakan template-template blog profesional yang gratis, namun template-template blog tersebut menuntut kita untuk memahami bahasa pemrograman, karena template-template blog profesional tersebut tidak bisa diatur secara praktis, melainkan harus secara manual dengan menggunakan bahasa pemrograman HTML, CSS dan Javascript.

Belajar Bahasa Pemrograman HTML, CSS dan Javascript tidak Sulit (jika memahami prinsipnya)

Bahasa merupakan alat yang berfungsi untuk menyampaikan isi kepala kita kepada orang lain. Bahasa pemrograman adalah alat yang berfungsi untuk menyampaikan isi kepala kita (perintah) kepada program tertentu. Terdapat sangat banyak bahasa pemrograman, dan bahasa pemrograman yang pada umumnya digunakan dalam dunia website adalah HTML, CSS dan Javascript.

Prinsip kerja bahasa pemrograman adalah kita atau user dapat diibaratkan sebagai majikan, dan program dapat diibaratkan sebagai pembantu yang tidak memiliki kemampuan untuk membangkang. Ia hanya menerima perintah dari kita sebagai majikan, kemudian melakukan pekerjaan sesuai dengan perintah yang diberi. Akan tetapi, pembantu ini hanya memahami perintah yang menggunakan bahasa pemrograman yang baik dan benar, yaitu bahasa yang sesuai dengan aturan bahasanya. Sama halnya jika kita berkomunikasi dengan orang Jerman menggunakan bahasa Indonesia. Orang Jerman tentu tidak memahami bahasa yang kita gunakan. Begitupun dengan bahasa pemrograman, jika kita membuat perintah kepada HTML dengan menggunakan bahasa pemrograman Action Script (misalnya), maka jelas HTML tidak akan memahami perintah kita. Oleh karena itu, tiap bahasa pemrograman memiliki bentuk, kosa kata dan aturan sintaksnya masing-masing.

Sebagai contoh bahasa pemrograman HTML memiliki struktur sebagai berikut:

Ciri khas dari bahasa HTML adalah memiliki tag-tag, dan setiap perintah diawali dengan tag, yaitu tanda “<” dan “>”. Setiap kali membuat kode HTML, kita harus mendeklarasikan (mengumumkan) terlebih dahulu HTML jenis apa yang kita gunakan. Jika kita menggunakan HTML 5 (HTML versi terbaru yang sekarang banyak digunakan), maka kita cukup mengetikkan “<!doctype html>” seperti yang dapat dilihat di atas. Selain itu, aturan bahasa HTML adalah setiap perintah harus dibungkus dengan tag pembuka dan tag penutup. Sebagai contoh pada kode <head>. Tag pembukanya adalah <head> dan tag penutupnya adalah </head>. Tag penutup menggunakan garis miring ("/") sebelum kata.

Kode HTML pada gambar di atas merupakan struktur dasar bahasa HTML. Pada awalnya kita mendeklarasikan (mengumumkan) kalau kita menggunakan HTML 5, dan <html> adalah kode yang harus dituliskan untuk memulai menggunakan bahasa HTML yang kemudian ditutup dengan menggunakan </html>. Kode <head> merupakan bagian atas sebuah website. Jika kita ingin mengatur bagian atas sebuah website, maka kita dapat menuliskan kode-kode di antara <head>………..</head>. Kode <title>……………..</title> adalah untuk  menuliskan judul website atau halaman website. Pada bagian <body> ………… </body> diisikan hal-hal yang menyangkut isi sebuah website. Jadi jika ingin melakukan pengaturan pada isi website, di bagian tersebutlah diketikkan kodenya.

Hubungan antara HTML, CSS, dan Javascript

Dalam sebuah website, bahasa pemrograman yang digunakan ada tiga, yaitu HTML, CSS dan Javascript. Ketiga bahasa pemrograman tersebut saling terkait satu sama lain dan memiliki fungsinya masing-masing. HTML berfungsi untuk membuat struktur halaman website serta menyajikan konten. CSS berfungsi untuk menghias halaman website agar memiliki nilai estetika, dan Javascript berfungsi untuk membuat sebuah website menjadi interaktif.

Hubungan antara ketiganya dapat dianalogikakan dengan boneka kayu. HTML adalah sebuah boneka kayu polos yang memiliki anatomi atau struktur: kepala, badan, tangan dan kaki. CSS adalah pakaian yang digunakan oleh boneka kayu tersebut, dan Javascript adalah perilaku yang diberikan kepada boneka tersebut seperti cara berjalan atau gaya bicara.

Cara yang dapat digunakan untuk melihat perbedaan antara website yang mengenakan pakaian (menggunakan CSS) dengan yang tidak (hanya menggunakan HTML) ada dua. Cara pertama adalah dengan menyimpan halaman website dengan dua tipe Save As, yaitu “Webpage, HTML Only” dan “Webpage, Complete”, kemudian membandingkannya. Ketika kita menyimpan halaman website dengan menggunakan Save As Type: “Webpage, HTML Only”, maka filenya hanya ada satu, yaitu file HTML yang hanya berisi struktur dan konten halaman website. Sedangkan ketika kita menyimpan halaman website dengan menggunakan Save As Type: “Webpage, Complete”, maka selain file HTML, file-file lain juga ikut tersimpan yang terhimpun dalam satu folder dengan nama folder yang sama dengan nama file HTML. Isi dari folder tersebut dapat diibaratkan sebagai pakaian dari halaman website yang disimpan, sehingga ketika file HTML dibuka, halaman website akan tampil secara keseluruhan. 

Cara kedua merupakan cara yang lebih praktis, yaitu dengan menambahkan ekstensi ke web browser kita, dalam contoh ini web browser yang digunakan adalah Google Chrome. Ekstensi yang akan ditambahkan bernama “Pendule”, dapat diinstal di sini. Setelah ekstensi Pendule dtambahkan, maka secara otomatis akan tampil icon gerigi di sudut kanan atas. Klik ikon gerigi tersebut, lalu pilih “Disable all styles”, maka halaman website yang akan tampil hanyalah struktur dan kontennya saja, atau HTML-nya saja.

Untuk lebih menggambarkan, berikut ilustrasinya:

Ilustrasi di atas adalah tampilan website yang telah kita kenal luas, yaitu Facebook, dengan tanpa pakaian (tanpa CSS) dan dengan pakaian (menggunakan CSS) yang disertai dengan ilustrai boneka kayu di sebelah kanannya. Halaman facebook tanpa CSS dapat diibarkan dengan boneka kayu tanpa pakaian, sedangkan halaman facebook menggunakan CSS dapat diibaratkan dengan boneka kayu yang mengenakan pakaian.

Langkah Selanjutnya Lebih Membutuhkan Inisiatif

Sub judul ini merupakan akhir dari tulisan ini, dan sebagai akhir, akan ditampilkan gambar berikut:

Gambar di atas merupakan potongan kode dalam template sebuah blog. Jika dilihat sekilas memang terasa rumit. Namun dengan memahami prinsip bahasa pemrograman seperti yang telah diuraikan dalam tulisan ini, maka kode-kode tersebut sebenarnya tidaklah rumit.

Hal utama yang dibutuhkan untuk dapat memahami kode-kode seperti di atas adalah RASA INGIN TAHU karena hal tersebut merupakan modal awal untuk memperoleh pengetahuan. Jika rasa ingin tahu sudah dimiliki, maka halangan apapun dalam memperoleh pengetahuan dapat diatasi.

Penulis sendiri adalah orang yang bukan berlatar belakang IT. Namun karena penulis dikendalikan oleh rasa ingin tahu, maka prinsip-prinsip bahasa pemrograman dalam tulisan ini dapat diperoleh, sehingga kemudian dapat dibagikan. Penulis menyadari bahwa cara terbaik untuk belajar adalah dengan berbagi apa yang telah didapatkan dari hasil pembelajaran. Dengan berbagi ilmu pula, kita tidak akan kekurangan ilmu, melainkan malah akan bertambah.

Akhir kata, tulisan ini bertujuan untuk memperkenalkan mindset bahwa belajar bahasa pemrograman itu tidaklah sulit dan skill pemrograman tidak mesti harus dimiliki oleh orang dengan berlatar belakang IT. Oleh karena itu, untuk dapat memahami lebih lanjut bahasa pemrograman khususnya HTML, CSS dan Javascript, maka lebih membutuhkan inisiatif karena masih banyak hal-hal yang bersifat teknis lagi yang harus diketahui. Semoga tulisan ini membawa manfaat bagi kita semua.