Unduh PDFUnduh PDFX
Artikel ini disusun bersama Stan Kats. Stan Kats adalah Pakar Teknologi Profesional sekaligus COO dan Kepala Teknologi di The STG IT Consulting Group di West Hollywood, California. Stan menyediakan solusi teknologi komprehensif bagi bisnis melalui layanan TI terkelola, dan solusi bagi individu melalui bisnis layanan konsumennya, Stan's Tech Garage. Stan meraih gelar BA dalam Hubungan Internasional dari The University of Southern California. Ia memulai kariernya dengan bekerja di dunia IT Fortune 500. Stan mendirikan perusahaannya dan menawarkan kepakaran tingkat perusahaan untuk usaha kecil dan individu.
Artikel ini telah dilihat 45.810 kali.
Visual Studio Code merupakan editor (penyunting) kode sumber (source code) buatan Microsoft. Program ini tersedia untuk Windows, Linux, dan macOS. Dengan perangkat lunak ini, Anda bisa menulis dan menyunting kode dalam beragam bahasa pengodean, termasuk HTML. Namun, apa yang harus dilakukan jika Anda ingin menjalankan kode HTML untuk melihat tampilannya? Untungnya, ada beberapa ekstensi untuk Visual Studio Code yang dapat digunakan untuk menjalankan kode HTML secara mudah dari dalam Visual Studio Code. Anda juga bisa menjalankan berkas HTML menggunakan Terminal. Artikel How.com.vn ini menjelaskan cara menjalankan berkas HTML menggunakan Visual Studio Code.
Langkah
Buka Visual Studio Code. Program ini mempunyai ikon berbentuk pita biru. Jalankan Visual Studio Code dengan mengeklik ikonnya. Anda bisa menemukan aplikasi ini di dalam menu Start (Windows), di folder Applications (Mac), atau di dalam menu Apps (Linux).- Jika belum punya, Anda bisa mengunduh aplikasi ini secara gratis di https://code.visualstudio.com/. Klik tombol Download di situs web tersebut, lalu buka berkas instalasinya dari dalam peramban (browser) web atau folder Downloads di komputer. Ikuti petunjuk yang diberikan untuk memasangnya.
Buka atau buatlah berkas HTML baru. Buka atau buatlah berkas baru dengan melakukan salah satu langkah di bawah ini:- Buatlah berkas baru dengan mengeklik File pada bilah menu (menu bar) di sisi atas, dan lanjutkan dengan mengeklik New File. Sekarang Anda bisa mulai mengetik kode HTML.
- Buka berkas yang telah ada dengan mengeklik File pada bilah menu di sisi atas, dan lanjutkan dengan mengeklik Open File. Cari berkas HTML yang diinginkan dan pilih berkas tersebut dengan mengekliknya. Setelah itu, klik Open.
Simpan berkasnya dalam bentuk HTML. Jika Anda sudah siap menjalankan berkas HTML di Visual Studio Code, simpan berkasnya dalam bentuk HTML. Setelah berkas HTML disimpan, Anda bisa menjalankannya di peramban yang Anda sukai. Simpan berkas HTML di Visual Studio Code dengan melakukan langkah-langkah ini:- Klik File pada bilah menu di sisi atas.
- Klik Save as.
- Namai berkasnya di samping "File Name".
- Pada menu buka-bawah (drop-down) di samping "Save as type", pilih "HTML".
- Klik Save.
Iklan
Buka Visual Studio Code. Ikonnya berbentuk pita berwarna biru. Jalankan Visual Studio Code dengan mengeklik ikonnya. Anda bisa menemukannya di dalam menu Start (pada Windows), folder Applications (untuk Mac), atau menu Apps (untuk Linux).
Buka atau buatlah berkas HTML baru. Jika belum melakukannya, buka berkas HTML yang sudah ada, atau buatlah berkas HTML baru, lalu simpan ke format HTML. Jika berkas HTML sudah dibuka, klik tab yang berisi berkas HTML di sisi atas layar untuk menampilkannya.
Buka Terminal baru. Lakukan ini dengan mengeklik Terminal di sisi atas layar, dan mengeklik New Terminal. Terminal merupakan satu-satunya cara untuk membuka berkas HTML di Visual Studio Code tanpa harus menggunakan ekstensi. Cara ini juga paling rumit.- Sebagai alternatif, Anda bisa mengeklik View di sisi atas dan mengeklik Terminal.
Tuliskan cd yang diikuti dengan path berkas HTML-nya, lalu tekan ↵ Enter. Anda akan diarahkan ke lokasi berkas HTML. Sebagai contoh, jika berkas HTML berada di dalam folder Documents, tik cd \Users\namapengguna\Documents dan tekan tombol Enter.- Jika berkas HTML disimpan ke huruf drive lain (bukan di drive yang sama dengan sistem operasi komputer), gantilah huruf drive tersebut di terminal agar Anda bisa membuka path ke berkas HTML. Cara melakukannya adalah dengan mengetikkan huruf drive-nya (misalnya D: untuk drive D:) dan menekan Enter.
- Apabila Anda lupa dengan lokasi penyimpanan berkas HTML, klik kanan tab untuk berkas HTML tersebut di sisi atas layar, lalu pilih Copy Path. Tik cd di Terminal, lalu tempelkan (paste) path berkas HTML tersebut langsung di sebelahnya. Hapus nama berkas di akhir path, kemudian tekan Enter.
- Jika nama folder di dalam path berkas HTML memiliki spasi, Terminal tidak akan bisa membuka folder tersebut. Gunakan File Explorer (Windows) atau Finder (Mac) untuk membuka folder yang memiliki spasi tersebut, dan gantilah nama foldernya dengan menghilangkan spasi. Sebagai contoh, jika foldernya bernama "Berkas HTML", gantilah namanya menjadi "Berkas_HTML".
Tik start yang diikuti dengan nama berkas HTML, lalu tekan ↵ Enter. Sebagai contoh, apabila Anda ingin membuka berkas HTML bernama index, tik start index.html dan tekan tombol Enter. Berkas HTML tersebut akan dibuka di jendela yang baru sehingga Anda bisa melihat pratinjaunya.- Jika ingin menutup pratinjau, klik ikon "x" di sisi atas jendela.[1]
Iklan
Buka Visual Studio Code. Ikonnya berbentuk pita berwarna biru. Jalankan Visual Studio Code dengan mengeklik ikonnya. Anda bisa menemukannya di dalam menu Start (pada Windows), folder Applications (untuk Mac), atau menu Apps (untuk Linux).
Klik tombol Extensions. Ikonnya berbentuk 4 buah kotak yang terdapat di dalam bilah menu di sisi kiri. Menu pencarian Extensions akan dibuka.
Tik HTML Preview di kolom pencarian. Kolom pencarian berada di sisi kiri atas menu Extensions. Layar akan menampilkan daftar ekstensi yang sesuai dengan kata kunci pencarian Anda. "HTML Preview" merupakan sebuah ekstensi untuk Visual Studio Code yang bisa digunakan untuk menampilkan pratinjau berkas HTML dari Visual Studio Code dalam split-screen (pembagian layar secara terpisah) atau dalam jendela penuh.
Klik ekstensi "HTML Preview". Opsi ini akan berada di urutan paling atas daftar ekstensi yang ditampilkan. Ekstensi ini dikembangkan oleh Thomas Haakon Townsend. Ikonnya berbentuk perisai berwarna oranye yang di tengahnya terdapat angka "5" (logo HTML 5).
Klik Install. Tombol ini terdapat di bawah heading "HTML Preview" pada halaman informasi di samping kanan menu ekstensi. Dengan mengekliknya, komputer akan memasang ekstensi tersebut. Tunggu beberapa menit hingga ekstensinya selesai dipasang.
Buka atau buatlah berkas HTML baru. Jika belum melakukannya, buka berkas HTML yang sudah ada, atau buatlah berkas HTML baru, lalu simpan ke format HTML. Jika berkas HTML sudah dibuka, klik tab yang berisi berkas HTML di sisi atas layar untuk menampilkannya.
Klik tombol pratinjau split-screen. Ikonnya berbentuk split-screen yang memiliki kaca pembesar di sisi kirinya. Anda bisa menemukannya di sudut kanan atas. Ini akan membuka pratinjau berkas HTML secara split-screen di Visual Studio Code.- Tekan dan tahan Alt, lalu klik tombol pratinjau untuk melihat pratinjau kode HTML dalam layar penuh.
- Jika ingin menutup pratinjau, klik ikon "x" di dalam tab pratinjau di sisi atas layar.
Iklan
Buka Visual Studio Code. Ikonnya berbentuk pita berwarna biru. Jalankan Visual Studio Code dengan mengeklik ikonnya. Anda bisa menemukannya di dalam menu Start (pada Windows), folder Applications (untuk Mac), atau menu Apps (untuk Linux).
Klik tombol Extentions. Ikonnya berbentuk 4 buah kotak pada bilah menu di sisi kiri. Menu pencarian Extensions akan ditampilkan.
Tik open in browser di kolom pencarian. Kolom pencarian berada di sisi kiri atas menu Extensions. Daftar ekstensi yang sesuai dengan kata kunci Anda akan ditampilkan. "Open in browser" merupakan ekstensi untuk Visual Studio Code yang bisa digunakan untuk membuka berkas HTML menggunakan peramban web yang Anda pilih dari dalam Visual Studio Code.
Klik ekstensi "open in browser". Ekstensi ini akan berada di urutan teratas daftar hasil pencarian. Ini adalah ekstensi buatan TechER yang namanya menggunakan huruf kecil semua. Pilih ekstensi tersebut dengan mengekliknya.
Klik Install. Tombol ini terdapat di bawah heading "open in browser" dalam halaman informasi di samping kanan menu ekstensi. Ekstensi ini akan dipasang setelah Anda mengekliknya. Tunggu selama beberapa menit hingga esktensi selesai dipasang.
Buka atau buatlah berkas HTML baru. Jika belum melakukannya, buka berkas HTML yang sudah ada, atau buatlah berkas HTML baru, lalu simpan ke format HTML. Jika berkas HTML sudah dibuka, klik tab yang berisi berkas HTML di sisi atas layar untuk menampilkannya.
Klik kanan di tempat mana saja di dalam kode HTML. Ini akan memunculkan menu konteks.
Klik Open in Default Browser. Berkas HTML Anda akan dibuka di peramban web default komputer. Setelah melakukannya, peramban web akan menampilkan berkas HTML-nya.[2]- Sebagai alternatif, Anda bisa mengeklik Open in Other Browser dan mengeklik 2 kali peramban web yang Anda inginkan.
- Apabila Anda diminta untuk memilih peramban default, klik peramban yang ingin digunakan untuk membuka berkas, lalu klik Ok.
Iklan
Referensi
Tentang How.com.vn ini
Pakar Teknologi Profesional
Artikel ini disusun bersama Stan Kats. Stan Kats adalah Pakar Teknologi Profesional sekaligus COO dan Kepala Teknologi di The STG IT Consulting Group di West Hollywood, California. Stan menyediakan solusi teknologi komprehensif bagi bisnis melalui layanan TI terkelola, dan solusi bagi individu melalui bisnis layanan konsumennya, Stan's Tech Garage. Stan meraih gelar BA dalam Hubungan Internasional dari The University of Southern California. Ia memulai kariernya dengan bekerja di dunia IT Fortune 500. Stan mendirikan perusahaannya dan menawarkan kepakaran tingkat perusahaan untuk usaha kecil dan individu. Artikel ini telah dilihat 45.810 kali.
Daftar kategori: Perangkat Lunak
Halaman ini telah diakses sebanyak 45.810 kali.
Apakah artikel ini membantu Anda?
⚠️ Disclaimer:
Content from Wiki How Bahasa Indonesia language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
Iklan
