Bài 1.1: Cấu trúc cơ bản của trang HTML
Bài 1.1: Cấu trúc cơ bản của trang HTML
Chào mừng bạn đến với khóa học Lập trình Web Front-end của FullHouse Dev. Chúng ta sẽ bắt đầu với HTML – ngôn ngữ đánh dấu cơ bản và quan trọng nhất trong việc xây dựng trang web. Trước khi tìm hiểu cách tạo kiểu hay thêm các chức năng cho trang web, bạn cần nắm vững cấu trúc cơ bản của một tài liệu HTML hợp lệ.
Bạn có thể hình dung một trang HTML giống như việc xây dựng một ngôi nhà. Trước khi sơn tường hay trang trí nội thất, ngôi nhà cần có nền móng và khung vững chắc. Cấu trúc HTML chính là phần nền móng và khung sườn đó.
Một tài liệu HTML đơn giản nhất thường bao gồm các thành phần sau, được sắp xếp theo một thứ tự nhất định:
1. Khai báo loại tài liệu: <!DOCTYPE html>
Đây là dòng đầu tiên và bắt buộc của mọi tài liệu HTML5. Nó không phải là một thẻ HTML mà là một "khai báo" (declaration) hướng dẫn trình duyệt biết rằng đây là một tài liệu HTML, cụ thể là phiên bản HTML5.
<!DOCTYPE html>
Giải thích: Dòng này rất quan trọng. Nó giúp trình duyệt hiển thị trang web ở "chế độ chuẩn" (standard mode), đảm bảo sự nhất quán trên các trình duyệt khác nhau và tuân thủ các tiêu chuẩn web hiện đại. Nếu thiếu dòng này, trình duyệt có thể chuyển sang "chế độ quirks" và hiển thị trang web theo cách không mong muốn.
2. Thẻ gốc: <html>
Thẻ <html> là thẻ gốc (root element), bao bọc toàn bộ nội dung của trang web (ngoại trừ dòng <!DOCTYPE>). Mọi thứ khác trong tài liệu HTML đều nằm bên trong cặp thẻ <html></html>.
<html lang="vi">
<!-- Nội dung của trang web sẽ nằm ở đây -->
</html>
Giải thích: Thuộc tính lang="vi" (hoặc en, fr, ja...) được thêm vào thẻ <html> để khai báo ngôn ngữ chính của trang web là tiếng Việt. Điều này rất hữu ích cho các công cụ tìm kiếm (SEO) và công nghệ hỗ trợ người dùng (như trình đọc màn hình cho người khiếm thị), giúp họ hiểu rõ hơn về nội dung của trang.
3. Phần đầu tài liệu: <head>
Thẻ <head> chứa các thông tin không hiển thị trực tiếp trên trang web mà chủ yếu cung cấp metadata (dữ liệu về dữ liệu) cho trình duyệt và công cụ tìm kiếm. Hãy coi nó như phần "não" của trang web – chứa những thông tin cần thiết để xử lý và hiển thị trang đúng cách.
Trong <head>, bạn sẽ thường thấy các thẻ sau:
### Khai báo bộ mã ký tự:
<meta charset="UTF-8">Thẻ meta này chỉ định bộ mã ký tự được sử dụng trong tài liệu.
UTF-8là bộ mã phổ biến nhất và được khuyến nghị sử dụng vì nó hỗ trợ hầu hết các ký tự từ mọi ngôn ngữ trên thế giới (bao gồm tiếng Việt với dấu đầy đủ).<head> <meta charset="UTF-8"> <!-- Các thẻ khác trong head --> </head>Giải thích: Nếu thiếu hoặc khai báo sai bộ mã, các ký tự đặc biệt hoặc ký tự tiếng Việt có dấu có thể hiển thị thành các ký hiệu lạ ("font lỗi"). Luôn luôn đặt dòng này càng sớm càng tốt trong
<head>.### Cài đặt Viewport cho thiết bị di động:
<meta name="viewport" ...>Thẻ meta này cực kỳ quan trọng cho thiết kế đáp ứng (responsive design), giúp trang web hiển thị tốt trên các kích thước màn hình khác nhau (điện thoại, máy tính bảng).
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Các thẻ khác trong head --> </head>Giải thích:
width=device-widththiết lập chiều rộng của viewport (khu vực hiển thị) bằng với chiều rộng của màn hình thiết bị.initial-scale=1.0thiết lập mức độ zoom ban đầu khi trang được tải. Điều này ngăn trình duyệt di động tự động phóng to trang web lên.### Tiêu đề trang:
<title>Nội dung nằm trong thẻ
<title>sẽ xuất hiện trên thanh tiêu đề của cửa sổ trình duyệt hoặc trên tab của trình duyệt. Đây cũng là dòng tiêu đề chính khi trang web của bạn xuất hiện trong kết quả tìm kiếm của Google.<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tên Trang Web Của Bạn Hiện Thị Ở Đây</title> <!-- Các thẻ khác trong head --> </head>Giải thích: Chọn một tiêu đề ngắn gọn, súc tích và mô tả đúng nội dung trang web của bạn. Điều này vừa tốt cho trải nghiệm người dùng vừa có lợi cho SEO.
### Liên kết tệp CSS và JavaScript (Thường đặt ở đây)
Trong phần
<head>, bạn cũng sẽ thường thấy các thẻ dùng để liên kết đến tệp CSS (để định kiểu cho trang) và tệp JavaScript (để thêm tương tác).<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trang Web Có Style và Script</title> <link rel="stylesheet" href="duong-dan/den/file-style.css"> <!-- Liên kết CSS --> <script src="duong-dan/den/file-script.js"></script> <!-- Liên kết JavaScript --> </head>Giải thích: Thẻ
<link>vớirel="stylesheet"dùng để nhúng file CSS vào trang. Thẻ<script>với thuộc tínhsrcdùng để nhúng file JavaScript. Việc đặt script trong<head>có thể làm chậm quá trình hiển thị nội dung, nên đôi khi script được đặt ở cuối thẻ<body>. Chúng ta sẽ tìm hiểu kỹ hơn về CSS và JavaScript trong các bài sau.
4. Phần thân tài liệu: <body>
Thẻ <body> là nơi chứa tất cả nội dung hiển thị mà người dùng thực sự nhìn thấy và tương tác trên trình duyệt. Từ văn bản, hình ảnh, liên kết, danh sách, bảng biểu, video cho đến các form nhập liệu, nút bấm... tất cả đều nằm trong thẻ <body>.
<body>
<!-- Nội dung hiển thị của trang web sẽ ở đây -->
<h1>Chào mừng bạn đến với trang web!</h1>
<p>Đây là một đoạn văn bản đơn giản.</p>
<img src="duong-dan/den/hinh-anh.jpg" alt="Mô tả hình ảnh">
<a href="https://fullhousedev.com">Liên kết tới FullhouseDev</a>
</body>
Giải thích: Phần <body> chính là "trái tim" của trang web, nơi mọi nội dung sống động được đặt vào. Các thẻ như <h1> (tiêu đề lớn), <p> (đoạn văn), <img> (hình ảnh), <a> (liên kết) chỉ là một vài ví dụ nhỏ về hàng trăm thẻ HTML khác mà bạn sẽ học để tạo nên nội dung.
Cấu trúc hoàn chỉnh của một trang HTML cơ bản
Kết hợp tất cả các phần trên lại, chúng ta có cấu trúc sườn của một tài liệu HTML5 hoàn chỉnh và hợp lệ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Cơ Bản Đầu Tiên Của Tôi</title>
<!-- Có thể thêm link CSS hoặc script ở đây -->
</head>
<body>
<!-- Nơi bạn sẽ thêm tất cả nội dung hiển thị -->
<h1>Xin chào Thế giới Web!</h1>
<p>Đây là cấu trúc cơ bản nhất của một trang HTML.</p>
<p>Bạn đã đi bước đầu tiên vào thế giới lập trình web rồi đấy!</p>
</body>
</html>
Giải thích: Đoạn code trên chính là khung sườn mà bạn sẽ sử dụng cho mọi trang web HTML mình tạo ra. Bạn chỉ việc sao chép nó và bắt đầu thêm nội dung vào bên trong thẻ <body> và cấu hình các thông tin cần thiết trong <head>.
Comments