Ingin belajar membuat website tetapi masih bingung harus mulai dari mana? Tenang, Anda tidak perlu langsung mempelajari bahasa pemrograman yang rumit. Langkah pertama yang paling tepat adalah memahami HTML (HyperText Markup Language).
HTML merupakan fondasi utama dari setiap halaman website. Dengan menguasai HTML, Anda sudah bisa membuat tampilan website sederhana yang berisi teks, gambar, tautan, hingga daftar menu.
Pada artikel ini, Anda akan belajar cara membuat website sederhana menggunakan HTML langkah demi langkah dengan penjelasan yang mudah dipahami, sehingga sangat cocok bagi pemula.
Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk menyusun struktur sebuah halaman website.
HTML berfungsi untuk menentukan berbagai elemen pada halaman, seperti:
- Judul
- Paragraf
- Gambar
- Link
- Tabel
- Form
- Menu navigasi
Perlu diketahui bahwa HTML bukan bahasa pemrograman, melainkan bahasa markup yang bertugas menyusun struktur halaman web.
Persiapan Sebelum Membuat Website
Sebelum mulai menulis kode, siapkan beberapa alat berikut:
- Laptop atau komputer
- Text editor (Visual Studio Code, Notepad++, atau Sublime Text)
- Browser seperti Google Chrome atau Mozilla Firefox
Buat sebuah folder, misalnya:
Website-PertamaKemudian buat file baru bernama:
index.htmlFile inilah yang nantinya akan menjadi halaman utama website.
Mengenal Struktur Dasar HTML
Setiap halaman HTML memiliki struktur dasar seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
</body>
</html>Penjelasan:
<!DOCTYPE html>→ Menandakan dokumen menggunakan HTML5.<html>→ Elemen utama halaman.<head>→ Berisi informasi halaman.<title>→ Judul yang muncul pada tab browser.<body>→ Isi utama website.
Langkah 1: Membuat Judul Website
Tambahkan kode berikut pada bagian <body>.
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah website pertama saya menggunakan HTML.</p>Hasilnya akan menampilkan:
Selamat Datang di Website Saya
Ini adalah website pertama saya menggunakan HTML.
Langkah 2: Menambahkan Paragraf
HTML menyediakan tag <p> untuk membuat paragraf.
<p>Saya sedang belajar membuat website menggunakan HTML.</p>
<p>Belajar HTML sangat mudah jika dilakukan secara bertahap.</p>Paragraf akan ditampilkan secara otomatis dengan jarak antar baris yang rapi.
Langkah 3: Menambahkan Gambar
Misalnya Anda memiliki gambar bernama:
logo.pngSimpan gambar tersebut dalam folder yang sama dengan file HTML.
Kemudian gunakan kode berikut.
<img src="logo.png" alt="Logo Website" width="200">Penjelasan:
- src → Lokasi gambar
- alt → Teks jika gambar gagal dimuat
- width → Lebar gambar
Langkah 4: Membuat Link
Agar pengunjung dapat membuka website lain, gunakan tag <a>.
<a href="https://www.google.com">
Kunjungi Google
</a>Jika ingin membuka pada tab baru:
<a href="https://www.google.com" target="_blank">
Buka Google
</a>Langkah 5: Membuat Daftar
HTML menyediakan dua jenis daftar.
Daftar Berurutan
<ol>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
<li>Belajar JavaScript</li>
</ol>Daftar Tidak Berurutan
<ul>
<li>Home</li>
<li>Tentang</li>
<li>Kontak</li>
</ul>Langkah 6: Membuat Tombol
Walaupun HTML belum memberikan fungsi pada tombol, Anda sudah bisa membuat tampilannya.
<button>Klik Saya</button>Fungsi tombol nantinya dapat ditambahkan menggunakan JavaScript.
Langkah 7: Membuat Tabel
Contoh tabel sederhana:
<table border="1">
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Andi</td>
<td>XII RPL</td>
</tr>
<tr>
<td>Budi</td>
<td>XII TKJ</td>
</tr>
</table>Hasilnya berupa tabel dengan dua kolom.
Langkah 8: Membuat Form Sederhana
Form digunakan untuk menerima input dari pengguna.
<form>
<label>Nama:</label><br>
<input type="text">
<br><br>
<label>Email:</label><br>
<input type="email">
<br><br>
<button>Kirim</button>
</form>Form ini belum menyimpan data karena masih menggunakan HTML saja.
Langkah 9: Membuat Menu Navigasi
Tambahkan menu sederhana.
<nav>
<a href="#">Home</a> |
<a href="#">Tentang</a> |
<a href="#">Kontak</a>
</nav>Menu navigasi memudahkan pengunjung berpindah halaman.
Langkah 10: Menggabungkan Semua Menjadi Website Sederhana
Berikut contoh website lengkap.
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah website sederhana menggunakan HTML.</p>
<img src="logo.png" width="200" alt="Logo">
<nav>
<a href="#">Home</a> |
<a href="#">Tentang</a> |
<a href="#">Kontak</a>
</nav>
<h2>Materi yang Dipelajari</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Data Siswa</h2>
<table border="1">
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Andi</td>
<td>XII RPL</td>
</tr>
</table>
<h2>Hubungi Kami</h2>
<form>
<input type="text" placeholder="Nama">
<br><br>
<input type="email" placeholder="Email">
<br><br>
<button>Kirim</button>
</form>
</body>
</html>Simpan file tersebut lalu buka menggunakan browser. Anda akan melihat website sederhana yang sudah memiliki judul, gambar, menu, daftar, tabel, dan form.
Cara Menjalankan File HTML
Setelah selesai menulis kode:
- Simpan file dengan ekstensi
.html. - Klik dua kali file tersebut.
- Browser akan menampilkan halaman website.
- Jika ada perubahan kode, tekan Ctrl + S lalu refresh browser.
Tips Belajar HTML untuk Pemula
Agar proses belajar lebih efektif, ikuti beberapa tips berikut:
- Pelajari fungsi setiap tag HTML satu per satu.
- Biasakan menulis kode sendiri daripada hanya menyalin.
- Buat proyek sederhana setiap selesai mempelajari materi baru.
- Gunakan indentasi agar kode lebih rapi dan mudah dibaca.
- Lanjutkan belajar CSS setelah memahami HTML.
- Pelajari JavaScript agar website menjadi lebih interaktif.
Kesalahan yang Sering Dilakukan Pemula
Beberapa kesalahan umum saat belajar HTML antara lain:
- Tidak menutup tag HTML dengan benar.
- Salah menuliskan nama file gambar.
- Menyimpan file sebagai
.txtbukan.html. - Lupa menyimpan perubahan sebelum membuka browser.
- Struktur HTML tidak lengkap.
Menghindari kesalahan-kesalahan tersebut akan membuat proses belajar menjadi lebih lancar.
Mengapa Harus Belajar HTML?
Belajar HTML memberikan banyak manfaat, di antaranya:
- Mudah dipelajari oleh pemula.
- Menjadi dasar pengembangan website.
- Digunakan hampir di semua situs web.
- Mempermudah mempelajari CSS dan JavaScript.
- Membuka peluang untuk menjadi web developer.
Dengan menguasai HTML, Anda memiliki fondasi yang kuat untuk mempelajari teknologi web lainnya.
Kesimpulan
Cara membuat website sederhana menggunakan HTML sebenarnya tidaklah sulit. Dengan memahami struktur dasar HTML dan mempraktikkan langkah-langkah di atas, Anda sudah bisa membuat halaman web yang berisi teks, gambar, menu navigasi, tabel, hingga form sederhana.
Teruslah berlatih membuat proyek kecil agar kemampuan Anda semakin berkembang. Setelah menguasai HTML, langkah selanjutnya adalah mempelajari CSS untuk mempercantik tampilan website dan JavaScript untuk menambahkan fitur interaktif. Dengan belajar secara bertahap dan konsisten, Anda akan semakin percaya diri dalam membangun website yang lebih profesional.
