HyperText Markup Language, atau yang lebih populer disebut HTML, adalah bahasa markup yang
digunakan untuk menyusun struktur halaman web. Anda bisa mengatur teks, menambahkan gambar
dan link, hingga membuat formulir.
Meskipun membutuhkan coding, HTML sebenarnya mudah dipelajari karena bukan merupakan bahasa
pemrograman. Tag-tag HTML juga cukup jelas, karena memiliki struktur yang sederhana dan teratur.
Contoh Kode HTML
Untuk mempelajari HTML, Anda tidak perlu menguasai algoritma pemrograman atau logika seperti
variabel dan syntax yang rumit. Hasil kode HTML juga akan langsung terlihat sehingga Anda bisa
menyesuaikannya dengan lebih mudah.
1. Struktur Dasar HTML
Dalam HTML, ada struktur dasar yang harus Anda gunakan agar halaman web yang dibuat bisa
berfungsi. Struktur ini akan menjadi kerangka halaman sehingga web browser bisa menampilkannya
dengan benar.
Beberapa tag utama yang menjadi struktur dasar HTML adalah <html>, <head>, dan <body>. Semua
tag ini harus berpasangan untuk membuka dan menutup setiap bagiannya, yang ditandai dengan garis
miring. Misalnya, tag <head> harus ditutup dengan tag </head>.
Berikut contoh penggunaannya:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Struktur Dasar HTML</title>
</head>
<body>
<p>Halo, dunia!</p>
</body>
</html>
Pada contoh ini, kode dimulai dengan <!DOCTYPE html>. Tag ini memberi tahu web browser bahwa
dokumen yang dimuat adalah HTML5.
Kemudian, tag <html> mencakup semua elemen yang ada di halaman. Setelah itu ada bagian <head>
yang memuat informasi tambahan, seperti <title> untuk judul yang nantinya akan muncul di tab
browser.
Nah, bagian <body> adalah tempat Anda memasukkan semua konten utama website, seperti teks,
gambar, dan elemen lainnya. Perlu diingat bahwa hampir semua contoh kode berikutnya dalam tutorial
ini perlu disertakan dalam tag <body> dan </body> agar bisa berfungsi.
Dari contoh pertama ini, berikut hasil coding HTML kami ketika dibuka di browser:
tampilan contoh html halo dunia di chrome
2. Heading dan Paragraf
Berikutnya, ada heading dan paragraf yang membentuk struktur teks di halaman web. Dengan dua
elemen ini, Anda bisa membuat teks dengan format judul, subjudul, dan isi paragrafnya.
Heading dalam HTML memiliki 6 tingkat yang dimulai dari tag <h1> untuk judul utama, sampai <h6>
untuk subjudul terkecil. Sementara itu, tag untuk paragraf adalaj <p>. Jangan lupa untuk menyertakan
tag penutupnya juga.
Contoh penggunaan tag heading dan paragraf adalah sebagai berikut:
<h1>Judul Utama (H1) di Bagian Ini</h1>
<h2>Sub Judul (H2) Ada di Sini </h2>
<p>Bagian ini berisi teks paragraf yang bisa Anda isi dengan konten tulisan.</p>
Perlu diperhatikan bahwa tag <h1> biasanya hanya digunakan sekali sebagai judul utama. Heading
lainnya boleh digunakan sesuai kebutuhan untuk subjudul. Anda akan melihat hasil seperti ini saat
mencoba kode di atas:
tampilan hasil dari contoh coding html untuk heading dan paragraf
3. Memformat Teks dengan Bold, Italic, Underline
HTML memiliki tag <strong> untuk teks tebal atau bold, <em> untuk teks miring atau italic, serta <u>
untuk garis bawah. Sebenarnya ada juga tag <b> untuk menebalkan teks dalam HTML, tapi tag ini hanya
mengubah tampilan teks tanpa ada makna khusus.
Tag <strong> memiliki fungsi semantik yang menekankan bahwa teks dalam tag tersebut bersifat
penting dan perlu ditekankan. Tag ini digunakan oleh crawler mesin pencari untuk SEO, dan oleh aplikasi
pembaca layar untuk memberikan penekanan khusus.
Ini contohnya:
<p>Baris ini memiliki <strong>kata-kata yang diformat tebal dengan tag strong</strong>.</p>
<p>Sementara itu, kata-kata di baris ini <em>diformat dengan tag em</em> agar miring.</p>
<p>Di baris ini, <u>ada teks yang diformat underline</u> untuk menambahkan garis bawah.</p>
Berikut hasil percobaan kami:
4. Memasukkan Gambar di Halaman Web
Gambar merupakan elemen penting yang membuat halaman web Anda terlihat lebih menarik. Untuk
menambahkan gambar di HTML, Anda hanya perlu menggunakan tag <img>.
Namun, perlu diingat bahwa Anda tidak bisa langsung memasukkan file gambar ke HTML. Anda perlu
menyimpannya dulu di suatu lokasi, lalu merujuknya menggunakan atribut seperti src dan alt agar
gambar bisa ditampilkan dengan benar.
<img src="[Link]" alt="Pemandangan Indah di Pegunungan" width="300"
height="200">
Pada contoh di atas, src menunjukkan lokasi file atau URL gambar. Anda bisa memasukkan link
gambar dari internet atau alamat dari folder lokal di perangkat Anda.
Sementara itu, tag alt digunakan untuk menuliskan deskripsi gambar. Teks ini akan muncul kalau gambar
gagal dimuat di web browser, serta membantu menjelaskan isi gambar kepada pengunjung yang
memiliki gangguan penglihatan.
Di bagian akhir, kami menambahkan tag ukuran width dan height untuk mengatur lebar dan tinggi
gambar sesuai kebutuhan. Hasilnya adalah sebagai berikut:
tampilan contoh gambar yang dimasukkan dalam html
5. Menambahkan Link dalam Teks
Link yang diletakkan dalam teks sebagai hyperlink akan memudahkan pengguna untuk beralih ke
halaman atau website lainnya.
Apabila Anda ingin menambahkan hyperlink dalam teks HTML, gunakan tag <a> lalu tambahkan
atribut href untuk menentukan tujuan link. Untuk membuat link terbuka di tab baru, tambahkan
target="_blank".
Contoh kodenya adalah sebagai berikut:
<p>Dalam contoh ini, kami menambahkan <a href="[Link] target="_blank">link
dalam teks</a> yang bisa diklik dan mengarah ke halaman lain.</p>
Teks di antara tag <a> dan </a> akan menjadi hyperlink. Apabila mengklik anchor text tersebut, Anda
akan diarahkan ke link yang tercantum setelah atribut href.
6. Mencantumkan Daftar dengan Bullet Poin
Bullet point berfungsi untuk mencantumkan daftar dengan simbol tertentu, biasanya berupa
lingkaran hitam. Anda mungkin membutuhkannya saat menulis konten website, misalnya untuk
membuat checklist seperti di bawah ini:
Ini adalah poin pertama dalam daftar.
Ini adalah poin kedua dalam daftar.
Ini adalah poin ketiga dalam daftar.
Di HTML, Anda bisa membuat daftar tersebut menggunakan tag <ul> yang berasal dari kata unordered
list, lalu menambahkan setiap poin menggunakan tag <li>.
Berikut contoh HTML untuk membuat daftar dengan bullet poin:
<ul>
<li>ni adalah poin pertama dalam daftar.</li>
<li>ni adalah poin kedua dalam daftar.</li>
<li>ni adalah poin ketiga dalam daftar.</li>
</ul>
Hasilnya akan terlihat seperti ini saat diakses menggunakan web browser:
7. Membuat Daftar Berurutan
Nah, kalau perlu membuat daftar berurutan, misalnya untuk menjelaskan langkah-langkah dalam
artikel tutorial, Anda bisa menggunakan tag <ol>. Tag ini merupakan singkatan dari kata ordered list,
yang akan secara otomatis menomori item daftar saat dirender oleh browser.
Untuk menambahkan item daftar, gunakan tag <li> juga. Apabila ingin menggunakan urutan selain
angka, cukup tambahkan atribut type= dalam tag <ol> sesuai daftar berikut:
<ol type=”1″> untuk daftar dengan angka.
<ol type=”A”> untuk daftar dengan huruf besar.
<ol type=”a”> untuk daftar dengan huruf kecil.
<ol type=”I”> untuk daftar dengan angka romawi besar.
<ol type=”i”> untuk daftar dengan angka romawi kecil.
Misalnya, coba kode berikut ini:
<ol>
<li>Pertama, buka hPanel dan pilih menu website.</li>
<li>Klik tombol <strong>Dashboard</strong> di samping website Anda.</li>
dashboard, temukan dan pilih <strong>File
<li>Di bagian
Manager</strong>.</li>
</ol>
8. Membuat Tabel dengan Baris dan Kolom
Tabel bisa sangat berguna ketika Anda perlu menyajikan data dalam tampilan yang lebih terstruktur.
Menggunakan kolom dan baris, informasi yang Anda sajikan akan lebih mudah dibaca.
HTML menyediakan tag <table> untuk mengaktifkan elemen tabel. Kemudian, Anda bisa
menggunakan tag berikut ini:
<tr> untuk menambahkan baris
<th> untuk menandai judul kolom, dan
<td> untuk mengisi data dalam sel.
Mari lihat contoh kode HTML untuk tabel sederhana berikut ini:
<table border="1">
<tr>
<th>Nama</th>
<th>Usia</th>
<th>Asal</th>
</tr>
<tr>
<td>Agus</td>
<td>20</td>
<td>Yogyakarta</td>
</tr>
<tr>
<td>Budi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Cantika</td>
<td>20</td>
<td>Purwokerto</td>
</tr>
</table>
Dalam contoh kode di atas, kami menambahkan atribut border="1" untuk memberi garis batas pada
tabel. Tambahkan angka yang lebih besar untuk membuat garis yang lebih tebal.
Kemudian, tag <th> membuat judul kolom yang terdiri dari Nama, Usia, dan Asal. Untuk membuat baris
baru, kami menggunakan tag <tr>, lalu mengisi data per kolom menggunakan tag <td>. Berikut hasilnya
saat kode ini dicoba:
9. Membuat Formulir Sederhana
Sekarang saatnya Anda mempelajari contoh kode yang sedikit lebih rumit daripada sebelumnya, yaitu
membuat formulir. Biasanya, formulir dibutuhkan untuk halaman web yang perlu mengumpulkan
data pengguna, seperti halaman login.
Untuk memulainya, gunakan tag <form> yang mengaktifkan fungsi untuk menambahkan berbagai
elemen input, seperti kotak teks, radio button, dan tombol.
Berikut contoh kode HTML sederhana yang bisa Anda coba untuk membuat formulir:
<form action="/submit">
<label for="name">Nama Pengguna:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Kata Sandi:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Login">
</form>
Menggunakan kode tersebut, Anda bisa membuat form login sederhana yang menampilkan kolom
Nama Pengguna, Kata Sandi, dan tombol Login.
Atribut action di baris pertama menunjukkan lokasi yang menjadi tujuan pengiriman data saat tombol
Login diklik. Nantinya, lokasi ini perlu diganti dengan endpoint yang berupa file atau handler untuk
validasi kredensial pengguna.
Kemudian, <label> berfungsi untuk mengidentifikasi setiap kolom input. Di bagian akhir, ada <input
type=”submit”> yang menampilkan tombol untuk mengirimkan data pengguna. Hasilnya akan menjadi
seperti ini:
tampilan contoh form login sederhana
10. Menambahkan Daftar Dropdown
Daftar drop-down berfungsi untuk menyediakan pilihan dengan opsi yang sudah ditentukan. Elemen
ini berguna untuk membatasi pilihan pengguna sesuai ketersediaan fitur, misalnya saat memilih
bahasa website.
Anda bisa membuat drop-down di HTML menggunakan tag <select>, lalu membuat item daftarnya
menggunakan tag <option>.
Berikut contoh kodenya:
<label for="kota">Pilih Kota:</label>
<select id="kota" name="kota">
<option value="yogyakarta">Yogyakarta</option>
<option value="jakarta">Jakarta</option>
<option value="purwokerto">Purwokerto</option>
</select>
Dalam contoh ini, atribut id dan name dalam tag <select> diperlukan untuk identifikasi. Di bawahnya,
setiap tag <option> memiliki atribut value untuk menentukan nilai yang dikirim apabila opsi tersebut
dipilih.
Cobalah contoh HTML di atas dan sesuaikan isinya dengan opsi Anda sendiri. Dari contoh kami, browser
akan menampilkan drop-down kota dengan pilihan Yogyakarta, Jakarta, dan Purwokerto seperti berikut:
11. Membuat Kotak Centang
Saat perlu menampilkan beberapa opsi untuk dipilih oleh pengguna, Anda bisa menambahkan kotak
centang. Dengan kotak centang, pengguna bisa memilih lebih dari satu opsi yang tersedia.
Elemen ini bisa Anda tambahkan di formulir atau survei, misalnya untuk pilihan hobi. Coba contoh
kode berikut ini untuk membuat kotak centang:
<p>Pilih hobi Anda:</p>
<input type="checkbox" id="membaca" name="hobi" value="membaca">
<label for="membaca">Main Game</label><br>
<input type="checkbox" id="berkebun" name="hobi" value="berkebun">
<label for="berkebun">Menulis</label><br>
<input type="checkbox" id="menulis" name="hobi" value="menulis">
<label for="menulis">Menonton Film</label>
Atribut value dalam setiap pilihan akan dikirim sebagai input kalau opsinya dipilih. Sementara itu, atribut
name merupakan pengidentifikasi untuk kategori “hobi”. Menggunakan kode ini, Anda bisa
menyediakan beberapa opsi yang bisa dipilih sekaligus.
12. Menambahkan Radio Button
Cara kerja radio button mirip dengan kotak centang, yaitu untuk menyediakan opsi yang bisa dipilih,
tapi pengguna hanya bisa memilih satu opsi saja. Elemen ini cocok untuk pilihan tunggal, seperti jenis
kelamin rentang gaji.
Untuk menambahkan radio button di HTML, gunakan kode berikut ini:
<p>Pilih jenis kelamin:</p>
<input type="radio" id="laki-laki" name="gender" value="laki-laki">
<label for="laki-laki">Laki-laki</label><br>
<input type="radio" id="perempuan" name="gender" value="perempuan">
<label for="perempuan">Perempuan</label>
Sama seperti elemen kotak centang, atribut name merupakan pengidentifikasi untuk gender, dan value
merupakan nilai yang akan dikirim saat opsinya dipilih.
13. Memasukkan Video dan Audio
Anda juga bisa menambahkan media interaktif seperti video dan audio menggunakan HTML untuk
langsung menyisipkannya di halaman web, loh.
Untuk video, gunakan tag <video>, sedangkan untuk audio, gunakan tag <audio>. Kedua tag ini
memiliki atribut controls agar pengguna bisa memutar atau menghentikan media sesuai keinginan.
Berikut contoh kode HTML sederhana untuk menambahkan video dan audio:
<video width="320" height="240" controls>
<source src="video-sample.mp4" type="video/mp4">
Browser Anda tidak mendukung tag video.
</video>
<audio controls>
<source src="audio-sample.mp3" type="audio/mpeg">
Browser Anda tidak mendukung tag audio.
</audio>
Dalam contoh ini, Anda bisa mengganti “video-sample.mp4” dan “audio-sample.mp3” dengan file media
yang ingin Anda tambahkan.
Namun, perlu diingat bahwa kalau Anda menambahkan media dari komputer lokal, file tersebut tidak
akan bisa diakses ketika ditambahkan pada website. File media tersebut harus dihosting di server dulu
agar bisa tersedia secara online.