Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun halaman web. HTML bukan bahasa pemrograman seperti JavaScript atau Python, melainkan sebuah bahasa yang digunakan untuk memberi struktur pada konten digital, seperti teks, gambar, dan media lainnya di halaman web.

HTML pertama kali diperkenalkan oleh Tim Berners-Lee pada tahun 1991. Versi pertamanya hanya memiliki sejumlah kecil tag. Sejak itu, HTML telah berkembang pesat dan menjadi bagian inti dari teknologi web modern, bersama dengan CSS dan JavaScript.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar sebagai berikut: 

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah paragraf pertama.</p>
  </body>
</html>

Tag <html> menandai awal dan akhir dokumen HTML. Di dalamnya terdapat <head> yang berisi informasi tentang halaman (seperti judul dan meta data), serta <body> yang memuat konten utama yang ditampilkan di browser.

Elemen dan Tag HTML Umum

HTML terdiri dari berbagai elemen yang dibuka dan ditutup dengan tag. Berikut beberapa tag yang sering digunakan:

  • <h1> - <h6>: Untuk judul dan subjudul.
  • <p>: Untuk paragraf teks.
  • <a href="...">: Untuk tautan atau link.
  • <img src="...">: Untuk menampilkan gambar.
  • <div>: Untuk kontainer umum atau pembungkus.
  • <span>: Untuk konten inline atau bagian kecil dari teks.

Atribut dalam HTML

Atribut memberikan informasi tambahan pada elemen HTML. Beberapa atribut umum antara lain:

  • href: Menentukan tujuan dari tautan (<a>).
  • src: Menentukan sumber file gambar atau media (<img>, <audio>).
  • alt: Teks alternatif untuk gambar jika tidak bisa ditampilkan.
  • class: Memberi nama kelas untuk elemen, berguna untuk CSS.
  • id: Pemberian identitas unik pada elemen.
<a href="https://www.example.com">Kunjungi Website</a>
<img src="gambar.jpg" alt="Deskripsi gambar">

Membuat Tabel dan Formulir di HTML

HTML memungkinkan pembuatan tabel dan formulir untuk menampilkan data atau menerima input dari pengguna.

Tabel

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Ani</td>
    <td>20</td>
  </tr>
</table>

Formulir

<form action="/kirim" method="post">
  Nama: <input type="text" name="nama"><br>
  Email: <input type="email" name="email"><br>
  <input type="submit" value="Kirim">
</form>

Penggunaan Multimedia dalam HTML

HTML memungkinkan penyematan berbagai jenis media seperti gambar, audio, dan video langsung ke dalam halaman web. 

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

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

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

Tips Menyimpan File Sumber (Gambar, Audio, Video)

Saat membuat halaman HTML, pastikan file sumber seperti gambar (.jpg, .png), audio (.mp3), dan video (.mp4) disimpan dalam satu folder yang sama dengan file HTML. Hal ini agar file dapat dimuat dengan benar saat halaman dibuka di browser.

Contohnya, jika Anda memiliki file index.html dan gambar foto.jpg, letakkan keduanya di folder yang sama: 

/project-folder
├── index.html
└── foto.jpg

Jika file sumber berada di folder yang berbeda, tuliskan path (jalur folder) dengan benar. Contoh: 

<img src="gambar/foto.jpg" alt="Foto">
<audio controls>
  <source src="audio/lagu.mp3" type="audio/mpeg">
</audio>

Selalu periksa kembali struktur folder Anda agar file bisa ditampilkan dengan baik oleh browser.

HTML dan CSS: Kombinasi Tampilan Web

HTML digunakan untuk membuat struktur, sedangkan CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan visual halaman. HTML dan CSS bekerja sama untuk menghasilkan halaman yang menarik. 

<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>

<p>Ini paragraf dengan CSS.</p>

HTML5: Apa yang Baru?

HTML5 adalah versi terbaru dari HTML yang memperkenalkan banyak fitur baru seperti elemen semantik dan dukungan multimedia tanpa plugin tambahan.

  • <section>: Bagian dari halaman yang bertema khusus.
  • <article>: Konten yang berdiri sendiri seperti artikel atau post blog.
  • <nav>: Navigasi halaman.
  • <footer>: Bagian bawah halaman.
  • <header>: Bagian atas atau judul.

Praktik Terbaik Menulis Kode HTML

  • Gunakan indentasi untuk keterbacaan kode.
  • Tutup semua tag HTML secara benar.
  • Gunakan elemen semantik untuk struktur yang jelas.
  • Tambahkan teks alternatif pada gambar (alt).
  • Gunakan komentar jika perlu menjelaskan bagian kode (<!-- komentar -->).

Contoh Proyek HTML Sederhana

Halaman Profil

<h1>Tentang Saya</h1>
<p>Halo, saya seorang pelajar yang sedang belajar HTML.</p>
<img src="foto-profil.jpg" alt="Foto Profil">

Halaman Kontak

<h2>Hubungi Saya</h2>
<form>
  Nama: <input type="text"><br>
  Pesan: <textarea></textarea><br>
  <input type="submit" value="Kirim">
</form>

Galeri Gambar

<h2>Galeri Saya</h2>
<img src="gambar1.jpg" alt="Gambar 1" width="200">
<img src="gambar2.jpg" alt="Gambar 2" width="200">
<img src="gambar3.jpg" alt="Gambar 3" width="200">
×