10+ Contoh Kode HTML serta Tips Ampuh untuk Pemula

Eko Pramono

Webdeveloper

durasi baca : 3 menit

Jika kamu baru mulai belajar membuat website, kemungkinan besar kamu akan sering menemukan istilah HTML. Bahasa ini merupakan dasar dari hampir semua halaman website yang ada di internet. Dengan memahami contoh HTML, kamu bisa mulai membuat halaman web sederhana seperti menampilkan teks, gambar, hingga membuat form.

HTML memberi tahu browser bagaimana menampilkan elemen seperti judul, paragraf, gambar, link, dan berbagai komponen lainnya. Bagi pemula, mempelajari contoh HTML adalah cara terbaik untuk memahami cara kerja struktur halaman web. Berikut beberapa contoh kode HTML yang paling sering digunakan.

Daftar Isi

Apa Itu HTML?

10+ Contoh HTML yang Wajib Dipahami Pemula

1. Struktur Dasar HTML
2. Heading dan Paragraf
3. Memformat Teks (Bold, Italic, Underline)
4. Menambahkan Gambar
5. Menambahkan Link
6. Membuat Daftar dengan Bullet Point
7. Membuat Daftar Berurutan
8. Membuat Tabel
9. Membuat Formulir Sederhana
10. Membuat Dropdown

Tips Membuat Kode HTML untuk Pemula

1. Gunakan Indentasi yang Rapi
2. Selalu Cek Kode HTML
3. Belajar dari Sumber Terpercaya

Yuk Mulai Belajar HTML!

Frequently Asked Questions

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa standar yang digunakan untuk membuat dan menyusun halaman website. Dengan HTML, kita bisa menentukan bagaimana berbagai elemen di sebuah halaman web ditampilkan di browser, seperti teks, gambar, tautan (link), tabel, hingga form.

Walaupun sering digunakan untuk membuat website, HTML sebenarnya bukan bahasa pemrograman, melainkan bahasa markup yang berfungsi untuk mengatur struktur dan susunan konten pada halaman web. Dalam HTML, setiap bagian halaman dibuat menggunakan elemen yang disebut tag.

Tag ini biasanya ditulis berpasangan, yaitu tag pembuka dan tag penutup. Contohnya, tag <p> digunakan untuk membuat paragraf, lalu ditutup dengan </p>. Dengan kombinasi berbagai tag ini, kita bisa membangun struktur halaman web mulai dari judul, paragraf, gambar, hingga menu navigasi.

10+ Contoh HTML yang Wajib Dipahami Pemula

Dengan mengenal berbagai elemen HTML, kamu bisa mulai menyusun halaman web yang rapi dan mudah dibaca oleh browser. Tenang saja, HTML sebenarnya cukup mudah dipelajari karena strukturnya jelas dan tidak terlalu rumit. Berikut beberapa contoh HTML yang wajib dipahami oleh pemula:

1. Struktur Dasar HTML

Struktur dasar HTML adalah kerangka utama dari sebuah halaman web. Tanpa struktur ini, browser tidak akan bisa membaca halaman dengan benar. Biasanya struktur HTML terdiri dari tag <html>, <head>, dan <body>.

Tag <html> berfungsi sebagai pembungkus seluruh halaman web. Di dalamnya terdapat <head> yang berisi informasi tambahan seperti judul halaman, dan <body> yang berisi semua konten utama yang akan ditampilkan di halaman website. Contohnya seperti berikut:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Struktur Dasar HTML</title>

</head>

<body>

<p>Halo, dunia!</p>

</body>

</html>

2. Heading dan Paragraf

Heading dan paragraf digunakan untuk menyusun teks agar lebih rapi dan mudah dibaca. HTML memiliki enam tingkat heading, mulai dari <h1> sebagai judul utama hingga <h6> sebagai judul yang paling kecil.

Sementara itu, paragraf ditulis menggunakan tag <p>. Biasanya <h1> digunakan untuk judul utama halaman, sedangkan heading lainnya digunakan untuk subjudul. Contoh kodenya:

<h1>Judul Utama (H1)</h1>

<h2>Sub Judul (H2)</h2>

<p>Ini adalah contoh paragraf dalam HTML.</p>

3. Memformat Teks (Bold, Italic, Underline)

HTML juga menyediakan beberapa tag untuk memformat teks agar terlihat lebih menarik atau memberi penekanan tertentu. Tag <strong> digunakan untuk membuat teks tebal (bold) sekaligus memberi makna penting pada teks tersebut.

Tag <em> digunakan untuk membuat teks miring (italic), sedangkan <u> digunakan untuk menambahkan garis bawah pada teks. Contohnya seperti ini:

<p>Teks ini memiliki <strong>kata yang ditebalkan</strong>.</p>

<p>Kata ini <em>ditulis miring</em>.</p>

<p>Teks ini memiliki <u>garis bawah</u>.</p>

4. Menambahkan Gambar

Gambar bisa membuat halaman website terlihat lebih menarik. Untuk menampilkan gambar di HTML, kamu bisa menggunakan tag <img>. Tag ini biasanya dilengkapi beberapa atribut penting seperti src untuk lokasi gambar, alt untuk deskripsi gambar, serta width dan height untuk mengatur ukuran gambar. Contoh kodenya:

<img src="gambar-pemandangan.jpg" alt="Pemandangan Pegunungan" width="300" height="200">

5. Menambahkan Link

Link atau hyperlink digunakan untuk mengarahkan pengunjung ke halaman lain, baik di website yang sama maupun website berbeda. Untuk membuat link di HTML, gunakan tag <a> dan tambahkan atribut href yang berisi alamat tujuan link. Contohnya:

<p>Kunjungi <a href="https://www.example.com" target="_blank">website ini</a>.</p>

6. Membuat Daftar dengan Bullet Point

Daftar bullet biasanya digunakan untuk menampilkan informasi dalam bentuk poin-poin. Di HTML, daftar seperti ini dibuat menggunakan tag <ul> (unordered list). Setiap item dalam daftar ditulis menggunakan tag <li>. Contohnya:

<ul>

<li>Poin pertama</li>

<li>Poin kedua</li>

<li>Poin ketiga</li>

</ul>

7. Membuat Daftar Berurutan

Jika kamu ingin membuat daftar langkah-langkah atau urutan tertentu, gunakan tag <ol> (ordered list). Browser akan secara otomatis menambahkan nomor pada setiap item daftar. Contohnya:

<ol>

<li>Buka halaman website</li>

<li>Pilih menu yang tersedia</li>

<li>Ikuti instruksi yang diberikan</li>

</ol>

8. Membuat Tabel

Tabel digunakan untuk menampilkan data dalam bentuk baris dan kolom sehingga lebih mudah dibaca. Untuk membuat tabel di HTML, gunakan tag <table>. Di dalamnya terdapat <tr> untuk baris, <th> untuk judul kolom, dan <td> untuk isi data. Contohnya:

<table border="1">

<tr>

<th>Nama</th>

<th>Usia</th>

<th>Kota</th>

</tr>

<tr>

<td>Agus</td>

<td>20</td>

<td>Yogyakarta</td>

</tr>

</table>

9. Membuat Formulir Sederhana

Formulir biasanya digunakan untuk mengumpulkan data dari pengguna, misalnya pada halaman login atau kontak. Untuk membuat form di HTML, gunakan tag <form> dan tambahkan elemen input di dalamnya. Contoh sederhana:

<form action="/submit">

<label>Nama:</label>

<input type="text">

<br>

<label>Email:</label>

<input type="email">

<br>

<input type="submit" value="Kirim">

</form>

10. Membuat Dropdown

Dropdown digunakan untuk memberikan pilihan yang sudah ditentukan kepada pengguna. Biasanya digunakan pada form pendaftaran atau pengaturan. Elemen ini dibuat menggunakan tag <select> dan <option>. Contohnya:

<label>Pilih Kota:</label>

<select>

<option>Yogyakarta</option>

<option>Jakarta</option>

<option>Purwokerto</option>

</select>

Tips Membuat Kode HTML untuk Pemula

Kalau kamu baru mulai belajar HTML, jangan khawatir kalau awalnya terasa membingungkan. Hampir semua developer web pernah berada di tahap yang sama. Supaya proses belajar jadi lebih mudah, ada beberapa tips sederhana yang bisa kamu terapkan saat menulis kode HTML.

1. Gunakan Indentasi yang Rapi

Saat menulis kode HTML, biasakan untuk membuat indentasi (jarak spasi di awal baris) agar struktur kode terlihat rapi. Indentasi membantu kamu melihat hubungan antar tag dengan lebih jelas, terutama ketika kode sudah mulai panjang.

Dengan kode yang rapi, kamu akan lebih mudah membaca, memperbaiki, dan memahami struktur HTML yang kamu buat. Contohnya seperti ini:

<body>

<h1>Judul Halaman</h1>

<p>Ini adalah paragraf.</p>

</body>

2. Selalu Cek Kode HTML

Saat belajar, sangat wajar kalau terjadi kesalahan penulisan kode. Misalnya lupa menutup tag atau salah menulis atribut. Untuk memastikan kode yang kamu buat sudah benar, kamu bisa menggunakan validator HTML.

Validator akan membantu mengecek apakah struktur HTML sudah sesuai standar atau masih ada error. Dengan begitu, kamu bisa belajar memperbaiki kesalahan lebih cepat dan memahami cara penulisan HTML yang benar.

3. Belajar dari Sumber Terpercaya

Sekarang ada banyak sekali sumber belajar HTML di internet, mulai dari tutorial, video, hingga dokumentasi resmi. Usahakan belajar dari sumber yang terpercaya supaya materi yang kamu pelajari benar dan mudah dipahami.

Salah satu sumber belajar HTML yang sangat populer adalah dokumentasi dari Mozilla melalui situs MDN Web Docs. Di sana kamu bisa menemukan penjelasan lengkap tentang berbagai tag HTML beserta contohnya.

Yuk Mulai Belajar HTML!

HTML adalah dasar dari pembuatan website yang digunakan untuk menyusun struktur halaman web. Dengan memahami berbagai contoh HTML seperti heading, paragraf, link, gambar, tabel, hingga form, kamu sudah memiliki fondasi penting untuk mulai belajar membuat website.

Jika kamu ingin punya website profesional tanpa harus repot belajar coding dari nol, menggunakan jasa Pembuatan Website bisa menjadi solusi yang tepat. Bersama tim dari Whello, kamu bisa mendapatkan website yang tidak hanya terlihat menarik, tetapi juga cepat, responsif, dan mudah digunakan oleh pengunjung.

Tim profesional Whello akan membantu mulai dari perencanaan desain, pengembangan website, hingga memastikan website kamu siap digunakan untuk mendukung bisnis atau personal branding secara maksimal. Jadi, kamu bisa fokus mengembangkan bisnis, sementara urusan website ditangani oleh ahlinya.

Frequently Asked Questions

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman website. Contoh HTML sederhana adalah tag <h1> untuk judul, <p> untuk paragraf, dan <img> untuk menampilkan gambar.

Suka Artikel Ini?