MATERI KULIAH 02 September 2026 1 menit baca 8

Pemrograman Web 1: Memahami Fondasi HTML untuk Pemula

Artikel ini merangkum materi dasar Pemrograman Web 1 tentang HTML sebagai fondasi utama halaman web. Pembahasan dimulai dari pengertian HTML, peran tag dan elemen, lalu dilanjutkan dengan struktur dokumen yang benar, mulai dari deklarasi doctype, bagian head, hingga body. Artikel ini juga menyoroti elemen-elemen penting yang sering dipakai pemula, seperti heading, paragraf, tautan, gambar, dan daftar, beserta prinsip penulisan yang rapi dan mudah dipelihara. Ringkasan ini ditujukan untuk mahasiswa Informatika Universitas Siber Asia agar memiliki pijakan awal yang kuat sebelum mempelajari CSS dan JavaScript.

HTML atau *HyperText Markup Language* adalah fondasi utama dalam pengembangan web. Bagi mahasiswa Informatika, memahami HTML bukan sekadar menghafal tag, melainkan mengenali cara sebuah halaman web disusun, dibaca oleh browser, dan dihubungkan dengan teknologi lain seperti CSS dan JavaScript. Dalam konteks mata kuliah Pemrograman Web 1, HTML menjadi materi awal yang penting karena seluruh tampilan halaman web berangkat dari struktur dokumen yang benar.

Secara sederhana, HTML digunakan untuk memberi **makna** pada isi halaman. Browser tidak hanya melihat teks, tetapi juga memahami apakah suatu bagian merupakan judul, paragraf, tautan, gambar, atau daftar. Karena itu, penguasaan HTML membantu mahasiswa membangun kebiasaan menulis kode yang rapi, terstruktur, dan mudah dikembangkan.

## Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki susunan dasar yang perlu dipahami sejak awal. Struktur ini memastikan browser dapat mengenali halaman dengan tepat. Komponen utamanya meliputi deklarasi dokumen, elemen `html`, bagian `head`, dan bagian `body`.

- `<!DOCTYPE html>` menandakan bahwa dokumen menggunakan HTML5.
- Elemen `html` menjadi pembungkus seluruh isi halaman.
- Bagian `head` berisi metadata, seperti judul halaman, set karakter, dan informasi lain yang tidak tampil langsung di layar.
- Bagian `body` memuat konten yang terlihat oleh pengguna.

Contoh kerangka sederhana dapat digambarkan sebagai berikut:

```html
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Pertama</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah halaman HTML pertama saya.</p>
  </body>
</html>
```

Dari contoh tersebut, terlihat bahwa HTML menekankan struktur dan makna. Atribut seperti `lang` membantu browser dan mesin pencari memahami bahasa dokumen, sedangkan `meta viewport` penting untuk tampilan yang responsif di perangkat seluler.

## Elemen Penting yang Harus Dikuasai Pemula

Setelah memahami struktur dasar, mahasiswa perlu mengenali elemen-elemen yang paling sering digunakan. Elemen ini menjadi blok awal untuk membangun halaman yang informatif dan mudah dibaca.

- **Heading**: digunakan untuk judul dan subjudul, dari `h1` hingga `h6`.
- **Paragraf**: ditulis dengan tag `p` untuk menyusun teks utama.
- **Tautan**: menggunakan tag `a` untuk menghubungkan halaman atau sumber lain.
- **Gambar**: menggunakan tag `img` dengan atribut `src` dan `alt`.
- **Daftar**: dapat berupa daftar tidak berurutan dengan `ul` atau daftar berurutan dengan `ol`.
- **Elemen semantik**: seperti `header`, `nav`, `main`, `section`, dan `footer` untuk memperjelas bagian halaman.

Pemakaian elemen semantik sangat dianjurkan karena membantu pembaca kode, browser, dan teknologi bantu memahami struktur informasi. Misalnya, `header` digunakan untuk bagian kepala halaman, sedangkan `footer` untuk bagian akhir. Dengan pendekatan ini, kode menjadi lebih mudah dipelihara dan lebih sesuai dengan praktik pengembangan modern.

## Prinsip Penulisan HTML yang Baik

Belajar HTML tidak berhenti pada mengetahui nama tag. Mahasiswa juga perlu membiasakan diri menulis kode yang bersih dan konsisten. Beberapa prinsip dasar berikut sangat penting dalam tahap awal pembelajaran:

1. Gunakan indentasi agar struktur tag mudah dibaca.
2. Tutup tag dengan benar, terutama pada elemen yang bersifat berpasangan.
3. Pilih elemen sesuai fungsinya, bukan hanya karena tampilannya cocok.
4. Tambahkan atribut secara tepat dan seperlunya.
5. Berikan teks alternatif pada gambar agar aksesibilitas tetap terjaga.

Prinsip-prinsip tersebut akan sangat berguna ketika mahasiswa mulai mempelajari CSS untuk tampilan dan JavaScript untuk interaksi. HTML yang tersusun baik akan memudahkan proses pengembangan lanjutan dan mengurangi kesalahan saat proyek semakin kompleks.

## Kesimpulan

Sebagai rangkuman, HTML adalah dasar yang wajib dipahami dalam Pemrograman Web 1. Melalui HTML, mahasiswa belajar bagaimana menyusun struktur halaman, menempatkan konten secara logis, dan menggunakan elemen yang tepat untuk kebutuhan tertentu. Pemahaman terhadap struktur dokumen, elemen penting, dan prinsip penulisan yang baik akan menjadi bekal kuat untuk mempelajari teknologi web berikutnya.

Bagi mahasiswa Informatika Universitas Siber Asia, menguasai fondasi HTML berarti membangun cara berpikir yang sistematis dalam merancang halaman web. Dari sinilah proses belajar web development dapat berkembang lebih jauh menuju desain antarmuka, interaktivitas, dan pengembangan aplikasi web yang lebih lengkap.

#UNSIA #Kuliah #pemrograman web #onlne #PJJ

Komentar (0)

Belum ada komentar. Jadi yang pertama berkomentar di bawah.

Pemrograman Web 1: Memahami Fondasi HTML untuk Pemula

Komentar (0)

Tulis Komentar

Artikel Terkait

Estetika Humanisme: Psikologi Humanistik

Estetika Humanisme: Leadership

Estetika Humanisme: Manajemen Konflik