Mục tiêu bài học
- Tạo và trình bày được trang web hoàn chỉnh bao gồm một trang chính và các trang thông tin chi tiết.
- Sử dụng thành thạo thẻ HTML để tạo cấu trúc và CSS để thiết lập bố cục, định dạng giao diện.
- Hình thành tư duy phân tích vấn đề, lựa chọn phương án thiết kế phù hợp để giải quyết yêu cầu thực tế.
Mức độ kiến thức và kĩ năng cần đạt
- Nhận biết: Xác định được các khối (block) trong cấu trúc trang web (Header, Banner, Content, Footer).
- Thông hiểu: Hiểu nguyên lý hoạt động của việc liên kết một tệp CSS duy nhất cho nhiều trang HTML để đảm bảo sự thống nhất về giao diện.
- Vận dụng: Xây dựng được website “Giới thiệu các câu lạc bộ ngoại khóa” với đầy đủ các thành phần: trang chủ, trang thành viên, biểu mẫu đăng ký và các hiệu ứng tương tác cơ bản.
Hoạt động khởi động
Giáo viên đặt vấn đề về việc quản lý giao diện cho một website có nhiều trang.
Câu hỏi: Giả sử website của em có nhiều tệp html. Có thể hay không chỉ dùng một tệp CSS duy nhất để định dạng cho toàn bộ các trang web? Nếu có thể hãy nêu các bước cần thực hiện.
Có thể dùng một tệp CSS duy nhất cho toàn bộ các trang web. Các bước thực hiện như sau:
– Xác định bố cục chung và viết các đoạn mã CSS cho từng loại đối tượng (header, footer, content…), lưu trong một tệp (ví dụ: style.css).
Trong cặp thẻ … của mỗi tệp HTML trong website, thêm dòng mã liên kết tới tệp style.css:<link href="styles.css" rel="stylesheet" />
1. Dự án: Xây dựng website giới thiệu các câu lạc bộ ngoại khoá của trường
Học sinh thảo luận theo nhóm để lên ý tưởng cho website.
Yêu cầu thiết kế:
- Cấu trúc: Cần một trang chủ và các trang riêng cho từng nhóm hoặc từng câu lạc bộ.
- Trang chủ: Chứa thông tin chung nhất và liên kết tới các trang thành viên.
- Trang thành viên: Thông tin chi tiết, lịch hoạt động, thành tích (sử dụng ảnh và video minh họa).
- Trang đăng ký: Chứa biểu mẫu để người dùng đăng ký tham gia.
- Nguyên tắc: Các trang tuân theo phong cách trình bày chung bằng cách sử dụng liên kết tới cùng một tệp CSS.
2. Thực hành
Nhiệm vụ 1: Tạo tệp CSS
Yêu cầu: Tạo tệp CSS để trình bày website có bố cục gồm: Đầu trang (Header/Banner/Slogan), Phần nội dung chính (chia cột hình ảnh/nội dung), và Cuối trang (Footer).
- Phân tích bố cục:
- Các thành phần (đầu trang, nội dung, cuối trang…) được định nghĩa bằng các lớp (class) riêng hoặc chung (nếu cùng định dạng).
- Sử dụng thẻ div trong HTML để tạo các khối tương ứng với CSS.
- Hướng dẫn định dạng chi tiết:
- Banner: Sử dụng ảnh nền, căn giữa tiêu đề, màu sắc nổi bật.
- Slogan: Gồm 3 ô trên hàng ngang. Sử dụng div bao quanh (lớp Row) với thuộc tính display: flex để xếp hàng ngang. Mỗi ô bên trong (lớp block_3) có độ rộng bằng 1/3 (khoảng 33.33%).
Câu hỏi: Làm thế nào để định dạng khu vực Slogan với 3 ô thông tin nằm ngang cân đối?
Để định dạng khu vực Slogan, ta thực hiện:
– Tạo lớp .slogan để thiết lập nền, căn lề.
– Tạo lớp .row bao quanh các ô với thuộc tính ‘display: flex;’ và ‘flex-wrap: wrap;’ để dàn trang ngang.
– Tạo lớp .block_3 cho từng ô với thuộc tính ‘width: 33.33333333%;’ để chia đều không gian thành 3 phần bằng nhau.
Nhiệm vụ 2: Tạo các tệp HTML
Yêu cầu: Tạo tệp index.html (Trang chủ), thethao.html (CLB Thể thao) và nghethuat.html (CLB Nghệ thuật).
- Nguyên tắc:
- Các khối HTML được viết lần lượt từ trên xuống dưới (trừ trường hợp dàn trang ngang đã xử lý bằng CSS).
- Liên kết tệp CSS vừa tạo ở Nhiệm vụ 1 vào thẻ <head> của tất cả các tệp HTML.
- Sử dụng thẻ div với các class tương ứng (banner, slogan, row, block_3…) để trình duyệt áp dụng đúng kiểu dáng.
- Mã HTML minh họa cho phần Banner và Slogan:
- Sử dụng thẻ h2 cho tiêu đề CLB.
- Sử dụng div class=”row” bao quanh các div class=”block_3″.
- Bên trong các khối block_3 chứa tiêu đề nhỏ (h3) và nội dung (p).
Luyện tập
Bài tập 1: Tạo trang đăng ký
Học sinh cần tạo thêm trang dang_ki.html chứa biểu mẫu để các bạn đăng ký tham gia câu lạc bộ.
Câu hỏi: Các bước nhanh nhất để tạo trang dang_ki.html dựa trên các trang đã có là gì?
Sao chép tệp index.html và đổi tên thành dang_ki.html (để giữ nguyên cấu trúc header, footer và liên kết CSS).
Thay đoạn mã viết nội dung chính (đoạn mã nằm trong thẻ
Bài tập 2: Bổ sung liên kết và hiệu ứng
Yêu cầu:
- Bổ sung liên kết (thẻ a) tới trang dang_ki.html ở phần cuối trang (Footer) của tất cả các trang.
- Thay đổi định dạng màu sắc phông chữ khi di chuyển chuột qua.
Câu hỏi: Làm thế nào để dòng chữ slogan đổi sang màu xanh lam khi di chuyển chuột qua?
Ta sử dụng bộ chọn giả lập trạng thái (pseudo-class) :hover trong CSS. Thêm đoạn mã sau vào tệp CSS:.slogan:hover {
color: blue;
}
Vận dụng
Học sinh thực hiện thay đổi thiết kế cho website đã tạo ở phần Thực hành để tạo ra một phiên bản mới mang phong cách cá nhân hoặc phù hợp với một chủ đề khác (ví dụ: Website lớp học, Website dự án môn học).
Câu hỏi: Nếu muốn thay đổi giao diện website (màu sắc, phông chữ) mà vẫn giữ nguyên bố cục, em cần làm gì?
Em cần giữ nguyên các tệp HTML và chỉ sửa tệp style.css.
Thay đổi giá trị của các thuộc tính như: background-color (màu nền), color (màu chữ), font-family (phông chữ), border (đường viền) trong các lớp (class) tương ứng. Điều này giúp thay đổi định dạng của website nhanh chóng mà không cần viết lại nội dung.
Câu hỏi: Có cách nào thay đổi toàn bộ bố cục và trang trí website không?
Có 2 cách:
– Cách 1 (Thay đổi tệp CSS): Giữ nguyên HTML, viết lại hoàn toàn tệp CSS với các định nghĩa vị trí, kích thước mới cho các khối.
– Cách 2 (Thay đổi HTML và CSS): Xác định lại bố cục mới, sửa đổi cấu trúc thẻ div trong tệp HTML (thêm/bớt class), sau đó viết CSS tương ứng để trang trí cho các đối tượng mới này.
