HTML là gì? Khám phá Tổng quan Về HTML

HTML là ngôn ngữ quan trọng và cũng là ngôn ngữ mà các coder khi mới bắt đầu vào nghê đều phải viết, nó cũng là nền tảng kiến thức để phát triển lên các ngôn ngữ khác. Cùng chúng mình tìm hiểu tông quan kiến thức về HTML qua nội dung sau.

Cấu trúc của HTML

Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như .

Như mình đã nói ở trên, HTML sẽ được khai báo bằng các phần tử bởi các từ khóa. Nội dung nằm bên trong cặp từ khóa sẽ là nội dung bạn cần định dạng với HTML. Ví dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản.

[html]<p>Đây là một đoạn văn bản trong HTML.</p>[/html]

Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính-

[html]<form action="https://tmarketing.vn"> </form>[/html]

Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé.

Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào:

<div>

<h1>The Main Heading</h1>

<h2>A catchy subheading</h2>

<p>Paragraph one</p>

<img src="/" alt="Image">

<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>

</div>

• Element ngoài cùng là bộ tag division (), dùng để mark up cho phần nội dung lớn.

• Nó bao gồm một tag tiêu đề (), một tag subheading (), 2 văn bản (), và một bước hình ().

• Đoạn văn thứ 2 chứa tag chứa link () với attribute href chứa địa chỉ URL đích.

• Tag hình ảnh cũng có 2 attribute: src cho ảnh, và alt cho mô tả của hình.

Ưu điểm và nhược điểm của HTML là gì?

Ưu điểm của HTML là gì?

• Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.

• Sử dụng mượt mà trên hầu hết mọi trình duyệt.

• Có quá trình học đơn giản và trực tiếp.

• Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C).

• Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.

• Mã nguồn mở và hoàn toàn miễn phí.

• Markup gọn gàng và đồng nhất.

Nhược điểm của HTML là gì?

• Nó có thể thực thi một số logic nhất định cho người dùng. Vì

• Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ: những trình duyệt cũ không render được tag mới).

• Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.

• vậy, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers.

• Một số trình duyệt chậm hỗ trợ tính năng mới.

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.

Vai trò của HTML trong lập trình Web

Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.

Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Ví dụ một website như Thachpham.com sẽ được hình thành bởi:

• HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.

• CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….

• Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).

• PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).

• MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).

• Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy.

Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.

Bố cục HTML là gì?

HTML là gì? HTML bao gồm nhiều tag khác nhau

HTML bao gồm nhiều tag khác nhau

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

HTML tags có 2 loại chính: block-level và inline tags.

Elements Block-level sẽ sử dụng toàn không gian trang web và luôn bắt đầu dòng mới của trang web. Headings và paragraph là những ví dụ chính của block tags.

Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới của trang web. Chúng thường dùng để định dạng nội dung bên trong của block level elements. Links và những tag nhấn mạnh là những tag inlines phổ biến.

Block-Level Tags

3 block level tags của mỗi trang HTML cần có những tag như là <html>, <head>, và <body>.

1. Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML.

2. Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset.

3. Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang.

<html>

<head>

<!-- META INFORMATION -->

</head>

<body>

<!-- PAGE CONTENT -->

</body>

</html>

• Có tất cả 6 cấp độ trong HMTL, trải dài từ <h1></h1> tới <h6></h6>, h1 là cấp heading cao nhất và h6 là thấp nhất. Văn bản được đặt trong tag <p></p>, nhưng blockquotes thì sử dụng<blockquote></blockquote>.

• Divisions là những khu vực lớn, chứa nhiều paragraph, images, blockquotes, và các yếu tố khác. Chúng ta có thể đánh dấu chúng bằng cách sử dụng <div></div>. Div element cũng có thể chứa div tag khác bên trong nó.

• Bạn cũng có thể dùng tag <ol></ol> cho danh sách theo thứ tự và <ul></ul> cho danh sách không theo thứ tự. Danh sách cần được được đặt trong tag <li></li>. Ví dụ, đây là cách hiển thị của một danh sách không theo thứ tự trong HTML

Inline Tags

Có nhiều inline tags được dùng để định dạng vnă bản. Ví dụ như, tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên.

Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể:

<a href="https://example.com/">Click me!</a>

Ảnh cũng là element inline. Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng. Nhưng bạn cũng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như:

<img src="/images/example.jpg" alt="Example image">

Điểm khác biệt giữa HTML5 và ngôn ngữ HTML là gì?

Từ những ngày đầu tiên, HTML đã là một phát minh vượt thời đại. W3C liên tục xuất bản các bản cập nhật và nâng cấp.

HTML4 (cũng thường được gọi là “HTML”) được phát hành năm 1999, trong khi phiên bản mới nhất, lớn nhất là HTML5 thì phát hành năm 2014. Phiên bản này đã ra mắt rất nhiều tính năng quan trọng mới.