AHLI NGODINK
Learning PathTersimpanSemua Artikel Telegram
Dasar Web

Apa Itu HTML? Pengertian, Fungsi, dan Contoh untuk Pemula

HTML, Web Development, Dasar Web, Pemula, Website

Ditulis Ahli Ngodink 6 menit membaca

Kalau kamu baru mulai belajar membuat website, HTML adalah salah satu hal pertama yang perlu dipahami. Hampir setiap halaman yang dibuka melalui browser menggunakan HTML sebagai dasar untuk menyusun kontennya.

HTML digunakan untuk menentukan bagian-bagian halaman seperti judul, paragraf, gambar, tombol, tautan, formulir, tabel, dan berbagai elemen lainnya. Setelah struktur tersebut dibuat, CSS dapat digunakan untuk mengatur tampilannya dan JavaScript untuk memberikan interaksi.

Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language. HTML merupakan bahasa markup yang digunakan untuk menyusun struktur dan konten sebuah halaman web.

HTML bukan bahasa pemrograman seperti JavaScript, Python, atau PHP. HTML tidak digunakan untuk membuat logika program. Tugas utamanya adalah menjelaskan struktur dan makna dari konten yang ditampilkan di halaman.

Sederhananya, jika sebuah website dianggap sebagai rumah, HTML berfungsi sebagai kerangka utama yang menentukan bagian mana yang menjadi ruang, pintu, jendela, dan bagian lainnya.

Apa Fungsi HTML?

HTML memiliki beberapa fungsi utama dalam pengembangan website.

1. Membuat Struktur Halaman

HTML menentukan struktur dasar halaman seperti header, navigasi, konten utama, sidebar, dan footer.

<header>
  <h1>Ahli Ngodink</h1>
</header>

<main>
  <p>Belajar coding untuk pemula.</p>
</main>

<footer>
  <p>Copyright Ahli Ngodink</p>
</footer>

2. Menampilkan Teks

HTML dapat digunakan untuk menampilkan judul, subjudul, paragraf, daftar, dan berbagai jenis teks lainnya.

<h1>Belajar HTML</h1>
<h2>Dasar HTML</h2>

<p>Ini adalah paragraf pertama saya.</p>

3. Menampilkan Gambar

Gambar pada sebuah halaman dapat ditampilkan menggunakan elemen <img>.

<img
  src="gambar.jpg"
  alt="Contoh gambar website"
>

Atribut alt digunakan untuk memberikan deskripsi terhadap gambar dan juga membantu aksesibilitas halaman.

4. Membuat Tautan

HTML memungkinkan satu halaman terhubung dengan halaman lainnya menggunakan elemen <a>.

<a href="https://ahlingodink.xyz">
  Buka Ahli Ngodink
</a>

5. Membuat Formulir

Formulir seperti login, pencarian, registrasi, dan formulir kontak juga dibuat menggunakan HTML.

<form>
  <label>Nama</label>
  <input type="text" name="nama">

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

Bagaimana Cara Kerja HTML?

Ketika seseorang membuka sebuah website, browser menerima dokumen HTML dari server. Browser kemudian membaca struktur HTML tersebut dan menampilkannya sebagai halaman yang dapat dilihat pengguna.

Contohnya, kode berikut:

<h1>Halo Dunia</h1>
<p>Saya sedang belajar HTML.</p>

akan dibaca browser sebagai sebuah judul besar dan sebuah paragraf.

Browser seperti Google Chrome, Mozilla Firefox, Microsoft Edge, dan Safari memahami standar HTML sehingga kode yang sama dapat ditampilkan sebagai sebuah halaman web.

Struktur Dasar HTML

Sebuah dokumen HTML biasanya memiliki struktur dasar seperti berikut:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Website Pertama Saya</title>
</head>

<body>

  <h1>Halo Dunia</h1>
  <p>Ini website pertama saya.</p>

</body>

</html>

Mari kita lihat fungsi setiap bagiannya.

<!DOCTYPE html>

Digunakan untuk memberi tahu browser bahwa dokumen menggunakan HTML modern.

<html>

Merupakan elemen utama yang membungkus seluruh isi dokumen HTML.

<head>

Berisi informasi tentang halaman yang umumnya tidak ditampilkan sebagai konten utama, seperti judul halaman, meta description, stylesheet, dan konfigurasi lainnya.

<body>

Berisi seluruh konten yang akan terlihat oleh pengunjung, seperti teks, gambar, tombol, tabel, dan formulir.

Tag, Elemen, dan Atribut HTML

Saat belajar HTML, kamu akan sering menemukan istilah tag, elemen, dan atribut.

Tag HTML

Tag digunakan untuk menandai sebuah bagian dari konten.

<p>
<h1>
<a>
<img>

Elemen HTML

Elemen biasanya terdiri dari tag pembuka, isi, dan tag penutup.

<p>Saya sedang belajar HTML.</p>

Atribut HTML

Atribut memberikan informasi tambahan terhadap sebuah elemen.

<a href="https://ahlingodink.xyz">
  Ahli Ngodink
</a>

Pada contoh tersebut, href merupakan atribut yang menentukan alamat tujuan tautan.

Tag HTML yang Sering Digunakan

Beberapa elemen dasar yang sebaiknya dipahami pemula antara lain:

<h1>Judul utama</h1>

<h2>Subjudul</h2>

<p>Paragraf</p>

<a href="halaman.html">Link</a>

<img src="foto.jpg" alt="Foto">

<button>Klik Saya</button>

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

Kamu tidak harus menghafal semua tag HTML sekaligus. Lebih efektif memahami fungsi tag sambil mempraktikkannya dalam proyek kecil.

Hubungan HTML, CSS, dan JavaScript

Dalam pengembangan website modern, HTML biasanya digunakan bersama CSS dan JavaScript.

  • HTML mengatur struktur dan isi halaman.
  • CSS mengatur tampilan halaman.
  • JavaScript mengatur interaksi dan perilaku halaman.

Contohnya, HTML membuat sebuah tombol:

<button id="tombol">
  Klik Saya
</button>

CSS dapat mengubah tampilannya:

button {
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

JavaScript kemudian dapat memberikan interaksi:

const tombol =
  document.getElementById("tombol");

tombol.addEventListener("click", () => {
  alert("Tombol berhasil diklik!");
});

Kalau ingin memahami hubungan ketiganya lebih dalam, baca juga Perbedaan HTML, CSS, dan JavaScript.

Contoh Website HTML Sederhana

Berikut contoh halaman HTML sederhana yang dapat langsung dicoba.

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Website Saya</title>
</head>

<body>

  <h1>Halo!</h1>

  <p>
    Saya sedang belajar membuat website.
  </p>

  <a href="https://ahlingodink.xyz">
    Belajar Coding
  </a>

</body>

</html>

Simpan kode tersebut dengan nama:

index.html

Kemudian klik dua kali file tersebut dan browser akan menampilkan halaman website pertama kamu.

Apa yang Dibutuhkan untuk Belajar HTML?

Untuk mulai belajar HTML, kamu tidak membutuhkan perangkat atau aplikasi yang rumit.

Cukup siapkan:

  • Komputer atau laptop.
  • Browser seperti Chrome atau Firefox.
  • Text editor seperti Visual Studio Code.
  • Keinginan untuk mencoba dan membuat proyek kecil.

HTML juga dapat dipelajari tanpa koneksi internet karena file HTML dapat langsung dibuka melalui browser.

Apa yang Dipelajari Setelah HTML?

Setelah memahami HTML dasar, urutan belajar yang direkomendasikan adalah:

  1. Memahami struktur HTML.
  2. Belajar CSS.
  3. Membuat layout responsive.
  4. Belajar JavaScript dasar.
  5. Membuat proyek website.
  6. Mempublikasikan website ke hosting.

Kamu juga bisa langsung mencoba panduan Cara Membuat Website Pertama dari Nol setelah memahami konsep dasar HTML.

Bisakah Website HTML Dipublikasikan?

Bisa. File HTML, CSS, JavaScript, gambar, dan aset lainnya dapat diunggah ke hosting agar website dapat diakses melalui internet.

Pada hosting berbasis cPanel, file website biasanya diletakkan pada folder public_html.

Jika website pertamamu sudah selesai, lanjutkan dengan panduan Cara Upload Website HTML ke cPanel.

Kesimpulan

HTML adalah fondasi utama dalam pembuatan halaman web. HTML digunakan untuk menyusun struktur dan menentukan makna dari konten seperti judul, paragraf, gambar, link, tombol, dan formulir.

Bagi pemula, HTML merupakan titik awal yang tepat sebelum mempelajari CSS, JavaScript, backend, database, atau teknologi web lainnya.

Daripada mencoba menghafal seluruh tag HTML, mulai dari struktur sederhana, buat sebuah halaman, buka melalui browser, kemudian tambah fitur sedikit demi sedikit.

Topik: #Dasar Web #HTML #Pemula #Web Development #Website
Lanjut Belajar
Semua artikel →

Artikel berikutnya

Perbedaan HTML, CSS, dan JavaScript →