Coding kelas x Pemrograman WEB

B. Tujuan Pembelajaran

Setelah mempelajari bab ini, peserta didik diharapkan mampu:

1. Menjelaskan pengertian dan manfaat pemrograman web.
2. Membedakan website, halaman web, browser, dan web server.
3. Menjelaskan fungsi HTML, CSS, dan JavaScript.
4. Menggunakan Visual Studio Code untuk menulis kode program.
5. Membuat struktur halaman web menggunakan HTML.
6. Mempercantik tampilan halaman web menggunakan CSS.
7. Menambahkan interaksi sederhana menggunakan JavaScript.
8. Menguji, memperbaiki, dan mempresentasikan website sederhana.

C. Pemahaman Bermakna

Website digunakan untuk menyampaikan informasi, mempromosikan produk, menyediakan layanan pendidikan, dan mendukung kegiatan masyarakat. Dengan mempelajari pemrograman web, siswa dapat membuat media informasi sendiri sekaligus mengembangkan keterampilan berpikir logis, kreatif, dan pemecahan masalah.

Pertanyaan pemantik: Bagaimana cara membuat website sekolah sederhana yang bisa dibuka melalui browser?

D. Materi Buku Teks

1. Pengertian Pemrograman Web

Pemrograman web adalah kegiatan membuat halaman atau aplikasi yang dapat diakses melalui jaringan komputer menggunakan browser.

Contoh website yang sering digunakan:

• Website sekolah untuk menyampaikan informasi.
• Website toko daring untuk menjual produk.
• Website berita untuk menyajikan informasi.
• Website pembelajaran untuk membantu kegiatan belajar.
• Website portofolio untuk menampilkan karya seseorang.

Website dapat bersifat statis atau dinamis.

Jenis website	Penjelasan	Contoh
Statis	Isi halaman relatif tetap dan diubah melalui pengeditan kode atau berkas.	Halaman profil sederhana
Dinamis	Isi halaman dapat berubah berdasarkan data, masukan pengguna, atau proses di server.	Sistem informasi nilai atau toko daring

2. Perbedaan Website, Browser, dan Web Server

Website

Kumpulan halaman web yang saling terhubung dan berada di bawah suatu alamat atau domain.

Browser

Aplikasi untuk membuka dan menampilkan halaman web, misalnya Chrome, Firefox, atau Edge.

Web server

Komputer atau perangkat lunak yang menerima permintaan dan menyediakan halaman atau data melalui jaringan.

3. Cara Kerja Website

Ketika pengguna membuka sebuah website, proses umumnya sebagai berikut:

1. Pengguna

Mengetik alamat website atau mengeklik tautan.

2. Browser

Mengirim permintaan ke server jika diperlukan.

3. Web server

Mengirim halaman atau data yang diminta.

4. Browser menampilkan halaman

HTML dibaca, CSS diterapkan, dan JavaScript dijalankan jika ada.

Untuk website statis yang dibuat dan disimpan di komputer sendiri, halaman juga dapat dibuka langsung dari berkas HTML tanpa mengirim permintaan ke server internet.

4. Tiga Teknologi Utama Pemrograman Web

a. HTML (HyperText Markup Language)

HTML digunakan untuk menyusun struktur dan isi halaman, seperti judul, paragraf, gambar, tautan, dan formulir.

Contoh tag: <h1>, <p>, <img>, <a>.

b. CSS (Cascading Style Sheets)

CSS digunakan untuk mengatur tampilan halaman, seperti warna, ukuran huruf, jarak, tata letak, dan latar belakang.

Contoh properti: color, background-color, font-size.

c. JavaScript

JavaScript digunakan untuk menambahkan perilaku dan interaksi, misalnya menampilkan pesan, memeriksa masukan, atau merespons klik tombol.

Perumpamaan sederhananya:

• HTML adalah kerangka rumah.
• CSS adalah cat, dekorasi, dan tata ruang.
• JavaScript adalah sistem yang membuat beberapa bagian rumah dapat merespons tindakan pengguna.

5. Mengenal HTML

HTML ditulis menggunakan elemen yang biasanya terdiri atas tag pembuka, isi, dan tag penutup.

Contoh:

<h1>Website Pertamaku</h1>

<p>Selamat datang di halaman web saya.</p>

Keterangan:

• <h1> adalah tag pembuka judul utama.
• Website Pertamaku adalah isi elemen.
• </h1> adalah tag penutup.
• <p> digunakan untuk paragraf.

Struktur dasar HTML

<!DOCTYPE html>

<html lang=”id”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Website Pertamaku</title>

</head>

<body>

    <h1>Selamat Datang</h1>

    <p>Ini adalah website pertama saya.</p>

</body>

</html>

Fungsi bagian-bagiannya:

Elemen	Fungsi
<!DOCTYPE html>	Menyatakan dokumen menggunakan HTML modern
<html>	Elemen utama dokumen
<head>	Menyimpan informasi dan pengaturan dokumen
<title>	Menentukan judul pada tab browser
<body>	Menyimpan konten yang ditampilkan di halaman
<h1>	Membuat judul utama
<p>	Membuat paragraf

Tag HTML yang sering digunakan

Tag	Fungsi
<h1> sampai <h6>	Judul dengan tingkat berbeda
<p>	Paragraf
<a>	Tautan
<img>	Menampilkan gambar
<ul> dan <li>	Daftar berpoin
<ol> dan <li>	Daftar bernomor
<br>	Pindah baris
<button>	Membuat tombol
<div>	Mengelompokkan konten
<form>	Membuat formulir

Contoh daftar dan tautan:

<h2>Hobi Saya</h2>

<ul>

    <li>Membaca</li>

    <li>Olahraga</li>

    <li>Desain grafis</li>

</ul>

<a href=”https://www.example.com”>Kunjungi contoh website</a>

Tautan pada contoh mengarah ke alamat contoh. Ganti alamat tersebut dengan situs tujuan yang sesuai jika digunakan dalam proyek.

6. Mengenal CSS

CSS mengatur tampilan elemen HTML. CSS dapat ditulis di dalam elemen <style>, di atribut style, atau di berkas terpisah. Untuk proyek kelas, kita akan menggunakan berkas terpisah agar kode lebih teratur.

Contoh aturan CSS:

body {

    background-color: #f0f4f8;

    font-family: Arial, sans-serif;

}

h1 {

    color: navy;

    text-align: center;

}

p {

    font-size: 18px;

}

Penjelasan:

• body, h1, dan p disebut selector.
• color mengatur warna teks.
• background-color mengatur warna latar belakang.
• font-family menentukan jenis huruf.
• text-align mengatur perataan teks.
• font-size mengatur ukuran teks.

CSS menghubungkan aturan tampilan dengan elemen HTML yang sesuai.

7. Mengenal JavaScript

JavaScript memungkinkan halaman web merespons tindakan pengguna.

Contoh program:

<button onclick=”sapa()”>Klik Saya</button>

<script>

function sapa() {

    alert(“Halo, selamat belajar pemrograman web!”);

}

</script>

Ketika tombol diklik, fungsi sapa() dijalankan dan browser menampilkan pesan.

Contoh ini menunjukkan interaksi sederhana. Dalam website yang lebih besar, JavaScript dapat digunakan untuk validasi formulir, mengubah konten halaman, dan berkomunikasi dengan server.

8. Mengenal Visual Studio Code

Visual Studio Code (VS Code) adalah editor kode yang membantu programmer menulis dan mengelola berkas program.

Langkah memulai:

1. Buka VS Code.
2. Buat folder bernama website-kelas.
3. Buat tiga berkas di dalam folder tersebut: index.html, style.css, dan script.js.
4. Tulis kode sesuai materi.
5. Simpan berkas menggunakan Ctrl + S.
6. Buka index.html melalui browser untuk melihat hasilnya.
7. Jika tampilan belum sesuai, periksa kode dan simpan kembali.

VS Code merupakan editor, bukan browser. Browser digunakan untuk menampilkan dan menguji halaman web.

9. Menghubungkan HTML, CSS, dan JavaScript

Agar ketiga teknologi bekerja bersama, HTML perlu menghubungkan berkas CSS dan JavaScript.

Di dalam <head> HTML:

<link rel=”stylesheet” href=”style.css”>

Sebelum tag penutup </body>:

<script src=”script.js”></script>

Pastikan ketiga berkas berada dalam folder yang sama dan nama berkas ditulis dengan benar.

10. Mengenal Frontend dan Backend

Bagian	Pengertian	Contoh
Frontend	Bagian yang dilihat dan digunakan oleh pengunjung	Menu, tombol, teks, gambar
Backend	Bagian yang memproses data dan logika di server	Login, pengelolaan data, pemrosesan pesanan
Database	Tempat menyimpan data secara terstruktur	Data siswa, produk, dan pengguna

HTML, CSS, dan JavaScript merupakan teknologi utama yang dipelajari pada sisi frontend. Website yang membutuhkan login atau penyimpanan data biasanya memerlukan backend dan database. Untuk bab ini, praktik difokuskan pada website frontend sederhana.

11. Kesalahan Umum dalam Pemrograman Web

Kesalahan	Dampak	Cara memperbaiki
Tag HTML tidak ditutup dengan benar	Struktur halaman bisa tidak sesuai	Periksa pasangan tag
Nama style.css salah	CSS tidak diterapkan	Cocokkan nama berkas dan href
Berkas belum disimpan	Browser menampilkan hasil lama	Simpan lalu muat ulang halaman
Kurung kurawal JavaScript tidak lengkap	Kode dapat gagal dijalankan	Periksa { dan }
Nama fungsi berbeda dari pemanggilan	Tombol tidak berfungsi	Samakan nama fungsi
Lokasi gambar salah	Gambar tidak tampil	Periksa folder dan nama berkas

Kebiasaan programmer yang baik: tulis kode dengan rapi, gunakan nama berkas yang konsisten, simpan pekerjaan secara berkala, dan perbaiki kesalahan satu per satu.

B. Isian Singkat

Jawablah dengan singkat dan tepat!

1. Kepanjangan HTML adalah ….
2. Kepanjangan CSS adalah ….
3. Bahasa yang digunakan untuk menambahkan interaksi pada halaman web adalah ….
4. Tag HTML untuk membuat paragraf adalah ….
5. Aplikasi yang digunakan untuk menulis kode program dalam pembelajaran ini adalah ….
6. Bagian HTML yang memuat konten utama yang ditampilkan di halaman adalah ….
7. Properti CSS untuk mengatur warna teks adalah ….
8. Ekstensi berkas JavaScript adalah ….
9. Bagian website yang berinteraksi langsung dengan pengguna disebut ….
10. Sebutkan dua contoh browser yang dapat digunakan untuk membuka website!