Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML / Programming / WEB

Tutorial HTML #2 - Hello, World!

By : Fikri Ramdani Posting Komentar
Tutorial HTML dasar membuat Hello World dengan Visual Studio Code

Assalamualaikum sobat blogger semua! Setelah memahami pengertian dasar HTML pada tutorial sebelumnya, sekarang saatnya kita masuk ke bagian yang lebih seru: menulis kode HTML dan melihat hasilnya langsung di browser.

Di tutorial ini kita akan membuat halaman HTML sederhana yang menampilkan tulisan "Hello, World!". Contoh ini memang sangat sederhana, tetapi konsep yang kita pelajari di sini merupakan dasar penting sebelum masuk ke materi HTML berikutnya.

Lu juga akan belajar cara membuat file HTML, memahami struktur dasar dokumen HTML, membukanya di browser, serta mengetahui fungsi dari kode yang kita tulis. Jadi, jangan cuma copas kodenya. Coba ketik sendiri supaya tangan lu mulai terbiasa dengan sintaks HTML.

🛠️ Persiapan Sebelum Membuat File HTML

Sebelum mulai praktik, kita membutuhkan dua hal utama: code editor untuk menulis kode dan web browser untuk melihat hasilnya.

1. Code Editor

Code editor adalah aplikasi yang digunakan untuk menulis dan mengedit kode program. Untuk tutorial ini saya menggunakan Visual Studio Code (VS Code) karena gratis, ringan untuk kebutuhan dasar, dan menyediakan berbagai fitur yang membantu proses belajar coding.

Kalau belum menginstalnya, lu bisa mengunduhnya dari situs resmi:

Download Visual Studio Code

2. Web Browser

Kita juga membutuhkan browser untuk membuka file HTML dan melihat hasilnya. Lu bisa menggunakan Google Chrome, Microsoft Edge, Mozilla Firefox, Safari, atau browser modern lainnya.

Untuk tutorial ini saya menggunakan Google Chrome. Kalau belum punya, lu bisa mengunduhnya dari situs resmi:

Download Google Chrome

Catatan: Lu tidak wajib menggunakan VS Code dan Chrome. Hampir semua code editor dan browser modern bisa digunakan untuk mengikuti tutorial HTML dasar ini.

📁 Langkah 1: Membuat File HTML

Sekarang kita mulai praktik. Pertama, buka Visual Studio Code di komputer atau laptop lu.

Setelah VS Code terbuka, buat dokumen baru melalui menu File > New Text File atau gunakan shortcut:

Windows / Linux : Ctrl + N
macOS           : Command + N

Setelah dokumen baru dibuat, simpan file tersebut menggunakan File > Save atau shortcut Ctrl + S.

Berikan nama:

index.html

Pastikan ekstensi file benar-benar .html. Jangan sampai file tersimpan sebagai index.html.txt.

Kalau lu menggunakan Windows dan ekstensi file tidak terlihat, aktifkan opsi File name extensions di File Explorer supaya lebih mudah memastikan nama file.

⌨️ Langkah 2: Menulis Struktur HTML Dasar

Setelah file index.html dibuat, masukkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Program Pertama HTML</title>
</head>
<body>

    <h1>Hello, World!</h1>

</body>
</html>

Simpan file tersebut dengan menekan Ctrl + S pada Windows/Linux atau Command + S pada macOS.

Kalau baru pertama kali melihat struktur HTML seperti ini, jangan khawatir. Kita akan membedah bagian-bagiannya satu per satu setelah melihat hasilnya.

🌐 Langkah 3: Membuka File HTML di Browser

Sekarang kita akan melihat apakah kode HTML tadi berhasil dijalankan.

  1. Buka folder tempat lu menyimpan file index.html.
  2. Klik dua kali file index.html.
  3. File tersebut akan dibuka menggunakan browser default komputer lu.
  4. Jika browser sudah terbuka, seharusnya muncul tulisan Hello, World! di halaman tersebut.

Lu juga bisa membuka file HTML melalui browser dengan cara menyeret file index.html ke jendela browser.

Hasil yang Seharusnya Muncul

Hello, World!

Kalau tulisan tersebut muncul, berarti selamat! Lu baru saja berhasil membuat dan menjalankan halaman HTML pertama.

Memang belum terlihat seperti website modern. Itu wajar. Saat ini kita baru membuat struktur dasar. Tampilan website nantinya bisa dipercantik menggunakan CSS, sedangkan interaksi dapat ditambahkan menggunakan JavaScript.

🔍 Bedah Kode HTML yang Kita Buat

Sekarang bagian yang lebih penting: jangan berhenti hanya karena kodenya berhasil tampil. Kita perlu memahami apa fungsi masing-masing bagian.

1. <!DOCTYPE html>

<!DOCTYPE html>

Baris ini disebut DOCTYPE declaration. Fungsinya memberi tahu browser bahwa dokumen tersebut menggunakan mode standar HTML modern.

Dalam HTML modern, deklarasi ini ditulis cukup dengan <!DOCTYPE html>. Ini bukan tag HTML biasa dan tidak memiliki tag penutup.

2. <html>

<html lang="id">
...
</html>

Elemen <html> merupakan elemen root yang membungkus seluruh isi dokumen HTML.

Pada contoh kita terdapat attribute lang="id". Attribute tersebut menunjukkan bahwa bahasa utama halaman adalah Bahasa Indonesia.

3. <head>

<head>
    ...
</head>

Elemen <head> berisi informasi dan metadata mengenai dokumen HTML yang tidak ditampilkan sebagai konten utama halaman.

Di dalamnya kita menggunakan <meta charset="UTF-8"> dan <title>.

4. <meta charset="UTF-8">

<meta charset="UTF-8">

Elemen ini menentukan character encoding dokumen. UTF-8 memungkinkan halaman menampilkan berbagai karakter dengan lebih luas, termasuk banyak karakter Bahasa Indonesia dan bahasa lainnya.

5. <title>

<title>Program Pertama HTML</title>

Elemen <title> menentukan judul dokumen yang biasanya ditampilkan pada tab browser.

Perhatikan bahwa tulisan Program Pertama HTML tidak muncul sebagai isi utama halaman karena elemen tersebut berada di dalam <head>.

6. <body>

<body>
    ...
</body>

Elemen <body> berisi konten utama yang ditampilkan kepada pengguna di halaman web.

Contohnya heading, paragraf, gambar, link, tabel, formulir, dan berbagai elemen lainnya.

7. <h1>

<h1>Hello, World!</h1>

Elemen <h1> digunakan untuk membuat heading tingkat pertama. Pada browser, secara default biasanya tampil dengan ukuran teks yang lebih besar dan tebal.

Nanti kita akan membahas heading secara lebih lengkap pada tutorial berikutnya.

🧪 Coba Eksperimen: Ganti Tulisan Hello World

Sekarang jangan berhenti di contoh tadi. Coba ubah tulisan:

<h1>Hello, World!</h1>

menjadi:

<h1>Halo, Saya Sedang Belajar HTML!</h1>

Simpan file tersebut kemudian buka kembali halaman HTML di browser.

Kalau tulisan di browser berubah, berarti lu sudah memahami konsep paling dasar dari HTML: browser membaca struktur HTML kemudian menampilkan hasilnya sebagai halaman web.

Coba juga tambahkan sebuah paragraf:

<p>Ini adalah website pertama saya.</p>

Sehingga bagian <body> menjadi seperti ini:

<body>

    <h1>Halo, Saya Sedang Belajar HTML!</h1>

    <p>Ini adalah website pertama saya.</p>

</body>

Simpan kembali file tersebut dan refresh browser. Sekarang halaman lu sudah memiliki heading dan paragraf.

❗ Kalau Hello World Tidak Muncul, Cek Ini

Kalau tulisan Hello, World! tidak muncul seperti yang diharapkan, jangan langsung menganggap HTML-nya rusak. Coba periksa beberapa hal berikut:

  1. Periksa ekstensi file. Pastikan namanya index.html, bukan index.html.txt.
  2. Pastikan file sudah disimpan. Tekan Ctrl + S setelah melakukan perubahan.
  3. Refresh browser. Setelah mengubah kode, browser perlu dimuat ulang agar perubahan terlihat.
  4. Periksa penulisan tag. Pastikan tag seperti <h1> ditulis dengan benar.
  5. Pastikan file yang dibuka benar. Bisa saja lu mengedit satu file tetapi membuka file HTML lain di browser.

Untuk proyek HTML yang lebih besar, lu juga bisa menggunakan fitur developer tools pada browser untuk membantu mencari kesalahan pada halaman.

📱 Bisa Belajar HTML dari HP?

Bisa. Lu tidak harus selalu menggunakan laptop atau PC untuk mempelajari HTML dasar.

Di Android, terdapat berbagai aplikasi code editor yang dapat digunakan untuk membuat dan mengedit file HTML. Contohnya Acode atau editor kode lainnya yang tersedia di perangkat masing-masing.

Namun, kalau lu serius ingin melanjutkan belajar web programming, laptop atau PC akan jauh lebih nyaman ketika proyek mulai menggunakan banyak file, library, browser developer tools, dan berbagai perangkat pengembangan lainnya.

🎯 Kesimpulan

Pada tutorial ini kita sudah berhasil membuat halaman HTML pertama menggunakan file index.html.

Kita juga sudah mempelajari beberapa bagian penting dari struktur dokumen HTML, yaitu:

  • <!DOCTYPE html> untuk deklarasi dokumen HTML.
  • <html> sebagai elemen root dokumen.
  • <head> untuk metadata dan informasi dokumen.
  • <meta charset="UTF-8"> untuk menentukan encoding karakter.
  • <title> untuk menentukan judul dokumen pada browser.
  • <body> untuk menempatkan konten utama halaman.
  • <h1> untuk membuat heading tingkat pertama.

Yang paling penting, jangan hanya membaca tutorial ini. Coba ketik dan ubah sendiri kodenya. Kesalahan saat belajar coding justru bisa menjadi bagian penting dari proses memahami bagaimana sebuah program bekerja.

Pada tutorial berikutnya kita akan membahas lebih dalam mengenai heading dalam HTML, mulai dari <h1> sampai <h6> dan bagaimana penggunaannya untuk membuat struktur konten yang lebih terorganisir.

Kalau ada bagian yang masih membingungkan atau kode lu belum tampil dengan benar, silakan tulis pertanyaan di kolom komentar. Kita bahas sama-sama.

Wassalam.

📚 Sudah Bisa Hello World? Sekarang Rapikan Struktur Kontennya!

Setelah berhasil membuat halaman HTML pertama, sekarang kita akan belajar mengenal heading dari <h1> sampai <h6> dan memahami bagaimana heading digunakan untuk menyusun struktur konten halaman web.

Lanjut ke Tutorial #3: Mengenal Heading HTML →

Posting Komentar untuk "Tutorial HTML #2 - Hello, World!"