Kumpulan Contoh Coding HTML Dasar, Pemula Wajib Tahu!
Oleh
Ratna Patria
Bagi orang yang sudah familiar dengan dunia pemrograman, khususnya pemrograman web, sudah pasti tak asing dengan coding HTML.
Daftar Isi
Dengan coding HTML, kamu yang bahkan seorang pemula bisa membangun sebuah website pribadi atau website untuk dijual.
Tak hanya itu, kamu juga bisa membuat template website yang memiliki harga jual dari murah hingga mahal.
Oleh karena itu, artikel ini akan membuat kamu belajar apa saja contoh HTML yang sering ditemui atau digunakan oleh para web developer.
Eits, supaya proses belajar coding HTML semakin komplit, pastikan kamu sudah download dan instal text editor untuk menulis coding HTML ya.
Kamu bisa gunakan Notepad++ atau Visual Studio Code.
<!DOCTYPE html>
Kamu memerlukan tag ini di awal setiap dokumen HTML yang dibuat.
Coding HTML ini akan memastikan browser tahu bahwa website itu HTML dan bahkan HTML5, versi terbaru.
Meskipun ini sebenarnya bukan tag HTML, tapi tag ini juga penting untuk diketahui.
<html>
Coding HTML yang satu ini adalah tag wajib yang memberi tahu browser bahwa sedang membaca HTML.
Tag <html> berada tepat setelah tag DOCTYPE, dan kamu perlu menutupnya dengan tag </html> tepat di akhir file program.
Segala sesuatu yang lain dalam dokumen Anda berada di antara tag-tag ini.
<head>
Tag <head> memulai bagian header file HTML. Coding HTML yang masuk ke sini tidak muncul di halaman web kamu.
Sebaliknya, tag ini berisi metadata untuk mesin pencari, dan info untuk browser. Untuk halaman dasar, tag <head> nantinya hanya akan berisi judul halaman web.
Tetapi ada beberapa contoh HTML syntax lain yang dapat kamu masukkan yang akan kita bahas sebentar lagi.
Baca juga : coding adalah penjelasan lengkap
Tag Judul (<title>)
Tag ini menetapkan judul halaman web kamu dengan memasukkan atau menuliskan judul halaman web ke antara tag <title> dan menutupnya dengan tag </title>.
Itulah nama yang akan ditampilkan sebagai judul tab saat dibuka di browser.
Contoh HTML:
<head>
<title>Hello World</title>
</head>
Tag Metadata (<meta>)
Seperti tag <title>, metadata diletakkan di area header halaman web.
Metadata digunakan oleh search engine dan merupakan informasi tentang apa yang ada di halaman web.
Ada beberapa contoh coding HTML website untuk metadata yang berbeda, namun berikut ini beberapa value dari tag yang paling umum digunakan.
- description: deskripsi dasar halaman web
- keywords: pilihan kata kunci yang berlaku untuk halaman web
- author: Penulis halaman web
- viewport: Tag untuk memastikan halaman web terlihat bagus di semua perangkat.
Contoh HTML:
<meta name="description" content="Contoh Coding HTML Website">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="Admin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tag ‘viewport’ harus selalu memiliki ‘width=device-width, initial-scale=1.0’ untuk memastikan halaman web ditampilkan dengan baik di perangkat seluler dan desktop.
Tag Body (<body>)
Setelah kamu menutup bagian header – dari !DOCTYPE hingga meta – kamu mulai masuk ke badan coding HTML.
Kamu awali dengan tag <body> dan menutupnya dengan tag </body> tepat di akhir file HTML sebelum tag penutup </html>.
Semua konten halaman web kamu akan berada di antara tag-tag ini.
Contoh HTML:
<body>
Semua konten halaman web akan berada di antara tag ini.
</body>
Tag body memiliki atribut yang opsional digunakan sesuai kebutuhan website.
Beberapa atribut tag body adalah:
- background: menambahkan background dengan gambar tertentu
Contoh HTML:
<html>
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
</body>
</html>
- bgcolor: memberikan warna background untuk dokumen HTML.
Contoh HTML:
<body bgcolor="#afafaf">
<h1>Website ini memiliki background berwarna.</h1>
</body>
*Catatan:
HTML5 tidak mendukung format atribut <body bgcolor>. Sebaiknya kamu gunakan style CSS untuk memberi warna pada background dengan contoh coding HTML website berikut:
<body style="background-color: rgb(251, 235, 217)">
Tag Heading (<h1> sampai <h6>)
Tag <h1> mendefinisikan header level satu di halaman web.
Coding HTML ini biasanya digunakan untuk membuat judul dan idealnya hanya ada satu di setiap halaman.
Lalu tag <h2> mendefinisikan header level dua untuk header bagian, tag <h3> untuk sub-header level-tiga, dan seterusnya hingga <h6>.
Semakin besar angka heading, semakin kecil ukuran tulisan.
Contoh HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Tag Paragraf (<p>)
Coding HTML paragraf berguna ketika kamu ingin memulai paragraf baru.
Tag ini biasanya menyisipkan dua jeda baris.
Contoh HTML:
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
Kamu juga bisa menggunakan style CSS di tag paragraf coding HTML, contohnya:
<p style="font-size: 150%;">Tulisan ini berukuran 50% lebih besar.</p>
Tag Break (<br>)
Coding HTML ini berfungsi memberikan jeda baris (break) tunggal antar paragraf atau antar kalimat.
Tag ini bekerja dengan cara yang sama dengan tag <hr>.
Hanya saja tag <hr> memberikan garis horizontal pada halaman web sehingga lebih bagus untuk memisahkan bagian teks.
Contoh HTML:
<p>Baris pertama.<br>Baris kedua.</p>
Tag Image/Gambar (<img>)
Jika kamu ingin menambahkan gambar di halaman web, kamu harus menggunakan tag gambar. Coding HTML tag ini biasanya akan menggunakan atribut ‘src’.
Atribut src akan merujuk ke lokasi file gambar pada dokumen komputer atau web directory.
Tag img juga biasanya disertai atribut ‘alt’.
Fungsi ‘alt’ adalah penjelasan alternatif gambar jika gambar tidak dapat ditampilkan karena masalah teknis pada browser, seperti koneksi lambat atau pengguna masih menggunakan browser versi lama.
Contoh HTML:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="gambar burung">
Tag Divisi (<div>)
Elemen divisi konten HTML (div) adalah wadah tingkat blok umum untuk “konten aliran”.
Konten aliran adalah contoh coding HTML website yang berisi teks atau konten yang melengkapi halaman web.
Elemen anchor, blockquote, dan title dianggap sebagai konten aliran.
Dalam konsep pemrograman backend, elemen div membantu mengatur kode ke dalam bagian yang ditandai dengan jelas.
Di ujung depan, mereka menambahkan jeda baris sebelum dan sesudah konten mereka.
Jika tidak, mereka tidak mempengaruhi konten atau tata letak halaman kecuali ditata dengan CSS.
Contoh HTML:
<div>
<img src="https://assets.codepen.io/6093409/sprocket.svg" alt="the HubSpot sprocket logo"/>
</div>
Tag div juga sering ditemui di versi HTML selain HTML5 dengan atribut align sehingga contoh coding HTML websitenya seperti ini:
<div align="left">
--Isi konten--
</div>
Tag Span (<span>)
Elemen rentang atau span HTML adalah wadah inline umum untuk “frasa konten”.
Frasa konten mengacu pada teks dan markup apa pun yang dikandungnya, seperti tag <abbr> dan <audio>.
Tag span tidak secara inheren mewakili apa pun, tetapi digunakan untuk mengelompokkan frasa konten karena dua alasan.
Yang pertama adalah menerapkan informasi gaya ke bagian teks tertentu.
Misalnya, jika kamu membuat drop caps, maka kamu dapat membungkus huruf pertama dari paragraf pembuka setiap bagian artikel dalam tag span.
Contoh HTML:
<p><span style="font-size:36px;">I</span>ni adalah contoh teks span.</p>
Tag Anchor (<a>)
Elemen anchor HTML berfungsi untuk membuat hyperlink. Coding HTML ini memerlukan atribut href, yang menentukan tujuan link.
Link tujuan dapat berupa bagian lain di halaman web yang sama atau halaman web lain di website yang sama, atau website eksternal, file, dan alamat email.
Biasanya tampilan kata yang diberi tag anchor akan memiliki garis bawah dan berwarna biru.
Contoh HTML:
<p><a href="https://www.domainesia.com/panduan"> Panduan Belajar HTML Dasar</a> terbaik hanya di DomaiNesia.</p>
Atribut berguna lainnya pada tag ini adalah ‘target’ dan ‘title.’ Atribut target digunakan untuk membuka tautan di tab yang sama atau jendela baru, contohnya:
<a href="https://www.domainesia.com/panduan"/" target="_blank"> Panduan Belajar HTML Dasar</a> terbaik hanya di DomaiNesia.
Tag Unordered List (<ul>)
Coding HTML elemen unordered list digunakan untuk mengelompokkan item ketika urutannya tidak penting.
Item daftar menggunakan tag ini harus didefinisikan oleh tag <li> diantara elemen <ul>.
Tag ‘ul’ memiliki atribut ‘type’ yang bisa kamu atur ke bentuk ‘disc,’ ‘circle,’ atau ‘square’ dengan menambahkan property list-style-type.
Contoh HTML:
<h1>Daftar Tag dan Atribut Belajar HTML Dasar</h1>
<ul style="list-style-type:circle;">
<li>Tag Paragraf (<p></p>)</li>
<li>Tag Gambar (<img>)</li>
<li>Tag Heading (<h1><h1> sampai <h6></h6>)</li>
<li>Tag Divisi (<div>)</li>
<li>Tag Span (<span>)</li>
<li>Tag Anchor (<a>)</li>
<li>Tag Unordered List (<ul>)</li>
</ul>
Sintaks di atas akan membuat list dengan bentuk icon bulat hitam.
Tag Ordered List (<ol>)
Coding HTML elemen ordered list digunakan untuk mengelompokkan item ketika urutannya penting. Misalnya resep yang harus mengikuti urutan tertentu.
Langkah-langkahnya harus didefinisikan oleh tag <li> diantara elemen <ul>. Secara default, daftar yang diurutkan akan dimulai dari nomor 1.
Jika kamu ingin memulai dari nomor lain, cukup tambahkan atribut awal dan atur nilainya ke nomor yang diinginkan.
Contoh atribut type yang umum dijumpai adalah 1, A, a, I (romawi besar), dan i (romawi kecil),
Contoh HTML:
<h1>Resep Nasi Goreng Kecap</h1>
<ol type="1">
<li>Panaskan minyak dan tumis bumbu hingga harum.</li>
<li>Masukkan telur dan wortel, lalu orak-arik hingga matang.</li>
<li>Masukkan nasi putih, bumbui dengan garam, merica bubuk, dan sedikit kecap. Masak hingga matang dan sajikan</li>
</ol>
Tag Emphasis (<em>)
Coding HTML elemen emphasis berguna untuk menekankan teks yang dikandungnya.
Browser biasanya membuat teks dalam huruf miring.
Cara kerja tag ini sama dengan tag <i> yang sama-sama membuat kata atau kalimat dicetak miring.
Contoh HTML:
<p>Ini adalah paragraf normal.</p>
<p><em>Paragraf ini penting!</em></p>
<p>Kata <em>ini</em> sangat penting!</p>
Tag Strong (<strong>)
Coding HTML elemen strong berguna untuk menunjukkan suatu teks bersifat sangat penting atau mendesak.
Browser biasanya membuat teks lebih tebal. Cara kerja tag ini sama dengan tag <b> yang sama-sama membuat kata atau kalimat dicetak tebal.
Contoh HTML:
<p>Ini adalah paragraf normal.</p>
<p><strong>Paragraf ini penting!</strong></p>
<p>Kata <strong>ini</strong> sangat penting!</p>
Tag Tabel (<table>)
Meskipun penggunaan tabel untuk pemformatan website tidak disukai, tetapi kamu bisa menggunakan baris dan kolom dengan coding HTML <table> untuk mengelompokkan informasi di halaman web.
Contoh HTML:
<table>
<tbody>
<tr>
<th>Kolom Pertama</th>
<th>Kolom Kedua</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tbody>
</table>
Tag <table> dan </table> menentukan awal dan akhir tabel. Sedangkan tag <tbody> berisi semua konten tabel.
Setiap baris tabel diapit oleh tag <tr>. Setiap sel dalam setiap baris dibungkus dengan tag <th> dan tag <td> untuk data kolom.
Tag Quote (<blockquote>)
Ketika kamu mengutip suatu website atau orang lain dan kamu ingin membedakan kutipan dari dokumen yang lain, gunakan tag blockquote.
Kamu hanya perlu melampirkan kutipan di antara tag pembuka <blockquote> dan tag penutup </blockquote>.
Contoh HTML:
<blockquote>Dengan DomaiNesia, kamu bisa [beli domain dengan harga murah](https://www.domainesia.com/domain/), lho!</blockquote>
Tag Form (<form>)
Formulir HTML membantu kamu bisa berinteraksi dengan pengguna dengan mengizinkan pengguna mengirim data ke website kamu.
Untuk menginisialisasi formulir HTML, kamu harus menggunakan sepasang tag coding HTML <form> dan </form> untuk membuat elemen formulir.
Elemen tag form memungkinkan kamu membuat formulir text input area dan button.
Jika ingin membuat text input, maka kamu perlu menulis atribut ‘text’ di tag <input type = 'jenis_atribut_form'>.
Contoh coding HTML website text input:
<form>
<br>Nama depan:<br>
<input type="text" name="nama depan">
<br>Nama belakang:<br>
<input type="text" name="nama belakang">
</form>
Sedangkan jika kamu ingin membuat form multiple choice, kamu perlu menulis atribut radio, checkboxes, atau dropdown sesuai kebutuhan kamu.
Contoh coding HTML website multiple choice:
<form>
<input type="radio" name="day" value="monday" checked>Senin<br>
<input type="checkboxes" name="day" value="tuesday">Selasa<br>
<input type="dropdown" name="day" value="wednesday">Rabu
</form>
Penutup
Nah, dari sekian contoh coding HTML website yang sudah dijelaskan di atas, HTML tidak sesulit itu untuk dipelajari bukan?
Meskipun di luaran sana sudah banyak layanan web hosting berkualitas untuk website dibuat secara cepat oleh ahlinya, seperti halnya DomaiNesia.
Tak ada salahnya kamu juga belajar coding HTML dari dasar secara mandiri.
Semoga melalui artikel ini, kamu semakin tahu bahwa ada banyak contoh coding HTML website yang berguna dalam pengembangan web.
Ratna Patria
Hi! Ratna is my name. I have been actively writing about light and fun things since college. I am an introverted, inquiring person, who loves reading. How about you?
