Giáo án điện tử Tin học ứng dụng 12 chân trời Bài F13: Dự án tạo trang web (tiếp theo)

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

BÀI F13: DỰ ÁN TẠO TRANG WEB (TIẾP THEO)

- Ý nghĩa của thuộc tính display và box-sizing là gì?

 - Em hãy khai báo vùng chọn dùng để định kiểu cho trạng thái focus của phần tử textarea.

- Em hãy thay đổi lần lượt các giá trị của thuộc tính list-style-position, đồng thời thay đổi độ rộng của trang web để xem kết quả hiển thị.

 - Nêu các thuộc tính CSS chính để định kiểu cho hộp văn bản (input type="text"), bao gồm kích thước, màu sắc, đường viền, phông chữ và khoảng cách.

- Em hãy trình bày lợi ích khi định kiểu cho biểu mẫu.

- Nêu các thuộc tính CSS chính để định kiểu cho hộp văn bản (input type="text"), bao gồm kích thước, màu sắc, đường viền, phông chữ và khoảng cách.

 - Trong khai báo vùng chọn của hộp kiểm, em hãy thay đổi thuộc tính accent-color thành background-color và nêu nhận xét.

 - Nêu ví dụ về cách sử dụng các thuộc tính CSS khác nhau để tạo ra các kiểu nút bấm độc đáo và bắt mắt.

- Làm thế nào để tạo nút bấm tròn hoặc nút bấm có các góc bo tròn bằng CSS?

1. Vận dụng

Câu 1: Em hãy liệt kê một số trạng thái của các thành phần trong biểu mẫu và nêu cách khai báo vùng chọn để định kiểu cho chúng.

Câu 2: Em hãy định kiểu cho các thông tin cá nhân bằng phông chữ Georgia, họ tên có kích thước 24 pt, các thông tin còn lại có kích thước 20 pt.

Câu 3: Chỉnh sửa trang chủ của kỉ yếu (tệp index.html và tệp layout.css) sao cho bố cục gồm 3 vùng:

Vùng 1: Dùng để chứa thanh điều hướng nằm ngang (đã tạo ở bài học trước).

Vùng 2: Dùng để hiển thị nội dung, cụ thể trang chủ có nội dung giới thiệu về lớp.

Vùng 3: Dùng để làm vùng chân trang.

Hình 11 là một ví dụ kết quả sau khi hoàn thành chỉnh sửa.

Câu 4: Tạo và định kiểu cho biểu mẫu đăng nhập gồm các thành phần sau:

Hai văn bản để nhập Tên tài khoản và Mật khẩu;

Một hộp kiểm Ghi nhớ thông tin đăng nhập;

Một nút nhấn Đăng nhập;

Một đường liên kết Quên mật khẩu.

Câu 5: Tạo một tệp HTML mới, trong đó bao gồm một thanh trình đơn mới theo các yêu cầu sau:

a) Thanh trình đơn gồm các mục sau: Trang chủ, Học tập, Phong trào và Liên lạc.

b) Mỗi mục là một siêu liên kết đến một tệp HTML tương ứng.

c) Thanh trình đơn nằm bên trái trang web, theo phương dọc.

d) Định kiểu màu sắc tuỳ ý khi người dùng tương tác với thanh trình đơn.