Cấu trúc cơ bản của HTML

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>

<h1>This a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</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: . 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:

Hẹn gặp bạn ở Việt Tâm Đức – Hẹn gặp bạn ở đỉnh cao thành công – Hẹn gặp bạn ở TOP 1 Google

Bản quyền: CÔNG TY CỔ PHẦN THƯƠNG MẠI VÀ GIÁO DỤC VIỆT TÂM ĐỨC
Trụ sở: 31 Phú Đô, Mễ Trì, Từ Liêm, Hà Nội.
VPGD: Phòng 1114, Tòa nhà CT.A 789 Bộ Quốc Phòng, Mỹ đình, Hà Nội (gần bến xe mỹ đình, gần sân vận động quốc gia.)
Điện thoại: 04 62 966 151 Hotline: 0975252437 - 0942459521 -0966444646 Email: daotaolaptrinh.edu@gmail.com
website: antamduc.com | daotaolaptrinh.edu.vn | atdtravel.net | dulichantamduc.com.vn | viettamduc.com
Giấy phép xuất bản của Bộ thông tin truyền thông. Giấy phép doanh nghiệp số: 0106308309 của Sở kế hoạch đầu tư TP. Hà nội.

Năm 2014 Việt Tâm Đức vinh dự nhận giải thưởng Bảng vàng DOANH NGHIỆP VĂN HÓA, DOANH NHÂN NHÂN- TÂM - TÀI - TRÍ - TÍN

khóa học html css tại Bắc Giang

Thứ Ba, 22 tháng 4, 2014

khóa học html css tại Bắc Giang

Cấu trúc cơ bản của HTML