File dan folder pertama kamu untuk web

Kami akan menyiapkan folder tempat situs web kamu akan ditampilkan, dan memeriksa apakah semuanya berfungsi.

Sebuah situs web berada dalam sebuah folder

Setiap situs web di dunia sebenarnya hanyalah tumpukan file dalam satu folder. Ayo siapkan milikmu.

Buat folder bernama situs web saya. Di desktop kamu, klik kanan → Folder Baru (di Mac juga disebut Folder Baru, di Windows Baru → Folder) dan beri nama situs web saya.
Buka folder di VS Code. Luncurkan VS Code dan dari menu pilih File → Buka Folder… dan temukan folder situs web saya kamu. Jika VS Code menanyakan apakah kamu memercayai penulis folder ini, klik Ya, saya percaya penulisnya – Andalah penulisnya!
Buat file bernama index.html. Di panel kiri, arahkan kursor ke nama folder dan klik ikon File Baru (halaman dengan tanda plus). Ketik persis: index.html dan tekan Enter.

💡

Mengapa index.html secara khusus? Ini adalah nama yang disepakati untuk laman utama situs web. Saat browser masuk ke dalam sebuah folder, pertama-tama browser akan mencari file bernama index.html – seperti berjalan ke sekolah dan langsung menuju ke ruang kelas kamu sendiri.

Tulis kode pertama kamu

Di file index.html, ketik ini (atau salin menggunakan tombol di kanan atas):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Simpan file: Ctrl+S (di Mac, Cmd+S). Sering-seringlah menyimpan – file yang belum disimpan memiliki titik kecil di samping namanya di VS Code.

Buka halaman kamu di browser

Temukan file index.html di folder kamu (di desktop → situs web saya) dan klik dua kali untuk membukanya. Browser akan terbuka menampilkan halaman kamu dengan tulisan “Berhasil!”.

✅

Periksa diri kamu: kamu melihat judul besar yang bertuliskan “Berhasil!” di peramban. Jika ya – kamu sekarang memiliki bengkel web yang aktif, dan kamu dapat langsung menuju ke Level 1!

💡

Trik praktis: biarkan VS Code dan browser kamu tetap terbuka berdampingan. Setiap kali kamu mengubah sesuatu dalam kode, simpan (Ctrl+S) dan tekan F5 di browser untuk menyegarkan. Perubahan kamu segera muncul.

Apa yang dapat diambil dari bab ini

Situs web adalah folder yang penuh dengan file. Milik kamu disebut situs web saya.
Halaman utama situs web selalu disebut index.html.
Putaran kerja: tulis kode → simpan (Ctrl+S) → segarkan browser (F5). kamu akan melakukan ini berulang kali.