HTML: Cấu trúc tệp HTML - Giới thiệu và Thực hành
1. Tạo thư mục và file HTML
- Mở VSCode và tạo một thư mục mới (không dấu cách, không tiếng Việt).
- Đặt tên file là index-email.html.
- Gõ ! + Enter để tạo cấu trúc cơ bản của một file HTML.
2. Cấu trúc cơ bản của tệp HTML
Một file HTML cơ bản sẽ bao gồm các phần sau:
<!DOCTYPE html>: Khai báo sử dụng HTML5.<html lang="vi">...</html>: Toàn bộ nội dung của trang web.<head>...</head>: Chứa các thông tin mô tả, không hiển thị trực tiếp.<body>...</body>: Chứa nội dung hiển thị trên trang web.
3. Giới thiệu thẻ <!DOCTYPE html>
- Khai báo cho trình duyệt biết rằng chúng ta đang sử dụng chuẩn HTML5.
- Là dòng đầu tiên trong mỗi file HTML hiện đại.
- HTML trước đây dùng các phiên bản khác như 4.01 transitional, strict,...
4. Thẻ <html> và thuộc tính lang
- Đây là thẻ lớn nhất, bao trùm toàn bộ tài liệu HTML.
- Thuộc tính lang="vi" giúp trình duyệt và các công cụ tìm kiếm hiểu ngôn ngữ chính của trang.
5. Thẻ <head> và nội dung bên trong
- Không hiển thị trực tiếp trên trình duyệt người dùng (trừ thẻ <title>).
- Thường chứa:
<meta charset="UTF-8">: Hỗ trợ hiển thị ký tự tiếng Việt và nhiều ngôn ngữ khác.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Giúp trang hiển thị tốt trên thiết bị di động.<title>Tên trang web</title>: Hiển thị tiêu đề trên tab trình duyệt.
<meta ... />
6. Vai trò của thẻ <title>
- Hiển thị trên tab của trình duyệt.
- Giúp người dùng nhận diện trang.
- Ảnh hưởng đến SEO.
7. Comment trong HTML
- Sử dụng để ghi chú code, không hiển thị trên trình duyệt.
- Cú pháp: <!-- Đây là comment -->
- Phím tắt:
- Ctrl + K + C: Comment nhanh khối code.
- Ctrl + K + U: Bỏ comment.
8. Thẻ <body> và nội dung hiển thị
- Chứa toàn bộ nội dung hiển thị trên website: văn bản, hình ảnh, tiêu đề, form,...
- Ví dụ tạo một tiêu đề:
<h1>Đây là tiêu đề</h1>9. Gõ nội dung mẫu với lorem
- Gõ lorem hoặc lorem9 để tự động sinh ra đoạn văn mẫu nhanh chóng.
- Giúp bạn xây dựng bố cục trang mà không cần nghĩ nội dung cụ thể.
10. Xem trước trang HTML
- Cài Extension: Live Server hoặc dùng Live Server Preview.
- Mở file HTML, nhấn F1 > Gõ Show Live Server Preview để xem nội dung trực tiếp trong VSCode.
11. Tổng kết
Trong bài học này, bạn đã nắm được:
- Cách tạo một file HTML cơ bản với VSCode.
- Hiểu rõ vai trò của từng thẻ trong cấu trúc HTML.
- Thực hành sử dụng comment, gõ nội dung mẫu, và xem trực tiếp trang web.
<body>.