Persiapan membuat 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

Menulis HTML di Text Editor

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

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

2. Tulis apa saja yang kamu mau ✍🏽
   Contoh saya mengetik “Halo koding!”

3. 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.

Kamu akan melihat ini

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.

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.