Viết HTML và xem kết quả ngay: khung xem trước ba bề ngang chạy trong trình duyệt
Công cụ đặt ô soạn mã HTML cạnh một khung xem trước dựng bằng iframe, tự vẽ lại sau mỗi lần bạn ngừng gõ khoảng ba phần mười giây. Bạn đổi bề ngang khung xem giữa ba mức máy tính, máy tính bảng và điện thoại để kiểm tra điểm ngắt, hoặc tắt chế độ tự làm mới khi cần soạn một đoạn dài.
Tính năng nổi bật
- Ô soạn mã HTML dùng phông chữ đều nét, viết được cả thẻ style và thẻ script trong cùng một khối
- Khung xem trước cập nhật tự động sau khi bạn ngừng gõ khoảng ba phần mười giây
- Ba mức bề ngang khung xem: máy tính đầy khung, máy tính bảng 768 điểm ảnh, điện thoại 375 điểm ảnh
- Nút bật tắt chế độ tự làm mới, kèm nút làm mới thủ công khi đã tắt
- Bộ mã mẫu dựng sẵn cho bố cục dạng lưới, dạng hộp linh hoạt và biểu mẫu
- Khung xem chạy trong iframe có hàng rào an toàn nên mã không đụng tới trang chính
- JavaScript trong mã chạy thật, kể cả sự kiện bấm nút và hộp thoại thông báo
- Toàn bộ xử lý nằm trên trình duyệt, mã không được gửi lên máy chủ nào
Khi nào cần một khung xem trước tách rời khỏi dự án
Trong lúc làm việc thật, bạn thường xuyên cần thử một đoạn HTML nhỏ mà không muốn động vào dự án đang chạy: kiểm tra xem một khối gồm ảnh và chữ có xuống hàng đúng ở màn hình hẹp không, thử một quy tắc lưới trước khi đưa vào tệp kiểu dáng chung, xem một đoạn mã ai đó gửi qua tin nhắn thực ra hiển thị ra cái gì, hay dựng một mẫu thư điện tử để chụp màn hình gửi khách duyệt. Mở lại dự án, chạy máy chủ phát triển rồi chờ biên dịch cho một việc mất ba mươi giây là quá vòng vèo, còn tạo một tệp rời trên máy rồi mở bằng trình duyệt thì phải lưu lại và tải lại mỗi lần sửa. Khung xem trước trên trang này bỏ hết các bước đó: bạn gõ, kết quả hiện ra ngay bên cạnh, và không có tệp nào rơi rớt lại trên ổ đĩa. Với người đang học, nó còn có giá trị khác: thấy ngay mối liên hệ giữa dòng mã vừa sửa và thay đổi trên màn hình là cách học nhanh hơn nhiều so với đọc tài liệu suông.
Lợi ích khi sử dụng
- Thử một ý tưởng bố cục trong vài giây mà không cần mở dự án
- Kiểm tra ngay bố cục ở khổ điện thoại thay vì phải thu nhỏ cửa sổ trình duyệt
- Xem một đoạn HTML lạ hiển thị ra sao trước khi dán vào trang thật
- Mã không rời khỏi máy nên yên tâm khi thử đoạn mã lấy từ dự án nội bộ
- Phù hợp để dạy và học vì thấy ngay hệ quả của từng dòng vừa sửa
Cách dùng khung xem trước HTML
- 1Xóa đoạn mã mẫu trong ô bên trái rồi dán hoặc gõ mã HTML của bạn vào.
- 2Nhìn sang khung bên phải, kết quả tự dựng lại sau khi bạn ngừng gõ khoảng ba phần mười giây.
- 3Bấm một trong ba nút bề ngang ở thanh trên cùng để xem bố cục ở khổ máy tính, máy tính bảng hoặc điện thoại.
- 4Nếu đang soạn một đoạn dài và không muốn khung xem chớp liên tục, bấm tắt chế độ tự làm mới rồi dùng nút làm mới khi cần.
- 5Bấm một trong các mẫu mã ở cuối trang nếu muốn bắt đầu từ một bố cục có sẵn thay vì gõ từ đầu.
Khung xem trước dựng lại trang bằng cách nào
Mỗi lần cập nhật, công cụ mở tài liệu bên trong iframe, ghi thẳng toàn bộ nội dung ô soạn thảo vào rồi đóng lại. Cách này khiến trang bên trong được dựng lại từ đầu đúng như khi trình duyệt tải một tệp HTML, nên thẻ style và thẻ script trong mã của bạn đều có hiệu lực thật chứ không bị bỏ qua. Có hai hệ quả cần nắm. Thứ nhất, đây là một tài liệu trọn vẹn chứ không phải một mảnh chèn vào trang hiện tại, vì vậy bạn phải viết cả phần khai báo kiểu dáng và phần kịch bản ngay trong cùng khối mã; không có ô riêng cho CSS và JavaScript như một số công cụ khác. Đặt thẻ style trong phần đầu hoặc thậm chí ngay giữa thân trang đều chạy được. Thứ hai, vì trang được dựng lại toàn bộ, mọi trạng thái bên trong đều mất sau mỗi lần cập nhật: ô nhập liệu bị xóa trắng, biến JavaScript quay về giá trị ban đầu, bộ đếm chạy lại từ đầu. Nếu bạn đang thử một tương tác nhiều bước, hãy tắt chế độ tự làm mới rồi chỉ bấm làm mới khi thật sự cần.
Ba mức bề ngang và những gì chúng không mô phỏng
Ba nút ở thanh trên cùng đặt bề ngang khung xem lần lượt là toàn bộ chiều rộng khả dụng, 768 điểm ảnh và 375 điểm ảnh. Con số 375 tương ứng bề ngang của nhiều dòng điện thoại phổ thông, còn 768 là mốc kinh điển của máy tính bảng dựng đứng. Vì iframe thật sự bị thu hẹp lại chứ không chỉ được phóng nhỏ bằng hiệu ứng hình ảnh, các quy tắc kiểu dáng theo bề rộng bên trong sẽ kích hoạt đúng như trên thiết bị thật. Đây là điểm quan trọng khiến cách xem này đáng tin hơn việc chụp lại rồi thu nhỏ. Tuy vậy có ba thứ khung xem không mô phỏng. Nó không đổi chuỗi nhận dạng trình duyệt, nên đoạn mã nào phân nhánh dựa vào tên thiết bị sẽ vẫn hiểu bạn đang ở máy tính. Nó không giả lập cảm ứng, nên các hiệu ứng khi rê chuột vẫn kích hoạt trong khi trên điện thoại thật thì không. Nó cũng không đổi tỷ lệ điểm ảnh vật lý, nên bạn không kiểm tra được ảnh có bị vỡ trên màn hình mật độ cao hay không. Với ba việc đó, hãy dùng chế độ giả lập thiết bị trong công cụ dành cho nhà phát triển của trình duyệt.
Bộ khung tối thiểu nên có, đặc biệt là khai báo bảng mã cho tiếng Việt
Một tài liệu HTML dùng được nên mở đầu bằng dòng khai báo loại tài liệu, sau đó là thẻ gốc có thuộc tính ngôn ngữ, rồi phần đầu chứa hai thẻ khai báo quan trọng. Thẻ thứ nhất khai báo bảng mã UTF-8; thiếu nó, chữ tiếng Việt có dấu rất dễ hiện thành chuỗi ký tự lạ vì trình duyệt phải tự đoán bảng mã. Đây là lỗi hay gặp nhất khi người ta dán một đoạn mã cũ vào và thấy tiêu đề biến thành ký hiệu vô nghĩa, và cách sửa chỉ mất một dòng. Thẻ thứ hai khai báo khung nhìn với bề rộng bằng bề rộng thiết bị và tỷ lệ phóng ban đầu bằng một; thiếu nó, điện thoại thật sẽ dựng trang ở bề ngang giả định khoảng 980 điểm ảnh rồi thu nhỏ lại, khiến chữ bé xíu dù bạn đã viết đủ quy tắc cho màn hình hẹp. Điều đáng lưu ý là trong khung xem trước này, việc thiếu thẻ khung nhìn không lộ ra vì iframe không hành xử như điện thoại thật, nên hãy tập thói quen viết đủ hai thẻ đó ngay từ đầu thay vì chờ tới lúc mở trên máy thật mới phát hiện.
Hàng rào an toàn của khung xem và giới hạn về tài nguyên bên ngoài
Khung xem chạy trong iframe được đặt hàng rào an toàn cho phép thực thi JavaScript, nghĩa là mã của bạn chạy thật: nút bấm phản hồi, hộp thoại thông báo bật lên, sự kiện được lắng nghe bình thường. Đây là điều cần thiết để thử tương tác, nhưng cũng có nghĩa bạn nên cẩn thận khi dán mã lấy từ nguồn không rõ ràng, vì mã đó thực sự được chạy trên máy bạn chứ không chỉ hiển thị dưới dạng chữ. Hãy đọc lướt qua đoạn mã lạ trước khi dán, đặc biệt để ý các lời gọi gửi dữ liệu ra ngoài. Về tài nguyên bên ngoài, ảnh, phông chữ và thư viện đặt ở địa chỉ trên mạng vẫn tải được nếu bạn đang có kết nối, nên bạn thử được cả những mẫu dùng phông chữ hoặc khung giao diện tải từ mạng phân phối nội dung. Nhưng đường dẫn tương đối kiểu thư mục ảnh nội bộ thì không hoạt động vì tài liệu này không có địa chỉ gốc trên máy bạn; hãy thay bằng đường dẫn đầy đủ hoặc nhúng ảnh dưới dạng chuỗi mã hóa. Cuối cùng, mã bạn gõ không được lưu ở đâu cả, tải lại trang là mất, nên hãy sao chép ra nơi khác nếu đoạn mã đáng giữ.
Vài việc công cụ này làm rất tốt trong công việc thật
Việc thứ nhất là dựng nhanh một khối nội dung để chụp màn hình gửi khách duyệt bố cục trước khi lập trình viên bắt tay vào làm, nhanh hơn nhiều so với vẽ lại bằng phần mềm thiết kế nếu bạn vốn quen HTML. Việc thứ hai là thử mẫu thư điện tử, tuy nhiên cần biết một đặc thù quan trọng: nhiều phần mềm đọc thư loại bỏ thẻ style trong phần đầu và không hiểu các kiểu bố cục hiện đại, nên mẫu thư chạy đẹp ở đây chưa chắc chạy đẹp trong hộp thư; với thư điện tử, quy tắc an toàn vẫn là dựng bằng bảng và viết kiểu dáng ngay trên từng thẻ. Việc thứ ba là kiểm tra một đoạn HTML mà công cụ soạn thảo nội dung sinh ra, chẳng hạn nội dung dán từ tài liệu văn phòng thường kèm hàng loạt thẻ thừa; dán vào đây bạn thấy ngay nó có bị vỡ khoảng cách hay không. Việc thứ tư là dạy học và ôn tập, nhất là khi giải thích các khái niệm bố cục dạng hộp linh hoạt và dạng lưới, vì thay đổi một thuộc tính rồi thấy ngay khối chạy sang vị trí mới là cách giải thích trực quan nhất.
Câu hỏi thường gặp (FAQ)
Có ô riêng cho CSS và JavaScript không?
Không. Công cụ chỉ có một ô soạn mã duy nhất, bạn viết thẻ style và thẻ script ngay trong khối HTML đó. Vì nội dung được ghi thẳng vào tài liệu bên trong khung xem nên cả hai loại thẻ đều có hiệu lực thật, kể cả khi bạn đặt chúng giữa thân trang.
Vì sao mỗi lần gõ thì ô nhập liệu trong khung xem lại bị xóa trắng?
Vì mỗi lần cập nhật, tài liệu bên trong khung xem được dựng lại từ đầu nên mọi trạng thái đều mất. Khi đang thử một tương tác nhiều bước, hãy bấm tắt chế độ tự làm mới rồi dùng nút làm mới thủ công để chủ động thời điểm dựng lại.
Chữ tiếng Việt hiện thành ký tự lạ thì sửa thế nào?
Thêm thẻ khai báo bảng mã UTF-8 vào phần đầu tài liệu. Thiếu dòng này, trình duyệt phải tự đoán bảng mã và thường đoán sai với nội dung có dấu. Đây là một dòng duy nhất nhưng giải quyết dứt điểm lỗi hiển thị chữ có dấu.
Khung xem có mô phỏng đúng điện thoại thật không?
Đúng về bề ngang nên các quy tắc kiểu dáng theo bề rộng kích hoạt chính xác. Nhưng nó không đổi chuỗi nhận dạng trình duyệt, không giả lập cảm ứng và không đổi mật độ điểm ảnh. Với ba việc đó, hãy dùng chế độ giả lập thiết bị trong công cụ dành cho nhà phát triển.
JavaScript trong mã của tôi có chạy thật không?
Có. Khung xem được cấp quyền thực thi kịch bản nên nút bấm, hộp thoại thông báo và các trình lắng nghe sự kiện đều hoạt động. Chính vì thế bạn nên đọc lướt qua trước khi dán mã lấy từ nguồn lạ, vì đoạn mã đó thực sự chạy trên máy bạn.
Ảnh của tôi không hiện trong khung xem, vì sao?
Nếu bạn dùng đường dẫn tương đối trỏ tới thư mục trên máy thì ảnh sẽ không tải được, vì tài liệu trong khung xem không có địa chỉ gốc để làm mốc. Hãy dùng đường dẫn đầy đủ bắt đầu bằng https, hoặc nhúng ảnh trực tiếp dưới dạng chuỗi mã hóa.
Mã tôi gõ có được lưu lại không?
Không. Nội dung chỉ tồn tại trong tab đang mở, tải lại trang hay đóng tab là mất sạch. Hãy sao chép sang tệp trên máy hoặc sang trình soạn thảo của bạn nếu đoạn mã đáng giữ. Đổi lại, không có gì được gửi lên máy chủ nên mã nội bộ vẫn an toàn.
Dùng công cụ này để dựng mẫu thư điện tử được không?
Dựng và xem thì được, nhưng đừng coi kết quả ở đây là kết quả trong hộp thư. Nhiều phần mềm đọc thư loại bỏ thẻ style trong phần đầu và không hỗ trợ các kiểu bố cục hiện đại. Với thư điện tử, hãy dựng bằng bảng và viết kiểu dáng trực tiếp trên từng thẻ.
Có tô màu cú pháp cho mã không?
Không, ô soạn thảo là một vùng văn bản thuần dùng phông chữ đều nét. Nó phù hợp cho các đoạn ngắn tới trung bình. Nếu bạn đang viết một tệp dài hàng trăm dòng, soạn trong trình soạn thảo mã trên máy rồi dán vào đây để xem kết quả sẽ dễ chịu hơn.
Vì sao khung xem chớp liên tục khi tôi gõ?
Vì chế độ tự làm mới dựng lại tài liệu sau mỗi lần bạn ngừng gõ khoảng ba phần mười giây. Với đoạn mã dài, việc dựng lại liên tục gây cảm giác chớp. Hãy bấm tắt chế độ này, gõ xong rồi bấm nút làm mới một lần duy nhất.
Có tải mã về thành tệp HTML được không?
Chưa có nút tải sẵn. Cách nhanh nhất là chọn toàn bộ nội dung trong ô soạn thảo, sao chép, dán vào một tệp mới trên máy rồi lưu với phần mở rộng .html. Nhớ giữ nguyên thẻ khai báo bảng mã UTF-8 để chữ tiếng Việt không bị lỗi khi mở lại.
Các mốc bề ngang thường dùng khi làm giao diện co giãn là bao nhiêu?
Bộ mốc phổ biến gồm 640, 768, 1.024, 1.280 và 1.536 điểm ảnh, tương ứng các cấp nhỏ, vừa, lớn, rất lớn của phần lớn khung giao diện hiện nay. Ba nút trong công cụ phủ ba vùng đại diện, nhưng bạn vẫn nên kiểm tra thêm ở các mốc còn lại bằng cách kéo hẹp cửa sổ trình duyệt.
Từ khóa liên quan
- xem trước html online
- chạy thử code html
- html preview online
- trình soạn html trực tuyến
- test html css online
- xem trước giao diện responsive
- kiểm tra bố cục trên điện thoại
- viết html không cần cài phần mềm
- thử code css online
- html editor online miễn phí
- xem kết quả html ngay khi gõ
- học html cho người mới
- kiểm tra đoạn html dán từ word
- dựng mẫu email html
- thử flexbox và grid
- meta charset utf-8 tiếng việt
- meta viewport là gì
- chạy javascript trong trình duyệt
- công cụ cho lập trình viên frontend
- xem trước code trên điện thoại
