By A Mimar Hidayat ā€”

Membuat, Mengedit, dan Menghapus File HTML di GitHub

GitHub bukan hanya tempat menyimpan kode, tapi juga alat belajar kolaboratif yang luar biasa.
Dalam materi ini, kita akan mempelajari cara membuat, mengedit, dan menghapus file HTML langsung dari GitHub ā€” tanpa perlu aplikasi seperti VS Code.

šŸŽÆ Tujuan Pembelajaran

Setelah mempelajari artikel ini, kamu akan mampu:

  • Membuat file HTML baru langsung di GitHub.
  • Mengedit file HTML menggunakan GitHub Web Editor.
  • Menghapus dan mengembalikan file HTML dari riwayat commit.
  • Memahami konsep dasar version control dan commit message.

šŸ§° Persiapan Awal

Sebelum mulai latihan:

  • Siapkan akun GitHub aktif.
  • Pastikan kamu memahami dasar-dasar HTML.
  • Gunakan browser modern seperti Chrome, Edge, atau Firefox.
  • Pastikan koneksi internet stabil.

šŸŖœ Langkah-Langkah Praktik

1ļøāƒ£ Membuat File HTML Baru

  1. Masuk ke akun GitHub ā†’ klik tombol New Repository.
  2. Beri nama repository: latihan-html.
  3. Setelah repository dibuat, klik Add file ā†’ Create new file.
  4. Isi nama file: index.html.
  5. Tulis kode berikut di editor GitHub:
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Latihan HTML - NamaKelompok</title>
  <style>
    body{font-family:Arial,sans-serif;padding:24px;}
    header{background:#0b5cff;color:#fff;padding:16px;border-radius:8px;}
  </style>
</head>
<body>
  <header>
    <h1>Proyek Latihan HTML</h1>
    <p>Kelompok: NamaKelompok | Tanggal: 2025-11-13</p>
  </header>

  <main>
    <h2>Tentang Proyek Ini</h2>
    <p>Ini adalah latihan membuat, mengedit, dan menghapus file HTML menggunakan GitHub web editor.</p>

    <h3>Fitur yang Dicoba</h3>
    <ul>
      <li>Membuat file (Add file)</li>
      <li>Mengedit isi file (Edit)</li>
      <li>Menghapus file (Delete) dan mengembalikannya (Restore)</li>
    </ul>
  </main>

  <footer>
    <p>Hak cipta &copy; Kelas XII Informatika</p>
  </footer>
</body>
</html>
  1. Isi pesan commit:add: index.html (initial page)
  2. Klik Commit new file.

2ļøāƒ£ Mengedit File HTML

  1. Klik file index.html.
  2. Tekan ikon pensil (āœļø) untuk membuka editor.
  3. Tambahkan satu baris di bagian <main>:<p>Menambahkan paragraf baru melalui GitHub Web Editor.</p>
  4. Isi pesan commit:update: tambah paragraf baru
  5. Klik Commit changes.
  6. Lihat riwayat perubahan di tab History.

3ļøāƒ£ Menghapus File HTML

  1. Buka file index.html.
  2. Klik ikon tempat sampah (šŸ—‘ļø Delete this file).
  3. Isi pesan commit:delete: hapus index.html (latihan)
  4. Klik Commit changes.
āš ļø File akan terhapus dari tampilan repository, tetapi masih bisa dikembalikan dari commit sebelumnya.

4ļøāƒ£ Mengembalikan File HTML yang Terhapus

  1. Buka tab Commits.
  2. Pilih commit sebelum file dihapus.
  3. Klik file index.html ā†’ klik Raw ā†’ salin seluruh isi kode.
  4. Kembali ke repository ā†’ Add file ā†’ Create new file.
  5. Beri nama file: index.html, lalu paste isi yang disalin.
  6. Isi pesan commit:restore: index.html from previous commit
  7. Klik Commit new file.

šŸ’¬ Contoh Pesan Commit yang Baik

TujuanContoh Pesan Commit
Menambah file baruadd: index.html (initial page)
Mengedit kontenupdate: tambah paragraf baru
Menghapus filedelete: hapus index.html
Mengembalikan filerestore: index.html from commit
šŸ’” Gunakan pola kata kerja + deskripsi singkat, misalnya add:, update:, delete:, fix:, restore: agar commit log mudah dipahami.

šŸ§© Latihan Mandiri

  1. Buat repository baru bernama latihan-html-namamu.
  2. Tambahkan file index.html dengan kode di atas.
  3. Lakukan 2 kali edit dan commit dengan pesan berbeda.
  4. Hapus file, lalu kembalikan dari riwayat commit.
  5. Kirimkan link repository ke guru sebagai hasil latihan.