Tutorial Script HTML Dasar untuk Pemula

Bagi seorang pemula yang baru mengenal dunia pemrograman web, istilah HTML (Hypertext Markup Language) mungkin sudah sering terdengar. HTML adalah bahasa dasar yang digunakan untuk membuat struktur halaman website. Hampir semua website di dunia menggunakan HTML sebagai fondasi, meskipun tampilannya mungkin berbeda karena tambahan CSS (untuk desain) dan JavaScript (untuk interaksi).

Artikel ini akan membahas secara lengkap tutorial script HTML dasar mulai dari pengertian, cara kerja, elemen penting, contoh kode sederhana, hingga tips membangun website sendiri. Penjelasan ditulis dengan bahasa sederhana agar mudah dipahami oleh pemula.

Dengan membaca artikel ini, kamu diharapkan dapat memahami:

Apa itu HTML dan fungsinya.
Struktur dasar sebuah dokumen HTML.
Elemen-elemen penting seperti heading, paragraf, link, gambar, tabel, dan form.
Cara menulis dan menjalankan script HTML di komputer.
Kesalahan umum pemula dalam menulis HTML.
Langkah lanjutan setelah menguasai dasar HTML.

Apa Itu HTML?

HTML atau Hypertext Markup Language adalah bahasa markup yang digunakan untuk menyusun struktur halaman web. HTML bukan bahasa pemrograman dalam arti menghitung logika kompleks, melainkan bahasa markup yang memberi tahu browser bagaimana menampilkan teks, gambar, link, video, dan elemen lainnya.

Contohnya, ketika kita membuka website berita, struktur artikelnya terdiri dari judul, paragraf, gambar, dan link. Semua itu ditulis dalam HTML. Browser seperti Chrome, Firefox, atau Edge membaca kode HTML lalu menampilkannya sesuai aturan.

Kenapa Harus Belajar HTML Dasar?

Bagi pemula, belajar HTML sangat penting karena:

Fondasi Web Development – Semua bahasa web seperti CSS, JavaScript, PHP, atau framework modern tetap berdiri di atas HTML.
Mudah Dipelajari – HTML memiliki sintaks sederhana dan bisa dipahami bahkan oleh orang yang baru pertama kali belajar coding.
Dapat Membuat Website Sendiri – Dengan menguasai HTML dasar, kamu sudah bisa membuat halaman sederhana seperti profil pribadi atau portofolio.
Berguna untuk Blogging – Jika kamu menggunakan Blogger atau WordPress, memahami HTML akan membantu mengatur tampilan postingan.
Menjadi Modal untuk Karier IT – Banyak profesi digital seperti web developer, content creator, atau digital marketer membutuhkan pengetahuan HTML.

Struktur Dasar HTML

Setiap halaman HTML memiliki struktur yang hampir sama. Berikut contoh kerangka dasar:


<!DOCTYPE html>
<html>
<head>
  <title>Website Pertamaku</title>
</head>
<body>
  <h1>Halo Dunia!</h1>
  <p>Ini adalah website pertamaku menggunakan HTML.</p>
</body>
</html>

Mari kita jelaskan:

<!DOCTYPE html> → Memberitahu browser bahwa dokumen menggunakan HTML5.
<html>...</html> → Tag utama yang membungkus seluruh isi dokumen.
<head>...</head> → Bagian kepala dokumen, berisi informasi meta, judul, dan link ke file CSS/JavaScript.
<title>...</title> → Judul yang muncul di tab browser.
<body>...</body> → Bagian isi yang ditampilkan di layar browser, berisi teks, gambar, tabel, form, dll.

Elemen Dasar HTML yang Harus Diketahui

1. Heading

Heading digunakan untuk membuat judul atau subjudul. Ada enam tingkatan:


<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Bagian Kecil</h3>

<h1> biasanya hanya digunakan sekali di halaman sebagai judul utama.

2. Paragraf

Untuk membuat teks biasa:


<p>Ini adalah paragraf pertama di website saya.</p>
<p>Paragraf kedua dengan isi berbeda.</p>

3. Link (Hyperlink)

Link digunakan untuk menghubungkan halaman lain:


<a href="https://www.google.com">Kunjungi Google</a>

4. Gambar

Menambahkan gambar di halaman:


<img src="gambar.jpg" alt="Deskripsi gambar" width="300">

5. Daftar (List)

Ada dua jenis daftar:

Ordered List (OL) – daftar bernomor.
Unordered List (UL) – daftar dengan bullet.


<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

<ul>
  <li>Apel</li>
  <li>Pisang</li>
  <li>Jeruk</li>
</ul>

6. Tabel

Tabel digunakan untuk menampilkan data dalam baris dan kolom:


<table border="1">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>22</td>
  </tr>
</table>

7. Formulir

Formulir digunakan untuk menerima input dari pengguna:


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

Cara Menulis dan Menjalankan Script HTML

Buka Notepad atau editor teks lain.
Ketik kode HTML sederhana.
Simpan file dengan ekstensi .html, misalnya index.html.
Klik dua kali file tersebut atau buka melalui browser.

Browser akan langsung menampilkan hasil dari script HTML yang kamu tulis.

Kesalahan Umum Pemula

Beberapa kesalahan yang sering dilakukan pemula:

Lupa menutup tag, misalnya <p> tanpa </p>.
Menyimpan file dengan format salah, misalnya .txt bukan .html.
Tidak menggunakan struktur dasar HTML.
Salah menulis atribut, misalnya hrf bukan href.
Menggunakan heading <h1> terlalu banyak dalam satu halaman.

Tips Belajar HTML Lebih Efektif

Praktik langsung – jangan hanya membaca teori, coba ketik ulang kode.
Eksperimen – ubah teks, warna, ukuran gambar, dan lihat perbedaannya.
Gunakan DevTools di browser – klik kanan lalu “Inspect” untuk belajar struktur HTML website lain.
Belajar sedikit demi sedikit – jangan terburu-buru mempelajari CSS atau JavaScript sebelum paham HTML.
Buat proyek kecil – misalnya halaman biodata sederhana.

Mini Project: Website Biodata Sederhana

Berikut contoh website sederhana dengan HTML:


<!DOCTYPE html>
<html>
<head>
  <title>Biodata Saya</title>
</head>
<body>
  <h1>Biodata</h1>
  <p>Nama: Andi</p>
  <p>Umur: 21 tahun</p>
  <p>Hobi: Membaca dan menulis kode</p>

  <h2>Kontak</h2>
  <p>Email: andi@example.com</p>
  <p>Instagram: <a href="https://instagram.com/andi">Klik di sini</a></p>
</body>
</html>

Website ini sangat sederhana, tetapi cukup untuk menampilkan informasi dasar.

Langkah Selanjutnya Setelah Menguasai HTML

Setelah paham dasar HTML, kamu bisa melanjutkan dengan:

CSS (Cascading Style Sheets) – untuk mengatur desain website agar lebih indah.
JavaScript – untuk membuat website interaktif.
Hosting dan Domain – agar website bisa diakses orang lain melalui internet.
Framework seperti Bootstrap untuk mempercepat pembuatan tampilan.
Belajar Backend seperti PHP atau Node.js untuk membuat website dinamis.

Kesimpulan

Belajar script HTML dasar adalah langkah awal penting untuk siapa saja yang ingin masuk ke dunia web development. HTML adalah pondasi dari semua website, dan tanpa menguasainya, sulit untuk melangkah ke tahap berikutnya seperti CSS, JavaScript, atau framework modern.

Dalam artikel ini kita sudah membahas mulai dari pengertian HTML, struktur dasar, elemen penting seperti heading, paragraf, link, gambar, daftar, tabel, hingga form. Selain itu, juga diberikan contoh mini project sederhana agar kamu bisa langsung praktik.

Kunci dari belajar HTML adalah konsistensi dan latihan. Jangan takut salah, karena setiap error adalah bagian dari proses belajar. Dengan rajin berlatih, dalam waktu singkat kamu bisa membuat website sederhana sendiri.

Belajar Membuat Script