BÀI F7 - GIỚI THIỆU CSS (CTST - CS & ICT)

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

Khởi động (trang 134 sách ict, trang 101 sách cs)
 Trong trang web portfolio.html đã tạo ở những bài học trước, em hãy trình bày cách bổ sung mã lệnh để các đề mục đánh dấu bằng thẻ <h1> được tô màu xanh.
 Giả sử em muốn thay đổi màu sắc khác và đổ bóng để các đề mục nổi bật hơn. Có thuộc tính nào đáp ứng yêu cầu này không?
Gợi ý trả lời
 Cách bổ sung mã CSS để đề mục <h1> có màu xanh trong portfolio.html:
  - Dùng thuộc tính style trực tiếp trong thẻ HTML:
   <h1 style="color: green;">Giới thiệu bản thân</h1>
  - Hoặc dùng trong phần <style>:
 Nếu muốn thay màu và đổ bóng cho đề mục thì sử dụng thuộc tính text-shadow. Ví dụ:
Làm (trang 135 sách ict, trang 102 sách cs)
 Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.
Gợi ý trả lời
 Một số lợi ích của CSS trong việc xây dựng các trang web:
  - Giúp tách biệt nội dung và định dạng ⇒ dễ bảo trì.
  - Tăng tính thống nhất và đồng bộ giữa các trang.
  - Tiết kiệm thời gian, dễ tái sử dụng mã CSS.
  - Giúp trang web đẹp mắt và chuyên nghiệp hơn.
  - Hỗ trợ thiết kế giao diện đáp ứng nhiều thiết bị.
Làm (trang 136 sách ict, trang 103 sách cs)
1. Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixels. Gợi ý: Sử dụng thuộc tính font-size với giá trị là 60px.
2. Em hãy thay đổi màu cho riêng để mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.
Gợi ý trả lời
1. Định kiểu <h1> có kích thước 60px:
2. Đổi màu phần “Giới thiệu chung”:
  - Gán lớp (class) cho phần đó:
   <h2 class="gioithieu">Giới thiệu chung</h2>
  - Trong CSS viết mã lệnh:
   .gioithieu {
    color: darkblue;
   }
Luyện tập (trang 137 sách ict, trang 104 sách cs)
1. Theo em, HTML và CSS khác nhau ở điểm nào?
2. Em hãy mô tả các cách chèn mã lệnh CSS vào trang web.
3. Giả sử trong tệp .css, mã lệnh được viết là h1 { color: red; }, còn trong tệp .html, thẻ <h1> được viết là <h1 style="color: blue">. Khi hiển thị, đề mục h1 này sẽ có màu gì?
Gợi ý trả lời
1. Điểm khác nhau giữa HTML và CSS:
  - HTML (HyperText Markup Language): dùng để xây dựng cấu trúc nội dung của trang web. Ví dụ như tạo tiêu đề, đoạn văn, bảng, hình ảnh, liên kết, ...
  - CSS (Cascading Style Sheets): dùng để định dạng giao diện và trình bày của trang web như màu sắc, kích thước, kiểu chữ, vị trí, khoảng cách, v.v.
2. Cách chèn mã lệnh CSS vào trang web:
 Có 3 cách chèn CSS vào trang web:
  - Internal CSS (CSS nội bộ): viết trong thẻ <style< đặt trong phần <head< của tài liệu HTML.
  - External CSS (CSS ngoài): viết trong một file .css riêng và liên kết vào HTML bằng thẻ <link>.
  - Inline CSS (CSS nội tuyến): viết trực tiếp trong thẻ HTML bằng thuộc tính style.
   <h1 style="color: blue;">Tiêu đề</h1>
3. Khi hiển thị, đề mục h1 sẽ có màu xanh (blue). Vì CSS nội dòng (inline) có độ ưu tiên cao nhất.
Vận dụng (trang 140 sách ict, trang 107 sách cs)
 Em hãy thực hiện các yêu cầu dưới đây.
1. Chèn mã lệnh CSS để định kiểu cho tên của mình trong trang web portfolio.html với màu sắc, kích thước, hiệu ứng độ bóng và khoảng cách của các kí tự tuỳ ý sao cho nổi bật và đẹp mắt.
2. Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở THỰC HÀNH đồng thời thay đổi màu chữ thành màu trắng.
3. Chèn mã lệnh CSS để định kiểu cho các mục <li> của các danh sách <ul> sao cho: Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.
Gợi ý: Sử dụng thuộc tính list-style-type với giá trị circle để thay đổi biểu tượng đánh dấu đầu dòng; thuộc tính background-color và border lần lượt cho màu nền và viển của mỗi mục; thuộc tính border-radius với giá trị 10px để bo tròn 4 góc của khung. Ngoài ra, có thể thêm thuộc tính padding với giá trị 10px để tạo khoảng trống bao quanh phần văn bản nằm trong khung.
Hình 4 là một ví dụ kết quả sau khi định kiểu bằng mã lệnh CSS.
Gợi ý trả lời
1. Chèn CSS để định kiểu cho tên của mình:
2. Tô màu hàng tiêu đề bảng:
3. Định dạng <li> trong danh sách <ul>:

---The end!---

CÙNG CHUYÊN MỤC:
CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC
CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET
CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ
CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC
CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

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

BÀI F5 - TẠO BIỂU MẪU TRONG TRANG WEB (CTST - CS & ICT)

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

Khởi động (trang 127 sách ict, trang 94 sách cs)
 Khi truy xuất trang web, người dùng không chỉ xem nội dung mà còn muốn tương tác với trang web, chẳng hạn nhập vào nội dung mới. Em hãy nêu một số tình huống mà em thường tương tác với trang web và mô tả cụ thể các thao tác này.
Gợi ý trả lời
 Một số tình huống mà em thường tương tác với trang web:
  - Đăng nhập vào tài khoản học tập: nhập tên đăng nhập, mật khẩu và nhấn nút “Đăng nhập”.
  - Gửi ý kiến phản hồi: nhập họ tên, email, nội dung phản hồi, rồi nhấn “Gửi”.
  - Thực hiện khảo sát: chọn đáp án trắc nghiệm, điền nhận xét và nhấn “Gửi”.
Làm (trang 127 sách ict, trang 94 sách cs)
 Em hãy kể tên một số biểu mẫu phổ biến trên các trang web.
Gợi ý trả lời
 Một số biểu mẫu phổ biến trên các trang web:
  - Biểu mẫu đăng nhập
  - Biểu mẫu đăng ký tài khoản
  - Biểu mẫu liên hệ/ý kiến phản hồi
  - Biểu mẫu khảo sát, kiểm tra, đăng ký thông tin
Làm (trang 130 sách ict, trang 97 sách cs)
 Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau:
  a) Hộp văn bản để người dùng nhập địa chỉ email.
  b) Hộp kiểm để người dùng chọn thêm một câu lạc bộ.
  c) Nút nhấn để xoá dữ liệu hiện có trên biểu mẫu.
Gợi ý trả lời
 a) Hộp văn bản nhập email:
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
 b) Hộp kiểm chọn thêm một câu lạc bộ:
  <label><input type="checkbox" name="clb" value="cntt"> Câu lạc bộ Tin học</label>
 c) Nút nhấn xoá dữ liệu biểu mẫu:
  <input type="reset" value="Xoá dữ liệu">
Luyện tập (trang 130 sách ict, trang 97 sách cs)
1. Em hãy nêu khái niệm biểu mẫu web và một số ví dụ biểu mẫu thông dụng.
2. Thảo luận với bạn và kể tên một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó.
3. Theo em, tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input> là gì?
Gợi ý trả lời
1. Khái niệm biểu mẫu web và ví dụ:
  - Biểu mẫu web là vùng trên trang web cho phép người dùng nhập dữ liệu hoặc tương tác với trang web.
  - Ví dụ: biểu mẫu đăng ký, biểu mẫu khảo sát, biểu mẫu phản hồi...
2. Một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng:
3. Tên, giá trị và ý nghĩa của các thuộc tính trong thẻ <input<:
Vận dụng (trang 131 sách ict, trang 98 sách cs)
 Em hãy thực hiện các yêu cầu dưới đây.
1. Bổ sung mã lệnh HTML vào tệp login.html để thêm các thành phần nhập liệu sau:
  a) Hộp kiểm có nhãn Ghi nhớ cho lần đăng nhập sau.
  b) Đường liên kết Quên mật khẩu? để điều hướng đến trang web recovery.html.
  c) Thay đổi kiểu chữ và màu sắc các thành phần của biểu mẫu trong tệp login.html vừa tạo.
2. Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:
  a) Trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.
  b) Trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.
  c) Tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.
Gợi ý:
  Sử dụng thẻ <input> và chỉ định giá trị number cho thuộc tính type để tạo hộp văn bản nhập số thứ tự. Để chuyển đến trang web cauhoi.html, em chèn thêm thuộc tính action vào thẻ <form>: <form action="cauhoi.html">.
  Sử dụng thẻ <input> và chỉ định giá trị file cho thuộc tính type để tạo nút nhấn chọn tệp trên máy tính.
  Sử dụng thẻ <select> và <option> để tạo hộp danh sách chọn lớp.
Gợi ý trả lời
1. Bổ sung mã lệnh HTML vào tệp login.html:
 a) Hộp kiểm “Ghi nhớ”
 <label><input type="checkbox" name="remember"> Ghi nhớ cho lần đăng nhập sau</label>
 b) Đường liên kết "Quên mật khẩu?"
 <a href="recovery.html">Quên mật khẩu?</a>
 c) Đổi kiểu chữ và màu sắc bằng CSS:
2. Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra:
 a) thongtin.html (3 hộp nhập và nút chuyển trang):
 b) cauhoi.html (3 câu trắc nghiệm + 1 tự luận + nút chọn tệp):
Đoạn 1

---The end!---

CÙNG CHUYÊN MỤC:
CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC
CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET
CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ
CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC
CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

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

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB
(CTST - CS & ICT)

BÀI F4 - THÊM DỮ LIỆU ĐA PHƯƠNG TIỆN VÀO TRANG WEB (CTST - CS & ICT)
 Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

Khởi động (trang 122 sách ict, trang 89 sách cs)
 Theo em, một trang web có nội dung chỉ thuần văn bản sẽ có những hạn chế gì so với trang web có thêm hình ảnh và âm thanh?
Gợi ý trả lời
 Theo em, một trang web có nội dung chỉ thuần văn bản sẽ:
  - Gây nhàm chán, kém sinh động.
  - Khó thu hút người xem, nhất là với nội dung giải trí, giáo dục, quảng bá.
  - Không truyền tải đầy đủ cảm xúc hoặc thông tin như hình ảnh và âm thanh mang lại.
Làm (trang 123 sách ict, trang 90 sách cs)
 Em hãy bổ sung thuộc tính title cho thẻ <img> trong mã lệnh HTML ở Ví dụ 1.
Gợi ý trả lời
Giải thích: title="Chân dung của nhân vật". Khi người dùng di chuột lên ảnh, dòng chữ này sẽ hiện ra như một chú thích (tooltip).
Làm (trang 124 sách ict, trang 91 sách cs)
 Em hãy bổ sung thuộc tỉnh cho đoạn mã HTML ở Ví dụ 2 để kích thước hiển thị của video là 800 x 600 pixels và video tự động phát không có âm thanh.
Gợi ý trả lời
 Giải thích các thuộc tính được thêm:
  width="800" và height="600": đặt kích thước video là 800 x 600 pixels.
  autoplay: video sẽ tự động phát khi trang web được tải.
  muted: tắt tiếng video (bắt buộc khi dùng autoplay trong nhiều trình duyệt).
  controls: hiển thị các nút điều khiển video như play, pause,...
Luyện tập (trang 124 sách ict, trang 91 sách cs)
1. Chức năng các thuộc tính của thẻ <img> khi thêm tệp ảnh vào trang web là gì?
2. Em hãy liệt kê và nêu chức năng các thuộc tỉnh của thẻ <audio> khi thêm tệp âm thanh vào trang web.
3. Giả sử tệp portfolio.html nằm cùng nơi với thư mục Asset. Thư mục Sound, là thư mục con của thư mục Asset, có chứa tệp bai_hat.mp3. Theo em, đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html là gì?
Gợi ý trả lời
1. Chức năng các thuộc tính của thẻ <img> khi thêm tệp ảnh vào trang web:
2. Chức năng các thuộc tỉnh của thẻ <audio> khi thêm tệp âm thanh vào trang web:
3. Theo em, đường dẫn cho thuộc tính src để thêm tệp bai_hat.mp3 này vào tệp portfolio.html là: src="Asset/Sound/bai_hat.mp3"
Vận dụng (trang 125+126 sách ict, trang 92+93 sách cs)
 Em hãy bổ sung các nội dung sau vào trang web portfolio.html:
1. Một video clip và một bài hát mà em yêu thích với thẻ <video>, <audio>, <h1>, <h2> và các thẻ khác đã học.
2. Thêm ảnh vào mục Nội dung yêu thích sao cho mỗi hàng của bảng hiển thị ba ảnh, sử dụng thẻ <img>, các thẻ tạo bảng và các thẻ khác đã học.
Hình 4 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
3. Thêm ảnh đại diện vào bên phải của mục Giới thiệu chung để được kết quả như Hình 5.
Gợi ý trả lời
1. Thêm video clip và bài hát yêu thích vào portfolio.html:
 Ví dụ:
2. Thêm ảnh vào mục “Nội dung yêu thích” với bố cục mỗi hàng 3 ảnh:
 Giải thích:
  - Sử dụng thẻ <table> để tạo bảng.
  - Mỗi dòng dùng <tr>, mỗi cột chứa ảnh dùng <td>.
  - Mỗi ảnh được chèn bằng thẻ <img>, có đặt kích thước (width, height) và văn bản thay thế (alt).
  - Ảnh được lưu trong thư mục Images, em cần thay đổi tên file ảnh (hinh1.jpg, hinh2.jpg, ...) cho đúng với ảnh thực tế của mình.
3. Thêm ảnh đại diện vào bên phải mục “Giới thiệu chung”:
 Giải thích:
  - Dùng <table> để chia layout thành 2 phần ngang hàng.
  - Ảnh đại diện nằm bên phải trong cột thứ 2.
  - Có thể thay đổi width, height, hoặc căn giữa bằng CSS nếu muốn đẹp hơn.

---The end!---

CÙNG CHUYÊN MỤC:
CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC
CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET
CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ
CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC
CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

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

BÀI F3 - TẠO BẢNG VÀ KHUNG TRONG TRANG WEB VỚI HTML
(CTST - CS & ICT)

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

Khởi động (trang 114 sách ict, trang 81 sách cs)
 Nêu ba nội dung khi trình bày ở dạng bảng sẽ phù hợp và trực quan hơn so với cách trình bày liệt kê theo đoạn văn.
Gợi ý trả lời
 Ba nội dung nên trình bày dưới dạng bảng:
  - Thời khoá biểu hoặc lịch làm việc.
  - So sánh đặc điểm giữa các đối tượng.
  - Danh sách có nhiều cột như: họ tên, điểm số, ngày tháng.
Làm (trang 116 sách ict, trang 83 sách cs)
 Em hãy bổ sung thêm cột nội dung công việc của các ngày còn lại cho Lịch sinh hoạt hằng tuần ở Ví dụ 1.
Gợi ý trả lời
 Giả sử bảng ban đầu chỉ có 2 ngày (thứ Hai, thứ Ba), em cần bổ sung thêm cột cho các ngày còn lại:
Làm (trang 117 sách ict, trang 84 sách cs)
 Em hãy tạo thêm một khung để nhúng trang web www.learnpython.org vào trong mục Những trang web thường ghé thăm.
Gợi ý trả lời
Luyện tập (trang 117 sách ict, trang 84 sách cs)
1. Chức năng của các thẻ và thuộc tính dùng để tạo bảng trong trang web là gì?
2. Em hãy nêu chức năng của thẻ <iframe> và một số thuộc tính dùng để nhúng trang web khác vào trang web hiện tại.
Gợi ý trả lời
1. Chức năng của các thẻ tạo bảng:
2. Chức năng của thẻ <iframe> và thuộc tính liên quan:
Vận dụng (trang 120+121 sách ict, trang 87+88 sách cs)
 Em hãy thực hiện các yêu cầu dưới đây.
1. Bổ sung những nội dung sau vào trang web portfolio.html:
  a) Mục Lịch sinh hoạt hằng tuần với các thẻ tạo bảng đã học.
  b) Mục Những trang web thường ghé thăm với các thẻ tạo khung và danh sách đã học. Hình 6 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.
2. Trang trí thời khoá biểu trong Nhiệm vụ 1 ở THỰC HÀNH bằng cách tô màu các ô và văn bản.
3. Bổ sung trang thông tin cho các thành viên còn lại của lớp trong Nhiệm vụ 2 ở THỰC HÀNH.
4. Định dạng lại màu sắc và kích thước cho các trang web trong Nhiệm vụ 2 ở THỰC HÀNH.
Gợi ý trả lời
1. Bổ sung những nội dung vào trang web portfolio.html:
  a) Mục Lịch sinh hoạt hằng tuần với các thẻ tạo bảng đã học.
  b) Mục Những trang web thường ghé thăm:
2. Trang trí thời khoá biểu bằng màu sắc:
3. Bổ sung trang thông tin cho các thành viên còn lại:
 Mỗi thành viên tạo 1 file HTML, ví dụ: nguyenvana.html
 Liên kết trong thanhvienlop.html:
4. Định dạng lại màu sắc và kích thước cho các trang web:

---The end!---

CÙNG CHUYÊN MỤC:
CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC
CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET
CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ
CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC
CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:
Kho học liệu tin học 10
Kho học liệu tin học 11
Kho học liệu tin học 12

Tổng số lượt xem

Chăm chỉ chiến thắng tài năng
khi tài năng không chịu chăm chỉ.

- Tim Notke -

Bản quyền
Liên hệ
Chat Zalo
Chat Facebook