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

Topik: Web Fundamentals dan HTML Fundamentals

Saat membuka portal akademik, toko online, media sosial, sistem informasi kampus, atau halaman profil sederhana, kita sedang menggunakan teknologi web. Bagi pengguna, halaman tersebut terlihat seperti kumpulan teks, gambar, menu, tombol, dan formulir. Bagi web developer, di baliknya terdapat browser, server, request, response, file, URL, dan berbagai teknologi yang saling bekerja.

Pada mata kuliah ini kita membangun fondasi terlebih dahulu. Mahasiswa akan memahami cara kerja web, menulis HTML dengan benar, mempercantiknya dengan CSS, memberi logika menggunakan JavaScript, memproses data dengan PHP, menyimpan data pada MySQL, lalu melanjutkan ke Laravel.

Sebagai benang merah praktik, contoh-contoh diarahkan perlahan ke Sistem Penjualan Sederhana. Namun teori dasar web tetap menjadi fokus utama. Sistem penjualan digunakan sebagai konteks agar konsep terasa dekat dengan aplikasi nyata dan nantinya dapat terhubung dengan Technopreneurship.

Pertemuan pertama dibagi menjadi 5 materi utama. Setiap materi ditutup dengan praktik coding. Pada akhir pertemuan, mahasiswa akan membuat My First Business Website, yaitu halaman profil usaha sederhana yang nantinya dapat berkembang menjadi sistem penjualan.

Target Pembelajaran

• Memahami perbedaan internet dan World Wide Web.
• Menjelaskan hubungan browser, client, server, request, dan response.
• Memahami HTTP/HTTPS, domain, dan hosting secara sederhana.
• Membedakan front-end dan back-end.
• Memahami peran HTML, CSS, JavaScript, PHP, MySQL, dan Laravel.
• Memahami HTML sebagai markup language.
• Membuat struktur dasar dokumen HTML5.
• Menggunakan heading, paragraph, strong, em, br, hr, dan comment.
• Membuat hyperlink dan menampilkan gambar.
• Memahami attribute, value, dan relative path.
• Melakukan debugging HTML sederhana.
• Membuat halaman profil usaha sederhana.

Materi 1 — Memahami Cara Kerja Web dan Membuat HTML Pertama

Sebelum menulis kode, kita perlu mengetahui apa yang terjadi ketika sebuah alamat website diketik pada browser. Pemahaman ini penting karena konsep client, server, request, dan response akan muncul lagi ketika kita belajar form, PHP, database, AJAX, dan API.

Website dan Web Page

Web page adalah satu halaman yang dibuka menggunakan browser. Contohnya halaman Beranda, Tentang Kami, Katalog, Kontak, Login, atau Data Produk.

Website adalah kumpulan beberapa web page yang saling terhubung. Sebuah website penjualan sederhana dapat berkembang menjadi:

Beranda
|
+-- Profil Usaha
+-- Katalog Produk
+-- Detail Produk
+-- Kontak
+-- Keranjang
+-- Transaksi

Internet dan World Wide Web

Internet adalah jaringan global yang menghubungkan berbagai perangkat. World Wide Web (WWW) adalah salah satu layanan yang berjalan di atas internet. Jadi, internet tidak sama dengan web.

Browser sebagai Client

Browser seperti Chrome, Firefox, Edge, Safari, dan Brave bertindak sebagai client. Client meminta informasi kepada server.

Server, Request, dan Response

Secara sederhana, proses membuka website dapat digambarkan seperti ini:

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

Ketika calon pelanggan membuka website toko, browser mengirim request. Server kemudian mengirim response berupa HTML, CSS, JavaScript, gambar, atau data lain yang diperlukan.

HTTP dan HTTPS

HTTP adalah singkatan dari HyperText Transfer Protocol. HTTPS adalah versi HTTP yang menggunakan mekanisme keamanan untuk melindungi komunikasi antara browser dan server.

Domain dan Hosting

Domain adalah alamat website, sedangkan hosting adalah tempat file website disimpan agar dapat diakses melalui internet.

Front-End, Back-End, dan Database

Front-end adalah bagian yang dilihat dan digunakan langsung oleh pengguna. Back-end menangani proses di server. Database digunakan untuk menyimpan data yang dibutuhkan aplikasi.

HTML
  |
  v
CSS
  |
  v
JavaScript
  |
  v
PHP
  |
  v
MySQL
  |
  v
CRUD Native
  |
  v
Laravel
  |
  v
Sistem Penjualan Berbasis Web

Coding 1 — Website Pertama Saya

Buat folder pertemuan-01, kemudian buat file index.html. Praktik pertama hanya bertujuan membuktikan bahwa browser dapat membaca file HTML buatan kita.

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

    <h1>Hello, Web!</h1>

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

    <p>
        Project pertama saya akan berkembang
        menjadi sistem penjualan sederhana.
    </p>

</body>
</html>

Target Coding 1: mahasiswa berhasil membuat file HTML pertama dan membukanya menggunakan browser.

Materi 2 — Memahami Struktur HTML5 dan Membuat Identitas Usaha

HTML merupakan singkatan dari HyperText Markup Language. HTML bukan bahasa pemrograman untuk melakukan perhitungan atau mengambil keputusan. HTML adalah markup language yang digunakan untuk menyusun struktur dan makna konten.

Tag, Content, Element, Attribute, dan Value

<p class="deskripsi">
    Selamat datang di website kami.
</p>

Pada contoh tersebut, p adalah tag, teks di dalamnya adalah content, keseluruhan bagian merupakan element, class adalah attribute, dan deskripsi adalah value.

Struktur Dasar HTML5

<!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>

    Isi halaman berada di sini.

</body>
</html>

lang="id" menunjukkan bahasa utama dokumen adalah Bahasa Indonesia. UTF-8 membantu browser menampilkan karakter dengan benar, sedangkan viewport penting agar halaman lebih siap ditampilkan pada berbagai perangkat.

Nesting dan Indentation

Elemen HTML dapat berada di dalam elemen lain. Penulisan seperti ini disebut nesting. Indentation bukan syarat browser, tetapi sangat penting agar source code mudah dibaca.

Coding 2 — Membuat Identitas Usaha

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

    <title>NusaTech Store</title>
</head>
<body>

    <h1>NusaTech Store</h1>

    <p>
        Toko perlengkapan komputer
        untuk kebutuhan belajar dan bekerja.
    </p>

    <p>
        Lokasi: Jakarta
    </p>

</body>
</html>

Target Coding 2: mahasiswa memahami struktur HTML5 dan mampu membuat halaman identitas usaha sederhana.

Materi 3 — Menyusun Konten dengan Heading, Paragraf, dan Elemen Teks

Setelah struktur dokumen dipahami, langkah berikutnya adalah menyusun isi halaman agar memiliki hierarki yang jelas. HTML menyediakan heading h1 sampai h6.

Gunakan h1 sebagai judul utama halaman. Heading berikutnya digunakan untuk membentuk subbagian. Jangan memilih heading hanya berdasarkan ukuran hurufnya karena tampilan akan diatur menggunakan CSS.

p digunakan untuk paragraf, strong untuk penekanan penting, em untuk emphasis, br untuk line break, hr untuk pemisah tematik, dan comment untuk catatan di source code.

Coding 3 — Menyusun Profil Usaha

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

    <title>Profil NusaTech Store</title>
</head>
<body>

    <!-- Judul utama halaman -->
    <h1>NusaTech Store</h1>

    <p>
        <strong>Solusi perangkat pendukung aktivitas digital.</strong>
    </p>

    <hr>

    <h2>Tentang Usaha</h2>

    <p>
        NusaTech Store merupakan contoh usaha sederhana
        yang menjual perlengkapan komputer dan aksesorinya.
    </p>

    <h2>Produk yang Ditawarkan</h2>

    <p>
        Kami menyediakan keyboard, mouse, headset,
        dan berbagai <em>computer accessories</em>.
    </p>

    <h2>Tujuan Pengembangan Website</h2>

    <p>
        Website ini akan dikembangkan secara bertahap
        menjadi sistem penjualan berbasis web.
    </p>

</body>
</html>

Target Coding 3: mahasiswa mampu menyusun konten halaman menggunakan heading dan elemen teks secara terstruktur.

Materi 4 — Hyperlink, Gambar, Attribute, dan Relative Path

Website tidak berdiri sebagai satu halaman saja. Hyperlink menghubungkan satu halaman dengan halaman lain, sedangkan gambar membantu menyampaikan informasi secara visual.

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

<a
    href="https://www.instagram.com/"
    target="_blank"
    rel="noopener noreferrer">
    Instagram Usaha
</a>

<img
    src="images/toko.jpg"
    alt="Foto NusaTech Store"
    width="300">

Relative Path

pertemuan-01/
|
+-- index.html
|
+-- images/
    |
    +-- toko.jpg
    +-- keyboard.jpg

Karena index.html berada satu tingkat di atas folder images, gambar dapat dipanggil dengan images/toko.jpg.

Coding 4 — Menambahkan Gambar dan Link

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

    <title>NusaTech Store</title>
</head>
<body>

    <h1>NusaTech Store</h1>

    <img
        src="images/toko.jpg"
        alt="Foto NusaTech Store"
        width="300"
    >

    <h2>Tentang Kami</h2>

    <p>
        Kami menyediakan perlengkapan komputer
        untuk kebutuhan belajar, bekerja, dan usaha.
    </p>

    <h2>Produk Unggulan</h2>

    <img
        src="images/keyboard.jpg"
        alt="Keyboard Mechanical"
        width="250"
    >

    <p>
        <strong>Keyboard Mechanical</strong><br>
        Produk contoh yang nantinya akan masuk
        ke sistem penjualan.
    </p>

    <h2>Kontak</h2>

    <p>
        <a
            href="https://www.instagram.com/"
            target="_blank"
            rel="noopener noreferrer"
        >
            Instagram Usaha
        </a>
    </p>

</body>
</html>

Target Coding 4: mahasiswa mampu menggunakan hyperlink, gambar, attribute, dan relative path.

Materi 5 — Mini Project: My First Business Website + Debugging

Pada bagian terakhir, seluruh materi Pertemuan 1 digabungkan menjadi sebuah halaman profil usaha. Project ini masih statis dan belum memiliki database. Tujuannya adalah membangun fondasi HTML yang benar.

Browser menyediakan Developer Tools dan View Source untuk memeriksa struktur halaman, melihat error, dan membantu proses debugging.

Coding 5 — My First Business Website

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

    <title>My First Business Website</title>
</head>
<body>

    <h1>NusaTech Store</h1>

    <p>
        <strong>Perlengkapan digital untuk belajar,
        bekerja, dan berkembang.</strong>
    </p>

    <img
        src="images/toko.jpg"
        alt="Foto NusaTech Store"
        width="300"
    >

    <hr>

    <h2>Tentang Usaha</h2>

    <p>
        NusaTech Store adalah contoh usaha teknologi
        yang digunakan sebagai project pembelajaran
        Perancangan dan Pemrograman Website.
    </p>

    <h2>Produk Unggulan</h2>

    <h3>Keyboard Mechanical</h3>

    <img
        src="images/keyboard.jpg"
        alt="Keyboard Mechanical"
        width="250"
    >

    <p>
        Keyboard untuk kebutuhan belajar,
        bekerja, dan aktivitas digital.
    </p>

    <p>
        <strong>Harga:</strong> Rp350.000
    </p>

    <h2>Visi Pengembangan</h2>

    <p>
        Website ini akan dikembangkan dari halaman
        HTML sederhana menjadi
        <em>Sistem Penjualan Berbasis Web</em>.
    </p>

    <h2>Kontak</h2>

    <p>Email: [email protected]</p>

    <p>
        <a
            href="https://www.instagram.com/"
            target="_blank"
            rel="noopener noreferrer"
        >
            Instagram NusaTech Store
        </a>
    </p>

    <hr>

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

</body>
</html>

Debugging Challenge

Perhatikan kode berikut. Temukan dan perbaiki kesalahannya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>NusaTech Store</title>
</head>
<body>

    <h1>NusaTech Store</h2>

    <img
        src="image/toko.jpg"
        alt="Foto toko"
    >

    <p>
        Website usaha pertama saya.
    <p>

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

</body>
</html>

Periksa apakah tag heading sama, path gambar benar, paragraf ditutup, dan indentation cukup jelas.

Challenge Pertemuan 1

Buat halaman profil usaha versi Anda sendiri. Usahanya boleh berupa toko komputer, jasa desain, makanan, fashion, jasa pendidikan, atau ide usaha lain.

• Nama usaha dan deskripsi singkat.
• Minimal tiga heading dan tiga paragraf.
• Minimal satu penggunaan strong atau em.
• Minimal dua gambar dengan alt.
• Minimal satu hyperlink eksternal.
• Struktur folder yang rapi.

Evaluasi Pemahaman

1. Apa perbedaan internet dan World Wide Web?
2. Apa yang dimaksud web page dan website?
3. Apa fungsi browser dalam konsep client-server?
4. Apa fungsi web server?
5. Apa yang dimaksud request dan response?
6. Apa perbedaan HTTP dan HTTPS secara sederhana?
7. Apa perbedaan domain dan hosting?
8. Apa perbedaan front-end dan back-end?
9. Apa fungsi HTML?
10. Mengapa HTML disebut markup language?
11. Apa fungsi head dan body?
12. Apa fungsi heading?
13. Apa perbedaan strong dan em?
14. Apa fungsi href?
15. Apa fungsi src dan alt?
16. Apa yang dimaksud relative path?
17. Mengapa indentation penting?
18. Apa manfaat Developer Tools dalam debugging?
19. Apa peran PHP dalam roadmap kita?
20. Apa peran MySQL dan Laravel dalam roadmap kita?

Checklist Kompetensi Pertemuan 1

• Memahami alur client, server, request, dan response.
• Memahami peran teknologi utama web.
• Membuat file HTML5.
• Menggunakan heading dan paragraph.
• Menggunakan strong, em, br, hr, dan comment.
• Menggunakan hyperlink.
• Menampilkan gambar dengan alt.
• Menggunakan relative path.
• Menata folder project.
• Melakukan debugging HTML dasar.
• Membuat profil usaha sederhana.

Rangkuman Pertemuan 1

1. Coding 1: membuat halaman HTML pertama.
2. Coding 2: membuat identitas usaha dengan struktur HTML5.
3. Coding 3: menyusun profil usaha dengan heading dan elemen teks.
4. Coding 4: menambahkan gambar dan hyperlink.
5. Coding 5: membuat My First Business Website.

Pertemuan 1
Profil Usaha
    |
    v
Pertemuan 2
Katalog + Form Data Produk
    |
    v
Pertemuan 3
Product Card + CSS
    |
    v
Pertemuan 4
JavaScript + Kalkulator Penjualan
    |
    v
PHP + MySQL + CRUD
    |
    v
Laravel
    |
    v
Sistem Penjualan Berbasis Web

Menuju Pertemuan 2

Halaman kita sudah memiliki informasi usaha, gambar, dan link. Selanjutnya kita akan membuat struktur yang lebih jelas, daftar kategori, tabel data produk, dan form data produk.

Pertemuan 2 — Dari Halaman Statis ke Form Interaktif: Semantic HTML, List, Table, dan Form