Membuat website sendiri kini lebih mudah dari sebelumnya, terutama bagi pemula. Selain itu, dengan HTML sebagai fondasi, kamu bisa membangun berbagai jenis website, mulai dari blog sederhana hingga toko online, tanpa harus menguasai bahasa pemrograman yang kompleks.
HTML atau HyperText Markup Language berfungsi sebagai bahasa markup yang memberi struktur pada konten website. Lebih lanjut, semua elemen penting seperti teks, gambar, link, tabel, dan formulir dibangun menggunakan HTML. Selain itu, dengan memahami dasar-dasarnya, kamu bisa langsung mulai membuat website sederhana dan menyesuaikannya sesuai kebutuhan.
Apa Itu HTML?
Lalu, apa itu HTML? HTML adalah bahasa standar untuk membuat halaman web. Bahasa ini bukan bahasa pemrograman melainkan markup, yang artinya hanya memberi “tanda” bagaimana konten ditampilkan. Selain itu, <h1> digunakan untuk heading, <p> untuk paragraf, dan <a> untuk link.
Mempelajari HTML penting karena menjadi dasar dari semua website. Lebih lanjut, kamu bisa menambahkan CSS untuk mempercantik tampilan dan JavaScript untuk membuat website interaktif. Bahkan untuk website penjualan, HTML tetap menjadi fondasi utama untuk menampilkan produk dan informasi.
Baca juga: Apa Itu HTML? Bahasa Markup Populer untuk Membuat Halaman Web
Struktur Dasar Coding HTML
Sebelum melihat contoh coding HTML website, pahami struktur dasar HTML berikut:
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Judul Website</title>
</head>
<body>
<h1>Halo, Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama di website.</p>
</body>
</html>
Struktur ini terdiri dari:
- <!DOCTYPE html>: Menentukan dokumen HTML5
- <html>: Element root halaman
- <head>: Berisi informasi meta dan judul
- <body>: Bagian utama yang menampilkan konten
15+ Contoh Coding HTML Website Sederhana
Berikut berbagai contoh coding HTML website yang bisa langsung dipraktikkan. Selain itu, setiap contoh disertai pembukaan singkat supaya mudah dipahami.
1. Contoh Coding HTML Website Dasar
Website sederhana pertama bisa berupa halaman dengan teks dan heading dasar. Selain itu, juga cocok untuk latihan awal.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Dasar</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah contoh coding HTML yang sederhana.</p>
</body>
</html>
2. Contoh Coding HTML dengan Link
Link merupakan bagian penting agar pengguna bisa menavigasi ke halaman lain atau situs eksternal.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website dengan Link</title>
</head>
<body>
<h1>Halaman Utama</h1>
<a href=”https://www.google.com”>Kunjungi Google</a>
</body>
</html>
3. Contoh Coding HTML dengan Gambar
Menampilkan gambar membuat website lebih menarik dan informatif.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Gambar</title>
</head>
<body>
<h1>Website dengan Gambar</h1>
<img src=”gambar.jpg” alt=”Contoh Gambar” width=”300″>
</body>
</html>
4. Contoh Coding HTML dengan List
List membantu menampilkan informasi secara terstruktur, seperti daftar produk atau langkah-langkah.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website List</title>
</head>
<body>
<h1>Daftar Buah</h1>
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
</body>
</html>
5. Contoh Coding HTML Website Penjualan
Untuk website penjualan, HTML digunakan untuk menampilkan produk beserta harga dan deskripsi singkat.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Toko Online Sederhana</title>
</head>
<body>
<h1>Selamat Datang di Toko Kami</h1>
<p>Produk terbaru:</p>
<ul>
<li>Kaos Polos – Rp50.000</li>
<li>Topi Baseball – Rp75.000</li>
<li>Tas Ransel – Rp150.000</li>
</ul>
</body>
</html>
6. Contoh Coding HTML dengan Tabel
Tabel membantu menampilkan data secara rapi, cocok untuk harga atau spesifikasi produk.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Tabel</title>
</head>
<body>
<h1>Daftar Harga</h1>
<table border=”1″>
<tr>
<th>Produk</th>
<th>Harga</th>
</tr>
<tr>
<td>Kaos</td>
<td>Rp50.000</td>
</tr>
<tr>
<td>Topi</td>
<td>Rp75.000</td>
</tr>
</table>
</body>
</html>
7. Contoh Coding HTML dengan Formulir Kontak
Formulir memungkinkan pengguna mengirim pesan atau pertanyaan langsung ke website.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Formulir Kontak</title>
</head>
<body>
<h1>Hubungi Kami</h1>
<form action=”/submit” method=”post”>
<label>Nama:</label><br>
<input type=”text” name=”nama”><br><br>
<label>Email:</label><br>
<input type=”email” name=”email”><br><br>
<label>Pesan:</label><br>
<textarea name=”pesan”></textarea><br><br>
<input type=”submit” value=”Kirim”>
</form>
</body>
</html>
8. Contoh Coding HTML Website Sederhana dengan Heading
Heading membantu memberi struktur halaman dan mempermudah pembaca memahami konten.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
</body>
</html>
9. Contoh Coding HTML dengan Paragraph dan Style
Sedikit style membuat tampilan paragraf lebih menarik dan mudah dibaca.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Style</title>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Paragraf Berwarna</h1>
<p>Ini adalah contoh coding HTML yang sudah jadi dengan style sederhana.</p>
</body>
</html>
10. Contoh Coding HTML dengan Video
Video meningkatkan interaktivitas dan dapat menampilkan tutorial atau promosi produk.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Video</title>
</head>
<body>
<h1>Video Contoh</h1>
<video width=”320″ height=”240″ controls>
<source src=”video.mp4″ type=”video/mp4″>
Browser Anda tidak mendukung video.
</video>
</body>
</html>
11. Contoh Coding HTML Website Sederhana dengan Audio
Audio cocok untuk website musik atau podcast.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Audio</title>
</head>
<body>
<h1>Audio Contoh</h1>
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
Browser Anda tidak mendukung audio.
</audio>
</body>
</html>
12. Contoh Coding HTML dengan Iframe
Iframe memungkinkan menampilkan halaman eksternal di website.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Iframe</title>
</head>
<body>
<h1>Google Iframe</h1>
<iframe src=”https://www.google.com” width=”600″ height=”400″></iframe>
</body>
</html>
13. Contoh Coding HTML dengan Button
Button bisa menambahkan interaksi langsung ke website, misalnya menampilkan alert.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Button</title>
</head>
<body>
<h1>Contoh Button</h1>
<button onclick=”alert(‘Tombol Diklik!’)”>Klik Aku</button>
</body>
</html>
14. Contoh Coding HTML Website Penjualan dengan Gambar Produk
Menampilkan produk lengkap dengan gambar dan harga membuat website lebih profesional.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Toko Online Sederhana</title>
</head>
<body>
<h1>Produk Terbaru</h1>
<div>
<h2>Kaos Polos</h2>
<img src=”kaos.jpg” alt=”Kaos Polos” width=”200″>
<p>Harga: Rp50.000</p>
</div>
<div>
<h2>Topi Baseball</h2>
<img src=”topi.jpg” alt=”Topi Baseball” width=”200″>
<p>Harga: Rp75.000</p>
</div>
</body>
</html>
15. Contoh Coding HTML dengan Navigasi Sederhana
Navigasi memudahkan pengunjung berpindah antar halaman atau bagian website.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Navigasi</title>
</head>
<body>
<h1>Menu Website</h1>
<nav>
<a href=”#home”>Home</a> |
<a href=”#produk”>Produk</a> |
<a href=”#kontak”>Kontak</a>
</nav>
<section id=”home”>
<h2>Selamat Datang</h2>
<p>Ini adalah halaman utama.</p>
</section>
</body>
</html>
16. Contoh Coding HTML Sudah Jadi dengan CSS Minimal
Dengan CSS sederhana, tampilan website bisa lebih rapi dan menarik.
<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<title>Website Sederhana dengan CSS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f0f0f0;
}
.card {
background-color: white;
padding: 20px;
margin: 10px 0;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>Produk Unggulan</h1>
<div class=”card”>
<h2>Kaos Polos</h2>
<p>Harga: Rp50.000</p>
</div>
<div class=”card”>
<h2>Topi Baseball</h2>
<p>Harga: Rp75.000</p>
</div>
</body>
</html>
Website Hasil Coding HTML Lebih Maksimal dengan Cloud VPS
Dari berbagai contoh coding HTML website sederhana di atas, terlihat bahwa membuat website tidak sulit. Dengan memahami struktur HTML, heading, paragraf, list, tabel, gambar, form, dan tombol, kamu bisa membangun halaman web mulai dari yang sederhana hingga website penjualan. Setiap elemen bisa dikembangkan lebih lanjut dengan CSS untuk tampilan menarik dan JavaScript untuk interaktivitas, sehingga website menjadi lebih profesional dan user-friendly.
Namun, membangun website saja tidak cukup. Selain itu, agar website yang kamu buat bisa berjalan lancar, cepat, dan aman, dibutuhkan infrastruktur hosting yang handal. Di sinilah, Cloud VPS Indonesia berperan, memastikan semua website hasil codingmu tampil optimal di semua perangkat.
Keunggulan Cloud VPS Indonesia:
- Performa 40x Lebih Cepat: vCPU, RAM, dan IOPS dedicated mendukung website dan aplikasi dinamis.
- 3X Replikasi Data: Data tersimpan aman di 3 lokasi storage untuk mencegah kehilangan data.
- Jaminan 20.000 IOPS: SSD NVMe mendukung baca-tulis cepat, ideal untuk website penjualan dan aplikasi interaktif.
- Upgrade Storage Tanpa Batas: Menambah kapasitas SSD Cloud VPS semudah beberapa klik.
- Perlindungan Anti DDoS: Sistem terlindungi hingga layer 3 & 4 tanpa biaya tambahan.
- Konektivitas Tinggi: Bandwidth hingga 10 Gbps dengan backbone internet multiple exchange.
Table of Contents
