Chuẩn bị trang và ảnh mẫu
Nhiệm vụ là tạo trang “Góc đọc sách”, sau đó đổi tiêu đề hiện trong trang và kiểm tra kết quả. Chỉ cần trình soạn thảo văn bản thuần cùng trình duyệt; tệp mẫu không cần tài khoản hoặc kết nối Internet để hiển thị.
Tải bộ mẫu ZIP bằng liên kết dưới đây, giải nén vào một thư mục riêng. Bộ mẫu có đúng hai tệp: `trang_mau.html` và `quyen_sach.svg`. Có thể đọc mã ở bài trước để nhập lại vào một tệp mới; giữ bản mẫu làm đối chiếu.
Ảnh trong mẫu dùng `src="quyen_sach.svg"`, nên trình duyệt tìm ảnh tương đối với nơi đặt tệp HTML. Hai tệp cần ở cùng thư mục theo cấu trúc đã cho.
Soạn, lưu, mở và sửa
1. Mở trình soạn thảo văn bản thuần, tạo tệp mới và nhập mã ở bài trước. Không dùng tài liệu có định dạng như tệp Word để thay cho mã nguồn.
2. Lưu tệp với tên `trang_mau.html`, mã hóa UTF-8. Giữ ảnh `quyen_sach.svg` trong cùng thư mục. Kiểm tên thật của tệp, tránh vô tình lưu thành `trang_mau.html.txt`.
3. Mở tệp HTML vừa lưu bằng trình duyệt. Đối chiếu tên trên thẻ trình duyệt, tiêu đề trong trang, ảnh và hai đoạn văn.
4. Trở lại trình soạn thảo, đổi riêng nội dung `h1` thành “Góc đọc sách của lớp”. Lưu, rồi tải lại đúng tệp trong trình duyệt.
Kết quả: tiêu đề trong trang đổi theo `h1`, còn tên tài liệu trong `title` vẫn là “Góc đọc sách”. Mở lại tệp trong trình soạn thảo để kiểm mã đã được lưu.
Với GNOME Text Editor 46.3 giao diện tiếng Anh, dùng Ctrl+S để mở hộp lưu tệp mới; nhập tên và chọn mã hóa UTF-8 trong Character Encoding. Tên nút hoặc nơi chọn mã hóa có thể khác ở trình soạn thảo khác.
Enter trong mã chưa tạo đoạn văn mới
```html
<p>Đọc sách
mỗi tuần.</p>
```
Trong hiển thị mặc định của đoạn văn trên, các dấu cách và xuống dòng liên tiếp được gộp thành một khoảng trắng. Nội dung hiện như “Đọc sách mỗi tuần.”, có thể tự xuống dòng khi vùng hiển thị hẹp.
Muốn tách hai đoạn, dùng hai phần tử `p`. Muốn chủ động ngắt dòng trong cùng đoạn, dùng `br`. Việc này khác với xuống dòng để mã nguồn dễ đọc.
Tìm lỗi theo dấu hiệu
| Dấu hiệu | Điều cần kiểm |
|---|---|
| Thấy mã thay vì trang khi mở |Đang mở bằng trình soạn thảo hay trình duyệt; tên thật và phần mở rộng của tệp|
| Trang vẫn hiện câu cũ |Đã lưu chưa; trình duyệt có mở đúng tệp và đã tải lại chưa|
| Chữ tiếng Việt bị sai |Tệp thực sự lưu UTF-8 và có khai báo meta charset phù hợp chưa|
| Ảnh không hiện |Tên ảnh, phần mở rộng và vị trí tương đối có đúng src không|
| Enter trong nguồn không tách đoạn |Đã dùng p hoặc br đúng mục đích chưa|
Không kết luận một dấu hiệu luôn chỉ có một nguyên nhân. Kiểm từng điều kiện rồi mở lại trang để xác nhận.
Bài luyện
Tên tệp nào đáp ứng đúng yêu cầu lưu tệp nguồn của bài?
Phần mở rộng cuối vẫn là txt, không đúng tên yêu cầu.
Đây là tên tài liệu Word, không phải tệp HTML yêu cầu.
Đúng. Tên có phần mở rộng html.
svg là tệp ảnh trong mẫu, không phải tệp nguồn trang.
Lời giải
Tên yêu cầu kết thúc bằng .html. Cần kiểm tên thật vì hệ thống có thể ẩn phần mở rộng; trang_mau.html.txt vẫn kết thúc bằng .txt và chưa đáp ứng đúng yêu cầu của bài.
Bài luyện
Đã đổi riêng nội dung h1 và lưu đúng tệp, nhưng trình duyệt còn hiện bản cũ. Bước kiểm trực tiếp tiếp theo là gì?
Xóa title không giải quyết việc trình duyệt đang hiện bản cũ.
Đúng. Cần cho trình duyệt đọc lại đúng tệp đã lưu.
Đổi tên ảnh có thể làm sai đường dẫn src.
Dấu cách không làm trình duyệt tự đọc bản mới.
Lời giải
Dữ kiện đã xác nhận việc sửa và lưu. Cần kiểm tệp trình duyệt đang mở, rồi tải lại để đọc nội dung mới. Khi đó h1 phải đổi; title được giữ nguyên vì không sửa nội dung này.
Bài luyện
Với đoạn p ở ví dụ, không có CSS riêng, nhận xét nào đúng về dấu Enter và các dấu cách trong nguồn?
Enter không tự thêm phần tử p vào nguồn.
Trong điều kiện đã nêu, dấu cách liên tiếp được gộp.
Xuống dòng trong nguồn của ví dụ không ngăn trình duyệt hiển thị.
Đúng. Cần phân biệt trình bày nguồn với cấu trúc đoạn văn.
Lời giải
Trong hiển thị mặc định đang xét, chuỗi dấu cách và xuống dòng được gộp thành khoảng trắng. Enter giúp đọc mã nguồn nhưng không tự tạo đoạn văn mới; hai đoạn cần hai phần tử p riêng.
Đang học