Sebelumnya sudah dibahas mengenai 3 komponen yang harus diketahui untuk HTML disini, sekarang kita akan membuat dokumen HTML berikut ini. Sebenarnya text editor pun banyak sekali untuk membuat dokumen HTML, bahkan notepad bawaan windows saja bisa dipakai untuk hal tersebut. Namun untuk mudahnya, gunakan salah satu text editor berikut yang sering digunakan untuk membuat dokumen HTML ataupun pemrograman web pada umumnya seperti Notepad++, VS Code, Sublime Text dan lain sebagainya sesuai dengan kebutuhan. Kali ini kita akan membuatnya menggunakan teks editor VS Code. Kalian bisa mengunduhnya di sini dan scroll kebawah untuk memilih sesuai dengan OS komputer atau laptop kalian sesuai dengan tampilan berikut.
Lalu install sesuai dengan petunjuk yang diberikan oleh VS Code. Jika sudah bisa membuka VS Code nya (baik melalu direktori file nya maupun shortcut yang dibuat pada saat instalasi sebelumnya) dan siapkan folder baru untuk menata tampilan workspace VS code nya seperti berikut.
Pilih File di kiri atas -> Open Folder
Pilih folder yang akan digunakan sebagai workplace project HTML kalian. Jika belum dibuat, bisa dibuat folder baru. Jika sudah selesai menentukan foldernya, klik "Select Folder". Disini saya beri nama foldernya "Tutorial HTML". Kemudian arahkan pointer mouse ke baris nama folder tadi dan pilih ikon new file, beri nama "index.html". Karena index.html ini akan menjadi halaman utama website kita.
<!DOCTYPE html>
<html>
<head>
<title>Halaman Utama</title>
</head>
<body>
<p>Selamat Datang, <b>User</b></p>
</body>
</html>
<!DOCTYPE html> menandakan bahwa versi HTML yang digunakan merupakan versi 5 (versi terbaru saat ini)
<html> sebagai format dokumen yang dibuat, walaupun bisa saja diisi dengan bahasa pemrograman lain seperti css, php dan js.
<head> sebagai kepala dari dokumen HTML. Disini dapat berisi judul, script dan link css, dan sebagainya.
<title> untuk menampilkan judul halaman di browser
<body> sebagai bagian tubuh dari HTML. Inilah tempat untuk membuat struktur konten HTML agar ditampilkan ke browser.
<p> untuk membuat satu paragraf yang berisi teks Selamat Datang, User ditambah tag <b> di teks User untuk membuat teksnya menjadi tebal (bold).
*setiap tag yang digunakan disini tidak ada yang bersifat self-closing tags, jadi perlu adanya tag penutup di setiap elemennya yang harus ditempatkan berurutan.
Simpan dokumen HTML dengan shortcut Ctrl + S atau klik File -> Save. Lalu coba buka dokumen HTML tersebut di browser favorit kalian seperti Google Chrome, Mozilla Firefox, Microsoft Edge dan sebagainya. Disini saya akan membukanya dengan microsoft edge dan berikut tampilannya ketika dibuka di browser.
Kesimpulan
Dengan anda membuat dokumen HTML dan membukanya di browser, maka anda dapat memulai untuk mempelajari HTML secara keseluruhan. Untuk browser yang digunakan, sesuaikan dengan favorit dan selera anda sendiri. Sedangkan untuk text editor, bisa dimulai dengan yang ringan seperti notepad++ ataupun sublime text (lisensi berbayar). Atau yang lebih powerful seperti Atom ataupun VS Code.
0 Komentar