Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Nguyễn Nghĩa Thông thường để lập trình một trang web, chúng ta cần phải biết rất nhiều kiến thức như HTML, CSS, JavaScript. Nhưng đối với những người bắt đầu lập trình Web thì việc bắt đầu với HTML là điều cơ bản của mỗi lập trình viên. Trong phạm vi những bài viết về HTML, tác giả muốn cung cấp cho độc giả những kiến thức cần thiết để có thể xây dựng được một trang web cơ bản.

Giới thiệu

Thông thường để lập trình một trang web, chúng ta cần phải biết rất nhiều kiến thức như HTML, CSS, JavaScript. Nhưng đối với những người bắt đầu lập trình Web thì việc bắt đầu với HTML là điều cơ bản của mỗi lập trình viên. Trong phạm vi những bài viết về HTML, tác giả muốn cung cấp cho độc giả những kiến thức cần thiết để có thể xây dựng được một trang web cơ bản. 

Tiền đề bài viết

Bài viết nằm trong chương trình tự học HTML của stdio.vn do tác giả Nguyễn Nghĩa thiết kế.

Đối tượng hướng đến

Những độc giả đang tiếp cận với lập trình HTML.

Tổng quan về HTML

Giới thiệu

HLML là gì? HTML viết tắt của cụm từ Hyper Text Markup Language, là ngôn ngữ đánh dấu siêu văn bản, sử dụng để xây dựng cấu trúc và định dạng các siêu văn bản của một trang web, chính vì vậy mà HTML được xem là bộ khung của một website.

Một tài liệu HTML được tạo thành từ những phần tử HTML được quy định bởi các thẻ (tags) xác định bởi cặp dấu đóng mở ví dụ như <html></html>. Mỗi tags sẽ có cách hiển thị khác nhau trên trình duyệt. 

Thông thường mội website sẽ có rất nhiều tài liệu html thường gọi là tập tin html. Mỗi tài liệu như vậy đều có đuôi mở rộng .htm hay .html.

Lịch sử hình thành

Từ khi được phát minh và phát triển cho đến bây giờ thì HTML có rất nhiều phiên bải khác nhau. Phiên bản bản mới nhất là HTML5 được phát hành chính thức vào năm 2014 với nhiều tính năm mới.

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

Công cụ lập trình

Để lập trình một trang web với HTML chúng ta cần có những công cụ như sau:

Text Editor

Text Editor là chương trình phần mềm giúp chúng ta có thể soạn thảo ra tài tài liệu HTML. Có rất nhiều Text Editor để chúng ta làm được việc đó như Notepad, Notepad++, Dream Viewer, Sublime Text. Nhưng với những bạn mới bắt đầu học HTML thì trong quá trình học tập tôi khuyến kích các bạn nên sử dụng Notepad có sẵn trong Windows để thực hành.

Để mở Notepad ta nhấn tổ hợp phím Windows + R để mở hộp thoại Run. Và gõ vào đoạn text như đưới dây:

ss_1

Nhấn Enter để mở Notepad.

Browser

Browser chính là trình duyệt của các bạn như Chorme, Mozilla Firefox, Internet Explorer...Nhiệm vụ của nó là đọc tài liệu HTML được soạn thỏa bởi các Text Editor và hiển thị lên trình duyệt.

Trong chuỗi bài viết về HTML tôi sẽ sử dụng Notepad và Mozilla Firefox để thực hành.

Cấu trúc của tài liệu HTML

Một tài liệu HTML thông thường sẽ có 3 phần cơ bản như sau:

  • <!DOCTYPE>: Phần khai báo chuẩn phiên bản HTML mà ta sử dụng.
  • <head></head>: Phần khai tất cả thông tin của tài liệu HTML như khai báo về meta, title, css, javascript.
  • <body></body>: Phần chứa nội dung của trang web, tất cả nội dung mà người dùng nhìn thấy sẽ được khai báo ở đây.

Với những phiên bản HTML khác nhau thì sẽ có DOCTYPE khác nhau như sau:

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Cấu trúc của một trang web:

<!DOCTYPE html>
<html>
	<head>
		<!-- Khai báo các thông tin của tài liệu HTML được viết ở đây -->
	</head>
	
	<body>
			<!-- Nội dung của tài liệu HTML được viết ở đây -->
	</body>
</html>

Tạo tài liệu HTML với Notepad

Mở Notepad và soạn thảo đoạn mã như dưới đây:

<!DOCTYPE html>
<html>
	<head>
		<title>Lập trình HTML</title>
	</head>
	
	<body>
		<p>Xin chào tất cả các bạn!</p>
	</body>
</html>

ss_2

Vào File > Save. Đặt tên cho tài liệu HTML với đuôi mở rộng .html hoặc .htm (không có sự khác biệt giữa hai đuôi mở rộng này), chọn Encoding là UTF-8, chọn nơi lưu (ở đây tôi lưu ở Desktop). Sau đó nhấn Save để kết thúc.

ss_3

Sau đó mở file này với trình duyệt bất kì chúng ta sẽ thấy kết quả như sau:

ss_4

Lời kết

Trong bài viết này tôi đã giới thiệu sơ qua về HTML cũng như cấu trúc của một tài liệu HTML. Hy vọng sẽ giúp ích cho các bạn mới bắt đầu tiếp xúc với HTML.

THẢO LUẬN
ĐÓNG