struktur html halaman pasien

🏥💻

Bangun Kerangka Halaman Pasien: Struktur HTML untuk Informasi Kesehatan

Heading, tabel, list, dan link: empat bahan dasar halaman web klinik yang rapi.

#StrukturHTML #Heading #Tabel #List & Link

⏱ 12 mnt

Estimasi baca

🌱 Pemula

Level

📅 2026

Tahun

Bayangkan kamu masuk ke ruang pendaftaran klinik. Berkas pasien bertumpuk tanpa map, tanpa label, tanpa urutan. Mau cari data satu orang saja, rasanya seperti mencari kunci motor di pagi hari. Halaman web yang dibuat tanpa struktur HTML yang jelas bernasib sama: isinya ada, tapi susah dibaca, susah dirawat, dan membingungkan mesin pencari maupun pembaca layar.

Kabar baiknya, kamu tidak perlu jadi programmer senior untuk merapikannya. Di artikel ke-3 dari seri "Pemrograman Web D4 MIK" ini, kamu akan membangun kerangka halaman pasien dari nol memakai XAMPP dan Sublime Text, lengkap dengan heading, list, tabel, dan link. Semua pakai data fiktif, jadi aman dicoba.

Memahami Struktur HTML: Denah Gedung Halaman Webmu

Anggap halaman web seperti gedung klinik. Ada pintu masuk, lobi, ruang poli, dan papan petunjuk. HTML adalah denah gedungnya. Browser membaca denah itu dan menampilkannya ke pengunjung. Setiap bagian dibungkus tag, yaitu penanda yang diawali < dan diakhiri >.

📐 KONSEP INTI

Struktur HTML = tag pembuka + isi + tag penutup, disusun bertingkat dari <html> sampai elemen terkecil.

Berikut gambaran kerangka halaman pasien yang akan kita buat. Visualnya pakai ASCII art supaya kamu bisa melihat urutannya sebelum mengetik kode:

+--------------------------------+
| HEADER  (h1 Klinik Sehat)      |
+--------------------------------+
| NAV     (link antar bagian)    |
+--------------------------------+
| MAIN                           |
|  +-- SECTION Profil (ul)       |
|  +-- SECTION Kunjungan (table) |
+--------------------------------+
| FOOTER  (hak cipta, link)      |
+--------------------------------+

Supaya tidak bingung, kenali dulu "empat bahan dasar" yang akan kita pakai:

Elemen	Tag	Fungsi di halaman pasien
Heading	h1 sampai h6	Judul dan sub-judul bagian
List	ul, ol, li	Daftar keluhan, alergi, atau urutan pelayanan
Tabel	table, tr, th, td	Data berbaris-berkolom, misalnya riwayat kunjungan
Link	a href	Pindah antar bagian atau antar halaman

Perhatikan juga tag <header>, <nav>, <main>, dan <footer> di diagram tadi. Tag ini disebut tag semantik: namanya langsung memberi tahu fungsi bagiannya. Analogikan dengan papan nama di klinik. Tulisan "Loket Pendaftaran" jauh lebih jelas daripada papan kosong bertuliskan "Ruang 1". Dengan tag semantik, struktur HTML yang kamu tulis mudah dibaca oleh teman satu kelompok, dosen, bahkan dirimu sendiri tiga minggu lagi.

💡 Tips

Biasakan menutup tag langsung setelah membukanya, baru isi bagian dalamnya. Kamu jadi tidak lupa menutup, dan tag tidak "bocor" ke elemen lain.

Praktik Membuat Struktur HTML Halaman Pasien Langkah demi Langkah

Saatnya ke laboratorium komputer. Ikuti urutan berikut, jangan lompat-lompat, dan cek hasilnya di browser setiap selesai satu langkah.

1

Nyalakan Apache. Buka XAMPP Control Panel, klik Start pada baris Apache sampai berwarna hijau. MySQL belum kita butuhkan di artikel ini.

2

Buat folder kerja. Buka C:\xampp\htdocs\, lalu buat folder baru bernama klinik. Semua file latihan kita simpan di sini.

3

Tulis kerangka dasar. Buka Sublime Text, buat file baru, simpan sebagai C:\xampp\htdocs\klinik\pasien.html, lalu ketik kerangka ini:

pasien.html (kerangka)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Klinik Sehat Sentosa - Data Pasien</title>
</head>
<body>
  <header>
    <h1>Klinik Sehat Sentosa</h1>
    <p>Informasi pasien rawat jalan (data fiktif)</p>
  </header>

  <main>
    <!-- isi halaman di langkah 4 sampai 6 -->
  </main>

  <footer>
    <p>&copy; 2026 Praktikum Pemrograman Web D4 MIK</p>
  </footer>
</body>
</html>

Buka http://localhost/klinik/pasien.html di browser. Hasil yang diharapkan: judul besar "Klinik Sehat Sentosa", satu baris keterangan di bawahnya, dan teks hak cipta di bagian bawah. Judul tab browser juga berubah sesuai <title>.

⚡ Insight Penting

Pakai h1 satu kali saja per halaman, lalu turun berurutan ke h2, h3. Heading bukan alat untuk membesarkan huruf. Ia membentuk "daftar isi tersembunyi" yang dipakai mesin pencari dan screen reader untuk memahami struktur HTML halamanmu. Di W3C WAI, ini dibahas sebagai prinsip dasar aksesibilitas.

4

Tambahkan heading dan list. Ganti komentar isi halaman... di dalam <main> dengan bagian profil pasien:

di dalam <main>: profil

<section id="profil">
  <h2>Profil Pasien</h2>
  <ul>
    <li>Nama: Siti Rahma (fiktif)</li>
    <li>No. RM: RM-0001</li>
    <li>Usia: 34 tahun</li>
    <li>Poli tujuan: Poli Umum</li>
  </ul>

  <h3>Alur Pelayanan</h3>
  <ol>
    <li>Pendaftaran</li>
    <li>Pemeriksaan tanda vital</li>
    <li>Konsultasi dokter</li>
    <li>Pengambilan obat</li>
  </ol>
</section>

Muat ulang browser dengan F5. Kamu akan melihat daftar bertitik untuk profil dan daftar bernomor untuk alur pelayanan. Pakai ul kalau urutan tidak penting, dan ol kalau urutan wajib diikuti.

5

Buat tabel riwayat kunjungan. Tambahkan section kedua tepat di bawah section profil, masih di dalam <main>:

di dalam <main>: kunjungan

<section id="kunjungan">
  <h2>Riwayat Kunjungan</h2>
  <table border="1" cellpadding="8" cellspacing="0">
    <caption>Kunjungan Siti Rahma (data fiktif)</caption>
    <thead>
      <tr>
        <th>No</th>
        <th>Tanggal</th>
        <th>Poli</th>
        <th>Diagnosis</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>02-09-2026</td><td>Umum</td><td>ISPA</td></tr>
      <tr><td>2</td><td>16-09-2026</td><td>Gigi</td><td>Karies gigi</td></tr>
      <tr><td>3</td><td>30-09-2026</td><td>Umum</td><td>Kontrol ulang</td></tr>
    </tbody>
  </table>
</section>

Hasilnya: tabel dengan garis tipis, judul kolom tebal, dan tiga baris kunjungan. Atribut border dan cellpadding kita pakai sementara supaya tabel terlihat jelas. Merapikan tampilan lewat CSS akan kita bahas di artikel lain dalam seri ini.

🔥 Fakta Menarik

HTML pertama kali dikembangkan Tim Berners-Lee di CERN pada awal 1990-an untuk berbagi dokumen antar peneliti. Jadi sejak lahir, HTML memang dirancang untuk menata informasi. Pas sekali untuk dunia kesehatan yang penuh data.

6

Pasang navigasi dan link. Tambahkan blok <nav> di antara </header> dan <main>. Link #profil melompat ke section di halaman yang sama (lewat atribut id), sedangkan link kedua membuka situs luar:

nav: link internal dan eksternal

<nav>
  <a href="#profil">Profil</a> |
  <a href="#kunjungan">Kunjungan</a> |
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener">Referensi HTML (MDN)</a>
</nav>

7

Uji dan simpan. Tekan Ctrl+S di Sublime Text, lalu F5 di browser. Klik tiap link di menu. Kalau "Profil" dan "Kunjungan" membawamu ke bagian yang tepat, berarti struktur HTML halaman pasienmu sudah bekerja.

Hasil akhir yang diharapkan: satu halaman utuh dengan judul klinik di atas, menu tiga link, daftar profil, alur pelayanan bernomor, tabel tiga kunjungan, dan footer. Kalau tampilannya masih polos dan hitam-putih, itu normal. Kita memang baru membangun tulang dulu. Warna dan tata letak menyusul setelah struktur HTML-nya kokoh, seperti membangun gedung: pondasi dulu, cat belakangan.

Kapan Pakai List, Kapan Pakai Tabel dalam Struktur HTML?

Pertanyaan klasik dari mahasiswa baru: "Data pasien ini enaknya pakai list atau tabel?" Jawabannya tergantung bentuk datanya. Salah memilih memang tidak membuat halaman error, tapi pembaca jadi sulit memindai informasi, dan pembaca layar membacakan data dengan urutan yang membingungkan. Memilih elemen yang tepat adalah bagian penting dari struktur HTML yang baik. Pakai kacamata analisis berikut, lalu coba terapkan pada data pasien di latihanmu.

🔍 Analisis: List vs Tabel

📋 Pakai List jika datanya satu dimensi.
Contoh: daftar alergi, keluhan utama, langkah pendaftaran.

📊 Pakai Tabel jika datanya punya baris dan kolom.
Contoh: riwayat kunjungan, jadwal dokter, hasil lab.

Aturan praktis: kalau kamu perlu membandingkan beberapa atribut sekaligus untuk banyak data, pilih tabel. Kalau cuma satu deret item, pilih list.

⚠️ Perhatian

Jangan pernah memakai tabel hanya untuk mengatur posisi tampilan. Tabel itu untuk data. Dan di praktikum ini, selalu pakai data fiktif. Data pasien asli bersifat rahasia dan tidak boleh ditampilkan di halaman latihan.

Error yang Sering Muncul & Cara Mengatasinya saat Menyusun Struktur HTML

Hampir semua mahasiswa pernah mengalaminya, jadi tenang. Cek tabel ini sebelum panik:

Gejala	Penyebab	Solusi
Muncul "Not Found" di browser	Salah folder atau nama file	Pastikan file ada di htdocs\klinik dan URL sama persis dengan nama file
Halaman tidak bisa dibuka sama sekali	Apache belum menyala	Klik Start pada Apache di XAMPP, tunggu hijau
Kode tampil sebagai teks mentah	File tersimpan sebagai .txt	Simpan ulang dengan ekstensi .html dan pilih "All Files"
Tampilan berantakan setelah edit	Lupa menutup tag	Cek pasangan tag pembuka dan penutup, rapikan indentasi
Perubahan tidak terlihat	File belum disimpan atau cache browser	Tekan Ctrl+S, lalu Ctrl+F5 di browser
Link #profil tidak berpindah	Atribut id tidak cocok	Samakan tulisan href="#profil" dengan id="profil" (huruf kecil semua)

📝 Latihan Mandiri: Kembangkan Struktur HTML Halamanmu

1. Tambah pasien baru. Buat file pasien2.html dengan kerangka yang sama untuk pasien fiktif lain, lengkap dengan profil dan minimal 4 baris riwayat kunjungan.
2. Tabel jadwal poli. Buat jadwal.html berisi tabel jadwal dokter (kolom: Poli, Hari, Jam). Gunakan <caption>, <thead>, dan <tbody>.
3. Hubungkan halamanmu. Tambahkan menu <nav> di ketiga file supaya bisa saling berpindah lewat link relatif, misalnya <a href="jadwal.html">Jadwal</a>.

🎯 Kesimpulan

Sekarang kamu sudah tahu bahwa struktur HTML adalah denah dari setiap halaman web. Kamu sudah menyiapkan kerangka header, main, dan footer, menata profil dengan heading dan list, menampilkan riwayat kunjungan dengan tabel, lalu menghubungkan semuanya lewat link.

Kerangka halaman pasien ini akan jadi fondasi saat kita masuk ke PHP di artikel berikutnya. Bagaimana hasil latihanmu? Tulis di kolom komentar, dan bagikan artikel ini ke teman satu kelas yang masih bingung dengan tag-tag HTML.

💬 Tulis Komentar 🔗 Bagikan Artikel

Referensi:

• MDN Web Docs, HTML: HyperText Markup Language. developer.mozilla.org/en-US/docs/Web/HTML
• W3C Web Accessibility Initiative, Web Accessibility Tutorials: Tables. w3.org/WAI/tutorials/tables
• WHATWG, HTML Living Standard. html.spec.whatwg.org

#PemrogramanWeb #D4MIK #HTMLDasar #TabelHTML #HalamanPasien

🏷️ Label: Struktur HTML Halaman Pasien Heading, Tabel, List, Link

📚 ARTIKEL UTAMA SERI

Pemrograman Web D4 MIK

Artikel ini adalah bagian ke-3 dari 16 seri "Pemrograman Web D4 MIK". Lihat daftar isi lengkap untuk belajar berurutan.

📖 Buka Daftar Isi Artikel

⬅️ ARTIKEL SEBELUMNYA

Artikel 2: "Siapkan Dapur Coding: Instalasi XAMPP, Apache, PHP, phpMyAdmin, dan Setup Sublime Text di Windows"

ARTIKEL SELANJUTNYA ➡️

Artikel 4: "Halo PHP! Sintaks Dasar, Variabel, Operator, dan Tampilan Output di Halaman Web Klinik"