HTML là viết tắt của Hypertext Markup Language. Ngôn ngữ đánh dấu này được sử dụng để tạo và chỉnh sửa văn bản, hình ảnh và các nội dung khác sẽ được hiển thị trên trang web
Ngôn ngữ này dựa trên SGML [Ngôn ngữ đánh dấu tổng quát hóa tiêu chuẩn]. Nó sử dụng các thẻ và thuộc tính khác nhau giúp người dùng hiển thị văn bản, liên kết và hình ảnh trên một trang. Các trang HTML được phân phối trên WWW bằng HTTP [Giao thức truyền siêu văn bản]
Any HTML page is a set of multiple tags which are enclosed in the angular brackets ['']. Basically, the tags in HTML comes in pairs like
, , vân vân. Thẻ đầu tiên trong cặp cũng bao gồm các thuộc tính được gọi là thẻ mở [] và thẻ thứ hai được gọi là thẻ đóng [
]. But, some tags do not need to be closed after opening them such as freeCodeCamp 5, freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
Document
Năm 1991, ông đưa ra đề xuất đầu tiên về HTML
Tuy nhiên, phiên bản chính thức đầu tiên của HTML là HTML 2. 0, được phát triển bởi IETF [viết tắt của Internet Engineering Task Force], với nhiều tính năng bổ sung được tích hợp
Một trong số đó đặc biệt là khả năng nhúng hình ảnh vào tài liệu bằng cách sử dụng thẻ
Document
Mosaic, trình duyệt hàng đầu vào thời điểm đó, ban đầu bao gồm khả năng này và IETF đã biến nó thành tiêu chuẩn
Trong thời gian đó, cái gọi là cuộc chiến trình duyệt đang diễn ra sôi nổi
Các công ty trình duyệt, chẳng hạn như Netscape Communications Corporation với tên trình duyệt là Netscape Navigator, đã thao túng HTML và tạo ra một phiên bản thẻ HTML độc quyền dành riêng cho trình duyệt
Các trình duyệt khác đã cố gắng sao chép chúng nhưng không thành công - các trang web trông đẹp trên một trình duyệt nhưng không sử dụng được trên một trình duyệt khác
W3C [viết tắt của World Wide Web Consortium] được thành lập, chịu trách nhiệm tạo ra các tiêu chuẩn rất cần thiết
W3C đảm nhận nhiệm vụ thúc đẩy sự phát triển của HTML
Trong phần còn lại của thập niên 90, các phiên bản HTML khác nhau đã được xuất bản, chẳng hạn như HTML 3. 0 và HTML3. 2
Tiêu chuẩn tiếp theo do W3C đề xuất là HTML 4, tập trung vào quốc tế hóa
Tài liệu hiện có thể được viết bằng bất kỳ ngôn ngữ nào khác trên khắp thế giới, thay vì chỉ tiếng Anh
Năm 1999, có nhiều bản cập nhật hơn cho HTML, với bản phát hành mới HTML 4. 01
Sau khi phát hành HTML 4. 01, sự phát triển của HTML đã rẽ sang một hướng khác
W3C đã tạo XHTML 1. 0, một nhánh của HTML kết hợp XML [viết tắt của eXtensible Markup Language]. Lần này, có các quy tắc mã hóa chặt chẽ hơn và mã ít tự do hơn để có thể hoạt động trong trình duyệt
Phiên bản tiếp theo của XHTML 1. 0, XHTML 1. 1, giống XML hơn nữa đến mức Internet Explorer, trình duyệt phổ biến nhất vào thời điểm đó, không hỗ trợ tài liệu
W3C tập trung vào XML nên họ bắt tay vào tạo XHTML 2. 0. Nhưng không có tiến triển, và họ nhận ra rằng họ đã không đi đúng hướng. W3C từ bỏ dự án
Trong khi W3C đang làm việc để phát triển XHTML 2. 0, một nhóm làm việc khác được thành lập có tên là WHATWG [viết tắt của Web Hypertext Application Technology Working Group]
WHATWG bao gồm các đại diện từ các công ty khác nhau, chẳng hạn như Mozilla và Apple, đang làm việc để tạo ra một phiên bản HTML mới hướng tới các ứng dụng web
Năm 2006, Sir Tim Berners Lee đã công bố sự hợp tác của cả hai nhóm, W3C và WHATWG, để cùng nhau làm việc trên phiên bản mới của HTML - HTML5
HTML5 là phiên bản HTML được đề xuất tiêu chuẩn được sử dụng cho đến ngày nay
Tổng quan về cú pháp HTML
Hãy xem xét kỹ hơn về HTML, cụ thể là các thẻ HTML và khám phá cú pháp cơ bản
Như bạn đã thấy ở phần trên, các thẻ là một cấu trúc cú pháp kế thừa từ SGML
Lấy mã HTML sau đây làm ví dụ
freeCodeCamp
Document
Document
Document
Document
Document
Document
Điều đáng nói là, trong ví dụ trên, bạn đã thấy một phần tử bao gồm cả thẻ mở và thẻ đóng
Điều đó nói rằng, một số phần tử chỉ bao gồm một thẻ tự đóng, chẳng hạn như thẻ
Document
freeCodeCamp
Trong ví dụ trên, có gì đó không ổn với phần tử HTML
Nó được cho là trỏ đến một tài nguyên, do đó có ký tự
Document
Đối với điều này, bạn cần sử dụng một thuộc tính HTML. Các thuộc tính cung cấp thêm thông tin về phần tử
Vì vậy, hãy sửa mã
freeCodeCamp
Bây giờ, hãy phá vỡ nó
62 là thuộc tính đi kèm với phần tử. Hầu hết thời gian, các yếu tố cụ thể chấp nhận và được ghép nối với các thuộc tính nhất địnhfreeCodeCamp- Các thuộc tính chỉ được đặt trên thẻ mở, trước dấu ngoặc nhọn bên phải. Ghi chú khoảng trống ngay sau ký tự
- Các thuộc tính được tạo thành từ các cặp tên và giá trị. Với
62,freeCodeCamp
64 làfreeCodeCamp
65 vàfreeCodeCamp
66 làfreeCodeCamp
67freeCodeCamp - Cặp tên và giá trị được phân tách bằng toán tử gán
68freeCodeCamp - Giá trị luôn được đặt trong dấu ngoặc kép
69freeCodeCamp
Bây giờ bạn đã học những kiến thức cơ bản về các phần tử HTML, làm thế nào để bạn thiết lập một tài liệu HTML cho dự án của mình?
Trong phần sau, bạn sẽ tìm hiểu cách tạo bản soạn sẵn HTML5. Một soạn sẵn phục vụ như một loại công thức cho tất cả các dự án HTML của bạn
Cách tạo một bản soạn sẵn HTML5
Khi thiết lập các dự án HTML mới, bạn sẽ thấy rằng mỗi lần bạn phải đưa vào một số thành phần giống nhau
Những yếu tố này rất cần thiết và bạn sẽ cần chúng để thiết lập và chạy đúng trang web HTML của mình, tuân theo các tiêu chuẩn và thực tiễn tốt nhất
Một số trình chỉnh sửa mã cung cấp các phím tắt để tự động điền và nhập các thành phần được sử dụng trong mọi dự án HTML mới, đây là điều giúp bạn tiết kiệm đáng kể thời gian
Điều này còn được gọi là bản soạn sẵn HTML
Bản soạn sẵn là khung cơ bản và cấu trúc cơ bản mà mọi tài liệu HTML mới cần có
Để tạo một bản soạn sẵn, hãy thực hiện các bước sau
- Trước tiên, hãy đảm bảo cài đặt trình chỉnh sửa Visual Studio Code
- Tạo một tệp có phần mở rộng
70. Các tệp chứa mã HTML phải kết thúc bằng phần mở rộng nàyfreeCodeCamp - Bên trong tệp trống, nhập dấu chấm than,
71freeCodeCamp
freeCodeCamp 72 là dòng mã đầu tiên cần xuất hiện ở đầu tất cả các tài liệu HTML hiện đại. Bạn có thể nhận thấy rằng nó có màu khác với phần còn lại của mã. Điều này là do nó không phải là phần tử HTML mà thay vào đó là khai báo loại tài liệu. Nó cho phép trình duyệt biết tài liệu nào sẽ được mong đợi. Nó cũng hướng dẫn họ về phiên bản HTML đang được sử dụng. Trong trường hợp này, khai báo này thông báo cho các trình duyệt rằng tài liệu chứa mã HTML5
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
freeCodeCamp
Tổng quan về các phần tử HTML cơ bản
Cách tạo bình luận mã
Nhận xét giúp làm rõ mã của bạn và logic đằng sau nó. Hãy coi chúng như những ghi chú cho bản thân tương lai của bạn hoặc cho đồng nghiệp
Đây là cú pháp để tạo bình luận
freeCodeCamp
Mọi thứ giữa
freeCodeCamp
freeCodeCamp
Cách tạo tiêu đề
Có sáu cấp tiêu đề trong HTML
freeCodeCamp
Khi số chứa trong thẻ tăng lên, mức độ ý nghĩa giảm. Tiêu đề
freeCodeCamp
freeCodeCamp
Cách tạo danh sách
Có hai loại danh sách trong HTML
freeCodeCamp
Lưu ý rằng trong cả danh sách có thứ tự và không có thứ tự, cách tạo các mục trong danh sách là sử dụng phần tử
freeCodeCamp
Cách tạo đoạn văn
Để tạo một khối văn bản, hãy sử dụng phần tử
freeCodeCamp
Document
Cách tạo liên kết
Bạn đã thấy phần tử
freeCodeCamp
freeCodeCamp
Thông thường sẽ có một gạch chân dưới văn bản giữa thẻ mở và thẻ đóng
freeCodeCamp
Thuộc tính
freeCodeCamp
Một lưu ý khác là bạn có thể lồng các phần tử nhất định vào bên trong các phần tử khác
Ví dụ: bạn có thể thêm tạo liên kết từ một số văn bản trong một đoạn văn, như vậy
Document
Đảm bảo đóng thẻ lồng nhau trước. Ví dụ: hãy lưu ý để không mắc lỗi phổ biến dành cho người mới bắt đầu này
Document
Bạn cũng có thể liên kết đến các phần khác nhau trong cùng một trang
Trước tiên, bạn cần thêm thuộc tính
Document
Giả sử bạn muốn liên kết đến một đoạn văn
freeCodeCamp
Khi bạn tạo một liên kết [giống như cách bạn đã thấy trước đây], hãy bao gồm dấu thăng [
Document
Document
freeCodeCamp
Cách tạo vùng chứa
Phần tử
Document
Nó thường được sử dụng với CSS để đạt được các bố cục khác nhau trên trang
freeCodeCamp
Cách tạo hình ảnh
Để tạo một hình ảnh, hãy sử dụng phần tử
Document
Sử dụng thuộc tính
Document
Document
Document
Điều quan trọng nữa là luôn bao gồm thuộc tính
Document
freeCodeCamp
Cách tạo biểu mẫu
Biểu mẫu là một khía cạnh cần thiết của hầu hết mọi trang web. Đó là cách người dùng có thể gửi thông tin và cách bạn có thể thu thập dữ liệu đó
Bạn tạo một biểu mẫu bằng cách sử dụng phần tử
freeCodeCamp
freeCodeCamp
Điều đó nói rằng, rất nhiều thuộc tính có liên quan khi tạo một biểu mẫu
Cung cấp cho các tài nguyên sau để đọc để bắt đầu với các biểu mẫu HTML
- Biểu mẫu đầu tiên của bạn - Tài liệu MDN
- Hướng dẫn từng bước để bắt đầu với biểu mẫu HTML
- Hộp văn bản trong HTML – Thẻ HTML trường đầu vào
HTML ngữ nghĩa là gì và tại sao nó quan trọng
HTML ngữ nghĩa là một trong những tính năng quan trọng nhất của HTML5
Từ ngữ nghĩa đề cập đến các phần tử HTML mô tả nội dung mà chúng nắm giữ, thay vì chỉ là các vùng chứa chung chung không có ý nghĩa
Thay vì sử dụng các phần tử
Document
HTML ngữ nghĩa cũng là về việc tạo cấu trúc tốt hơn cho trang web
Ví dụ: bạn có thể sử dụng phần tử
freeCodeCamp
freeCodeCamp
freeCodeCamp
Đối với nội dung chính của trang, bạn có thể sử dụng phần tử
freeCodeCamp
Bạn có thể lưu trữ thông tin ở cuối trang trong phần tử
freeCodeCamp
HTML ngữ nghĩa không tập trung vào nội dung trông như thế nào
Ví dụ: có hai phần tử HTML, ______08 và
freeCodeCamp
Document
Document
Tuy nhiên, các yếu tố này tập trung vào cách trình bày và cách nội dung xuất hiện - đó phải là vai trò của CSS [Cascading Style Sheets] chứ không phải HTML
Sử dụng
Document
Và sử dụng
Document
Các phần tử này không tập trung vào hình thức của văn bản mà thay vào đó cung cấp thêm thông tin về loại văn bản mà chúng chứa
Như bạn đã thấy cho đến nay, tất cả các yếu tố được đề cập đều cung cấp thông tin về đánh dấu và loại nội dung mà chúng chứa và do đó tạo ra các trang có ý nghĩa hơn và cấu trúc tốt hơn
Tại sao viết HTML ngữ nghĩa?
- Nó cải thiện khả năng tiếp cận. Khi thiết kế và phát triển trang web, bạn cần lưu ý rằng bạn đang tạo trang web cho tất cả mọi người. Những người khiếm thị dựa vào các công nghệ hỗ trợ như trình đọc màn hình để đọc to nội dung. Những người khuyết tật khác có thể phụ thuộc vào điều hướng chỉ bằng bàn phím. Vì vậy, học cách viết HTML có thể truy cập sẽ giúp bạn tạo các trang web thân thiện với người dùng hơn
- Nó cải thiện SEO [Tối ưu hóa công cụ tìm kiếm]. Sử dụng các yếu tố mô tả chính xác nội dung sẽ giúp trang web của bạn xếp hạng cao hơn trong các tìm kiếm của Google vì mục đích trang web của bạn sẽ rõ ràng hơn. Công cụ tìm kiếm sẽ giúp trang web của bạn tiếp cận đối tượng mục tiêu đang tìm kiếm nội dung cụ thể đó
Để tìm hiểu thêm về HTML ngữ nghĩa, hãy xem các tài nguyên sau
- Hướng dẫn HTML ngữ nghĩa – 10 lựa chọn thay thế để sử dụng div
- Giải thích các phần tử ngữ nghĩa HTML5
Phần kết luận
Điều này đánh dấu sự kết thúc phần giới thiệu của chúng tôi về HTML. Tôi hy vọng bạn tìm thấy tổng quan này hữu ích
Nơi tốt nhất để bắt đầu học HTML [và CSS. ] có Chứng nhận thiết kế web đáp ứng của freeCodeCamp
Đó là một chương trình giảng dạy tương tác miễn phí, có cấu trúc và được cân nhắc kỹ lưỡng. Bạn học một cách thực tế bằng 20 dự án xây dựng. Bạn sẽ học các kỹ thuật HTML và CSS hiện đại cùng với các phương pháp tiếp cận tốt nhất
Cảm ơn bạn đã đọc
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO