Em hãy quan sát và nhận xét một số biểu mẫu khảo sát trên trang web mà trường hay lớp em từng sử dụng.

Em hãy thực hiện các yêu cầu dưới đây.

1. 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.

2. Chỉnh sửa trang web thanhvienlop.html (đã thực hiện ở những bài học trước) sao cho bố cục cũng gồm 3 phần như trang chủ của trang web index.html. Trong đó, đặt bảng thành viên lớp vào vùng 2 và sử dụng CSS để định kiểu cho bảng này.

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

Tạo bố cục minh hoạ như Hình 10 bằng cách sử dụng các thẻ <div>.

Trong tập portfolio.html, định kiểu CSS cho bảng Lịch sinh hoạt hằng tuổi thêm đẹp mắt và trực quan (Hình 9).

Hình 9. Giao diện của bảng Lịch sinh hoạt hằng tuần sau khi định kiểu CSS

Ưu điểm của việc tạo bố cục trang web bằng các thẻ <div> là gì?

Em hãy trình bày những thuộc tính và giá trị dùng để định kiểu cho thẻ <div> giúp tạo bố cục trang web.

Em hãy trình bày những khai báo vùng chọn và thuộc tính dùng để định kiểu đường viền và màu nền cho bảng.

Viết mã lệnh CSS để tạo ra 3 vùng A, B, C lần lượt năm kề nhau theo phương ngang.

Viết mã lệnh CSS để định kiểu nền màu vàng nhạt cho các hàng lẻ trong bảng.

Theo em nên dùng thẻ gì để trình bày một bảng danh sách tên học sinh trên trang web?

Em hãy thực hiện các yêu cầu dưới đây.

1. Trong tệp portfolio.html, định kiểu riêng cho các mục trong danh sách Các hoạt động đã tham gia như sau:

a) Đánh số đầu dòng cho mỗi mục.

b) Mỗi mục được đóng khung và màu sắc tuỳ ý.

2. 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.

Gợi ý: Có thể sử dụng các phần tử như bảng hoặc khung.

Trong trang web kỉ yếu lớp, tạo thanh trình đơn ngang nằm ở đầu trang chủ của trang index.html như Hình 10 và Hình 11.

Em hãy cho biết cách định kiểu cho các mục trong danh sách trong CSS.

Thảo luận với bạn và cho biết các trạng thái của siêu liên kết khi có sự tương tác của người dùng. Trình bày cách định kiểu CSS ứng với mỗi trạng thái đó.

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ị.

Viết mã lệnh CSS để khi người dùng di chuyển con trỏ chuột đến siêu liên kết sẽ phóng to cỡ chữ và có màu nền bao quanh (màu sắc tuỳ ý).

Điều gì sẽ sảy ra khi nháy chọn siêu liên kết và danh sách

Em hãy thực hiện các yêu cầu dưới đây.

1. Định kiểu màu sắc tuỳ ý cho phần nền và phần văn bản của các danh sách Sở thích và Các hoạt động đã tham gia bằng vùng chọn tên lớp.

2. Thay đổi định kiểu cho đề mục Lịch sinh hoạt hằng tuần với các thuộc tính tuỳ ý bằng vùng chọn id.

3. Định kiểu với màu sắc tuỳ ý để làm nổi bật một số ô trong bảng Lịch sinh hoạt hằng tuần bằng vùng chọn id hoặc tên lớp.

Sử dụng vùng chọn là tên lớp để định kiểu cho các hình ảnh sao cho các ảnh được căn giữa theo độ rộng của trang web, nằm trong nền màu tối bo tròn 4 góc và chỉnh sửa kích thước hiển thị phù hợp (Hình 5).

Sử dụng tệp portfolio.html chưa được định kiểu bằng CSS.

Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ

Yêu cầu: Sử dụng vùng chọn để định kiểu cho các đề mục hi của tệp portfolio.html (Hình 4) theo các yêu cầu sau:

Phần văn bản có màu trắng, cỡ chữ 20, phông chữ Arial.

Phần nền của để mục h1 màu xanh, có độ rộng chiếm một nửa độ rộng của trang web, bo tròn góc trên và góc dưới ở bên phải.

Phần văn bản được căn phải đối với phần nền, có vùng đệm là 10 pixels.

Theo em, có những kĩ thuật nào để khai báo vùng chọn CSS cơ bản?

Em hãy cho biết khái niệm vùng chọn CSS.

Theo em, điểm khác biệt giữa khai báo vùng chọn là tên thẻ và khai báo vùng chọn là tên lớp là gì?

Em hãy trình bày lợi ích khi định kiểu CSS bằng cách khai báo vùng chọn.

Theo em, khi định kiểu cho các đề mục h1, việc viết mã lệnh CSS cho thuộc tính style trong từng thẻ <h1> gặp những hạn chế nào?

Em hãy tìm hiểu thêm những thuộc tính và giá trị khác có thể dùng để định kiểu cho những thành phần web trong bài học.

Đối với mỗi ảnh trong mục Nội dung yêu thích, hãy định kiểu bo tròn 4 góc của ảnh để được kết quả như Hình 10

Thực hiện tăng hoặc giảm tuỳ ý độ trong suốt của ảnh nền ở mục Giới thiệu chung để được kết quả như Hình 9.

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.

Viết mã lệnh CSS để định kiểu khung và viên cho riêng từng mục của phần Sở thích (Hình 8), trong đó mỗi khung đều thoả các yêu cầu sau:

Đường viễn dày 1 pixel, màu xám và nền màu trắng.

Chiều cao là 30 pixels và độ rộng bằng một nửa độ Sở thích

rộng của trang web.

Bo tròn 4 góc.

Lê là 20 pixels và vùng đệm cho phần văn bản bên trong là 20 pixels.

Bài thực hành này áp dụng cho trang web portfolio.html.

Nhiệm vụ I. Định kiểu CSS cho văn bản và nền

Yêu cầu: Viết mã lệnh CSS để định kiểu cho phần Giới thiệu chung (Hình 7) theo các yêu cầu sau:

Các thông tin cá nhân được căn phải so với trang web.

Dùng một hình ảnh để làm nền cho phần thông tin cá nhân này. Hình ảnh đó phải phủ hết chiều ngang của trang web.

Theo em có những cách mô tả màu sắc nào trong mã lệnh CSS?

Thảo luận với bạn và nêu một số đơn vị có thể được dùng để định kiểu kích thước cho những thành phần trong trang web.

Em hãy kể tên một số thuộc tính dùng để định kiểu phông chữ, văn bản, nền, đường viền, lề và vùng đệm.

Theo em, thay đổi các giá trị nào của vùng đệm thì phần văn bản nằm sát cạnh dưới của đường viền?

Em hãy định kiểu độ trong suốt của nền là 0.3 và quan sát kết quả

Viết mã lệnh CSS để định kiểu cho các hoạt động đã tham gia thành chữ in hoa và khoảng cách giữa các kí tự là 2 pixcel.

Viết mã lệnh CSS để định kiểu cho những thành tích đạt được còn lại trong mục Các hoạt động đã tham gia với những giá trị khác cho các thuộc tính.

Đối với mỗi nội dung là văn bản trong trang web, em có thể thực hiện những định kiểu như thế nào? Hãy nêu những đặc điểm có thể định kiểu văn bản.

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.