Trong bài viết này, chúng ta sẽ mổ xẻ một tài liệu HTML đơn giản để xem cấu trúc cơ bản của nó như thế nào.
Bạn hãy mở Notepad++ lên (hay bất kì trình soạn thảo nào tùy bạn). Trước tiên hãy lưu văn bản mà bạn đang mở với phần mở rộng là html, tên file bạn đặt gì cũng được. Sau đó bạn viết một đoạn code đơn giản như hình vào rồi Ctrl + S để lưu lại.
Cấu trúc cơ bản
Cấu trúc cơ bản của một tài liệu HTML bao gồm các thẻ. Các thẻ này thường mang một ý nghĩa nhất định và ảnh hưởng lên nội dung mà chúng bao quanh.
Một tài liệu HTML chuẩn chứa những phần cơ bản sau:
- Phần DOCTYPE: khai báo kiểu văn bản. Nó cho trình duyệt biết bạn đang sử dụng phiên bản HTML nào. Đây là phần rất quan trọng nhưng lại thường bị bỏ qua trong nhiều tài liệu về nhập môn HTML. Có rất nhiều loại tài liệu khác nhau trên web, và một trình duyệt chỉ có thể hiển thị một tài liệu HTML chính xác 100% nếu nó biết phiên bản HTML nào mà tài liệu đó đang sử dụng. Phần khai báo DOCTYPE ở hình minh họa là của phiên bản HTML5.
- Phần tiêu đề: bắt đầu bằng thẻ
<head>và kết thúc bởi thẻ</head>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang web. Tiêu đề là phần nội dung nằm giữa cặp thẻ<title>và</title>. Ngoài ra nó còn chứa một số khai báo khác, các thông tin phục vụ SEO mà chúng ta không đề cập ở đây. - Phần thân: nằm sau phần tiêu đề. Nó bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ
<body>và kết thúc với thẻ</body>.
Cả 2 phần tiêu đề và phần thân đều phải được nằm trong cặp thẻ <html> và </html>. Thẻ HTML báo cho trình duyệt biết nội dung giữa 2 thẻ này là một tài liệu HTML.
<html>
<body>
</body>
</html>
Bạn có thể tưởng tưởng mối quan hệ giữa các thành phần trong tài liệu HTML giống như một phả hệ vậy. Ta có thể nói các phần tử nằm bên trong là con của các phần tử bao ngoài và ngược lại, phần tử bao ngoài là cha của các phần tử bên trong. Như hình, phần tử p và h1 là đồng cấp với nhau, và cả hai là con của phần tử body. Phần tử html là cha của tất cả các phần tử khác.
Sử dụng comment
Cũng như mọi ngôn ngữ lập trình khác, comment – chú thích là phần không thể thiếu. Nó giúp bổ sung thông tin cho code, giúp code “dễ đọc”, dễ bảo trì hơn. Trong HTML, comment được sử dụng như sau: <!-- Nội dung chú thích -->. Ví dụ:
<body> <!-- Thanh menu chính --> <div id="nav"> ..... </div> <!-- Nội dung chính --> <div id="content"> ..... </div> </body>
Thực thi tài liệu HTML
Bạn đã có một tài liệu HTML đơn giản. Bạn muốn chạy nó để xem trình duyệt sẽ hiển thị nó như thế nào. Có nhiều cách để làm việc này. Đơn giản nhất thì bạn kéo thả file HTML vào khung trình duyệt đang mở. Hoặc bạn copy đường dẫn của nó trong máy tính vào ô địa chỉ của trình duyệt. Không thì phải chuột phải vào file HTML, chọn Open With, chọn trình duyệt mà bạn muốn chạy. Kết quả sẽ như sau:
