File và thư mục đầu tiên cho website

Chúng ta sẽ tạo thư mục nơi website của bạn sống, và kiểm tra mọi thứ hoạt động.

Website sống trong một thư mục

Mọi website trên thế giới thực ra chỉ là một đống file trong một thư mục. Hãy tạo của bạn.

Tạo thư mục tên my-website. Trên màn hình nền, bấm phải → New Folder (trên Mac cũng là New Folder, trên Windows là New → Folder) và đặt tên my-website.
Mở thư mục trong VS Code. Khởi chạy VS Code và từ menu chọn File → Open Folder… rồi tìm thư mục my-website của bạn. Nếu VS Code hỏi bạn có tin tác giả thư mục này không, bấm Yes, I trust the authors – dù sao bạn chính là tác giả mà!
Tạo file tên index.html. Trên panel bên trái, di chuột lên tên thư mục và bấm biểu tượng New File (trang có dấu cộng). Gõ chính xác: index.html và nhấn Enter.

💡

Tại sao lại là index.html? Đó là tên thống nhất cho trang chính của website. Khi trình duyệt vào một thư mục, nó tìm file tên index.html trước – giống như bước vào trường và đi thẳng đến lớp của mình.

Viết code đầu tiên

Trong file index.html, gõ đoạn này (hoặc sao chép bằng nút ở góc trên bên phải):

<!doctype html>
<html lang="vi">
  <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>

Lưu file: Ctrl+S (trên Mac, Cmd+S). Lưu thường xuyên – file chưa lưu có chấm nhỏ bên cạnh tên trong VS Code.

Mở trang trong trình duyệt

Tìm file index.html trong thư mục (trên màn hình nền → my-website) và bấm đúp để mở. Trình duyệt sẽ mở và hiện trang với chữ “It works!”.

✅

Tự kiểm tra: Bạn thấy tiêu đề lớn “It works!” trong trình duyệt. Nếu vậy – bạn đã có xưởng web hoạt động, và có thể đi thẳng vào Cấp 1!

💡

Mẹo hay: giữ VS Code và trình duyệt mở cạnh nhau. Mỗi khi sửa code, lưu (Ctrl+S) và bấm F5 trong trình duyệt để làm mới. Thay đổi hiện ngay lập tức.

Điều cần nhớ từ chương này

Website là một thư mục đầy file. Của bạn tên my-website.
Trang chính của website luôn tên index.html.
Vòng lặp làm việc: viết code → lưu (Ctrl+S) → làm mới trình duyệt (F5). Bạn sẽ làm đi làm lại nhiều lần.