Pernah bertanya-tanya bagaimana cara kerja pemrograman komputer, tetapi belum pernah melakukan sesuatu yang lebih rumit di web selain mengunggah foto ke Facebook?
Siapapun bisa belajar coding, sama seperti semua orang bisa belajar bahasa baru. Sebenarnya, pemrograman itu seperti berbicara dalam bahasa asing , itulah sebabnya mereka disebut bahasa pemrograman . Masing-masing memiliki aturan dan sintaks sendiri yang perlu dipelajari langkah demi langkah. Aturan-aturan itu adalah cara untuk memberi tahu komputer Anda apa yang harus dilakukan. Lebih khusus lagi, dalam pemrograman web, ini adalah cara untuk memberi tahu browser Anda apa yang harus dilakukan.
Bagi sebagian dari kita, pemikiran merancang situs web dari awal bisa tampak seperti tugas yang sangat menakutkan. Ironisnya, bagi sebagian besar dari kita, situs web merupakan bagian dari kehidupan kita sehari-hari. Dengan cara yang sama internet menghubungkan kita, ada bahasa web khusus yang bekerja sama untuk membentuk internet dan situs web yang dikandungnya. HTML, CSS, dan JavaScript bekerja sama untuk membentuk desain front-end situs web dengan menerapkan informasi yang memengaruhi konten, gaya, dan interaktivitas situs.
Jadi ada lebih dari satu bahasa web?
Ada banyak bahasa web yang tersedia, namun kita hanya akan melihat tiga di antaranya. Mereka adalah HTML, CSS dan JavaScript dan mereka dianggap sebagai tulang punggung web. Ketika datang ke pengembangan web, ada pengembangan web front-end dan pengembangan web back-end. Ketiga bahasa ini untuk pengembangan web front-end dan bertanggung jawab atas apa yang dapat Anda lihat dan lakukan di situs web. Mereka disebut sebagai bahasa sisi klien saat dijalankan di browser (Google Chrome, Firefox, dll.) di komputer Anda. Browser menerjemahkan bahasa-bahasa ini dan hasil terjemahan ini adalah halaman web visual.
Penting untuk dicatat bahwa HTML dan CSS tidak dianggap sebagai bahasa pemrograman. HTML adalah bahasa markup dan CSS adalah bahasa penataan. JavaScript, bagaimanapun, adalah bahasa pemrograman. Oleh karena itu, mereka semua adalah bahasa web, tetapi mereka melakukan pekerjaan yang berbeda.
Bagi mereka yang baru mengenal desain web , cara termudah untuk memahami hubungan ini adalah dengan melihat analogi yang akan memecahnya menjadi potongan-potongan kecil. Salah satu cara untuk melihat pengembangan web front-end adalah dengan melihat ketiga bahasa ini berinteraksi satu sama lain dengan cara yang sama seperti tubuh manusia berinteraksi dengan lingkungannya.
Website sebagai Tubuh Manusia
Untuk membuatnya mudah dipahami, saya akan merujuk ke tiga bahasa web ini sebagai aspek berbeda dari tubuh manusia. Kita akan melihat tubuh itu sendiri sebagai semacam pusat komando; aksesoris yang dikenakan pada tubuh sebagai cara untuk mewakili gaya pribadi; dan kemudian tindakan yang mampu dilakukan tubuh sebagai cara untuk menghidupkan diri kita sendiri. Jadi untuk tujuan pembahasan ini, HTML akan disebut sebagai tubuh fisik, CSS akan menjadi aksesoris tubuh dan JavaScript adalah kemampuan tubuh untuk berbicara atau bergerak. Semua ‘aspek tubuh’ ini perlu bekerja sama untuk membentuk situs web interaktif yang fungsional, menarik secara visual.
HTML
- Tubuh
- Bahasa Markup HyperText (HTML)
- Konten dan struktur dasar
- Menjelaskan dan mendefinisikan
- Terdiri dari tag
Memberi tahu browser apa yang harus ditampilkan
HyperText Markup Language (HTML) dapat dipecah menjadi HyperText, yang memberikan akses ke teks lain melalui tautan, dan Markup yang menguraikan struktur dasar dan tampilan teks mentah. Artinya, HTML mendeskripsikan dan mendefinisikan konten dan struktur dasar situs web. Ini dilakukan melalui sarana tag atau kode khusus yang memberi tahu browser apa yang harus dilakukan. HTML adalah dasar-dasar telanjang dari sebuah situs web.
Situs web HTML saja dapat dibandingkan dengan tubuh manusia yang berfungsi. Catatan, saya tidak mengatakan berfungsi penuh. Situs web khusus HTML memiliki semua bagian tubuhnya, meskipun tidak menawarkan banyak hal untuk dilihat karena tidak memiliki aksesori atau gaya pribadi. Pada tahap ini, itu juga tubuh yang tidak mampu bergerak atau berbicara. Situs web yang hanya terdiri dari HTML mungkin akan terlihat sedikit seperti ini:
Di sinilah CSS masuk.
CSS
- Aksesorisnya
- Lembar Gaya Cascading (CSS)
- Memberikan gaya dan struktur pada konten
- Tautkan file CSS ke HTML
- Memberi tahu browser cara menampilkan
Cascading Style Sheet adalah aksesori situs web. Ini bertanggung jawab untuk menguraikan warna, font, dan posisi konten di situs web. Itu menambahkan beberapa gaya dan struktur ke konten. Untuk memanfaatkan kemampuan CSS itu perlu ditautkan dalam konten HTML sehingga gaya dapat ditambahkan ke situs web. CSS akan memberitahu browser cara menampilkan HTML yang ada.
CSS dapat dibandingkan dengan menambahkan gaya pribadi ke tubuh. Saat Anda menautkan CSS ke HTML, itu seperti mendandani tubuh. Misalnya, Anda dapat memilih kemeja warna tertentu dan mencocokkannya dengan celana warna tertentu. Di situs web, Anda dapat memilih warna latar belakang atau ukuran font judul dan banyak lagi. Penting untuk dicatat bahwa CSS tidak dapat hidup tanpa HTML karena tidak akan ada gaya. Sama seperti pakaian atau sepatu tidak akan ada artinya tanpa seseorang untuk memakainya.
Jadi sekarang Anda harus memiliki pemahaman tentang bagaimana struktur dan gaya dibangun di situs web. Sebuah website yang terdiri dari HTML dan CSS mungkin terlihat seperti ini:
Namun, Anda tidak bisa tidak memperhatikan bahwa ada sesuatu yang hilang. Halaman web tidak memiliki fungsi tertentu seperti kotak pencarian atau opsi untuk berkomentar. Saat ini tubuh, dengan segala asesorisnya, lebih terlihat seperti manekin di etalase toko daripada manusia sungguhan. Di situlah JavaScript masuk.
JavaScript
- Kemampuan tubuh untuk melakukan tindakan
- JavaScript bukan Java
- Perilaku situs web
- Digunakan untuk fungsionalitas interaktif
- Memungkinkan pengguna berinteraksi dengan browser
JavaScript mengontrol perilaku situs web. Penting untuk dicatat bahwa JavaScript dan Java adalah dua hal yang berbeda. JavaScript dirancang untuk memanipulasi halaman web dan digunakan untuk membuat fungsionalitas interaktif. Tanpa JavaScript, sebuah situs web akan tetap berfungsi, tetapi dengan cara yang terbatas. JavaScript adalah yang menjiwai HTML dan CSS, dan itulah yang menghidupkan situs web Anda.
JavaScript dapat dibandingkan dengan kemampuan tubuh untuk melakukan tindakan seperti berjalan atau berbicara. Jadi ketika Anda menambahkan JavaScript ke HTML dan CSS, itu mengubah tubuh dari manekin berpakaian indah menjadi manusia berjalan yang berbicara di kehidupan nyata. Itu menjiwai tubuh, memberinya kualitas yang hidup. JavaScript juga dapat dibandingkan dengan tubuh yang berfungsi penuh yang memiliki kemampuan untuk berinteraksi. Seperti yang kita semua tahu, memiliki situs web interaktif sangat penting, jika tidak, itu hanya halaman membosankan yang diisi dengan informasi. Di sini kita melihat situs web yang terdiri dari HTML, CSS, dan JavaScript:
Jika Anda melihat contoh twitter ini, JavaScript memungkinkan Anda untuk memperluas tweet untuk melihat re-tweet, untuk menetapkan tweet sebagai favorit dan banyak lagi. Aplikasi JavaScript yang populer adalah Google Maps.
