Sebelum Mulai, Kita Siapkan Alatnya Dulu#

Untuk mengikuti tulisan ini, sebenarnya kita tidak membutuhkan banyak hal.

Cukup dua:

1. Browser, misalnya Chrome, Edge, Firefox, atau browser lain yang biasa Gabuters gunakan.
2. Code editor, yaitu aplikasi yang akan kita gunakan untuk menulis kode.

Untuk code editor, di seri ini saya akan menggunakan Visual Studio Code, atau biasanya cukup disebut VS Code.

Kenapa VS Code?

Sebenarnya bukan karena membuat HTML wajib menggunakan VS Code.

Bahkan kalau mau nekat, kita bisa membuat HTML menggunakan Notepad. 😄

Tapi ketika nanti kode kita mulai bertambah, code editor akan memberikan banyak kemudahan. Misalnya warna pada kode, bantuan penulisan, pencarian file, sampai berbagai fitur tambahan yang akan kita temui pelan-pelan.

Jadi daripada nanti pindah-pindah, kita mulai menggunakan code editor dari sekarang.

Buat Tempat untuk Belajar HTML#

Sebelum membuat file, buat sebuah folder baru di komputer.

Namanya bebas. Tapi supaya gampang mengikuti artikel ini, kita gunakan:

1
belajar-html

Lokasinya juga bebas.

Boleh di Documents, Desktop, atau folder khusus tempat Gabuters menyimpan project.

Setelah itu buka VS Code.

Pilih:

File → Open Folder

Kemudian pilih folder belajar-html yang baru saja dibuat.

Sekarang VS Code sedang membuka folder tersebut sebagai tempat kita bekerja.

Foldernya masih kosong.

Wajar.

Kita memang belum membuat apa-apa. 😄

Kita Cuma Butuh Satu File#

Sekarang buat sebuah file baru di dalam folder belajar-html.

Beri nama:

1
index.html

Perhatikan bagian belakangnya:

1
.html

Bagian tersebut memberi tahu bahwa file yang kita buat adalah sebuah file HTML.

Sedangkan index hanyalah nama file.

Nanti kita akan sering bertemu file bernama index.html, tetapi untuk sekarang tidak perlu terlalu memikirkan kenapa namanya sering index.

Yang penting kita sudah punya satu file:

1
belajar-html/
2
└── index.html

Dan file inilah yang akan menjadi halaman web pertama kita.

Tulis Sesuatu di Dalamnya#

Buka index.html di VS Code, kemudian tuliskan:

1
<h1>Halo, Gabuters!</h1>
2
<p>Ini halaman web pertama saya.</p>

Simpan file tersebut.

Di Windows, kita bisa menggunakan:

1
Ctrl + S

Sekarang buka folder belajar-html menggunakan File Explorer.

Double-click index.html.

Browser seharusnya terbuka dan menampilkan:

Kok Browser Tahu Mana yang Judul?#

Sekarang coba kita lihat lagi kode yang tadi dibuat:

1
<h1>Halo, Gabuters!</h1>
2
<p>Ini halaman web pertama saya.</p>

Kita menulis:

1
<h1>Halo, Gabuters!</h1>

dan browser menampilkannya sebagai sebuah heading atau judul.

Sedangkan:

1
<p>Ini halaman web pertama saya.</p>

ditampilkan sebagai paragraf.

Kok browser tahu?

Karena kita memberikan penanda pada tulisan tersebut.

Coba lihat bagian ini:

1
<h1>

dan:

1
</h1>

Keduanya disebut tag.

Tag pertama membuka bagian tersebut:

1
<h1>

Kemudian kita punya isinya:

1
Halo, Gabuters!

dan tag berikutnya menutupnya:

1
</h1>

Gampangnya, kita sedang memberi tahu browser:

“Browser, tulisan ini adalah heading utama.”

Begitu juga ketika kita menulis:

1
<p>Ini halaman web pertama saya.</p>

Kita sedang memberi tahu browser:

“Kalau yang ini sebuah paragraf.”

Browser kemudian membaca struktur yang kita berikan dan menentukan bagaimana bagian-bagian tersebut ditampilkan.

Dan sekarang kita mulai masuk ke inti pembahasan kita.

Jadi, HTML Itu Apa?#

HTML adalah singkatan dari HyperText Markup Language.

HTML digunakan untuk memberikan struktur dan makna pada isi sebuah halaman web.

Misalnya kita ingin mengatakan:

“Ini judul.”

“Ini paragraf.”

“Ini gambar.”

“Ini link.”

“Ini daftar.”

HTML menyediakan cara untuk memberi struktur tersebut.

Itulah kenapa HTML disebut sebagai markup language atau bahasa markup.

Kita memberikan semacam penanda pada konten supaya browser memahami struktur dokumennya.

Ada satu hal yang juga sering membingungkan ketika baru mulai belajar:

HTML bukan bahasa pemrograman.

HTML tidak kita gunakan untuk membuat logika seperti:

“Kalau pengguna sudah login, tampilkan halaman ini.”

atau:

“Kalau total belanja lebih dari Rp500.000, berikan diskon.”

Untuk hal-hal seperti itu nanti kita membutuhkan teknologi lain.

Untuk sekarang tugas HTML lebih sederhana:

menentukan struktur dan makna dari konten halaman kita.

Tapi HTML Kita Belum Lengkap#

Kode yang kita buat tadi memang bisa dibuka oleh browser:

1
<h1>Halo, Gabuters!</h1>
2
<p>Ini halaman web pertama saya.</p>

Tapi sebuah dokumen HTML biasanya memiliki struktur yang lebih lengkap.

Sekarang ubah isi index.html menjadi:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Website Pertama Saya</title>
6
</head>
7
<body>
8
    <h1>Halo, Gabuters!</h1>
9
    <p>Ini halaman web pertama saya.</p>
10
</body>
11
</html>

Kelihatannya langsung jauh lebih banyak. 😅

Tenang.

Kita tidak perlu menghafalnya.

Mari kita lihat gambaran besarnya saja.

1
<!DOCTYPE html>

1
<html lang="id">

1
<head>
2
    <meta charset="UTF-8">
3
    <title>Website Pertama Saya</title>
4
</head>

1
<title>Website Pertama Saya</title>

1
<meta charset="UTF-8">

1
<body>
2
    <h1>Halo, Gabuters!</h1>
3
    <p>Ini halaman web pertama saya.</p>
4
</body>

1
HTML
2
├── head → informasi tentang halaman
3
└── body → isi halaman

Sekarang Coba Ubah Sendiri#

Jangan cuma membaca kode saya.

Coba utak-atik sedikit. 😄

Ubah bagian:

1
<body>
2
    <h1>Halo, Gabuters!</h1>
3
    <p>Ini halaman web pertama saya.</p>
4
</body>

menjadi:

1
<body>
2
    <h1>BapakGabut</h1>
3
    <p>Ngoding, main game, dan ngulik apa saja.</p>
4
</body>

Kemudian:

simpan file → kembali ke browser → refresh.

Tulisan berubah?

Kalau iya, Gabuters sekarang sudah melakukan salah satu siklus yang akan sangat sering dilakukan ketika membuat halaman web:

flowchart LR
    Code[Ubah HTML] --> Save[Simpan]
    Save --> Refresh[Refresh Browser]
    Refresh --> Result[Lihat Hasil]
    Result --> Code

Ubah kode.

Simpan.

Refresh.

Lihat hasilnya.

Tidak sesuai?

Ubah lagi.

Simpan lagi.

Refresh lagi.

Begitu terus sampai tiba-tiba sadar sudah jam dua pagi. 😅

Selamat datang di dunia ngoding.

Kok Halamannya Masih Jelek?#

Kalau sekarang Gabuters melihat halaman yang baru dibuat dan berpikir:

“Kok cuma tulisan hitam dengan background putih?”

Betul.

Memang begitu. 😄

Tapi itu bukan berarti HTML kita salah.

Ingat kembali pembahasan sebelumnya.

HTML bertugas memberikan struktur dan makna pada halaman.

Kalau kita ingin mengatur warna, ukuran, jarak, posisi, background, dan berbagai urusan penampilan lainnya, kita akan membutuhkan sesuatu yang lain.

Namanya CSS.

Tapi jangan buru-buru ke sana.

Untuk sekarang biarkan website kita jelek dulu.

Kita masih belajar membangun rumahnya. Urusan cat tembok belakangan. 😄

Sebelum mulai mempercantik halaman, masih ada beberapa hal tentang HTML yang perlu kita pahami.

Kita Baru Kenal Dua Tag#

Sampai sini kita sebenarnya baru benar-benar menggunakan beberapa tag HTML.

Kita sudah tahu bahwa:

1
<h1>Judul</h1>

digunakan untuk heading utama.

Dan:

1
<p>Paragraf</p>

digunakan untuk paragraf.

Tapi sebuah halaman web tentunya tidak hanya berisi judul dan paragraf.

Bagaimana kalau kita ingin membuat link?

Menampilkan gambar?

Membuat daftar?

Atau memberikan informasi tambahan pada sebuah tag?

Untuk melakukan itu, kita perlu mengenal lebih banyak tag HTML.

Kita juga akan mulai bertemu dua istilah lain:

element dan attribute.

Itulah yang akan kita ulik di tulisan berikutnya:

Mengenal Tag, Elemen, dan Atribut HTML.

Untuk sekarang tidak perlu buru-buru.

Kalau Gabuters sudah berhasil membuat index.html, membukanya di browser, mengubah isinya, lalu melihat hasil perubahannya…

berarti target kita kali ini sudah tercapai.

Dari sebuah file kosong, sekarang kita sudah punya halaman web pertama.

Memang masih jelek.

Tapi setidaknya jelek buatan sendiri. 😄

Kita lanjutkan dari sini.