Halo para calon web developer! Selamat datang di seri tutorial HTML paling komprehensif. Jika Anda pernah bermimpi untuk membuat website sendiri, inilah titik awal perjalanan Anda. Anggap saja kita akan membangun sebuah rumah. Sebelum kita mengecat dinding (dengan CSS) atau memasang listrik (dengan JavaScript), kita perlu membangun fondasi dan kerangka yang kokoh. Itulah HTML.

Di modul pertama yang krusial ini, kita akan membahas semua hal fundamental yang wajib Anda kuasai. Kita tidak hanya akan belajar teori, tapi kita juga akan langsung memulai proyek pertama kita: membangun website portofolio pribadi dari nol!

Mari kita mulai petualangan ini! 🚀

1. Apa Itu HTML? Sang Kerangka Situs Web

HTML adalah singkatan dari HyperText Markup Language. Mari kita bedah istilah ini:

• HyperText: Ini merujuk pada teks yang memiliki kemampuan untuk terhubung ke dokumen lain melalui tautan (links). Inilah sihir yang menjadi dasar dari World Wide Web, yang memungkinkan kita “melompat” dari satu halaman ke halaman lain.
• Markup Language: Ini berarti HTML bukanlah bahasa pemrograman. HTML tidak membuat logika kompleks. Sebaliknya, ia menggunakan “tanda” atau tag untuk memberi label pada konten, memberi tahu browser bagaimana cara menyusun dan memaknai konten tersebut. Contohnya: “ini adalah judul utama”, “ini adalah paragraf”, atau “ini adalah sebuah gambar”.

Analogi Sederhana: Jika halaman web adalah tubuh manusia, maka HTML adalah kerangka tulangnya. Ia memberikan struktur dasar: di mana letak kepala, badan, tangan, dan kaki. Tanpa kerangka, kita hanya akan menjadi gumpalan organ yang tidak berbentuk.

2. Sejarah Singkat: Dari Proyek Sederhana Menjadi Tulang Punggung Internet

HTML diciptakan oleh Tim Berners-Lee pada tahun 1991. Awalnya, tujuannya sederhana: membuat cara yang mudah bagi para ilmuwan untuk berbagi dokumen dan penelitian. Seiring waktu, HTML berevolusi hingga menjadi HTML5 pada tahun 2014, standar modern yang kita gunakan saat ini. HTML5 membawa banyak fitur canggih seperti dukungan multimedia (<video>, <audio>), grafis (<canvas>), dan elemen struktur yang lebih bermakna yang akan membuat kode kita jauh lebih baik.

3. Mengapa Belajar HTML di Era AI & Website Builder?

Ini pertanyaan yang sangat valid. Dengan adanya AI yang bisa membuat kode atau platform drag-and-drop seperti Wix, mengapa kita harus repot-repot belajar HTML?

Jawabannya adalah: Karena fondasi fundamental tidak akan pernah tergantikan.

1. Kendali Penuh: Website builder dan AI hebat untuk hal cepat dan standar. Tapi begitu Anda ingin kustomisasi unik atau memperbaiki sesuatu, Anda akan terbentur tembok. Dengan HTML, Anda adalah arsiteknya, bukan hanya penyewa. Anda punya kendali penuh.
2. Kemampuan Debugging (Memperbaiki Masalah): Cepat atau lambat, setiap website akan mengalami masalah. Tanpa pemahaman HTML, Anda akan bingung. Dengan HTML, Anda bisa “membuka kap mesin”, mengidentifikasi masalah, dan memperbaikinya sendiri.
3. Optimalisasi dan Performa: Kode yang ditulis tangan oleh developer yang paham seringkali jauh lebih bersih, ringan, dan cepat daripada kode yang dihasilkan secara otomatis oleh builder.
4. Kolaborasi Profesional: Di dunia kerja, Anda harus bisa membaca, menulis, dan memahami kode yang dibuat orang lain. Tidak ada perusahaan teknologi serius yang membangun produknya hanya dengan drag-and-drop.
5. Gerbang Menuju Karier Web: HTML adalah syarat mutlak. Tidak ada jalan untuk menjadi Front-End, Back-End, atau Full-Stack Developer tanpa menguasainya.

Intinya: Belajar HTML itu seperti seorang koki yang belajar tentang bahan dasar. Meskipun ada banyak kue instan (website builder), koki sejati yang bisa menciptakan mahakarya adalah mereka yang memahami bahan dasarnya dari nol.

4. Persiapan Amunisi: Lingkungan Kerja Anda

Anda tidak perlu software mahal. Anda hanya butuh dua hal gratis:

1. Text Editor: Tempat Anda menulis kode. Sangat disarankan menggunakan code editor modern.
   • Rekomendasi Utama: Visual Studio Code (VS Code) – Gratis, powerful, dan menjadi standar industri saat ini.
2. Web Browser: Alat untuk “melihat” hasil kode Anda.
   • Rekomendasi: Google Chrome atau Mozilla Firefox.

5. Struktur Dasar Dokumen HTML: Resep Wajib Setiap Halaman

Setiap file HTML yang valid harus memiliki struktur dasar ini. Anggap ini seperti resep wajib yang tidak boleh dilewatkan.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Anda</title>
</head>
<body>
    </body>
</html>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman Anda</title>
</head>
<body>
    </body>
</html>

Mari kita bedah setiap barisnya:

• <!DOCTYPE html>: Deklarasi yang memberi tahu browser bahwa dokumen ini menggunakan standar HTML5. Wajib ada di baris paling atas.
• <html lang="id">: Elemen root atau akar yang membungkus semua konten. Atribut lang="id" memberi tahu browser bahwa bahasa utama halaman ini adalah Bahasa Indonesia (baik untuk SEO & aksesibilitas).
• <head>: Bagian “kepala” ini berisi informasi tentang halaman yang tidak ditampilkan secara langsung di konten.
  • <meta charset="UTF-8">: Memastikan browser menampilkan semua karakter dan simbol (termasuk emoji 😉) dengan benar.
  • <meta name="viewport" ...>: Tag super penting untuk desain responsif, memastikan website Anda tampil baik di desktop maupun mobile.
  • <title>: Teks di sini akan muncul di tab browser Anda. Sangat penting untuk SEO!
• <body>: Di sinilah semua konten yang Anda lihat di halaman web—teks, gambar, video, tautan—diletakkan.

6. Anatomi Elemen HTML: Membedah DNA Kode

Setiap bagian dari halaman web Anda dibangun dari elemen-elemen. Mari kita bedah anatominya:

<p class="intro">Ini adalah sebuah paragraf.</p>

• Tag Pembuka (<p class="intro">): Menandai awal dari sebuah elemen. Terdiri dari nama tag (p untuk paragraf) dan bisa berisi atribut.
• Atribut (class="intro"): Memberikan informasi tambahan pada elemen. Formatnya selalu nama="nilai".
• Konten (Ini adalah sebuah paragraf.): Teks atau elemen lain yang berada di antara tag.
• Tag Penutup (</p>): Menandai akhir dari elemen, ditandai dengan garis miring (/).

Hands-on: Coding Bareng – Memulai Proyek Portofolio Anda!

Teori sudah cukup, mari langsung praktik! Di setiap akhir modul, kita akan membangun satu bagian dari website portofolio kita.

• Tujuan: Membuat “kerangka” kosong dari website portofolio kita.
• Tugas Anda:
  1. Di komputer Anda, buat sebuah folder baru dan beri nama portofolio-saya. Folder ini akan berisi semua file proyek kita.
  2. Buka VS Code, lalu buka folder portofolio-saya tersebut (File > Open Folder).
  3. Buat file baru di dalam folder itu dan simpan dengan nama index.html. Ekstensi .html ini wajib.
  4. Salin dan tempel struktur dasar HTML yang kita pelajari di atas ke dalam file index.html Anda.
  5. Ubah isi tag <title> menjadi Portofolio - [Nama Lengkap Anda]. Ganti [Nama Lengkap Anda] dengan nama Anda.
  6. Di dalam <body>, tambahkan satu baris kode: <h1>[Nama Lengkap Anda]</h1>.

Kode Final Anda di index.html Seharusnya Terlihat Seperti Ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio - Budi Sanjaya</title> </head>
<body>
    <h1>Budi Sanjaya</h1> </body>
</html>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio - Budi Sanjaya</title> </head>
<body>
    <h1>Budi Sanjaya</h1> </body>
</html>

Untuk melihat hasilnya, cari file index.html di komputer Anda, lalu klik dua kali untuk membukanya di browser.

Selamat! Anda baru saja meletakkan batu pertama dari proyek portofolio Anda! 🎉

Kesimpulan & Langkah Selanjutnya

Luar biasa! Anda telah menyelesaikan langkah pertama yang paling fundamental. Anda sekarang tahu apa itu HTML, mengapa ia penting, dan yang terpenting, Anda sudah memulai sebuah proyek nyata.

Di Modul 2, kita akan mulai mengisi kerangka ini dengan konten. Kita akan belajar cara menambahkan paragraf, gambar profil, dan tautan ke media sosial Anda.

Sampai jumpa di modul berikutnya!

Sumber dan Referensi

Informasi dalam artikel ini disusun dan diverifikasi dari sumber-sumber standar industri pengembangan web yang paling otoritatif.

• MDN Web Docs (Mozilla Developer Network): https://developer.mozilla.org/en-US/docs/Web/HTML
• W3Schools: https://www.w3schools.com/html/
• The World Wide Web Consortium (W3C): https://www.w3.org/TR/html52/
• freeCodeCamp: https://www.freecodecamp.org/news/tag/html/