HTML là gì? Giải thích ngôn ngữ lập trình HTML
Mục lục
Với người mới bắt đầu lập trình web thì HTML là một trong những ngôn ngữ cơ bản đầu tiên mà bạn cần phải nắm vững. Vậy HTML là gì? Đánh giá ưu nhược điểm của HTML và hơn thế nữa.
HTML là gì?
Khái niệm: HTML là từ viết tắt của Hypertext Markup Language, là sự kết hợp của Hypertext và Markup, hay còn được gọi là ngôn ngữ siêu văn bản. HTML có chức năng giúp người dùng xây dựng và cấu trúc các phần trong trang web hoặc ứng dụng, thường được sử dụng trong phân chia các đoạn văn, heading, link, blockquotes,
Lịch sử HTML
- Cha đẻ của HTML là Tim Berners – Lee – nhà vật lý học, là người nghĩ ra ý tưởng dựa trên hệ thống hypertext trên nền internet.
- Năm 1991, xuất bản phiên bản đầu tiên của HTML gồm 18 tag HTML.
- Năm 1998, HTML phiên bản 4.01 ra đời.
- Năm 2000, các phiên bản HTML được thay thế bằng XHTML.
- Năm 2014, HTML được nâng cấp lên HTML5 với sự cải tiến rõ rệt.
HTML hoạt động như thế nào?
HTML documents là files được kết thúc .html hay .htm. Với những file này bạn có thể xem bằng cách sử dụng bất kỳ trình duyệt nào (Google Chrome, Firefox, Safari,…). Các trình duyệt đọc những file HTML này và biến đổi chúng thành một dạng visual trên Internet sao cho người dùng có thể xem và hiểu được chúng.
Bình thường một trang web có nhiều có web HTML như: trang chủ, giới thiệu, liên hệ, blog,… Mỗi trang như thế đều cần một trang HTML riêng. Trong mỗi trang HTML chứa một bộ các tag (elements) để xác định từng khối của một trang web và tạo thành một cấu trúc gồm section, paragraph, heading và các khối nội dung khác.
Đa phần các HTML elements đều có tag mở và tag đóng <tag></tag>. Bạn có thể xem qua một đoạn HTML được cấu trúc như thế nào:
<div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph</p>
<img src="/" alt="Alternative information">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>Trong đó:
- Element được bao ở ngoài là bộ tag division
<div></div>dùng để markup cho toàn bộ nội dung. - Tiếp theo là các thẻ tag tiêu đề
<h1></h1>,<h2></h2>,<h3></h3>. - Đoạn văn
<p></p>. - Hình ảnh
<img>. - Đoạn văn thứ 2 chứa tag
<a></a>với attribute href chứa URL đích. - Tag hình ảnh chứa 2 attribute:
srccho ảnh vàaltcho mô tả hình ảnh.
Ưu và nhược điểm của HTML
Ưu điểm của HTML là gì?
HTML được sử dụng để tạo bố cục, cấu trúc trang web. Nó có một số ưu điểm sau:
- Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn
- Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay
- Học HTML khá đơn giản
- Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao
- Sử dụng mã nguồn mở, hoàn toàn miễn phí
- HTML là chuẩn web được vận hành bởi W3C
- Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js,…)
Nhược điểm của HTML là gì?
Bên cạnh ưu điểm, HTML cũng có các nhược điểm nhất định. Cụ thể như sau:
- Chỉ được áp dụng chủ yếu cho web tĩnh. Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP)
- Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer.
- Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới. Do đó, dù trong HTML document có sử dụng các tag này thì trình duyệt cũng không đọc được).
- Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML
Vai trò của HTML trong lập trình Web
HTML là một loại ngôn ngữ đánh dấu siêu văn bản. Như tôi đã đề cập ở trên, nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh. Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web. Đồng thời, nó còn hỗ trợ khai báo các File kỹ thuật số như nhạc, Video, hình ảnh,…
Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn sẽ cần đến HTML. Theo quan điểm của tôi, lập trình viên có thể lựa chọn ngôn ngữ lập trình riêng cho Website tùy vào mục đích sử dụng. Nhưng HTML thực chất chứa những yếu tố cần thiết cho mọi thể loại Website. Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập. Điều này đúng dù trang của bạn xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu.
Theo tôi được biết, trước khi bắt tay vào thiết kế, làm việc trên một trang Web thì nhà phát triển Web, lập trình viên đều phải học HTML như một loại ngôn ngữ cơ bản.
Các đặc điểm của HTML
HTML có nhiều thẻ định dạng, do đó bạn có thể trình bày trang Web dễ dàng, hiệu quả với ngôn ngữ đánh dấu siêu văn bản này. Với tôi, nó là một ngôn ngữ đánh dấu dễ dàng và đơn giản để sử dụng. Chúng ta có thể sử dụng nó để thiết kế trang Web cùng với văn bản một cách linh hoạt.
Một đặc điểm theo tôi khá thú vị là HTML có thể liên kết đến các trang Web khác. Nhờ ngôn ngữ đánh dấu này, bạn có thể thêm các Video, hình ảnh, âm thanh vào để các Website hấp dẫn, đẹp mắt và dễ tương tác hơn.
Đặc biệt, HTML có thể hiển thị trên bất kỳ nền tảng nào khác như Linux, Windows, và Max vì nó là một nền tảng độc lập.
Bố cục HTML là gì?
HTML có rất nhiều tag khác nhau. Mỗi thẻ sẽ có những tác dụng nhất định, giúp xây dựng nên một cấu trúc hoàn chỉnh cho Website.
Để biết bố cục HTML của một trang web như thế nào, mời bạn xem ví dụ code bên dưới:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>The Main Heading</h1> <h2>A catchy subheading</h2> <p>First paragraph</p> </body> </html>
Trong đó:
- <!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị
- <html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ đóng gói tất cả nội dung của trang HTML
- <head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề trang, charset
- <title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu đề của trang
- <body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang
- <h1></h1>, <h2></h2>: định dạng dữ liệu dạng heading. Thông thường có 6 cấp độ heading trong HTML, trải dài từ <h1> tới <h6>. Trong đó, <h1> là cấp độ heading cao nhất và <h6> là cấp độ heading thấp nhất.
- <p> và </p>: cặp thẻ chứa các đoạn văn bản của trang web
Các tag thông dụng nhất của HTML
tag được sử dụng chủ yếu là block-level tags và inline tags.
Đây là loại tag cấp cao, sẽ chiếm toàn bộ không gian của trang web và luôn bắt đầu dòng mới của trang. 3 block-level tags mà tất cả các trang HTML đầu cần có đó là: <html></html>, <head></head> và <body></body>. Ý nghĩa và chức năng của những tag này đã được đề cập ở trên nên trong phần này chúng tôi sẽ không nhắc lại nữa.
Loại tag này chỉ chiếm một phần nhỏ trong không gian Website và cũng không bắt đầu dòng mới của trang. Inline tags thường được dùng để định dạng, tạo bố cục cho nội dung bên trong của block-level tags.
HTML có nhiều dạng inline tags, ví dụ như: cặp tag <strong></strong> dùng để định dạng chữ in đậm, còn cặp tag <em></em> dùng để định dạng chữ in nghiêng.
Nếu muốn gắn hyperlinks vào trang, bạn có thể sử dụng cặp tag <a></a> với attributes href để xác định đường link cụ thể. Đoạn code lúc này có dạng:
<a href="https://example.com/">Click me!</a>