Luyện tập thẻ bảng và định dạng cơ bản
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-1.
- 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
- Sử dụng thẻ table để làm khung cho các thẻ Flashcard.
- Mỗi hàng tr sẽ chứa các ô td, mỗi ô là một thẻ Flashcard.
Bước 3: Thêm nội dung cho thẻ
- Sử dụng thẻ h3 cho tiêu đề phụ và h1 cho từ khóa chính.
- Sử dụng thẻ p để viết mô tả chi tiết cho từ khóa đó.
- Đặt id cho ô td đầu tiên (ví dụ: id="start") để trang trí riêng.
Bước 4: Định dạng CSS
- Sử dụng width và height để cố định kích thước cho các thẻ Flashcard.
- Dùng border-radius để bo góc tròn cho thẻ thêm đẹp.
- Dùng text-align: center để căn giữa toàn bộ chữ trong thẻ.
Bước 5: Sáng tạo và Hoàn thiện
- Hãy thêm ít nhất 4 thẻ Flashcard với các chủ đề khác nhau (ví dụ: Động vật, Trái cây).
- Tự chọn màu sắc (background-color) yêu thích cho từng tấm thẻ.
- Có thể thêm hình ảnh minh họa bằng thẻ img để bộ Flashcard sinh động hơn.
HTML (index.html)
<table>
<tr>
<td id="start">
<h3>Màu sắc tiếng Anh</h3>
<h1>COLORS</h1>
<p>Khám phá thế giới màu sắc qua ngôn ngữ mới.</p>
</td>
<td id="blue">
<h3>Màu xanh lam</h3>
<h1>BLUE</h1>
<p>Biểu tượng của hòa bình và trí tuệ.</p>
</td>
</tr>
</table>
CSS (style.css)
td {
width: 250px;
height: 300px;
border: 5px solid #b1d1f0;
border-radius: 20px;
text-align: center;
}
#start {
background-color: white;
color: #0984e3;
}
#blue {
background-color: #74b9ff;
color: white;
}