Search

Khởi đầu với một trang web HTML đơn giản

  • Share this:
Khởi đầu với một trang web HTML đơn giản

Một trang web chẳng qua là một tập tin văn bản được viết bằng các thẻ HTML hướng dẫn cho trình duyệt biết phải hiển thị nội dung như thế nào. Để tạo ra một tập tin HTML, đơn giản nhất bạn sử dụng trình soạn thảo văn bản như Notepad, Notepad++, hay dùng IDE như Visual Studio Community, PHPStorm… Chú ý đừng tạo tập tin HTML bằng Microsoft Word vì nó sẽ thêm các mã lạ khác vào trang web của bạn. Sau khi lưu tập tin HTML, bạn phải kiểm tra lại đuôi của tập tin, phải là .htm hoặc .html (trình soạn thảo văn bản có thể sẽ tự động thêm đuôi .txt vào đằng sau).

Bạn có thể xem nội dung một tập tin HTML luôn bằng trình duyệt web mà không cần thông qua một web server, bằng cách nhấn đúp vào file HTML đó. Trình duyệt web sẽ bật ra và hiển thị nội dung của tập tin HTML.


Cùng xem cấu trúc của một tập tin HTML:

<!doctype html>  
<html lang = "en" >  
<head>  
<meta charset = "utf-8" >  
<title> The First Web Page </title>  
</head>  
<body>  
<p>  
In the beginning, Tim created the HyperText Markup Language. The Internet was without form and void, and text was upon the face of the monitor and the Hands of Tim were moving over the face of the keyboard. And Tim said, Let there be links; and there were links. And Tim saw that the links were good; and Tim separated the links from the text. Tim called the links Getting Started with a Simple Web Page 27 Anchors, and the text He called Other Stuff. And the whole thing together was the first Web Page.    
</p>  
</body>  
</html>  
 

Toàn bộ tập tin HTML bao gồm các cặp thẻ, gọi là HTML tag. Một thẻ HTML mở nằm trong dấu ngoặc nhọn, như <body>, thì sẽ có thẻ đóng tương ứng của nó là </body>. Một số thẻ đặc biệt không có thẻ đóng, ví dụ: <img />, <meta /> Mỗi cặp thẻ HTML sẽ “nói” cho trình duyệt biết nội dung bên trong nó là định dạng gì. Thẻ HTML không phân biệt chữ hoa, chữ thường, nhưng thường bạn nên viết tất cả bằng chữ thường cho dễ nhìn.

Thẻ đầu tiên của một tập tin HTML luôn là thẻ DOCTYPE, ví dụ <!DOCTYPE html>. Thẻ DOCTYPE chỉ dẫn cho trình duyệt biết cú pháp HTML bạn viết trong tập tin là phiên bản HTML nào. Ví dụ: <!DOCTYPE html> tức là bạn đang viết theo chuẩn HTML 5. Khi đó, trình duyệt sẽ biết phân tích và hiển thị tập tin HTML của bạn theo đúng chuẩn phiển bản HTML đó. Bạn có thể đọc bài viết chi tiết về thẻ DOCTYPE tại đây.

Ngay sau thẻ DOCTYPE luôn là thẻ <html>, và ở cuối cùng của trang HTML là thẻ đóng </html>. Cặp thẻ <html></html> bao trùm tất cả các thẻ khác. Một tài liệu HTML luôn có một cặp thẻ <html> báo hiệu bắt đầu và kết thúc trang web. 

Ngay sau thẻ <html> là khu vực head, nằm trong cặp thẻ <head></head>. Khu vực head chứa các thẻ khai báo thông tin về trang web như tiêu đề, meta, link…, các thông tin này quan trọng nhưng không thực sự xuất trên trang web.

Ngay sau đóng thẻ head là khu vực body, nằm trong cặp thẻ <body></body>. Khu vực body chứa các thẻ và nội dung thực sự xuất hiện trong trang web.

Như vậy, cấu trúc chung của một trang HTML luôn bao gồm:

<!doctype html>  
<html lang = "en" >  
<head>  
<meta charset = "utf-8" >  
<title>Tiêu đề trang web</title>  
</head>  
<body>  
<p> Nội dung trang web tại đây</p>  
</body>  
</html>  

Bài trước: Cấu hình Apache trong XAMPP để chạy nhiều websiteBài tiếp theo: Thẻ DOCTYPE và các thẻ META

HỌC VIỆN CÔNG NGHỆ CNET

cnet.edu.vn | info@cnet.edu.vn

Admin Admin

Admin Admin

CNET Academy Administrator