Latihan sebelum tugas

Mapel Pilihan

Satu halaman web yang memakai semua materi HTML pertemuan 1–8 dan CSS. Kerjakan 9 langkah berurutan; centang hijau di editor menandakan langkahmu sudah benar.

9langkah
42centang
2file: HTML + CSS
0nilai — hanya latihan

ACara mulai

Buka editor

Ketik alamat yang diberikan guru di browser, contoh 192.168.1.10:3000

Pilih latihan

Di menu paling atas pilih Latihan gabungan: Mapel Pilihan

Ketik & lihat hasil

Tulis kode di tengah (tab index.html). Hasilnya langsung tampil di kanan.

Cek centang

Panel kiri menunjukkan kelompok P1–P8. Lanjut ke langkah berikutnya setelah kelompoknya hijau.

BHalaman yang akan kamu buat

Satu halaman, semua materi

Setiap bagian halaman melatih materi pertemuan tertentu. Label hitam di tiap kotak menunjukkan di langkah mana bagian itu dibuat.

Dua file yang dihubungkan

Struktur dan isi ditulis di HTML, tampilan (warna, huruf) di CSS. Keduanya dihubungkan di langkah 9.

index.htmlisi & struktur
Langkah 1–8
style.csswarna & tampilan
Langkah 9

Gambar tanpa internet

Klik tombol Galeri aset di atas editor, pilih gambar, lalu Salin kode. Alamatnya cukup aset/nama-file.jpg.

CSembilan langkah

P1Kerangka halaman

Struktur dasar, 2 paragraf, sebuah div, span di dalam paragraf, dan atribut id.

<!DOCTYPE html>
<html> <head> <title>…
<body>
<section id="tentang">
  <p>… <span>setiap minggu</span></p>
  <div>Terbuka untuk semua</div>
DOCTYPE wajib di baris paling atas.
7 centang
P2Judul & format teks

Judul utama, subjudul, teks tebal, miring, garis bawah, dan teks berwarna.

<h1>Mapel Pilihan</h1>
<h2>Tentang Mapel Pilihan</h2>
<strong>tebal</strong> <em>miring</em>
<u>garis bawah</u>
<span style="color: green;">
Teks tebal/miring/garis bawah ditaruh di dalam <p>.
6 centang
P3Daftar (list)

5 langkah memilih mapel (bernomor) dan 5 nama mapel pilihan (bullet).

<ol>                <!-- 1. 2. 3. -->
  <li>Isi formulir</li>   × 5
</ol>
<ul>                <!-- • • • -->
  <li>Desain Grafis</li>  × 5
</ul>
Urutan penting → ol. Tidak penting → ul.
2 centang
P4Gambar & video

Satu gambar dengan ukuran, satu video yang bisa diputar.

<img src="aset/laptop.jpg"
     alt="Laptop" width="300">
<video src="aset/video-contoh.mp4"
       controls width="320"></video>
<img> tidak punya tag penutup. alt wajib diisi.
4 centang
P5Tabel & tautan

Tabel jadwal pelajaran (judul kolom + baris data) dan 3 tautan ke website belajar.

<table border="1">
  <tr><th>Hari</th><th>Jam</th>…</tr>
  <tr><td>Senin</td><td>14.00</td>…
</table>
<a href="https://www.w3schools.com">
  W3Schools</a>                × 3
tr = baris, th = judul kolom, td = isi sel.
4 centang
P6Rapikan tabel & buat form

Bagi tabel jadi thead + tbody (5 baris), lalu form nama, email, dan tombol.

<thead> judul kolom (4) </thead>
<tbody> 5 baris jadwal </tbody>

<form>
  <label for="nama">Nama</label>
  <input type="text" id="nama">
  <label for="email">Email</label>
  <input type="email" id="email">
  <button type="submit">Daftar</button>
for pada label = id pada input.
6 centang
P7Layout & validasi

Bungkus halaman dengan 5 bagian layout, menu ke tiap section, dan kolom wajib diisi.

<header> h1 + <nav>
  <a href="#jadwal">Jadwal</a>   × 3+
<main>   semua section  </main>
<aside>  tautan belajar </aside>
<footer> © 2025         </footer>

<input type="email" … required>
Tekan Daftar dengan kolom kosong: browser menolak. Itu tandanya required bekerja.
7 centang
P8Lengkapi form registrasi

Pilihan jenis kelamin, alamat, kelas, dan unggah foto.

<input type="radio" name="gender"> L
<input type="radio" name="gender"> P
<textarea name="alamat"></textarea>
<select name="kelas">
  <option>X</option>             × 3
</select>
<input type="file" name="foto">
name kedua radio harus sama, supaya hanya bisa pilih satu.
4 centang
Bab 1 P8Hias dengan CSS

Hubungkan style.css di dalam <head>, lalu atur warna di tab style.css.

<!-- index.html, di dalam <head> -->
<link rel="stylesheet" href="style.css">

/* style.css */
body {
  background-color: #f6f3ec;
  color: #1c2530;
}
Tanpa <link>, isi style.css tidak terpakai (editor menampilkan peringatan kuning).
2 centang

DTips & setelah selesai

  • Ctrl + Enter menjalankan ulang hasil.
  • Ctrl + Spasi memunculkan saran kode.
  • Tag penutup </…> muncul otomatis saat kamu mengetik.
  • Pekerjaan tersimpan otomatis di browser. Pakai perangkat yang sama di pertemuan berikutnya.
  • Centang belum hijau? Baca tulisan kecil di bawah syaratnya, itu petunjuknya.
  • Gambar tidak muncul? Pakai alamat dari Galeri aset, bukan https://.
100 / 100
Semua kelompok hijau? Selamat, kamu siap mengerjakan tugas!
  1. Pilih tugas P1–P8 di menu atas.
  2. Kerjakan dengan topikmu sendiri.
  3. Tekan Kumpulkan, isi nama lengkap, kelas, dan kode kelas dari guru.
Latihan ini tidak dinilai dan tidak perlu dikumpulkan.

Praktik HTML & CSS · Pemrograman Web · Infografis latihan gabungan