Halo teman-teman netijen, apa kabar nih? Semoga selalu dalam kesehatan yang baik.
Sebelumnya, kita sudah berkenalan dengan HTML secara singkat, mulai dari pengertian hingga persiapan untuk mulai mempelajarinya. Jika belum baca, silahkan kunjungi: HTML: Pendahuluan dan Pengenalan
Okeh.. Kita lanjut!
Menyiapkan Folder Projek
Buat sebuah folder, misal: 📁Belajar HTML dan taruh di tempat yang mudah dijangkau. Setelah itu buka Teks Editor yang sudah diinstal.
Saya pake SublimeText. Silahkan sesuaikan atau bisa menggunakan Teks Editor ini agar sama.
Agar mempermudah, silahkan tahan dan tarik (drag and drop) folder tadi ke dalam Teks Editor.
Bagi pengguna SublimeText, silahkan pilih menu Project > Add Folder to Project dan pilih folder tadi yang sudah dibuat sebelumnya (📁Belajar HTML).
Setelah itu, buat file baru dengan cara pilih menu File > New File atau tekan CTRL + N
Tulis struktur dasar HTML:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Jika sudah, simpan file tersebut dengan cara tekan CTRL + S dan tulis nama filenya helloworld.html
🦁 : “Semoga ga kesasar..”
Menjalankan File HTML
Buka folder projek kita (📂Belajar HTML), dan cari file helloworld.html
Setelah itu, klik 2x untuk membukanya secara otomatis. Bisa juga dengan klik kanan dan pilih Open.
Ada cara yang lebih gaul untuk menjalankannya dengan SublimeText. Cukup klik kanan pada file yang sedang terbuka/diedit dan pilih Open in Browser.
🦁 : “Gimana? Bisa sampe sini? Kalo bisa, kita lanjut..”
Sudah terbuka filenya? Apakah ada sesuatu di layar? Jika belum, tidaklah masalah. Kita baru membuat struktur dasarnya saja, belum isinya. Hehehe..
Memberi Judul Website
Nah, sekarang, cari tag <title> kemudian isi judul website sesuai selera.
Contoh:
<title>Website Pertama Saya</title>
Untuk melihat perubahan, silahkan refresh halaman pada browsernya, atau bisa juga dengan CTRL + R
Perhatikan bagian tab halaman, apakah sudah berubah? Jika iya, berarti selamat! Kalo belum, silahkan coba lagi sesuai dengan penjelasan diatas.
Menampilkan Hello World!
Selanjutnya, kita akan menampilkan Tulisan Sakral Programmer yaitu “Hello World!” di halaman website kita.
Cari tag <body> dan tulis Hello World! di dalamnya, seperti ini:
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
Hello World!
</body>
</html>
Jangan lupa refresh halaman untuk melihat perubahannya.
🦁 : “Berhasil? Hore! 🎉 Website pertama anda sudah jadi..”
Penjelasan Singkat
Kita coba membahas ulang mengenai tag yang kita gunakan diatas.
<title>: berfungsi untuk menampilkan judul dari website<body>: sebagai wadah/isi/pembungkus dari satu halaman penuh
Jadi, ketika kita ingin menampilkan segala sesuatu, baik itu teks, gambar, video, dan lain-lain, kita akan menulisnya di dalam tag <body>
🦁 : “Silahkan dipahami dulu maksud dari kedua tag itu..”
Kita akan coba menampilkan hal lain di website kita pada postingan berikutnya.
Silahkan beri komentar jika ada yang kurang jelas, atau mungkin saran dan kritik, tempat berkomentar selalu terbuka.