Membuat website tidak selalu harus menggunakan framework atau teknologi yang rumit. Jika Anda baru mulai belajar web development, HTML (HyperText Markup Language) adalah langkah pertama yang wajib dikuasai.

Dengan HTML, Anda dapat membuat halaman website sederhana yang berisi teks, gambar, tautan, hingga daftar menu. Setelah memahami HTML, Anda bisa melanjutkan belajar CSS untuk mempercantik tampilan dan JavaScript agar website menjadi lebih interaktif.

Pada artikel ini, Anda akan mempelajari cara membuat website sederhana menggunakan HTML lengkap dengan contoh kode yang mudah dipahami, sehingga cocok bagi pemula.

Apa Itu HTML?

HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk menyusun struktur sebuah halaman website. HTML berfungsi sebagai kerangka utama yang memberi tahu browser bagaimana menampilkan berbagai elemen seperti judul, paragraf, gambar, tombol, dan tautan.

Hampir semua website di internet dibangun menggunakan HTML sebagai fondasinya.

Persiapan Sebelum Membuat Website

Sebelum mulai menulis kode HTML, siapkan beberapa hal berikut.

Text editor seperti Visual Studio Code, Sublime Text, atau Notepad++.
Browser seperti Google Chrome, Microsoft Edge, atau Mozilla Firefox.
Folder proyek, misalnya website-pertama.
File HTML bernama index.html.

Setelah semuanya siap, Anda bisa mulai membuat website pertama.

Langkah 1: Buat Struktur Dasar HTML

Buka file index.html, kemudian tuliskan kode berikut.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Pertama Saya</title>
</head>

<body>

</body>

</html>

Kode tersebut merupakan struktur dasar HTML yang wajib dimiliki setiap halaman website.

Langkah 2: Tambahkan Judul Website

Masukkan kode berikut di dalam tag <body>.

<h1>Selamat Datang di Website Saya</h1>

<p>Ini adalah website pertama yang saya buat menggunakan HTML.</p>

Hasilnya akan menampilkan sebuah judul besar beserta paragraf sederhana.

Langkah 3: Menambahkan Gambar

Website akan terasa lebih menarik jika memiliki gambar.

Contohnya:

<img src="gambar.jpg" alt="Belajar HTML" width="400">

Pastikan file gambar.jpg berada pada folder yang sama dengan file index.html.

Langkah 4: Menambahkan Link

HTML menyediakan tag <a> untuk membuat tautan.

<a href="https://www.google.com">Kunjungi Google</a>

Jika diklik, pengguna akan diarahkan ke halaman tujuan.

Langkah 5: Membuat Daftar Menu

Anda juga bisa membuat menu sederhana menggunakan daftar.

<h2>Menu Website</h2>

<ul>
    <li>Beranda</li>
    <li>Tentang</li>
    <li>Artikel</li>
    <li>Kontak</li>
</ul>

Tag <ul> digunakan untuk daftar tidak berurutan, sedangkan <li> digunakan untuk setiap item daftar.

Contoh Website HTML Sederhana

Berikut contoh website sederhana yang menggabungkan semua elemen di atas.

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Pertama Saya</title>
</head>

<body>

    <h1>Selamat Datang</h1>

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

    <img src="gambar.jpg" alt="Belajar HTML" width="350">

    <h2>Menu</h2>

    <ul>
        <li>Beranda</li>
        <li>Tentang Saya</li>
        <li>Artikel</li>
        <li>Kontak</li>
    </ul>

    <a href="https://www.google.com">
        Kunjungi Google
    </a>

</body>

</html>

Simpan file tersebut dengan nama index.html, lalu buka menggunakan browser. Anda akan melihat website sederhana yang sudah berisi judul, paragraf, gambar, menu, dan tautan.

Cara Menjalankan File HTML

Setelah selesai menulis kode, lakukan langkah berikut.

Simpan file dengan ekstensi .html.
Klik dua kali file index.html.
Browser akan otomatis membuka halaman website.
Jika ada perubahan pada kode, simpan kembali file lalu tekan Refresh pada browser.

Dengan cara ini, Anda dapat langsung melihat hasil perubahan secara real-time.

Tips Membuat Website HTML yang Rapi

Agar kode mudah dibaca dan dikelola, ikuti beberapa tips berikut.

Gunakan indentasi yang konsisten.
Berikan nama file yang jelas.
Gunakan tag HTML sesuai fungsinya.
Tambahkan atribut alt pada setiap gambar.
Simpan semua aset seperti gambar dalam folder khusus.
Uji website di beberapa browser untuk memastikan tampilannya konsisten.

Kesalahan yang Sering Dilakukan Pemula

Saat belajar HTML, beberapa kesalahan berikut sering terjadi.

Lupa menutup tag HTML.
Salah menulis nama file gambar.
Menyimpan file sebagai .txt bukan .html.
Tidak menggunakan struktur HTML yang lengkap.
Meletakkan file gambar di folder yang berbeda tanpa memperbarui jalurnya.
Tidak menyimpan perubahan sebelum membuka browser.

Dengan menghindari kesalahan tersebut, proses belajar akan menjadi lebih lancar.

Apa yang Harus Dipelajari Setelah HTML?

Setelah menguasai HTML, langkah berikutnya adalah mempelajari teknologi pendukung agar website semakin menarik.

CSS untuk mengatur warna, font, layout, dan tampilan website.
JavaScript untuk menambahkan fitur interaktif seperti slider, validasi formulir, dan animasi.
Responsive Web Design agar website nyaman diakses melalui smartphone maupun desktop.
Framework CSS seperti Bootstrap atau Tailwind CSS.
Version Control menggunakan Git dan GitHub.

Menguasai ketiga teknologi utama, yaitu HTML, CSS, dan JavaScript, merupakan bekal yang sangat baik untuk menjadi seorang web developer.

Kesimpulan

Cara membuat website sederhana menggunakan HTML sebenarnya tidak sulit. Dengan memahami struktur dasar HTML dan beberapa tag penting seperti heading, paragraf, gambar, daftar, dan tautan, Anda sudah bisa membuat halaman web pertama sendiri.

HTML merupakan fondasi utama dalam pengembangan website. Semakin sering Anda berlatih membuat halaman sederhana, semakin cepat pula kemampuan Anda berkembang sebelum melanjutkan ke CSS, JavaScript, maupun framework modern.

Jangan ragu untuk mencoba berbagai kombinasi tag HTML agar lebih memahami cara kerja setiap elemennya. Belajar secara konsisten adalah kunci untuk menjadi web developer yang andal.

Cara Membuat Website Sederhana Menggunakan HTML