Cara Menggunakan Vscode Untuk Bahasa Pemrograman HTML Untuk pemula

Bagi kamu yang baru mulai belajar pemrograman web, mengenal dan menggunakan bahasa pemrograman HTML adalah langkah awal yang sangat penting. Salah satu editor kode yang paling populer dan ringan untuk menulis HTML adalah Visual Studio Code (vscode). artikel ini akan membahas secara lengkap dan sederhana bagaimana cara menggunakan HTML di VScode serta setup yang di rekomendasikan agar proses belajar semakin nyaman dan efektif.

apa itu VSCode

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halam web. semua website, dari yang paling sederhana hingga kompleks, pasti menggunakan HTML sebagai kerangka utamanya.

sementara itu, Visual Studio Code adalah editor kode sumber buatan microsoft yang mendukung banyak bahasa pemrograman, termasuk HTML. VSCode terkenal karena ringan, fleksibel, dan memiliki banyak ekstensi yang membantu produktivitas pengembang.

langkah-langkah menggunakan HTML di VSCode

Install VSCode

Langkah pertama adalah memastikan bahwa VSCode sudah terpasang di komputer anda. jika belum, kamubisa menggunduh secara gratis melalui situs resminya : https://code.visualstudio.com

pilih versi sesuai dengan sistem operasi yang anda gunakan (windows, macOS, linux), lalu ikuti proses instalasinya.

Membuat file HTML baru

setelah VSCode terpasang dan di jalankan, ikuti langkah berikutnya:

klik menu file > new file atau tekan ctrl + N untuk membuat file baru, jemudian simpan file tersebut dengan nama yang berakhiran .html, seperti contoh index.html

Menggunakan Emmet untuk menyusun Struktur HTML

VSCode telah terintegrasi dengan Emmet, sebuah fitur untuk menulis kode HTML secara cepat menggunakan potongan singkat (snippets).

contohnya :

ketik simbol ! lalu tekan tombol Tab di keyboard. maka akan muncul struktur dasar HTML secara otomatis seperti berikut ini:

<!DOCTYPR html>

<html lang="en">

<head>
    
    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width. initial-scale=1.0"/>

    <title>Document</title>

</head>

<body>

</body>

</html>

struktur ini bisa langsung anda gunakan untuk memulai membangun halam web.

Menambahkan Ekstensi Penting (opsional)

Agar pengalaman ngoding HTML di VSCode lebih nyaman dan canggih, kamu bisa menambahkan beberapa ekstensi berikut:

Live server

Ekstensi ini berfungsi untuk menampilkan hasil kode HTML anda secara langsung di browser, tanpa harus membuka file secara manual.

install melalui menu ekstensi (Ctrl + Shift + x), cari live server lalu klik install. setelah itu, klik kana pada file html dan pilih "open with Live Server"

Prettier

Ekstensi ini gunanya untuk merapikan kode secara otomatis agat lebih mudah dibaca.

Auto Rename Tag

ketika kamu mengubah tag pemnuka, tag penutupnya juga ikut berubah secara otomatis.

HTML Snippet

menyediakan potongan kode HTML siap pakai agar proses penulisan lebih cepat.

Menjalankan dan Mencoba Kode HTML

Setelah menulis Kode HTML, tekan Ctrl + S untuk menyimpan. jika kamu sudah memasang live server, kamu cukup klik kanan pada file dan pilih open with live server, maka browser akan terbuka otomatis dan menampilkan halaman web yang anda buat.

contoh kode sederhana :

<!DOCTYPR html>

<html lang="en">

<head>

    <title>Halaman Pertamaku</title>

</head>

<body>

    <h1>Hallo Dunia</h1>

    <p>ini adalah halaman web pertama saya</p>

</body>

</html>

Belajar HTML tidaklah sulit, apalagi jika kamu menggunakan alat bantu seperti VSCode yang sudah mendukung HTML secara langsung. Dengan mengikuti langkah-langkah diatas, anda bisa memulai membangun halaman web dasar sendiri.Selanjutnya anda bisa melanjutkan belajar CSS untuk mendesin tampilan web, atau JavaScript untuk membuat interaksi.