Pada artikel ini, kita akan mempraktekkan penulisan kode HTML untuk pertama kali. Seperti yang sudah disampaikan pada artikel sebelumnya, kode HTML terdiri dari elemen-elemen HTML yang tersusun atas bagian yang disebut Tag. Seperti apakah itu elemen HTML? Coba lihat potongan kode berikut ini.

<h1>Judul Artikel</h1>

Pada kode di atas, saya menggunakan tag H1 (heading 1). Tag heading biasa digunakan untuk menampilkan judul. Jika kita gunakan tag tersebut, secara default, browser akan menampilkan tulisan yang diapit oleh tag tersebut dengan tulisan tebal dan berukuran relatif lebih besar dari teks normal. Tag HTML ini hanya mengapit saja, jadi pada browser tidak akan ditampilkan. Bagian yang ditampilkan hanyalah karakter/kata yang ada di antara tag buka dan tag tutup HTML. Biasanya, elemen ini berpola <tag></tag>, tetapi ada sebagian elemen HTML yang berpola <tag />. Untuk latihan, ketik kode berikut pada teks editor yang Anda miliki (bisa gunakan Notepad). Saya sarankan Anda untuk mengetik kode huruf demi huruf, bukan copy-paste.

<html>
	<head>
		<title>Latihan 1</title>
	</head>
	<body>
		<h1>Hello World</h1>
		<p>Say hello to the beautiful world.</p>
	</body>
</html>

Simpan kode di atas dengan nama “latihan.html”. Catatan: apabila menggunakan Notepad bawaan windows, pilih Save As “All Files”, lalu berikan ekstensi .html secara manual di isian File Name.

Selanjutnya, cari dimana Anda menyimpan file tersebut lalu lakukan double click untuk membuka file. Apabila gagal, Anda bisa coba klik kanan lalu Open With > pilih browser yang Anda sukai. Jika berhasil, Anda akan melihat tampilan seperti gambar di bawah ini.

Tampilan pada browser

Penjelasan Kode HTML

Kode HTML yang baru saja Anda ketik adalah contoh bentuk paling sederhana dari sebuah halaman web. Sebuah halaman HTML biasa terdiri dari tag <html>, <head>, dan <body>. Pada tag <head>, biasa terdapat tag <title> untuk menuliskan judul halaman web yang akan dimunculkan pada bagian tab pada browser (sebelah atas). Kita akan banyak bekerja pada bagian <body>, dimana pada kode di atas kita tuliskan tag heading (h1) dan paragraf (p). Penjelasan tag ini akan saya tuliskan pada artikel selanjutnya. Stay tuned and happy coding!