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

BÀI 12. DỰ ÁN NHỎ: TẠO TRANG WEB BÁO TƯỜNG
(CÁNH DIỀU - CS & ICT)

Bài 12 - Dự án nhỏ: tạo trang web báo tường (Cánh diều - cs & ict)

Đây là bài soạn lý thuyết tin học 12 - sách Cánh diều. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Lý thuyết được tóm tắt ngắn gọn, dễ hiểu, bám sát nội dung cốt lõi của bài học. Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

1. Yêu cầu chung

- Mục tiêu: Thiết kế một trang web báo tường cho lớp.
- Sản phẩm cần tạo:
+ Tệp HTML chứa nội dung trang web.
+ Tệp CSS để định dạng và trình bày giao diện.
+ Bài trình chiếu giới thiệu về dự án.
- Tiêu chí đánh giá:
+ Sử dụng các phần tử HTML để tạo trang web có chữ, hình ảnh, âm thanh, biểu mẫu.
+ Bố cục hợp lý, trình bày đẹp nhờ sử dụng CSS (internal và external).
+ Bài trình chiếu phải đáp ứng yêu cầu, có tính thẩm mỹ và nhóm có kỹ năng thuyết trình tốt.

2. Một số hướng dẫn gợi ý

* Chia nhóm và chọn chủ đề:
- Mỗi nhóm 5 - 8 học sinh, mỗi học sinh chỉ tham gia một nhóm.
- Các nhóm có thể chọn chủ đề như:
+ Chào mừng ngày Nhà giáo Việt Nam 20/11
+ Chào mừng ngày thành lập Đoàn Thanh niên 26/3
+ Lưu bút ngày ra trường
+ Hoặc bất kỳ chủ đề nào phù hợp.
* Kế hoạch thực hiện (3 tiết học):
- Giai đoạn 1: Khởi động dự án
+ Thảo luận, lên ý tưởng, phân công công việc.
- Giai đoạn 2: Thiết kế & lập trình
+ Tạo file HTML: Xây dựng nội dung trang web.
+ Tạo file CSS: Định dạng bố cục, màu sắc, font chữ,...
+ Tích hợp nội dung đa phương tiện: Hình ảnh, video, âm thanh, biểu mẫu.
+ Hoàn thiện nội dung và kiểm tra trang web.
- Giai đoạn 3: Thuyết trình và đánh giá
+ Chuẩn bị bài trình chiếu, thực hành thuyết trình.
+ Trình bày kết quả trước lớp.
Lưu ý: Trong giai đoạn 2, cần phân công rõ người sẽ thuyết trình và giới thiệu về sản phẩm nhóm.
Kết luận: Dự án giúp học sinh áp dụng kiến thức HTML & CSS vào thực tế, rèn luyện kỹ năng làm việc nhóm, tư duy thiết kế web và khả năng thuyết trình.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bản
Bài 2. Định dạng văn bản và tạo siêu liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường

Bài 1. Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Giới thiệu phần mềm tạo website
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)

Bài 1. Môi trường truyền dẫn
Bài 2. Thiết bị mạng
Bài 3. Thiết bị mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)

Bài 1. Giới thiệu về học máy
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

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

BÀI 11. MÔ HÌNH HỘP, BỐ CỤC TRANG WEB
(CÁNH DIỀU - CS & ICT)

Bài 11 - Mô hình hộp, bố cục trang web (Cánh diều - cs & ict)

1. Mô hình hộp trong trình bày phần tử HTML

Mỗi phần tử HTML khi hiển thị trên trình duyệt được cấu tạo theo mô hình hộp, gồm:
- Vùng nội dung (content): Chứa nội dung chính.
- Vùng đệm (padding): Khoảng cách giữa nội dung và đường viền.
- Đường viền (border): Viền bao quanh nội dung.
- Vùng lề (margin): Khoảng cách giữa phần tử với các phần tử khác.

Ví dụ: CSS điều chỉnh kích thước vùng lề, đệm, và đường viền của phần tử <p> để thay đổi khoảng cách hiển thị trên trang web.

2. Hiển thị phần tử theo khối, theo dòng

- Phần tử khối (block-level elements):

- Phần tử dòng (inline elements):

- CSS có thể thay đổi cách hiển thị mặc định bằng thuộc tính display:

Ví dụ:

3. Bố cục trang web

Bố cục giúp sắp xếp các thành phần trên trang web một cách hợp lý. Một trang web điển hình có các phần chính sau:
- Header: Chứa logo, tiêu đề trang web.
- Navigation: Thanh điều hướng chứa các liên kết.
- Content: Nội dung chính của trang web.
- Footer: Chứa thông tin bổ trợ như bản quyền, liên kết nhanh.
- Tạo bố cục bằng <div> và CSS:
+ Sử dụng <div> để chia các vùng trong trang web.
+ Định dạng từng phần bằng class hoặc id trong CSS.
- Ví dụ:

Tóm lại:
- Mô hình hộp giúp kiểm soát bố cục phần tử bằng margin, padding, border.
- Hiển thị phần tử có thể thay đổi giữa khối (block) và dòng (inline).
- Bố cục trang web được tạo bằng <div> kết hợp với CSS để định dạng.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

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

BÀI 10. BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH
(CÁNH DIỀU - CS & ICT)

Bài 10 - Bộ chọn lớp, bộ chọn định danh (Cánh diều - cs & ict)

1. Bộ chọn lớp (class)

- Dùng để áp dụng chung một quy tắc CSS cho nhiều phần tử HTML mà không cần lặp lại khai báo CSS.
- Cú pháp:

- Áp dụng trong HTML bằng cách thêm thuộc tính class:

- Một phần tử có thể có nhiều lớp:

- Định dạng trong CSS:

- Ví dụ 1:

- Ví dụ 2:

2. Bộ chọn định danh (id)

- Dùng để áp dụng một quy tắc CSS duy nhất cho một phần tử HTML cụ thể.
- Cú pháp:

- Áp dụng trong HTML bằng thuộc tính id:

- Định dạng trong CSS:

- Ví dụ:

3. Thực hành sử dụng bộ chọn lớp, bộ chọn định danh

Nhiệm vụ 1: Khai báo và áp dụng bộ chọn lớp (class)

Yêu cầu: Tạo file CSS Bai10-NV1.css với các quy tắc sau:
- .blue → màu chữ steelblue
- .red → màu chữ darkred
- .orangered → phông Verdana, cỡ chữ 25px, màu chữ orangered
- .yellow (cho input) → nền yellow
- .blue (cho input) → nền blue, chữ white
Áp dụng vào HTML:
- Mở Bai9-NV2.html, lưu thành Bai10-NV1.html.
- Liên kết Bai10-NV1.css bằng <link rel="stylesheet" href="Bai10-NV1.css">.
- Thêm các class vào phần tử tương ứng (h2, h3, input).

Nhiệm vụ 2: Khai báo và áp dụng bộ chọn định danh (id)

Yêu cầu: Định dạng tiêu đề chính với id="tieu-de" có:
- Phông chữ Courier New
- Cỡ chữ 30px
- Màu chữ lightsalmon
Thực hiện:
- Mở Bai10-NV1.html, lưu thành Bai10-NV2.html.
- Thêm CSS vào <style>:

- Sửa tiêu đề thành:

- Lưu và kiểm tra trên trình duyệt.
Tóm lại:
- Bộ chọn lớp (class) giúp tái sử dụng quy tắc CSS trên nhiều phần tử.
- Bộ chọn định danh (id) dành cho định dạng duy nhất của một phần tử cụ thể.
- Biết cách kết hợp class và id giúp tạo giao diện linh hoạt hơn trong thiết kế web.

---The End!---

CÙNG CHUYÊN MỤC:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo