1. Mô tả ý tưởng
Sử dụng các thẻ HTML và thuộc tính đi kèm để tạo ra một website đơn giản nhằm giới thiệu, cung cấp thông tin của bản thân. Website gồm ba trang web:
- Trang chủ: gồm các thông tin cá nhân và thành tích trong học tập.
- Trang Giải trí: chia sẻ các bộ phim, bài hát mà tác giả yêu thích.
- Trang Thời khóa biểu: gồm thông tin về lịch làm việc có định và danh sách các việc cần làm.
2. Xây dựng các trang web
a. Xây dựng thanh điều hướng và thiết lập màu nền website
Bước 1. Thiết lập kiểu chữ, màu nền website, màu chữ cho toàn bộ nội dung nằm trong thẻ <body> như sau:
<body style="font-family: Arial, sans-serif; background-color: #f0f8ff; color: #003366;">
Bước 2. Sử dụng bảng để chia thanh điều hướng thành ba phần, mỗi một phần chứa liên kết đến các trang khác. Cần đề các tệp chứa mã HTML cùng cấp, trong đó: Trang chủ là tệp index.html; Trang Thời khóa biểu là tệp schedule.html; Trang Giải trí là tệp entertainment.html. Mã HTML hoàn chỉnh như sau:
<table style="background-color: #00509e; width:100%;" cellpadding="3">
<tr>
<td><a href="index.html" style="color: white; text-decoration: none; ">Trang chủ</a></td>
<td><a href="schedule.html" style="cAolor:white; text-decoration: none;">Thời khóa biểu</a></td>
<td><a href="entertainment.html" style="color:white; text-decoration: none;">Giải trí</a></td>
</tr>
</table>
Ngoài ra, đầu mỗi trang web phải có tên của trang. Nội dung trong trang phải được phân chia theo tiêu đề có cấp độ.
b. Xây dựng nội dung Trang chủ
Sử dụng thẻ <div> để chia các phần nội dung sẽ xuất hiện. Nguồn ảnh được đặt cùng cấp với tệp tin HTML. Mã HTML sẽ được viết như sau:
<div id="home">
<h2 style="color: #00509e;">Trang chủ website</h2>
<h3 style="color: #00509e;">Thông tin</h3>
<img src="avatar.png" alt="Ảnh đại diện" width="150" height="150" style="border-radius: 50%;">
<br>
<p>Tên: Nguyễn Văn A</p> <p>Tuổi: 18</p> <p>Nghề nghiệp: Học sinh</p>
<h3 style="color: #00509e;">Thành tích</h3>
<ul>
<li>Học bổng toàn phần Đại học ABC</li>
<li>Giải nhất cuộc thi lập trình cấp quốc gia</li>
<li>Thành viên câu lạc bộ khoa học trẻ của trường.</li>
</ul>
</div>
c. Xây dựng nội dung Trang Giải trí
Nội dung của trang được nhúng từ các website khác. Mã HTML được viết như sau:
<div id="entertainment">
<h2 style="color: #00509e;">Giải trí</h2>
<div>
<h3 style="color: #00509e;">Bài hát yêu thích</h3>
<iframe width="300" height="200" src="https://www.youtube.com/embed/jofNR_WkoCE" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<h3 style="color: #00509e;">Bộ phim yêu thích</h3>
<iframe width="300" height="200" src="https://www.youtube.com/embed/s4gBChg6AII" frameborder="0" allowfullscreen></iframe>
</div>
</div>
d. Xây dựng nội dung Trang Thời khóa biểu
Nội dung của trang gồm một bảng là lịch làm việc cố định, phần hai là danh sách công việc có nút tích để đánh dấu sau khi hoàn thành. Mã HTML được viết như sau:
<div id="schedule">
<h2 style="color: #00509e;">Thời khóa biểu</h2>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #00509e; color: #f0f8ff;">
<th>Thứ</th>
<th>Buổi</th>
<th>Hoạt động</th>
<th>Thời gian</th>
<th>Địa điểm</th>
</tr>
<!-- Thứ 2 -->
<tr>
<td rowspan="2">Thứ 2</td>
<td>Sáng</td>
<td>Toán</td>
<td>8:00 - 10:00</td>
<td>Phòng A1</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Công viên</td>
</tr>
<!-- Thứ 3 -->
<tr>
<td rowspan="2">Thứ 3</td>
<td>Sáng</td>
<td>Văn</td>
<td>10:00 - 12:00</td>
<td>Phòng B2</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Nhà bạn</td>
</tr>
<!-- Thứ 4 -->
<tr>
<td rowspan="2">Thứ 4</td>
<td>Sáng</td>
<td>Anh Văn</td>
<td>8:00 - 10:00</td>
<td>Phòng C1</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Thư viện</td>
</tr>
<!-- Thứ 5 -->
<tr>
<td rowspan="2">Thứ 5</td>
<td>Sáng</td>
<td>Lý</td>
<td>8:00 - 10:00</td>
<td>Phòng D1</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Trung tâm thương mại</td>
</tr>
<!-- Thứ 6 -->
<tr>
<td rowspan="2">Thứ 6</td>
<td>Sáng</td>
<td>Hoá</td>
<td>8:00 - 10:00</td>
<td>Phòng E1</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Rạp chiếu phim</td>
</tr>
<!-- Thứ 7 -->
<tr>
<td rowspan="2">Thứ 7</td>
<td>Sáng</td>
<td>Sinh học</td>
<td>8:00 - 10:00</td>
<td>Phòng F1</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Biển</td>
</tr>
<!-- Chủ nhật -->
<tr>
<td rowspan="2">Chủ nhật</td>
<td>Sáng</td>
<td>Thể dục</td>
<td>8:00 - 10:00</td>
<td>Sân vận động</td>
</tr>
<tr style="background-color: #e0f7ff;">
<td>Chiều</td>
<td>Đi chơi</td>
<td>15:00 - 17:00</td>
<td>Cà phê sách</td>
</tr>
</table>
</div>
<div id="todo-list">
<h2 style="color: #00509e;">Danh sách việc cần làm</h2>
<dl>
<dt><input type="checkbox" id="task1"> <label for="task1">Hoàn thành bài tập Toán</label></dt>
<dt><input type="checkbox" id="task2"> <label for="task2">Đọc chương 3 sách Văn</label></dt>
<dt><input type="checkbox" id="task3"> <label for="task3">Chuẩn bị bài thuyết trình Anh Văn</label></dt>
<dt><input type="checkbox" id="task4"> <label for="task4">Tập thể dục 30 phút</label></dt>
<dt><input type="checkbox" id="task5"> <label for="task5">Đi chơi với bạn bè</label></dt>
</dl>
</div>
Bạn có thể đánh giá bài học này ở đây