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

BÀI F18. KĨ THUẬT MÔ PHỎNG (CTST - CS)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học này thuộc định hướng Khoa học máy tính (CS). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

1. Kĩ thuật mô phỏng trong một số lĩnh vực của đời sống

- Khái niệm: Mô phỏng là tạo phiên bản ảo của hệ thống/thực thể để phân tích, dự đoán, nghiên cứu.
- Ứng dụng đa dạng trong các lĩnh vực: giao thông, giáo dục, y tế, thiên văn... với nhiều lợi ích như tiết kiệm chi phí, tăng hiệu quả, đảm bảo an toàn, hỗ trợ ra quyết định.

a) Giao thông

- Mô phỏng để thiết kế, đánh giá hệ thống giao thông, tối ưu hạ tầng.
- Dự đoán hiệu quả các biện pháp điều khiển (đèn thông minh, biển báo điện tử...).
- Đào tạo và kiểm tra lái xe (đặc biệt xe tự động) thông qua các tình huống thực tế ảo.

b) Giáo dục

- Giúp học sinh hiểu sâu khái niệm khoa học, thực hành an toàn qua mô hình 3D.
- Ứng dụng hiệu quả trong kĩ thuật, y học, hàng không,...
- Tạo môi trường tương tác an toàn, tăng sự tự tin và tính áp dụng.

c) Y tế

- Đào tạo y khoa không rủi ro cho bệnh nhân thật.
- Hỗ trợ phát triển, kiểm thử thiết bị y tế.
- Mô phỏng các quy trình sinh học, tương tác thuốc, sử dụng thực tế ảo nâng cao trải nghiệm đào tạo.

d) Thiên văn học

- Tái tạo chuyển động các hành tinh, dự đoán hiện tượng thiên văn.
- Mô phỏng hệ thiên thạch xa, giúp nghiên cứu và giáo dục.
- Truyền đạt kiến thức thiên văn bằng trải nghiệm 3D và thực tế ảo.

2. Một số vấn đề thực tế cần sử dụng kĩ thuật mô phỏng để giải quyết

- Cho phép thử nghiệm hệ thống trong môi trường ảo để dự đoán, tối ưu, giảm chi phí, tránh rủi ro.
- Hỗ trợ thiết kế và cải tiến hệ thống trước khi triển khai thực tế.
- Ứng dụng trong dự báo thời tiết, kiểm tra thuốc mới, mô phỏng vũ trụ...
- Dự báo thời tiết cần xử lí dữ liệu lớn từ nhiều nguồn và được mô phỏng bằng siêu máy tính.
- Dự báo thời tiết vũ trụ và tương tác hành tinh cũng dựa vào mô phỏng.

3. Một số phần mềm mô phỏng

- PhET Interactive Simulations: Mô phỏng miễn phí cho giáo dục khoa học, toán học.
- ANSYS: Mô phỏng chuyên sâu cho cơ khí, nhiệt học, điện từ.
- Unity: Phát triển ứng dụng/trò chơi 2D-3D, hỗ trợ thực tế ảo, đa nền tảng.
- SolidWorks: Thiết kế mô hình 3D kỹ thuật, bản vẽ CAD cho kỹ sư và nhà thiết kế.

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 F17. HOẠT ĐỘNG TRẢI NGHIỆM VỀ KHOA HỌC DỮ LIỆU (CTST - CS)

THỰC HÀNH

Nhiệm vụ: Phân tích dữ liệu đầu tư vốn nước ngoài trong một thành phố
- Sử dụng Excel để phân tích bộ dữ liệu với 12 cột và gần 9500 bản ghi.
- Mục tiêu: rút trích thông tin và tri thức hữu ích từ dữ liệu các dự án có vốn đầu tư nước ngoài.

a) Sử dụng Power Query của Excel để tiền xử lí dữ liệu

- Nhập dữ liệu từ file CSV bằng chức năng Get Data → From Text/CSV.
- Tiền xử lí dữ liệu bằng Power Query:
+ Xoá cột: loại bỏ cột không cần thiết như Mục tiêu dự án, Các ưu đãi.
+ Tách cột: tách cột Ngày cấp chứng nhận đầu tư và Tiến độ thực hiện để giữ phần thông tin cần thiết.
+ Thêm cột mới: tạo cột mới DTNN_VND bằng cách quy đổi từ cột Tổng vốn USD.
+ Lưu dữ liệu đã làm sạch sang trang tính mới để tiếp tục phân tích.

b) Sử dụng PivotTable của Excel để tổng hợp dữ liệu

Tạo bảng tổng hợp dữ liệu:
- Dùng PivotTable để tổng hợp tổng số dự án đầu tư theo Đơn vị cấp phép.
- Rows: kéo thả cột Tên đơn vị cấp phép.
- Values: kéo thả cột Tên dự án đầu tư để đếm số lượng.

c) Trực quan hoá dữ liệu bằng PivotChart

- Tạo biểu đồ: từ bảng PivotTable, chọn biểu đồ Pie Chart để hiển thị tỷ lệ các đơn vị cấp phép.
- Nhận xét từ biểu đồ:
- 94% dự án do UBND thành phố cấp phép.
- Sở KH&ĐT dưới 5%, Bộ KH&ĐT chỉ 2%.
- Các đơn vị khác như Hepza và Khu công nghệ cao rất ít dự án.

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 F16. MÁY TÍNH, THUẬT TOÁN VÀ KHOA HỌC DỮ LIỆU (CTST - CS)

BÀI F16. MÁY TÍNH, THUẬT TOÁN VÀ KHOA HỌC DỮ LIỆU (CTST - CS & ICT)

1. Vai trò của máy tính đối với sự phát triển của Khoa học dữ liệu

- Máy tính đóng vai trò nền tảng trong Khoa học dữ liệu nhờ năng lực tính toán mạnh, lưu trữ lớn, tốc độ xử lí cao, xử lí đa nhiệm và kết nối mạng.
- Sự phát triển của các công nghệ như GPU, TPU, điện toán đám mây, máy tính lượng tử,... đã thúc đẩy Khoa học dữ liệu xử lý dữ liệu lớn hiệu quả hơn.
- Quy trình Khoa học dữ liệu gồm các bước:
+ Xác định vấn đề
+ Thu thập dữ liệu
+ Chuẩn bị dữ liệu
+ Xây dựng mô hình
+ Đánh giá
+ Triển khai
- Máy tính tham gia ở tất cả các bước: lưu trữ, xử lý, xây dựng mô hình, đánh giá hiệu suất, dự đoán...

2. Tính ưu việt của sử dụng máy tính và thuật toán trong xử lí dữ liệu lớn

- Dữ liệu lớn (Big Data) gồm 5 yếu tố chính:
+ Volume: khối lượng lớn
+ Velocity: tốc độ tạo dữ liệu cao
+ Variety: đa dạng định dạng
+ Veracity: độ tin cậy
+ Value: giá trị từ dữ liệu
- Máy tính mang lại nhiều lợi ích trong xử lý dữ liệu lớn:
+ Tốc độ xử lý cao
+ Hỗ trợ mô hình học máy trên dữ liệu lớn
+ Khả năng mở rộng với mạng máy tính
+ Lưu trữ, truy xuất, bảo mật dữ liệu hiệu quả
+ Phân tích dữ liệu theo thời gian thực
- Thuật toán tăng hiệu quả xử lý:
+ Xử lý song song trên nhiều hệ thống
+ Tự động hóa quy trình như làm sạch, đồng bộ dữ liệu
Ví dụ minh hoạ:
- GPT-3 (2020):
+ Xử lý 45 TB dữ liệu thô → 570 GB đầu vào
+ Sử dụng 1024 GPU A100 để huấn luyện 175 tỷ tham số trong 34 ngày
- AlphaFold 2 (2020):
+ Dự đoán cấu trúc protein chính xác trong vài giờ–ngày
+ Năm 2023, thuật toán Foldseek Cluster đã gom cụm ~2,3 triệu cấu trúc protein trong 5 ngày (thay vì hàng năm)
Sử dụng máy tính và thuật toán trong Khoa học dữ liệu cho phép xử lí dữ liệu lớn với tốc độ, độ chính xác và khả năng mở rộng cao, góp phần tạo ra các ứng dụng có giá trị trong khoa học và thực tiễn.

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 F15. KHOA HỌC DỮ LIỆU (CTST - CS)

1. Giới thiệu và mục tiêu của Khoa học dữ liệu

- Dữ liệu ngày càng phong phú và đa dạng xuất hiện từ nhiều nguồn như mạng xã hội, thương mại điện tử, tìm kiếm,...
- Khoa học dữ liệu (KHDL) là lĩnh vực liên ngành (Toán, Thống kê, Khoa học máy tính, Trí tuệ nhân tạo, Học máy,...) nhằm tạo ra giá trị từ dữ liệu.
- Một số mục tiêu chính:
+ Khám phá tri thức: tìm mẫu dữ liệu, phát hiện ngoại lệ, hiểu mối quan hệ giữa các thuộc tính.
+ Phân tích dữ liệu: rút thông tin, hỗ trợ ra quyết định.
+ Tối ưu hoá quyết định: áp dụng mô hình học máy để chọn giải pháp tốt hơn.
+ Trực quan hoá dữ liệu: dùng biểu đồ, đồ hoạ giúp dễ hiểu, dễ trình bày và phân tích.

2. Một số thành tựu của Khoa học dữ liệu

a) Khám phá tri thức và nâng cao năng lực ra quyết định

- KHDL giúp phát hiện mẫu dữ liệu, xu hướng ẩn trong dữ liệu lớn.
- Các công cụ như SAS, SPSS Modeler hỗ trợ ngân hàng, tài chính phát hiện rủi ro, điều chỉnh lãi suất.

b) Tự động hoá

- Ứng dụng trong robot thông minh (Amazon RDU), nông nghiệp (hệ thống kiểm soát môi trường),...
- KHDL kết hợp với học máy giúp tự động hóa quy trình dựa trên dữ liệu cảm biến, hình ảnh, tốc độ,...

c) Cá nhân hoá dịch vụ

- Dựa vào lịch sử hành vi người dùng để đề xuất nội dung, sản phẩm phù hợp.
- Ví dụ: Netflix, YouTube, Amazon,... dùng dữ liệu lịch sử và đánh giá để tạo trải nghiệm riêng.

d) Dự đoán

- Dùng mô hình học máy để chẩn đoán y khoa, phân tích xu hướng bệnh.
- Ví dụ: phần mềm IBM Watson for Oncology hỗ trợ điều trị ung thư tại Việt Nam.
Khoa học dữ liệu đóng vai trò then chốt trong việc khai thác giá trị từ dữ liệu lớn, hỗ trợ tự động hóa, cá nhân hóa và dự đoán chính xác, góp phần nâng cao hiệu quả ra quyết định trong nhiều lĩnh vực.

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 F14. HỌC MÁY (CTST - CS)

1. Sơ lược về học máy

- Học máy (machine learning) là một lĩnh vực của Trí tuệ nhân tạo (AI), giúp máy tính học từ dữ liệu để giải quyết các vấn đề như dự đoán, phân loại, nhận dạng, xử lý ngôn ngữ tự nhiên...
- Quá trình học máy gồm các bước:
+ Thu thập và chuẩn bị dữ liệu.
+ Trích xuất đặc trưng từ dữ liệu.
+ Huấn luyện mô hình học máy.
+ Đánh giá hiệu suất mô hình.
+ Triển khai mô hình.
- Dữ liệu đầu vào:
+ Có nhãn: dùng trong Học có giám sát – mục tiêu là dự đoán hoặc phân loại (ứng dụng: lọc thư rác, nhận dạng hình ảnh, giọng nói...).
+ Không có nhãn: dùng trong Học không giám sát – mục tiêu là phát hiện cấu trúc dữ liệu (ứng dụng: gom cụm, phân nhóm khách hàng...).
- Học máy đóng vai trò nền tảng trong nhiều hệ thống hiện đại như trợ lý ảo (Siri, Google Assistant), hệ thống gợi ý (Amazon),...

2. Vai trò của học máy trong một số ứng dụng

a) Lọc thư rác

Mô hình học máy phân tích đặc trưng của email (từ khóa, tiêu đề, người gửi...) để phân loại rác. Gmail, Outlook là ví dụ tiêu biểu.

b) Chẩn đoán bệnh

Sử dụng học máy để phát hiện bệnh sớm (ung thư, tiểu đường...) dựa trên hồ sơ bệnh án, hình ảnh y tế. Ví dụ: phần mềm IBM Watson for Oncology hỗ trợ điều trị ung thư tại Việt Nam.

c) Nhận dạng giọng nói

Cho phép nhận dạng đa ngôn ngữ, phương ngữ, phân tích ngữ cảnh. Ứng dụng: YouTube, Siri, Google Assistant,...

d) Dịch tự động

Công cụ như Google Translate sử dụng học máy để dịch văn bản, âm thanh, hình ảnh; phản hồi người dùng giúp mô hình cải thiện liên tục.

e) Phân tích thị trường

Học máy dự đoán xu hướng tiêu dùng, phản ứng thị trường, phân loại khách hàng,... Công cụ như Power BI hỗ trợ ra quyết định dựa trên mô hình học máy.

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 F13. DỰ ÁN TẠO TRANG WEB (TT) (CTST - CS & ICT)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. Bài học 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). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

THỰC HÀNH

Nhiệm vụ. Định kiểu CSS cho trang web kỉ yếu lớp 12A
Yêu cầu:
- Sử dụng lại các tệp từ dự án trang web kỉ yếu lớp 12A đã thực hiện trong Bài F6.
- Bổ sung mã lệnh CSS để tăng tính thẩm mỹ, sự đa dạng và sinh động cho trang web.
- Làm việc theo nhóm từ 3–5 học sinh trong 2 tuần, bao gồm 2 tiết học trên lớp để trình bày kết quả.
Đánh giá:
- Nội dung: Hoàn thiện và chỉnh sửa theo góp ý từ Bài F6.
- Hình thức: Áp dụng kiến thức CSS đã học và có thể mở rộng thêm, sử dụng linh
hoạt các kỹ thuật như chèn trực tiếp, dùng tệp CSS riêng, vùng chọn với class, id,... để tùy biến giao diện theo ý tưởng riêng.
Hướng dẫn:
1) Giai đoạn chuẩn bị
- Thống nhất bố cục, hình thức và cách viết mã CSS (trực tiếp hay tệp riêng).
- Xác định vùng chọn, id, class và quy ước đặt tên.
- Tìm hiểu thêm mã lệnh CSS mới.
- Lập kế hoạch công việc và phân công thành viên.
2) Giai đoạn thực hiện
- Thực hiện công việc theo phân công.
- Thảo luận, kiểm tra, sửa lỗi và hoàn thiện trang web.
3) Giai đoạn báo cáo
- Chuẩn bị báo cáo tổng kết dự án.
- Trình bày trước lớp, lắng nghe nhận xét từ bạn bè và giáo viên.

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)

1. Định kiểu cho hộp văn bản

- Định kiểu biểu mẫu giúp tăng tính thẩm mỹ, cải thiện trải nghiệm người dùng và khả năng tiếp cận.
- Có thể sử dụng các thuộc tính như: font-family, background-color, border, padding, margin,...
- Sử dụng display: block để nhãn <label> chiếm trọn một dòng.
- Dùng box-sizing: border-box để tính cả đường viền và vùng đệm vào kích thước phần tử.
- Để làm nổi bật hộp văn bản khi được chọn, dùng lớp giả :focus.
Ví dụ:

2. Định kiểu cho nút tròn, hộp kiểm và nút nhấn

- Sử dụng vùng chọn dạng input[type="radio"], input[type="checkbox"], input[type="submit"],...
- Định kiểu theo trạng thái:
:checked cho nút tròn và hộp kiểm khi được chọn.
:hover và :active cho nút nhấn khi rê chuột hoặc đang được nhấn giữ.
Ví dụ:

THỰC HÀNH

Nhiệm vụ: Định kiểu CSS cho biểu mẫu góp ý
Áp dụng với biểu mẫu trong gopy.html, gồm các thành phần:
- Họ tên và Lớp (hộp văn bản)
- Định hướng môn Tin học (nút tròn)
- Câu lạc bộ đang tham gia (hộp kiểm)
- Ý kiến góp ý (hộp văn bản nhiều dòng)
- Nút gửi góp ý
Cách thực hiện:
- Định kiểu cho <form>: nền trắng, viền xám, tối đa 400px chiều rộng.
- Hộp văn bản: nền xám, không viền.
- Nút tròn và hộp kiểm (trạng thái được chọn): định kiểu rõ ràng khi được nháy chọn.
- Hộp văn bản góp ý: cho phép thay đổi kích thước theo chiều dọc (resize: vertical).
- Nút Gửi: định kiểu màu sắc, viền, hiệu ứng khi rê chuột hoặc nhấn giữ.

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)

1. Định kiểu cho bảng

- Để bảng hiển thị đẹp mắt, có thể:
+ Sử dụng border-collapse: collapse để tạo đường viền đơn thay vì viền đôi mặc định.
+ Định kiểu màu nền cho hàng tiêu đề và các hàng chẵn/lẻ bằng lớp giả nth-child(even) hoặc nth-child(odd).
+ Tạo hiệu ứng khi rê chuột bằng tr:hover để đổi màu nền.
- Ví dụ:
+ border: 1px solid #3eafff cho đường viền màu xanh.
+ tr:nth-child(even) để hàng chẵn có nền xám.
+ tr:hover để tạo hiệu ứng màu nền khi di chuyển chuột qua hàng.

2. Định kiểu cho phần tử <div>

- Sử dụng <div> thay vì bảng để bố cục linh hoạt, tương thích nhiều kích cỡ màn hình.
- Mặc định, các <div> xếp theo chiều dọc; dùng float: left hoặc float: right để căn trái hoặc phải.
- Khi các <div> có chiều cao khác nhau và muốn tránh lỗi chồng lấp, dùng thêm một <div class="clear-both"> với clear: both để tạo khoảng ngăn cách.
Ví dụ:
.left { float: left; } và .right { float: right; } để chia bố cục trái/phải.
.clear-both { clear: both; } để tách vùng bên dưới hai khối.

THỰC HÀNH

Nhiệm vụ 1. Định kiểu CSS cho bảng
Định kiểu bảng "Lịch sinh hoạt hằng tuần" trong portfolio.html bằng class .my-table:
- Đường viền màu xanh, rộng 100%.
- Dùng padding để tạo vùng đệm cho ô.
- Hàng tiêu đề: nền xanh, chữ trắng, in đậm.
- Hàng chẵn: nền xám (nth-child(even)).
- Hiệu ứng hover: đổi màu nền khi rê chuột.
Nhiệm vụ 2. Định kiểu CSS cho phần tử <div>
Tạo bố cục minh họa trong bocucminhhoa.html sử dụng <div>:
+ Thẻ <link> liên kết đến layout.css.
+ Tạo thanh ngang bằng class .bar.
+ Vùng trái (.left) chiếm 20% chiều ngang, nền xám đậm.
+ Vùng phải (.right) chiếm phần còn lại, nền xám nhạt.
+ Dùng .clear-both để ngăn cách với footer.
+ Chân trang (.footer) có nền cam, cách vùng trên 10px.

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 F18. KĨ THUẬT MÔ PHỎNG (CTST - CS)

BÀI F17. HOẠT ĐỘNG TRẢI NGHIỆM VỀ KHOA HỌC DỮ LIỆU (CTST - CS)

BÀI F16. MÁY TÍNH, THUẬT TOÁN VÀ KHOA HỌC DỮ LIỆU (CTST - CS)

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

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

BÀI F13. DỰ ÁN TẠO TRANG WEB (TT) (CTST - CS & ICT)

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

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

Chuyên mục bài viết

Các trang web hữu ích

Các video clip đáng xem

Tổng số lượt xem