- Phạm vi: Toàn bộ Học kì 1 — Bài 1: Làm quen với Trí tuệ nhân tạo; Bài 2: Trí tuệ nhân tạo trong khoa học và đời sống; Bài 3: Một số thiết bị mạng thông dụng; Bài 4: Giao thức mạng; Bài 5: Thực hành chia sẻ tài nguyên trên mạng; Bài 6: Giao tiếp và ứng xử trong không gian mạng; Bài 7: HTML và cấu trúc trang web; Bài 8: Định dạng văn bản; Bài 9: Tạo danh sách, bảng; Bài 10: Tạo liên kết; Bài 11: Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web; Bài 12: Tạo biểu mẫu; Bài 13: Khái niệm, vai trò của CSS; Bài 14: Định dạng văn bản bằng CSS; Bài 15: Tạo màu cho chữ và nền; Bài 16: Định dạng khung; Bài 17: Các mức ưu tiên của bộ chọn; Bài 18: Thực hành tổng hợp thiết kế trang web.
Phần 1: Cơ bản
Bài 1. Trí tuệ nhân tạo (AI) là gì? Nêu hai ví dụ về ứng dụng AI trong đời sống.
Bài 2. Nêu hai lợi ích và hai rủi ro (hoặc hạn chế) của trí tuệ nhân tạo.
Bài 3. Phân biệt chức năng của switch và router.
Bài 4. Giao thức mạng là gì? Nêu một ví dụ về giao thức mạng và công dụng của nó.
Bài 5. Nêu ba nguyên tắc ứng xử văn minh trong không gian mạng.
Bài 6. Viết đoạn mã HTML tạo một trang web đơn giản gồm tiêu đề <h1> "Xin chào" và một đoạn văn <p> giới thiệu về bản thân em.
Bài 7. Viết đoạn mã HTML tạo một danh sách không có thứ tự gồm 3 môn học mà em yêu thích.
Bài 8. Viết đoạn mã HTML tạo một bảng có 2 cột (Tên bạn, Sở thích) và 2 hàng dữ liệu.
Bài 9. Viết đoạn mã HTML tạo một liên kết tới trang web https://www.google.com với nội dung hiển thị là "Tìm kiếm".
Bài 10. Viết đoạn mã HTML chèn một hình ảnh có tên tệp anh-lop.jpg với văn bản thay thế là "Ảnh tập thể lớp".
Bài 11. Viết đoạn mã HTML tạo một biểu mẫu đơn giản gồm: một ô nhập họ tên, một ô nhập địa chỉ thư điện tử, và một nút "Gửi".
Bài 12. CSS có vai trò gì đối với trang web? Nêu ba lợi ích của việc dùng CSS thay vì định dạng trực tiếp trong HTML.
Bài 13. Viết quy tắc CSS định dạng cho tất cả các đoạn văn <p> trong trang web: màu chữ xanh dương, cỡ chữ 16px.
Bài 14. Viết quy tắc CSS định dạng cho phần tử có id="tieude": màu chữ đỏ, căn giữa.
Bài 15. Viết quy tắc CSS định dạng cho các phần tử có class="chuthich": màu chữ xám, cỡ chữ 14px, in nghiêng.
Bài 16. Trong CSS, thuộc tính background-color dùng để làm gì? Cho ví dụ.
Bài 17. Trong CSS, thuộc tính border dùng để làm gì? Cho ví dụ tạo viền 1px màu đen cho bảng.
Bài 18. Trong CSS, thuộc tính padding dùng để làm gì? Cho ví dụ.
Phần 2: Nâng cao
Bài 19. Viết đoạn mã HTML + CSS hoàn chỉnh tạo một trang web giới thiệu về lớp em, gồm: tiêu đề <h1> "Lớp 12A", một đoạn văn giới thiệu, một danh sách không có thứ tự gồm 3 hoạt động của lớp, một bảng có 2 cột (Hoạt động, Thời gian) và 2 hàng dữ liệu, một liên kết tới trang web của trường, một hình ảnh minh hoạ; đồng thời CSS định dạng: nền trang màu nhạt, tiêu đề màu xanh dương và căn giữa, đoạn văn cỡ chữ 16px.
Bài 20. Một học sinh viết quy tắc CSS p { color: red; } và p { color: blue; } trong cùng một tệp. Theo em, đoạn văn sẽ có màu gì? Vì sao? (Gợi ý: quy tắc viết sau được áp dụng khi cùng độ ưu tiên.)
Bài 21. Một trang web có cả bộ chọn theo thẻ h1 { color: green; } và bộ chọn theo class .tieude { color: red; } áp dụng cho cùng một tiêu đề <h1 class="tieude">. Theo em, tiêu đề sẽ có màu gì? Vì sao?
Bài 22. Một học sinh viết đoạn mã HTML nhưng trang web hiển thị sai: hình ảnh không hiện, liên kết không hoạt động, bảng không có viền. Em hãy nêu nguyên nhân có thể xảy ra cho từng lỗi và cách khắc phục.
Bài 23. Một nhóm học sinh muốn tạo một trang web giới thiệu về trường mình với nhiều trang con (trang chủ, giới thiệu, hoạt động, liên hệ) và giao diện thống nhất. Em hãy nêu cách tổ chức thư mục, cách liên kết giữa các trang và cách dùng chung một tệp CSS cho toàn bộ trang web.
Bài 24. Một bạn học sinh dùng AI để viết toàn bộ bài tập và nộp cho thầy cô. Em hãy phân tích hậu quả của hành vi này và đề xuất cách sử dụng AI đúng đắn.
Bài 25. Một người dùng đăng tải lên mạng xã hội một video do AI tạo ra nhưng không ghi chú, khiến nhiều người tin rằng video là thật. Em hãy nêu hậu quả và cách phòng tránh.
Bài 26. Một trang web có bảng hiển thị dữ liệu điểm số của học sinh nhưng bảng trông rối, khó đọc. Em hãy đề xuất các quy tắc CSS để bảng dễ đọc hơn (viền, khoảng đệm, màu nền xen kẽ, căn lề...).
Bài 27. Em hãy thiết kế một trang web đơn giản giới thiệu về một chủ đề mà em yêu thích (ví dụ: môn thể thao, cuốn sách, địa danh...), gồm ít nhất: tiêu đề, đoạn văn, danh sách, bảng hoặc biểu mẫu, liên kết, hình ảnh; đồng thời viết CSS định dạng cho trang web đó (màu nền, màu tiêu đề, định dạng bảng hoặc biểu mẫu).
Bài 28. Theo em, vì sao việc tách nội dung (HTML) và trình bày (CSS) thành hai phần riêng biệt lại giúp việc xây dựng và bảo trì trang web dễ dàng hơn? Nêu hai lí do và cho ví dụ minh hoạ.
Đáp án
Bài 1. AI là lĩnh vực khoa học máy tính giúp máy tính thực hiện các nhiệm vụ cần trí tuệ của con người. Ví dụ: trợ lí ảo, dịch ngôn ngữ, gợi ý phim/nhạc, nhận diện khuôn mặt...
Bài 2. Lợi ích: xử lí dữ liệu nhanh, hỗ trợ học tập và công việc, hỗ trợ người khuyết tật... Rủi ro: thông tin sai lệch, lộ thông tin cá nhân, lệ thuộc vào AI, gian lận học tập...
Bài 3. Switch: kết nối các thiết bị trong cùng một mạng cục bộ, chuyển dữ liệu đến đúng máy nhận. Router: kết nối các mạng khác nhau, định tuyến dữ liệu giữa mạng cục bộ và Internet.
Bài 4. Giao thức mạng là tập hợp các quy tắc quy định cách các thiết bị giao tiếp và trao đổi dữ liệu. Ví dụ: HTTP/HTTPS (truyền tải trang web), TCP/IP (bộ giao thức nền tảng của Internet)...
Bài 5. Ví dụ: tôn trọng người khác; không lan truyền tin giả; bảo vệ thông tin cá nhân; ghi rõ nguồn khi chia sẻ; không bắt nạt trên mạng.
Bài 6. Đoạn mã đúng, ví dụ:
<!DOCTYPE html>
<html>
<head><title>Giới thiệu</title></head>
<body>
<h1>Xin chào</h1>
<p>Em tên là ... . Em là học sinh lớp 12...</p>
</body>
</html>
Bài 7. Đoạn mã đúng, ví dụ:
<ul>
<li>Toán</li>
<li>Tin học</li>
<li>Tiếng Anh</li>
</ul>
Bài 8. Đoạn mã đúng, ví dụ:
<table>
<tr><th>Tên bạn</th><th>Sở thích</th></tr>
<tr><td>An</td><td>Đọc sách</td></tr>
<tr><td>Bình</td><td>Đá bóng</td></tr>
</table>
Bài 9. Đoạn mã đúng: <a href="https://www.google.com">Tìm kiếm</a>.
Bài 10. Đoạn mã đúng: <img src="anh-lop.jpg" alt="Ảnh tập thể lớp">.
Bài 11. Đoạn mã đúng, ví dụ:
<form>
<label>Họ tên:</label>
<input type="text" name="hoten"><br>
<label>Địa chỉ thư điện tử:</label>
<input type="email" name="email"><br>
<input type="submit" value="Gửi">
</form>
Bài 12. CSS định dạng, trình bày giao diện của trang web (màu sắc, phông chữ, bố cục...). Lợi ích: tách nội dung và trình bày; dùng chung một tệp CSS cho nhiều trang; dễ thay đổi giao diện toàn bộ trang web; mã HTML gọn gàng hơn.
Bài 13. Quy tắc đúng: p { color: blue; font-size: 16px; }.
Bài 14. Quy tắc đúng: #tieude { color: red; text-align: center; }.
Bài 15. Quy tắc đúng: .chuthich { color: gray; font-size: 14px; font-style: italic; }.
Bài 16. Thuộc tính background-color dùng để đặt màu nền cho phần tử. Ví dụ: body { background-color: lightyellow; }.
Bài 17. Thuộc tính border dùng để tạo viền cho phần tử. Ví dụ: table { border: 1px solid black; }.
Bài 18. Thuộc tính padding dùng để đặt khoảng đệm giữa nội dung và viền của phần tử. Ví dụ: td { padding: 8px; }.
Bài 19. Đoạn mã HTML đầy đủ các thành phần yêu cầu và CSS đầy đủ các quy tắc yêu cầu (nền trang màu nhạt, tiêu đề màu xanh dương và căn giữa, đoạn văn cỡ chữ 16px). Chấm theo số thành phần và quy tắc đúng.
Bài 20. Đoạn văn sẽ có màu xanh dương (blue) vì hai quy tắc có cùng độ ưu tiên nên quy tắc viết sau được áp dụng.
Bài 21. Tiêu đề sẽ có màu đỏ vì bộ chọn theo class (.tieude) có độ ưu tiên cao hơn bộ chọn theo thẻ (h1).
Bài 22. Hình ảnh không hiện: sai đường dẫn/tên tệp, tệp không đúng vị trí, lỗi cú pháp thẻ. Liên kết không hoạt động: sai địa chỉ trong href, trang đích không tồn tại. Bảng không có viền: chưa viết CSS border cho bảng hoặc viết sai cú pháp. Cách khắc phục: kiểm tra lại đường dẫn, tên tệp, href, cú pháp CSS.
Bài 23. Tổ chức thư mục: thư mục gốc chứa index.html và các trang con (gioi-thieu.html, hoat-dong.html, lien-he.html), thư mục images chứa hình ảnh, tệp style.css chứa CSS chung. Liên kết: dùng <a href="..."> giữa các trang. Dùng chung CSS: mỗi trang đều có <link rel="stylesheet" href="style.css"> trong phần <head>.
Bài 24. Hậu quả: học sinh không rèn luyện được kiến thức, kỹ năng; bài làm không trung thực; có thể bị kỉ luật. Cách đúng: dùng AI để tìm ý tưởng, tra cứu, sau đó tự viết bài, kiểm chứng thông tin và ghi rõ đã tham khảo AI.
Bài 25. Hậu quả: lan truyền tin giả, gây hoang mang, hiểu lầm. Phòng tránh: ghi rõ video do AI tạo ra; kiểm tra thông tin trước khi chia sẻ; không tin ngay nội dung chưa được xác thực.
Bài 26. Các quy tắc CSS đề xuất: table { border: 1px solid black; border-collapse: collapse; }, th, td { border: 1px solid black; padding: 8px; }, th { background-color: lightgray; }, tô màu nền xen kẽ cho các hàng, căn lề hợp lí...
Bài 27. Trang web có đủ các thành phần yêu cầu và CSS định dạng hợp lí. Chấm theo số thành phần đúng và tính hợp lí của nội dung.
Bài 28. Hai lí do: (1) Thay đổi giao diện toàn bộ trang web chỉ cần sửa một tệp CSS, không cần sửa từng trang HTML. (2) Mã HTML gọn gàng, dễ đọc, dễ bảo trì; nhiều người có thể làm việc song song (người viết nội dung, người thiết kế giao diện). Ví dụ minh hoạ phù hợp.