CodeHub
Chuẩn Chương trình GDPT 2018 - Định hướng Tin học ứng dụng (ICT)

Tin Học Lớp 12

Khóa học trực tuyến toàn diện gồm 7 Chủ đề và 28 Bài học theo sách giáo khoa Kết nối tri thức với cuộc sống. Trang bị kiến thức chuyên sâu về Trí tuệ nhân tạo (AI), Mạng máy tính & Internet, Đạo đức số, Thiết kế và lập trình website với HTML5 & CSS3, hướng nghiệp CNTT và thực hành xuất bản website.

7 Chủ đề chính thức
28 Bài học chi tiết
112 Câu hỏi trắc nghiệm tương tác
Thực hành HTML5, CSS3 & Mạng LAN
Chủ đề 1 Chủ đề 2 Chủ đề 3 Chủ đề 4 Chuyên đề ICT Chủ đề 5 Chủ đề 6 Chủ đề 7
Chương Trình Chuẩn SGK Tin Học 12 (GDPT 2018 - ICT)

I. Kiến thức trọng tâm theo 7 chủ đề

Bảng tổng hợp toàn diện ma trận kiến thức Tin học Lớp 12 định hướng Tin học ứng dụng (ICT), bao gồm 7 chủ đề xuyên suốt 28 bài học từ lý thuyết Trí tuệ nhân tạo, Mạng máy tính, Đạo đức số đến thực hành chuyên sâu Lập trình Web HTML5, CSS3 và Hướng nghiệp CNTT.

Chủ đề Bài học Nội dung cần nắm Điều hướng
1. Máy tính và xã hội tri thức 1–2 Trí tuệ nhân tạo, ứng dụng AI, tác động và rủi ro Xem ↓
2. Mạng máy tính và Internet 3–5 Thiết bị mạng, giao thức TCP/IP, chia sẻ tài nguyên Xem ↓
3. Đạo đức, pháp luật và văn hóa trong môi trường số 6 Giao tiếp, ứng xử nhân văn trên mạng Xem ↓
4. Giải quyết vấn đề với sự trợ giúp của máy tính 7–18 HTML, CSS, thiết kế và thực hành tạo website Xem ↓
5. Hướng nghiệp với Tin học 19–21 Nghề quản trị mạng, bảo mật, ngành nghề CNTT Xem ↓
6. Máy tính và xã hội tri thức 22 Kết nối và thực hành với các thiết bị số Xem ↓
7. Ứng dụng Tin học 23–28 Xây dựng, định dạng và hoàn thiện trang web Xem ↓
Lối tắt nhanh: II. Nội dung cốt lõi 28 bài III. Phân loại ôn tập & kiểm tra IV. 6 nhóm kiến thức ưu tiên
Khung chuẩn kiến thức

II. Nội dung cốt lõi từng bài (Chủ đề 1 – 7)

Chủ đề trọng tâm 1

Chủ đề 1: Máy tính và Xã hội tri thức (Trí tuệ nhân tạo - AI)

Khám phá lịch sử hình thành, khái niệm cốt lõi của Trí tuệ nhân tạo (AI), 4 đặc trưng cơ bản và các ứng dụng đột phá của AI trong khoa học, công nghệ và đời sống số.

Bài 1 45 phút
Làm trắc nghiệm bài này

Bài 1: Làm quen với Trí tuệ nhân tạo

Mục tiêu cần đạt:

Hiểu được khái niệm cơ bản về Trí tuệ nhân tạo (AI); Nắm vững lịch sử phát triển và phép thử Turing; Nhận biết 4 đặc trưng cốt lõi của AI; Phân biệt được AI hẹp (Narrow AI) và AI tổng quát (AGI).

💡 Khởi động: Mỗi ngày chúng ta đều tiếp xúc với các tính năng nhận diện khuôn mặt mở khóa điện thoại, trợ lý ảo Siri hay gợi ý video trên TikTok. Liệu các hệ thống này có thực sự 'thông minh' như con người?

1. Khái niệm và Lịch sử hình thành Trí tuệ nhân tạo

Trí tuệ nhân tạo (Artificial Intelligence - AI): Là một ngành khoa học và kỹ thuật thuộc lĩnh vực Khoa học máy tính, nghiên cứu việc xây dựng các máy móc và hệ thống có khả năng mô phỏng các quá trình trí tuệ của con người như: học tập, suy luận logic, nhận thức và tự hoàn thiện.

Phép thử Turing (Turing Test - 1950)

Nhà toán học người Anh Alan Turing đề xuất phép thử: Một người thẩm định giấu mặt đặt câu hỏi văn bản cho cả con người và máy tính. Nếu người thẩm định không thể phân biệt được câu trả lời nào là của máy và câu nào là của người, máy tính đó được coi là có trí tuệ.

Hội thảo Dartmouth (1956)

Thuật ngữ "Artificial Intelligence" chính thức được nhà khoa học máy tính John McCarthy đưa ra tại Hội thảo Dartmouth (Mỹ) năm 1956, đánh dấu sự ra đời chính thức của ngành nghiên cứu AI trên toàn cầu.

2. Bốn đặc trưng cốt lõi của Trí tuệ nhân tạo

Hệ thống AI hiện đại thể hiện trí thông minh qua 4 năng lực đặc trưng sau:

1. Khả năng học (Learning)

Tự động rút ra tri thức, quy luật từ dữ liệu lớn (Big Data) mà không cần con người lập trình cứng từng bước (Machine Learning, Deep Learning).

2. Khả năng suy luận (Reasoning)

Áp dụng các quy tắc logic và tri thức đã học để rút ra kết luận mới, lập kế hoạch hành động hoặc đưa ra phán đoán chính xác.

3. Khả năng nhận thức (Perception)

Thu thập và diễn giải tín hiệu từ thế giới thực qua cảm biến, camera, microphone (thị giác máy tính, nhận dạng giọng nói).

4. Giải quyết vấn đề (Problem Solving)

Tìm kiếm đường đi tối ưu, nước cờ chiến thắng trong không gian trạng thái phức tạp (ví dụ: cờ vua Stockfish, AlphaGo).

3. Phân loại Trí tuệ nhân tạo

Loại AI Đặc điểm cốt lõi Ví dụ tiêu biểu
AI hẹp (Narrow AI / Weak AI) Chuyên giải quyết một nhiệm vụ cụ thể xuất sắc, không thể tự chuyển đổi tri thức sang nhiệm vụ khác ngoài phạm vi huấn luyện. Siri, Google Dịch, FaceID, phần mềm chơi cờ AlphaGo. (Toàn bộ AI hiện nay đều thuộc loại này)
AI tổng quát (General AI / AGI) Có trí tuệ ngang tầm con người, khả năng tự học hỏi, thích ứng linh hoạt và giải quyết mọi tác vụ trí óc. Đang trong giai đoạn nghiên cứu lý thuyết, chưa xuất hiện trên thực tế.
Nhiệm vụ thực hành & Vận dụng:
  • Trải nghiệm trò chơi nhận diện hình vẽ Quick, Draw! của Google và phân tích cách mạng nơ-ron AI nhận diện nét vẽ.
  • Đặt 3 câu hỏi logic bằng tiếng Việt cho trợ lý AI (ChatGPT / Gemini) và đánh giá độ chính xác của câu trả lời.
  • Thảo luận nhóm: Phân tích vì sao nhận diện khuôn mặt FaceID trên điện thoại lại thuộc nhóm AI hẹp (Narrow AI).
Ghi nhớ trọng tâm: Trí tuệ nhân tạo (AI) là ngành khoa học máy tính mô phỏng trí tuệ con người. AI có 4 đặc trưng cốt lõi: Khả năng học, Suy luận, Nhận thức và Giải quyết vấn đề. Toàn bộ các hệ thống AI ứng dụng ngày nay đều thuộc nhóm AI hẹp (Narrow AI).

Trắc nghiệm củng cố Bài 1 (4 câu)

Tự động chấm

Câu 1: Thuật ngữ 'Trí tuệ nhân tạo' (Artificial Intelligence) chính thức được đưa ra tại hội thảo nào và vào năm nào?

Câu 2: Phép thử Turing (Turing Test) được đề xuất nhằm mục đích gì?

Câu 3: Hệ thống AI hiện nay như ChatGPT, phần mềm cờ vua Stockfish thuộc loại AI nào?

Câu 4: Đặc trưng nào của AI giúp hệ thống tự động trích xuất tri thức và tiến bộ hơn qua dữ liệu mà không cần lập trình lại từng câu lệnh?

Bài 2 45 phút
Làm trắc nghiệm bài này

Bài 2: Trí tuệ nhân tạo trong khoa học và đời sống

Mục tiêu cần đạt:

Trình bày được các lĩnh vực ứng dụng tiêu biểu của AI trong đời sống và nghiên cứu khoa học; Nhận thức được các nguy cơ, thách thức về đạo đức, an toàn thông tin và quyền riêng tư do AI mang lại.

💡 Khởi động: Từ chẩn đoán khối u trong y tế đến xe tự hành điều hướng trên phố đông, AI đang thay đổi thế giới như thế nào và con người cần chuẩn bị gì trước làn sóng công nghệ này?

1. Các lĩnh vực ứng dụng đột phá của AI

Xử lý ngôn ngữ tự nhiên (NLP)

Giúp máy tính hiểu, dịch thuật và sinh văn bản tự nhiên như con người. Tiêu biểu: mô hình ngôn ngữ lớn (LLM) ChatGPT, Claude, Google Translate, trợ lý ảo giọng nói Siri/Google Assistant.

Thị giác máy tính (Computer Vision)

Phân tích hình ảnh, video để nhận diện đối tượng, khuôn mặt, biển số xe; chẩn đoán phim X-quang, MRI trong y tế với độ chính xác ngang chuyên gia y khoa.

Phương tiện tự hành & Robot thông minh

Xe tự lái (Tesla, Waymo) xử lý dữ liệu từ camera và radar thời gian thực để tự bẻ lái, phanh an toàn. Robot công nghiệp thông minh tự động hóa chuỗi cung ứng logistics.

Nghiên cứu khoa học & Dự báo

Hệ thống AlphaFold của DeepMind giải mã cấu trúc 3D của hơn 200 triệu protein, thúc đẩy chế tạo thuốc chữa bệnh hiểm nghèo và dự báo thời tiết siêu máy tính.

2. Cảnh báo mặt trái và vấn đề đạo đức của AI

Những thách thức nghiêm trọng cần kiểm soát
  • Thông tin sai lệch & Deepfake: Video, giọng nói giả mạo tinh vi dùng để lừa đảo tài chính hoặc phá hoại danh dự cá nhân.
  • Xâm phạm quyền riêng tư: Thu thập dữ liệu cá nhân khổng lồ không qua xin phép để huấn luyện các mô hình AI.
  • Định kiến dữ liệu (Bias): Nếu dữ liệu đầu vào chứa sự thiên vị chủng tộc, giới tính, mô hình AI sẽ đưa ra các phán đoán phân biệt đối xử.
  • Tác động đến việc làm: Nguy cơ tự động hóa làm thay đổi thị trường lao động, đe dọa các công việc văn phòng lặp đi lặp lại.
Nhiệm vụ thực hành & Vận dụng:
  • Tìm hiểu và trình bày trước lớp về ứng dụng giải mã cấu trúc protein của hệ thống AlphaFold trong y học.
  • Tìm kiếm một video phân tích công nghệ Deepfake và thảo luận 3 dấu hiệu nhận biết video giả mạo.
  • Viết đoạn văn ngắn (100 từ) nêu quan điểm về trách nhiệm của học sinh khi sử dụng AI hỗ trợ học tập.
Ghi nhớ trọng tâm: AI đang ứng dụng mạnh mẽ trong Xử lý ngôn ngữ tự nhiên, Thị giác máy tính, Xe tự hành và Khoa học sức khỏe. Đi kèm cơ hội là các nguy cơ: lừa đảo Deepfake, định kiến dữ liệu, mất quyền riêng tư và xáo trộn thị trường việc làm.

Trắc nghiệm củng cố Bài 2 (4 câu)

Tự động chấm

Câu 1: Lĩnh vực nào của AI chuyên nghiên cứu khả năng hiểu, phân tích và sinh ra tiếng nói, chữ viết của con người?

Câu 2: Hệ thống AI AlphaFold của Google DeepMind đã đạt được thành tựu đột phá nào trong y sinh học?

Câu 3: Công nghệ Deepfake tạo ra hình ảnh, video và giọng nói giả mạo chân thực tiềm ẩn nguy cơ lớn nhất nào?

Câu 4: Khi dữ liệu huấn luyện AI bị thiên lệch (thiếu khách quan), hệ thống AI sẽ dẫn đến hiện tượng gì?

Chủ đề trọng tâm 2

Chủ đề 2: Mạng máy tính và Internet

Tìm hiểu cấu tạo và chức năng các thiết bị mạng cốt lõi (Switch, Router, AP), bộ giao thức truyền thông TCP/IP, địa chỉ IP và thực hành chia sẻ tài nguyên an toàn trong mạng LAN.

Bài 3 45 phút
Làm trắc nghiệm bài này

Bài 3: Một số thiết bị mạng thông dụng

Mục tiêu cần đạt:

Nhận biết và phân biệt được chức năng của các thiết bị mạng cốt lõi: Switch, Router, Access Point (AP), Modem; Phân biệt môi trường truyền dẫn có dây (cáp xoắn, cáp quang) và không dây.

💡 Khởi động: Khi đến trường học hay văn phòng, làm sao hàng trăm thiết bị máy tính, điện thoại có thể cùng kết nối và truyền dữ liệu cho nhau với tốc độ cao?

Bảng Thiết bị mạng thông dụng và Chức năng cốt lõi

Trọng tâm Bài 3
Thiết bị Chức năng cốt lõi
Hub Kết nối các thiết bị và chuyển tín hiệu tới các cổng
Switch Kết nối thiết bị trong LAN và chuyển dữ liệu tới cổng phù hợp
Wireless Access Point (WAP) Cho phép thiết bị kết nối không dây vào mạng
Router Kết nối các mạng và định tuyến gói tin
Modem Chuyển đổi tín hiệu phục vụ kết nối mạng qua đường truyền của nhà cung cấp
Kĩ năng thực hành: Kết nối máy tính với thiết bị mạng qua cổng RJ45 (cáp mạng UTP) hoặc Wi-Fi.

1. Các thiết bị kết nối mạng cục bộ (LAN) và Internet

Bộ chuyển mạch (Switch)

Kết nối các máy tính trong cùng một mạng LAN có dây. Switch hoạt động ở tầng Liên kết dữ liệu (Data Link), lưu giữ bảng địa chỉ MAC để chuyển tiếp khung dữ liệu chính xác đến cổng đích, tránh xung đột đường truyền.

Bộ định tuyến (Router)

Kết nối hai hay nhiều mạng khác nhau (như mạng LAN gia đình với mạng Internet toàn cầu). Router hoạt động ở tầng Mạng (Network), đọc địa chỉ IP đích để tìm đường truyền tối ưu nhất cho gói tin.

Điểm truy cập không dây (Access Point - AP)

Chuyển đổi tín hiệu mạng có dây từ Switch thành sóng vô tuyến điện từ (Wi-Fi) để các thiết bị di động (laptop, smartphone, máy tính bảng) kết nối vào mạng LAN nội bộ.

Modem (Modulator - Demodulator)

Thực hiện chuyển đổi qua lại giữa tín hiệu tương tự (Analog từ đường cáp quang, cáp đồng trục của nhà mạng ISP) và tín hiệu số (Digital) mà máy tính hiểu được. Thiết bị gia đình hiện nay thường tích hợp Modem + Router + Wi-Fi trong 1 hộp thiết bị.

2. Môi trường truyền dẫn mạng thông dụng

Môi trường truyền dẫn Đặc điểm kỹ thuật Ứng dụng tiêu biểu
Cáp mạng xoắn đôi (Twisted Pair - UTP/STP) Gồm 8 sợi dây đồng xoắn từng đôi một để giảm nhiễu, bấm đầu chuẩn RJ45. Khoảng cách tối đa 100m, tốc độ chuẩn Cat5e (1 Gbps), Cat6 (10 Gbps). Nối từ Switch tới PC trong phòng máy trường học, văn phòng.
Cáp quang (Fiber Optic) Lõi bằng sợi thủy tinh siêu mỏng, truyền dữ liệu bằng xung ánh sáng theo nguyên lý phản xạ toàn phần. Băng thông cực lớn, không bị nhiễu điện từ, khoảng cách truyền hàng chục km. Đường truyền Internet nhà mạng ISP, trục chính liên tỉnh, cáp quang biển quốc tế.
Sóng không dây (Wi-Fi, 4G/5G) Sóng điện từ tần số 2.4 GHz, 5 GHz hoặc 6 GHz. Tiện lợi, linh hoạt, nhưng dễ bị suy giảm tín hiệu khi gặp vật cản (tường dày) và nhiễu sóng. Mạng không dây gia đình, quán cà phê, mạng di động công cộng.
Nhiệm vụ thực hành & Vận dụng:
  • Quan sát hệ thống mạng phòng thực hành Tin học của trường và vẽ lại sơ đồ kết nối giữa Router, Switch và các máy con.
  • Quan sát một đoạn dây cáp mạng chuẩn RJ45 và đọc tên chuẩn in trên vỏ dây (Cat5e hoặc Cat6).
  • Phân tích sự khác biệt giữa thiết bị Modem và Router trong việc kết nối Internet tại hộ gia đình.
Ghi nhớ trọng tâm: Switch dùng để kết nối các máy trong cùng mạng LAN dựa vào địa chỉ MAC. Router định tuyến gói tin giữa các mạng khác nhau dựa vào địa chỉ IP. Access Point phát sóng Wi-Fi. Cáp xoắn đôi Cat5e/Cat6 dùng cho cự ly ngắn dưới 100m, cáp quang dùng cho đường truyền băng thông lớn cự ly xa.

Trắc nghiệm củng cố Bài 3 (4 câu)

Tự động chấm

Câu 1: Thiết bị nào có chức năng chuyển tiếp dữ liệu giữa các máy tính trong cùng một mạng LAN dựa trên bảng địa chỉ MAC?

Câu 2: Thiết bị mạng nào đóng vai trò kết nối mạng LAN nội bộ với mạng Internet toàn cầu bằng cách phân tích địa chỉ IP?

Câu 3: Khoảng cách truyền dữ liệu tối đa đảm bảo tín hiệu ổn định của cáp xoắn đôi đồng chuẩn Cat5e/Cat6 là bao nhiêu?

Câu 4: Ưu điểm vượt trội nhất của cáp quang (Fiber Optic) so với cáp xoắn đôi bằng đồng là gì?

Bài 4 45 phút
Làm trắc nghiệm bài này

Bài 4: Giao thức mạng và địa chỉ IP

Mục tiêu cần đạt:

Hiểu được vai trò của bộ giao thức TCP/IP; Nắm vững cấu trúc địa chỉ IPv4, Subnet mask, Default Gateway, DNS; Phân biệt được địa chỉ IP tĩnh và IP động (DHCP); Sử dụng được lệnh `ipconfig` và `ping` trên dòng lệnh cmd.

💡 Khởi động: Mỗi ngôi nhà đều cần một số nhà để nhận bưu phẩm, vậy trên mạng Internet, làm sao gói tin biết được máy tính nào đang gửi yêu cầu và gửi dữ liệu về đâu?

1. Bộ giao thức truyền thông TCP/IP

Giao thức mạng (Network Protocol): Là tập hợp các quy tắc chuẩn hóa quy định định dạng dữ liệu, phương thức truyền, kiểm tra lỗi và đồng bộ hóa truyền thông giữa các thiết bị. Bộ giao thức thống trị mạng toàn cầu là TCP/IP gồm 4 tầng:

Tầng 4
Tầng Ứng dụng (Application): Giao tiếp trực tiếp với phần mềm người dùng. Tiêu biểu: HTTP/HTTPS (truy cập web), FTP (truyền tệp), SMTP/POP3 (email), DNS (phân giải tên miền).
Tầng 3
Tầng Giao vận (Transport): Kiểm soát truyền dữ liệu đầu cuối. TCP (tin cậy, có xác nhận bắt tay 3 bước) và UDP (tốc độ cao, chấp nhận mất gói nhẹ như livestream, voice call).
Tầng 2
Tầng Mạng (Internet / Network): Chịu trách nhiệm đánh địa chỉ logic (IP) và tìm đường đi (Routing) cho gói tin qua giao thức IP (IPv4, IPv6).
Tầng 1
Tầng Giao tiếp mạng (Network Interface): Điều khiển phần cứng card mạng NIC, đóng gói khung Frame kèm địa chỉ MAC và truyền tín hiệu vật lý qua dây hoặc sóng vô tuyến.

2. Cấu trúc địa chỉ IP và các thông số mạng cốt lõi

Địa chỉ IPv4

Độ dài 32 bit, chia thành 4 octet (mỗi octet 8 bit có giá trị từ 0 đến 255) cách nhau bởi dấu chấm. Ví dụ: 192.168.1.15.
- Dải địa chỉ riêng (Private IP dùng trong LAN): 192.168.x.x, 10.x.x.x, 172.16.x.x.

Địa chỉ IPv6

Được phát triển nhằm giải quyết triệt để sự cạn kiệt của IPv4. Độ dài 128 bit, biểu diễn bằng 8 nhóm số thập lục phân (Hexadecimal) cách nhau dấu hai chấm :. Ví dụ: 2001:0db8:85a3::8a2e:0370:7334.

Subnet Mask (Mặt nạ mạng con): Xác định phần nào trong địa chỉ IP là định danh mạng (Network ID) và phần nào là định danh máy trạm (Host ID). Ví dụ phổ biến: 255.255.255.0.
Default Gateway: Địa chỉ IP cổng thoát của Router trong mạng LAN để gửi các gói tin ra ngoài Internet. Thường là 192.168.1.1.
DNS Server (Hệ thống phân giải tên miền): "Danh bạ Internet" biên dịch tên miền dễ nhớ (như google.com) thành địa chỉ IP máy chủ (như 142.250.190.46). DNS thông dụng: Google 8.8.8.8, Cloudflare 1.1.1.1.

3. Các lệnh kiểm tra cấu hình mạng trên Windows

# 1. Xem toàn bộ thông số mạng (IP, Subnet, Gateway, MAC):

C:> ipconfig /all

# 2. Kiểm tra độ trễ và mất gói tin tới máy chủ khác:

C:> ping 8.8.8.8

C:> ping google.com

Nhiệm vụ thực hành & Vận dụng:
  • Mở cửa sổ Command Prompt (cmd) trên Windows, chạy lệnh `ipconfig` và ghi chép lại địa chỉ IPv4, Subnet Mask và Default Gateway của máy tính.
  • Thực hiện lệnh `ping 8.8.8.8` và đọc các thông số kết quả: thời gian phản hồi (Time/ms), số gói gửi/nhận và tỉ lệ mất gói (Loss).
  • Thử ngắt kết nối dây mạng và chạy lại lệnh `ping`, quan sát thông báo lỗi Request timed out hoặc Destination host unreachable.
Ghi nhớ trọng tâm: TCP/IP là bộ giao thức nền tảng của Internet. Địa chỉ IPv4 gồm 32 bit, chia 4 octet. Default Gateway là cổng ra ngoài của Router. DNS giúp chuyển đổi tên miền sang địa chỉ IP. Lệnh ipconfig dùng xem thông số mạng, lệnh ping dùng kiểm tra kết nối thông mạng.

Trắc nghiệm củng cố Bài 4 (4 câu)

Tự động chấm

Câu 1: Địa chỉ IPv4 có độ dài bao nhiêu bit và được chia thành bao nhiêu octet (nhóm số thập phân)?

Câu 2: Dịch vụ mạng nào có chức năng chuyển đổi tên miền dễ nhớ (ví dụ: dantri.com.vn) thành địa chỉ IP dạng số của máy chủ?

Câu 3: Địa chỉ nào sau đây thuộc dải địa chỉ IP riêng (Private IP) chuyên dùng trong mạng nội bộ gia đình và trường học?

Câu 4: Lệnh nào trên cửa sổ Command Prompt (cmd) của Windows được dùng để gửi các gói tin ICMP nhằm kiểm tra kết nối thông suốt giữa hai thiết bị?

Bài 5 45 phút
Làm trắc nghiệm bài này

Bài 5: Thực hành chia sẻ tài nguyên mạng

Mục tiêu cần đạt:

Thực hiện thành thạo các bước bật tính năng chia sẻ mạng trên Windows; Thiết lập chia sẻ thư mục và máy in trong mạng LAN; Cài đặt quyền truy cập an toàn (Read / Write); Khắc phục các lỗi chặn tường lửa phổ biến.

💡 Khởi động: Trong phòng máy tính của lớp hoặc văn phòng, thay vì phải cắm USB qua từng máy để sao chép tài liệu, làm thế nào để chia sẻ ngay một thư mục dùng chung qua mạng LAN?

1. Bật tính năng dò tìm mạng và chia sẻ trên Windows

Bước chuẩn bị trong Advanced sharing settings
  1. Mở Settings → Network & Internet → Advanced network settings → Advanced sharing settings (hoặc qua Control Panel).
  2. Tại mục Private network: Chuyển Network discovery sang ON và bật File and printer sharing sang ON.
  3. Tại mục All networks: Tùy chọn tắt Password protected sharing nếu muốn các máy trong phòng thực hành truy cập trực tiếp không cần nhập mật khẩu tài khoản Windows.

2. Quy trình chia sẻ thư mục và phân quyền truy cập

Các bước thiết lập chia sẻ
  1. Nhấp chuột phải vào thư mục cần chia sẻ → Chọn Properties.
  2. Chọn thẻ Sharing → Bấm nút Advanced Sharing.
  3. Tích chọn Share this folder → Đặt tên chia sẻ (Share name).
  4. Nhấn nút Permissions để thiết lập quyền truy cập cho nhóm Everyone.
Các mức phân quyền truy cập
  • Read (Chỉ đọc): Người dùng từ xa chỉ có thể xem và sao chép tệp về máy mình, không thể sửa đổi hoặc xóa tệp gốc.
  • Change (Thay đổi): Cho phép xem, sao chép, chỉnh sửa nội dung và xóa các tệp tin trong thư mục chia sẻ.
  • Full Control (Toàn quyền): Toàn quyền bao gồm cả việc thay đổi phân quyền bảo mật của thư mục.

3. Truy cập thư mục chia sẻ từ máy tính khác

Trên máy tính khách trong cùng mạng LAN:

1. Nhấn tổ hợp phím Windows + R để mở hộp thoại Run.

2. Nhập đường dẫn UNC: \\<Địa_chỉ_IP_máy_chủ> (Ví dụ: \\192.168.1.15)

3. Hoặc mở File Explorer → Nhập \\Tên-Máy-Chủ trên thanh địa chỉ.

Nhiệm vụ thực hành & Vận dụng:
  • Tạo một thư mục mang tên 'TaiLieuLop12' trên ổ đĩa D của máy tính mình và cấu hình chia sẻ quyền Read cho mọi người trong phòng máy.
  • Dùng máy tính bên cạnh, nhấn phím Windows + R và nhập địa chỉ IP của máy tính thứ nhất để truy cập thư mục 'TaiLieuLop12'.
  • Thử tạo một tệp tin mới trong thư mục khi chỉ được cấp quyền Read để kiểm tra thông báo từ chối truy cập Access Denied.
Ghi nhớ trọng tâm: Chia sẻ tài nguyên trong mạng LAN giúp trao đổi tệp tin và dùng chung máy in nhanh chóng. Cần bật Network Discovery và File Sharing trong Settings, phân quyền hợp lý (Read để an toàn, Change khi cần làm việc nhóm) và truy cập qua đường dẫn UNC \\IP.

Trắc nghiệm củng cố Bài 5 (4 câu)

Tự động chấm

Câu 1: Để truy cập vào thư mục được chia sẻ của máy tính có IP là 192.168.1.50 qua hộp thoại Run (Windows + R), cú pháp đường dẫn UNC nào sau đây là đúng?

Câu 2: Nếu muốn người dùng khác chỉ được xem và tải tài liệu về máy mà không thể xóa hay sửa đổi tệp trong thư mục chia sẻ, bạn cần gán quyền nào?

Câu 3: Nếu máy tính khách báo lỗi không thể tìm thấy máy chủ chia sẻ dù cả hai đều cắm dây mạng, nguyên nhân phổ biến nhất là gì?

Câu 4: Lợi ích lớn nhất của việc chia sẻ máy in (Printer Sharing) trong văn phòng qua mạng LAN là gì?

Chủ đề trọng tâm 3

Chủ đề 3: Đạo đức, pháp luật và văn hoá trong môi trường số

Rèn luyện văn hóa ứng xử trực tuyến văn minh (Netiquette), nắm vững Luật An ninh mạng, phòng chống lừa đảo mạo danh và bảo vệ danh tính số cá nhân.

Bài 6 45 phút
Làm trắc nghiệm bài này

Bài 6: Giao tiếp và ứng xử trong môi trường số

Mục tiêu cần đạt:

Rèn luyện văn hóa giao tiếp và chuẩn mực đạo đức trên mạng (Netiquette); Nắm vững các điều khoản cốt lõi của Luật An ninh mạng Việt Nam; Nhận diện các hành vi lừa đảo trực tuyến (Phishing) và biết cách bảo vệ danh tính số cá nhân.

💡 Khởi động: Không gian mạng là thế giới ảo nhưng mọi hành vi, lời nói và chia sẻ đều để lại 'dấu chân số' (digital footprint) gắn liền với trách nhiệm pháp lý thực sự của mỗi công dân.

1. Văn hóa giao tiếp trên mạng (Netiquette)

Nguyên tắc ứng xử văn minh
  • Tôn trọng người khác: Luôn nhớ phía sau màn hình là một con người bằng xương bằng thịt có cảm xúc và nhân phẩm.
  • Tránh viết hoa toàn bộ (CAPS LOCK) vì trong văn hóa mạng, hành động này bị coi là đang la hét, quát tháo thô lỗ.
  • Không tham gia hoặc cổ vũ các hành vi bạo lực mạng (Cyberbullying), xúc phạm danh dự hay tung tin đồn vô căn cứ.
Tôn trọng bản quyền số
  • Luôn ghi rõ nguồn tác giả khi trích dẫn bài viết, tranh ảnh, video hoặc mã nguồn học tập.
  • Không sử dụng, bẻ khóa (crack) phần mềm có bản quyền trái phép; ưu tiên phần mềm mã nguồn mở có giấy phép phù hợp (GPL, MIT).
  • Tuân thủ Luật Sở hữu trí tuệ về tác phẩm số.

2. Nhận diện các hình thức tấn công lừa đảo và bảo vệ danh tính số

Lừa đảo mạo danh (Phishing)

Kẻ gian gửi tin nhắn hoặc email giả mạo ngân hàng, trường học, mạng xã hội kèm đường link giả (ví dụ: faceb00k-login.com) để dụ nạn nhân nhập tài khoản, mật khẩu hoặc mã OTP ngân hàng.

Các biện pháp tự bảo vệ danh tính số
  • Mật khẩu mạnh: Tối thiểu 12 ký tự gồm chữ hoa, chữ thường, chữ số và ký tự đặc biệt (ví dụ: Kntt@12#TinHoc).
  • Xác thực hai yếu tố (2FA / MFA): Bật xác thực qua ứng dụng tạo mã OTP (Google Authenticator) để bảo vệ tài khoản ngay cả khi lộ mật khẩu.
  • Cẩn trọng với thông tin cá nhân: Không đăng tải CCCD, vé máy bay có mã QR, địa chỉ nhà riêng lên mạng xã hội.
Nhiệm vụ thực hành & Vận dụng:
  • Kiểm tra mức độ an toàn mật khẩu hiện tại của em trên các công cụ kiểm tra độ mạnh mật khẩu và đổi sang mật khẩu mạnh hơn.
  • Kích hoạt tính năng xác thực hai yếu tố (2FA) cho tài khoản Google hoặc tài khoản mạng xã hội của em.
  • Đóng vai xử lý tình huống: Nhận được tin nhắn từ tài khoản Facebook của bạn thân nhờ chuyển tiền gấp, em sẽ thực hiện các bước xác minh nào trước khi đưa ra quyết định?
Ghi nhớ trọng tâm: Ứng xử trên không gian số đòi hỏi văn hóa Netiquette, tôn trọng bản quyền số và tuân thủ Luật An ninh mạng. Cần luôn cảnh giác trước các thủ đoạn lừa đảo Phishing, bảo vệ tài khoản bằng mật khẩu mạnh và xác thực hai bước 2FA.

Trắc nghiệm củng cố Bài 6 (4 câu)

Tự động chấm

Câu 1: Hành động nào sau đây là vi phạm văn hóa giao tiếp và ứng xử trên không gian mạng (Netiquette)?

Câu 2: Hình thức tấn công mạng nào mà kẻ lừa đảo tạo website hoặc email giả mạo hệt như thật nhằm đánh cắp thông tin đăng nhập và mã OTP của người dùng?

Câu 3: Biện pháp bảo mật nào hiệu quả nhất để ngăn chặn kẻ xấu chiếm quyền tài khoản ngay cả khi mật khẩu của bạn đã vô tình bị lộ?

Câu 4: Theo Luật An ninh mạng Việt Nam, hành vi nào sau đây bị nghiêm cấm trên không gian mạng?

Chủ đề trọng tâm 4

Chủ đề 4: Tạo trang web (HTML5 & CSS3)

Làm chủ ngôn ngữ đánh dấu siêu văn bản HTML5, các thẻ ngữ nghĩa, tạo bảng, biểu mẫu form và định dạng giao diện chuyên nghiệp với cascading style sheets CSS3.

Trọng tâm thực hành cốt lõi

Chủ đề 4: Giải quyết vấn đề với sự trợ giúp của máy tính (HTML & CSS)

12 Bài học thực hành
Lưu ý quan trọng: Đây là chủ đề có nhiều nội dung thực hành nhất trong chương trình Tin học 12, tập trung vào xây dựng giao diện bằng ngôn ngữ đánh dấu siêu văn bản HTML5 và định dạng mỹ thuật bằng CSS3.
Bài Kiến thức cốt lõi
7. HTML và cấu trúc trang webHTML, phần tử, thẻ, cấu trúc tài liệu HTML
8. Định dạng văn bảnThuộc tính thẻ, tiêu đề, đoạn văn, kiểu chữ
9. Tạo danh sách, bảngDanh sách có thứ tự, không thứ tự, bảng
10. Tạo liên kếtSiêu văn bản, đường dẫn, liên kết trong và ngoài website
11. Chèn tệp tin đa phương tiện và khung nội tuyếnHình ảnh, âm thanh, video, iframe
12. Tạo biểu mẫuForm, nhãn, ô nhập liệu, các thành phần biểu mẫu
13. Khái niệm, vai trò của CSSMục đích sử dụng CSS trong trình bày trang web
14. Định dạng văn bản bằng CSSBộ chọn, thuộc tính định dạng, quy tắc CSS
15. Tạo màu cho chữ và nềnThiết lập màu văn bản, màu nền
16. Định dạng khungCác thuộc tính trình bày khung phần tử (Box model: margin, border, padding)
17. Các mức ưu tiên của bộ chọnQuy tắc ưu tiên khi áp dụng CSS (Inline > ID > Class > Thẻ)
18. Thực hành tổng hợp thiết kế trang webKết hợp HTML và CSS để xây dựng trang web hoàn chỉnh

Cấu trúc cơ bản của một trang HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trang web của em</title>
</head>
<body>
    <h1>Tiêu đề</h1>
    <p>Nội dung trang web</p>
</body>
</html>

Kiến thức CSS cần nhớ 

h1 {
    color: blue;
    background-color: lightyellow;
    font-size: 24px;
    text-align: center;
}

p {
    font-family: Arial;
    line-height: 1.5;
}

💡 Cần hiểu cấu trúc quy tắc CSS gồm bộ chọn – thuộc tính – giá trị, đồng thời biết áp dụng để định dạng một trang web chuẩn thẩm mỹ và thân thiện người dùng.

Bảng các thẻ HTML quan trọng bắt buộc ghi nhớ

Thẻ HTML Chức năng
<h1> đến <h6>Tạo tiêu đề theo phân cấp từ lớn đến nhỏ
<p>Tạo đoạn văn bản
<br>Ngắt dòng (thẻ đơn, không có thẻ đóng)
<strong>, <em>Nhấn mạnh nội dung (in đậm ngữ nghĩa, in nghiêng)
<ol>, <ul>, <li>Tạo danh sách có thứ tự (<ol>), không thứ tự (<ul>) và mục phần tử (<li>)
<table>, <tr>, <th>, <td>Tạo bảng (<table>), hàng (<tr>), ô tiêu đề (<th>) và ô dữ liệu (<td>)
<a>Tạo siêu liên kết với thuộc tính href
<img>Chèn hình ảnh với thuộc tính src và alt
<audio>, <video>Chèn âm thanh, video đa phương tiện với controls
<iframe>Tạo khung nội tuyến nhúng tài liệu hoặc website khác
<form>, <input>Tạo biểu mẫu nhập liệu và tương tác người dùng
Bài 7 45 phút
Làm trắc nghiệm bài này

Bài 7: Giới thiệu về HTML và cấu trúc trang web

Mục tiêu cần đạt:

Nắm vững khái niệm ngôn ngữ đánh dấu siêu văn bản HTML5; Hiểu cấu trúc cây phân cấp DOM của một tài liệu HTML chuẩn; Phân biệt thẻ mở, nội dung, thẻ đóng và các thẻ tự đóng (void tags); Hiểu khái niệm thuộc tính (attributes).

💡 Khởi động: Mọi trang web hiện đại từ Google, Facebook đến các trang tin tức đều được xây dựng trên bộ khung xương vững chắc là ngôn ngữ HTML. Vậy một trang web chuẩn bắt đầu từ đâu?

1. Ngôn ngữ đánh dấu siêu văn bản HTML5

HTML (HyperText Markup Language): Là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo và cấu trúc các thành phần trên trang web (văn bản, hình ảnh, liên kết, bảng, biểu mẫu). HTML không phải là ngôn ngữ lập trình vì không chứa các cấu trúc điều khiển logic (rẽ nhánh, lặp).

Cú pháp phần tử HTML (Element)

<tên_thẻ thuộc_tính="giá_trị"> Nội dung hiển thị </tên_thẻ>

Gồm thẻ mở, nội dung và thẻ đóng có dấu gạch chéo /.

Thẻ đơn tự đóng (Void Elements)

Là các thẻ không chứa nội dung văn bản bên trong và không cần thẻ đóng: <br> (ngắt dòng), <hr> (đường kẻ ngang), <img> (chèn ảnh), <input> (ô nhập liệu), <meta>.

2. Cấu trúc cây phân cấp của một tệp HTML chuẩn

Mọi trang web hợp lệ theo chuẩn HTML5 đều tuân thủ cấu trúc tối thiểu sau:

<!DOCTYPE html> <!-- Khai báo phiên bản HTML5 -->
<html lang="vi"> <!-- Thẻ gốc bao bọc toàn bộ trang web -->
  <head> <!-- Phần đầu: chứa siêu dữ liệu, không hiển thị trực tiếp -->
    <meta charset="UTF-8"> <!-- Bảng mã tiếng Việt -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiêu đề hiển thị trên thanh tab trình duyệt</title>
  </head>
  <body> <!-- Phần thân: chứa toàn bộ nội dung người dùng nhìn thấy -->
    <h1>Xin chào thế giới Web!</h1>
    <p>Đây là trang web đầu tiên của em.</p>
  </body>
</html>
Nhiệm vụ thực hành & Vận dụng:
  • Khởi động trình soạn thảo văn bản (Notepad hoặc VS Code), nhập đúng cấu trúc HTML5 cơ bản và lưu tệp với tên `index.html`.
  • Nhấp đúp vào tệp `index.html` để mở bằng trình duyệt (Chrome/Edge) và quan sát tiêu đề tab cũng như nội dung trang web.
  • Thực hiện xem mã nguồn trang web (nhấn phím tắt Ctrl + U trên trình duyệt) của một trang tin tức bất kỳ để tìm hiểu cấu trúc thẻ.
Ghi nhớ trọng tâm: HTML5 là ngôn ngữ đánh dấu siêu văn bản định hình cấu trúc trang web. Tài liệu chuẩn gồm , thẻ gốc <html>, phần <head> chứa siêu dữ liệu và tiêu đề trang, phần <body> chứa toàn bộ nội dung văn bản, hình ảnh hiển thị trên trình duyệt.

Trắc nghiệm củng cố Bài 7 (4 câu)

Tự động chấm

Câu 1: Thẻ nào trong tài liệu HTML chứa toàn bộ các nội dung văn bản, hình ảnh, liên kết mà người dùng nhìn thấy trên màn hình trình duyệt?

Câu 2: Thẻ HTML nào sau đây là thẻ đơn tự đóng (Void Element), không có thẻ đóng tương ứng?

Câu 3: Thẻ <code><title></code> nằm trong phần nào của tài liệu HTML?

Câu 4: Dòng khai báo <code><!DOCTYPE html></code> ở đầu tệp tin HTML có ý nghĩa gì?

Bài 8 45 phút
Làm trắc nghiệm bài này

Bài 8: Định dạng văn bản và tiêu đề trong HTML

Mục tiêu cần đạt:

Sử dụng thành thạo các thẻ tiêu đề từ <h1> đến <h6>; Định dạng đoạn văn <p>, ngắt dòng <br>, đường kẻ <hr>; Sử dụng các thẻ định dạng ký tự: <strong>, <em>, <mark>, <sup>, <sub> chuẩn ngữ nghĩa.

💡 Khởi động: Một bài báo điện tử hay một bài viết blog cần có tiêu đề chính, các đề mục con và những từ khóa quan trọng được làm nổi bật. HTML cung cấp những thẻ nào để thực hiện việc này?

1. Các cấp độ tiêu đề (Headings) và Đoạn văn (Paragraphs)

Các thẻ tiêu đề từ <h1> đến <h6>

Thể hiện mức độ quan trọng giảm dần theo cấp bậc cấu trúc tài liệu:

  • <h1>: Tiêu đề lớn nhất (chỉ nên có 1 thẻ duy nhất trên 1 trang web cho chuẩn SEO).
  • <h2>: Tiêu đề mục chính của bài viết.
  • <h3> đến <h6>: Các tiểu mục nhỏ hơn.
Đoạn văn <p>, Ngắt dòng <br>, Kẻ ngang <hr>
  • <p>...</p>: Định nghĩa một đoạn văn bản (trình duyệt tự động chèn khoảng cách trống trên và dưới đoạn).
  • <br>: Xuống dòng ngay lập tức mà không tạo đoạn mới.
  • <hr>: Tạo một đường kẻ ngang phân tách các phần nội dung khác nhau.

2. Các thẻ định dạng ký tự ngữ nghĩa (Inline Formatting)

Thẻ HTML Hiển thị trực quan Ý nghĩa ngữ nghĩa
<strong> Chữ in đậm quan trọng Nhấn mạnh nội dung có tầm quan trọng cao (tốt cho SEO và trợ năng).
<em> Chữ in nghiêng nhấn giọng Nhấn mạnh ngữ điệu hoặc thuật ngữ chuyên ngành.
<mark> Chữ được tô vàng Đánh dấu văn bản được tìm kiếm hoặc chú ý đặc biệt.
<sup> a2 + b2 = c2 Chỉ số trên (dùng cho lũy thừa, số mũ toán học).
<sub> H2O, CO2 Chỉ số dưới (dùng cho công thức hóa học).
Nhiệm vụ thực hành & Vận dụng:
  • Soạn thảo một trang HTML ngắn giới thiệu bản thân với tiêu đề <h1>, các đề mục <h2>, các đoạn văn <p>.
  • Sử dụng thẻ <strong> để làm nổi bật sở thích và thẻ <em> cho câu danh ngôn yêu thích của em.
  • Viết công thức định lý Pythagoras (a² + b² = c²) và phương trình hóa học tạo thành nước (2H₂ + O₂ → 2H₂O) bằng các thẻ <sup> và <sub>.
Ghi nhớ trọng tâm: HTML cung cấp 6 cấp độ tiêu đề <h1> đến <h6> thể hiện thứ bậc tài liệu. Thẻ <p> dùng cho đoạn văn, <br> ngắt dòng, <hr> kẻ ngang. Các thẻ định dạng ngữ nghĩa <strong>, <em>, <mark>, <sup>, <sub> giúp văn bản rõ ràng và tối ưu công cụ tìm kiếm.

Trắc nghiệm củng cố Bài 8 (4 câu)

Tự động chấm

Câu 1: Thẻ tiêu đề nào có kích thước chữ lớn nhất và thể hiện mức độ quan trọng cao nhất trong văn bản HTML?

Câu 2: Để viết công thức hóa học nước H₂O với số 2 nhỏ nằm ở phía dưới, ta sử dụng cặp thẻ nào?

Câu 3: Thẻ nào được khuyến nghị sử dụng để in đậm văn bản nhằm nhấn mạnh tầm quan trọng về mặt ngữ nghĩa (semantic)?

Câu 4: Thẻ <code><hr></code> trong HTML tạo ra hiệu ứng gì trên trang web?

Bài 9 45 phút
Làm trắc nghiệm bài này

Bài 9: Tạo danh sách và bảng trong HTML

Mục tiêu cần đạt:

Tạo thành thạo danh sách có thứ tự <ol> và không có thứ tự <ul>; Xây dựng bảng dữ liệu hoàn chỉnh với <table>, <tr>, <th>, <td>; Áp dụng thuộc tính gộp ô `colspan` (gộp cột) và `rowspan` (gộp hàng).

💡 Khởi động: Để hiển thị thời khóa biểu của lớp hay bảng giá dịch vụ một cách gọn gàng, khoa học, chúng ta cần tổ chức dữ liệu thành dạng danh sách và bảng biểu như thế nào?

1. Danh sách có thứ tự (Ordered) và không thứ tự (Unordered)

Danh sách có thứ tự <ol>

Các mục được đánh số 1, 2, 3 hoặc chữ cái A, B, C; mỗi mục con dùng thẻ <li>:

<ol type="1">
  <li>Bước 1: Bật máy tính</li>
  <li>Bước 2: Mở trình duyệt</li>
</ol>
Danh sách không thứ tự <ul>

Các mục được hiển thị bằng dấu chấm tròn (bullet point); thường dùng làm thanh menu:

<ul>
  <li>Trang chủ</li>
  <li>Khóa học</li>
  <li>Liên hệ</li>
</ul>

2. Cấu trúc bảng dữ liệu (HTML Table)

Bảng trong HTML được tạo bằng thẻ <table> với các thẻ thành phần:

  • <tr> (table row): Định nghĩa một hàng trong bảng.
  • <th> (table header): Ô tiêu đề của cột/hàng (chữ tự động in đậm và căn giữa).
  • <td> (table data): Ô chứa dữ liệu thông thường.
  • Thuộc tính colspan="N": Gộp N cột liền kề thành 1 ô.
  • Thuộc tính rowspan="N": Gộp N hàng dọc liền kề thành 1 ô.
<table border="1">
  <tr>
    <th>STT</th><th>Môn học</th><th>Số tiết</th>
  </tr>
  <tr>
    <td>1</td><td>Tin học 12</td><td>70</td>
  </tr>
</table>
Nhiệm vụ thực hành & Vận dụng:
  • Tạo một danh sách có thứ tự <ol> liệt kê 5 bước lập kế hoạch học tập môn Tin học 12.
  • Tạo bảng thời khóa biểu tuần học gồm 6 cột (Thứ 2 đến Thứ 7) và 5 hàng tiết học có tiêu đề <th> rõ ràng.
  • Thực hành sử dụng thuộc tính `colspan="2"` để gộp 2 ô 'Tiết chào cờ' vào sáng Thứ Hai.
Ghi nhớ trọng tâm: Thẻ <ol> tạo danh sách đánh số có thứ tự, thẻ <ul> tạo danh sách chấm tròn không thứ tự; mỗi mục con nằm trong <li>. Bảng được tạo bởi <table>, hàng <tr>, ô tiêu đề <th> và ô dữ liệu <td>. Gộp cột dùng colspan, gộp hàng dùng rowspan.

Trắc nghiệm củng cố Bài 9 (4 câu)

Tự động chấm

Câu 1: Thẻ nào sau đây được dùng để khai báo một mục con (List Item) nằm bên trong danh sách <code><ol></code> hoặc <code><ul></code>?

Câu 2: Trong cấu trúc bảng HTML, thẻ nào định nghĩa một ô tiêu đề cột với đặc điểm chữ tự động in đậm và căn giữa?

Câu 3: Để gộp 3 cột nằm ngang liền kề nhau thành một ô duy nhất trong bảng, ta dùng thuộc tính nào?

Câu 4: Để danh sách có thứ tự <code><ol></code> bắt đầu đánh số bằng chữ cái La Mã hoa (I, II, III...), ta sử dụng thuộc tính nào?

Bài 10 45 phút
Làm trắc nghiệm bài này

Bài 10: Tạo liên kết siêu văn bản trong HTML

Mục tiêu cần đạt:

Sử dụng thành thạo thẻ siêu liên kết <a> với thuộc tính bắt buộc `href`; Phân biệt liên kết tuyệt đối (URL đầy đủ) và liên kết tương đối nội bộ; Sử dụng thuộc tính `target="_blank"`; Tạo liên kết neo nội bộ (Bookmark Anchor) nhảy đến thẻ có `id` tương ứng.

💡 Khởi động: Điểm kỳ diệu biến mạng lưới các tệp tin riêng lẻ thành mạng toàn cầu Internet chính là 'Siêu liên kết' (Hyperlink). Thẻ nào trong HTML giữ vai trò kết nối thế giới?

1. Thẻ siêu liên kết <a> và các loại liên kết

Thẻ <a> (Anchor) biến văn bản hoặc hình ảnh thành điểm nhấp chuột dẫn tới trang web khác, tệp tin hoặc vị trí khác trong cùng trang web. Thuộc tính quan trọng nhất là href (hypertext reference):

Liên kết tuyệt đối (Absolute URL)

Chỉ định địa chỉ web đầy đủ bao gồm giao thức (http:// hoặc https://):

<a href="https://moet.gov.vn" target="_blank">Bộ GD&ĐT</a>
Liên kết tương đối (Relative URL)

Dẫn tới tệp HTML khác trong cùng cấu trúc thư mục của website:

<a href="about.html">Giới thiệu</a>
<a href="courses/grade_12.html">Lớp 12</a>

2. Thuộc tính target và Liên kết neo nội bộ (Bookmark Anchor)

Thuộc tính target="_blank": Mở trang web đích trên một thẻ tab trình duyệt mới, giúp người dùng không bị rời khỏi trang web hiện tại.
Liên kết neo nhảy tới phần tử trong trang (Bookmark)

Dùng dấu thăng # kết hợp với định danh id của phần tử đích:

<!-- Nút bấm nhảy nhanh -->
<a href="#bai-10">Xem chi tiết Bài 10</a>

<!-- Phần tử đích đến -->
<article id="bai-10">...</article>
Nhiệm vụ thực hành & Vận dụng:
  • Tạo một trang web có danh sách menu liên kết tới 3 trang web hữu ích: Google, Wikipedia tiếng Việt và Cổng thông tin Bộ GD&ĐT với `target="_blank"`.
  • Tạo nút 'Về đầu trang' ở cuối trang web bằng cách gán `href="#top"` và đặt `id="top"` ở thẻ <body>.
  • Tạo liên kết gửi thư điện tử bằng cú pháp `href="mailto:hotro@codehub.edu.vn"` và kiểm tra hoạt động khi nhấp chuột.
Ghi nhớ trọng tâm: Thẻ <a> dùng tạo siêu liên kết với thuộc tính bắt buộc href. Phân biệt liên kết tuyệt đối (đầy đủ domain https://) và tương đối. Dùng target="_blank" để mở trang trong tab mới. Dùng dấu #id để tạo liên kết neo nhảy nhanh trong cùng trang web.

Trắc nghiệm củng cố Bài 10 (4 câu)

Tự động chấm

Câu 1: Thuộc tính bắt buộc nào của thẻ <code><a></code> dùng để chỉ định địa chỉ trang web đích hoặc tệp tin cần liên kết tới?

Câu 2: Để khi người dùng nhấp vào liên kết, trang web đích được mở tự động trên một thẻ (tab) mới của trình duyệt, ta dùng giá trị thuộc tính nào?

Câu 3: Để tạo một liên kết neo nhảy ngay đến phần tử có định danh <code>id="chude-4"</code> nằm trong cùng trang web, giá trị của thuộc tính <code>href</code> là gì?

Câu 4: Đoạn mã nào sau đây tạo ra liên kết mở trình quản lý email để gửi thư trực tiếp cho địa chỉ contact@example.com?

Bài 11 45 phút
Làm trắc nghiệm bài này

Bài 11: Chèn hình ảnh và đa phương tiện vào trang web

Mục tiêu cần đạt:

Sử dụng thành thạo thẻ đơn <img> với thuộc tính `src`, `alt`, `width`; Chèn âm thanh chuẩn HTML5 với thẻ <audio controls>; Chèn video với <video controls>; Nhúng bản đồ và video YouTube an toàn qua thẻ khung nội tuyến <iframe>.

💡 Khởi động: Một trang web sinh động không thể chỉ có chữ văn bản khô khan. Làm thế nào để chèn hình ảnh minh họa chất lượng cao, bài hát MP3, video bài giảng MP4 hay nhúng bản đồ trường học?

1. Chèn hình ảnh với thẻ đơn <img>

Thẻ <img> là thẻ đơn tự đóng không có nội dung văn bản bên trong, có các thuộc tính then chốt:

Các thuộc tính cốt lõi của thẻ <img>
  • src (source): Đường dẫn tới tệp ảnh (ảnh nội bộ images/logo.png hoặc URL mạng).
  • alt (alternative text): Đoạn văn bản mô tả thay thế khi ảnh bị lỗi tải, đặc biệt quan trọng cho công cụ tìm kiếm SEO và máy đọc màn hình người khiếm thị.
  • width / height: Chiều rộng và chiều cao (tính bằng pixel px hoặc phần trăm %).
<!-- Cú pháp chuẩn chèn ảnh: -->
<img
  src="images/thap-rua.jpg"
  alt="Hình ảnh Tháp Rùa Hồ Gươm Hà Nội"
  width="600">

2. Chèn Âm thanh (<audio>) và Video (<video>) chuẩn HTML5

Thẻ âm thanh <audio controls>

Thuộc tính controls bắt buộc để hiển thị thanh phát, dừng, thanh âm lượng:

<audio controls>
  <source src="audio/baihat.mp3" type="audio/mpeg">
  Trình duyệt không hỗ trợ audio.
</audio>
Thẻ video <video controls>

Hỗ trợ định dạng MP4, WebM; có thể thêm poster="thumbnail.jpg":

<video width="480" controls>
  <source src="video/intro.mp4" type="video/mp4">
  Trình duyệt không hỗ trợ video.
</video>

3. Nhúng khung nội tuyến với thẻ <iframe>

Thẻ <iframe> (Inline Frame) cho phép nhúng một trang web khác hoặc dịch vụ bên ngoài vào trang của mình:

<!-- Nhúng video từ YouTube: -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" frameborder="0" allowfullscreen></iframe>
Nhiệm vụ thực hành & Vận dụng:
  • Tải một hình ảnh phong cảnh về máy, đặt trong thư mục `images/` và chèn vào trang HTML có đầy đủ thuộc tính `src`, `alt`, `width`.
  • Tải tệp âm thanh MP3 ngắn và chèn vào trang web bằng thẻ <audio controls>.
  • Lên Google Maps, tìm kiếm vị trí trường học của em, chọn chức năng Chia sẻ → Nhúng bản đồ và sao chép mã <iframe> dán vào trang web.
Ghi nhớ trọng tâm: Thẻ <img> chèn hình ảnh với src (đường dẫn) và alt (mô tả thay thế bắt buộc). Thẻ <audio controls> và <video controls> hỗ trợ phát đa phương tiện trực tiếp trên trình duyệt mà không cần plugin bên ngoài. Thẻ <iframe> dùng để nhúng video YouTube hoặc bản đồ Google Maps.

Trắc nghiệm củng cố Bài 11 (4 câu)

Tự động chấm

Câu 1: Thuộc tính nào của thẻ <code><img></code> bắt buộc phải có để cung cấp văn bản mô tả thay thế khi ảnh bị lỗi mạng hoặc cho người dùng khiếm thị?

Câu 2: Nếu không có thuộc tính nào sau đây trong thẻ <code><audio></code> hoặc <code><video></code>, người dùng sẽ không nhìn thấy các nút Play, Pause hay thanh trượt âm lượng?

Câu 3: Thẻ HTML nào được sử dụng để nhúng một cửa sổ chứa video YouTube hoặc bản đồ Google Maps tương tác vào trang web của bạn?

Câu 4: Định dạng tệp video nào được hầu hết các trình duyệt hiện đại (Chrome, Edge, Safari, Firefox) hỗ trợ tốt nhất trên nền web?

Bài 12 45 phút
Làm trắc nghiệm bài này

Bài 12: Biểu mẫu (Form) trong HTML

Mục tiêu cần đạt:

Xây dựng biểu mẫu thu thập dữ liệu bằng thẻ <form>; Nắm vững các loại ô nhập liệu <input> thông dụng (text, password, email, radio, checkbox, submit); Sử dụng thẻ <textarea>, <select> và thẻ nhãn <label>.

💡 Khởi động: Làm thế nào để các trang thương mại điện tử thu thập thông tin đặt hàng, đăng ký tài khoản hay nhận form khảo sát từ hàng triệu người dùng trực tuyến?

1. Thẻ <form> và các thuộc tính điều khiển

Thẻ <form> tạo vùng chứa các phần tử điều khiển giao diện giúp người dùng nhập và gửi dữ liệu về máy chủ (Server).

Thuộc tính action

Chỉ định địa chỉ URL của trang xử lý dữ liệu ở máy chủ khi người dùng nhấn nút Gửi (Submit). Ví dụ: action="xuly_dangky.php".

Thuộc tính method (GET vs POST)

- GET: Dữ liệu gửi gắn kèm trên thanh địa chỉ URL (thích hợp cho form tìm kiếm, không bảo mật).
- POST: Dữ liệu gửi ẩn trong phần thân HTTP body (bảo mật, bắt buộc cho mật khẩu, form thanh toán).

2. Các thành phần nhập liệu cốt lõi trong biểu mẫu

Các kiểu của thẻ đơn <input>
type="text": Nhập văn bản một dòng ngắn.
type="password": Nhập mật khẩu (ký tự bị ẩn thành dấu chấm).
type="email": Nhập email (tự động kiểm tra cú pháp có @).
type="number": Nhập số (có nút tăng giảm).
type="radio": Chọn 1 trong nhiều phương án (cùng name).
type="checkbox": Chọn nhiều phương án cùng lúc.
type="submit": Nút gửi toàn bộ dữ liệu form đi.
type="reset": Nút xóa trắng làm lại form.
<textarea rows="4" cols="50">: Ô nhập văn bản nhiều dòng (dùng cho lời nhắn, nhận xét, ý kiến).
<select> <option>...</option> </select>: Hộp danh sách thả xuống chọn tỉnh thành, quốc gia.
<label for="id_input">: Nhãn văn bản liên kết với ô nhập liệu, bấm vào chữ sẽ tự động kích hoạt con trỏ vào ô nhập.
Nhiệm vụ thực hành & Vận dụng:
  • Xây dựng form đăng ký tài khoản thành viên mới gồm: Họ tên, Email, Mật khẩu, Giới tính (radio), Sở thích (checkbox).
  • Thêm hộp danh sách <select> để người dùng chọn Khóa học quan tâm và <textarea> để nhập ghi chú.
  • Gán thẻ <label for="..."> cho tất cả các ô nhập liệu và kiểm tra tính năng nhấp chuột vào nhãn chữ.
Ghi nhớ trọng tâm: Thẻ <form action="..." method="POST"> tạo biểu mẫu thu thập dữ liệu. Thẻ <input> cung cấp nhiều kiểu nhập liệu (text, password, email, radio, checkbox, submit). Thẻ <textarea> nhập nhiều dòng, <select> tạo danh sách chọn thả xuống, <label> tăng tính tiện dụng.

Trắc nghiệm củng cố Bài 12 (4 câu)

Tự động chấm

Câu 1: Phương thức truyền dữ liệu nào trong form HTML gửi dữ liệu ngầm trong phần thân HTTP Request, đảm bảo an toàn cho thông tin nhạy cảm như mật khẩu?

Câu 2: Để các nút chọn tròn Radio Button hoạt động đúng (chỉ cho phép người dùng chọn duy nhất 1 trong các phương án), các thẻ đó phải có chung thuộc tính nào?

Câu 3: Thẻ nào được sử dụng để tạo một ô nhập văn bản rộng nhiều dòng (thường dùng để viết nhận xét, phản hồi hoặc địa chỉ chi tiết)?

Câu 4: Thuộc tính nào của thẻ <code><input></code> quy định dòng chữ mờ gợi ý xuất hiện trong ô nhập liệu và biến mất khi người dùng bắt đầu gõ chữ?

Bài 13 45 phút
Làm trắc nghiệm bài này

Bài 13: Giới thiệu về CSS và các cách nhúng CSS

Mục tiêu cần đạt:

Hiểu được vai trò của CSS trong việc định dạng giao diện website; Nắm vững cú pháp quy tắc CSS (Selector, Property, Value); Phân biệt 3 cách nhúng CSS (Inline, Internal, External); Hiểu cơ chế xếp chồng và độ ưu tiên (Cascade & Specificity).

💡 Khởi động: Nếu HTML là bộ khung xương của một ngôi nhà, thì CSS chính là lớp sơn tường, gạch ốp, cửa sổ và đồ trang trí nội thất biến ngôi nhà thành một kiệt tác thẩm mỹ. CSS vận hành như thế nào?

1. Khái niệm và Cú pháp quy tắc CSS

CSS (Cascading Style Sheets): Là ngôn ngữ định kiểu theo tầng được sử dụng để mô tả cách các phần tử HTML sẽ hiển thị trên màn hình (màu sắc, phông chữ, khoảng cách, kích thước và bố cục).

h1 { /* h1 là Bộ chọn (Selector) */
  color: #2563eb; /* Thuộc tính: Giá trị */
  font-size: 28px;
  text-align: center;
}

2. Ba phương pháp nhúng CSS vào trang web

1. Inline CSS (Nội dòng)

Viết trực tiếp vào thuộc tính style của từng thẻ:

<h1 style="color: red;">

Ưu tiên cao nhất nhưng khó quản lý, không nên lạm dụng.

2. Internal CSS (Nội bộ)

Viết trong cặp thẻ <style> đặt tại phần <head>:

<style> p { color: blue; } </style>

Định dạng cho duy nhất 1 trang HTML hiện tại.

3. External CSS (Ngoại tuyến)

Viết trong tệp riêng style.css và liên kết qua:

<link rel="stylesheet" href="style.css">

Cách tối ưu nhất, tái sử dụng cho hàng trăm trang.

Nhiệm vụ thực hành & Vận dụng:
  • Tạo tệp `style.css` riêng và định dạng màu chữ xanh dương cho <h1>, căn giữa cho toàn bộ trang web.
  • Liên kết tệp `style.css` vào tệp `index.html` bằng thẻ <link rel="stylesheet" href="style.css"> trong phần <head>.
  • Thực hiện thử nghiệm độ ưu tiên: Đặt màu đỏ bằng Inline CSS cho một thẻ <p> và màu xanh bằng External CSS, quan sát màu sắc thực tế hiển thị trên trình duyệt.
Ghi nhớ trọng tâm: CSS dùng định kiểu giao diện web. Cú pháp gồm Selector { property: value; }. Có 3 cách nhúng: Inline (trong thuộc tính style), Internal (trong thẻ <style>), External (trong tệp .css riêng liên kết qua thẻ <link>). External CSS là phương pháp chuẩn và chuyên nghiệp nhất.

Trắc nghiệm củng cố Bài 13 (4 câu)

Tự động chấm

Câu 1: Phương pháp nào sau đây là cách tốt nhất, chuyên nghiệp nhất để nhúng CSS cho các dự án website có nhiều trang?

Câu 2: Thẻ HTML nào được đặt trong phần <code><head></code> để liên kết tài liệu HTML với tệp định dạng External CSS bên ngoài?

Câu 3: Trong cú pháp quy tắc CSS <code>p { color: red; }</code>, phần tử <code>p</code> được gọi là gì?

Câu 4: Nếu một phần tử vừa được định dạng màu xanh bằng External CSS, vừa có thuộc tính <code>style="color: red;"</code> (Inline CSS), màu nào sẽ được ưu tiên hiển thị?

Bài 14 45 phút
Làm trắc nghiệm bài này

Bài 14: Định dạng văn bản và màu sắc với CSS

Mục tiêu cần đạt:

Sử dụng thành thạo các thuộc tính màu sắc (`color`, `background-color`) theo các hệ màu HEX, RGB, RGBA; Thiết lập phông chữ (`font-family`, `font-size`, `font-weight`); Căn chỉnh văn bản (`text-align`, `line-height`, `text-decoration`).

💡 Khởi động: Màu sắc tạo nên cảm xúc, phông chữ tạo nên cá tính thương hiệu. Làm sao để chọn một bộ màu hiện đại và phông chữ tiếng Việt sắc nét cho trang web?

1. Các hệ màu trong CSS (Colors)

Các cách biểu diễn màu sắc
1. Tên màu tiếng Anh: red, blue, white, transparent.
2. Mã màu thập lục phân (HEX): Dấu # theo sau 6 ký tự hex (RGB). Ví dụ: #2563eb (xanh dương), #ffffff (trắng), #000000 (đen).
3. Hệ màu RGB: rgb(đỏ, lục, lam) giá trị từ 0 đến 255. Ví dụ: rgb(37, 99, 235).
4. Hệ màu RGBA: Bổ sung thêm kênh Alpha (độ trong suốt từ 0.0 đến 1.0). Ví dụ: rgba(0, 0, 0, 0.5) tạo màu đen mờ 50%.
Thuộc tính màu văn bản và nền
color: #1e293b; → Đổi màu chữ của văn bản.
background-color: #f8fafc; → Đổi màu nền của khối phần tử.

2. Thuộc tính Typography định dạng phông chữ và căn lề

Thuộc tính CSS Ý nghĩa & Giá trị thông dụng Ví dụ minh họa
font-family Họ phông chữ (kèm danh sách phông dự phòng Fallback fonts) font-family: 'Inter', Arial, sans-serif;
font-size Kích thước chữ (px, rem, em) font-size: 16px; font-size: 1.25rem;
font-weight Độ đậm của chữ (normal, bold, 100 đến 900) font-weight: 700; (tương đương bold)
text-align Căn chỉnh lề văn bản (left, right, center, justify) text-align: center; (căn giữa)
line-height Chiều cao dòng, khoảng cách giữa các dòng văn bản line-height: 1.6; (giúp đọc văn bản thoáng mắt)
Nhiệm vụ thực hành & Vận dụng:
  • Thiết lập phông chữ `Arial, Helvetica, sans-serif` cho toàn bộ thẻ <body> trong tệp `style.css`.
  • Định dạng màu chữ xanh navy `#1e3a8a` và căn giữa `text-align: center` cho thẻ <h1>.
  • Định dạng đoạn văn bản <p> với kích thước `16px`, màu xám đậm `#374151` và khoảng cách dòng `line-height: 1.6`.
Ghi nhớ trọng tâm: CSS hỗ trợ màu sắc qua tên, mã HEX (#RRGGBB), RGB và RGBA (có độ trong suốt). Định dạng phông chữ qua font-family, font-size, font-weight; căn chỉnh lề văn bản qua text-align và line-height.

Trắc nghiệm củng cố Bài 14 (4 câu)

Tự động chấm

Câu 1: Thuộc tính CSS nào được dùng để thay đổi màu sắc của chữ (văn bản)?

Câu 2: Trong hệ màu RGBA <code>rgba(255, 0, 0, 0.5)</code>, tham số cuối cùng <code>0.5</code> thể hiện điều gì?

Câu 3: Thuộc tính CSS nào dùng để tăng khoảng cách giữa các dòng văn bản trong một đoạn văn giúp người đọc dễ nhìn hơn?

Câu 4: Để căn giữa một tiêu đề <code><h2></code> theo chiều ngang của trang web, ta sử dụng quy tắc nào?

Bài 15 45 phút
Làm trắc nghiệm bài này

Bài 15: Mô hình hộp (CSS Box Model)

Mục tiêu cần đạt:

Làm chủ 4 thành phần của mô hình hộp CSS (Content, Padding, Border, Margin); Hiểu cách tính tổng chiều rộng/cao thực tế của phần tử; Sử dụng thuộc tính giải cứu hiện đại `box-sizing: border-box`.

💡 Khởi động: Tại sao khi đặt width: 300px cho một cái hộp, sau khi thêm viền và đệm, cái hộp lại bị phình to thành 350px làm vỡ cả giao diện trang web? Mô hình hộp CSS sẽ giải mã bí mật này.

1. Bốn thành phần cấu thành mô hình hộp CSS

Trong CSS, mọi phần tử HTML đều được trình duyệt coi như một chiếc hộp hình chữ nhật gồm 4 lớp bao bọc nhau từ trong ra ngoài:

1. Content (Nội dung)

Nơi chứa văn bản, hình ảnh thực tế của phần tử. Điều chỉnh bằng width và height.

2. Padding (Khoảng đệm)

Khoảng cách từ nội dung đến đường viền Border. Tạo độ thoáng bên trong hộp.

3. Border (Đường viền)

Đường viền bao bọc bên ngoài Padding. Cú pháp: border: 1px solid #ccc;.

4. Margin (Khoảng lề)

Khoảng trống ngoài cùng ngăn cách giữa phần tử này với các phần tử khác xung quanh.

2. Thuộc tính chuẩn hóa box-sizing: border-box

Sự khác biệt giữa content-box (mặc định) và border-box:
  • content-box: Tổng chiều rộng = width + padding + border (hộp bị phình to khi thêm padding).
  • border-box: Tổng chiều rộng luôn bằng đúng giá trị width đã đặt (Padding và Border được tính gọn vào bên trong).
/* Quy tắc vàng của lập trình viên web hiện đại: */
* { box-sizing: border-box; }
Nhiệm vụ thực hành & Vận dụng:
  • Tạo một thẻ <div> có `width: 300px`, `background-color: lightblue`, thêm `padding: 20px` và `border: 5px solid blue`.
  • Dùng công cụ Inspect (F12) của trình duyệt để kiểm tra sơ đồ Box Model trực quan và xem kích thước thực tế của thẻ <div>.
  • Thêm quy tắc `box-sizing: border-box;` và quan sát kích thước thẻ trở về đúng chuẩn 300px.
Ghi nhớ trọng tâm: Mọi phần tử HTML đều tuân theo CSS Box Model gồm 4 thành phần từ trong ra ngoài: Content (nội dung), Padding (đệm), Border (viền), Margin (lề). Luôn đặt box-sizing: border-box để việc tính toán kích thước giao diện chuẩn xác và không bị vỡ bố cục.

Trắc nghiệm củng cố Bài 15 (4 câu)

Tự động chấm

Câu 1: Thành phần nào trong mô hình hộp CSS là khoảng cách đệm nằm giữa nội dung (Content) và đường viền (Border)?

Câu 2: Thành phần nào là khoảng lề nằm bên ngoài đường viền Border, dùng để tạo khoảng cách giữa hộp này với các hộp lân cận?

Câu 3: Thuộc tính CSS nào giúp cố định kích thước phần tử (chiều rộng bao gồm cả Padding và Border), tránh hiện tượng hộp bị phình to khi thêm đệm?

Câu 4: Nếu một phần tử có <code>width: 200px</code>, <code>padding: 20px</code> (hai bên là 40px), <code>border: 5px</code> (hai bên là 10px) và dùng <code>box-sizing: content-box</code> mặc định, tổng chiều rộng thực tế của phần tử là bao nhiêu?

Bài 16 45 phút
Làm trắc nghiệm bài này

Bài 16: Định dạng bảng và biểu mẫu với CSS

Mục tiêu cần đạt:

Áp dụng thuộc tính `border-collapse: collapse` để làm mịn đường viền bảng; Tạo hiệu ứng màu nền xen kẽ (Zebra stripes) và hiệu ứng hover; Định dạng các ô nhập liệu Form hiện đại (`border-radius`, `focus`).

💡 Khởi động: Bảng dữ liệu và Form HTML mặc định của trình duyệt trông rất thô sơ và cổ điển. Bằng vài dòng CSS, chúng ta có thể biến chúng thành giao diện bảng biểu và biểu mẫu đăng nhập lung linh như thế nào?

1. Tùy biến bảng dữ liệu hiện đại với CSS

Các thuộc tính định dạng Table
border-collapse: collapse; → Gộp các đường viền đôi bị hở thành một đường viền đơn thanh lịch.
th, td { padding: 12px; } → Tạo khoảng cách rộng rãi cho các ô dữ liệu.
tr:nth-child(even) → Tạo màu nền xen kẽ (Zebra stripes) giúp dễ đọc bảng dài.
tr:hover { background-color: #f1f5f9; } → Làm nổi bật hàng khi di chuột qua.
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background-color: #2563eb;
  color: white;
  padding: 10px;
}

2. Định dạng biểu mẫu (Form) chuyên nghiệp

Định dạng ô nhập liệu và nút bấm đẹp mắt:
  • Bo tròn góc mềm mại: border-radius: 8px;
  • Hiệu ứng khi người dùng nhấp chuột vào ô nhập (Focus state): input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 5px rgba(37,99,235,0.5); }
  • Nút gửi Submit có hiệu ứng chuyển màu và đổi con trỏ chuột cursor: pointer.
Nhiệm vụ thực hành & Vận dụng:
  • Áp dụng `border-collapse: collapse;` và gán màu nền xen kẽ `tr:nth-child(even)` cho bảng thời khóa biểu đã tạo ở Bài 9.
  • Thiết kế một form đăng nhập gồm 2 ô nhập (Email, Mật khẩu) với đường viền bo tròn `border-radius: 8px` và hiệu ứng `input:focus` đổi viền xanh.
  • Thêm nút bấm 'Đăng nhập ngay' với màu nền gradient và hiệu ứng di chuột `button:hover` đổi màu nhẹ.
Ghi nhớ trọng tâm: Dùng border-collapse: collapse để gộp viền bảng thành đường nét thanh mảnh. Sử dụng :nth-child(even) tô màu xen kẽ và :hover làm nổi bật hàng. Định dạng Form với padding, border-radius và trạng thái :focus đem lại trải nghiệm mượt mà cho người dùng.

Trắc nghiệm củng cố Bài 16 (4 câu)

Tự động chấm

Câu 1: Thuộc tính CSS nào giúp loại bỏ khoảng cách thừa giữa các đường viền ô trong bảng, gộp chúng lại thành đường viền đơn gọn gàng?

Câu 2: Bộ chọn giả (pseudo-class) nào trong CSS được dùng để áp dụng màu nền xen kẽ cho các hàng chẵn trong bảng dữ liệu?

Câu 3: Trạng thái giả lập nào được kích hoạt khi người dùng nhấp chuột hoặc bấm phím Tab đưa con trỏ vào bên trong một ô nhập <code><input></code>?

Câu 4: Để đổi con trỏ chuột thành hình 'bàn tay chỉ ngón' khi người dùng rê chuột qua nút bấm trong form, ta sử dụng thuộc tính nào?

Bài 17 45 phút
Làm trắc nghiệm bài này

Bài 17: Định vị phần tử trong CSS (Positioning)

Mục tiêu cần đạt:

Hiểu và phân biệt được 5 giá trị của thuộc tính `position`: `static`, `relative`, `absolute`, `fixed`, `sticky`; Sử dụng các thuộc tính tọa độ `top`, `bottom`, `left`, `right`; Quản lý thứ tự lớp hiển thị đè nhau với `z-index`.

💡 Khởi động: Làm thế nào để thanh menu luôn dính chặt ở mép trên màn hình khi cuộn trang, hoặc một nút 'Chat hỗ trợ' luôn ghim cố định ở góc dưới cùng bên phải màn hình?

1. Năm giá trị của thuộc tính position

1. position: static (Mặc định)

Phần tử hiển thị theo luồng bình thường của trang. Các thuộc tính top, right, bottom, left và z-index không có tác dụng.

2. position: relative (Tương đối)

Dịch chuyển phần tử so với vị trí ban đầu của chính nó bằng top/bottom/left/right. Vị trí ban đầu của nó vẫn được giữ chỗ trống trên trang.

3. position: absolute (Tuyệt đối)

Bị rút khỏi luồng bình thường, định vị chính xác theo phần tử cha gần nhất có position: relative (hoặc thẻ body nếu không có cha nào).

4. position: fixed (Cố định trên màn hình)

Cố định so với khung nhìn trình duyệt (Viewport), không bị dịch chuyển khi người dùng cuộn trang. Tiêu biểu: Nút Chat Zalo/Messenger ở góc dưới màn hình.

5. position: sticky (Dính khi cuộn)

Hoạt động như static khi chưa cuộn tới, nhưng sẽ dính chặt ở mép trên màn hình khi người dùng cuộn vượt qua vị trí quy định (như thanh Navigation header).

2. Thứ tự lớp hiển thị chồng đè (z-index)

Thuộc tính z-index: Xác định thứ tự hiển thị của các phần tử đè lên nhau theo trục Z (chiều sâu).
- Phần tử có giá trị z-index lớn hơn sẽ nổi lên trên phần tử có giá trị nhỏ hơn.
- Lưu ý: z-index chỉ có tác dụng trên các phần tử có position khác static.
Nhiệm vụ thực hành & Vận dụng:
  • Tạo một thanh menu header với `position: sticky; top: 0; z-index: 100;` để khi cuộn bài viết dài, menu vẫn bám dính ở đầu trang.
  • Tạo một nút 'Hotline / Zalo' cố định ở góc dưới bên phải màn hình bằng `position: fixed; bottom: 20px; right: 20px;`.
  • Thực hành cặp đôi kinh điển: Phần tử cha có `position: relative`, phần tử con là nhãn 'MỚI' (badge) đặt ở góc trên với `position: absolute; top: -5px; right: -5px;`.
Ghi nhớ trọng tâm: position kiểm soát vị trí phần tử: static (mặc định), relative (dời so với chính nó), absolute (định vị theo cha relative), fixed (cố định trên màn hình khi cuộn), sticky (dính khi cuộn tới). z-index điều khiển lớp hiển thị đè nhau theo chiều sâu.

Trắc nghiệm củng cố Bài 17 (4 câu)

Tự động chấm

Câu 1: Giá trị nào của thuộc tính <code>position</code> làm cho phần tử luôn đứng yên ở một tọa độ cố định trên màn hình trình duyệt ngay cả khi người dùng cuộn trang lên xuống?

Câu 2: Để một phần tử con có <code>position: absolute</code> định vị chính xác theo khung của phần tử cha, phần tử cha bắt buộc phải có thuộc tính gì?

Câu 3: Thuộc tính nào điều khiển thứ tự xếp chồng theo chiều sâu (phần tử nào nổi lên trên, phần tử nào chìm xuống dưới) giữa các phần tử?

Câu 4: Thanh điều hướng Navigation của website hoạt động bình thường, nhưng khi cuộn trang tới vị trí của nó thì tự động 'dính' vào mép trên màn hình nhờ giá trị position nào?

Bài 18 45 phút
Làm trắc nghiệm bài này

Bài 18: Bố cục trang web với các thẻ ngữ nghĩa HTML5

Mục tiêu cần đạt:

Hiểu được tầm quan trọng của các thẻ ngữ nghĩa (Semantic Tags) trong HTML5 so với các thẻ <div> vô nghĩa; Nắm vững vị trí và vai trò của: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> trong việc dàn trang hiện đại.

💡 Khởi động: Trước HTML5, các nhà phát triển web phải tạo hàng chục thẻ <div id='header'>, <div id='nav'>, <div id='footer'>. Tại sao HTML5 lại ra đời các thẻ ngữ nghĩa chuyên biệt và chúng giúp ích gì cho SEO?

1. Tại sao cần sử dụng thẻ ngữ nghĩa Semantic HTML5?

Thời kỳ cũ: Lạm dụng thẻ <div>

Trang web bị bao bọc bởi hàng trăm thẻ <div> lồng nhau không mang ý nghĩa về mặt nội dung, khiến các công cụ tìm kiếm (Google) và bộ đọc màn hình cho người khiếm thị rất khó xác định đâu là nội dung quan trọng nhất.

Thời kỳ mới: Semantic Tags chuẩn HTML5

Mỗi thẻ có tên gọi phản ánh chính xác mục đích nội dung mà nó chứa đựng. Giúp mã nguồn sạch sẽ, dễ bảo trì, tăng điểm tối ưu hóa công cụ tìm kiếm (SEO) và hỗ trợ khả năng tiếp cận tiếp thị số toàn cầu.

2. Cấu trúc bố cục chuẩn của một trang web HTML5

<header> Khu vực đầu trang: Chứa logo thương hiệu, tiêu đề chính của website hoặc phần giới thiệu.
<nav> Khu vực điều hướng: Chứa thanh thực đơn (Navigation Bar) với các liên kết chính của website.
<main> Nội dung chính: Chứa phần nội dung độc nhất, cốt lõi của trang web (mỗi trang chỉ có duy nhất 1 thẻ main).
<section> Nhóm chuyên mục: Chia nội dung bài viết thành các phân đoạn theo từng chủ đề hoặc đề mục lớn.
<article> Bài viết độc lập: Chứa nội dung hoàn chỉnh có thể phân phối hoặc tái xuất bản riêng (bài báo, bình luận).
<aside> Nội dung phụ / Cột bên: Chứa thanh Sidebar, bài viết liên quan, quảng cáo hoặc tiểu sử tác giả.
<footer> Chân trang: Chứa thông tin bản quyền Copyright, liên kết chính sách bảo mật, mạng xã hội và liên hệ.
Nhiệm vụ thực hành & Vận dụng:
  • Vẽ sơ đồ khung layout trang báo điện tử trên giấy gồm: Header, Nav, Main (Article, Section), Aside và Footer.
  • Hiện thực hóa sơ đồ trên bằng mã nguồn HTML5 sử dụng đúng các thẻ ngữ nghĩa chuẩn.
  • Áp dụng CSS màu nền và khoảng đệm Padding để làm nổi bật các khu vực trên trang web.
Ghi nhớ trọng tâm: Thẻ ngữ nghĩa Semantic HTML5 (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) giúp cấu trúc trang web rõ ràng, chuẩn hóa, hỗ trợ tối ưu SEO cho công cụ tìm kiếm và nâng cao khả năng tiếp cận người dùng khuyết tật.

Trắc nghiệm củng cố Bài 18 (4 câu)

Tự động chấm

Câu 1: Thẻ ngữ nghĩa HTML5 nào đại diện cho phần nội dung chính, cốt lõi và độc nhất của một trang web (mỗi trang HTML chỉ nên chứa duy nhất 1 thẻ này)?

Câu 2: Thẻ HTML5 nào được sử dụng chuyên biệt để chứa thanh thực đơn điều hướng (Menu navigation) của website?

Câu 3: Khu vực chứa thanh bên lề (Sidebar), danh sách bài viết liên quan hoặc quảng cáo nên được bao bọc trong thẻ ngữ nghĩa nào?

Câu 4: Lợi ích quan trọng nhất của việc sử dụng các thẻ ngữ nghĩa HTML5 thay vì lạm dụng toàn bộ bằng thẻ <code><div></code> là gì?

Chuyên đề học tập ICT

Chuyên đề học tập: Tin học ứng dụng nâng cao

Nâng tầm kỹ năng phát triển web với bố cục hiện đại Flexbox & Grid, thiết kế tương thích đa thiết bị (Responsive Web) và xuất bản trang web miễn phí với GitHub Pages.

CHUYÊN ĐỀ 12.1

Bố cục Web Flexbox & CSS Grid

Dàn hàng ngang (Flexbox) và chia cột đa chiều (CSS Grid) chuyên nghiệp theo chuẩn thiết kế giao diện hiện đại.

CHUYÊN ĐỀ 12.2

Responsive Web Design

Sử dụng @media query và các đơn vị co giãn (rem, %, vh, vw) để giao diện tương thích hoàn hảo trên mọi kích thước màn hình.

CHUYÊN ĐỀ 12.3

Xuất bản & Quản trị Website

Đưa dự án lên dịch vụ lưu trữ đám mây GitHub Pages để có đường link trực tuyến công khai và miễn phí.

Chủ đề trọng tâm 5

Chủ đề 5: Hướng nghiệp với Tin học

Khám phá các nhóm ngành nghề công nghệ cao: Dịch vụ bảo trì phần cứng, Quản trị hệ thống mạng và cơ sở dữ liệu; Định hướng nghề nghiệp tương lai thời đại số.

Bài 19 45 phút
Làm trắc nghiệm bài này

Bài 19: Nghề phát triển phần mềm và ứng dụng

Mục tiêu cần đạt:

Mô tả được các đặc điểm cơ bản của nghề lập trình và phát triển phần mềm; Phân biệt các vị trí chuyên môn: Frontend, Backend, Fullstack, Mobile App Developer; Nhận biết các phẩm chất và kỹ năng cần có của người làm phần mềm.

💡 Khởi động: Từ các ứng dụng đặt xe Grab, giao đồ ăn ShopeeFood đến phần mềm điều hành ngân hàng, tất cả đều do bàn tay và khối óc của các kỹ sư phát triển phần mềm tạo nên. Nghề lập trình có những thử thách và cơ hội gì?

1. Tổng quan về nghề phát triển phần mềm

Kỹ sư phát triển phần mềm (Software Developer / Software Engineer): Là người nghiên cứu, thiết kế, viết mã lệnh (code), kiểm thử và bảo trì các chương trình ứng dụng hoặc hệ điều hành nhằm giải quyết các bài toán thực tiễn của cuộc sống và tự động hóa sản xuất.

Frontend Developer (Phát triển giao diện)

Chuyên xây dựng toàn bộ phần giao diện trực quan, hiệu ứng chuyển động và trải nghiệm người dùng (UI/UX) mà khách hàng nhìn thấy và tương tác trực tiếp. Công nghệ then chốt: HTML5, CSS3, JavaScript, React, Vue.js, Tailwind CSS.

Backend Developer (Phát triển máy chủ)

Chịu trách nhiệm xử lý logic nghiệp vụ ngầm, tính toán bảo mật, xác thực người dùng và giao tiếp với cơ sở dữ liệu (Database). Công nghệ tiêu biểu: Python, Java, Node.js, PHP, C#, SQL, MongoDB.

Fullstack Developer (Toàn diện)

Lập trình viên có khả năng đảm nhận cả phần giao diện Frontend lẫn hệ thống máy chủ Backend và cơ sở dữ liệu.

Mobile App Developer (Ứng dụng di động)

Chuyên phát triển ứng dụng chạy mượt mà trên hệ điều hành Android và iOS. Công nghệ: Flutter, React Native, Swift, Kotlin.

2. Kỹ năng và phẩm chất cần thiết của lập trình viên

  • Tư duy logic và giải quyết vấn đề: Khả năng chia nhỏ bài toán phức tạp thành các bước thuật toán cụ thể.
  • Năng lực tự học liên tục: Ngành công nghệ thông tin đổi mới từng tháng, lập trình viên phải luôn đọc tài liệu tiếng Anh để làm chủ công nghệ mới.
  • Làm việc nhóm (Teamwork) và kiểm soát phiên bản: Phối hợp cùng các thành viên qua công cụ quản lý mã nguồn Git / GitHub.
  • Tính kiên nhẫn và cẩn trọng: Sẵn sàng dò tìm (debug) từng dòng mã để tìm ra lỗi logic ẩn giấu.
Nhiệm vụ thực hành & Vận dụng:
  • Tìm hiểu thông tin tuyển dụng vị trí lập trình viên Frontend trên các website việc làm (VietnamWorks, TopCV) và ghi chép lại các kỹ năng công nghệ yêu cầu.
  • Thực hiện bài kiểm tra trắc nghiệm tính cách nghề nghiệp Holland trên Internet để đánh giá mức độ phù hợp của bản thân với nhóm ngành Kỹ thuật - Công nghệ.
  • Thảo luận nhóm: Phân tích vì sao kỹ năng ngoại ngữ (tiếng Anh) lại là yếu tố sống còn đối với một kỹ sư phần mềm trong thời đại số.
Ghi nhớ trọng tâm: Nghề phát triển phần mềm gồm các nhánh chuyên môn: Frontend (giao diện), Backend (máy chủ & CSDL), Fullstack (toàn diện), Mobile App. Đòi hỏi tư duy thuật toán logic, năng lực tự học công nghệ mới, tiếng Anh chuyên ngành và kỹ năng làm việc nhóm.

Trắc nghiệm củng cố Bài 19 (4 câu)

Tự động chấm

Câu 1: Lập trình viên chuyên phụ trách thiết kế giao diện trực quan, hiệu ứng tương tác người dùng (UI/UX) trên trình duyệt được gọi là gì?

Câu 2: Vị trí lập trình viên nào có khả năng đảm nhận thành thạo cả phát triển giao diện phía máy khách (Frontend) và xử lý máy chủ (Backend)?

Câu 3: Công cụ nào được xem là tiêu chuẩn công nghiệp toàn cầu giúp các nhóm lập trình viên quản lý phiên bản mã nguồn và cộng tác dự án?

Câu 4: Phẩm chất nào sau đây là quan trọng nhất đối với một kỹ sư phần mềm khi đối mặt với công nghệ thông tin liên tục đổi mới từng ngày?

Bài 20 45 phút
Làm trắc nghiệm bài này

Bài 20: Nghề quản trị hệ thống và mạng máy tính

Mục tiêu cần đạt:

Mô tả được chức năng và nhiệm vụ của chuyên viên quản trị mạng (Network Administrator) và quản trị hệ thống (System Administrator); Nhận biết tầm quan trọng của việc bảo đảm an ninh mạng và an toàn dữ liệu doanh nghiệp; Tìm hiểu các chứng chỉ nghề quốc tế.

💡 Khởi động: Khi một ngân hàng hay bệnh viện bị sập mạng 1 giờ, thiệt hại có thể lên tới hàng triệu đô la. Ai là người 'gác cổng' đứng sau bảo đảm hệ thống máy chủ luôn hoạt động an toàn 24/7/365?

1. Vai trò và Nhiệm vụ của chuyên viên quản trị hệ thống và mạng

Quản trị mạng (Network Administrator)
  • Thiết kế, lắp đặt và cấu hình hệ thống Router, Switch, tường lửa Firewall, Access Point Wi-Fi.
  • Phân chia dải mạng con (VLAN, Subnetting), cấp phát địa chỉ IP qua máy chủ DHCP.
  • Giám sát lưu lượng băng thông, phát hiện các điểm nghẽn và ngăn chặn các cuộc tấn công từ chối dịch vụ (DDoS).
Quản trị hệ thống (System Administrator - SysAdmin)
  • Cài đặt, quản lý hệ điều hành máy chủ Server (Linux Ubuntu/CentOS, Windows Server).
  • Quản lý tài khoản người dùng, phân quyền truy cập thư mục và tài nguyên qua Active Directory.
  • Lập kế hoạch sao lưu dữ liệu tự động định kỳ (Backup) và phục hồi sau sự cố thảm họa (Disaster Recovery).

2. Xu hướng điện toán đám mây và Các chứng chỉ nghề quốc tế

Ngày nay, hạ tầng mạng truyền thống đang chuyển dịch mạnh mẽ sang Điện toán đám mây (Cloud Computing) với các nền tảng AWS, Google Cloud, Microsoft Azure. Kỹ sư mạng cần làm chủ các chứng chỉ chuyên nghiệp có giá trị toàn cầu:

Cisco CCNA / CCNP
CompTIA Network+ / Security+
AWS Certified Solutions Architect
Nhiệm vụ thực hành & Vận dụng:
  • Vẽ sơ đồ mạng văn phòng đơn giản gồm 1 Router kết nối Internet, 1 Switch, 1 Máy in mạng và 10 máy tính làm việc.
  • Tìm hiểu thông tin về kỳ thi lấy chứng chỉ quốc tế Cisco CCNA và các nội dung kiến thức trọng tâm của bài thi.
  • Thảo luận tình huống: Doanh nghiệp bị mã độc tống tiền (Ransomware) mã hóa toàn bộ dữ liệu máy chủ, chuyên viên quản trị hệ thống cần sử dụng bản sao lưu dự phòng (Backup) như thế nào?
Ghi nhớ trọng tâm: Quản trị mạng và hệ thống chịu trách nhiệm thiết kế hạ tầng, cấu hình máy chủ, bảo đảm kết nối thông suốt và an ninh dữ liệu 24/7. Yêu cầu kiến thức sâu về giao thức TCP/IP, hệ điều hành Linux/Windows Server và các chứng chỉ nghề uy tín như CCNA, Security+.

Trắc nghiệm củng cố Bài 20 (4 câu)

Tự động chấm

Câu 1: Công việc nào sau đây là nhiệm vụ cốt lõi hàng đầu của một chuyên viên Quản trị hệ thống (System Administrator)?

Câu 2: Chứng chỉ quốc tế nào do tập đoàn mạng Cisco cấp được xem là tiêu chuẩn phổ biến nhất đánh giá năng lực cấu hình thiết bị mạng cho kỹ sư?

Câu 3: Quy trình nào giúp doanh nghiệp có thể khôi phục lại toàn bộ dữ liệu máy chủ về trạng thái an toàn sau khi bị virus hoặc thảm họa thiên tai?

Câu 4: Nền tảng nào sau đây là dịch vụ Điện toán đám mây (Cloud Computing) hàng đầu thế giới mà các chuyên viên hệ thống hiện đại phải làm chủ?

Bài 21 45 phút
Làm trắc nghiệm bài này

Bài 21: Nghề bảo trì và hỗ trợ kỹ thuật máy tính

Mục tiêu cần đạt:

Mô tả công việc của nhân viên hỗ trợ kỹ thuật IT (IT Support / Helpdesk); Nắm vững quy trình chẩn đoán, phát hiện và khắc phục các sự cố phần cứng, phần mềm thông dụng; Hiểu và thực hiện đạo đức nghề nghiệp về bảo mật thông tin khách hàng.

💡 Khởi động: Máy tính không lên hình, máy in bị kẹt giấy, màn hình xanh chết chóc (BSOD) hay bị nhiễm virus. Ai là 'bác sĩ máy tính' đầu tiên mà mọi nhân viên văn phòng gọi tên?

1. Công việc của nhân viên IT Support / Helpdesk

Nhân viên hỗ trợ kỹ thuật (IT Helpdesk / IT Support): Là điểm tiếp nhận đầu tiên của doanh nghiệp, có nhiệm vụ giải quyết trực tiếp các khó khăn kỹ thuật cho người dùng nội bộ hoặc khách hàng.

Hỗ trợ phần cứng (Hardware Support)
  • Lắp ráp, nâng cấp linh kiện máy tính: RAM, ổ cứng SSD, card đồ họa, bộ nguồn.
  • Vệ sinh máy tính định kỳ, tra keo tản nhiệt CPU để giảm nhiệt độ máy.
  • Bảo dưỡng, thay mực và sửa chữa kẹt giấy cho máy in, máy scan, máy chiếu.
Hỗ trợ phần mềm (Software Support)
  • Cài đặt hệ điều hành (Windows, macOS) và các phần mềm văn phòng chuyên dụng.
  • Cài đặt, cập nhật phần mềm diệt virus và quét sạch mã độc, phần mềm gián điệp.
  • Hỗ trợ từ xa qua các công cụ UltraViewer, AnyDesk, TeamViewer.

2. Đạo đức nghề nghiệp của kỹ thuật viên máy tính

Quy tắc vàng về bảo mật dữ liệu khách hàng

1. Tuyệt đối bảo mật dữ liệu: Trong quá trình sửa chữa, không được phép xem trộm, sao chép hoặc phát tán hình ảnh, tệp tin riêng tư của khách hàng.

2. Trung thực và minh bạch: Chẩn đoán đúng lỗi, báo đúng giá linh kiện, không tráo đổi linh kiện zin của máy khách hàng.

3. Tác phong tôn trọng, kiên nhẫn: Giải thích lỗi bằng ngôn từ dễ hiểu, không tỏ thái độ khó chịu với người dùng không am hiểu công nghệ.

Nhiệm vụ thực hành & Vận dụng:
  • Tìm hiểu ý nghĩa các tiếng bíp (Beep code) của BIOS khi máy tính khởi động bị lỗi RAM (tiếng bíp dài ngắt quãng) hoặc lỗi Card màn hình.
  • Thực hành tạo một USB cứu hộ Boot máy tính chứa các công cụ kiểm tra ổ cứng (CrystalDiskInfo) và phần mềm sao lưu Ghost/Acronis.
  • Đóng vai xử lý tình huống: Một nhân viên phòng kế toán báo máy tính bị màn hình xanh chữ trắng (BSOD), em sẽ thực hiện các bước kiểm tra nào?
Ghi nhớ trọng tâm: Nghề IT Support đòi hỏi kỹ năng chẩn đoán phần cứng, cài đặt phần mềm và hỗ trợ người dùng kiên nhẫn. Đạo đức nghề nghiệp cốt lõi là bảo mật tuyệt đối dữ liệu khách hàng và tác phong làm việc trung thực, tận tâm.

Trắc nghiệm củng cố Bài 21 (4 câu)

Tự động chấm

Câu 1: Công việc nào sau đây thuộc phạm vi trách nhiệm trực tiếp của một nhân viên hỗ trợ kỹ thuật máy tính (IT Support / Helpdesk)?

Câu 2: Khi một máy tính bật nguồn quạt vẫn quay nhưng màn hình không lên và phát ra các tiếng kêu 'Bíp' liên tục, nguyên nhân phần cứng phổ biến nhất là gì?

Câu 3: Phần mềm nào sau đây cho phép nhân viên IT Support điều khiển màn hình máy tính từ xa qua Internet để hỗ trợ sửa lỗi trực tiếp cho người dùng?

Câu 4: Đạo đức nghề nghiệp tối thượng mà một kỹ thuật viên sửa chữa máy tính bắt buộc phải tuân thủ nghiêm ngặt là gì?

Chủ đề trọng tâm 6

Chủ đề 6: Thiết bị số và Smart Home

Khám phá công nghệ kết nối vạn vật (IoT), cấu hình thiết bị thông minh trong gia đình và thực hành kết nối an toàn các thiết bị số cá nhân.

Bài 22 45 phút
Làm trắc nghiệm bài này

Bài 22: Thiết bị số thông minh và Internet vạn vật (IoT)

Mục tiêu cần đạt:

Hiểu được khái niệm Internet vạn vật (IoT); Phân tích kiến trúc của một hệ sinh thái nhà thông minh (Smart Home); Nhận diện các cảm biến và thiết bị chấp hành; Nhận thức các nguy cơ mất an toàn bảo mật trên thiết bị IoT.

💡 Khởi động: Vừa về tới cửa nhà, đèn tự động bật sáng, điều hòa chỉnh về nhiệt độ dễ chịu và rèm cửa tự kéo ra. Công nghệ nào đang biến những ngôi nhà bình thường thành ngôi nhà thông minh?

1. Khái niệm Internet vạn vật (IoT - Internet of Things)

Internet vạn vật (IoT): Là mạng lưới khổng lồ kết nối hàng tỷ vật thể vật lý ("Things") trong thế giới thực được tích hợp cảm biến, phần mềm xử lý và kết nối mạng (Wi-Fi, Bluetooth, Zigbee) để tự động thu thập và trao đổi dữ liệu với nhau qua Internet mà không cần sự can thiệp trực tiếp của con người.

1. Cảm biến (Sensors - Thu nhận)

Đóng vai trò như các giác quan: Cảm biến nhiệt độ, độ ẩm không khí, cảm biến chuyển động hồng ngoại PIR, cảm biến khói cháy, cảm biến rò rỉ khí gas.

2. Thiết bị chấp hành (Actuators - Thực thi)

Đóng vai trò như tay chân: Đèn thông minh đổi màu, công tắc rơ-le bật tắt bình nóng lạnh, động cơ kéo rèm tự động, khóa cửa điện tử vân tay, van nước tưới cây tự động.

2. Hệ sinh thái Nhà thông minh (Smart Home) và Nguy cơ bảo mật

Bộ điều khiển trung tâm (Hub / Gateway): "Bộ não" của ngôi nhà kết nối các thiết bị dùng sóng Zigbee/Z-Wave với mạng Wi-Fi gia đình và đồng bộ lên đám mây, cho phép gia chủ điều khiển toàn bộ ngôi nhà qua ứng dụng di động hoặc giọng nói.
Cảnh báo an toàn thông tin thiết bị IoT

- Thiết bị IoT giá rẻ thường có bảo mật kém, dễ bị tin tặc tấn công biến thành mạng máy tính ma (Botnet) để thực hiện tấn công mạng DDoS.

- Biện pháp phòng ngừa: Luôn đổi mật khẩu mặc định (admin/admin), cập nhật bản vá Firmware mới nhất và đặt các thiết bị IoT trên một mạng Wi-Fi khách riêng biệt (Guest Wi-Fi).

Nhiệm vụ thực hành & Vận dụng:
  • Khảo sát các thiết bị số thông minh đang có trong gia đình em (Smart TV, Robot hút bụi, Camera Wi-Fi, Đồng hồ thông minh) và vẽ sơ đồ kết nối của chúng tới Router.
  • Tìm hiểu cách thiết lập kịch bản thông minh (Scene): 'Nếu phát hiện chuyển động sau 18h thì tự động bật đèn hành lang'.
  • Thảo luận nguy cơ bảo mật khi người dùng lắp đặt Camera an ninh trong nhà nhưng không đổi mật khẩu mặc định của nhà sản xuất.
Ghi nhớ trọng tâm: IoT là mạng lưới kết nối vạn vật qua cảm biến và Internet. Kiến trúc Smart Home gồm cảm biến (thu nhận thông tin), bộ điều khiển trung tâm Hub (xử lý logic) và thiết bị chấp hành (thực thi hành động). Cần luôn đổi mật khẩu mặc định để bảo vệ an toàn cho ngôi nhà thông minh.

Trắc nghiệm củng cố Bài 22 (4 câu)

Tự động chấm

Câu 1: Thuật ngữ Internet vạn vật (IoT - Internet of Things) đề cập đến điều gì?

Câu 2: Thành phần nào trong hệ thống nhà thông minh đóng vai trò 'giác quan' ghi nhận thông tin nhiệt độ, độ ẩm hoặc chuyển động của môi trường?

Câu 3: Hành động nào sau đây là thói quen nguy hiểm nhất làm tăng nguy cơ Camera an ninh gia đình bị tin tặc chiếm quyền kiểm soát?

Câu 4: Giao thức truyền thông không dây tầm ngắn, tiêu thụ cực ít năng lượng pin rất phổ biến trong các cảm biến Smart Home là gì?

Chủ đề trọng tâm 7

Chủ đề 7: Thực hành xây dựng và xuất bản website

Dự án tổng hợp: Lập kế hoạch, thiết kế giao diện Header, Menu, Thân, Chân trang, tích hợp Google Forms và hoàn thiện xuất bản trang web thực tế.

Bài 23 45 phút
Làm trắc nghiệm bài này

Bài 23: Dự án thiết kế website: Lập kế hoạch và phác thảo wireframe

Mục tiêu cần đạt:

Lựa chọn đề tài dự án website thực tế; Xác định mục tiêu và đối tượng độc giả mục tiêu; Xây dựng sơ đồ cấu trúc trang web (Sitemap); Phác thảo bản vẽ cấu trúc giao diện thô (Wireframe) trước khi viết mã.

💡 Khởi động: Trước khi xây dựng một tòa nhà, kiến trúc sư phải vẽ bản vẽ thiết kế chi tiết. Tương tự, một dự án website thành công bắt đầu từ khâu lập kế hoạch và phác thảo Wireframe như thế nào?

1. Xác định mục tiêu, đề tài và Sơ đồ trang web (Sitemap)

1. Lựa chọn đề tài dự án

- Trang web giới thiệu Trường THPT hoặc Câu lạc bộ Tin học của lớp.

- Trang web quảng bá du lịch, ẩm thực quê hương.

- Trang thông tin chia sẻ tài liệu học tập khối 12.

2. Sơ đồ trang web (Sitemap)

Mô hình cây phân cấp các trang trong website:

Trang chủ (index.html) → Giới thiệu (about.html), Hoạt động (activities.html), Liên hệ (contact.html).

2. Phác thảo giao diện Wireframe

Wireframe: Là bản vẽ đen trắng phác họa bố cục khung xương thô của trang web:

+-------------------------------------------------------------+

| [LOGO] MENU ĐIỀU HƯỚNG [NÚT] |

+-------------------------------------------------------------+

| BANNER CHÍNH HERO BANNER |

+-------------------------------------------------------------+

| [Cột Trái: Giới thiệu] | [Cột Phải: Tin tức nổi bật] |

+-------------------------------------------------------------+

| FOOTER: THÔNG TIN BẢN QUYỀN, ĐỊA CHỈ & LIÊN HỆ |

+-------------------------------------------------------------+

Nhiệm vụ thực hành & Vận dụng:
  • Thành lập nhóm dự án (3-4 học sinh) và thống nhất lựa chọn đề tài website cho nhóm.
  • Vẽ sơ đồ cây Sitemap gồm trang chủ và ít nhất 3 trang phụ trên phần mềm hoặc giấy vẽ A4.
  • Phác thảo Wireframe chi tiết cho trang chủ phân định rõ ràng các khối Header, Banner, Nội dung 2 cột và Footer.
Ghi nhớ trọng tâm: Thiết kế website bắt đầu bằng việc xác định mục tiêu và đối tượng người dùng, xây dựng sơ đồ phân cấp trang (Sitemap) và phác thảo khung xương giao diện (Wireframe) để định hình cấu trúc trước khi bắt tay viết mã HTML/CSS.

Trắc nghiệm củng cố Bài 23 (4 câu)

Tự động chấm

Câu 1: Bản phác thảo khung xương thô thể hiện cấu trúc bố cục sắp xếp các khối thành phần của trang web (Header, Banner, Cột nội dung, Footer) được gọi là gì?

Câu 2: Tệp tin HTML trang chủ đóng vai trò là cửa ngõ chính của một website luôn được đặt tên theo quy chuẩn mặc định của máy chủ là gì?

Câu 3: Sơ đồ nào thể hiện mối quan hệ liên kết và thứ bậc phân cấp giữa các trang trong một dự án website?

Câu 4: Bước đầu tiên quan trọng nhất cần thực hiện trước khi bắt tay vào gõ mã lệnh xây dựng một trang web là gì?

Bài 24 45 phút
Làm trắc nghiệm bài này

Bài 24: Xây dựng cấu trúc HTML cho trang chủ website

Mục tiêu cần đạt:

Tạo cấu trúc thư mục dự án chuẩn; Viết mã nguồn HTML5 hoàn chỉnh cho trang chủ `index.html`; Kết hợp chuẩn xác các thẻ ngữ nghĩa <header>, <nav>, <main>, <section>, <article>, <footer>; Đặt tên lớp `class` và `id` khoa học.

💡 Khởi động: Bản vẽ Wireframe đã sẵn sàng trên giấy. Giờ là lúc chúng ta chuyển hóa từng nét vẽ thành những khối mã HTML5 ngữ nghĩa vững chắc cho trang chủ.

1. Cấu trúc cây thư mục dự án chuyên nghiệp

my-website/ <-- Thư mục gốc dự án

├── index.html (Trang chủ chính)

├── about.html (Trang giới thiệu)

├── css/ (Thư mục chứa kiểu dáng)

│   └── style.css

├── images/ (Thư mục chứa ảnh)

│   ├── logo.png

│   └── banner.jpg

└── js/ (Thư mục mã JavaScript nếu có)

2. Viết khung HTML5 cho các khối chính của trang

Mã nguồn tệp index.html sử dụng các thẻ ngữ nghĩa:

<header>
  <img src="images/logo.png" alt="Logo" class="logo">
  <nav>
    <ul>
      <li><a href="index.html" class="active">Trang chủ</a></li>
      <li><a href="about.html">Giới thiệu</a></li>
      <li><a href="#contact">Liên hệ</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero-banner">...</section>
  <section class="featured-news">...</section>
</main>

<footer>
  <p>&copy; 2026 Dự án Tin học 12. Bản quyền thuộc về Nhóm 1.</p>
</footer>
Nhiệm vụ thực hành & Vận dụng:
  • Khởi tạo cấu trúc thư mục dự án gồm các thư mục con `css/`, `images/`, `js/` trên máy tính.
  • Soạn thảo tệp `index.html` hoàn chỉnh có phần Header chứa logo và menu danh sách liên kết <ul>, <li>, <a>.
  • Kiểm tra tính hợp lệ của mã HTML bằng cách mở tệp trên trình duyệt để kiểm tra cấu trúc hiển thị thô.
Ghi nhớ trọng tâm: Xây dựng website đòi hỏi tổ chức thư mục khoa học (css/, images/, js/). Trang chủ index.html được dựng khung bằng các thẻ ngữ nghĩa chuẩn HTML5 (<header>, <nav>, <main>, <section>, <footer>) cùng hệ thống class/id rõ ràng.

Trắc nghiệm củng cố Bài 24 (4 câu)

Tự động chấm

Câu 1: Thư mục nào sau đây là nơi lưu trữ khoa học nhất dành cho tất cả các bức ảnh, biểu tượng logo của dự án website?

Câu 2: Cặp thẻ nào sau đây được khuyến nghị sử dụng để xây dựng thanh thực đơn điều hướng (Menu bar) trong thẻ <code><nav></code>?

Câu 3: Đoạn mã khai báo bản quyền đặc biệt <code>©</code> trong HTML sẽ hiển thị biểu tượng nào trên màn hình?

Câu 4: Việc đặt tên <code>class</code> và <code>id</code> cho các phần tử HTML nên tuân theo nguyên tắc nào?

Bài 25 45 phút
Làm trắc nghiệm bài này

Bài 25: Thiết kế giao diện CSS hoàn chỉnh cho website

Mục tiêu cần đạt:

Áp dụng kỹ thuật CSS Reset; Định dạng hệ thống Typography và phối màu giao diện chuyên nghiệp; Sử dụng kỹ thuật Flexbox để dàn hàng ngang thanh Menu và chia cột nội dung; Thiết lập hiệu ứng chuyển động mượt mà (Transitions) khi rê chuột.

💡 Khởi động: Khung xương HTML đã sẵn sàng, bây giờ chúng ta sẽ 'khoác áo mới' bằng CSS để biến trang web thành một sản phẩm ấn tượng, chuẩn mực như các website chuyên nghiệp.

1. Kỹ thuật CSS Reset và Thiết lập biến màu sắc

/* 1. Xóa lề mặc định của trình duyệt và cố định box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. Thiết lập phông chữ và màu chữ mặc định cho toàn trang */
body {
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #334155;
  background-color: #f8fafc;
  line-height: 1.6;
}

2. Dàn hàng ngang thanh Menu với Flexbox

Sức mạnh của Flexbox (display: flex)

Chỉ cần khai báo display: flex ở phần tử cha, các phần tử con sẽ tự động dàn thành một hàng ngang thanh lịch:

nav ul {
  display: flex; /* Dàn hàng ngang */
  list-style: none; /* Bỏ dấu chấm tròn */
  gap: 20px; /* Khoảng cách giữa các mục menu */
}
Nhiệm vụ thực hành & Vận dụng:
  • Tạo tệp `css/style.css` và liên kết với `index.html`.
  • Thiết lập quy tắc CSS Reset `* { margin: 0; padding: 0; box-sizing: border-box; }`.
  • Áp dụng `display: flex` cho thanh Menu và thêm hiệu ứng `transition: all 0.3s ease;` đổi màu chữ khi người dùng rê chuột qua liên kết.
Ghi nhớ trọng tâm: CSS hoàn thiện giao diện qua kỹ thuật CSS Reset, Typography, phối màu và Flexbox (display: flex, justify-content, gap). Sử dụng transition tạo hiệu ứng chuyển màu mượt mà khi người dùng tương tác.

Trắc nghiệm củng cố Bài 25 (4 câu)

Tự động chấm

Câu 1: Đoạn mã CSS Reset nào sau đây là tiêu chuẩn vàng giúp loại bỏ lề mặc định của mọi trình duyệt và cố định mô hình hộp?

Câu 2: Thuộc tính CSS nào biến một danh sách <code><ul></code> từ dạng danh sách dọc mặc định thành một hàng ngang trải dài trên thanh menu?

Câu 3: Để loại bỏ các dấu chấm tròn đen mặc định ở đầu mỗi mục của danh sách <code><ul></code>, ta dùng thuộc tính nào?

Câu 4: Thuộc tính CSS nào tạo ra hiệu ứng đổi màu hoặc biến đổi kích thước diễn ra từ từ, mượt mà thay vì giật cục khi người dùng rê chuột <code>:hover</code>?

Bài 26 45 phút
Làm trắc nghiệm bài này

Bài 26: Tích hợp các thành phần tương tác vào trang web

Mục tiêu cần đạt:

Tạo trang 'Liên hệ / Góp ý' với form tương tác; Nhúng biểu mẫu trực tuyến Google Forms để thu thập dữ liệu; Nhúng bản đồ Google Maps tương tác; Nhúng video bài giảng từ YouTube với chế độ hiển thị linh hoạt.

💡 Khởi động: Một trang web hiện đại cần tương tác hai chiều với người đọc. Làm thế nào để học sinh toàn trường có thể gửi ý kiến đóng góp, xem video giới thiệu câu lạc bộ và tìm đường tới trường ngay trên website?

1. Nhúng biểu mẫu thu thập thông tin Google Forms

Thay vì phải tự lập trình hệ thống máy chủ Backend phức tạp để lưu dữ liệu, giải pháp tiện lợi và bảo mật là sử dụng Google Forms:

1. Truy cập forms.google.com và tạo biểu mẫu khảo sát ý kiến.

2. Nhấn nút Gửi (Send) → Chọn biểu tượng nhúng <> → Sao chép đoạn mã <iframe>.

3. Dán đoạn mã iframe vào tệp contact.html của trang web.

2. Tích hợp bản đồ vị trí Google Maps và Video YouTube

Nhúng Google Maps

Cho phép người dùng phóng to, thu nhỏ, tìm đường tới trường học trực tiếp trên trang web mà không cần rời khỏi trang.

Nhúng Video YouTube

Sử dụng hạ tầng lưu trữ tốc độ cao của YouTube giúp trang web tải nhanh và không tốn dung lượng băng thông máy chủ của trường.

Nhiệm vụ thực hành & Vận dụng:
  • Tạo một biểu mẫu Google Form ngắn (3 câu hỏi) khảo sát ý kiến học sinh về hoạt động ngoại khóa.
  • Lấy mã nhúng <iframe> của biểu mẫu Google Form và tích hợp vào trang `contact.html`.
  • Tìm vị trí trường học trên Google Maps và nhúng bản đồ tương tác vào chân trang của website.
Ghi nhớ trọng tâm: Tích hợp các dịch vụ đám mây thông qua thẻ <iframe> (Google Forms, Google Maps, YouTube) giúp website có tính tương tác cao, giàu nội dung đa phương tiện mà không tốn chi phí lập trình máy chủ phức tạp.

Trắc nghiệm củng cố Bài 26 (4 câu)

Tự động chấm

Câu 1: Công cụ trực tuyến miễn phí nào của Google giúp lập trình viên nhanh chóng thu thập khảo sát, góp ý từ người dùng và tự động lưu vào Google Sheets?

Câu 2: Thẻ HTML nào được sử dụng để tích hợp bản đồ Google Maps hoặc video YouTube vào trang web cá nhân?

Câu 3: Lợi ích lớn nhất của việc nhúng video giới thiệu trường học từ YouTube thay vì tải trực tiếp tệp video nặng 500MB lên máy chủ web của trường là gì?

Câu 4: Thuộc tính nào của thẻ <code><iframe></code> cho phép người dùng mở video YouTube sang chế độ toàn màn hình máy tính?

Bài 27 45 phút
Làm trắc nghiệm bài này

Bài 27: Kiểm thử, tối ưu và sửa lỗi trang web

Mục tiêu cần đạt:

Thực hiện quy trình kiểm thử trang web (Testing); Kiểm tra lỗi cú pháp mã nguồn qua công cụ W3C Validator; Kiểm tra khả năng tương thích trên nhiều trình duyệt khác nhau (Cross-browser); Tối ưu hóa kích thước hình ảnh để tăng tốc độ tải trang.

💡 Khởi động: Một trang web hiển thị đẹp trên máy tính của bạn nhưng khi mở trên điện thoại của bạn bè lại bị vỡ hình, lệch chữ? Làm thế nào để kiểm thử và tối ưu trang web trước khi ra mắt?

1. Quy trình kiểm thử trang web toàn diện

Các hạng mục cần kiểm thử
1. Kiểm tra liên kết gãy (Broken Links): Đảm bảo tất cả các nút bấm và siêu liên kết đều dẫn đến đúng trang đích, không báo lỗi 404.
2. Kiểm tra tính tương thích đa trình duyệt: Mở trang web trên Google Chrome, Microsoft Edge, Mozilla Firefox và Safari.
3. Kiểm tra giao diện di động (Responsive): Dùng phím F12 trên trình duyệt để giả lập màn hình iPhone, iPad, kiểm tra chữ không bị tràn màn hình.
Công cụ kiểm tra chuẩn W3C

Truy cập validator.w3.org để quét và phát hiện các lỗi cú pháp thẻ HTML chưa đóng, thuộc tính viết sai chính tả.

2. Tối ưu hóa tốc độ tải trang web

Nguyên nhân lớn nhất khiến trang web tải chậm: Hình ảnh quá nặng!

- Bức ảnh chụp từ điện thoại thường có dung lượng 5MB - 10MB, khiến người dùng 3G/4G phải chờ đợi lâu.

- Giải pháp: Nén ảnh qua các công cụ trực tuyến (như TinyPNG) và chuyển sang định dạng hiện đại WebP để giảm 80% dung lượng mà chất lượng hình ảnh vẫn sắc nét.

Nhiệm vụ thực hành & Vận dụng:
  • Mở website dự án trên trình duyệt, nhấn phím F12 (hoặc Ctrl + Shift + I) để mở Developer Tools và kích hoạt chế độ xem trên điện thoại di động (Toggle device toolbar).
  • Rà soát và nhấp thử vào tất cả các liên kết trong thanh menu để đảm bảo không có liên kết nào bị lỗi 404.
  • Sử dụng công cụ TinyPNG để nén thử 3 bức ảnh trong thư mục `images/` và so sánh dung lượng trước/sau khi nén.
Ghi nhớ trọng tâm: Kiểm thử website gồm kiểm tra liên kết gãy, chuẩn hóa mã nguồn bằng W3C Validator và kiểm thử hiển thị đa thiết bị. Tối ưu dung lượng hình ảnh (nén ảnh WebP) là biện pháp then chốt giúp website tải nhanh và giữ chân người dùng.

Trắc nghiệm củng cố Bài 27 (4 câu)

Tự động chấm

Câu 1: Công cụ Developer Tools tích hợp sẵn trong trình duyệt (Chrome/Edge) có thể được mở nhanh chóng bằng phím tắt nào?

Câu 2: Nguyên nhân phổ biến nhất khiến một trang web tải rất chậm và tốn nhiều dung lượng mạng của người dùng là gì?

Câu 3: Mã lỗi HTTP nào xuất hiện trên màn hình khi người dùng nhấp vào một siêu liên kết dẫn đến một trang web hoặc tệp tin không tồn tại?

Câu 4: Trang web chính thức của tổ chức tiêu chuẩn mạng W3C cung cấp công cụ kiểm tra lỗi cú pháp HTML trực tuyến miễn phí có địa chỉ là gì?

Bài 28 45 phút
Làm trắc nghiệm bài này

Bài 28: Xuất bản và quản trị trang web trực tuyến

Mục tiêu cần đạt:

Hiểu quy trình đưa một trang web từ máy tính cá nhân lên mạng Internet; Đăng ký tài khoản và tạo kho mã nguồn (Repository) trên GitHub; Kích hoạt thành công dịch vụ xuất bản trang web miễn phí GitHub Pages; Lập kế hoạch quản trị và cập nhật website định kỳ.

💡 Khởi động: Trang web của nhóm đã hoàn thành trên máy tính, nhưng làm thế nào để bạn bè ở xa và thầy cô có thể truy cập bằng một đường link Internet công khai 24/24 hoàn toàn miễn phí?

1. Các phương thức xuất bản website lên Internet

Web Hosting truyền thống

Thuê máy chủ lưu trữ (Hosting) và mua tên miền riêng (.com, .vn). Phù hợp cho doanh nghiệp lớn, chi phí duy trì hàng năm.

Dịch vụ đám mây GitHub Pages

Dịch vụ lưu trữ và xuất bản website tĩnh (HTML, CSS, JS) miễn phí 100% của GitHub. Tốc độ cực nhanh, hỗ trợ chứng chỉ bảo mật HTTPS tự động. Rất lý tưởng cho học sinh, sinh viên.

2. Hướng dẫn 4 bước xuất bản website với GitHub Pages

Bước 1: Đăng ký tài khoản miễn phí tại github.com.

Bước 2: Nhấn nút New Repository → Đặt tên kho lưu trữ (ví dụ: du-an-tin-hoc-12) → Chọn chế độ Public.

Bước 3: Tải toàn bộ mã nguồn của dự án (tệp index.html và các thư mục css/, images/) lên kho chứa qua nút Upload files.

Bước 4: Vào mục Settings của kho lưu trữ → Chọn thẻ Pages ở cột bên trái → Tại mục Branch, chọn nhánh main và thư mục / (root) → Bấm Save.

🎉 Sau khoảng 1-2 phút, trang web sẽ chính thức hoạt động tại địa chỉ:
https://<tên_tài_khoản>.github.io/<tên_kho_chứa>/
Nhiệm vụ thực hành & Vận dụng:
  • Đăng ký một tài khoản cá nhân trên nền tảng GitHub và xác thực email.
  • Tạo một repository mới trên GitHub và tải toàn bộ mã nguồn website dự án nhóm lên.
  • Kích hoạt tính năng GitHub Pages, sao chép đường dẫn trực tuyến công khai và gửi cho giáo viên cũng như các bạn trong lớp cùng trải nghiệm sản phẩm.
Ghi nhớ trọng tâm: GitHub Pages là nền tảng đám mây xuất bản website tĩnh miễn phí, tin cậy và có sẵn HTTPS. Quy trình gồm: Tạo tài khoản GitHub -> Tạo Public Repository -> Tải mã nguồn lên nhánh main -> Kích hoạt Pages trong Settings -> Nhận đường link trực tuyến toàn cầu.

Trắc nghiệm củng cố Bài 28 (4 câu)

Tự động chấm

Câu 1: Dịch vụ trực tuyến nào sau đây cung cấp giải pháp lưu trữ và xuất bản trang web tĩnh (HTML/CSS/JS) hoàn toàn miễn phí kèm chứng chỉ bảo mật HTTPS?

Câu 2: Khi đưa tệp tin lên kho chứa GitHub để chạy GitHub Pages, tệp tin bắt buộc phải nằm ở thư mục gốc để làm trang chủ là gì?

Câu 3: Đường link truy cập trang web trực tuyến miễn phí do GitHub Pages cung cấp có định dạng chuẩn nào sau đây?

Câu 4: Sau khi xuất bản website lên Internet, việc quản trị và bảo trì website cần được thực hiện như thế nào?

Ma Trận Đánh Giá Năng Lực Học Sinh

III. Phân loại kiến thức để ôn tập và kiểm tra

Khung phân loại cấp độ nhận thức theo định hướng Đổi mới kiểm tra đánh giá của Bộ Giáo dục & Đào tạo, hỗ trợ học sinh ôn thi tốt nghiệp THPT và kỳ thi Đánh giá năng lực.

Mức độ Yêu cầu học sinh cần đạt Dạng câu hỏi minh họa
Nhận biết Nhớ khái niệm cốt lõi, chức năng thiết bị mạng, tên giao thức (IP, TCP), tên thẻ HTML và thuộc tính CSS thông dụng. "Thiết bị nào sau đây dùng để kết nối và định tuyến gói tin giữa các mạng?" → Router.
Thông hiểu Giải thích nguyên lí hoạt động, phân biệt các thiết bị mạng (Hub vs Switch, IPv4 vs IPv6), phân tích cấu trúc mã HTML/CSS và sự khác biệt giữa các quyền chia sẻ. "Tại sao Switch hoạt động hiệu quả hơn Hub trong mạng LAN?" → Chuyển dữ liệu chính xác tới cổng đích, giảm xung đột tín hiệu.
Vận dụng Cấu hình chia sẻ tài nguyên mạng (tệp, máy in), viết mã HTML/CSS để tạo khung trang web, xử lí tình huống lỗi hiển thị và xuất bản website trực tuyến. "Viết đoạn mã CSS định dạng tiêu đề h1 chữ màu xanh, nền vàng nhạt, căn giữa và cỡ chữ 24px."
Trọng Tâm Ôn Luyện

IV. Sáu nhóm kiến thức nên ưu tiên

Ôn thi THPT & Ứng dụng thực tế
1

Trí tuệ nhân tạo (AI)

Khái niệm cốt lõi, 4 đặc trưng (học, suy luận, nhận thức, giải quyết vấn đề), ứng dụng nổi bật (hệ chuyên gia, trợ lí ảo, dịch máy), AI tạo sinh, lợi ích và các rủi ro xã hội cần kiểm soát.

Xem Bài 1 – 2 →
2

Mạng máy tính & Internet

Thiết bị mạng (Hub, Switch, Router, Modem, WAP), bộ giao thức TCP/IP, địa chỉ IPv4 & IPv6, cơ chế định tuyến và kĩ thuật chia sẻ tài nguyên tệp/máy in trong LAN.

Xem Bài 3 – 5 →
3

Văn hóa và đạo đức số

Ứng xử nhân văn và có trách nhiệm trên không gian mạng; bảo vệ quyền riêng tư cá nhân; tuân thủ bản quyền số và phòng chống lừa đảo, tin giả.

Xem Bài 6 →
4

Ngôn ngữ HTML

Cấu trúc trang tài liệu chuẩn HTML5, hệ thống thẻ ngữ nghĩa, tạo bảng dữ liệu (table), liên kết siêu văn bản (a), chèn đa phương tiện (img, video, iframe) và tạo form nhập liệu.

Xem Bài 7 – 12 →
5

Ngôn ngữ định dạng CSS

Cấu trúc quy tắc CSS (bộ chọn, thuộc tính, giá trị), định dạng văn bản & màu sắc, mô hình hộp (Box model: margin, padding, border) và thứ tự ưu tiên áp dụng quy tắc định dạng.

Xem Bài 13 – 18 →
6

Thiết kế & Xuất bản website

Quy trình thực tế: Lập kế hoạch dự án web, phác thảo wireframe, thiết kế giao diện đa trang, điều hướng menu, nhúng biểu mẫu thu thập dữ liệu và xuất bản trực tuyến.

Xem Bài 23 – 28 →

Chuẩn hóa bộ kiến thức cốt lõi 28 bài học cho học sinh & Dữ liệu nguồn CodeHub:

Đây là bản lọc kiến thức theo cấu trúc toàn bộ SGK Tin học 12 (Kết nối tri thức - ICT). Toàn bộ 28 bài học đã được hệ thống hóa gồm khái niệm, kiến thức bắt buộc ghi nhớ, mã nguồn ví dụ minh họa, kĩ năng thực hành và câu hỏi kiểm tra tương tác, sẵn sàng phục vụ học sinh ôn tập vững vàng và làm nguồn dữ liệu khảo thí chuẩn hóa cho nền tảng CodeHub.