Luyện tập so sánh và làm nổi bật nội dung
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-4.
- 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: Tạo cấu trúc bảng so sánh
- Tạo một bảng table gồm ít nhất 3 cột tương ứng với 3 gói dịch vụ: Cơ bản, Phổ thông, Cao cấp.
- Mỗi cột sẽ là một ô td chứa đầy đủ thông tin về gói đó.
Bước 3: Điền thông tin giá cả
- Sử dụng thẻ h3 cho tên gói, h1 cho giá tiền lớn và p cho các tính năng đi kèm.
- Đặt một id đặc biệt (ví dụ: id="featured") cho gói Phổ thông để làm nó nổi bật hơn các gói còn lại.
Bước 4: Định dạng và làm nổi bật bảng giá bằng CSS
- Cân đối kích thước: Sử dụng thuộc tính width (ví dụ: 300px) và height (ví dụ: 250px) cho các ô td để các cột và hàng có kích thước đồng đều, vuông vắn.
- Tạo khung và bo góc: Sử dụng thuộc tính border để tạo đường viền quanh mỗi gói giá và border-radius (khoảng 20px) để bo tròn các góc cho bảng trông hiện đại hơn.
- Căn giữa nội dung: Sử dụng thuộc tính text-align: center để toàn bộ văn bản (tên gói, giá, mô tả) được căn vào chính giữa ô.
- Làm nổi bật gói đặc biệt: Với gói có id="featured", hãy dùng màu nền (background-color) thật nổi bật, đổi màu chữ (color) sang màu trắng để dễ đọc và sử dụng font-weight: bold để làm chữ đậm hơn, thu hút sự chú ý.
Bước 5: Sáng tạo và Hoàn thiện
- Thêm các biểu tượng (emoji) hoặc hình ảnh bằng thẻ img để minh họa cho từng gói dịch vụ.
- Tự thiết kế một gói "Siêu cấp" với các màu sắc và kích thước (width/height) đặc biệt hơn.
- Dùng font-weight: bold để làm nổi bật những tính năng quan trọng nhất.
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>
<tr>
<td class="price-box">
<!-- Thêm h3 cho tên gói: Gói Cơ Bản -->
<!-- Thêm h1 cho giá tiền: $10 -->
<p>Mô tả dịch vụ tại đây...</p>
</td>
<td class="price-box" id="featured">
<!-- Thêm nội dung cho gói Phổ Thông -->
</td>
</tr>
</table>
CSS (Gợi ý thuộc tính)
td {
/* Đặt width (ví dụ 300px) để các cột bằng nhau */
/* Đặt height (ví dụ 250px) để các ô có chiều cao đều */
/* Sử dụng border để tạo khung và border-radius để bo góc */
/* Sử dụng text-align để căn giữa nội dung */
}
#featured {
/* Chọn một background-color thật nổi bật */
/* Đổi color chữ sang màu trắng để dễ đọc */
/* Sử dụng font-weight: bold để chữ đậm hơn */
}