Bài 7. Hoàn thiện và kiểm thử trang web
Sáu bài vừa qua nhóm em đã dựng đủ đầu trang, thân trang, chân trang, thanh điều hướng và cả biểu mẫu. Bài cuối này ta lùi lại một bước, rà soát cho cả trang nhất quán, kiểm thử từng liên kết và hình ảnh, xem thử trên điện thoại, rồi đóng gói và đưa trang lên mạng.
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)tr. 159
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E8. Hoàn thiện và xuất bản trang webtr. 96
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 28. Thực hành tổng hợptr. 151
Bắt đầu bằng một hình dung
Đến hạn nộp dự án, nhóm của Lan mở lại trang web câu lạc bộ Sách để xem lần cuối trước khi gửi cô. Ai cũng nghĩ xong rồi, chỉ việc nộp thôi. Nhưng vừa cuộn từ trên xuống, cả nhóm bắt đầu thấy sờ sợ.
Trang chủ dùng phông chữ tròn trịa dễ thương, sang trang Giới thiệu tự nhiên chữ lại vuông cứng như đổi người viết. Nút bấm ở đầu trang màu xanh, xuống cuối lại có nút màu cam chẳng ăn nhập gì. Huy bấm thử vào mục 'Sự kiện' trên thanh điều hướng thì trình duyệt báo không tìm thấy trang. Một tấm ảnh buổi đọc sách thì hiện ra ô trống với dấu ảnh vỡ. Lan lấy điện thoại mở trang lên xem thì chữ nhỏ li ti, mấy khối nội dung tràn ra ngoài mép màn hình phải kéo ngang mới đọc hết.
'Nội dung mình làm đủ cả rồi, nhưng nhìn như ba trang của ba người ghép lại,' Lan thở dài. Cô giáo đi ngang góp ý: 'Phần khó không phải là viết thêm, mà là ngồi soát lại cho cả trang thành một khối gọn gàng, rồi thử đủ mọi đường xem có chỗ nào gãy không. Xong hết mới tính chuyện đưa lên mạng.' Đó chính là công việc của bài hôm nay.
Nội dung bài học
- 1) Rà soát tính nhất quán trên toàn trang
- 2) Kiểm thử liên kết và hình ảnh
- 3) Xem trên màn hình nhỏ
- 4) Đóng gói và đưa trang lên mạng
Tóm tắt lý thuyết cần nhớ
- Rà soát nhất quán cả site: chung phông chữ, bảng màu và khoảng cách, dùng quy tắc CSS chung để đổi một chỗ là cả trang đổi theo
- Kiểm thử bằng cách bấm thử từng liên kết và cuộn xem mọi ảnh, sửa
hrefhoặcsrcsai cho hết liên kết gãy và ảnh không hiện - Xem trên màn hình nhỏ (điện thoại): để ảnh co giãn, khối tự xuống hàng, người xem chỉ cần cuộn dọc chứ không phải kéo ngang
- Đóng gói gom mọi tệp và thư mục ảnh dùng đường dẫn tương đối, rồi đưa lên dịch vụ lưu trữ web để có địa chỉ ai cũng xem được
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| test | tét | kiểm thử Chạy thử chương trình xem có đúng như em muốn không - giống kiểm tra lại bài làm trước khi nộp cho cô. |
| src | ét-rờ-xê | đường dẫn ảnh/video Là chỗ ghi đường dẫn tới tấm ảnh hoặc video cần hiện lên. |
| browser | BRAO-zơ | trình duyệt web Phần mềm em mở lên để xem các trang web, như Chrome hay Cốc Cốc - giống cửa sổ để nhìn ra thế giới Internet. |
| broken link | BRÔ-cân linh | liên kết gãy Liên kết bấm vào không ra trang nào, thường do href gõ sai tên tệp. |
| responsive | ri-SPON-xíp | co giãn theo màn hình Trang được làm sao cho vẫn dễ đọc trên điện thoại: ảnh tự co lại, các khối tự xuống hàng, người xem chỉ cuộn dọc chứ không phải kéo ngang. |
| hosting | HÔ-xtinh | dịch vụ lưu trữ web Dịch vụ giữ tệp website trên một máy chủ luôn bật, để trang có địa chỉ ai cũng mở được. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 23 câu, chấm điểm tự động và giải thích từng câu sai.
- Các trang con dùng chung phông chữ, màu sắc và khoảng cách hợp lí
- Trang có nhiều màu sắc và phông chữ khác nhau càng tốt
- Mỗi trang con nên tự chọn một kiểu riêng cho phong phú
- Trang có càng nhiều hình ảnh động càng chuyên nghiệp
- Ảnh không hiện
- Phông chữ không nhất quán
- Liên kết gãy
- Trang không xem được trên điện thoại
href trỏ sai tên tệp hoặc trang đích không tồn tại. Ảnh không hiện là ô ảnh vỡ chứ không phải báo không tìm thấy trang. Phông chữ không nhất quán và lỗi hiển thị trên điện thoại là vấn đề khác, không làm trình duyệt báo thiếu trang.- Thuộc tính
hrefcủa thanh điều hướng bị sai nên ảnh không tải được - Thuộc tính
srctrỏ sai đường dẫn hoặc quên chép ảnh vào thư mục dự án - Phông chữ của trang chưa được chọn nên trình duyệt bỏ qua phần ảnh
- Chân trang chưa có dòng bản quyền nên trang bị lỗi hiển thị ảnh
src trỏ sai đường dẫn, sai tên tệp hoặc quên chép ảnh vào thư mục dự án, nên đó là chỗ cần kiểm tra đầu tiên. href liên quan tới liên kết trang chứ không phải ảnh. Phông chữ và dòng bản quyền ở chân trang không liên quan gì tới việc một tấm ảnh có hiện được hay không.- a)Giữ nhất quán về phông chữ, màu sắc và khoảng cách giúp cả trang trông liền mạch, chuyên nghiệp hơn.Đúng
- b)Viết các quy tắc CSS chung nhắm tới từng loại thẻ giúp đổi một chỗ là cả trang đổi theo.Đúng
- c)Mỗi trang con nên chọn một phông chữ và bảng màu riêng để tạo cảm giác phong phú.Sai
- d)Nội dung đầy đủ thì tính nhất quán về hình thức không còn quan trọng nữa.Sai
- (a) Đúng - nhất quán về phông, màu, khoảng cách làm trang liền mạch, chuyên nghiệp.
- (b) Đúng - dùng quy tắc CSS chung cho từng loại thẻ giúp đổi một chỗ là áp cho cả trang.
- (c) Sai - mỗi trang một kiểu khiến site lộn xộn như ba trang ghép lại, cần dùng chung một bộ quy ước.
- (d) Sai - dù nội dung đủ, hình thức lộn xộn vẫn làm người xem khó chịu, nên nhất quán vẫn quan trọng.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 23 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.