HTML cơ bản – Bài 01: HTML là gì? Tạo trang web đầu tiên
Bạn sẽ tạo một tệp HTML, mở bằng trình duyệt và thay đổi nội dung của chính mình. Mục tiêu là hiểu trang web bắt đầu từ đâu, trước khi học thêm nhiều tên thẻ.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Một trang web có những phần việc nào?
HTML mô tả nội dung và cấu trúc: đâu là tiêu đề, đoạn văn, liên kết hay biểu mẫu. CSS điều khiển cách trình bày như màu sắc, khoảng cách và bố cục. JavaScript bổ sung hành vi theo chương trình, chẳng hạn cập nhật giỏ hàng mà không tải lại toàn bộ trang.
Trình duyệt đọc mã và hiển thị giao diện. HTML không phải một ngôn ngữ lập trình có vòng lặp, biến và điều kiện như JavaScript. Tuy vậy HTML có nhiều hành vi sẵn có: liên kết có thể điều hướng, biểu mẫu có thể gửi dữ liệu, details có thể mở hoặc đóng mà không cần tự viết JavaScript.
Chuẩn bị thư mục và tệp
Tạo thư mục goc-hoc-web trên máy. Mở thư mục bằng trình soạn thảo như VS Code hoặc trình soạn thảo văn bản thuần. Tạo tệp index.html, lưu theo mã hóa UTF-8 và nhập ví dụ bên dưới. Không dùng Word để lưu tài liệu HTML vì định dạng văn bản có thể không đúng ý bạn.
Trên Windows, bật hiển thị phần mở rộng tệp để tránh tạo nhầm index.html.txt. Tên index.html thường được dùng làm trang đầu của một thư mục khi triển khai lên web; khi học trên máy, bạn vẫn có thể mở nó trực tiếp.
Mở, sửa, lưu và tải lại
Mở index.html bằng trình duyệt. Bạn sẽ thấy một dòng tiêu đề lớn và một đoạn văn. Quay lại trình soạn thảo, đổi lời chào thành tên của mình, lưu tệp rồi tải lại tab. Nếu chưa thấy thay đổi, kiểm tra bạn đã lưu đúng tệp và trình duyệt đang mở đúng thư mục.
Hãy tự thực hiện chu trình này vài lần. Gõ mã, lưu và quan sát kết quả là kỹ năng nền tảng quan trọng hơn việc ghi nhớ thật nhiều thẻ. Bộ khung head và body trong ví dụ sẽ được giải thích ở bài 3.
Website chúng ta sẽ xây dần
Trong 16 bài, bạn sẽ xây “Góc học web” với ba trang: index.html giới thiệu nội dung, bai-viet.html trình bày một bài học, lien-he.html chứa biểu mẫu. Hình ảnh nằm trong thư mục images. Ban đầu các trang có giao diện mặc định của trình duyệt; chỉ tới bài 16 chúng ta mới nối một tệp CSS tối thiểu.
Một trang hiển thị đơn giản chưa có nghĩa HTML sai. Thay vì dùng màu sắc để đánh giá, hãy kiểm tra nội dung có được tổ chức hợp lý và các thao tác cơ bản có hoạt động hay không.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trang đầu tiên</title>
</head>
<body>
<h1>Xin chào, tôi đang học HTML!</h1>
<p>Đây là trang web đầu tiên của tôi.</p>
</body>
</html>
Kết quả hiển thị
Trình duyệt hiển thị một heading và một đoạn văn, không hiển thị nguyên các dấu ngoặc thẻ. Nếu thấy toàn bộ mã dưới dạng chữ, hãy kiểm tra phần mở rộng tệp.
Mở ví dụ bài 01 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Tệp có đuôi .txt: đổi thành .html và mở lại.
- Sửa mã nhưng không lưu: lưu tệp rồi tải lại trang.
- Đường dẫn file:/// chỉ mở tệp cục bộ, không có nghĩa website đã được xuất bản lên Internet.
Tự kiểm tra
- Thay nội dung heading rồi xác nhận trình duyệt đã hiển thị nội dung mới.
- Giải thích bằng lời của bạn vai trò khác nhau của HTML, CSS và JavaScript.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
