Trong bài này, bạn sẽ tạo một trang giới thiệu bằng một tệp HTML. Bạn chỉ cần trình soạn thảo văn bản và trình duyệt; chưa cần hosting hay công cụ build. Ví dụ cố tình nhỏ để dễ hiểu và tự thay đổi.
1. Chuẩn bị tệp
Tạo thư mục goc-hoc-tap, sau đó tạo tệp index.html bên trong. Nếu dùng Notepad, chọn lưu với mã hóa UTF-8 và kiểm tra tên không bị thành index.html.txt.
2. Thêm nội dung và giao diện
Dán toàn bộ đoạn dưới đây rồi lưu tệp. Mở bằng trình duyệt để xem kết quả.
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Góc học tập của tôi</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; font: 18px/1.7 system-ui; background: #eef3ff; color: #12214a; }
main { max-width: 720px; margin: 48px auto; padding: 32px; background: white; border-radius: 16px; }
h1 { line-height: 1.2; }
a { color: #175bd6; }
a:focus-visible { outline: 3px solid #175bd6; outline-offset: 4px; }
@media (max-width: 480px) { main { padding: 20px; margin: 16px auto; } }
</style>
</head>
<body>
<main>
<h1>Góc học tập của tôi</h1>
<p>Tôi đang học cách xây dựng website dễ đọc và dễ sử dụng.</p>
<h2>Mục tiêu tuần này</h2>
<ul><li>Hiểu cấu trúc HTML.</li><li>Thực hành CSS responsive.</li></ul>
<a href="https://developer.mozilla.org/en-US/docs/Learn_web_development">Học tiếp với MDN</a>
</main>
</body>
</html>3. Hiểu những phần quan trọng
lang="vi" khai báo ngôn ngữ. Dòng viewport giúp trình duyệt thiết bị di động dùng chiều rộng phù hợp. main đánh dấu nội dung chính; h1 là tiêu đề trang và h2 chia phần nội dung.
Trong CSS, max-width giữ dòng chữ không quá dài trên màn hình lớn. Khoảng đệm nhỏ hơn ở media query giúp thẻ nội dung còn đủ chỗ trên điện thoại. Thuộc tính box-sizing làm cách tính kích thước dễ dự đoán hơn.
4. Kiểm tra trước khi chia sẻ
- Thu hẹp cửa sổ: trang không xuất hiện thanh cuộn ngang.
- Nhấn Tab: liên kết có viền đánh dấu rõ, Enter mở đúng tài liệu.
- Tăng mức thu phóng: nội dung vẫn đọc được và không đè lên nhau.
- Thay tiêu đề và mục tiêu bằng nội dung của bạn, lưu rồi tải lại trang.
Bài tập mở rộng
Thêm mục “Dự án muốn làm” bằng một tiêu đề h2 và một đoạn văn. Giữ một h1 duy nhất cho chủ đề chính. Sau khi làm quen, bạn có thể chuyển CSS sang tệp riêng để dễ bảo trì.
Tệp mẫu có sẵn tại thư viện Tài nguyên để tải về và chỉnh sửa.
Tài liệu tham khảo
MDN: Your first website. Ví dụ và bài tập trong bài do Akashic biên soạn.
Đăng nhập để lưu bài viết ↗Bạn muốn thực hành thêm?
Mở thư viện tài nguyên ↗