HTML là gì?

Nói một cách dễ hiểu, HTML đại diện cho ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang web trực tuyến. Nó là viết tắt của Hyper Text Markup Language, và chức năng chính nhất của nó là thiết lập cấu trúc, bố cục và cách trình bày của các trang đích riêng lẻ. Mặc dù các trình duyệt web không hiển thị trực tiếp ngôn ngữ HTML, nhưng nó đóng một vai trò quan trọng trong việc giúp tạo ra một trang web hiển thị, có thể truy cập và dễ sử dụng.

HTML cũng được củng cố bởi một số yếu tố riêng lẻ, dần dần xây dựng các trang web, cấu trúc trình bày nội dung và đưa trang web của bạn trở nên sống động. Các phần tử này được tạo và chứa trong 'thẻ', xác định các phần nội dung thay thế như tiêu đề, đoạn văn và các ví dụ tương tự.

Chúng tôi sẽ khám phá các yếu tố này và cấu trúc của chúng chi tiết hơn bên dưới, đồng thời xem xét cách chúng có thể được cá nhân hóa để giới thiệu màu sắc, liên kết và kiểu chữ biến đổi cho trang web của bạn.

Dòng thời gian của công nghệ web :

1991 - HTML
1994 - HTML2
1996 - CSS1 + JavaScript
1997 - HTML4
1998 - CSS2
2000 - XHTML1
2002 - Thiết kế web không bảng
2005 - AJAX
2009 - HTML5

HTML được sử dụng ở đâu?

Các trang web phổ biến sử dụng HTML :

Wikipedia.org
Google.com
YouTube.com
Facebook.com
Yahoo.com
Baidu.com
Reddit.com

Như chúng ta có thể thấy, ứng dụng phổ biến nhất cho HTML là thiết kế các trang đích riêng lẻ tạo nên trang web của bạn. Đây không phải là ứng dụng duy nhất của công cụ viết mã phổ biến, tuy nhiên, việc hiểu các công dụng bổ sung của nó sẽ giúp bạn tận dụng tối đa ngôn ngữ với tư cách là một quản trị viên web mới. Vì vậy, đây là một số cách tiếp theo mà HTML có thể được áp dụng:

Tạo các phần tử có thể tùy chỉnh trong một trang hiện có . Nếu bạn có ý định cho phép nhận xét bài đăng trên blog hoặc xuất bản nội dung do người dùng tạo trên trang web của mình, bạn có thể sử dụng các đoạn mã HTML để thực hiện điều này. Các yếu tố này sẽ cho phép người dùng nhấn mạnh từ khóa, nhúng liên kết và định dạng nhận xét tùy thuộc vào các hạn chế mà bạn đặt ra với tư cách là người kiểm duyệt.

Tạo nội dung bổ sung cho email . Email cũng sử dụng HTML làm ngôn ngữ cho các tin nhắn văn bản đa dạng thức, có các liên kết, văn bản và nhiều yếu tố khác mà không thể chỉ có trong văn bản thuần túy. Vì vậy, nếu bạn đang muốn chia sẻ sách điện tử liên quan đến trang web của mình thông qua email, bạn có thể sử dụng HTML để tối ưu hóa tác động của thông điệp của mình.

Hiểu các tài liệu trợ giúp ngoại tuyến được cài đặt trên máy tính của bạn . Điều thú vị là HTML được sử dụng làm định dạng cho các tài liệu trợ giúp dựa trên máy tính có thể truy cập ngoại tuyến. Do đó, kiến thức cơ bản về HTML có thể giúp bạn hiểu các vấn đề với phần cứng của mình và giải quyết chúng nhanh hơn, do đó có thể đảm bảo rằng bạn có thể khôi phục trang web của mình nhanh hơn trong trường hợp trang web bị gián đoạn.

Đọc thêm:

Xem HTML & CSS [Cheat Sheet]

Cấu trúc trang HTML

Trước khi bạn có thể xây dựng một trang html, bạn cần có những điều cơ bản.

Thông thường, một trang sẽ được tạo thành từ ba yếu tố cấu trúc:

Tiêu đề: Tiêu đề chứa nội dung có liên quan đến tất cả các trang trên trang web của bạn, chẳng hạn như biểu trưng hoặc tên trang web và hệ thống điều hướng. Tiêu đề được nhìn thấy trên mỗi trang.
Phần chính: Phần này chiếm diện tích lớn nhất trên một trang web. Nó chứa nội dung cụ thể cho trang đang được xem.
Chân trang: Nội dung chân trang thường bao gồm thông tin liên hệ, địa chỉ giao hàng hoặc các thông báo pháp lý. Giống như đầu trang, chân trang xuất hiện trên mọi trang, nhưng nó nằm ở dưới cùng.

Dưới đây là những yếu tố cấu trúc cơ bản đó trông như thế nào khi chúng kết hợp với nhau:

<html>

<head>

Bạn có thể đặt văn bản hoặc mã ở đây, chẳng hạn như
mã theo dõi Google Analytics
.

</head>

<body>

Nội dung chính của trang của bạn
ở đây. Điền vào nó với văn bản và hình ảnh!

</body>

</html>

Đây là một ví dụ khác, sử dụng thẻ tiêu đề và thẻ đoạn văn để cấu trúc nội dung một cách thẩm mỹ. Ngoài ra, chúng tôi đã đưa vào thẻ footer cho nội dung bên dưới phần chính của trang:

<html>

<head>

Bạn có thể đặt văn bản hoặc mã ở đây, chẳng hạn như
mã theo dõi Google Analytics
.

</head>

<body>

<p> Chào mừng bạn đến với mywebsite! </p>

<p> thông tin liên hệ có thể ở đây </p>

</footer>

</body>

</html>

Thẻ HTML

Điểm khởi đầu cho bất kỳ mã HTML nào là các thẻ riêng lẻ, có thể được sử dụng để tạo tất cả các yếu tố quan trọng và giúp cấu trúc các trang web của bạn.

Công nghệ Thẻ HTML hàng đầu Chia sẻ trên web

Thẻ Canvas HTML5 - 0,27%
Thẻ âm thanh HTML5 - 0,29%
Thẻ video HTML5 - 0,69%
Thẻ SVG HTML5 - 3,1%
Thẻ nhúng HTML5 - 6,54%

Dưới đây, chúng ta sẽ xem xét các thẻ phổ biến nhất trước khi khám phá cách chúng có thể được tận dụng để tạo các phần tử cụ thể trên trang:

Thẻ tiêu đề

Tất cả các tài liệu trực tuyến, bao gồm cả các trang web, đều bắt đầu bằng một tiêu đề. Chúng được xây dựng bằng cách sử dụng các thẻ HTML, với ngôn ngữ hiện cho phép tối đa sáu phần tử có kích thước khác nhau cũng cho phép bạn cấu trúc nội dung của mình với các tiêu đề bổ sung, phụ đề và các dòng văn bản in đậm được đánh dấu. Để bắt đầu tiêu đề của bạn, bạn chỉ cần đặt trước văn bản có liên quan bằng thẻ <h1>, <h2>, <h3>, <h4>, <h5> hoặc <h6> tùy thuộc vào kích thước mong muốn.

Sau đó, bạn phải áp dụng thẻ đóng ở cuối tiêu đề để đóng gói văn bản và sẽ được hiển thị như sau ở định dạng HTML:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Sau khi được xác nhận, điều này sẽ chuyển thành thẩm mỹ sau trên trang đích của trang web của bạn:

Đây là tiêu đề 1

Đây là tiêu đề 2

Đây là tiêu đề 3

Đây là tiêu đề 4

Đây là tiêu đề 5

Đây là tiêu đề 6

Ở đây, có thể thấy rõ các kích thước khác nhau của các tiêu đề biến, cũng như thực tế là trình duyệt thêm một dòng trước và sau tiêu đề. Bạn cũng sẽ nhận thấy rằng thẻ đóng ở cuối văn bản tiêu đề có một chút thẩm mỹ khác nhau, nhưng sẽ đề cập đến vấn đề này trong chương sau khi chúng ta xem xét việc sử dụng các thẻ để xác định các phần tử cụ thể.

Thẻ đoạn văn

Một nguyên tắc tương tự cũng được áp dụng cho các thẻ đoạn văn bắt đầu, được mô tả bằng <p>. Điều này cho phép bạn cấu trúc nội dung của mình và chia nó thành các đoạn văn có liên quan, từ đó chuyển thành trải nghiệm đọc dễ dàng và liền mạch hơn. Một lần nữa, thẻ <p> phải được đặt ở đầu văn bản có liên quan, trước khi áp dụng thẻ đóng thay thế ở cuối để hoàn thành hiệu ứng. Tuy nhiên, không giống như các thẻ tiêu đề, không có nhiều số khác nhau có thể thay đổi kích thước của văn bản trong đoạn văn.

Ví dụ:

<p>Your First Paragraph</p>

<p>Your Second Paragraph</p>

<p>Your Third Paragraph</p>

Bên ngoài định dạng HTML, điều này sẽ chia nhỏ văn bản như sau trên trang web hoàn chỉnh của bạn:

Đoạn đầu tiên của bạn

Đoạn thứ hai của bạn

Đoạn thứ ba của bạn

Thẻ ngắt dòng

Các ví dụ đầu tiên đại diện cho các thẻ HTML cơ bản nhất, nhưng có những thẻ khác sử dụng một định dạng khác và thực hiện đóng thay thế. Ví dụ như ngắt dòng để tạo ra sự phân biệt dòng văn bản nào được ngắt và tiếp tục ở dòng sau. Có một sự khác biệt cốt lõi giữa ngắt dòng và đoạn văn trong trường HTML, vì trong khi cái sau là các phần tử khối tiêu chuẩn chứa văn bản, thì cái trước tạo ra sự phân tách trong phần tử <p> hiện có.

Do đó, ngắt dòng đại diện cho một phần tử trống trong HTML và do đó không được xác định bởi thẻ mở hoặc thẻ đóng. Thay vào đó, chúng được mô tả bằng thẻ <br />, thẻ này có thể được chèn vào các phần tử <p> hiện có để chia nhỏ văn bản và có khả năng làm nổi bật các phần thông tin quan trọng. Khoảng trắng giữa ký tự <be> và dấu gạch chéo ngược là rất quan trọng, vì nếu không, thẻ không thể nhận dạng được ở định dạng HTML.

Đây là một ví dụ:

<p> Chào buổi sáng <br/>
Rất cảm ơn bạn đã đặt câu hỏi, chúng tôi sẽ liên hệ với bạn nếu chúng tôi cần bất kỳ điều gì khác. <br />
Trân trọng <br />
Ông J những người </p>

Sau khi được áp dụng, điều này sẽ chia nhỏ văn bản như sau:

Buổi sáng tốt lành,

Rất cảm ơn bạn đã yêu cầu, chúng tôi sẽ liên hệ với bạn nếu chúng tôi cần bất cứ điều gì khác.

Trân trọng

Ông Jones

Như bạn thấy, bạn có thể áp dụng ngắt dòng bao nhiêu lần tùy thích trong phần tử đoạn hiện có, miễn là chúng thêm giá trị và làm cho thông tin dễ hiểu hơn. Bạn cũng sẽ thấy rằng các thẻ đoạn mở và đóng vẫn không thay đổi, với các thẻ ngắt dòng được sử dụng để sửa đổi bố cục của văn bản được bao gồm trong đó.

Đây là một trong những ví dụ về cách thẻ HTML có thể được sử dụng để thay đổi các phần tử hiện có, đóng vai trò quan trọng trong việc xác định bố cục trực quan của các trang web và nội dung của bạn.

Đường ngang

Tương tự, có những thẻ khác có thể được sử dụng trong phần tử <p> hoặc để phân tách thêm các phần văn bản trên trang web của bạn. Một trong những thẻ được sử dụng rộng rãi nhất là thẻ <hr>, giúp tạo một phần tử trống vẽ một đường ngang trực quan giữa các phần thay thế của tài liệu trực tuyến. Ví dụ, bạn có thể muốn định vị một dòng giữa hai nội dung văn bản để tái tập trung người đọc hoặc chỉ đơn giản là giới thiệu yếu tố hình ảnh mới. Đây là cách bạn tạo ra một khoảng ngắt trong HTML:

<p>Your First Paragraph</p>

<hr />

<p>Your Second Paragraph</p>

Ở đây, dấu ngắt giữa các ký tự hr và dấu gạch chéo lên phía trước làm nổi bật cấu trúc của một phần tử trống, trong khi một lần nữa không cần thẻ đóng để hoàn thành hiệu ứng. Điều này sẽ tạo ra hình ảnh sau:

Đoạn đầu tiên của bạn

________________________________________

Đoạn thứ hai của bạn

Thẻ hình ảnh

Thẻ hình ảnh cũng đại diện cho các phần tử trống trong HTML, một lần nữa có nghĩa là chúng không có thẻ đóng. Vì chúng chỉ chứa các thuộc tính liên quan đến URL của hình ảnh mà bạn đang nhúng vào trang web nên chúng được xác định đơn giản bằng thẻ <img> ở đầu phần tử. Chúng có thể được đặt ở bất kỳ đâu trên trang web của bạn, mặc dù việc đưa chúng vào các phần tử hiện có như đoạn văn hoặc tiêu đề là điều bất thường. Đây là cách một thẻ hình ảnh HTML điển hình sẽ tự thể hiện:

Bạn cũng nên cung cấp văn bản thay thế cho hình ảnh của mình, điều này giúp mọi người có thể xem nó trong trường hợp thời gian tải chậm hoặc sử dụng trình đọc màn hình. Bằng cách này, nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính thay thế cho người xem. Điều này một lần nữa sử dụng thẻ hình ảnh, nhưng bao gồm một tập hợp các thuộc tính khác:

Phần tử HTML

Trước đây, chúng tôi đã xem xét cách các thẻ HTML đơn giản được sử dụng để xác định các phần tử trên trang, đồng thời khám phá cách chúng có thể được tùy chỉnh thêm bằng cách sử dụng các phần tử trống chứa thẻ hình ảnh và thẻ ngắt dòng. Điều này giúp chúng tôi hiểu mối quan hệ tồn tại giữa các thẻ và phần tử cũng như cách chúng có thể được sử dụng để xác định các loại nội dung khác nhau trên trang web của bạn .

Trong khi tất cả các khía cạnh của ngôn ngữ HTML đều được thể hiện bằng thẻ, ví dụ: một phần tử được xác định bao gồm nội dung phải có cả thẻ bắt đầu và thẻ đóng. Vì vậy, các tiêu đề và đoạn văn là các phần tử HTML vì chúng sử dụng các thẻ bắt đầu và đóng để đóng gói và tăng cường văn bản có liên quan. Ngược lại, các phần tử trống hoặc chứa thuộc tính hoặc không có nội dung nào, cho phép chúng được sử dụng trong các phần tử hiện có mà không cần thẻ đóng.

Xác định các phần tử HTML

Khi sử dụng các ví dụ như tiêu đề và đoạn văn, việc áp dụng đúng các thẻ bắt đầu và thẻ đóng là rất quan trọng. Ví dụ: nó là thẻ bắt đầu (chẳng hạn như <h1> hoặc <p>) xác định phần tử được đề cập, trong khi thẻ đóng đảm bảo rằng phần tử này không được tiếp tục trong phần còn lại của trang web. Ví dụ: nếu bạn không sử dụng thẻ đóng </ p> ở cuối đoạn văn bản mong muốn, văn bản sẽ xuất hiện trong một khối duy nhất khó coi và cực kỳ khó đọc.

Tất cả các thẻ đóng đều giống với thẻ bắt đầu ngoại trừ thực tế là thẻ trước có dấu gạch chéo lên trước các ký tự có liên quan. Vì vậy, trong trường hợp của tiêu đề <h1>, thẻ đóng sẽ là </ h1>, trong khi đối với các đoạn văn, bạn sẽ luôn sử dụng </ p> để xác định ngắt trong văn bản. Điều này đòi hỏi sự chú ý đến từng chi tiết trong khi viết mã và điều quan trọng cần lưu ý khi lập trình tiêu đề là số bạn sử dụng (chẳng hạn như h1 hoặc h2) được áp dụng trong cả thẻ bắt đầu và thẻ đóng.

Sử dụng các phần tử HTML lồng nhau

Ở giai đoạn này, rõ ràng là các tài liệu HTML và các trang web được hình thành bởi một cây gồm nhiều phần tử khác nhau, chúng đóng vai trò như các khối xây dựng cho một mảng nội dung. Chúng tôi cũng đã xem xét cách các phần tử này có thể được hình thành và sử dụng để cấu trúc nội dung trực tuyến và chúng tôi sẽ tiếp tục điều này ngay bây giờ bằng cách xem xét các phần tử HTML lồng nhau.

Cũng giống như các phần tử trống và các thẻ độc lập (như <br /> có thể được kết hợp vào các phần tử HTML được xác định, cái gọi là phần tử lồng nhau cũng có thể được đặt trong nội dung như tiêu đề và đoạn văn. Chúng bao gồm các ví dụ như chữ in đậm và chữ nghiêng và gạch chân văn bản, trong khi chúng có thể được áp dụng để thêm cá tính cho nội dung của bạn và thu hút mắt người đọc đến các điểm quan tâm cụ thể.

Văn bản in đậm, nghiêng và gạch ngang trong HTML

Giả sử rằng bạn muốn đánh dấu một từ trong phần tử đoạn văn hiện có. Bạn có thể đạt được điều này bằng cách tô đậm, sử dụng các thẻ đơn giản trong phần tử <p> tiêu chuẩn. Sử dụng HTML, bạn sẽ lập trình như sau:

Ở đây, phần tử lồng nhau có cả thẻ bắt đầu và thẻ đóng, mỗi thẻ có định dạng tương tự như các thẻ được liên kết với tiêu đề và đoạn văn. Chúng có thể được sử dụng liền mạch trong các phần tử hiện có và trong trường hợp này, nó sẽ tạo ra các kết quả sau:

Tôi muốn từ này được in đậm.

Bây giờ, hãy nói rằng bạn cũng muốn thay đổi kiểu chữ của từ này để nó cũng nghiêng. Điều này có thể đạt được đơn giản bằng cách thêm một phần tử lồng nhau khác, phần tử này sẽ được mã hóa như sau:

Như bạn có thể thấy, các thẻ in nghiêng bắt đầu và đóng đơn giản đã được kết hợp vào phần tử <p>. Thao tác này bây giờ sẽ biến đổi nội dung bên trong phần tử để nó xuất hiện như sau:

Tôi muốn từ này được in đậm.

Tất nhiên, bạn có thể quyết định rằng bạn muốn đánh dấu từ này theo một cách khác. Do đó, bạn có thể sử dụng một phần tử lồng nhau thay thế, chẳng hạn như gạch ngang (được biểu thị bằng thẻ <s> và </s>. Các thẻ này có thể được áp dụng theo cách tương tự trong phần tử <p>, xuất hiện như sau trong HTML:

<p> Tôi muốn <s> từ này </s> được gạch ngang. </p>

Trong trường hợp này, văn bản sẽ xuất hiện như sau trên tài liệu hoặc trang đích của bạn:

Tôi muốn từ ~~này~~ được gạch ngang.

Điều này cung cấp một cái nhìn sâu sắc về các yếu tố có thể được hình thành bởi các thẻ, từ đó xác định cấu trúc của các trang web của bạn và nội dung mà chúng có. Không chỉ điều này, mà các phần tử trống và lồng nhau cũng có thể được sử dụng để xác định thêm nội dung của bạn.

Thuộc tính HTML

Nếu thẻ là khối xây dựng tạo và xác định các phần tử, thì các thuộc tính HTML có thể được sử dụng để tùy chỉnh các đặc điểm của chúng (chẳng hạn như kiểu dáng, màu sắc và ngôn ngữ. Tất cả các phần tử HTML đều có các thuộc tính cốt lõi, cung cấp thông tin cốt lõi và luôn được chỉ định trong thẻ stat . Chúng có xu hướng đi thành từng cặp, vì vậy sẽ thường xuất hiện ở định dạng sau: name = ”value.”

Nói một cách dễ hiểu, tên đại diện cho thuộc tính mà bạn muốn đặt, trong khi giá trị liên quan đến các tiêu chí cụ thể mà bạn muốn kết hợp.

Có một số lượng lớn các thuộc tính có thể được áp dụng cho các phần tử HTML của bạn, nhưng những thuộc tính có liên quan nhất đến các quản trị viên web non trẻ là:

Thuộc tính 'lang'

Thuộc tính cơ bản nhất xác định ngôn ngữ của tài liệu và các phần tử của nó. Nó được khai báo bằng cách sử dụng thuộc tính 'lang' và mặc dù dễ bị bỏ qua nhưng nó có lợi ích là làm cho nội dung dễ tiếp cận hơn với trình đọc màn hình và công cụ tìm kiếm. Nó thường được trình bày ở đầu tài liệu theo định dạng sau:

Theo sau thuộc tính lang, hai chữ cái đầu tiên chỉ định ngôn ngữ (trong trường hợp này là tiếng Anh). Sau dấu gạch ngang, hai chữ cái tiếp theo thiết lập phương ngữ, mặc dù điều này sẽ không có ở mọi ngôn ngữ. Điều quan trọng là bạn phải có thuộc tính này ngay nếu bạn muốn tiếp cận thành công đối tượng của mình.

Thuộc tính "align"

Chúng tôi đã đề cập đến định dạng của các thuộc tính HTML (name = ”value”) và phương án tốt nhất của điều này xảy ra khi bạn cố gắng căn chỉnh nội dung trong các phần tử của mình. Ví dụ: bạn có thể quyết định căn giữa tất cả các đoạn văn trên một trang cụ thể, với căn chỉnh là thuộc tính mà bạn muốn đặt. Sau đó, 'center' là giá trị của thuộc tính, mặc dù bạn có quyền lựa chọn căn chỉnh văn bản của mình sang trái hoặc phải.

Ví dụ:

<p align="center" >This text is center aligned</p>

Điều này sẽ căn chỉnh các phần tử <p> của bạn ở giữa trang và tạo bố cục thống nhất để phù hợp với tính chất cụ thể của trang web của bạn (xem bên dưới):

Văn bản này được căn giữa

Thuộc tính 'href'

Nếu bạn định xây dựng một trang web hiển thị, điều quan trọng là bạn phải kết hợp cả liên kết trong và ngoài nước. Xây dựng danh mục liên kết bao gồm các liên kết ngược đến các trang đích nội bộ cũng là một chiến lược khả thi, vì vậy bạn sẽ cần học cách viết mã những liên kết này trong HTML.

Các liên kết HTML được xác định bằng thẻ <a>, bao gồm liên kết đích cùng với văn bản liên kết được liên kết sẽ chứa URL. Thuộc tính 'href' là thuộc tính chỉ định địa chỉ trang web, tuy nhiên, thuộc tính này được kết hợp như một phần của thẻ bắt đầu. Nó được mã hóa bằng HTML như sau:

<a href="https://www.google.com[> Google </a>

Điều này làm nổi bật rõ ràng sự khác biệt giữa thẻ bắt đầu và thẻ đóng và sẽ dịch như sau trên trang đích của bạn:

Google

Thuộc tính 'color'

Đây là một thuộc tính quan trọng khác, vì việc sử dụng màu sắc có thể thổi sức sống vào trang web của bạn đồng thời giúp tạo ra sự tương phản quan trọng và thẩm mỹ thiết kế mạnh mẽ. Trong HTML, một màu có thể được chỉ định bằng cách sử dụng tên của nó, mặc dù cũng có thể sử dụng giá trị RGB hoặc HEX để đạt được mục đích này. Tuy nhiên, tùy chọn trước đây là tùy chọn dễ thực hiện nhất trong khi nó cũng có thể được áp dụng cho các tiêu đề, đoạn văn và các phần tử khác trên trang của bạn.

Đây là một thuộc tính kiểu, với sự lựa chọn của bạn về màu sắc đại diện cho giá trị mà bạn muốn đặt. Ví dụ: khi áp dụng màu đỏ cho tiêu đề chính, nó sẽ trông như thế này:

Sau khi được áp dụng, yếu tố này sẽ xuất hiện như sau trên trang web của bạn:

Màu văn bản được đặt bằng cách sử dụng màu đỏ

Một lần nữa, có sự phân biệt rõ ràng giữa thẻ bắt đầu và thẻ đóng để xác định phần tử, trong khi đây là một trong những thuộc tính dễ áp dụng nhất trong HTML. Nó cũng làm nổi bật thêm định dạng giá trị name = ”của các thuộc tính HTML, giúp quá trình học và áp dụng những thuộc tính này dễ dàng hơn nhiều trên toàn bộ trang web của bạn.

Đọc thêm:

Xem HTML5 Canvas [Cheat Sheet]

Hãy tự mình kiểm tra

Với hiểu biết cơ bản về HTML và các yếu tố riêng lẻ của nó, bước tiếp theo là thực hiện một số dự án đơn giản và áp dụng kiến thức lý thuyết của bạn để giải quyết các thách thức thực tế.

Trong bài tập chi tiết dưới đây, chúng tôi đã giới thiệu một văn bản ngoại trừ và yêu cầu định dạng các khía cạnh khác nhau bằng cách sử dụng HTML. Sử dụng hướng dẫn và tất cả những gì bạn đã học cho đến nay để hoàn thành thử thách khi bạn chuẩn bị viết mã trang web của riêng mình.

<h1>Main Header

<p>Welcome to our website, Example.com! We hope you enjoy reading our content , feel free to reach out to us. </p>

<p>Thanks for visiting! </p>

<p>Learn more. </p>

Câu hỏi:

Hoàn thành phần tử tiêu đề với thẻ đóng chính xác.
Làm cho tiêu đề in đậm.
Chèn một đường ngang dưới tiêu đề.
Sử dụng thuộc tính màu và bóng "Cảm ơn bạn đã ghé thăm" màu xanh lục
Chèn siêu liên kết này ( https://www.w3schools.com/html/ ) vào văn bản liên kết “Tìm hiểu thêm”.
Ở đầu trang, hãy sử dụng định dạng name = ”value” để căn trái các đoạn văn

Số liệu thống kê và thông tin về ngôn ngữ HTML

Các phần tử HTML, head và body đã là một phần của đặc tả HTML từ giữa những năm 1990 và cho đến vài năm trước, chúng là những phần tử chính được sử dụng để tạo cấu trúc cho các tài liệu HTML. Tuy nhiên, tình hình đã thay đổi đáng kể trong vài năm qua khi HTML5 đã thêm một loạt thẻ mới có thể được sử dụng để thêm ý nghĩa ngữ nghĩa phong phú vào cấu trúc của tài liệu HTML.
Tài liệu HTML được yêu cầu bắt đầu bằng Khai báo loại tài liệu (không chính thức là “loại tài liệu”). Trong các trình duyệt, loại tài liệu giúp xác định chế độ hiển thị. HTML5 không xác định một DTD; do đó, trong HTML5, khai báo loại tài liệu đơn giản hơn và ngắn hơn.
Các trình duyệt dành cho thiết bị di động đã hoàn toàn áp dụng HTML5 vì vậy việc tạo các dự án sẵn sàng cho thiết bị di động cũng dễ dàng như thiết kế và xây dựng cho các màn hình cảm ứng nhỏ hơn của chúng - do đó sự phổ biến của Thiết kế đáp ứng. Có một số thẻ meta tuyệt vời cũng cho phép bạn tối ưu hóa cho thiết bị di động.
78% nhà phát triển nội dung đồng ý rằng cấu trúc này phù hợp để tạo ứng dụng di động và 68% nói rằng nó phù hợp để thiết kế bất kỳ và tất cả các loại ứng dụng.
HTML5 cũng đi kèm với một loạt các API tuyệt vời cho phép bạn xây dựng trải nghiệm người dùng tốt hơn và một ứng dụng web mạnh mẽ hơn, năng động hơn - đây là danh sách nhanh các API gốc:

Kéo và thả (DnD)
Cơ sở dữ liệu lưu trữ ngoại tuyến
Quản lý lịch sử trình duyệt
Chỉnh sửa tài liệu
Phát lại phương tiện theo thời gian

HTML5 không được kiểm soát bởi một công ty. Một trong những tính năng tốt nhất của nó nằm ở chỗ nó là một tiêu chuẩn mở. Các nhà phát triển có quyền tự do sáng tạo của họ và thêm nhiều chức năng và tính năng nhất có thể.
So với các trình duyệt khác, mọi bản cập nhật của Google Chrome đảm bảo bao gồm hỗ trợ cho HTML5. Ngoài ra, trình phát mặc định của YouTube hiện là HTML5 và quảng cáo Flash của Google hiện đang được chuyển đổi sang HTML5.
Việc sử dụng HTML5 của các nhà phát triển (theo khu vực):

Bắc và Mỹ Latinh - 70%
Nam Mỹ - 61%
ASPAC - 60%
Úc - 60%
Châu Âu - 59%
Châu Phi - 50%

Phần kết luận

Mặc dù HTML chỉ mới được tạo ra gần đây vào năm 1991 (với phiên bản đầu tiên của ngôn ngữ mã hóa sau đó ra mắt vào năm 1995), nó đã nhanh chóng trở thành một công cụ quan trọng trong việc thiết kế các trang web chức năng và hấp dẫn trực quan. Mức độ ảnh hưởng của HTML cũng đang tiếp tục phát triển, với phiên bản mới nhất (HTML5) đang được ngày càng nhiều trang web trên toàn cầu áp dụng.

Về mặt này, học các yếu tố cơ bản của HTML và cách áp dụng chúng là bước quan trọng nhất mà bạn sẽ thực hiện để thiết lập một trang web thành công, dễ nhìn và cuối cùng là cạnh tranh.

Hướng dẫn HTML cho người mới bắt đầu