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

BÀI 15 - TẠO MÀU CHO CHỮ VÀ NỀN (KNTT - CS & ICT)

Bài 15 - Tạo màu cho chữ và nền (kntt)

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

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.84)	Hoạt động 2
Câu hỏi(t.85)	Hoạt động 3	Câu hỏi(t.87)	Luyện tập	Vận dụng

Khởi động (trang 83): Các định dạng sau có thiết lập cùng một màu hay không? Em có nhận xét gì về thiết lập này?

Gợi ý trả lời:

Các định dạng trên đều thiết lập cùng một màu, đó là màu tím.
a) p {color: rgb(128,0,128);} sử dụng giá trị RGB để thiết lập màu.
b) p {color: #800080;} sử dụng mã màu HEX để thiết lập màu.
c) p {color: hsl (300,100%,25.1%);} sử dụng giá trị HSL để thiết lập màu.
Nhận xét: Cả ba định dạng đều thiết lập cùng một màu tím, tuy nhiên, cách biểu diễn màu sử dụng các hệ thống màu khác nhau. RGB sử dụng giá trị đỏ (Red), xanh lá cây (Green) và xanh dương (Blue), mã màu HEX sử dụng mã hexa và HSL sử dụng giá trị màu (Hue), độ bão hòa (Saturation) và độ sáng (Lightness).

1. HỆ THỐNG MÀU CỦA CSS

Hoạt động 1 (trang 83): Cùng thảo luận và tìm hiểu hệ màu RGB hỗ trợ bởi HTML và CSS.

Gợi ý trả lời:

HTML và CSS hỗ trợ hệ màu theo mẫu RGB(R-Red, G-Green, B-Blue). Mỗi màu là một tổ hợp gồm ba giá trị (r, g, b), trong đó mỗi giá trị này là số nguyên nằm trong khoảng từ 0 đến 255, tức là một số 8 bit. Tổng số màu cho phép là 28 x 28 x 28 = 224 = 16.777.216 màu.

CÂU HỎI

Câu hỏi 1 (trang 84): Các màu cơ bản red, yellow, green, blue, magentam cyan được thể hiện bằng hàm hsl như thế nào?

Gợi ý trả lời:

Red (đỏ): HSL(0, 100%, 50%)
Yellow (vàng): HSL(60, 100%, 50%)
Green (xanh lá cây): HSL(120, 100%, 50%)
Blue (xanh dương): HSL(240, 100%, 50%)
Magenta (đỏ tím): HSL(300, 100%, 50%)
Cyan (xanh lam): HSL(180, 100%, 50%)
Câu hỏi 2 (trang 84): Trong hệ màu rgb có bao nhiêu màu thuộc màu xám?

Gợi ý trả lời:

Có 256 màu thuộc màu xám. Các màu này có tham số RGB là rgb(x,x,x) với x chạy từ 0 đến 255.

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

Hoạt động 2 (trang ):84 Cùng thảo luận về cách thiết lập màu trong các mẫu CSS và trả lời các câu hỏi sau:
1. Cách thiết lập định dạng màu chữ trong CSS như thế nào?
2. Cách thiết lập màu nền cho các phần tử CSS như thế nào?

Gợi ý trả lời:

- Để thiết lập định dạng màu chữ trong CSS, sử dụng thuộc tính "color". Có thể áp dụng giá trị màu bằng tên màu (ví dụ: "red", "blue"), mã hex (ví dụ: "#FF0000" cho màu đỏ) hoặc giá trị RGB (ví dụ: "rgb(255, 0, 0)" cho màu đỏ).
- Để thiết lập màu nền cho các phần tử CSS, sử dụng thuộc tính "background-color". Tương tự như màu chữ, có thể áp dụng giá trị màu bằng tên màu, mã hex hoặc giá trị RGB.

CÂU HỎI

Câu hỏi 1 (trang 85): Sửa lại CSS trong ví dụ trên, định dạng màu nền và khung viền cho cụm từ Tim Berners-Lee với màu khác biệt.

Gợi ý trả lời:

Kết quả hiển thị:

Câu hỏi 2 (trang 85): Sửa lại CSS trên, thay đổi định dạng khung viền cho phần tử p. Em hãy kiểm tra xem tính chất này có kế thừa cho các phần tử con không.

Gợi ý trả lời:

Vậy: Tính chất định dạng khung viền không có tính kế thừa.

3. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

Hoạt động 3 (trang ):84 Quan sát, trao đổi và thảo luận về 4 trường hợp bộ chọn là tổ hợp các phần tử, nêu ý nghĩa và sự khác biệt giữa các trường hợp này: E F, E > F, E + F và E ~ F.

Gợi ý trả lời:

- E F (Descendant selector): Chọn tất cả các phần tử F nằm bên trong phần tử E, bất kể cấp độ lồng nhau của chúng. Ví dụ: div p sẽ chọn tất cả các phần tử <p> nằm trong các phần tử <div>.
- E > F (Child selector): Chọn các phần tử F là con trực tiếp của phần tử E. Điều này chỉ chọn các phần tử F nằm trực tiếp bên trong phần tử E, không bao gồm các phần tử F ở các cấp độ lồng nhau sâu hơn. Ví dụ: ul > li sẽ chọn tất cả các phần tử <li> là con trực tiếp của phần tử <ul>.
- E + F (Adjacent sibling selector): Chọn các phần tử F ngay sau phần tử E và cùng cấp với E. Điều này chỉ chọn phần tử F đầu tiên sau phần tử E. Ví dụ: h2 + p sẽ chọn phần tử <p> đầu tiên ngay sau một phần tử <h2>.
- E ~ F (General sibling selector): Chọn tất cả các phần tử F cùng cấp với phần tử E, ngay sau và lồng nhau. Điều này tương tự như trường hợp E + F, nhưng khác biệt là E ~ F có thể chọn nhiều phần tử F, không chỉ phần tử đầu tiên. Ví dụ: h3 ~ p sẽ chọn tất cả các phần tử <p> cùng cấp với phần tử <h3>.

CÂU HỎI

Câu hỏi 1 (trang 87): Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p > strong thì kết quả sẽ như thế nào?

Gợi ý trả lời:

Kết quả vẫn như cũ. Dòng chữ "Tim Berners-Lee" vẫn có màu đỏ.
Mã HTML sau khi sửa:

Câu hỏi 2 (trang 87): Trong ví dụ ở Hình 15.7 nếu thay mẫu em ~ strong bằng em + strong thì kết quả sẽ như thế nào?

Gợi ý trả lời:

- Dòng chữ "Tim Berners-Lee" vẫn có màu đỏ.
- Chữ CERN chuyển sang màu đen.
Mã HTML sau khi sửa:

Câu hỏi 3 (trang 87): Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p strong thì kết quả sẽ như thế nào?

Gợi ý trả lời:

Kết quả vẫn như cũ. Dòng chữ "Tim Berners-Lee" vẫn có màu đỏ.
Mã HTML sau khi thay đổi:

LUYỆN TẬP

Luyện tập 1 (trang 88): Thiết lập hệ màu cơ bản (17 màu của CSS2.1) theo bộ ba tham số R, G, B.

Gợi ý trả lời:

- Đen: RGB(0, 0, 0)
- Trắng: RGB(255, 255, 255)
- Đỏ: RGB(255, 0, 0)
- Xanh lá cây: RGB(0, 128, 0)
- Xanh da trời: RGB(0, 0, 255)
- Xanh lam: RGB(0, 0, 128)
- Vàng: RGB(255, 255, 0)
- Cam: RGB(255, 165, 0)
- Hồng: RGB(255, 192, 203)
- Tím: RGB(128, 0, 128)
- Xanh dương: RGB(0, 0, 139)
- Xám: RGB(128, 128, 128)
- Xám đậm: RGB(169, 169, 169)
- Xám nhạt: RGB(211, 211, 211)
- Nâu: RGB(165, 42, 42)
- Xanh oliv: RGB(128, 128, 0)
- Xanh lá cây đậm: RGB(0, 100, 0)

Luyện tập 2 (trang 88): Khi nào các mẫu định dạng E F và E > F có tác dụng như nhau?

Gợi ý trả lời:

Các mẫu E F và E > F có tác dụng như nhau khi F là phần tử con trực tiếp của E.

VẬN DỤNG

Vận dụng 1 (trang 88): Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E1 E2 E3.
b) E1 > E2 > E3.

Gợi ý trả lời:

a) Mẫu định dạng E1 E2 E3: Đây là một mẫu kết hợp (descendant selector) trong CSS, áp dụng cho các phần tử E3 nằm trong phần tử E2, và phần tử E2 nằm trong phần tử E1. Mẫu này không yêu cầu E2 và E3 là con trực tiếp của E1, mà có thể nằm bất kỳ đâu trong cây phân cấp của E1.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .container .parent .child span áp dụng cho phần tử <span> nằm trong phần tử có lớp "child", nằm trong phần tử có lớp "parent", và nằm trong phần tử có lớp "container". Điều này cho phép chúng ta định dạng các phần tử <span> trong một cây phân cấp phức tạp.
b) Mẫu định dạng E1 > E2 > E3: Đây là một mẫu kết hợp (child combinator) trong CSS, áp dụng cho các phần tử E3 là con trực tiếp của E2, và E2 là con trực tiếp của E1. Mẫu này yêu cầu E2 và E3 nằm trực tiếp trong E1.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .parent > .child > span áp dụng cho phần tử <span> là con trực tiếp của phần tử có lớp "child", và phần tử có lớp "child" là con trực tiếp của phần tử có lớp "parent". Điều này cho phép chúng ta định dạng các phần tử <span> chỉ khi chúng nằm trực tiếp trong các phần tử <li> và <ul>, không áp dụng cho các phần tử <span> khác nằm ở cấp độ khác trong cây phân cấp.
Vận dụng 2 (trang 88): Tìm ví dụ và giải thích ý nghĩa cho các mẫu định dạng CSS tổng quát như sau:
a) E + F + G.
b) E > F + G

Gợi ý trả lời:

a) Mẫu định dạng E + F + G: Đây là một mẫu kết hợp (adjacent sibling combinator) trong CSS, áp dụng cho các phần tử G là anh em kế tiếp của phần tử F, và phần tử F là anh em kế tiếp của phần tử E. Mẫu này yêu cầu F và G nằm trực tiếp sau E và cùng nằm trong cùng một cấp độ của cây phân cấp.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .container h2 + p + p áp dụng cho các phần tử <p> nằm sau phần tử <h2>, và cùng nằm trực tiếp sau một phần tử <p>. Điều này cho phép chúng ta định dạng các phần tử <p> mà là anh em kế tiếp của phần tử <h2> và nằm trực tiếp sau một phần tử <p>.
b) Mẫu định dạng E > F + G: Đây là một mẫu kết hợp (child combinator và adjacent sibling combinator) trong CSS, áp dụng cho các phần tử G là anh em kế tiếp của phần tử F, và phần tử F là con trực tiếp của phần tử E. Mẫu này yêu cầu F và G nằm trực tiếp sau E và cùng nằm trong cùng một cấp độ của cây phân cấp.
Ví dụ:

Trong ví dụ trên, mẫu định dạng .container > ul + p + ul áp dụng cho các phần tử <ul> nằm trực tiếp sau phần tử <p>, và cùng nằm trực tiếp sau một phần tử <ul> nằm trực tiếp trong phần tử có lớp "container". Điều này cho phép chúng ta áp dụng kiểu CSS cho các phần tử <ul> mà là anh em kế tiếp của một phần tử <p> và nằm trực tiếp sau một phần tử <ul> nằm trực tiếp trong phần tử có lớp "container".

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

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

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

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

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

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

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

Bài 7. HTML và cấu trúc trang web
Bài 8. Định dạng văn bản
Bài 9. Tạo danh sách, bảng
Bài 10. Tạo liên kết
Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Bài 12. Tạo biểu mẫu
Bài 13. Khái niệm, vai trò của CSS
Bài 14. Định dạng văn bản bằng CSS
Bài 15. Tạo màu cho chữ và nền
Bài 16. Định dạng khung
Bài 17. Các mức ưu tiên của bộ chọn
Bài 18. Thực hành tổng hợp thiết kế trang web

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

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

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

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

Bài 25. Làm quen với Học máy
Bài 26. Làm quen với Khoa học dữ liệu
Bài 27. Máy tính và Khoa học dữ liệu
Bài 28. Thực hành trải nghiệm trích rút thông tin và tri thức
Bài 29. Mô phỏng trong giải quyết vấn đề
Bài 30. Ứng dụng mô phỏng trong giáo dục

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

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

Bài 22. Thực hành kết nối các thiết bị số

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

Bài 23. Chuẩn bị xây dựng trang web
Bài 24. Xây dựng phần đầu trang web
Bài 25. Xây dựng phần thân và chân trang web
Bài 26. Liên kết và thanh điều hướng
Bài 27. Biểu mẫu trên trang web
Bài 28. Thực hành tổng hợp

BÀI 14 - ĐỊNH DẠNG VĂN BẢN BẰNG CSS (KNTT - CS & ICT)

Bài 14 - Định dạng văn bản bằng CSS (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.79)	Hoạt động 2
Câu hỏi(t.81)	Luyện tập	Vận dụng

Khởi động (trang 76): Quan sát đoạn văn bản được thể hiện trên một trang web trong hình 14.1. Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản.

Gợi ý trả lời:

Đoạn văn bản trên sử dụng các phông chữ khác nhau.

1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS

Hoạt động 1 (trang 76): Các mẫu định dạng văn bản trong Hình 14.1 đều liên quan đến định dạng kí tự gồm phông chữ, màu chữ và kiểu chữ. Các thuộc tính của CSS liên quan bao gồm định dạng phông chữ (text font), màu chữ (text color) và dòng văn bản (text line). Quan sát và thảo luận để hiểu rõ hơn các mẫu định dạng CSS này.

Gợi ý trả lời:

- Định dạng phông chữ (text font):
+ font-family: Xác định loại phông chữ được sử dụng cho văn bản.
+ font-size: Đặt kích thước của phông chữ.
+ font-style: Xác định kiểu chữ (như font-style: italic).
+ font-weight: Xác định độ đậm của phông chữ (như font-weight: bold).
- Màu chữ (text color):
+ color: Đặt màu cho văn bản.
- Định dạng dòng văn bản (text line):
+ line-height: Xác định khoảng cách giữa các dòng văn bản.
+ text-align: Căn chỉnh văn bản theo chiều ngang (trái, phải, giữa, hoặc canh đều).
+ text-decoration: Xác định trang trí dòng văn bản như gạch chân, gạch ngang, hay gạch trên.
+ text-indent: Thụt lề đầu dòng.

CÂU HỎI

Câu hỏi 1 (trang 79): Giải thích các mẫu định dạng CSS sau:

Gợi ý trả lời:

- Tất cả các tiêu đề <h1> đều có chữ màu đỏ, các dòng căn giữa.
- Tất cả các đoạn văn bản <p> căn đều 2 bên.
Câu hỏi 2 (trang 79): Giả sử mẫu định dạng CSS có định dạng sau:

Hãy kiểm tra tác dụng của CSS này trên một tệp HTML bất kì và đưa ra nhận xét.

Gợi ý trả lời:

Tất cả văn bản phần thân (body) của các trang web đều có màu xanh dương (blue).
Ví dụ:

2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS

Hoạt động 2 (trang 79): Quan sát, tìm hiểu, trao đổi và trả lời các câu hỏi sau:
1. Các mẫu định dạng có tính kế thừa trong mô hình cây HTML không? Nếu một mẫu định dạng thiết lập ở một phần tử HTML thì định dạng đó có áp dụng cho tất cả các phần tử con, cháu của phần tử này không?
2. Nếu có nhiều mẫu CSS cùng được thiết lập cho một phần tử HTML thì trình duyệt sẽ áp dụng các mẫu định dạng CSS này theo thứ tự ưu tiên nào.

Gợi ý trả lời:

1. Các mẫu định dạng trong CSS có tính kế thừa trong mô hình cây HTML. Nếu định dạng CSS áp dụng cho một phần tử HTML nào đó, thì mặc định việc này được kế thừa cho tất cả các phần tử con, cháu.
2. Nếu trong định dạng CSS có nhiều định dạng khác nhau cùng áp dụng cho 1 phần tử thì trình duyệt sẽ chọn định dạng cuối cùng trong danh sách.

CÂU HỎI

Câu hỏi 1 (trang 81): Giả sử có mẫu định dạng sau.

Khi đó toàn bộ văn bản của trang web sẽ mặc định thể hiện với phông có chân, đúng hay sai?

Gợi ý trả lời:

Sai. Toàn bộ văn bản của trang web mặc định sẽ kế thừa từ <body>, và do đó sẽ có phông mặc định sans-serif là phông không chân.
Câu hỏi 2 (trang 81): Giả sử có mẫu định dạng như sau.

Mẫu nào sẽ được áp dụng cho h1, mẫu nào sẽ được áp dụng cho thẻ p.

Gợi ý trả lời:

- Mẫu định dạng:
h1 {text-align: center !important;} sẽ được áp dụng cho các phần tử <h1>.
- Với thẻ p, các mẫu định dạng:
body {font-family: sans-serif;} sẽ được áp dụng.

LUYỆN TẬP

Luyện tập 1 (trang 82): Mỗi phông chữ sau đây thuộc loại nào?

Gợi ý trả lời:

a) Phông có chân. Serif.
b) Phông khoảng cách đều nhau. Monospace.
c) Phông không chân. Sans-serif.
d) Phông kiểu chữ viết tay. Cursive.
e) Phông không chân. Sans-serif.
f) Phông trừu tượng. Fantasy.
g) Phông khoảng cách đều nhau. Monospace.
h) Phông khoảng cách đều nhau. Monospace.
Luyện tập 2 (trang 82): Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau:

Gợi ý trả lời:

Các thuộc tính CSS liên quan đến định dạng đoạn văn bản trên là:
- Dòng đầu tiên sử dụng các định dạng: font-size, color.
- Dòng thứ hai sử dụng các định dạng: text-align, color.
- Hai dòng cuối sử dụng các định dạng: font-family, font-style.

VẬN DỤNG

Vận dụng 1 (trang 82): Tìm hiểu thêm các thuộc tính phông chữ như font-variant và thuộc tính dòng văn bản như letter-space (khoảng cách giữa các kí tự), word-space (khoảng cách các từ) và text-shadow (chữ bóng).

Gợi ý trả lời:

- font-variant: Thuộc tính này được sử dụng để xác định kiểu chữ viết hoa của văn bản. Giá trị phổ biến của thuộc tính này bao gồm:
+ normal: Chữ in thường (mặc định).
+ small caps: Chữ viết hoa nhỏ.
- letter-spacing: Thuộc tính này xác định khoảng cách giữa các kí tự trong một đoạn văn bản. Giá trị của thuộc tính này có thể là số âm (kích thước kí tự thu nhỏ lại) hoặc số dương (kích thước kí tự mở rộng ra). Ví dụ: letter-spacing: 2px.
- word-spacing: Thuộc tính này xác định khoảng cách giữa các từ trong một đoạn văn bản. Giá trị của thuộc tính này cũng có thể là số âm hoặc số dương. Ví dụ: word-spacing: 5px.
- text-shadow: Thuộc tính này cho phép bạn thêm hiệu ứng bóng cho văn bản. Bạn có thể xác định màu sắc của bóng, độ mờ, và vị trí của bóng. Ví dụ: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5).
Vận dụng 2 (trang 82): Với bài đọc thêm Lịch sử CSS (Bài 13), em hãy thiết lập hai tệp CSS khác nhau để định dạng cho trang web mô tả bài đọc thêm này. Hai kiểu định dạng được thiết lập cần khác nhau về phông chữ, cỡ chữ và màu chữ.

Gợi ý trả lời:

- Kiểu 1:

- Kiểu 2:

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

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

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

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

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

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

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

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

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

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

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

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

Bài 22. Thực hành kết nối các thiết bị số

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

BÀI 13 - KHÁI NIỆM, VAI TRÒ CỦA CSS (KNTT - CS & ICT)

Bài 13 - Khái niệm, vai trò của CSS (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.72)	Hoạt động 2
Câu hỏi(t.74)	Hoạt động 3	Câu hỏi(t.75)	Luyện tập	Vận dụng

Khởi động (trang 71): Quan sát trang web trong hình 13.1 trả lời các câu hỏi sau:
• Mã nguồn trang web có những phần tử HTML nào?
• Định dạng các phần tử HTML này có đặc điểm chung nào?
• Có thể định dạng mẫu một lần để áp dụng mẫu đó cho nhiều phần tử HTML được không?

Gợi ý trả lời:

- Mã nguồn trang web có những phần tử: Thẻ tiêu đề <h1>, thẻ <b>, thẻ <p>.
- Định dạng các phần tử có đặc điểm chung: Cả tiêu đề và đoạn văn có thể được định dạng bằng CSS.
- Có thể định dạng mẫu một lần và áp dụng cho nhiều phần tử.

1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS

Hoạt động 1 (trang 71):
1. Hình 13.2 là mã nguồn của trang web trong Hình 13.1 em có nhận xét gì về cách thiết lập định dạng của trang này?

2. Em thấy gì từ đoạn mã nguồn trên?

Gợi ý trả lời:

1. Em có nhận xét về cách thiết lập định dạng của trang web này như sau:
Cách trình bày nội dung với mục tiêu làm cho thông tin dễ tiếp cận và dễ đọc cho người dùng. Đồng thời, cũng dễ tùy chỉnh và mở rộng định dạng trong tương lai.
2. Từ đoạn mã nguồn trên, em thấy:
Đoạn mã nguồn này cung cấp một ví dụ về cách thiết lập một trang web HTML cơ bản với nội dung và định dạng cụ thể. Nó thể hiện sự kết hợp giữa cấu trúc, định dạng, và nội dung, tất cả đều được thiết kế để tạo ra một trang web thông tin, dễ đọc và tương thích trên nhiều nền tảng.

CÂU HỎI

Câu hỏi 1 (trang 72): Ngôn ngữ CSS có phải là HTML không?

Gợi ý trả lời:

Ngôn ngữ CSS (Cascading Style Sheets) không phải là HTML (HyperText Markup Language).
Câu hỏi 2 (trang 72): Các mẫu định dạng CSS thường được mô tả như thế nào?
A. Trong một bảng.
B. Phải viết trên một hàng.
C. Có thể viết trên nhiều hàng.

Gợi ý trả lời:

Đáp án C. Có thể viết trên nhiều hàng.

2. CẤU TRÚC CSS

Hoạt động 2 (trang 72): Quan sát tìm hiểu và thảo luận về cấu trúc tổng quát của các mẫu định dạng CSS.

Gợi ý trả lời:

Cấu trúc tổng quát của mẫu định dạng CSS:

CÂU HỎI

Câu hỏi 1 (trang 74): Nếu muốn thiết lập CSS để áp dụng cho toàn bộ tệp HTML thì làm cách nào?

Gợi ý trả lời:

Nếu muốn thiết lập CSS để áp dụng cho toàn bộ tệp HTML thì ta có thể thiết lập CSS trong hoặc CSS ngoài.
Câu hỏi 2 (trang 74): Nếu muốn thiết lập CSS để có thể áp dụng đồng thời cho nhiều trang web thì làm cách nào?

Gợi ý trả lời:

Nếu muốn thiết lập CSS để có thể áp dụng đồng thời cho nhiều trang web thì có thể sử dụng CSS ngoài (external CSS).

3. VAI TRÒ, Ý NGHĨA CỦA CSS

Hoạt động 3 (trang 74): Tìm hiểu thảo luận và trả lời các câu hỏi sau:
1. Nếu không dùng CSS thì các định dạng của trang web phải thực hiện theo cách nào?
2. Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web?

Gợi ý trả lời:

1. Nếu không sử dụng CSS thì định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML.
2. Những ưu điểm trong việc định dạng trang web khi sử dụng CSS:
- Tách biệt nhập nội dung trang web và định dạng trang web.
- Chỉ thiết lập một lần, có thể dễ dàng áp dụng định dạng cho nhiều phần tử.
- Dễ dàng sửa chữa, đồng bộ.

CÂU HỎI

Câu hỏi 1 (trang 75): Nếu muốn tất cả các đoạn văn bản của trang web có màu xanh (blue) thì cần thiết lập định dạng CSS như thế nào?

Gợi ý trả lời:

Nếu muốn tất cả các đoạn văn bản của trang web có màu xanh (blue) thì cần thiết lập định dạng CSS như sau:

Câu hỏi 2 (trang 75): Giả sử có một định dạng CSS như sau:

Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.

Gợi ý trả lời:

Mẫu định dạng CSS này sẽ thiết lập định dạng cho tất cả các phần tử h1, h2, h3 có cùng định dạng: có khung viền với nét vẽ 2 pixel, đường liền và màu đỏ.

LUYỆN TẬP

Luyện tập 1 (trang 75): Khẳng định “Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML” là đúng hay sai?

Gợi ý trả lời:

Sai. Ngôn ngữ định dạng CSS (Cascading Style Sheets) không phải là ngôn ngữ HTML (HyperText Markup Language).
Luyện tập 2 (trang 75): Khẳng định “Có thể chỉ cần thay đổi thông tin của tệp CSS sẽ làm thay đổi định dạng của nhiều trang web thậm chí của cả một trang website” là đúng hay sai?.

Gợi ý trả lời:

Đúng. Việc chỉ cần thay đổi thông tin trong tệp CSS có thể làm thay đổi định dạng của nhiều trang web hoặc thậm chí của cả một trang web.

VẬN DỤNG

Vận dụng 1 (trang 75): Trong các phần mềm soạn thảo văn bản thường có chức năng tạo các mẫu định dạng Style Sheet dùng để tạo khuôn cho các đoạn (paragraph) của văn bản. Em hãy trình bày sự giống nhau và tương thích của Style Sheet trong các phần mềm soạn thảo văn bản với CSS của trang web.

Gợi ý trả lời:

Sự giống nhau và tương thích của Style Sheet trong các phần mềm soạn thảo văn bản với CSS của trang web:
- Cấu trúc và cú pháp:
+ Cả Style Sheet trong các phần mềm soạn thảo văn bản và CSS đều tuân theo một cấu trúc và cú pháp nhất định.
+ Các quy tắc định dạng được viết dưới dạng cặp thuộc tính-giá trị.
- Tính tái sử dụng: Cả hai đều hỗ trợ tính tái sử dụng.
- Khuôn mẫu định dạng: Cả Style Sheet và CSS đều cho phép bạn tạo ra các khuôn mẫu định dạng để áp dụng cho các phần tử văn bản.
- Kiểm soát phong cách và định dạng: Cả Style Sheet và CSS đều cho phép bạn kiểm soát phong cách và định dạng của các phần tử văn bản hoặc HTML.
Vận dụng 2 (trang 75): Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.

Gợi ý trả lời:

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

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

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

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

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

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

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

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

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

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

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

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

Bài 22. Thực hành kết nối các thiết bị số

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

BÀI 12 - TẠO BIỂU MẪU (KNTT - CS & ICT)

Bài 12 - Tạo biểu mẫu (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.69)	Luyện tập	Vận dụng

Khởi động (trang 67): Để tham gia hội chợ ẩm thực ở trường, lớp em đã tạo một website để quảng cáo sản phẩm. Em hãy thảo luận và chọn loại phần tử HTML cần sử dụng để tạo đơn hàng trên website.

Gợi ý trả lời:

Phần tử HTML cần sử dụng để tạo đơn hàng trên website là Form (Biểu mẫu)

1. BIỂU MẪU WEB

Hoạt động 1 (trang 67): Mô tả các bước mà em đã thực hiện khi đăng ký tài khoản trên một trang web nào đó.

Gợi ý trả lời:

Các bước thực hiện đăng ký tài khoản trên một trang web:
- Truy cập trang web
- Tìm nút đăng ký
- Điền thông tin đăng ký
- Đọc và đồng ý với các điều khoản dịch vụ
- Hoàn tất đăng ký
- Xác nhận tài khoản
- Đăng nhập

CÂU HỎI

Câu hỏi 1 (trang 69): Điểm khác biệt giữa radio, checkbox và select là gì?

Gợi ý trả lời:

- Radio và checkbox là hai type trong phần tử input còn select là phần tử select.
- Radio và select chỉ chọn một giá trị trong các giá trị sẵn có nhưng khác nhau về cách biểu diễn (không gian sử dụng trong mẫu biểu). Thông thường:
+ Số lựa chọn không quá 7: người thiết kế thường dùng radio.
+ Số lựa chọn lớn hơn 7: thường dùng select.
- Select chỉ tập trung vào lựa chọn được chọn, radio phân bố sự tập trung đều nhau.
- Checkbox dùng để chọn nhiều giá trị, mỗi giá trị dưới dạng có/không.
Câu hỏi 2 (trang 69): Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu” vào biểu mẫu.

Gợi ý trả lời:

2. THỰC HÀNH TẠO BIỂU MẪU

Luyện tập (trang 70): Lần lượt tạo các loại phần tử form và các phần tử input với những loại dữ liệu khác nhau và liệt kê ra ba ví dụ có thể sử dụng của từng loại.

Gợi ý trả lời:

1. Phần tử Form:
- Form cơ bản:
Ví dụ: Một biểu mẫu đăng ký tài khoản.

- Form có phần tử select:
Ví dụ: Form chọn quốc gia.

- Form với textarea:
Ví dụ: Một ô nhập văn bản lớn cho người dùng nhập ý kiến hoặc phản hồi.

2. Phần tử Input:
- Input kiểu text:
Ví dụ: Ô nhập tên người dùng.

- Input kiểu email:
Ví dụ: Ô nhập địa chỉ email.

- Input kiểu date:
Ví dụ: Ô chọn ngày sinh.

VẬN DỤNG

Vận dụng 1 (trang 70): Tạo một biểu mẫu đăng kí thành viên câu lạc bộ.

Gợi ý trả lời:

Vận dụng 2 (trang 70): Sửa lại mã nguồn của trang web đã viết trong Nhiệm vụ 2, Bài 11 để thêm một liên kết cho cụm từ Đăng kí. Khi nháy chuột vào liên kết, trang web đã viết ở câu 1 sẽ được hiển thị trong iframe.

Gợi ý trả lời:

---The end!---

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

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

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

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

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

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

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

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

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

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

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

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

Bài 22. Thực hành kết nối các thiết bị số

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

BÀI 11 - CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB (KNTT - CS & ICT)

Bài 11 - Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web (kntt)

Nháy vào các mục bên dưới để xem nhanh hơn
Khởi động	Hoạt động 1	Câu hỏi(t.63)	Hoạt động 2
Câu hỏi(t.64)	Hoạt động 3	Câu hỏi(t.65)	Luyện tập	Vận dụng

Khởi động (trang 62): Có những điểm gì khiến em thấy hứng thú hơn khi xem các trang web so với đọc sách.

Gợi ý trả lời:

Trên trang web có các đối tượng đa phương tiện (âm thanh, hình ảnh, video), giúp người cảm thấy hứng thú hơn so với đọc sách.

1. CHÈN TỆP ẢNH VÀO TRANG WEB

Hoạt động 1 (trang 62): Hãy kể tên các định dạng tệp ảnh mà em biết. Phân loại chúng vào nhóm đồ họa vectơ hoặc đồ họa điểm ảnh.

Gợi ý trả lời:

* Các định dạng tệp ảnh mà em biết: PNG, JPG, JPEG, GIF, SVG,…
* Nhóm đồ họa điểm ảnh: PNG, JPG, JPEG, GIF
* Nhóm đồ họa vectơ: SVG

CÂU HỎI

Câu hỏi 1 (trang 63): Thẻ <img> chỉ dùng khi chèn ảnh jpg vào trang web có đúng không?

Gợi ý trả lời:

Không đúng. Thẻ <img> không chỉ dùng để chèn ảnh JPG vào trang web mà còn có thể được sử dụng để chèn các loại tệp ảnh khác như PNG, GIF, BMP, SVG và nhiều định dạng hình ảnh khác nữa.
Câu hỏi 2 (trang 63): Hãy nêu một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh.

Gợi ý trả lời:

Một số trường hợp có thể xảy ra lỗi khi hiển thị ảnh trên trang web:
- Trình duyệt không hỗ trợ loại tệp tin ảnh được dùng
- Ảnh bị lỗi (hỏng)
- Đường dẫn không đúng.

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

Hoạt động 2 (trang 64): Quan sát đoạn mã sau và xác định tên đoạn mã này có chức năng gì?

Gợi ý trả lời:

Chức năng của đoạn mã này là chèn video vào trang web.
- src="video/war_is_over.mp4": Đây là thuộc tính src chỉ địa chỉ của tệp video cần phát lại. Trong trường hợp này, tệp video có tên là "war_is_over.mp4" và được lưu trong thư mục "videos".
- width="300" và height="250": Đây là thuộc tính chỉ kích thước của video khi hiển thị trên trình duyệt. Chiều rộng là 300 pixels và chiều cao là 250 pixels.
- autoplay: Đây là một thuộc tính tùy chọn cho phép video tự động phát khi trang web được tải lên.
Câu hỏi (trang 64): Thuộc tính scr có tác dụng gì đối với thẻ <audio>?

Gợi ý trả lời:

Thuộc tính src trong thẻ <audio> được sử dụng để chỉ địa chỉ của tệp âm thanh cần phát lại. Thuộc tính này xác định nguồn dữ liệu của âm thanh, tức là đường dẫn đến tệp âm thanh.

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

Hoạt động 3 (trang 65): Trong các bài đăng có đính kèm video, một số trang web sẽ hiển thị nội dung video trong một khung và cho phép tương tác bên trong khung đó. Em có nhận xét gì về giao diện của cả trang khi thực hiện các thao tác bên trong khung này?

Gợi ý trả lời:

Khi thực hiện các thao tác bên trong một khung video trên một trang web, em có một số nhận xét về giao diện của cả trang như sau:
- Giao diện của trang web sẽ thay đổi để phù hợp với trải nghiệm người dùng.
- Giao diện của trang web cần đảm bảo sự cân bằng giữa tính tiện dụng, tính thẩm mỹ và khả năng truy cập.
Câu hỏi (trang 65): Viết các câu lệnh để tạo hai khung nội tuyến có kích thước bằng nhau, hiển thị song song (theo phương ngang) trên trang web.

Gợi ý trả lời:

Để hai khung nội tuyến hiển thị song song theo phương ngang, chiều rộng của mỗi khung cần không quá 50% chiều rộng màn hình.

LUYỆN TẬP

Luyện tập 1 (trang 66): Cho ảnh có kích thước gốc là 720 x 450 Pixel chèn ảnh vào trang web bằng câu lệnh:

Hỏi ảnh trong trang web có kích thước bao nhiêu?

Gợi ý trả lời:

Trong trường hợp này, ảnh được chèn vào trang web với chiều rộng được đặt là 600 pixel thông qua thuộc tính width. Tuy nhiên, không có thuộc tính height được cung cấp, do đó chiều cao của ảnh sẽ được tự động tính toán để duy trì tỷ lệ khung hình ban đầu. (Kích thước tương đương 600 x 373).
Luyện tập 2 (trang 66): Chèn thêm một số ảnh của mình vào trang web giới thiệu bản thân (em đã tạo ở phần Luyện tập, Bài 10).

Gợi ý trả lời: