#3: HTML Editors

Written by: Inez Amandha



HTML Editor atau lebih dikenal dengan sebutan Text Editor adalah suatu aplikasi atau software yang digunakan oleh pengguna untuk membuat, mengubah, atau mengedit file teks. Sebenarnya bisa digunakan untuk membuat program-program komputer menggunakan bahasa pemrograman. Bisa juga dimanfaatkan untuk membuat halaman website atau aplikasi. Software ini ditujukan untuk mempermudah pengguna dalam bidang pemrograman.

Ada berbagai macam text editor yang dapat digunakan dalam menuliskan bahasa pemrograman terutama untuk pembahasan kali ini yaitu HTML, antara lain:

  • Visual Studio Code

  • Sublime Text

  • Notepad++

  • dan lain-lain

Yang akan dibahas di artikel ini adalah panduan untuk menginstall salah satu Text Editor yaitu Visual Studio Code. Untuk Text Editor yang lainnya kurang lebih akan sama seperti yang di bawah ini.



Cara Menginstall Visual Studio Code



Buka Link: https://code.visualstudio.com/download

  • Pilih sesuai OS kalian (Windows, Linux, atau Mac)



Berikut contoh simulasi untuk install Visual Studio Code di Windows:

1. Buka file yang sudah di download dan klik Next.


2. Pilih "I accept the agreement" dan klik Next.


3. Akan muncul penempatan direktori untuk Visual Studio Code, kemudian klik Next kembali dan tampilannya seperti di bawah ini. Pilih "Create a desktop icon" dan "Add to PATH (available after restart)", kemudian klik Next.


4. Setelah itu klik Install dan tunggu sampai selesai.


5. Setelah itu klik Install dan tunggu sampai selesai.



Cara Menginstall Extension


Extension pada Visual Studio Code hanyalah tambahan tools untuk memudahkan user menuliskan bahasa pemrograman. Ini tidak wajib, namun, extension ini bisa diinstall untuk mempermudah user dalam menggunakan Text Editor - Visual Studio Code.



open in browser by TechER


1. Klik tombol Extensions yang ada di tampilan seperti di bawah ini.


2. Setelah di klik akan muncul seperti di bawah ini.


3. Ketikkan di search bar tersebut → open in browser


4. Klik open in browser tersebut dan akan keluar tampilan seperti di bawah ini


5. Klik Install dan selesai!



Apa gunanya Extension di atas?

Extension tersebut memudahkan kita untuk membuka file HTML yang telah dibuat di browser


Contoh:


Klik kanan file index.html


Akan ada tampilan dan tulisan di paling bawah Open in Default Browser dan Open In Other Browsers. Jika di klik, file tersebut akan langsung terbuka di browser kalian!




Cara Menggunakan Visual Studio Code


Tampilan awal dari Visual Studio Code:


Dalam membuat website, akan ada 3 file yang kita buat. Formatnya antara lain:

  • .html

  • .css

  • .js


Akan dijelaskan untuk membuat file HTML. Cara membuat file CSS dan JS akan sama, hanya saja file typenya yang berbeda. Ada 2 cara untuk membuat file, antara lain:



1. Tanpa membuka folder


Klik File di pojok kiri atas, lalu pilih New File


Tampilannya akan sebagai berikut:


Di bagian pojok kanan bawah ada tulisan Plain Text

Klik dan akan muncul popup seperti ini:


Membuat file HTML

Ketikkan kata HTML untuk membuat file HTML. Lalu klik HTML tersebut


Dan file HTML sudah terbuat! Kalian bisa ketikkan code HTML nantinya :)


Jangan lupa untuk save filenya dengan cara:

Klik File di pojok kanan atas lalu pilih Save ATAU klik Ctrl dan S di keyboard kalian secara bersamaan.


Taruh file di folder komputer kalian :)

Disarankan untuk menaruh file HTML di folder yang sama. Caranya klik New Folder


Ketik Personal Website (atau nama folder lainnya sesuai yang kalian inginkan


Klik Folder Personal Website atau klik Open


Jangan lupa untuk mengganti tulisan Untitled-1 dengan nama file sesuai yang kalian inginkan (Contoh: index.html)



2. Dengan membuat folder


Klik File di pojok kiri atas lalu pilih Open Folder...


Klik New Folder dan ketikkan nama yang kalian inginkan. Misalkan "Personal Website".


Klik Folder Personal Website atau klik Select Folder.


Akan terbuka tampilan baru seperti ini:


Untuk membuat file dapat menggunakan simbol berikut:


Untuk membuat folder dapat menggunakan simbol berikut:



Membuat file baru

Klik New File dan akan muncul:

Ketik nama file yang kalian inginkan. Contoh:

  • Untuk file HTML: file1.html

  • Untuk file CSS: file1.css

  • Untuk file JS: file1.js

Lalu klik file yang kalian ingin edit!



Membuat folder baru

Klik New Folder dan akan muncul:


Ketik nama folder yang kalian inginkan misalkan "Folder 1"


Untuk menambahkan file di dalam Folder 1, klik Folder 1 sampai berwarna biru


Lalu klik New File


Ketikkan nama yang kalian inginkan, misalkan

  • Untuk file HTML: file1.html

  • Untuk file CSS: file1.css

  • Untuk file JS: file1.js


Klik file yang kalian inginkan untuk edit! :)

SELAMAT MENCOBA! :)



References:

https://www.iltekkomputer.com/cara-menginstall-visual-studio-code-di-windows/

13 views0 comments

Recent Posts

See All