HTML , CSS dan JavaScript Untuk Pemula
Dalam posting ini, akan menjelaskan apa itu HTML, CSS, dan JavaScript dan mengapa ketiganya dibutuhkan dalam membuat aplikasi web.
Mengapa perlu mempelajari tiga bahasa –HTML, CSS, JavaScript– untuk membangun aplikasi web?
Setiap bahasa memainkan perannya, ada kasus yang penggunaannya secara spesifik. Disini akan menjelaskan apa yang dapat dilakukan masing-masing bahasa.
Saat ini tidak menjelaskan tentang cara menulis kode untuk setiap bahasa, karena dalam posting ini hanya untuk memahami mengapa pengembang web perlu mengetahui banyak bahasa untuk memprogram situs web.
HTML
HTML (kependekan dari Hypertext Markup Language) adalah kerangka sebuah situs web dan merupakan hal pertama yang dimuat di browser web.Di sini pengembang menentukan elemen apa yang harus dimiliki situs web: Tombol, Gambar, Teks, Tautan, dll.
Berikut ini contoh situs HTML sederhana :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh HTML </title>
</head>
<body>
<h1 id="halo">Halo web 👋</h1>
<p>Selamat ini web HTML pertama anda.</p>
<div>
<button>klik tombol ini!</button>
</div>
</body>
</html>
script atau perintah HTML diatas mendefinisikan judul (ditampilkan di tab browser), teks besar, teks kecil, dan tombol.
Sekarang, web ini terlihat biasa saja. Hurufyang digunakan, ukuran dan warna huruf semuanya yang ditampilkan default oleh web browser secara otomatis.
CSS
Untuk memberikan web di atas beberapa desain, kita perlu menambahkan kode CSS (Cascading Style Sheets) ke halama web Contoh HTML diatas.Penulisan kode CSS bisa dilakukan dalam file HTML yang sama atau dapat diambil dari file .css. Namun, bukan praktik yang baik untuk menulis CSS di dalam kode HTML, sebaiknya selalu memiliki file eksternal (atau lebih banyak file) untuk itu.
CSS membuat bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lain. Dapat menghemat banyak pekerjaan yang dapat mengontrol tata letak beberapa halaman web sekaligus.
CSS dapat ditambahkan ke elemen HTML dalam 3 cara:
- Inline - dengan menggunakan atribut style dalam elemen HTML
- Internal - dengan menggunakan elemen <style> di bagian <head>
- Eksternal - dengan menggunakan file CSS eksternal
Cara paling umum untuk menambahkan CSS, adalah untuk menjaga gaya dalam file CSS yang terpisah. Namun, di sini kita akan menggunakan cara inline dan internal, karena ini lebih mudah untuk ditunjukkan, dan lebih mudah bagi untuk mencobanya sendiri.
CSS Inline (sebaris)
CSS sebaris digunakan untuk menerapkan gaya unik ke elemen HTML sebaris menggunakan atribut gaya elemen HTML.
Contoh ini mengatur warna teks elemen <h1> :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1 style="color: tomato; font-size: 70px; font-family: sans-serif;
text-decoration: underline; text-align: center"
id="halo">Halo web 👋</h1>
<p>Selamat ini web HTML pertama anda.</p>
<div>
<button>Klik tombol ini!</button>
</div>
</body>
</html>
CSS internal
CSS internal digunakan untuk menentukan gaya untuk satu halaman HTML.
CSS internal didefinisikan pada bagian <head> halaman HTML, di dalam elemen <style>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh HTML</title>
<style>
h1 {
color: tomato; font-size: 70px; font-family: sans-serif;
text-decoration: underline; text-align: center;
}
p {
font-family: sans-serif; color: darkgray;
}
button {
background-color: orangered; color: white; border: 0; padding: 20px;
}
</style>
</head>
<body>
<h1 id="halo">Halo web 👋</h1>
<p>Selamat ini web HTML pertama anda.</p>
<div>
<button>Klik tombol ini!</button>
</div>
</body>
</html>
CSS eksternal
CSS eksternal digunakan untuk menentukan tampilan web untuk banyak halaman HTML.
Dengan file style sheet eksternal, dapat membantu mengubah tampilan seluruh situs web, dengan mengubah satu file!
Untuk menggunakan style sheet eksternal, tambahkan tautan ke dalamnya di bagian <head> dari halaman HTML:
CSS eksternal dapat ditulis dalam teks editor apa pun. File tidak boleh mengandung kode HTML apa pun, dan harus disimpan dengan ekstensi .css.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="halo">Halo web 👋</h1>
<p>Selamat ini web HTML pertama anda.</p>
<div>
<button>Klik tombol ini!</button>
</div>
</body>
</html>
Inilah tampilan "styles.css"
h1 {
color: tomato;
font-size: 70px;
font-family: sans-serif;
text-decoration: underline;
text-align: center;
}
p {
font-family: sans-serif;
color: darkgray;
}
button {
background-color: orangered;
color: white;
border: 0;
padding: 20px;
}
Setiap definisi berlaku untuk sekelompok elemen dari situs HTML kami. Misalnya di blok pertama, h1 mengubah tampilan teks besar dengan memberikan warna dan font lain, membuatnya lebih besar, memberinya garis bawah dan membuat posisinya di tengah-tengah layar.
Halaman web ini sekarang terlihat sedikit lebih baik. Tetapi ada ratusan properti CSS yang dapat diatur untuk semua tag HTML yang berbeda. Ini membuatnya sulit untuk menguasai bahasa ini, dan tidak semua orang hebat dalam hal ini. Tetapi mudah untuk mempelajari dasar-dasarnya dan menguasainya dengan latihan.
Juga, ada banyak pustaka CSS di luar sana yang memberi Anda kemampuan untuk menata situs Anda dengan baik tanpa mengetahui terlalu banyak kode CSS. Yang sering digunakan adalah Bootstrap. Anda dapat mengakses kode mereka untuk membuat bentuk, tombol, teks, dan elemen menarik lainnya.
JavaScript
Halaman web "contoh HTML" sekarang memiliki struktur dan gaya tetapi fungsinya tidak ada. Misalnya memuat data dari situs web lain saat mengklik tombol, mengubah teks pada situs web, hampir semua yang Anda bayangkan dapat dilakukan dengan JavaScript.
javascript adalah bahasa pemrograman di mana memiliki fungsi, variabel, array dan banyak kode perintah lain untuk membuat "logika" di dalam halaman web.
JavaScript diguanakan jika ingin menambahkan semacam fungsi lain pada halama web yang lebih aktraktif.
function changeText() {
let headerTitle = document.getElementById('halo');
headerTitle.textContent = 'Halo kamu 👍';
}
Potongan kode diatas hanya fungsi yang sangat sederhana yang mengubah judul header menjadi teks lain.
Mempelajari JavaScript akan membutuhkan banyak waktu karena memiliki banyak hal untuk diketahui dan kemungkinan hal-hal tak terbatas yang dapat dilakukan dengannya.
Itu sebabnya sangat populer dalam beberapa tahun terakhir. Ada jutaan materi JavaScript yang dibuat orang lain yang dapat Anda gunakan dalam proyek.
Untuk membuatnya lebih rumit: Anda juga dapat menggunakan JavaScript untuk menulis kode sisi server (atau kode yang berjalan secara lokal di komputer Anda), tidak hanya di browser. Itulah yang disebut Node.js.
Anda mungkin pernah mendengar framework JavaScript seperti Vue, React, Angular yang sangat diminati saat ini, libray yang dapat membantu membangun aplikasi lebih cepat dan lebih mudah. Tetapi tidak disarankan memulai dengan mempelajari suatu framewort sebelum mengetahui dasar-dasarnya terlebih dahulu.
Ketiga bagian HTML, CSS dan Javascript
Anda perlu tahu ketiga bahasa itu karena mereka bekerja bersama.
Di dalam HTML kita dapat mendefinisikan elemen yang memiliki kelas atau ID, yang dapat dimanipulasi dengan CSS atau JavaScript dan mengubah gaya dari JavaScript dengan bantuan CSS dan dapat mengubah kelas CSS saat situs web berjalan dari JavaScript.
Kesimpulan:
- HTML adalah kerangka
- CSS adalah untuk membuatnya cantik (letakkan pakaian dan rias wajaha)
- JavaScript menambahkan fungsionalitas (menambahkan gerakan ke kerangka)
