Thầy Cải - Quốc Thái

BÀI F15 - KHOA HỌC DỮ LIỆU (CTST - CS)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này thuộc định hướng: Khoa học máy tính (CS). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 148 sách cs)

Theo em, nhà trường thường thu thập, lưu trữ và xử lí những dữ liệu nào về học sinh?

Gợi ý trả lời

- Thông tin cá nhân (họ tên, ngày sinh, giới tính, địa chỉ, số điện thoại).
- Kết quả học tập, điểm kiểm tra, học lực, hạnh kiểm.
- Thông tin khen thưởng/kỷ luật.
- Thông tin về tham gia hoạt động ngoại khóa, chuyên cần (đi học, nghỉ học).
- Sức khỏe học sinh (chiều cao, cân nặng, tiêm chủng,...).

(trang 149 sách cs)

Hãy thảo luận với bạn và cho biết:
a) Sơ lược về (khái niệm) Khoa học dữ liệu.
b) Mục tiêu cụ thể của Khoa học dữ liệu.

Gợi ý trả lời

a) Sơ lược về (khái niệm) Khoa học dữ liệu:
Khoa học dữ liệu là một lĩnh vực kết hợp giữa kiến thức thống kê, toán học, công nghệ thông tin và hiểu biết lĩnh vực ứng dụng để khai thác thông tin và tri thức từ dữ liệu.
b) Mục tiêu cụ thể của Khoa học dữ liệu:
- Thu thập, xử lí và phân tích dữ liệu lớn.
- Khai thác tri thức hữu ích ẩn trong dữ liệu.
- Dự đoán xu hướng và hỗ trợ ra quyết định chính xác.
- Tự động hóa quy trình ra quyết định nhờ trí tuệ nhân tạo.

(trang 150 sách cs)

Em hãy giới thiệu một vài thành tựu chính của Khoa học dữ liệu.

Gợi ý trả lời

- Phân tích dự đoán: Dự báo thị trường, nhu cầu tiêu dùng, thời tiết, bệnh dịch,...
- Cá nhân hóa dịch vụ: Gợi ý sản phẩm, nội dung phù hợp với sở thích người dùng (như YouTube, Netflix).
- Tự động hóa: Hệ thống lái xe tự động, chatbot trả lời khách hàng.
- Phát hiện gian lận: Trong tài chính, ngân hàng nhờ nhận diện bất thường trong dữ liệu.
- Chẩn đoán bệnh: Hỗ trợ bác sĩ phân tích hình ảnh y tế và đưa ra kết luận nhanh chóng, chính xác hơn.

(trang 150 sách cs)

1. Vì sao tự động hoá là thành tựu quan trọng của Khoa học dữ liệu?
2. Vì sao Khoa học dữ liệu giúp nâng cao năng lực ra quyết định của máy tính?

Gợi ý trả lời

1. Vì:
- Tự động hóa giúp máy tính thay con người thực hiện các công việc lặp đi lặp lại một cách nhanh chóng, chính xác và tiết kiệm chi phí.
- Giảm thiểu sai sót do yếu tố con người, tăng hiệu suất làm việc.
- Ứng dụng trong sản xuất, chăm sóc khách hàng, quản lý,...
2. Vì:
- Nhờ vào khả năng phân tích và học từ dữ liệu lớn, máy tính có thể đánh giá và đưa ra quyết định dựa trên thông tin thực tế.
- Khoa học dữ liệu giúp phát hiện xu hướng, mô hình ẩn trong dữ liệu.
- Làm cho máy tính trở nên thông minh hơn trong việc giải quyết vấn đề.

(trang 150 sách cs)

1. Em hãy cho biết Khoa học dữ liệu có góp phần vào sự phát triển của các lĩnh vực như y tế, giáo dục, giao thông,... hay không? Cho ví dụ minh hoạ.
2. Khám phá tri thức trong Khoa học dữ liệu gồm những hoạt động gì? Vì sao khám phá tri thức là thành tựu quan trọng của Khoa học dữ liệu?

Gợi ý trả lời

Có, Khoa học dữ liệu góp phần rất lớn vào sự phát triển của nhiều lĩnh vực.
Trong y tế: dữ liệu giúp phát hiện sớm dịch bệnh, chẩn đoán bệnh qua hình ảnh, tối ưu hóa điều trị cá nhân.
Ví dụ: Phân tích dữ liệu từ thiết bị đeo để theo dõi sức khỏe tim mạch.
Trong giáo dục: dữ liệu giúp đánh giá chất lượng học tập, cá nhân hóa việc học cho học sinh.
Ví dụ: Hệ thống học trực tuyến sử dụng dữ liệu để gợi ý bài học phù hợp.
Trong giao thông: phân tích dữ liệu giúp quản lý lưu lượng xe, giảm ùn tắc.
Ví dụ: Ứng dụng bản đồ sử dụng dữ liệu thời gian thực để đề xuất đường đi nhanh nhất.
2.
- Hoạt động khám phá tri thức gồm: thu thập, xử lý, phân tích và khai thác dữ liệu để rút ra thông tin, mô hình, xu hướng ẩn chứa trong dữ liệu.
- Khám phá tri thức là thành tựu quan trọng vì nó giúp biến dữ liệu thô trở thành thông tin có giá trị phục vụ ra quyết định, sáng tạo giải pháp và dự đoán tương lai.

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

Bài F1. HTML và trang web
Bài F2. Tạo và định dạng trang web với các thẻ HTML
Bài F3. Tạo bảng và khung trong trang web với HTML
Bài F4. Thêm dữ liệu đa phương tiện vào trang web
Bài F5. Tạo biểu mẫu trong trang web
Bài F6. Dự án tạo trang web
Bài F7. Giới thiệu CSS
Bài F8. Một số thuộc tính cơ bản của CSS
Bài F9. Một số thuộc tính định kiểu bằng vùng chọn trong CSS
Bài F10. Định kiểu CSS cho siêu liên kết và danh sách
Bài F11. Định kiểu CSS cho bảng và phần tử div
Bài F12. Định kiểu CSS cho biểu mẫu
Bài F13. Dự án tạo trang web (tiếp theo)
Bài F14(cs). Học máy
Bài F15(cs). Khoa học dữ liệu
Bài F16(cs). Máy tính, thuật toán và Khoa học dữ liệu
Bài F17(cs). Hoạt động trải nghiệm về Khoa học dữ liệu
Bài F18(cs). Kĩ thuật mô phỏng
Bài F19(cs). Sử dụng phần mềm mô phỏng

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài G1. Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Bài G2. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài G3. Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Chân trời sáng tạo
☞ Lý thuyết tin học 12 - Chân trời sáng tạo
☞ Thực hành tin học 12 - Chân trời sáng tạo
☞ Gợi ý trả lời tin học 12 - Chân trời sáng tạo
☞ Trắc nghiệm tin học 12 - Chân trời sáng tạo
☞ Bài giảng điện tử tin học 12 - Chân trời sáng tạo

BÀI F14 - HỌC MÁY (CTST - CS)

(trang 143 sách cs)

Ngày nay, với sự tăng trưởng vượt bậc về số người sử dụng thiết bị thông minh để giải quyết công việc, tìm kiếm thông tin, giao tiếp trong không gian mạng,... Con người dần quen thuộc với các trợ lí ảo như Google Assistant của Google, Siri của Apple,... Hãy tìm hiểu và giới thiệu một số tính năng của các trợ lí ảo Siri, Google Assistant,...

Gợi ý trả lời

Một số tính năng của các trợ lí ảo Siri, Google Assistant:
- Siri (Apple):
+ Gửi tin nhắn, gọi điện, đặt báo thức.
+ Nhận diện giọng nói và trả lời câu hỏi.
+ Điều khiển thiết bị trong hệ sinh thái Apple.
+ Tìm kiếm thông tin trên internet.
- Google Assistant (Google):
+ Trả lời các câu hỏi từ người dùng.
+ Hỗ trợ điều khiển nhà thông minh (smart home).
+ Đặt lịch, nhắc việc, chỉ đường, dịch ngôn ngữ.
+ Có thể tích hợp với nhiều thiết bị Android và loa thông minh.

(trang 145 sách cs)

1. Học máy đóng vai trò như thế nào trong các lĩnh vực y tế, giải trí, sản xuất kinh doanh? Hãy giới thiệu với các bạn một ứng dụng của học máy trong lĩnh vực giải trí mà em biết.
2. Hãy trình bày các bước cơ bản của quá trình học của mô hình học máy.

Gợi ý trả lời

1. Vai trò của học máy:
Y tế:
Dự đoán bệnh sớm (ung thư, tiểu đường...);
Hỗ trợ chẩn đoán hình ảnh (MRI, X-quang);
Cá nhân hóa điều trị cho từng bệnh nhân.
Giải trí:
Gợi ý nội dung phù hợp (YouTube, TikTok, Spotify);
Nhận diện khuôn mặt trong ảnh/video;
Tạo nhân vật ảo, game thông minh, deepfake...
Sản xuất – kinh doanh:
Dự báo nhu cầu khách hàng;
Quản lý kho, vận hành dây chuyền tự động;
Phân tích hành vi tiêu dùng, tối ưu doanh số.
Ví dụ ứng dụng học máy trong lĩnh vực giải trí:
Netflix dùng học máy để gợi ý phim dựa trên lịch sử xem của người dùng.
TikTok sử dụng học máy để tự động phân phối video đến những người có khả năng yêu thích nội dung đó.
2. Các bước cơ bản của quá trình học của mô hình học máy:
- Thu thập dữ liệu: Dữ liệu đầu vào phải có chất lượng và liên quan.
- Tiền xử lý dữ liệu: Làm sạch, chuẩn hóa, mã hóa dữ liệu.
- Chọn mô hình: Chọn thuật toán học máy phù hợp.
- Huấn luyện mô hình: Dữ liệu được đưa vào để mô hình học và điều chỉnh tham số.
- Đánh giá mô hình: Kiểm tra hiệu quả mô hình bằng dữ liệu kiểm thử.
- Triển khai và cải tiến: Đưa mô hình vào sử dụng thực tế, theo dõi và cải tiến.

(trang 147 sách cs)

Nêu một vài ứng dụng của học máy trong việc lọc thư rác và dịch tự động.

Gợi ý trả lời

Một vài ứng dụng của học máy trong việc lọc thư rác và dịch tự động:
- Lọc thư rác: Học máy phân tích nội dung email, phát hiện từ khóa, mẫu (pattern) của thư rác để tự động chuyển chúng vào thư mục spam.
- Dịch tự động: Ứng dụng như Google Translate sử dụng mô hình học máy (đặc biệt là học sâu) để phân tích ngữ cảnh và ngôn ngữ, cho kết quả dịch sát nghĩa và tự nhiên hơn.

(trang 147 sách cs)

1. Hãy trình bày sơ lược hai phương pháp học giám sát và học không giám sát.
2. Theo em, vì sao nên ứng dụng các mô hình học máy để hỗ trợ công tác chẩn đoán bệnh trong lĩnh vực y tế và chăm sóc sức khoẻ?

Gợi ý trả lời

1. Trình bày sơ lược hai phương pháp học giám sát và học không giám sát.
- Học giám sát (Supervised Learning):
+ Dữ liệu huấn luyện có gắn nhãn.
+ Mục tiêu: Dự đoán kết quả đầu ra từ dữ liệu mới.
+ Ví dụ: Phân loại email có phải thư rác không.
- Học không giám sát (Unsupervised Learning):
+ Dữ liệu không có nhãn.
+ Mục tiêu: Tìm ra cấu trúc ẩn trong dữ liệu (phân nhóm, phát hiện bất thường...).
+ Ví dụ: Phân nhóm khách hàng theo hành vi mua sắm.
2. Tại vì:
- Giúp phân tích dữ liệu y tế nhanh và chính xác hơn con người.
- Có khả năng phát hiện các mẫu bệnh lý mà con người có thể bỏ sót.
- Giảm thời gian chẩn đoán, tăng hiệu quả điều trị.
- Hỗ trợ bác sĩ đưa ra quyết định chính xác hơn, đặc biệt trong các ca phức tạp.

(trang 147 sách cs)

1. Liệt kê một số ứng dụng trên thiết bị di động có sử dụng nhận dạng giọng nói.
2. Theo em, ngoài các ứng dụng được nhắc đến ở trên, học máy còn được ứng dụng để thực hiện công việc gì trong cuộc sống?

Gợi ý trả lời

1. Một số ứng dụng trên thiết bị di động có sử dụng nhận dạng giọng nói:
- Google Assistant.
- Siri (Apple).
- Alexa (Amazon).
- Zalo Voice Search.
- Ứng dụng dịch giọng nói như Google Translate.
- Ứng dụng trợ lí học tập như Elsa Speak, Duolingo.
2. Theo em, ngoài các ứng dụng được nhắc đến ở trên, học máy còn được ứng dụng để thực hiện công việc sau:
- Giao thông: Dự báo tắc đường, xe tự lái.
- Tài chính: Dự đoán giá cổ phiếu, phát hiện gian lận.
- Thương mại điện tử: Gợi ý sản phẩm phù hợp với người dùng.
- Giáo dục: Cá nhân hóa chương trình học, chấm điểm tự động.
- Nông nghiệp: Dự báo sâu bệnh, tối ưu hóa sản lượng.
- An ninh: Nhận diện khuôn mặt, phát hiện hành vi bất thường trong camera giám sát.

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F12 - ĐỊNH KIỂU CSS CHO BIỂU MẪU (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 170 sách ict, trang 137 sách cs)

Em hãy quan sát và nhận xét một số biểu mẫu khảo sát trên trang web mà trường hay lớp em từng sử dụng.

Gợi ý trả lời

- Các biểu mẫu thường được thiết kế đơn giản, dễ hiểu.
- Bao gồm các thành phần như hộp văn bản, nút chọn, hộp kiểm, nút nhấn,...

(trang 171 sách ict, trang 138 sách cs)

Em hãy khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea.

Gợi ý trả lời

Khi người dùng nhấn vào hộp <textarea>, viền và nền sẽ thay đổi để làm nổi bật trạng thái đang nhập liệu.

(trang 172 sách ict, trang 139 sách cs)

Trong khai báo vùng chọn của hộp kiểm, em hãy thay đổi thuộc tỉnh accent-color thành background-color và nêu nhận xét.

Gợi ý trả lời

Nhận xét:
- Thuộc tính background-color không làm thay đổi màu hiển thị của hộp kiểm như mong đợi trên nhiều trình duyệt.
- Trong khi đó, accent-color là thuộc tính mới, cho phép thay đổi màu chủ đạo của các thành phần như checkbox và radio.
Vì vậy, để tùy biến giao diện các thành phần biểu mẫu hiện đại, nên dùng accent-color.

(trang 172 sách ict, trang 139 sách cs)

1. Em hãy trình bày lợi ích khi định kiểu cho biểu mẫu.
2. Ý nghĩa của thuộc tính display và box-sizing là gì?
3. Em hãy liệt kê một số trạng thái của các thành phần trong biểu mẫu và nêu cách khai báo vùng chọn để định kiểu cho chúng.

Gợi ý trả lời

1. Lợi ích khi định kiểu cho biểu mẫu:
- Giúp biểu mẫu trở nên thẩm mỹ và chuyên nghiệp hơn.
- Nâng cao trải nghiệm người dùng.
- Hỗ trợ hiển thị tốt trên nhiều thiết bị.
- Giúp thống nhất phong cách giao diện trên trang web.
2. Ý nghĩa của thuộc tính display và box-sizing:
- display: Xác định cách phần tử được hiển thị. Ví dụ: block, inline, flex, grid,...
- box-sizing: Xác định cách tính toán kích thước phần tử.
+ content-box (mặc định): chỉ tính nội dung.
+ border-box: bao gồm cả padding và border trong kích thước phần tử ⟶ dễ kiểm soát layout.
3. Một số trạng thái của các thành phần trong biểu mẫu và cách khai báo vùng chọn để định kiểu cho chúng.
- Một số trạng thái: hover, focus, checked, disabled, active
- Ví dụ khai báo:

(trang 174 sách ict, trang 141 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của THỰC HÀNH.
2. Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:
Hai văn bản để nhập Tên tài khoản và Mật khẩu;
Một hộp kiểm Ghi nhớ thông tin đăng nhập;
Một nút nhấn Đăng nhập;
Một đường liên kết Quên mật khẩu.
3. Tìm hiểu thêm cách để chèn biểu tượng vào hộp văn bản.

Gợi ý trả lời

1. Định kiểu để tạo màu nền chung cho hai nút tròn và màu nền chung cho ba hộp kiểm của biểu mẫu của THỰC HÀNH.

2. Tạo và định kiểu cho biểu mẫu đăng nhập theo yêu cầu:
Code HTML tham khảo:

Code CSS tham khảo:

3. Cách chèn biểu tượng vào hộp văn bản.
Dùng Font Awesome (nếu có liên kết thư viện).
Code HTML:

Code CSS:

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F11 - ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV>
(CTST - CS & ICT)

BÀI F11 - ĐỊNH KIỂU CSS CHO BẢNG VÀ PHẦN TỬ <DIV> (CTST - CS & ICT)

(trang 162 sách ict, trang 129 sách cs)

Theo em nên dùng thẻ gì để trình bày một bảng danh sách tên học sinh trên trang web?

Gợi ý trả lời

Theo em, nên dùng thẻ <table< để trình bày bảng danh sách tên học sinh trên trang web, vì đây là thẻ HTML chuyên dùng để tạo và hiển thị bảng.

(trang 163 sách ict, trang 130 sách cs)

Viết mã lệnh CSS để định kiểu nền màu vàng nhạt cho các hàng lẻ trong bảng.

Gợi ý trả lời

tr:nth-child(odd): hàng lẻ trong bảng.
background-color: thuộc tính màu nền.
#ffffcc: màu vàng nhạt.

(trang 165 sách ict, trang 132 sách cs)

Viết mã lệnh CSS để tạo ra 3 vùng A, B, C lần lượt nằm kể nhau theo phương ngang.

Gợi ý trả lời

Code HTML:

Code CSS:

(trang 165 sách ict, trang 132 sách cs)

1. Em hãy trình bày những khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.
2. Em hãy trình bày những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.
3. Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là gì?

Gợi ý trả lời

1. Khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.
- Vùng chọn: Sử dụng các selector như table, th, td, hoặc tr.
- Thuộc tính định kiểu đường viền và màu nền:
+ border: xác định kiểu và độ dày đường viền.
+ border-collapse: gộp hoặc tách đường viền.
+ background-color: đặt màu nền.
- Code CSS tham khảo:

2. Những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.
Một số thuộc tính thường dùng:
- width, height: xác định kích thước vùng.
- background-color: màu nền.
- margin, padding: khoảng cách.
- float hoặc display: sắp xếp vị trí.
- border: viền.
- box-sizing: kiểm soát cách tính kích thước.
Code CSS tham khảo:

3. Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là:
- Dễ dàng tùy biến và định kiểu với CSS.
- Tạo cấu trúc linh hoạt cho trang web.
- Giúp tách biệt nội dung và kiểu trình bày.
- Hỗ trợ thiết kế giao diện phản hồi (responsive).

(trang 169 sách ict, trang 136 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css) sao cho bố cục gồm 3 vùng:
Vùng 1: Dùng để chứa thanh điều hướng nằm ngang (đã tạo ở bài học trước).
Vùng 2: Dùng để hiển thị nội dung, cụ thể trang chủ có nội dung giới thiệu về lớp.
Vùng 3: Dùng để làm vùng chân trang.
Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

2. Chỉnh sửa trang web thanhvienlop.html (đã thực hiện ở những bài học trước) sao cho bố cục cũng gồm 3 phần như trang chủ của trang web index.html. Trong đó, đặt bảng thành viên lớp vào vùng 2 và sử dụng CSS để định kiểu cho bảng này.
Hình 12 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Gợi ý trả lời

1. Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css):
Code HTML tham khảo:

Code CSS tham khảo:

2. Chỉnh sửa trang web thanhvienlop.html tương tự như index.html:
Code HTML tham khảo:

Code CSS tham khảo:

---The end!---

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI F10 - ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH
(CTST - CS & ICT)

BÀI F10 - ĐỊNH KIỂU CSS CHO SIÊU LIÊN KẾT VÀ DANH SÁCH (CTST - CS & ICT)

(trang 156 sách ict, trang 123 sách cs)

Điều gì sẽ xảy ra khi nháy chọn siêu liên kết bất kì của trang web?

Gợi ý trả lời

Khi nháy chọn một siêu liên kết (thẻ <a>), trình duyệt sẽ điều hướng đến địa chỉ được chỉ định trong thuộc tính href. Đó có thể là:
- Một trang web khác,
- Một tệp tin,
- Một vị trí khác trong cùng trang,
- Hoặc một hành động như tải xuống,...

(trang 158 sách ict, trang 125 sách cs)

Viết mã lệnh CSS để khi người dùng di chuyển con trỏ chuột đến siêu liên kết sẽ phóng to cỡ chữ và có màu nền bao quanh (màu sắc tuỳ ý).

Gợi ý trả lời

Mã lệnh CSS:

Giải thích:
:hover là trạng thái khi di chuột qua liên kết.
Các thuộc tính như font-size, background-color dùng để tạo hiệu ứng nổi bật.

(trang 159 sách ict, trang 126 sách cs)

Em hãy thay đổi lần lượt các giá trị của thuộc tính list-style-position, đồng thời thay đổi độ rộng của trang web để xem kết quả hiển thị.

Gợi ý trả lời

1. list-style-position là gì?
Thuộc tính list-style-position xác định vị trí của dấu đầu dòng (bullet hoặc số thứ tự) trong danh sách.
outside (mặc định): Dấu đầu dòng nằm bên ngoài nội dung phần tử <li>.
inside: Dấu đầu dòng nằm bên trong khối nội dung của phần tử <li>.
2. Ví dụ HTML + CSS

3. Thay đổi độ rộng để quan sát
Thử sửa width: 300px; thành các giá trị như 500px, 200px, v.v. để thấy rõ:
- Ở chế độ inside, khi dòng bị dài và xuống hàng, dấu đầu dòng nằm trong vùng chữ.
- Ở chế độ outside, dấu đầu dòng vẫn nằm bên trái ngoài vùng nội dung, không bị đẩy vào.

(trang 160 sách ict, trang 127 sách cs)

1. Thảo luận với bạn và cho biết các trạng thái của siêu liên kết khi có sự tương tác của người dùng. Trình bày cách định kiểu CSS ứng với mỗi trạng thái đó.
2. Em hãy cho biết cách định kiểu cho các mục trong danh sách trong CSS.

Gợi ý trả lời

1. Các trạng thái của siêu liên kết và cách định kiểu:

Ví dụ:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { background-color: yellow; }
a:active { color: red; }
2. Cách định kiểu cho các mục trong danh sách trong CSS:
Có 2 loại danh sách trong HTML:
- Danh sách có thứ tự: <ol>
- Danh sách không thứ tự: <ul<
- Mỗi mục: <li<
Cách định kiểu CSS:

Ghi chú: có thể dùng list-style-position: inside hoặc outside để điều chỉnh vị trí dấu đầu dòng.

(trang 161 sách ict, trang 128 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Trong tệp portfolio.html, định kiểu riêng cho các mục trong danh sách Các hoạt động đã tham gia như sau:
a) Đánh số đầu dòng cho mỗi mục.
b) Mỗi mục được đóng khung và màu sắc tuỳ ý.
2. Tạo một tệp HTML mới, trong đó bao gồm một thanh trình đơn mới theo các yêu cầu sau:
a) Thanh trình đơn gồm các mục sau: Trang chủ, Học tập, Phong trào và Liên lạc.
b) Mỗi mục là một siêu liên kết đến một tệp HTML tương ứng.
c) Thanh trình đơn nằm bên trái trang web, theo phương dọc.
d) Định kiểu màu sắc tuỳ ý khi người dùng tương tác với thanh trình đơn.
Gợi ý: Có thể sử dụng các phần tử như bảng hoặc khung.

Gợi ý trả lời

1. Định kiểu danh sách "Các hoạt động đã tham gia" trong portfolio.html:
a) Đánh số đầu dòng cho mỗi mục.