Giới Thiệu HTML

HTML là viết tắt của Hyper Text Markup Language , đây là ngôn ngữ được sử dụng rộng rãi nhất trên Web để phát triển các trang web.

HTML được Berners-Lee tạo ra vào cuối năm 1991 nhưng "HTML 2.0" là đặc tả HTML tiêu chuẩn đầu tiên được xuất bản năm 1995. HTML 4.01 là phiên bản chính của HTML và được xuất bản vào cuối năm 1999.

Mặc dù phiên bản HTML 4.01 được sử dụng rộng rãi nhưng hiện tại chúng tôi đang có phiên bản HTML-5 là phần mở rộng của HTML 4.01 và phiên bản này đã được xuất bản vào năm 2012.

Tại sao phải học HTML?

Ban đầu, HTML được phát triển với mục đích xác định cấu trúc của các tài liệu như tiêu đề, đoạn văn, danh sách, v.v để tạo điều kiện chia sẻ thông tin khoa học giữa các nhà nghiên cứu.

Giờ đây, HTML đang được sử dụng rộng rãi để định dạng các trang web với sự trợ giúp của các thẻ khác nhau có sẵn bằng ngôn ngữ HTML.

HTML là BẮT BUỘC cho sinh viên và các chuyên gia làm việc để trở thành một kỹ sư phần mềm tuyệt vời đặc biệt khi họ đang làm việc trong lĩnh vực thiết kế web. Tôi sẽ liệt kê một số lợi thế chính của việc học HTML:

  • Tạo trang web: Bạn có thể tạo một trang web hoặc chỉnh sửa một mẫu web có sẵn nếu bạn biết rõ về HTML.
  • Trở thành một nhà thiết kế web: Nếu bạn muốn bắt đầu sự nghiệp như một nhà thiết kế web chuyên nghiệp thì HTML, CSS và JavaScript là những kỹ năng bắt buộc.
  • Hiểu biết về web: Nếu bạn muốn tối ưu hóa trang web của mình, để tăng tốc độ và hiệu suất của nó, thật tốt khi biết HTML để mang lại kết quả tốt nhất.
  • Tìm hiểu các ngôn ngữ khác: Một khi bạn hiểu cơ bản về HTML thì các công nghệ liên quan khác như javascript, php hoặc angular trở nên dễ hiểu hơn.
Thiết kế web

Chương trình đầu tiên bằng HTML.

Chỉ để cung cấp cho bạn một chút hứng thú về HTML, tôi sẽ cung cấp cho bạn chương trình Hello World.

<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
   </head>	
   <body>
      <h1>This is a heading</h1>
      <p>Hello World!</p>
   </body>	
</html>

Các ứng dụng của HTML

Như đã đề cập trước đây, HTML là một trong những ngôn ngữ được sử dụng rộng rãi nhất trên web. Tôi sẽ liệt kê một vài trong số họ ở đây:

  • Phát triển trang web: HTML được sử dụng để tạo các trang được hiển thị trên web. Hầu như mọi trang web đều có các thẻ html trong đó để hiển thị chi tiết trong trình duyệt.
  • Điều hướng Internet: HTML cung cấp các thẻ được sử dụng để điều hướng từ trang này sang trang khác và được sử dụng nhiều trong điều hướng internet.
  • UI Responsive: Các trang HTML hiện nay hoạt động tốt trên tất cả các nền tảng, thiết bị di động, tab, máy tính để bàn hoặc máy tính xách tay nhờ chiến lược thiết kế đáp ứng.
  • Hỗ trợ ngoại tuyến:  Các trang HTML sau khi tải về có thể truy cập ngoại tuyến trên máy mà không cần internet.
  • Phát triển trò chơi: HTML5 hỗ trợ lĩnh vực phát triển trò chơi.

Đối tượng độc giả

Hướng dẫn này được thiết kế cho các nhà thiết kế web và các lập trình viên để có hiểu biết đầy đủ về HTML.

Hướng dẫn này sẽ cung cấp cho bạn đầy đủ các thành phần để bắt đầu với HTML để bạn có thể tự mình đạt trình độ chuyên môn cao hơn.

Điều kiện tiên quyết

Trước khi tiếp tục với hướng dẫn này, bạn nên có kiến ​​thức làm việc cơ bản với hệ điều hành Windows hoặc Linux, ngoài ra bạn phải làm quen với:

  • Trải nghiệm với bất kỳ trình soạn thảo văn bản nào như Visual Studio Code, Notepad++ hoặc Notepad, v.v.
  • Biết cách tạo thư mục và tập tin trên máy tính của bạn.
  • Biết cách điều hướng qua các thư mục khác nhau.
  • Biết cách nhập nội dung trong tập tin và lưu chúng trên máy tính.
  • Hiểu về hình ảnh ở các định dạng khác nhau như định dạng JPEG, PNG.
Visual Studio Code

Tổng quan HTML

HTML là viết tắt của Hyper Text Markup Language và nó là ngôn ngữ được sử dụng rộng rãi nhất để viết các trang web.

  • Siêu văn bản đề cập đến cách các trang web (tài liệu HTML) được liên kết với nhau. Do đó, liên kết có sẵn trên một trang web được gọi là Hypertext.
  • Như tên gọi của nó, HTML là một ngôn ngữ đánh dấu , có nghĩa là bạn sử dụng HTML để chỉ "đánh dấu" một tài liệu văn bản với các thẻ cho trình duyệt web biết cách cấu trúc nó để hiển thị.

Ban đầu, HTML được phát triển với mục đích xác định cấu trúc của các tài liệu như tiêu đề, đoạn văn, danh sách, v.v để tạo điều kiện chia sẻ thông tin khoa học giữa các nhà nghiên cứu.

Giờ đây, HTML đang được sử dụng rộng rãi để định dạng các trang web với sự trợ giúp của các thẻ khác nhau có sẵn bằng ngôn ngữ HTML.

Tài liệu HTML cơ bản

Ở dạng đơn giản nhất, sau đây là một ví dụ về tài liệu HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Thẻ HTML

Như đã nói trước đó, HTML là một ngôn ngữ đánh dấu và sử dụng các thẻ khác nhau để định dạng nội dung. Các thẻ này được đặt trong dấu ngoặc nhọn <Tên thẻ> .

Ngoại trừ một vài thẻ không có thẻ đóng, hầu hết các thẻ đều có thẻ đóng tương ứng. Ví dụ: <html> có thẻ đóng </ html> và thẻ <body> có thẻ đóng </ body>, v.v.

Ví dụ trên về tài liệu HTML sử dụng các thẻ sau:

STT Thẻ & Mô tả
1 <! DOCTYPE ...>

Thẻ này xác định loại tài liệu và phiên bản HTML.

2 <html>

Thẻ này chứa tài liệu HTML hoàn chỉnh và chủ yếu bao gồm tiêu đề tài liệu được biểu thị bằng <head> ... </ head> và phần thân tài liệu được thể hiện bằng các thẻ <body> ... </ body>.

3 <head>

Thẻ này đại diện cho tiêu đề của tài liệu có thể giữ các thẻ HTML khác như <title>, <link>, v.v.

4 <title>

Thẻ <title> được sử dụng bên trong thẻ <head> để đề cập đến tiêu đề tài liệu.

5 <body>

Thẻ này đại diện cho phần thân của tài liệu giữ các thẻ HTML khác như <h1>, <div>, <p>, v.v.

6 <h1>

Thẻ này đại diện cho tiêu đề.

7 <p>

Thẻ này đại diện cho một đoạn văn bản.

Để tìm hiểu HTML, bạn sẽ cần nghiên cứu các thẻ khác nhau và hiểu cách chúng hoạt động, trong khi định dạng một tài liệu văn bản.

Học HTML rất đơn giản vì người dùng chỉ cần học cách sử dụng các thẻ khác nhau để định dạng văn bản hoặc hình ảnh để tạo ra một trang web đẹp.

World Wide Web Consortium (W3C) khuyên bạn nên sử dụng các thẻ chữ thường bắt đầu từ HTML 4.

Lập trình HTML

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

Một tài liệu HTML điển hình sẽ có cấu trúc như sau:

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

Chúng ta sẽ tìm hiểu tất cả các thẻ tiêu đề và thẻ nội dung trong các chương tiếp theo, nhưng bây giờ chúng ta hãy xem thẻ khai báo tài liệu là gì.

Thẻ khai báo <! DOCTYPE>

Thẻ khai báo <! DOCTYPE> được trình duyệt web sử dụng để hiểu phiên bản HTML được sử dụng trong tài liệu. Phiên bản hiện tại của HTML là 5 và nó sử dụng khai báo sau:

<!DOCTYPE html>

Có nhiều loại khai báo khác có thể được sử dụng trong tài liệu HTML tùy thuộc vào phiên bản HTML nào đang được sử dụng. Chúng ta sẽ thấy chi tiết hơn về điều này trong khi thảo luận về thẻ <! DOCTYPE ...> cùng với các thẻ HTML khác.



Bài viết liên quan:

Thẻ meta trong HTML là gì? Vì sao thẻ meta rất quan trọng khi SEO website? Cách sử dụng thẻ meta trong HTML.

Các thẻ cụm từ quan trọng trọng HTML như: em, code, strong, address, abbr, mark, blockquote, ...

Bài viết này sẽ hướng dẫn bạn các thẻ định dạng trong HTMl như: b, i, u, strike, tt, pre, sup, sub, div, span, ...