Luyện tập tổ chức dữ liệu tuần năng động
Bước 1: Khởi tạo dự án với Sublime Text
- Trên ổ đĩa Z, tạo thư mục: hocsinh01/{tên của em}/bai10-5.
- Trong thư mục này, tạo 2 file: index.html và style.css.
- Mẹo gõ nhanh:
+ Trong file index.html, gõ "<htm" rồi nhấn Enter hoặc Tab để hiện khung HTML.
+ Để nối CSS, gõ "<lin" rồi nhấn Enter hoặc Tab, tại mục href nhập ./style.css.
Bước 2: Thiết lập cấu trúc bảng
- Tạo một bảng table với hàng tiêu đề th chứa các thứ trong tuần (Thứ 2 - Chủ Nhật).
- Tạo các hàng tiếp theo cho các buổi Sáng và buổi Chiều.
Bước 3: Điền nội dung hoạt động
- Tại mỗi ô td, dùng thẻ h1 hoặc h2 cho tên hoạt động (BƠI LỘI, ĐÁ BÓNG...).
- Dùng thẻ p để ghi chú thêm thời gian hoặc địa điểm.
- Đặt id riêng cho từng hoạt động để tô màu sắc khác nhau.
Bước 4: Trang trí thời khóa biểu rực rỡ bằng CSS
- Cân đối ô bảng: Sử dụng thuộc tính width (ví dụ: 250px) và height (ví dụ: 200px) để các ô hoạt động rộng rãi, vuông vắn và cân đối.
- Tạo viền và bo góc: Sử dụng thuộc tính border (ví dụ: màu trắng) để tạo đường viền phân cách và border-radius (khoảng 30px) để bo tròn mạnh các góc, tạo hiệu ứng như những mảnh giấy màu dán lên bảng.
- Căn giữa nội dung: Sử dụng thuộc tính text-align: center để tên hoạt động và thời gian luôn nằm ở chính giữa ô.
- Tô màu hoạt động: Với mỗi hoạt động có id riêng (ví dụ: id="monday-activity"), hãy chọn màu nền (background-color) thật rực rỡ, đổi màu chữ (color) sang màu trắng và dùng font-weight: bold để làm nổi bật tên hoạt động.
Bước 5: Sáng tạo và Hoàn thiện
- Hoàn thiện toàn bộ các ngày trong tuần (từ Thứ 2 đến Chủ Nhật) với các hoạt động hè mơ ước của em.
- Phối hợp các tông màu Pastel nhẹ nhàng hoặc màu sắc rực rỡ để bảng thời khóa biểu thật nổi bật.
- Có thể dùng thẻ b và i để trang trí cho các ghi chú thêm phần sinh động.
Học sinh hãy tự hoàn thiện code dựa trên các gợi ý dưới đây (không copy paste):
HTML (Gợi ý cấu trúc bảng)
<table border="1">
<tr>
<th>Buổi</th>
<!-- Thêm các thẻ th cho Thứ 2, Thứ 3... đến Chủ Nhật -->
</tr>
<tr>
<td>Sáng</td>
<td id="monday-activity">
<!-- Dùng h1 cho tên hoạt động: BƠI LỘI -->
<!-- Dùng p cho thời gian và địa điểm -->
</td>
<td><!-- Hoạt động sáng Thứ 3 --></td>
</tr>
</table>
CSS (Gợi ý thuộc tính)
td {
/* Đặt width và height để ô bảng vuông vắn, rộng rãi */
/* Sử dụng border để tạo viền phân cách các ô */
/* Sử dụng border-radius (ví dụ 30px) để bo tròn các góc */
/* Căn giữa chữ bằng thuộc tính text-align */
}
#monday-activity {
/* Chọn một background-color thật rực rỡ cho mùa hè */
/* Đổi color chữ sang màu trắng để dễ đọc */
/* Sử dụng font-weight: bold để chữ đậm hơn */
}