transformasi Kode Menjadi Website, Panduan Praktis Membangun Situs HTML

Pagi ini saya memulai hari seperti biasa. Alarm berbunyi tepat pukul 05.00, menandakan saatnya bangun dan bersiap menghadapi hari yang baru. Udara pagi terasa sejuk dan menenangkan, cocok untuk memulai hari dengan semangat positif. Setelah menunaikan ibadah Subuh, saya meluangkan waktu sebentar untuk menata kamar dan menyiapkan perlengkapan yang akan dibawa ke tempat praktik.

Sekitar pukul 06.00, saya mandi dan bersiap dengan pakaian rapi. Sarapan sederhana berupa roti dan segelas teh hangat menjadi bekal energi untuk menjalani kegiatan hari ini. Sambil menikmati sarapan, saya juga memeriksa kembali peralatan yang akan dibawa laptop, charger, dan catatan penting untuk kegiatan di laboratorium.

Pukul 07.00, saya berangkat menuju lokasi praktik bersama rekan saya, Perjalanan di pagi hari terasa menyenangkan, udara masih segar dan jalanan belum terlalu ramai. Setibanya di lokasi sekitar 07.45, kami langsung menyiapkan laptop dan menunggu instruksi dari pembimbing. lalu memulai kegiatan dengan piket pagi untuk memastikan ruang kerja tetap bersih dan nyaman.

(foto saya piket)

Pukul 08.30 Membangun Website HTML Sederhana

Kegiatan hari ini dimulai pada pukul 08.30, di mana kami diarahkan untuk membuat website sederhana menggunakan HTML.
Pembimbing menjelaskan bahwa HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web, dan setiap web modern pasti dimulai dari struktur HTML yang kuat.

Kami pun membuka editor teks seperti Visual Studio Code dan mengikuti langkah-langkah berikut:

1. Membuat Folder Proyek

Kami membuat folder baru bernama web-saya, yang akan berisi semua file website mulai dari halaman utama hingga gambar pendukung.

2. Membuat File HTML Utama

Di dalam folder tersebut, kami membuat file index.html dan menuliskan struktur dasar HTML. Berikut contohnya:


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Pertama Saya</title>
</head>
<body>
  <h1>Selamat Datang di Website Pertama Saya</h1>
  <p>Website ini dibuat menggunakan HTML dasar.</p>
  <a href="https://example.com">Kunjungi Situs Lain</a>
</body>
</html>

3. Menjalankan Website di Browser

Kami menyimpan file tersebut dan membukanya di browser. Saat tulisan “Selamat Datang di Website Pertama Saya” muncul di layar, kami merasa puas karena berhasil membuat halaman web dari nol.

4. Menambahkan Elemen Tambahan

Setelah memahami struktur dasar, kami memperkaya halaman dengan menambahkan gambar, tabel, dan daftar untuk membuat tampilan lebih menarik.
Pembimbing juga menekankan pentingnya penulisan tag HTML yang benar agar website mudah dibaca oleh browser dan mesin pencari.

5. Contoh Web Yang Saya Buat

(Screenshot Website Saya)

Menjelang pukul 12.00, kami menyelesaikan bagian pertama dari tugas hari ini dan beristirahat untuk makan siang. Suasana saat istirahat terasa santai sebagian peserta saling berdiskusi tentang desain web, sementara yang lain mencoba memperbaiki kode mereka agar tampil lebih menarik.

Pukul 13.00 Membuat Website Dapat Diakses Online dengan GitHub

Setelah istirahat, kami kembali ke laboratorium pada pukul 13.00. Kali ini, pembimbing menjelaskan cara agar website yang telah kami buat dapat diakses secara online.
Kami diperkenalkan dengan GitHub Pages, layanan gratis yang memungkinkan pengguna meng-hosting website statis langsung dari repository GitHub.

Langkah-langkah yang kami lakukan adalah sebagai berikut:

1. Membuat Akun GitHub

Kami membuka situs GitHub dan membuat akun baru. GitHub berfungsi sebagai tempat penyimpanan online bagi proyek web kami.

2. Membuat Repository Baru

Kami membuat repository dengan nama website-html-sederhana. Repository ini seperti folder online tempat menyimpan semua file website.

3. Mengunggah File Website

File index.html yang sudah dibuat sebelumnya diunggah ke repository tersebut menggunakan menu Add File → Upload Files, lalu dikonfirmasi dengan Commit changes.

4. Mengaktifkan GitHub Pages

Setelah file terunggah, kami masuk ke Settings → Pages, memilih branch main, dan menyimpan pengaturan.
Beberapa detik kemudian, GitHub secara otomatis membuat alamat website publik seperti:


https://username.github.io/website-html-sederhana/

5. Menguji Website Online

Kami menyalin tautan tersebut dan membukanya di browser. Hasilnya luar biasa — website sederhana yang sebelumnya hanya bisa diakses di komputer lokal, kini sudah online dan dapat dikunjungi siapa saja di seluruh dunia.

Manfaat dan Pembelajaran Hari Ini

Dari kegiatan ini, saya belajar dua hal penting: dasar pembuatan website dan cara publikasi online.
HTML mengajarkan kami untuk berpikir terstruktur dan memahami bagaimana elemen web disusun, sedangkan GitHub Pages memperkenalkan kami pada konsep hosting dan kolaborasi dalam pengembangan web.

Selain itu, kami juga belajar pentingnya konsistensi dan kerapian dalam penulisan kode, karena kesalahan kecil seperti tanda kurung yang hilang bisa membuat seluruh halaman tidak tampil dengan benar.

Menjelang pukul 16.00, kami menyelesaikan semua tugas yang diberikan. Beberapa rekan masih memeriksa tampilan website mereka, sementara lainnya sudah mencatat langkah-langkah publikasi di buku laporan. Setelah evaluasi ringan dari pembimbing, kami pun bersiap untuk pulang dengan perasaan puas dan penuh semangat.

Kesimpulan

Hari ini menjadi hari yang sangat berkesan. Dari rutinitas pagi hingga sore, kami belajar banyak tentang dunia pengembangan web.
Dimulai dari menulis baris pertama HTML, hingga mempublikasikan website ke GitHub Pages, setiap langkah memberikan pengalaman berharga dan memperkuat pemahaman kami tentang dasar-dasar teknologi web.

Melalui kegiatan ini, kami menyadari bahwa membuat website bukan hanya tentang menulis kode, tetapi juga tentang mengubah ide menjadi sesuatu yang nyata dan dapat diakses siapa saja di dunia digital.

transformasi Kode Menjadi Website, Panduan Praktis Membangun Situs HTML