✏️ CODE HTMLkéo–thả file .html vào đây · Tab = thụt lề · Ctrl+Enter = chạy
👁️ XEM TRƯỚC
CONSOLE
🧱 Bộ khung chuẩn của một trang HTML5
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tiêu đề hiện trên tab trình duyệt</title> <style>/* CSS trang trí viết ở đây */</style> </head> <body> Nội dung hiển thị viết ở đây <script>/* JavaScript viết ở đây */</script> </body> </html>
💡 Dán khung này vào khung soạn thảo (hoặc bấm 📋 Chèn mẫu) rồi sửa dần — đó là cách học HTML nhanh nhất.
✍️ Thẻ văn bản
| Thẻ | Công dụng |
|---|---|
<h1> … <h6> | Tiêu đề lớn → nhỏ (mỗi trang chỉ nên có một <h1>) |
<p> | Đoạn văn |
<b> / <strong> · <i> / <em> | Chữ đậm · chữ nghiêng |
<u> · <s> · <mark> | Gạch chân · |
<br> · <hr> | Xuống dòng · đường kẻ ngang (không cần thẻ đóng) |
<span> | Bọc một cụm chữ để trang trí riêng bằng CSS |
🔗 Liên kết · Ảnh · Danh sách
| Cú pháp | Công dụng |
|---|---|
<a href="https://vd.vn" target="_blank">chữ hiển thị</a> | Liên kết — target="_blank" để mở tab mới |
<img src="anh.jpg" alt="mô tả" width="200"> | Chèn ảnh (trong công cụ này hãy dùng URL đầy đủ hoặc data URI) |
<ul><li>mục</li></ul> | Danh sách gạch đầu dòng |
<ol><li>mục</li></ol> | Danh sách đánh số 1, 2, 3… |
📋 Bảng & Form
| Cú pháp | Công dụng |
|---|---|
<table> <tr><th>Cột A</th><th>Cột B</th></tr> <tr><td>ô 1</td><td>ô 2</td></tr> </table> | Bảng: <tr> là hàng, <th> ô tiêu đề, <td> ô dữ liệu. Thêm CSS border-collapse:collapse cho gọn. |
<input type="text" placeholder="gợi ý"> | Ô nhập chữ — còn có type="email", "number", "date", "checkbox"… |
<select><option>A</option></select> | Hộp chọn |
<button onclick="tenHam()">Bấm</button> | Nút bấm gọi hàm JavaScript |
🎨 Bố cục & nhúng CSS, JavaScript
| Cú pháp | Công dụng |
|---|---|
<div> · <header> · <main> · <footer> | Khối bố cục — <div> là khối đa năng phổ biến nhất |
<style>body{color:red}</style> | Viết CSS ngay trong trang (đặt trong <head>) |
<p style="color:blue">…</p> | CSS gắn thẳng vào một thẻ |
<script>alert('Hi')</script> | Viết JavaScript ngay trong trang (thường đặt cuối <body>) |
<!-- ghi chú --> | Chú thích — trình duyệt bỏ qua, không hiển thị |
🔣 Ký tự đặc biệt hay dùng
| Gõ vào | Hiển thị |
|---|---|
< · > | < · > (để hiện dấu nhỏ hơn/lớn hơn mà không bị hiểu nhầm là thẻ) |
& | & |
" | " (dấu nháy kép trong thuộc tính) |
| Dấu cách không bị gộp / không xuống dòng |
© · → | © · → |
❓ Hỏi đáp nhanh
HTML là gì?
HTML (HyperText Markup Language) là ngôn ngữ tạo nên bộ khung của mọi trang web: tiêu đề, đoạn văn, ảnh, liên kết, bảng, nút bấm… Trình duyệt đọc file HTML rồi "vẽ" thành trang web bạn nhìn thấy. Kết hợp thêm CSS (trang trí) và JavaScript (tương tác) là có một trang web hoàn chỉnh — cả ba đều viết chung được trong một file .html.
File .html là gì? Mở và tạo bằng cách nào?
File
.html (hoặc .htm) chỉ là file văn bản thuần chứa code HTML. Nháy đúp là mở được bằng trình duyệt; muốn xem code thì mở bằng Notepad/TextEdit hoặc dán vào công cụ này. Muốn tạo file mới: soạn code ở khung bên trái rồi bấm ⬇️ Tải .html — file tải về nháy đúp là chạy, không cần cài gì thêm.JavaScript trong này có chạy không? Có an toàn không?
Có — bật Chạy JavaScript (mặc định bật) là code JS trong trang chạy thật: nút bấm, đồng hồ, hiệu ứng… đều hoạt động. Phần xem trước được đặt trong iframe sandbox — một "hộp cách ly" của trình duyệt: code bên trong không đọc được dữ liệu của công cụ hay trang khác, nên dán code lạ vào xem thử cũng an toàn. Bấm ▶️ Chạy lại để chạy code từ đầu (đồng hồ, bộ đếm… sẽ được đặt lại).
Console dùng để làm gì?
Bật ô Console để xem các thông điệp
console.log() và lỗi JavaScript của code bạn đang thử — giống DevTools của trình duyệt nhưng gọn hơn. Khi code có lỗi, console tự mở và đếm số lỗi ở góc phải để bạn biết ngay chỗ sai (kèm số dòng nếu có).Code tôi dán có bị gửi lên mạng không?
Không. Toàn bộ xử lý diễn ra ngay trong trình duyệt của bạn — không có máy chủ, không thu thập dữ liệu. Nếu trình duyệt cho phép, nội dung được lưu cục bộ (localStorage) để lần sau mở lại không mất.
Vì sao ảnh / CSS / JS theo đường dẫn tương đối không hiện?
Code kiểu
<img src="anh.jpg"> trỏ tới file nằm cạnh trang web thật — trong công cụ này không có file đó nên ảnh không hiện. Cách xử lý: dùng URL đầy đủ (https://…), dùng data URI (ảnh mã hóa ngay trong code), hoặc tải file .html về máy đặt cạnh ảnh rồi mở. Thư viện từ CDN (https://…) vẫn tải được nếu máy đang có mạng.Làm sao lưu thành file hoặc chuyển thành PDF?
Bấm ⬇️ Tải .html để lưu file (tên file tự đặt theo thẻ
<title>). Muốn PDF: mở file vừa tải bằng trình duyệt, nhấn Ctrl/Cmd + P → Save as PDF. Nếu nút tải bị chặn (khi công cụ được nhúng trong trang khác, ví dụ Notion), hãy dùng 📋 Sao chép code rồi dán vào file mới.Công cụ này khác gì Preview Markdown?
Preview Markdown dành cho cú pháp viết tài liệu (
#, **, -…) và chuyển nó thành HTML hiển thị. Còn công cụ này chạy trực tiếp code HTML/CSS/JS — đúng như trình duyệt sẽ hiển thị. Viết ghi chú, README → dùng Markdown; thử giao diện web, học HTML, kiểm tra file .html ai đó gửi → dùng công cụ này.Vì sao trang React/Vue hoặc web phức tạp không chạy?
Các dự án React/Vue/Next… cần bước build và máy chủ riêng nên không chạy từ một file HTML đơn. Công cụ này dành cho HTML/CSS/JavaScript thuần — đủ cho việc học, làm giao diện tĩnh, email template, landing page đơn giản. (Mẹo: thư viện có bản CDN như Chart.js, Tailwind CDN… vẫn nhúng được nếu có mạng.)