Apa Itu HTML? Struktur Dasar dan Contohnya untuk Pemula

Apa Itu HTML? Struktur Dasar dan Contohnya – Bagi pemula yang baru saja akan memulai menjadi seorang pengembang website, hal pertama yang harus Anda pelajari tentu saja mempelajari HTML. Mengapa HTML? Hal ini dikarenakan, HTML berfungsi sebagai kerangka dasar dari sebuah website.

Daftar Isi

Jika manusia memiliki kerangka berupa tulang, maka sebuah website memiliki kerangka dasar berupa HTML. Lalu, apa yang dimaksud dengan HTML? Yuk! Simak ulasan selengkapnya mengenai apa itu HTML hingga contohnya untuk pemula berikut ini.

Apa Itu HTML?

HTML (Hypertext Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun struktur halaman web. HTML memberikan kerangka dasar untuk menampilkan konten di browser seperti teks, gambar, video, tabel, form, dan elemen lainnya.

HTML terdiri dari elemen-elemen yang ditulis dalam bentuk tag. Setiap elemen HTML biasanya memiliki tag pembuka dan tag penutup, dengan konten di antaranya. Contohhnya ketika ingin membuat paragraf, maka tag pembukanya adalah <p> dan tag penutupnya adalah </p> dan seterusnya untuk elemen HTML lainnya.

HTML biasanya bekerja sama dengan CSS (Cascading Style Sheets) untuk memberikan gaya atau tampilan pada halaman dan JavaScript untuk menambahkan fitur yang lebih interaktif. Selain dapat dikombinasikan dengan CSS dan JavaScript, HTML juga dapat digunakan bersama bahasa pemrograman seperti PHP.

Struktur Dasar HTML

Setiap bahasa, pasti memiliki struktur dasar tersendiri tak terkecuali dengan HTML yang notabennya hanya sebuah bahasa markup. Sebagai contoh, berikut ini adalah struktur dasar dari kerangka HTML yang dapat Anda pelajari sesaat.

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman | Afid Arifin</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Penjelasan Struktur HTML:

<!DOCTYPE html> menandakan bahwa dokumen HTML ini menggunakan HTML5.
<html> elemen utama yang membungkus seluruh konten.
<head> berisi informasi meta, judul halaman, dan link ke file eksternal seperti CSS atau JavaScript yang biasanya tidak terlihat di browser.
<title> menampilkan judul pada tab browser.
<body> bagian utama tempat elemen-elemen konten berada seperti teks, gambar, atau video.
<h1> heading atau judul utama dari halaman. Heading tersedia mulai dari <h1>-<h6>.
<p> elemen untuk menampilkan paragraf.

Jika struktur dasar HTML di atas dijalankan, maka akan menampilkan output seperti yang ditunjukkan oleh gambar berikut.

Apa Itu HTML? Struktur Dasar dan Contohnya untuk Pemula

5 Contoh Kode HTML untuk Pemula

Berikut adalah contoh kode HTML untuk pemula yang dapat Anda pelajari sebelum mempelajari HTML lebih jauh lagi.

1. Membuat Teks Sederhana

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Teks Sederhana | Afid Arifin</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah halaman HTML sederhana.</p>
  </body>
</html>

Kode HTML di atas digunakan untuk menampilkan teks sederhana menggunakan elemen <h1> untuk judul besar dan <p> untuk paragraf.

2. Membuat List / Daftar

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat List | Afid Arifin</title>
  </head>
  <body>
    <h2>Daftar Belanja</h2>
    <ul>
      <li>Beras</li>
      <li>Telur</li>
      <li>Susu</li>
    </ul>
  </body>
</html>

Kode HTML di atas digunakan untuk membuat daftar dengan menggunakan elemen <ul> (unordered list) untuk daftar bullet dan <li> (list item) untuk item dalam daftar.

3. Menampilkan Gambar

<!DOCTYPE html>
<html>
  <head>
    <title>Menampilkan Gambar | Afid Arifin</title>
  </head>
  <body>
    <h2>Gambar Kucing</h2>
    <img src="https://via.placeholder.com/150" alt="Gambar Kucing">
  </body>
</html>

Kode HTML di atas digunakan untuk menampilkan gambar menggunakan elemen <img> dengan atribut src untuk URL gambar dan alt sebagai deskripsi alternatif jika gambar tidak bisa ditampilkan.

4. Membuat Link Aktif

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Link Aktif | Afid Arifin</title>
  </head>
  <body>
    <h2>Kunjungi Website</h2>
    <a href="https://www.afidarifin.com">Afid Arifin</a>
  </body>
</html>

Kode HTML di atas digunakan untuk membuat tautan ke website lain menggunakan elemen <a> dengan atribut href untuk menentukan URL tujuan.

5. Membuat Table

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Table | Afid Arifin</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>Nama</th>
        <th>Umur</th>
      </tr>
      <tr>
        <td>Afid Arifin</td>
        <td>12</td>
      </tr>
    </table>
  </body>
</html>

Kode HTML di atas digunakan untuk menampilkan tabel sederhana menggunakan elemen <table>. Baris pertama menggunakan <th> untuk header tabel dan baris berikutnya menggunakan <td> untuk isi tabel.

Penutup

Demikian artikel pada kesempatan kali ini mengenai apa itu HTML, struktur dasar dan contohnya untuk pemula. Sekian dan semoga bermanfaat bagi Anda yang akan mempelajari salah satu bahasa untuk web development.