Cách dùng Notepad++ để viết và test code HTML

1️⃣ Cài đặt Notepad++

Tải tại: https://notepad-plus-plus.org

Cài đặt như phần mềm bình thường.

2️⃣ Tạo file HTML
Bước 1: Mở Notepad++
Bước 2: Tạo file mới

Chọn:

File → New

Bước 3: Viết code HTML ví dụ:

 

Bước 4: Lưu file
Chọn:

File → Save As

Đặt tên:

index.html

Quan trọng:

Save as type: chọn All types

3️⃣ Chạy file HTML

Có 2 cách:

✔ Cách 1 (đơn giản nhất):

Vào thư mục chứa file

Chuột phải → chọn:

Open with → Chrome

hoặc Edge

👉 Web sẽ chạy ngay

✔ Cách 2 (kéo thả)

Kéo file index.html vào trình duyệt

4️⃣ Chỉnh sửa và test nhanh

Quy trình chuẩn:

Sửa code trong Notepad++

Nhấn Ctrl + S

Qua trình duyệt

Nhấn F5

Xem kết quả

5️⃣ Bật tô màu code (Syntax Highlight)

Nếu chưa có màu:

Vào menu:

Language → H → HTML

Code sẽ đẹp và dễ đọc hơn

6️⃣ Cài plugin Live Preview (khuyên dùng)

Để tự chạy luôn không cần F5:

Bước 1:

Chọn:

Plugins → Plugins Admin

Bước 2:

Tìm:

Preview HTML

hoặc

HTML Preview

Cài đặt

Sau đó dùng:

Plugins → Preview HTML → Preview HTML

7️⃣ Phím tắt quan trọng
Phím    Chức năng
Ctrl + S    Lưu
Ctrl + N    File mới
Ctrl + O    Mở file
Ctrl + F    Tìm
Ctrl + H    Thay thế
F5    Reload web

 

8️⃣ Ví dụ thực tế (nút điều khiển ESP32)

Bạn từng làm ESP32 web, test nhanh bằng Notepad++:

 

9️⃣ Mẹo chuyên nghiệp (cực nhanh)

Tạo file:

index.html

Mở:

Notepad++ bên trái

Chrome bên phải

→ sửa → Ctrl+S → F5

→ test cực nhanh

🔥 Nếu bạn làm web điều khiển ESP32

Mình khuyên dùng:

👉 Visual Studio Code + Live Server

vì:

Tự reload

Debug tốt hơn

Chuyên nghiệp hơn