Jika kamu seorang pemula dan baru saja membuat website, pemahaman dasar tentang coding HTML merupakan langkah awal yang wajib dipelajari.
HTML (Hyper Text Markup Language) adalah bahasa pemrograman web dasar yang sering dipraktikkan oleh programmer pemula. Bahasa markup ini digunakan untuk membangun struktur dan konten halaman dengan cara memformat teks dan media di dalamnya.
Menurut W3Techs, 95.1% website yang tersebar di internet telah menggunakan HTML. Artinya, sebagian besar situs dan blog di seluruh dunia tidak lepas dari penggunaan bahasa dasar ini.
Mulai tertarik mempelajarinya? Pada pembahasan kali ini, Dewaweb akan berikan contoh coding HTML website secara jelas dan mudah dimengerti.
Namun, supaya lebih paham, sebaiknya kenali terlebih dahulu beberapa istilah berikut:
-
- Tag – Perintah atau instruksi awal, misalnya tag <bold>.
- Elemen – Keseluruhan kode, dimulai dari tag pembuka sampai penutup, misalnya <h1>Judul Artikel</h1>.
- Atribut/property – Informasi tambahan dalam elemen, misalnya atribut ‘href’.
1. Dokumen HTML
Dokumen HTML adalah teks dasar yang digunakan untuk membuat halaman. Dokumen ini berisi struktur dan konten yang ingin ditampilkan di web browser. Berikut contoh kodenya:
<!DOCTYPE html> <html> <head> <title>Judul Dokumen HTML</title> </head> <body> <h1>Heading</h1> <p>Paragraf.</p> </body> </html>
Dokumen HTML selalu dimulai dengan deklarasi <!DOCTYPE html>. Hal ini bertujuan agar browser dapat mengetahui dokumen yang ditulis dalam HTML.
Tag <html> digunakan sebagai kontainer utama yang menampung semua elemen di dalamnya, mulai dari tag pembuka <html> hingga penutup </html>.
Tag <head> berperan sebagai kepala dokumen yang berisi informasi seperti judul yang ditentukan oleh tag <title>.
Tag <body> memuat isian website atau konten yang akan ditampilkan di halaman.
Semua elemen ditutup dengan tag penutup yang sesuai (</html>, </head>, </body>) agar hasilnya bisa dibaca browser.
2. Heading
Heading digunakan untuk menandai judul dan sub-judul. Coding HTML ini memetakan informasi berdasarkan tingkat prioritas, dari umum ke khusus.
Heading memiliki enam tingkatan, mulai dari <h1> (prioritas tertinggi) hingga <h6> (prioritas terendah). Berikut contoh penggunaannya:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Baca Juga: Cara Menggunakan Heading pada WordPress bagi Pemula
3. Paragraf
Paragraf berfungsi untuk memisahkan teks agar informasi yang panjang dan terstruktur bisa disampaikan dengan baik. Tanpa tag ini, sulit untuk menangkap ide pokok konten karena tidak ada jeda sama sekali. Berikut contoh coding HTML-nya:
<p>teks paragraf pertama</p> <p>teks paragraf kedua</p>
4. Link
Link digunakan untuk membuat eksternal atau internal link yang mengarahkan pengguna ke halaman lain. Elemen ini diawali dengan tag <a> (anchor) dan diberikan atribut href (URL tujuan). Contohnya:
<a href="https://www.dewaweb.com/hosting">Hosting Murah</a>
5. Button
Button adalah sebuah tombol yang bisa diklik oleh pengunjung untuk memicu perintah tertentu. Elemen ini mengandung teks yang ditempatkan setelah tag pembuka <button> dan penutup </button>. Berikut contoh penggunaannya:
<button>Klik Di Sini</button>
6. Garis Horizontal
Contoh coding HTML website selanjutnya adalah garis horizontal. Elemen ini berperan sebagai pemisah visual dalam konten atau transisi elemen tertentu.
Contoh kodenya sangat mudah dipraktikkan. Cukup tambahkan tag <hr> di antara konten yang ingin kamu pisahkan.
<p>paragraf pertama</p> <hr> <p>paragraf kedua</p>
7. Quotes
Quotes merupakan blok kutipan berupa teks yang berasal dari sumber lain dan terpisah dari teks utama. Kamu bisa membuatnya dengan tag <blockquote> seperti contoh di bawah ini.
<blockquote>kutipan</blockquote> <q>teks</q>
8. Bold
Untuk menebalkan teks, kamu bisa menggunakan elemen bold <b> atau strong <strong>. Keduanya sama-sama memberikan penekanan visual pada teks yang ingin ditebalkan.
Meskipun terlihat sama persis, namun mesin pencari memandangnya berbeda. Tag bold hanya memberi efek tebal saja, sedangkan tag strong lebih kuat secara semantik dan berpengaruh terhadap web crawler. Berikut contoh coding HTML bold dan strong:
<b>Hosting dan domain sangat penting bagi website</b> <strong>Hosting dan domain sangat penting bagi website</strong>
9. Italic
Sama halnya bold/strong, terdapat dua kode yang bisa kamu gunakan untuk memiringkan teks, yaitu Italic dan emphasis.
Tag italic <i> digunakan untuk memiringkan saja, sedangkan tag emphasis <em> untuk memiringkan sekaligus memberikan penekanan lebih kuat bagi web crawler. Berikut contoh codingnya:
<i>human error berarti kesalahan dari pengguna<i> <em>human error berarti kesalahan dari pengguna<em>
10. Images
Sesuai namanya, elemen images memungkinkan kamu untuk menambahkan gambar. Caranya mudah, gunakan tag <img> kemudian tambahkan direktori atau URL gambar seperti contoh berikut.
<img src=”direktori atau URL gambar” alt=”teks”>
Atribut src merupakan URL atau jalur file gambar, sedangkan atribut alt adalah deskripsi alternatif yang ditampilkan ketika gambar gagal dimuat.
Baca Juga: 8 Image Hosting Gratis untuk Atasi Disk Space Terbatas
11. Cross-through text
Cross-through text merupakan penekanan informasi berupa teks yang dicoret. Penekanan ini terkadang menjadi salah satu strategi penulis untuk menyampaikan kebenaran atau informasi yang lebih baik, akurat, dan terpercaya.
Untuk membuatnya, kamu dapat menggunakan tag <del> seperti contoh di bawah ini.
<del>contoh teks</del>
12. Font
Contoh selanjutnya adalah mengganti jenis font. Semua teks dokumen HTML bisa kamu ubah sesuka hati, termasuk header dan isi kontennya. Caranya, tambahkan atribut <style> ke dalam tag seperti contoh berikut.
<h2 style=“font-family:Impact;”>teks</h2> <p style=“font-family:Merriweather;”>teks</p>
Baca Juga: Cara Mengganti Font WordPress, Tutorial Praktis dan Mudah
13. Highlighted
Highlighted adalah penekanan visual pada teks tertentu yang dianggap penting. Penggunaannya sama seperti stabilo yang sering kamu pakai.
Caranya sangat mudah, tambahkan elemen <mark> pada teks yang ingin disorot. Contohnya:
<p>ini adalah <mark>contoh highlighted</mark> yang benar</p>
14. Text Colour
Mengatur warna teks dapat dilakukan menggunakan atribut <style>. Namun, sebaiknya cari tahu kode warna HTML terlebih dahulu agar hasilnya sesuai harapan. Berikut contoh coding HTML-nya:
<p style=”color:#ea8743;”>teks</p>
Baca Juga: Alt Text: Pengertian, Cara Membuat, dan Manfaatnya untuk SEO
15. Text Size
Selain warna, kamu juga bisa mengatur ukuran font pada konten atau elemen tertentu. Berikut contoh kode HTML-nya:
<h1 style=”font-size:69px;”>heading text</h1>
16. Text Alignment
Untuk mengatur perataan teks, kamu dapat menambahkan atribut <style>. Gunakan text-align:left untuk rata kiri atau text-align:right untuk rata kanan. Contohnya:
<p style=”text-align:left;”>teks</p> <p style=”text=align:right;”>teks</p>
Baca Juga: 15 Text Editor Terbaik untuk Coding dan Pemrograman
17. Background Color
Warna latar belakang dapat diatur dengan menambahkan atribut bgcolor pada elemen yang mendukungnya. Simak contoh kodenya di bawah ini:
<body bgcolor="d3d3d3"> <h1>header</h1> <p>teks</p> </body>
18. CTA Button
Coding HTML memungkinkan kamu membuat tombol Call-to Action atau CTA Button. Tombol ini berfungsi untuk mendorong pengunjung melakukan tindakan seperti, registrasi, order, hubungi, atau tindakan lainnya. Berikut contoh kode CTA Button:
<div class="button-wrapper"> <a class="button cta-button" href="URL/link tujuan">teks</a> </div>
Baca Juga: Apa Itu CTA? Pengertian, Jenis, dan 7+ Tips Membuatnya
19. Ordered List
Ordered list dibuat untuk mengurutkan poin-poin tertentu berupa nomor, alfabet, atau huruf romawi. Caranya, kamu bisa menggunakan elemen <ol> seperti contoh berikut ini.
<ol> <li> Poin 1 </li> <li> Poin 2 </li> </ol>
Tag <ol> mengelompokkan informasi yang ingin diurutkan, sementara tag <li> membuat daftar poinnya.
20. Unordered List
Unordered list memungkinkan kamu membuat daftar poin atau item tanpa urutan (kebalikan dari ordered list). Elemen ini biasanya ditandai dengan simbol tertentu seperti format bullet. Berikut contoh coding HTML website-nya:
<ul> <li> Item 1 </li> <li> Item 2 </li> </ul>
21. Superscript
Superscript digunakan untuk mengangkat teks ke atas seperti membuat eksponen atau catatan kaki. Pembuatannya terbilang mudah, cukup gunakan tag <sup> seperti contoh di bawah ini.
<sup>TM</sup>
Baca Juga: Mockup: Arti, Fungsi, Contoh, & Mengapa Penting bagi Desainer
22. Subscript
Subscript adalah kebalikan dari superscript di mana teks akan diturunkan ke bagian bawah seperti membuat indeks atau penulisan senyawa kimia. Berikut contoh kodenya:
<sub>tags</sub>
23. Tabel
Tabel pada dasarnya terdiri dari baris dan kolom. Jadi, kamu harus bisa membuat keduanya terlebih dahulu sebelum memikirkan isi tabelnya.
Sebagai permulaan, cobalah buat tabel sederhana menggunakan coding berikut:
<table border="1"> <tr> <td>Cell 1A</td> <td>Cell 1B</td> </tr> <tr> <td>Cell 2A</td> <td>Cell 2B</td> </tr> </table>
Baca Juga: Panduan Lengkap Cara Membuat Tabel di WordPress
24. Form
Coding HTML yang terakhir adalah form. Untuk membuat formulir beserta labelnya, kamu harus menggunakan tag <form>, <label>, dan <input>. Contoh kodenya seperti di bawah ini:
<form> <label>Nama Pengguna</label><br> <input type="text"><br> <label>Kata Sandi</label><br> <input type="password"><br> </form>
Baca Juga: Cara Membuat Google Form dan Membagikannya dengan Mudah
Kesimpulan
Setelah melihat contoh coding HTML website di atas, kamu tentu sedikit lebih mengerti cara membuat elemen sederhana yang umum digunakan.
Perlu diingat bahwa praktik adalah kunci utama untuk menambah pemahamanmu tentang HTML. Jadi, cobalah membuat project kecil menggunakan contoh yang telah kamu pelajari sebelumnya.
Sudah siap membuat website sendiri? Jika iya, jangan lupa gunakan layanan hosting dan domain berkualitas dari Dewaweb.
Dewaweb menyediakan paket hosting handal dan stabil untuk mendukung performa website kesayanganmu. Selain itu, kami juga menawarkan domain gratis yang bisa diperoleh dengan berlangganan hosting Dewaweb. Tunggu apalagi? Yuk, beli hosting Dewaweb sekarang!
