Logo Komodo Koding /Koding

Persiapan membuat website

Apa itu text editor? Persiapan apa saja yang dibutuhkan untuk menulis kode HTML dalam pembuatan website?

Kita butuh alat untuk menulis kode yang dibutuhkan.

Alat apa yang dibutuhkan untuk membuat website?

Ada dua :

  1. Text editor = Alat untuk menulis kode
  2. Browser = Alat untuk menampilkan hasilnya

Kita butuh tempat untuk menulis kodenya. Secara umum, di OS masing-masing sudah tersedia Text Editor tanpa perlu menginstall lagi. Contoh Text Editor:

  • OS Windows : Notepad
  • OS Mac : TextEdit
  • OS Linux : Vi / Nano

Tidak masalah Text Editor apapun yang kamu pilih. Ini hanya alat dengan tujuan sama. Untuk memudahkan kamu yang ingin mengikuti panduan ini, kita akan menggunakan text-editor VS Code. Kamu bisa unduh secara gratis di sini: situs VS Code

screenshot VS CODE

Silahkan unduh, install dan membuka aplikasi VS Code ini.

Membuat file HTML

Setelah membuka aplikasi VS Code atau text editor pilihan kamu.

  1. Buat file baru 📖
    Dengan klik Menu > File > new file
screenshot new file di VSCode
  1. Tulis apa saja yang kamu mau ✍🏽
    Contoh saya mengetik “Halo koding!”
Gif mengetik
  1. Simpan file ini 💾
    Dengan klik ctrl + S atau pada Mac command + s atau klik menu > file > save

Simpan dengan nama index.html.

Kamu bisa mengganti index dengan nama apa saja yang kamu mau. Yang penting adalah extensi file tersebut yaitu .html. Dengan memberi nama .html kita memberitahu apa jenis dari text ini.

Melihat hasil di Browser

Lihat di folder tempat kamu menyimpan file tadi. Kamu bisa klik 2x atau klik kanan > buka di browser pilihanmu.

Membuka file html

Kamu akan melihat ini

Hasil html

Selamat! 🥳🥳

Kamu sudah berhasil membuat file HTML pertamamu. Mudah bukan? Coba ganti isinya dengan tulisan lain yang kamu inginkan.

Code Playground di kodi.ng

Di beberapa bagian kamu juga akan melihat tampilan seperti ini

See the Pen sample P and h1 tag by Sekolah Koding (@sekolahkoding) on CodePen.

Ini adalah tempat kamu bermain (playground), di mana kamu bisa mengubah tulisan di sebelah kiri (jika membuka dengan ukuran handphone perlu klik tabnya), sebelum melihat hasilnya di sebelah kanan beberapa detik kemudian.

🤔 Coba deh

Ganti tulisan di atas dan tunggu beberapa detik

Kodenya bisa kamu salin ke text-editormu jika ingin mencoba sendiri.

Selanjutnya

File HTML bisa berisi text biasa seperti di atas. Namun bisa jauh lebih asyik dari ini! seperti menambah gambar, link, video dan elemen lainnya!

Kita akan pelajari seputar hal ini di bagian berikutnya.