Dari Nol ke Halaman Web Pertama: Memahami Cara Kerja Web dan Dasar HTML

Mata Kuliah: Perancangan dan Pemrograman Website

Pertemuan: 1

Topik: Web Fundamentals dan HTML Fundamentals

Saat membuka portal akademik, toko online, media sosial, sistem informasi kampus, maupun sebuah halaman profil sederhana, kita sedang menggunakan teknologi web.

Bagi pengguna, sebuah website mungkin hanya terlihat sebagai kumpulan teks, gambar, tombol, menu, dan formulir. Namun bagi seorang web developer, di balik tampilan tersebut terdapat struktur, komunikasi antara browser dan server, file, URL, serta berbagai teknologi yang saling bekerja.

Pada mata kuliah Perancangan dan Pemrograman Website, kita tidak akan langsung melompat ke PHP, database, framework, atau aplikasi CRUD. Kita akan membangun fondasinya terlebih dahulu.

Prinsip dasar yang perlu diingat:

HTML membentuk struktur.
CSS mengatur tampilan.
JavaScript memberikan interaksi.
PHP menangani proses di server.
MySQL digunakan untuk menyimpan data.

Pertemuan pertama dibagi menjadi 5 bagian utama. Setiap bagian akan diakhiri dengan praktik coding sehingga mahasiswa tidak hanya membaca konsep, tetapi langsung melihat bagaimana kode bekerja.

Target Pembelajaran

Setelah menyelesaikan pertemuan ini, mahasiswa diharapkan mampu:

Memahami bagaimana sebuah website bekerja.
Menjelaskan hubungan browser, client, server, request, dan response.
Membedakan front-end dan back-end.
Memahami fungsi HTML dalam pengembangan website.
Membuat struktur dasar dokumen HTML5.
Menggunakan heading, paragraph, strong, emphasis, dan horizontal rule.
Membuat hyperlink.
Menampilkan gambar.
Memahami attribute dan relative path.
Melakukan debugging HTML sederhana.
Membuat halaman My First Developer Profile.

Materi 1 — Bagaimana Website Bekerja?

Sebelum menulis kode, kita perlu memahami apa yang sebenarnya terjadi ketika seseorang membuka sebuah website.

Website dan Web Page

Web page adalah satu halaman yang dapat dibuka menggunakan browser.

Contohnya:

Halaman Beranda
Halaman Profil
Halaman Kontak
Halaman Login
Halaman Data Mahasiswa

Sedangkan website merupakan kumpulan halaman web yang saling berhubungan.

Contohnya sebuah website kampus dapat memiliki struktur:

Beranda
|
+-- Profil
+-- Program Studi
+-- Dosen
+-- Berita
+-- Pendaftaran
+-- Kontak
+-- Sistem Akademik

Internet dan World Wide Web

Internet dan World Wide Web bukan hal yang sama.

Internet adalah jaringan global yang menghubungkan berbagai perangkat komputer.

Sedangkan World Wide Web atau WWW adalah salah satu layanan yang berjalan menggunakan jaringan internet.

Selain web, internet juga digunakan untuk:

Email
Video conference
Cloud computing
File transfer
Online game
Remote server

Browser sebagai Client

Dalam teknologi web terdapat konsep client-server.

Browser seperti Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, dan Brave bertindak sebagai client.

Client bertugas meminta informasi kepada server.

Server

Server adalah sistem yang menyediakan layanan kepada client.

Dalam dunia web dikenal istilah web server.

Contohnya:

Apache
Nginx
Microsoft IIS

Request dan Response

Secara sederhana proses membuka website adalah:

Pengguna
   |
   v
Browser / Client
   |
   | HTTP Request
   v
Web Server
   |
   | HTTP Response
   v
Browser
   |
   v
Halaman ditampilkan

Browser mengirimkan request. Server menerima request tersebut dan memberikan response.

Konsep request dan response nantinya akan kembali muncul ketika kita mempelajari form, PHP, database, AJAX, dan API.

HTTP dan HTTPS

HTTP merupakan singkatan dari HyperText Transfer Protocol.

HTTPS adalah versi HTTP yang menggunakan mekanisme keamanan untuk melindungi komunikasi antara browser dan server.

Contoh:

http://example.com

https://example.com

Domain dan Hosting

Domain dapat dianggap sebagai alamat yang digunakan untuk menemukan website.

Contohnya:

example.com
kampus.ac.id
perusahaan.co.id

Sedangkan hosting adalah tempat file website disimpan agar dapat diakses melalui internet.

Analogi sederhananya:

Domain = alamat rumah.
Hosting = rumah.
File website = isi rumah.

Website Statis dan Dinamis

Website statis umumnya menampilkan konten yang tersimpan langsung pada file HTML.

Contoh:

<h1>Profil Kampus</h1>
<p>Selamat datang di website kampus.</p>

Sedangkan website dinamis dapat menghasilkan halaman berdasarkan proses dan data dari database.

Roadmap teknologi yang akan dipelajari dalam mata kuliah ini adalah:

HTML
  |
  v
CSS
  |
  v
JavaScript
  |
  v
PHP
  |
  v
MySQL
  |
  v
Aplikasi CRUD

Front-End dan Back-End

Front-end adalah bagian aplikasi yang berhubungan langsung dengan pengguna.

Teknologi dasar front-end:

HTML
CSS
JavaScript

Back-end adalah bagian aplikasi yang bekerja pada server.

Pada mata kuliah ini kita akan menggunakan PHP sebagai bahasa pemrograman server-side dan MySQL sebagai database.

Coding 1 — Hello, Web!

Sekarang kita membuat program web pertama.

Buat folder:

pertemuan-01

Kemudian buat file:

index.html

Isi file tersebut:

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama Saya</title>
</head>
<body>

    <h1>Hello, Web!</h1>

    <p>
        Saya sedang belajar membuat website.
    </p>

</body>
</html>

Memahami Kodenya

Kode	Fungsi
<!DOCTYPE html>	Memberi tahu browser bahwa dokumen menggunakan HTML modern.
<html>	Menjadi elemen utama dokumen HTML.
<head>	Berisi informasi mengenai dokumen.
<title>	Menentukan judul yang muncul pada tab browser.
<body>	Berisi konten yang ditampilkan pada halaman.
<h1>	Membuat heading utama.
<p>	Membuat sebuah paragraf.

Simpan file dengan Ctrl + S, kemudian buka index.html menggunakan browser.

Target Coding 1: Mahasiswa berhasil membuat file HTML sendiri dan melihat hasilnya melalui browser.

Materi 2 — Mengenal Anatomi HTML5

Setelah berhasil membuat halaman pertama, sekarang kita perlu memahami struktur HTML secara lebih benar.

Apa Itu HTML?

HTML merupakan singkatan dari HyperText Markup Language.

HTML bukan bahasa pemrograman seperti PHP, JavaScript, Python, atau Java.

HTML merupakan markup language yang digunakan untuk menentukan struktur dan makna suatu konten.

Tag, Content, dan Element

Perhatikan kode:

<p>Saya belajar HTML</p>

Bagian:

<p>

disebut opening tag.

Bagian:

Saya belajar HTML

disebut content.

Sedangkan:

</p>

disebut closing tag.

Keseluruhannya disebut HTML element.

Opening Tag + Content + Closing Tag = HTML Element

Attribute dan Value

Perhatikan:

<html lang="id">

lang merupakan attribute.

Sedangkan id merupakan value dari attribute tersebut.

Pola sederhananya:

attribute="value"

Struktur HTML5 yang Lebih Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Judul Halaman</title>
</head>
<body>

</body>
</html>

Apa Fungsi lang="id"?

<html lang="id">

Attribute lang memberikan informasi bahwa bahasa utama halaman adalah Bahasa Indonesia.

Meta Charset

<meta charset="UTF-8">

Digunakan untuk menentukan character encoding.

UTF-8 mendukung berbagai karakter, huruf, dan simbol.

Meta Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Baris ini membantu browser menyesuaikan halaman dengan ukuran layar perangkat.

Konsep responsive design akan dibahas lebih lanjut ketika mempelajari CSS.

Head dan Body

Bagian <head> berisi informasi mengenai halaman.

Bagian <body> berisi sesuatu yang ditampilkan kepada pengguna.

Title dan H1 Berbeda

<title>Biodata Mahasiswa</title>

Title terlihat pada tab browser.

Sedangkan:

<h1>Biodata Mahasiswa</h1>

ditampilkan sebagai heading utama pada halaman.

Coding 2 — Biodata Mahasiswa

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Biodata Mahasiswa</title>
</head>
<body>

    <h1>Biodata Mahasiswa</h1>

    <p>Nama: Andi Saputra</p>

    <p>NIM: 2026001</p>

    <p>Program Studi: Teknik Informatika</p>

    <p>Semester: 1</p>

</body>
</html>

Apa yang Berubah dari Coding 1?

Dokumen sudah menggunakan lang="id".
Sudah menggunakan meta charset.
Sudah menggunakan meta viewport.
Informasi mulai disusun menjadi biodata.
Mahasiswa mulai memahami struktur standar HTML5.

Target Coding 2: Mahasiswa mampu membuat struktur dokumen HTML5 tanpa hanya mengandalkan copy-paste.

Materi 3 — Menyusun Konten HTML yang Terstruktur

Website yang baik bukan hanya berisi teks. Konten perlu memiliki struktur dan hierarki yang jelas.

Heading

HTML menyediakan enam level heading:

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Heading digunakan berdasarkan hierarki informasi, bukan sekadar ukuran teks.

Contoh:

<h1>Profil Mahasiswa</h1>

<h2>Data Diri</h2>

<h2>Tentang Saya</h2>

<h2>Minat Teknologi</h2>

<h3>Web Development</h3>

Strukturnya berarti:

Profil Mahasiswa
|
+-- Data Diri
|
+-- Tentang Saya
|
+-- Minat Teknologi
    |
    +-- Web Development

Paragraph

Gunakan:

<p>
    Ini adalah sebuah paragraf.
</p>

Strong

Digunakan untuk memberikan penekanan kuat:

<strong>Nama:</strong>

Emphasis

Gunakan:

<em>Web Development</em>

untuk memberikan emphasis pada suatu teks.

Line Break

<br>

digunakan jika benar-benar diperlukan untuk berpindah baris dalam satu konteks teks.

Namun jangan membuat layout dengan banyak <br>.

Horizontal Rule

<hr>

dapat digunakan sebagai thematic break atau pemisah antarbagian.

HTML Comment

<!-- Bagian profil mahasiswa -->

Komentar dapat membantu developer memberi penanda pada source code.

Nested Element

Contoh:

<p>
    Saya sedang mempelajari
    <strong>HTML</strong>
    pada semester ini.
</p>

Elemen strong berada di dalam elemen p.

Struktur seperti ini disebut nesting.

Indentation

Kurang rapi:

<body>
<h1>Profil</h1>
<p>Nama saya Andi</p>
</body>

Lebih baik:

<body>

    <h1>Profil</h1>

    <p>
        Nama saya Andi.
    </p>

</body>

Komputer mungkin tetap dapat membaca source code yang berantakan, tetapi manusia yang melakukan maintenance akan jauh lebih mudah bekerja dengan source code yang rapi.

Coding 3 — Membuat Profil Mahasiswa Terstruktur

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Profil Mahasiswa</title>
</head>
<body>

    <!-- Judul utama halaman -->
    <h1>Profil Mahasiswa</h1>

    <h2>Data Diri</h2>

    <p>
        <strong>Nama:</strong>
        Andi Saputra
    </p>

    <p>
        <strong>NIM:</strong>
        2026001
    </p>

    <p>
        <strong>Program Studi:</strong>
        Teknik Informatika
    </p>

    <hr>

    <h2>Tentang Saya</h2>

    <p>
        Saya merupakan mahasiswa yang sedang
        mempelajari dasar-dasar pengembangan website.
    </p>

    <h2>Minat Teknologi</h2>

    <p>
        Saya tertarik mempelajari
        <em>Web Development</em>,
        desain antarmuka, dan pemrograman.
    </p>

    <h2>Target Pembelajaran</h2>

    <p>
        Saya ingin mampu membuat aplikasi website
        yang dapat menyimpan dan mengelola data.
    </p>

</body>
</html>

Target Coding 3: Mahasiswa mampu membangun konten dengan hierarki yang jelas, bukan sekadar menempatkan teks ke dalam halaman.

Materi 4 — Menghubungkan Halaman dengan Link, Gambar, dan File

Sebuah halaman HTML akan terasa sangat terbatas jika hanya berisi teks.

Sekarang kita akan belajar menghubungkan halaman dengan resource lain.

Membuat Hyperlink

HTML menggunakan elemen anchor:

<a href="https://example.com">
    Buka Website
</a>

Attribute href menentukan tujuan link.

Membuka Link di Tab Baru

<a
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Buka Website
</a>

target="_blank" meminta browser membuka tujuan pada tab baru.

Link Internal

Misalkan terdapat struktur:

website/
|
+-- index.html
+-- tentang.html

Dari index.html menuju tentang.html dapat dibuat:

<a href="tentang.html">
    Tentang Saya
</a>

Menampilkan Gambar

Gunakan:

<img
    src="images/profil.jpg"
    alt="Foto profil mahasiswa"
    width="200"
>

Attribute src

src="images/profil.jpg"

Menentukan lokasi file gambar.

Attribute alt

alt="Foto profil mahasiswa"

Memberikan alternative text apabila gambar tidak dapat dilihat atau untuk mendukung aksesibilitas.

Relative Path

Misalkan struktur project:

developer-profile/
|
+-- index.html
+-- tentang.html
|
+-- images/
    |
    +-- profil.jpg

Dari index.html, lokasi gambar adalah:

images/profil.jpg

Mengapa Gambar Tidak Muncul?

Jika gambar gagal tampil, periksa:

Apakah nama file sudah benar?
Apakah ekstensi file benar?
Apakah folder sudah benar?
Apakah relative path benar?
Apakah huruf besar dan kecil pada nama file konsisten?

Contoh struktur:

website/
|
+-- index.html
|
+-- images/
    |
    +-- foto.jpg

Benar:

<img src="images/foto.jpg" alt="Foto mahasiswa">

Kurang tepat:

<img src="foto.jpg" alt="Foto mahasiswa">

karena browser akan mencari foto.jpg pada directory yang sama dengan index.html.

Coding 4 — Developer Profile dengan Foto dan Hyperlink

Buat struktur:

developer-profile/
|
+-- index.html
|
+-- images/
    |
    +-- profil.jpg

Kemudian gunakan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Developer Profile</title>
</head>
<body>

    <h1>Developer Profile</h1>

    <img
        src="images/profil.jpg"
        alt="Foto profil mahasiswa"
        width="200"
    >

    <h2>Data Mahasiswa</h2>

    <p>
        <strong>Nama:</strong>
        Andi Saputra
    </p>

    <p>
        <strong>NIM:</strong>
        2026001
    </p>

    <p>
        <strong>Program Studi:</strong>
        Teknik Informatika
    </p>

    <h2>Tentang Saya</h2>

    <p>
        Saya tertarik mempelajari teknologi web
        dan ingin mengembangkan aplikasi yang
        dapat digunakan untuk menyelesaikan
        permasalahan nyata.
    </p>

    <h2>Minat Teknologi</h2>

    <p>
        HTML, CSS, JavaScript, PHP, Database,
        dan Web Development.
    </p>

    <h2>Profil Online</h2>

    <p>
        <a
            href="https://github.com/"
            target="_blank"
            rel="noopener noreferrer"
        >
            Kunjungi GitHub Saya
        </a>
    </p>

</body>
</html>

Apa yang Dipelajari dari Coding 4?

HTML tidak hanya berisi teks.
Attribute dapat memberikan informasi tambahan kepada element.
File HTML dapat menggunakan resource dari folder lain.
Relative path sangat penting dalam pengembangan website.
Link memungkinkan satu resource terhubung dengan resource lainnya.

Target Coding 4: Mahasiswa mampu membuat halaman yang menggunakan teks, gambar, dan hyperlink sekaligus memahami lokasi setiap file.

Materi 5 — Mini Project dan Debugging: My First Developer Profile

Pada tahap ini kita tidak lagi membuat contoh yang berdiri sendiri.

Seluruh konsep pada Coding 1 sampai Coding 4 akan digabungkan menjadi satu mini project.

Sebelum Coding: Mengenal Debugging

Dalam dunia programming, source code tidak selalu langsung berjalan sesuai keinginan.

Proses mencari dan memperbaiki masalah disebut debugging.

Kesalahan 1 — Lupa Menyimpan File

Jika source code di VS Code sudah diubah tetapi browser belum berubah, pastikan file sudah disimpan:

Ctrl + S

Kemudian lakukan refresh browser.

Kesalahan 2 — Salah Menutup Tag

Kurang baik:

<p>
    Saya belajar HTML

Lebih baik:

<p>
    Saya belajar HTML.
</p>

Kesalahan 3 — Path Gambar Salah

Selalu periksa struktur directory sebelum mengatakan bahwa HTML atau browser bermasalah.

Kesalahan 4 — Menggunakan Heading karena Besar

Kurang tepat:

<h1>Nama</h1>
<h1>NIM</h1>
<h1>Alamat</h1>

Lebih terstruktur:

<h1>Profil Mahasiswa</h1>

<h2>Data Diri</h2>

<p>Nama: Andi</p>
<p>NIM: 2026001</p>

Kesalahan 5 — Menggunakan br untuk Membuat Jarak

Hindari:

<br>
<br>
<br>
<br>

hanya untuk membuat ruang kosong.

Pengaturan tampilan akan kita pelajari melalui CSS menggunakan konsep seperti margin dan padding.

Developer Tools

Browser modern mempunyai Developer Tools.

Umumnya dapat dibuka dengan:

F12

Kemudian buka tab:

Elements

Klik kanan salah satu bagian halaman kemudian pilih Inspect.

Mahasiswa dapat melihat elemen HTML yang membentuk bagian halaman tersebut.

Misalnya:

<h1>Developer Profile</h1>

dapat ditemukan langsung pada panel Elements.

Coding 5 — My First Developer Profile

Sekarang buat project akhir Pertemuan 1.

Struktur Project

my-developer-profile/
|
+-- index.html
|
+-- images/
    |
    +-- profil.jpg

Source Code Awal

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My First Developer Profile</title>
</head>
<body>

    <!-- Header profil -->
    <h1>My First Developer Profile</h1>

    <img
        src="images/profil.jpg"
        alt="Foto profil mahasiswa"
        width="200"
    >

    <hr>

    <h2>Identitas</h2>

    <p>
        <strong>Nama:</strong>
        Andi Saputra
    </p>

    <p>
        <strong>NIM:</strong>
        2026001
    </p>

    <p>
        <strong>Program Studi:</strong>
        Teknik Informatika
    </p>

    <h2>Tentang Saya</h2>

    <p>
        Saya merupakan mahasiswa yang tertarik
        pada perkembangan teknologi informasi
        dan pengembangan aplikasi berbasis web.
    </p>

    <h2>Mengapa Saya Belajar Web Development?</h2>

    <p>
        Saya ingin memahami bagaimana sebuah website
        bekerja, mulai dari struktur halaman,
        desain antarmuka, interaksi pengguna,
        pemrosesan data, hingga penyimpanan database.
    </p>

    <h2>Teknologi yang Ingin Saya Pelajari</h2>

    <p>
        Saya ingin mempelajari
        <strong>HTML</strong>,
        CSS, JavaScript, PHP, dan MySQL.
    </p>

    <h2>Target Project Akhir</h2>

    <p>
        Pada akhir mata kuliah ini saya ingin
        mampu membuat aplikasi
        <em>CRUD berbasis website</em>
        yang dapat menambah, menampilkan,
        mengubah, dan menghapus data.
    </p>

    <h2>Profil Online</h2>

    <p>
        <a
            href="https://github.com/"
            target="_blank"
            rel="noopener noreferrer"
        >
            GitHub
        </a>
    </p>

    <hr>

    <p>
        Dibuat pada mata kuliah
        Perancangan dan Pemrograman Website.
    </p>

</body>
</html>

Ketentuan Mini Project

Mahasiswa tidak harus menggunakan identitas yang sama dengan contoh. Setiap mahasiswa harus mengganti kontennya dengan informasi masing-masing.

Halaman minimal memiliki:

Nama.
NIM.
Program Studi.
Foto.
Tentang Saya.
Alasan belajar Web Development.
Teknologi yang ingin dipelajari.
Target project akhir semester.
Minimal satu hyperlink.

Elemen yang wajib digunakan:

<!DOCTYPE html>
<html>
<head>
<meta>
<title>
<body>
<h1>
<h2>
<p>
<strong>
<em>
<a>
<img>
<hr>

Tambahkan minimal satu HTML comment:

<!-- Bagian identitas mahasiswa -->

Debugging Challenge

Perhatikan source code berikut. Source code sengaja dibuat memiliki beberapa masalah.

<html>
<head>
    <title>Developer Profile
</head>

<body>

<h1>Profil Saya

<p>
Nama saya Andi.

<img src="profil.jpg">

<a href="github.com">
GitHub Saya

</body>

Tugas mahasiswa:

Temukan bagian yang bermasalah.
Perbaiki struktur dokumen HTML.
Tambahkan DOCTYPE.
Tambahkan lang="id".
Tambahkan meta charset.
Perbaiki closing tag.
Perbaiki lokasi gambar apabila gambar disimpan pada folder images.
Tambahkan alternative text pada gambar.
Perbaiki URL hyperlink.
Rapikan indentation.

Salah Satu Hasil Perbaikannya

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Developer Profile</title>
</head>
<body>

    <h1>Profil Saya</h1>

    <p>
        Nama saya Andi.
    </p>

    <img
        src="images/profil.jpg"
        alt="Foto profil Andi"
        width="200"
    >

    <p>
        <a
            href="https://github.com/"
            target="_blank"
            rel="noopener noreferrer"
        >
            GitHub Saya
        </a>
    </p>

</body>
</html>

Target Coding 5: Mahasiswa mampu membuat halaman HTML sederhana secara mandiri sekaligus mampu mencari kesalahan dasar pada source code.

Rangkuman Pertemuan 1

Pada pertemuan pertama kita tidak hanya belajar menulis tag HTML.

Kita mulai dari memahami bagaimana sebuah website bekerja:

Browser
   |
   | Request
   v
Server
   |
   | Response
   v
Browser
   |
   v
Website

Kemudian kita memahami posisi teknologi:

HTML        = Struktur
CSS         = Tampilan
JavaScript  = Interaksi
PHP         = Proses di Server
MySQL       = Penyimpanan Data

Selanjutnya mahasiswa telah melakukan lima tahapan coding:

Hello, Web! — membuat halaman HTML pertama.
Biodata Mahasiswa — memahami struktur HTML5.
Profil Mahasiswa — menyusun konten secara terstruktur.
Developer Profile — menggunakan gambar, link, attribute, dan relative path.
My First Developer Profile — mengintegrasikan seluruh materi sekaligus melakukan debugging.