Ringkasan Insight Pembelajaran HTML

Mata Kuliah: Pemrograman Komputer
Program Studi: Manajemen Pendidikan
Kelas: E – Semester 2
Institusi: UIN Syarif Hidayatullah Jakarta
Dosen Pengampu: Drs. Didin Sobiruddin, M.Kom
Tanggal Praktik: 12 Maret 2026

Halaman ini dibuat sebagai rangkuman insight dari praktik pembuatan halaman web menggunakan HTML yang dilakukan dalam perkuliahan. Selain merangkum materi yang disampaikan dosen, halaman ini juga menjelaskan bagaimana setiap elemen HTML digunakan sehingga pembaca dapat memahami dan mempraktikkannya secara langsung.

1. Ciri Khas Bahasa HTML

Salah satu ciri utama bahasa HTML adalah penggunaan kurung siku < > untuk menandai elemen atau tag. Contohnya adalah <h1> untuk judul dan <p> untuk paragraf.

Dalam HTML juga terdapat tag pembuka dan tag penutup. Tag penutup ditandai dengan tanda slash /. Contohnya:

Pada contoh di atas, <h1> merupakan tag pembuka, sedangkan </h1> merupakan tag penutup.

2. Struktur Dasar Dokumen HTML

Setiap halaman HTML memiliki struktur dasar yang dimulai dengan <!DOCTYPE html>. Baris ini memberi tahu browser bahwa dokumen yang digunakan adalah HTML.

Setelah itu terdapat elemen utama yaitu <html> yang menjadi wadah seluruh isi halaman web. Di dalamnya terdapat dua bagian penting:

3. Fungsi Elemen <head>

Bagian <head> berisi informasi yang tidak langsung terlihat pada halaman web, tetapi penting untuk pengaturan halaman. Contohnya:

4. Penggunaan CSS Dasar

CSS digunakan untuk mengatur tampilan halaman web, seperti warna latar belakang dan warna teks. Dalam latihan ini CSS ditulis di dalam tag <style>.

Pemilihan warna harus memperhatikan kontras agar teks tetap mudah dibaca oleh pengguna.

5. Penggunaan Heading

Heading digunakan untuk membuat judul atau subjudul. Dalam HTML terdapat beberapa tingkat heading seperti h1 sampai h6. Semakin besar angka maka ukuran huruf semakin kecil. Contoh yang digunakan dalam latihan ini adalah <h1> dan <h2>.

6. Penggunaan Paragraf

Tag <p> digunakan untuk menuliskan teks dalam bentuk paragraf. Paragraf membantu menyusun penjelasan agar lebih mudah dibaca dan dipahami.

7. Penggunaan Daftar

HTML menyediakan beberapa jenis daftar untuk menyusun informasi.

  1. <ol> digunakan untuk membuat daftar bernomor.
  2. Atribut type dapat digunakan untuk mengubah bentuk penomoran.
  3. Atribut start dapat digunakan untuk menentukan nomor awal.

8. Implementasi Materi Algoritma

Materi algoritma yang dipelajari sebelumnya kemudian dimasukkan sebagai isi halaman HTML. Algoritma merupakan langkah-langkah logis dan sistematis untuk menyelesaikan suatu masalah.

9. Insight Pembelajaran

Pembelajaran ini menunjukkan bahwa pembuatan halaman web tidak hanya sekadar menulis kode, tetapi juga memahami struktur dokumen dan fungsi setiap elemen. Dengan memahami penggunaan tag seperti <h1>, <p>, <ul>, dan <ol>, mahasiswa dapat menyusun informasi secara sistematis dalam sebuah halaman web.

10. Hal yang Saya Pelajari di Luar Penjelasan Langsung Perkuliahan

Saat mengerjakan tugas praktik HTML ini, saya juga mencoba memahami beberapa hal tambahan agar dapat menuliskan penjelasan kode dengan lebih jelas. Dua hal yang saya pelajari adalah cara menampilkan kode HTML di dalam teks serta cara membuat penekanan tulisan menggunakan huruf tebal.

Menampilkan Tanda Kurung Siku < > di Dalam Teks

Dalam HTML, tanda kurung siku < > digunakan untuk menuliskan tag seperti <h1>, <p>, atau <ul>. Karena tanda tersebut merupakan bagian dari sintaks HTML, jika ditulis langsung di dalam halaman maka browser dapat menganggapnya sebagai kode.

Untuk menampilkan tanda tersebut sebagai teks biasa, digunakan kode khusus yang disebut HTML entity.

Dengan cara ini kita dapat menuliskan contoh kode seperti <h1> atau <p> di dalam paragraf tanpa membuat browser menjalankannya sebagai perintah HTML.

Membuat Tulisan Tebal dengan Tag <b>

Selain itu saya juga mempelajari penggunaan tag <b> untuk membuat tulisan menjadi tebal atau bold —dan ini miring menggunakan <i>. Tag ini digunakan untuk memberikan penekanan pada bagian teks tertentu agar pembaca lebih mudah memperhatikan informasi yang dianggap penting.

Penulisan tag ini juga mengikuti pola tag HTML pada umumnya, yaitu memiliki tag pembuka dan tag penutup.

Contoh penggunaannya adalah sebagai berikut:

<b>Ini adalah tulisan tebal</b>

Ketika dijalankan oleh browser, teks tersebut akan tampil dalam bentuk huruf tebal.

Penutup Reflektif

Melalui eksplorasi kecil ini saya memahami bahwa HTML tidak hanya tentang menulis konten, tetapi juga memahami bagaimana browser membaca simbol dan tag yang digunakan dalam dokumen HTML.

Saya juga menjumpai bahwa "tab" dan "enter" tidak—atau belum saya ketahui—berpengaruh secara teknis kepada kode. Selain untuk mempermudah membedakan bagian serta estetika saat mengetik kode, saya tetap melakukannya sebagai validasi bahwa saya mengikuti perkuliahan.

Yang menarik, saya justru mendapati bahwa tag <br> berfungsi sebagai “enter” untuk tampilan pengguna, yaitu membuat baris baru di halaman web tanpa memengaruhi struktur kode.

Bersamaan dengan tugas ini, saya juga melampirkan makalah yang sebelumnya tidak sempat saya unggah tepat waktu. Walaupun mungkin sudah melewati batas pengumpulan, saya tetap menyertakannya sebagai bentuk tanggung jawab saya terhadap tugas yang telah diberikan.

Latihan ini menjadi bagian dari proses awal saya mengenal HTML dalam perkuliahan yang diinisiasi oleh dosen. Selain sebagai tugas, halaman ini juga menjadi catatan kecil dari pengalaman belajar yang mungkin dapat saya ingat kembali di masa mendatang.

Hormat saya,
Adhwa Azkiya Hanifa Primansyah
Mahasiswa Manajemen Pendidikan – Kelas E
UIN Syarif Hidayatullah Jakarta