Bagi pemula dalam membangun website, memahami tentang coding HTML termasuk bekal yang wajib. Maka contoh coding HTML website dapat membantu dalam menguasai keterampilan tersebut.
Melansir dari halaman MDN Web Doc, HTML adalah kode yang digunakan untuk struktur suatu halaman web dan konten di dalamnya.
Bahasa pemrograman HTML digunakan oleh lebih dari 90% website di internet. Mengingat banyaknya penggunaan bahasa pemrograman ini, maka tidak heran jika banyak pemula yang mempelajari HTML.
Contoh Coding HTML Website
HTML terdiri dari rangkaian elemen, yang mana bisa kamu gunakan untuk melingkupi bagian-bagian yang berbeda dari konten untuk membuatnya tampil atau berfungsi dengan cara tertentu.
Selain termasuk coding yang wajib diketahui pemula, HTML juga merupakan bahasa pemrograman paling umum dalam pembuatan website. Terlebih lagi, ada banyak keuntungan yang bisa kamu dapatkan dengan memahaminya.
Pasalnya, dengan menguasai HTML coding, kamu bisa membangun website sendiri, membuat template, juga berbagai karya lain yang dapat dijual. Menarik, kan, Sob?
HTML juga termasuk bahasa pemrograman yang cukup mudah. Maka, tidak ada alasan untuk takut belajar coding.
Nah, untuk memahami lebih lanjut, mari cermati contoh coding HTML website berikut:
1. Dokumen HTML
Dokumen HTML merupakan coding dasar yang digunakan untuk membuat suatu halaman. Isi dokumen ini mencakup struktur dan konten yang nantinya tampil pada website.
Berikut contoh coding HTML dokumen:
<!DOCTYPE html>
<html>
<body>
<h1>Heading Pertama</h1>
<p>Bagian ini diisi paragraf pertama.</p>
</body>
</html>
Bagian awal dari dokumen HTML yaitu <!DOCTYPE html> berfungsi untuk menginfokan kepada browser bahwa penulisan dokumen menggunakan HTML.
Berikutnya terdapat tag <html> yang merupakan elemen yang meliputi semua konten pada seluruh halaman. Elemen ini juga mengandung atribut lang yang mengatur bahasa utama dalam dokumen.
Setelah itu, terdapat tag <head> yang berperan sebagai kontainer hal-hal yang masuk ke halaman HTML tapi tidak merupakan konten untuk audiens. Hal-hal tersebut meliputi keyword dan deskripsi halaman.
Tag <body> memuat bagian isi atau konten dari halaman web. Konten web dapat tersusun dari heading, paragraf, gambar, tabel, dan sebagainya.
2. Heading
Elemen heading menandai judul dan sub judul yang terdapat pada website. Heading membantu memetakan informasi dari yang umum ke informasi yang lebih khusus, sehingga memudahkan pengunjung untuk menemukan info yang mereka cari.
Heading juga membantu meningkatkan SEO karena memungkinkan Google untuk mengenali struktur dan konteks konten dengan lebih baik.
Terdapat enam tingkatan heading, mulai dari yang tertinggi <h1> hingga terendah <h6>. H1 digunakan untuk menunjukkan judul konten, sementara h2 hingga h6 merupakan sub judul.
Berikut contoh coding HTML website untuk heading:
<h1>Judul Konten</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
3. Paragraf
Dalam konten website, paragraph akan membuat teks menjadi lebih terstruktur. Selain itu, paragraph juga membantu pengunjung untuk memahami informasi yang disampaikan dengan lebih mudah.
Coba bayangkan, Sob? Pastinya akan menjemukan dan sulit untuk memahami satu halaman penuh teks yang penulisannya tanpa terpisah paragraf.
Adapun penulisan coding paragraf yaitu menggunakan tag <p>. Berikut contohnya:
<p>Bagian ini adalah paragraf pertama konten web.</p>
<p>Ini adalah paragraf kedua dari konten yang sama.</p>
4. Link HTML
Link akan mengarahkan pembaca ke halaman lain. Penulisan HTML link menggunakan awalan tag <a>. Kemudian tujuan link diawali dengan atribut href.
Berikut contoh coding HTML link:
<a href=”https://www.jagoanhosting.com”>Website Jagoan Hosting</a>
5. Gambar HTML
Pencantuman gambar menggunakan tag <img>. Kemudian, kamu bisa menambahkan sumber (src), teks alternatif (alt), lebar (width), dan tinggi (height) dengan attributes.
Berikut contoh coding gambar:
<img src=”logo-jagoan-hosting.jpg” alt=”logo jagoan hosting” width=”110″ height=”34″>
6. Button
Button merupakan tombol yang bisa pembaca klik untuk memasukkan perintah tertentu. Sementara itu, elemen button menggunakan tag <button>. Berikut contohnya:
<button>Hubungi Sekarang</button>
7. Bold
Contoh coding HTML website sederhana selanjutnya adalah mengenai format teks.
Untuk menampilkan teks tebal, gunakan tag <b> untuk bold atau tag <strong>. Mari lihat contohnya:
<body>
<h1>Cara Menulis Teks Tebal</h1>
<p>
<strong>Format teks bold</strong> digunakan untuk memberi menonjolkan bagian teks tertentu. Contohnya, <b>Perhatikan catatan berikut</b>.
</p>
</body>
8. Italic
Italic adalah format untuk teks miring, biasanya untuk menegaskan kata asing atau istilah baru. Penulisan italic menggunakan tag <i> (italic) atau tag <em> (emphasis). Berikut contohnya:
<body>
<h1>Penulisan Teks Miring</h1>
<p>
Penggunaan <i>italic</i> berfungsi untuk menunjukkan kata asing. Contohnya, belajar <em>coding</em>.
</p>
</body>
9. Garis Bawah
Garis bawah berperan untuk menandai teks yang memiliki arti penting. Pembuatan garis bawah pada HTML menggunakan tag <u> (underline) atau tag <ins> (insert).
Berikut contohnya:
<body>
<h1>Menyisipkan Garis Bawah di HTML</h1>
<p>
<u>Format teks</u> penting untuk kamu perhatikan karena membuat konten lebih menarik.
</p>
</body>
10. Font
Elemen ini digunakan untuk menentukan jenis font pada website. Kamu dapat mengubahnya dengan menambahkan atribut <style>, contohnya:
<p style=“font-family:Arial;”>teks</p>
11. Text Colour
Untuk mengatur warna teks, kamu bisa menggunakan tag <font> tertutup. Kemudian tambahkan nama warna atau hex code/rgb code. Contohnya:
<body>
<font color=”rgb(0,255,0)”>Font color example using color attribute</font>
</body>
Baca juga: Daftar Kode Warna CSS dan HTML
12. Text Size
Atribut ini mengatur ukuran spesifik font, dengan nilai mulai dari terkecil ke terbesar yaitu 1 hingga 7. Ini contoh pengaturan font size HTML:
<body>
<font size=”6″>Tulisan ini menggunakan font dengan size 6</font>
</body>
13. Img Align Attribute
Atribut ini menentukan penempatan gambar pada konten web. Terdapat lima jenis align, yaitu right (kanan), left (kiri), top (atas), bottom (bawah), dan middle (tengah).
Contoh penulisan:
<body>
<p>
Perhatikan gambar berikut. <img src=” gambarbaju.png” alt=” desain dan ukuran ” align=”right” /></p>
</body>
14. Ordered List
Ordered list berisi daftar dengan urutan tertentu, seperti angka atau alfabet. Sementara, pembuatannya menggunakan tag <ol>. Contohnya yaitu:
<ol>
<li> Step 1 </li>
<li> Step 2 </li>
</ol>
15. Unordered List
Berbeda dari ordered list, unordered list menampilkan daftar tanpa urutan tertentu. Elemen ini menggunakan tag <ul>. Biasanya, list ini menggunakan format bullet. Berikut contohnya:
<ul>
<li> Produk 1 </li>
<li> Produk 2 </li>
</ul>
16. Subscript
Subscript yaitu penulisan teks pada bagian bawah. Elemen ini dapat kamu gunakan untuk menuliskan indeks, contoh codingnya:
<sub>tags</sub>
17. Superscript
Superscript yaitu penulisan teks pada bagian atas, seperti pangkat atau eksponen. Contoh codingnya:
<sup>TM</sup>
18. CTA Button
Button ini khusus untuk CTA (call to action). Fungsinya adalah untuk mendorong pembaca melakukan tindakan tertentu, seperti mendaftar, order, atau membeli.
Berikut contoh coding HTML website penjualan:
<div class=”button-wrapper”>
<a class=”button cta-button” href=”URL/link tujuan”>Dapatkan Item Ini Sekarang</a>
</div>
19. Body Background
Elemen ini berfungsi untuk menambahkan gambar latar. Gunakan tag <body background>. Kemudian, tambahkan link gambar sebagai attribute.
Berikut contoh coding HTML yang sudah jadi untuk menambahkan gambar latar:
<html>
<body background=”https://www.jagoanhosting.com/wp-content/uploads/2023/05/img-hero-jh-1536×981.png”>
</body>
</html>
20. Tabel
Pembuatan tabel memerlukan penyusunan kolom dan baris. Berikut contoh coding HTML tabel sederhana dengan dua kolom dan dua baris:
<table>
<tr>
<th>Bulan</th>
<th>Saldo</th>
</tr>
<tr>
<td>Januari</td>
<td>100.000</td>
</tr>
</table>
21. Form
Terakhir, coding HTML website sederhana adalah untuk membuat form.
Form digunakan untuk mengumpulkan data dari pengunjung atau pengguna. Sementara, untuk membuat form (formulir) menggunakan tag <form>, <label>, dan <input>.
Berikut contoh HTML form sederhana:
<form>
<label for=”namad”>Nama Depan:</label><br>
<input type=”text” id=”namad” name=”namad”><br>
<label for=”namab”>Nama Belakang:</label><br>
<input type=”text” id=”namab” name=”namab”>
</form>
Bikin Website Lebih Mudah Didukung Banyak Bahasa Pemrogramman
Setelah kamu mengetahui puluhan contoh coding dengan menggunakan bahasa pemrogramman HTML, kini kamu bisa mulai praktik untuk coding di website secara langsung.
Kamu bisa mulai dengan memilih hosting terbaik dengan support terbaik untuk para developer dengan didukung bahasa pemrogramman populer seperti PHP, Laravel, SSH Acess, GIT, Phyton dan Node JS.
Dapatkan hosting dengan support terbaik untuk para developer di Cloud Hosting dari Jagoan Hosting.
FAQ
Apa itu HTML di coding?
HTML adalah markup language yang mengkode struktur web.
Bagaimana cara kerja HTML?
HTML bekerja dengan melingkupi bagian-bagian yang berbeda dari konten dengan elemen HTML, yang mana membuat bagian tersebut memiliki tampilan atau fungsi spesifik.
Apa saja struktur dasar HTML?
Struktur dasar HTML terdiri atas tag DOCTYPE, tag html, tag head, dan tag body. Kamu dapat melihat struktur dasar tersebut pada contoh coding HTML website dokumen HTML.
