10 Code Dasar HTML Beserta Fungsinya Yang Wajib Diketahui Bagi Pemula Coding

By Posted on

Dalam dunia digital yang semakin berkembang, memiliki pengetahuan dasar tentang HTML (Hypertext Markup Language) adalah kunci untuk membangun dan merancang halaman web yang fungsional dan menarik. HTML adalah bahasa markup yang digunakan untuk struktur dan mengatur konten pada halaman web. Dalam artikel ini, kita akan membahas 10 code dasar HTML yang harus diketahui untuk membangun halaman web dari awal.

Apa itu HTML?

HTML adalah bahasa markup yang digunakan untuk membuat struktur dan mengatur tampilan konten pada halaman web. HTML menggunakan tag atau tanda dalam kurung sudut untuk mendefinisikan elemen-elemen pada halaman, seperti judul, paragraf, gambar, tautan, dan lain-lain. Dengan menggunakan kode HTML, kita dapat mengatur tata letak, menambahkan media, dan membuat formulir interaktif pada halaman web.

Struktur Dasar HTML

Sebelum kita mulai membahas tag-tag HTML, penting untuk memahami struktur dasar dari setiap halaman web. Struktur dasar HTML terdiri dari elemen-elemen berikut:

html
<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    Konten Halaman Web
</body>
</html>
  1. <!DOCTYPE html>: Deklarasi tipe dokumen untuk menandakan bahwa halaman ini adalah dokumen HTML5.
  2. <html>: Elemen utama yang mengelilingi seluruh konten HTML pada halaman.
  3. <head>: Bagian yang berisi informasi tentang halaman, seperti judul, meta, dan tautan ke stylesheet (CSS).
  4. <title>: Menentukan judul yang akan ditampilkan di tab browser.
  5. <body>: Bagian yang berisi konten visual yang akan ditampilkan kepada pengunjung halaman.

Tag Dasar HTML

Mari kita lihat sepuluh tag dasar HTML yang harus Anda ketahui untuk membangun halaman web yang sederhana dan efektif.

1. Tag <html>

Tag <html> menandakan awal dan akhir dari dokumen HTML.

html
<!DOCTYPE html>
<html>
    <!-- Isi konten halaman di sini -->
</html>

2. Tag <head>

Tag <head> berisi informasi tentang halaman web, seperti tautan ke stylesheet, skrip JavaScript, dan meta informasi.

html
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <meta charset="UTF-8">
</head>

3. Tag <title>

Tag <title> menentukan judul halaman yang akan ditampilkan di tab browser.

html
<title>Halaman Utama</title>

4. Tag <meta>

Tag <meta> digunakan untuk memberikan informasi tambahan tentang halaman, seperti deskripsi dan kata kunci.

html
<meta name="description" content="Halaman ini berisi informasi penting.">
<meta name="keywords" content="HTML, bahasa markup, halaman web">

5. Tag <link>

Tag <link> digunakan untuk menghubungkan halaman dengan berkas CSS eksternal.

html
<link rel="stylesheet" href="style.css">

6. Tag <body>

Tag <body> berisi konten visual yang akan ditampilkan kepada pengunjung halaman.

html
<body>
    <h1>Selamat Datang di Halaman Web</h1>
    <p>Ini adalah contoh halaman web yang dibangun dengan HTML.</p>
</body>

7. Tag <h1> hingga <h6>

Tag <h1> hingga <h6> digunakan untuk membuat judul dengan tingkat kepentingan yang berbeda. <h1> memiliki tingkat kepentingan tertinggi, sedangkan <h6> memiliki tingkat kepentingan terendah.

html
<h1>Judul Utama</h1>
<h2>Judul Kedua</h2>
<h3>Judul Ketiga</h3>
<h4>Judul Keempat</h4>
<h5>Judul Kelima</h5>
<h6>Judul Keenam</h6>

8. Tag <p>

Tag <p> digunakan untuk membuat paragraf teks.

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

9. Tag <a>

Tag <a> digunakan untuk membuat tautan atau hyperlink ke halaman lain atau sumber daya.

html
<a href="https://www.contoh.com">Kunjungi Contoh</a>

10. Tag <img>

Tag <img> digunakan untuk menyisipkan gambar ke dalam halaman web.

html
<img src="gambar.jpg" alt="Deskripsi Gambar">

Pengaturan Tabel Dasar dengan Tag HTML

Tabel adalah elemen penting dalam HTML yang digunakan untuk menyusun data dalam baris dan kolom. Berikut adalah tag-tag dasar untuk membuat tabel di halaman web.

Tag <table>

Tag <table> digunakan untuk membuat tabel.

html
<table>
    <!-- Baris dan sel akan ditambahkan di sini -->
</table>

Tag <tr>

Tag <tr> digunakan untuk membuat baris dalam tabel.

html
<tr>
    <!-- Sel akan ditambahkan di sini -->
</tr>

Tag <td>

Tag <td> digunakan untuk membuat sel dalam tabel.

html
<tr>
    <td>Data 1</td>
    <td>Data 2</td>
</tr>

Tag <th>

Tag <th> digunakan untuk membuat sel header dalam tabel.

html
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>John</td>
    <td>25</td>
</tr>

Daftar Poin dengan Tag HTML

Daftar poin adalah cara yang bagus untuk menyajikan informasi berurutan. HTML memiliki tag-tag khusus untuk membuat daftar poin.

Tag <ul> (Unordered List)

Tag <ul> digunakan untuk membuat daftar poin tanpa urutan tertentu.

html
<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
</ul>

Tag <ol> (Ordered List)

Tag <ol> digunakan untuk membuat daftar poin dengan urutan.

html
<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
</ol>

Tag <li> (List Item)

Tag <li> digunakan untuk membuat item dalam daftar poin.

html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

html
<ol>
    <li>Langkah 1</li>
    <li>Langkah 2</li>
</ol>

Membuat Formulir dengan Tag HTML

Formulir adalah cara interaktif bagi pengguna untuk mengirimkan data ke server. Tag-tag HTML berikut digunakan untuk membuat formulir.

Tag <form>

Tag <form> digunakan untuk membuat formulir.

html
<form action="proses.php" method="POST">
    <!-- Elemen formulir akan ditambahkan di sini -->
</form>

Tag <input>

Tag <input> digunakan untuk membuat input teks atau kotak centang.

html
<input type="text" name="nama" placeholder="Nama Anda">
<input type="checkbox" name="setuju" value="ya"> Saya Setuju

Tag <textarea>

Tag <textarea> digunakan untuk membuat area teks yang lebih besar.

html
<textarea name="komentar" rows="4" cols="50"></textarea>

Tag <select>

Tag <select> digunakan untuk membuat dropdown atau pilihan.

html
<select name="kategori">
    <option value="musik">Musik</option>
    <option value="film">Film</option>
</select>

Tag <button>

Tag <button> digunakan untuk membuat tombol.

html
<button type="submit">Kirim</button>

Menambahkan Media dengan Tag HTML

HTML juga mendukung penyisipan media seperti audio dan video ke dalam halaman web.

Tag <audio>

Tag <audio> digunakan untuk menyisipkan file audio.

html
<audio controls>
    <source src="lagu.mp3" type="audio/mpeg">
    Browser Anda tidak mendukung pemutar audio.
</audio>

Tag <video>

Tag <video> digunakan untuk menyisipkan file video.

html
<video controls>
    <source src="video.mp4" type="video/mp4">
    Browser Anda tidak mendukung pemutar video.
</video>

Penggunaan Iframe untuk Menyisipkan Konten Eksternal

Iframe adalah tag HTML yang digunakan untuk menyisipkan halaman web atau konten dari sumber eksternal ke dalam halaman web Anda.

Tag <iframe>

Tag <iframe> digunakan untuk menyisipkan halaman web atau media dari sumber eksternal.

html
<iframe src="https://www.contoh.com" width="500" height="300"></iframe>

Mengomentari Kode dengan Tag HTML

Komentar dalam kode HTML digunakan untuk memberikan keterangan atau penjelasan pada kode, yang tidak akan ditampilkan di halaman web.

Tag <!-- Komentar -->

html
<!-- Ini adalah komentar dalam kode HTML -->

Menyempurnakan Tampilan dengan CSS

Meskipun HTML digunakan untuk menentukan struktur dan konten halaman web, CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan visual halaman. Dengan CSS, Anda dapat mengubah warna, ukuran teks, tata letak, dan banyak lagi.

Kesimpulan

HTML adalah fondasi dari setiap halaman web yang Anda lihat. Dengan memahami dan menguasai tag-tag dasar HTML, Anda dapat membangun halaman web yang kreatif, interaktif, dan menarik. Dari struktur dasar hingga formulir interaktif, penggunaan tag-tag ini memungkinkan Anda untuk menciptakan pengalaman pengguna yang unik. Ingatlah bahwa HTML terus berkembang, dan mengikuti perkembangan tersebut akan memastikan Anda selalu memiliki pengetahuan yang relevan dan mutakhir dalam membangun halaman web.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *