Trong bài này, chúng ta sẽ cùng nhau thực hành viết cấu trúc HTML5 đơn giản dựa vào kiến thức mình đã giới thiệu với các bạn từ đầu serie nhé!
Trải qua số kiến thức vừa học, để các bạn ghi nhớ và thành thục viết HTML5, bài viết này sẽ giúp bạn thực hành viết một cấu trúc HTML5 đơn giản, trong bài này gồm có 5 đề, các bạn có thể chọn 1 đề làm hoặc làm từ đề 1 đến 5 luôn để thành thục HTML5 nhé. Mình sẽ cập nhật bài mẫu dưới cuối bài.
5 đề viết cấu trúc HTML5 đơn giản
Chú ý: các đề sau chỉ là ví dụ!
Yêu cầu
Bài làm phải được đặt theo cấu trúc sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tên bài làm</title>
</head>
<body>
<!-- Nội dung bài làm phải đặt ở đây -->
</body>
</html>
Nội dung bài làm phải đặt ở trong thẻ <body>
Đề 1: bạn là lớp trưởng của lớp 9A tại trường THCS ABCVNTHCS, giáo viên chủ nhiệm yêu cầu bạn lập danh sách các học sinh (khoảng 10 bạn) để đạt kết quả “Giỏi” trong đợt thi nghề vừa qua.
- Các nội dung cần có trong bài làm: họ tên, giới tính, địa chỉ, nghề đã học, điểm thi nghề, danh hiệu học sinh học kỳ 1
- Yêu cầu bổ sung: tiêu đề của bảng phải bao gồm tên trường – tên lớp.
- Gợi ý: dùng bảng biểu
Đề 2: bạn là giáo viên phụ trách bộ môn tin học của trường THPT ABCVNTHPT, trong tuần này, tổ bộ môn yêu cầu bạn lập danh sách các việc cần làm của các thành viên trong tổ bộ môn và danh sách những việc cần làm của học sinh ở 4 lớp bạn đang phụ trách dạy học (lớp 12A, 12B, 12C và 12D).
- Các nội dung cần có trong bài làm:
- Danh sách các việc cần làm của thành viên trong tổ bộ môn (gồm 4 người: Nguyễn Thái A, Đặng Thị B, Trần Văn C và bạn), trong đó:
- Thành viên 1 cần phải cài đặt chương trình của phòng máy số 1, soạn giáo án cho lớp số 11A, 11C, 12E, 10E
- Thành viên 2 cần phải kiểm tra máy của phòng máy số 2, soạn giáo án lớp 10B, 11B, 11D, 11E
- Thành viên 3 cần phải soạn giáo án chuẩn bị dự giờ cho lớp 10A, soạn giáo án chuẩn cho lớp 10C và 10D, soạn tài liệu cho bên Đoàn Thanh Niên
- Bạn cần phải soạn giáo án cho lớp 12A, 12B, 12C và 12D và phụ tránh kiểm kê tài sản của 2 phòng máy
- Danh sách các việc cần làm của học sinh ở 4 lớp bạn phụ trách (tách riêng với ở trên):
- Lớp số 1 kiểm tra thường xuyên bài 10, học bài mới 11
- Lớp số 2 học tiếp bài 11
- Lớp số 3 học tiếp bài 10, dặn kiểm tra thường xuyên bài 11 ở tiết kế tiếp
- Lớp số 4 học tiếp bài 11
- Danh sách các việc cần làm của thành viên trong tổ bộ môn (gồm 4 người: Nguyễn Thái A, Đặng Thị B, Trần Văn C và bạn), trong đó:
- Yêu cầu bổ sung: tiêu đề đặt là “Phân công công việc tổ bộ môn Tin Học – trường THPT ABCVNTHPT”
- Gợi ý: dùng danh sách
Đề 3: bạn là sinh viên khoa CNTT của trường đại học ABCVNDH, giảng viên yêu cầu bạn phải viết một bài luận không quá 200 từ giới thiệu về HTML5, trong đó sử dụng các tài liệu bạn tìm thấy trên mạng để viết (có thể tham khảo nhưng không được copy toàn bộ nội dung của bài trên mạng về bài luận của bạn). Yêu cầu sử dụng HTML5 để viết và định dạng nội dung cho dễ đọc
- Nội dung cần phải có trong bài: lịch sử về HTML5 – năm ra đời, người sáng lập,… Cấu trúc HTML5 đơn giản, công dụng của HTML5.
- Yêu cầu bổ sung: đặt tiêu đề của bài viết sao cho phù hợp, bổ sung liên kết đến bài viết bạn đã tham khảo
- Gợi ý: dùng định dạng trong HTML5 ở [Bài 3] Định dạng văn bản trong HTML5, có thể dùng Giới thiệu về HTML5 hay HTML trên Wikipedia để làm tài liệu tham khảo cho bài luận
Đề 4: bạn là nhân viên của công ty TNHH MTV Điện máy điện lạnh B, trong đó giám đốc của công ty B yêu cầu bạn hãy lập danh sách khách hàng may mắn trúng giải (gồm 10 người) để công ty phát thưởng.
- Nội dung cần phải có trong bài: họ khách hàng, tên khách hàng, giới tính, địa chỉ, số điện thoại, trúng giải gì, đã đạt được điều kiện nào (công ty ra hai điều kiện, 1 là mua trên 10 sản phẩm, 2 là mua sản phẩm giá trên 10tr VNĐ) trong đó mục điều kiện phải bao gồm 2 điều kiện đã nêu, nếu khách hàng đạt điều kiện nào thì thêm dấu X, nếu không để trống
- Yêu cầu bổ sung: tiêu đề của bài đặt sao cho phù hợp
- Gợi ý: xem lại nội dung bài trước về 2 thuộc tính của bảng [Bài 9] Bảng biểu trong HTML5
Đề 5: cuối tuần này là ngày mà gia đình bạn tổ chức họp mặt kỷ niệm 20 năm ngày cưới của bạn với vợ, bạn dự tính sẽ nấu món đặc biệt dành cho bữa ăn ngày họp mặt ấy. Hãy lập danh sách nguyên liệu và cách làm để bạn có thể dựa vào đó để chuẩn bị nhé!
- Nội dung cần phải có trong bài: tên món ăn, hình ảnh món ăn, nguyên liệu, cách làm (chế biến – mỗi nguyên liệu nên có hình ảnh để minh hoạ).
- Yêu cầu bổ sung: nên đặt tiêu đề cho phù hợp
- Gợi ý: xem lại bài [Bài 6] Hình ảnh trong HTML5
Chúc các bạn thực hành thật tốt. Nếu có bất cứ khó khăn gì cứ bình luận bên dưới để mình có thể trợ giúp bạn nhé!
Bài sau chúng ta sẽ tìm hiểu về Iframe: [Bài 10] Iframe trong HTML5
Bài mẫu cho 5 đề viết cấu trúc HTML5 đơn giản
Đề 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài tập - Đề 1</title>
</head>
<body>
<table>
<caption>Danh sách các học sinh đạt kết quả Giỏi trong kỳ thi nghề</caption>
<tr>
<th>Họ tên</th>
<th>Giới tính</th>
<th>Địa chỉ</th>
<th>Nghề đã học</th>
<th>Điểm thi nghề</th>
<th>Danh hiệu HKI</th>
</tr>
<tr>
<td>Trần Vĩnh E</td>
<td>Nam</td>
<td>45E Võ Văn Khánh</td>
<td>Sửa xe gắn máy</td>
<td>9</td>
<td>Học sinh giỏi</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>Nữ</td>
<td>74D Đồng Văn Cống</td>
<td>May mặc</td>
<td>8.8</td>
<td>Học sinh tiên tiến</td>
</tr>
<tr>
<td>Hoàng Thị Y</td>
<td>Nữ</td>
<td>10B Trương Định</td>
<td>Điện dân dụng</td>
<td>9.3</td>
<td>Học sinh giỏi</td>
</tr>
<tr>
<td>Nguyễn Hoàng Khánh A</td>
<td>Nam</td>
<td>17B Đồng Văn Cống</td>
<td>Điện dân dụng</td>
<td>10</td>
<td>Học sinh giỏi</td>
</tr>
<tr>
<td>Đặng Thị M</td>
<td>Nữ</td>
<td>11D Nguyễn Thị Định</td>
<td>Tin học</td>
<td>8</td>
<td>Học sinh tiên tiến</td>
</tr>
<tr>
<td>Trần Minh C</td>
<td>Nam</td>
<td>30A Trương Định</td>
<td>Điện dân dụng</td>
<td>10</td>
<td>Học sinh tiên tiến</td>
</tr>
<tr>
<td>Bùi Thành Đ</td>
<td>Nam</td>
<td>12C Đồng Văn Cống</td>
<td>Tin học</td>
<td>8.5</td>
<td>Học sinh giỏi</td>
</tr>
<tr>
<td>Nguyễn Thị Xuân A</td>
<td>Nữ</td>
<td>13A Nguyễn Văn Tư</td>
<td>Sửa xe gắn máy</td>
<td>9.8</td>
<td>Học sinh giỏi</td>
</tr>
<tr>
<td>Nguyễn Trần Hoài A</td>
<td>Nam</td>
<td>31A Đoàn Hoàng Minh</td>
<td>Tin học</td>
<td>8</td>
<td>Học sinh tiên tiến</td>
</tr>
<tr>
<td>Nguyễn Đức C</td>
<td>Nam</td>
<td>16A Võ Văn Kiệt</td>
<td>Tin học</td>
<td>10</td>
<td>Học sinh giỏi</td>
</tr>
</table>
</body>
</html>
Đề 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài tập - Đề 2</title>
</head>
<body>
<h1>Phân công công việc tổ bộ môn Tin Học - trường THPT ABCVNTHPT</h1>
<p>Nguyễn Thái A</p>
<ul>
<li>Cài đặt chương trình phòng máy số 1</li>
<li>Soạn giáo án lớp 11A, 11C, 12E, 10E</li>
</ul>
<p>Đặng Thị B</p>
<ul>
<li>Kiểm tra máy của phòng máy số 2</li>
<li>Soạn giáo án lớp 10B, 11B, 11D, 11E</li>
</ul>
<p>Trần Văn C</p>
<ul>
<li>Soạn giáo án chuẩn bị dự giờ cho lớp 10A</li>
<li>Soạn giáo án lớp 10C, 10D</li>
<li>Soạn tài liệu gửi Đoàn Thanh Niên</li>
</ul>
<p>Tên bạn đặt ở đây</p>
<ul>
<li>Kiểm kê tài sản 2 phòng máy</li>
<li>Soạn giáo án cho lớp 12A, 12B, 12C và 12D</li>
<ul>
<li>12A Kiểm tra thường xuyên bài 10, học bài 11</li>
<li>12B Học tiếp bài 11</li>
<li>12C Học tiếp bài 10, dặn kiểm tra thường xuyên bài 11 tiết kế</li>
<li>12D Học tiếp bài 11</li>
</ul>
</ul>
</body>
</html>
Đề 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài tập - Đề 3</title>
</head>
<body>
<h1>HTML - một thành phần không thể thiếu của World Wide Web</h1>
<!-- Bạn viết bài luận ngay bên dưới -->
<!-- Bạn viết bài luận ngay bên trên -->
<!--
Nguồn tham khảo
1. https://tienminhvy.com/hoc-tap/gioi-thieu-ve-html5/
2. https://vi.wikipedia.org/wiki/HTML
Đọc bài bên dưới để nhớ lại cách định dạnh văn bản
[Bài 3] Định dạng văn bản trong HTML5
-->
</body>
</html>
Đề 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài tập - Đề 4</title>
</head>
<body>
<h1>Khách hàng may mắn trúng thưởng</h1>
<p>Công ty TNHH MTV Điện Máy Điện Lạnh B</p>
<table>
<tr>
<th rowspan="2">Họ</th>
<th rowspan="2">Tên</th>
<th rowspan="2">Giới tính</th>
<th rowspan="2">Địa chỉ</th>
<th rowspan="2">Số điện thoại</th>
<th rowspan="2">Giải</th>
<th colspan="2">Điều kiện đạt được (sức mua sản phẩm)</th>
</tr>
<tr>
<td>Trên 10 sản phẩm</td>
<td>Giá trên 10 triệu đồng</td>
</tr>
<!-- Khách hàng -->
<tr>
<td>Trần</td>
<td>Văn A</td>
<td>Nam</td>
<td>266B Đồng Văn Cống</td>
<td>0942578XXX</td>
<td>Nhất</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>Nguyễn</td>
<td>Đình C</td>
<td>Nam</td>
<td>14A Nguyễn Thị Định</td>
<td>0375847XXX</td>
<td>Nhì</td>
<td>X</td>
<td></td>
</tr>
<tr>
<td>Nguyễn</td>
<td>Thị Hoàng X</td>
<td>Nữ</td>
<td>241C Võ Nguyên Giáp</td>
<td>0949751XXX</td>
<td>Ba</td>
<td></td>
<td>X</td>
</tr>
<tr>
<td>Trần</td>
<td>Văn T</td>
<td>Nam</td>
<td>347B Đồng Văn Cống</td>
<td>0929471XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Huỳnh</td>
<td>Văn A</td>
<td>Nam</td>
<td>351A Trương Định</td>
<td>0345785XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Đặng</td>
<td>Trần T</td>
<td>Nam</td>
<td>148B Nguyễn Thị Định</td>
<td>0927587XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Trần</td>
<td>Thị X</td>
<td>Nữ</td>
<td>34B Đoàn Hoàng Minh</td>
<td>0949101XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Trần</td>
<td>Hoàng Ánh L</td>
<td>Nữ</td>
<td>58D Ngô Quyền</td>
<td>0923581XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Trần</td>
<td>Văn T</td>
<td>Nam</td>
<td>101B Nguyễn Thị Định</td>
<td>0972471XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Trần</td>
<td>Văn T</td>
<td>Nam</td>
<td>10A Đồng Văn Cống</td>
<td>0957471XXX</td>
<td>Khuyến khích</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Đề 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bài tập - Đề 3</title>
</head>
<body>
<h1>Danh sách nguyên liệu và cách làm</h1>
<h2>Thịt kho tàu</h2>
<ul>
<p>Nguyên liệu</p>
<li>Thịt ba chỉ hay thịt chân giò 500 gr</li>
<li>Trứng vịt luộc 5 quả</li>
<li>Nước dừa 400 ml</li>
<li>Hành băm 1 muỗng canh</li>
<li>Tỏi băm 1 muỗng canh</li>
<li>Nước mắm 6 muỗng canh</li>
<li>Đường 4 muỗng canh (để nêm thịt)</li>
<li>Đường 1 muỗng cà phê (để thắng nước màu)</li>
<li>Hạt nêm 1 muỗng canh</li>
<li>Tiêu 1 muỗng cà phê</li>
</ul>
<ul>
<p>Các bước thực hiện</p>
<li>Ướp thịt</li>
<li>Thắng nước đường</li>
<li>Kho thịt</li>
</ul>
<p>Thành phẩm</p>
<img src="https://cdn.tgdd.vn/2021/01/CookRecipe/GalleryStep/thanh-pham-268.jpg" alt="">
<!-- Tham khảo từ https://www.dienmayxanh.com/vao-bep/cach-lam-thit-kho-tau-thom-ngon-00434 -->
</body>
</html>
