|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
|
|
|
"translation_date": "2025-10-03T10:16:06+00:00",
|
|
|
"source_file": "3-terrarium/1-intro-to-html/assignment.md",
|
|
|
"language_code": "vi"
|
|
|
}
|
|
|
-->
|
|
|
# Bài Tập Thực Hành HTML: Xây Dựng Mô Phỏng Blog
|
|
|
|
|
|
## Mục Tiêu
|
|
|
|
|
|
Thiết kế và tự viết cấu trúc HTML cho trang chủ blog cá nhân. Bài tập này sẽ giúp bạn thực hành HTML ngữ nghĩa, lập kế hoạch bố cục và tổ chức mã.
|
|
|
|
|
|
## Hướng Dẫn
|
|
|
|
|
|
1. **Thiết Kế Mô Phỏng Blog**
|
|
|
- Phác thảo một mô phỏng trực quan cho trang chủ blog của bạn. Bao gồm các phần chính như tiêu đề, điều hướng, nội dung chính, thanh bên, và chân trang.
|
|
|
- Bạn có thể sử dụng giấy và quét bản phác thảo, hoặc sử dụng các công cụ kỹ thuật số (ví dụ: Figma, Adobe XD, Canva, hoặc thậm chí PowerPoint).
|
|
|
|
|
|
2. **Xác Định Các Phần Tử HTML**
|
|
|
- Liệt kê các phần tử HTML bạn dự định sử dụng cho từng phần (ví dụ: `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, v.v.).
|
|
|
|
|
|
3. **Viết Mã HTML**
|
|
|
- Tự viết mã HTML cho mô phỏng của bạn. Tập trung vào cấu trúc ngữ nghĩa và các thực hành tốt nhất.
|
|
|
- Bao gồm ít nhất 10 phần tử HTML khác nhau.
|
|
|
- Thêm các bình luận để giải thích lựa chọn và cấu trúc của bạn.
|
|
|
|
|
|
4. **Nộp Bài Làm**
|
|
|
- Tải lên bản phác thảo/mô phỏng và tệp HTML của bạn.
|
|
|
- Tùy chọn, cung cấp một đoạn phản ánh ngắn (2–3 câu) về các quyết định thiết kế của bạn.
|
|
|
|
|
|
## Tiêu Chí Đánh Giá
|
|
|
|
|
|
| Tiêu Chí | Xuất Sắc | Đạt Yêu Cầu | Cần Cải Thiện |
|
|
|
|------------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
|
| Mô Phỏng Trực Quan | Mô phỏng rõ ràng, chi tiết với các phần được ghi nhãn và bố cục hợp lý | Mô phỏng cơ bản với một số phần được ghi nhãn | Mô phỏng tối thiểu hoặc không rõ ràng; thiếu nhãn phần |
|
|
|
| Phần Tử HTML | Sử dụng 10+ phần tử HTML ngữ nghĩa; thể hiện sự hiểu biết về cấu trúc và các thực hành tốt nhất | Sử dụng 5–9 phần tử HTML; có một số cấu trúc ngữ nghĩa | Sử dụng dưới 5 phần tử; thiếu cấu trúc ngữ nghĩa |
|
|
|
| Chất Lượng Mã | Mã được tổ chức tốt, dễ đọc với các bình luận; tuân theo tiêu chuẩn HTML | Mã phần lớn được tổ chức; ít bình luận | Mã không được tổ chức; thiếu bình luận |
|
|
|
| Phản Ánh | Phản ánh sâu sắc về các quyết định thiết kế và thách thức | Phản ánh cơ bản | Không có phản ánh hoặc không liên quan |
|
|
|
|
|
|
## Mẹo
|
|
|
|
|
|
- Sử dụng các thẻ HTML ngữ nghĩa để cải thiện khả năng truy cập và SEO.
|
|
|
- Tổ chức mã của bạn với thụt lề và các bình luận.
|
|
|
- Tham khảo [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) để được hướng dẫn.
|
|
|
- Suy nghĩ về cách bố cục của bạn có thể được mở rộng hoặc tạo kiểu trong các bài tập tương lai.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Tuyên bố miễn trừ trách nhiệm**:
|
|
|
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với các thông tin quan trọng, khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này. |
