Thiết lập môi trường
30 phút Nhập mônChỉ cần trình duyệt và trình soạn thảo. Bắt đầu ngay lập tức.
Tổng quan
Thiết lập môi trường là chuẩn bị để bắt đầu lập trình. Trên trang web này, bạn có thể thực hành ngay trên trình duyệt mà không cần cài đặt gì.
Điểm tốt của phát triển Web là bạn có thể bắt đầu với các công cụ có sẵn trên máy tính. Hãy bắt đầu một cách nhẹ nhàng.
- Vai trò và cách sử dụng trình duyệt
- Cách tạo tệp HTML (cho phát triển local)
- Cách sử dụng màn hình thực hành (Mã → Chạy → Xem trước)
- Cách cài đặt VS Code (tùy chọn)
Chi tiết
Trình duyệt là gì?
Trình duyệt là phần mềm để xem trang web như Chrome, Edge, Firefox, Safari. Nó đọc mã HTML và hiển thị dưới dạng con người có thể hiểu được.
- Windows: Edge
- Mac: Safari
- Mọi OS: Chrome
- Các trình duyệt có tính năng cơ bản giống nhau
- Lập trình viên thường dùng Chrome vì DevTools rất mạnh
- Nhầm trình duyệt với Google Search
- Dùng Internet Explorer → Đã quá cũ và không được hỗ trợ
Luồng thực hành
Viết mã vào trình soạn thảo trên màn hình, nhấn "Chạy" (Run) và kết quả hiện ngay ở phần xem trước. Không cần cài đặt. Hãy thử cảm giác nhấn nút chạy!
- 1. Đọc giải thích
- 2. Viết mã vào trình soạn thảo
- 3. Nhấn nút Chạy
- 4. Kiểm tra kết quả
- Ban đầu có thể copy lời giải để trải nghiệm cảm giác "chạy được"
- Nếu có lỗi, nhấn vào số dòng để tìm vị trí
- Bắt đầu ngay với bài khó → Hãy đi theo thứ tự Trải nghiệm → h1 → p
Tệp HTML là gì? (Cho phát triển local)
Tệp HTML là bản thiết kế của trang web, có đuôi .html. Bạn có thể tạo bằng Notepad. Trong các bài tập trên web này, bạn không cần tạo tệp.
- index.html: Tên thường dùng cho trang chủ
- about.html: Trang giới thiệu
- Tên tệp nên dùng chữ cái tiếng Anh và số không dấu
- Phải có đuôi .html trình duyệt mới hiểu
- Lưu thành index.html.txt → Bị thừa đuôi .txt
- Dùng tên tệp có dấu tiếng Việt
Các bước thực hành
- 1 Mở trang bài tập 1 phút
Mở danh sách các bài tập thực hành.
- Từ menu chọn "Học tập" → "Bài tập thực hành"
- Hoặc truy cập trực tiếp /vi/learn/
- 2 Giải bài tập trải nghiệm 2 phút
Trong bài đầu tiên, hãy nhấn nút chạy để xem kết quả.
- Chọn danh mục "Thiết lập môi trường"
- Chọn bài "Trải nghiệm: Hãy chạy thử"
- Giữ nguyên mã và nhấn "Chạy"
- Thấy chữ "Hello World" hiện ra là thành công
<h1>Hello World</h1> - 3 Tự viết mã HTML đầu tiên 5 phút
Dùng thẻ h1 để hiển thị chữ "Hello World".
- Nhập <h1>Hello World</h1> vào trình soạn thảo
- Sử dụng dấu < và > ở chế độ bán dẫn (half-width)
- Nhấn chạy và kiểm tra
<h1>Hello World</h1>
Câu hỏi thường gặp
- Sửa mã rồi mà màn hình không đổi? Tại sao?
- Rất có thể do bộ nhớ đệm (cache) của trình duyệt. Hãy mở DevTools (F12), click chuột phải vào nút tải lại trang và chọn "Xóa bộ nhớ đệm và tải lại cứng".
- Dùng tệp local (file://) có được không?
- Lúc đầu thì được, nhưng sau này khi dùng API hay module, trình duyệt sẽ chặn vì lý do bảo mật. Tốt nhất nên dùng tiện ích "Live Server" trong VS Code để chạy một máy chủ ảo.
- Lưu tệp .html rồi mà nó vẫn hiện văn bản thuần túy?
- Lỗi phổ biến trên Windows! Do cài đặt ẩn đuôi tệp nên thực tế tên tệp là index.html.txt. Hãy vào cài đặt Folder Options và tích vào "File name extensions" để hiện đuôi tệp.
- Có tiện ích nào hay cho VS Code không?
- Hãy cài gói ngôn ngữ tiếng Việt (nếu cần), tiện ích "Live Server" để xem thay đổi tức thì, và "Auto Rename Tag" để tự động đổi thẻ đóng khi bạn đổi thẻ mở.
① Đã đọc giải thích. Tiếp theo ② Làm bài tập.
Môi trường đã sẵn sàng!
Tiếp theo hãy học cơ bản về HTML. Chúng ta sẽ học từng thẻ một để cấu trúc văn bản.