HTML là gì? Cấu trúc HTML của một trang web

# Series HTML cho người mới bắt đầu

HTML là gì? Cấu trúc HTML của một trang web

Nội dung bài viết


Xin chào tất cả các bạn đang theo dõi bài viết thuộc series "HTML cho người mới bắt đầu" của Flipper, đây là bài đầu tiên trong loạt bài hướng dẫn các bạn từng bước tiếp cận đến ngôn ngữ HTML. Nội dung hôm nay chúng ta sẽ cùng nhau tìm hiểu HTML là gì, nó hoạt động ra sao, làm thế nào để nó tạo ra nội dung cho một trang web... Ok, let's go!

1. HTML là gì?

HTML là tên viết tắt tiếng Anh của cụm từ HyperText Markup Language (tạm dịch là Ngôn ngữ đánh dấu siêu văn bản), nó được thiết kế nhằm tạo và định dạng nội dung cho một trang web theo các cú pháp được định nghĩa trước, cú pháp này được khai báo thông qua các tag (tức là thẻ). HTML kết hợp cùng với CSS và Javascript là bạn đã có thể tạo ra một trang web tĩnh hoàn chỉnh mà không cần phải đụng đến bất kỳ công nghệ cao siêu nào. Chính vì thế mỗi trình duyệt (browser) đều có khả năng biên dịch các ngôn ngữ HTML, CSS và Javascript để hiển thị cho người dùng. Thông thường nó sẽ được lưu trữ ở tệp có định dạng mở rộng là .html hoặc .htm.

Ví dụ các bạn thử truy cập vào trang chủ của Flipper, chúng ta sẽ nhận được một trang hiển thị giao diện với các bố cục, nội dung rõ ràng.

Ảnh minh họa giao diện flipper.vnTiếp đó các bạn nhấn tổ hợp Ctrl + U, lập tức một tab mới hiện ra chứa toàn là code như thế này:

Ảnh minh họa source web flipper.vn

Phím tắt này giúp ta có thể xem source của một trang web, và những dòng code trong source này chính là HTML đấy các bạn ạ. Để hiểu rõ hơn cấu trúc HTML của một trang web sẽ có "hình dạng" như thế nào, hãy cùng mình chuyển đến phần tiếp theo nhé!

2. Cấu trúc HTML của một trang web

Trước tiên các bạn hãy nhìn vào đoạn code HTML bên dưới:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Đây là bố cục HTML cơ bản nhất của một website. Cấu trúc sẽ chia làm hai phần chính: phần head và phần body.

Cấu trúc HTML trong một trang web

Các phần head và body này sẽ được nằm trong thẻ html. Thẻ html này sẽ chứa toàn bộ bố cục của một trang web HTML.

Trước khi đi sâu vào hai phần này, mình sẽ nói về thẻ

<!DOCTYPE html>

Như các bạn thấy, thẻ này nằm ở trên cùng, không thuộc phạm vi thẻ html. Tên cụ thể là Document type (kiểu tài liệu), có nghĩa nó sẽ khai báo cho trình biên dịch (compiler) của browser cũng như các công cụ tìm kiếm (search engine) biết được rằng đây là một kiểu nội dung của HTML.

Đối với phần head, nó được khai báo bởi thẻ head. Các đoạn code trong thẻ này sẽ khai báo thuộc tính, thông tin cũng như thông số cần thiết của một website. Những thông tin trong thẻ này đa số là không hiển thị trên trang web. Cơ bản nhất là thẻ title mà các bạn thấy ở hình trên, thẻ này sẽ thông báo cho trình duyệt biết tiêu đề của trang web.

Chẳng hạn trang Flipper có tiêu đề trên tab browser là:

Title của trang flipper.vn

Thì trong code HTML, chúng ta sẽ khai báo nó thông qua thẻ title như sau:

<title>Chia sẻ kiến thức, kinh nghiệm về lập trình, công nghệ - Flipper</title>

Về phần body, nó được khai báo qua thẻ body, thẻ này sẽ chứa toàn bộ nội dung chính của website chúng ta, những nội dung này sẽ được browser hiển thị lên trang để người dùng có thể thấy được.

3. Các công cụ để học HTML

HTML chỉ đơn thuần là một ngôn ngữ đánh dấu văn bản nên về công cụ hỗ trợ cho việc code cũng không quá nhiều và cao siêu. Các bạn chỉ cần chuẩn bị cho mình một trình soạn thảo (editor) và một browser là đủ.

Về browser thì chắc mình không cần phải nói quá chi tiết nhỉ? Đa số các bạn đều có thể lựa chọn cho mình một browser mà bạn yêu thích, nhưng mình vẫn khuyên các bạn nên sử dụng các browser thịnh hành hiện nay như Google Chrome, Firefox hoặc Opera với các phiên bản mới nhất để hỗ trợ đầy đủ các tính năng.

Về phần editor, mình khuyên các bạn nên sử dụng Notepad++. Mình nghĩ đây là một editor khá phù hợp cho các bạn mới "chập chững" học lập trình web nói chung và HTML nói riêng. Nó không hỗ trợ quá nhiều plugin code nhanh làm cho bạn không có cơ hội luyện trí nhớ nhưng cũng không quá ít chức năng để giúp bạn có thể code một cách dễ dàng, thoải mái. Các bạn có thể download phiên bản mới nhất của Notepad++ tại đây.

Ok, sau khi đã có đầy đủ các công cụ cần thiết, tại sao chúng ta không nên luyện tập một chút nhỉ?

4. Tạo file HTML đầu tiên

Đầu tiên các bạn nên chọn một vị trí thư mục để lưu trữ các file ví dụ xuyên suốt series này. Mình khuyên các bạn nên chọn một vị trí cụ thể để dễ tìm kiếm. Ở đây mình sẽ tạo một folder ngoài desktop với tên là hochtml như thế này:

Tạo folder lưu trữ file HTML

Tiếp đó các bạn mở thư mục hochtml lên và tạo file HTML với tên là hello.html. Đối với một số máy, nó sẽ không cho chúng ta đổi định dạng file text khi tạo file mới hay đổi tên. Chẳng hạn như hình bên dưới:

Lỗi tạo file HTML

Như các bạn thấy, bên cột type nó vẫn là Text Document, có nghĩa tên file nó là hello.html.txt chứ không phải là hello.html. Vậy làm thế nào để khắc phục đây? 

Đơn giản lắm các bạn ạ! Bạn nào sử dụng Windows 8 trở lên có thể làm các bước sau:

  • Mở File Explorer lên
  • Nhấp chọn tab "View" tại góc trên tay trái màn hình
  • Sau đó click vào tùy chọn "File name extensions"

Hướng dẫn bật chế độ đổi đuôi định dạng file trong Windows 8, 10

Đối với những dòng Windows và hệ điều hành khác, các bạn có thể tra Google với từ khóa "cách hiện và sửa đuôi tập tin trên ..." nhé!

Ok giờ các bạn có thể đổi tên file đúng với định dạng HTML rồi đấy.

Tạo file HTML đúng định dạng

Tiếp theo, các bạn click chuột phải vào file và chọn "Edit with Notepad++". Ứng dụng Notepad++ sẽ được mở lên kèm với file hello.html mà chúng ta tạo ban nãy. Hiện tại thì nó trống trơn, các bạn hãy áp dụng các kiến thức vừa học để khai báo nội dung HTML cơ bản. Dưới đây là đoạn code tham khảo, các bạn có thể gõ theo để thực hành:

<!DOCTYPE html>
<html>
<head>
	<title>Đây là trang web đầu tiên của tôi</title>
</head>
<body>
	Đây là nội dung đầu tiên của tôi.
</body>
</html>

Ok, các bạn nhớ lưu lại, sau đó click đúp vào file hello.html để mở nó trên trình duyệt nhé!

Kết quả file HTML đầu tiên

Các bạn cũng có thể truy cập trực tiếp file HTML thông qua đường dẫn thư mục của máy tính bằng cách dán nó vào thanh địa chỉ trên browser.

5. Lời kết

Bài đâu tiên mình sẽ kết thúc tại đây. Qua hôm nay, mình mong các bạn đã hiểu khái quát HTML nó là gì, cách nó hoạt động trên trình duyệt ra sao và cấu trúc cơ bản HTML của một trang web. Hi vọng các bạn sẽ xem lại và thực hành nhiều lần để có thể ghi nhớ nó, bởi vì đây là nền tảng cho các bài học sau này. Cảm ơn các bạn đã luôn đồng hành cùng Flipper, chúc các bạn học tốt và hẹn gặp lại!


Ủng hộ chúng tôi

Bình luận