Ngôn ngữ siêu văn bản là gì – Hỏi Đáp

Đánh giá bài viết

Chào mừng bạn đến với trungcapluatvithanh.edu.vn trong bài viết về Thế nào là ngôn ngữ siêu văn bản chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.

Chào mừng bạn đã đến với website gbaydev của mình, ở bài viết này mình sẽ giải thích rõ ràng về HTML là gì? cũng các thông tin liên quan tới HTML như lịch sử phát triển, cấu trúc một trang HTML và Ưu nhược điểm của HTML thôi mời bạn nhâm nhi tách trà để cùng gbaydev tìm hiểu về HTML nhé!

HTML là gì?

HTML là chữ viết tắt của Hypertext Markup Language, hay còn gọi là ngôn ngữ đánh dấu siêu văn bản, dùng để xây dựng cấu trúc của một trang website. Một webiste có thể chứa tập hợp rất nhiều trang HTML, ví dụ khi bạn vào facebook thì trang cá nhân của bạn và trang new feed là hai trang có mã HTML khác nhau, Nói một cách dễ hiểu là một website bạn vào hàng ngày nó được tập hợp bởi rất nhiều trang HTML.

HTML được tạo ra bởi Tim Berners-Lee ông cũng là người khai sinh ra World Wide Web và cũng là chủ tịch của World Wide Web Consortium (W3C tổ chức tiêu chuẩn chính cho World Wide Web được thành lập vào 1 tháng 10 năm 1994).

Lịch sử phát triển của HTML

HTML được tạo ra bởi Tim Berners-Lee vào cuối những năm 1991, nhưng lúc đó HTML vẫn chưa được phát hành chính thức, sau đó được xuất bản dưới dạng HTML 2.0 vào năm 1995, HTML 4.01 được phát hành vào cuối năm 1999 và là một phiên bản chính của HTML.

HTML giờ đây là một ngôn ngữ đánh dấu siêu văn bản rất phổ biến và đã phát triển lên rất nhiều phiên bản cập nhật khác nhau. Mỗi phiên bản ngày càng cho phép người dùng tạo website một cách dễ dàng, đẹp hơn và hoạt động hiệu quả.

  1. Phiên bản HTML 1.0 được phát hành vào năm 1993 mục đích chính là chia sẻ thông tin để đọc được thông qua trình duyệt web, vào thời điểm này không có nhiều nhà phát triển tham gia vào việc tạo ra các webiste nên HTML cũng không được phát triển thêm.
  2. Hai năm sau đó tức là năm 1995 HTML 2.0 được xuất bản, phiên bản này chứa tất cả các tính năng cũ của 1.0 và được cập nhật và bổ xung một số tính năng mới. HTML 2.0 là ngôn ngữ đánh dấu tiêu chuẩn để thiết kế website cho tới tháng 1 năm 1997 và được tinh chỉnh các tính năng cốt lõi của HTML.
  3. Sau đó HTML 3.0 ra đời năm 1997 được Dave Raggett người đã giới thiệu một bài báo hoặc một bản nháp mới về HTML. Nó bao gồm các tính năng mới được cải tiến của HTML, ưu điểm của nó là mang lại nhiều đặc tính mạnh mẽ hơn cho quản trị viên trong việc thiết kế các website, nhưng nhược điểm của nó là làm chậm trình duyệt.
  4. Tới phiên bản HTML 4.01 được phát hành vào cuối năm 1999, được sử dụng rất rộng rãi và là phiên bản cực kỳ thành công của HTML trước HTML 5.0.
  5. Sau năm 1999 là năm 2000 phiên bản XHTML 1.0 được phát hành.
  6. Từ năm 2002 XHTML 2.0 được phát hành và bị loại bỏ dần tới năm 2009 do các tiêu chuẩn nghiêm ngặt, từ chối các trang web không tuân thủ.
  7. Phiên bản HTML 5.0 được xuất bản vào năm 2012, phiên bản này đã được phát hành, sử dụng rộng rãi trên toàn thế giới.

Hình ảnh: lịch sử phát triển của HTML

HTML hoạt động và xử lý như thế nào?

HTML documents là một tập hợp các đoạn mã ngắn được người quản trị website nhập vào một tập tin có phần mở rộng là .html hoặc .html, bạn có thể xem các tài liệu này bằng bất kỳ trình duyệt web nào như Chrome, Firefox, Internet Explorer, Safari, Coc Coc, Các trình duyệt này đọc tập tin HTML và dịch sang văn bản dạng hiển thị.

Ví dụ dưới đây là một đoạn code HTML xem ở trình soạn thảo code Visual Studio Code

<!DOCTYPE html> <html lang=”vi”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Gbaydev website chuyên cung cấp các kiến thức Công Nghệ Thông Tin mới nhất, được cập nhật liên tục và miễn phí 100%.</title> </head> <body> <div style=”width: 50%;margin: 20px auto;”> <h2> <span style=”color:#323EBE;”>Gbay</span> <span style=”color:#61E786;”>DEV</span> website chuyên cung cấp các kiến thức Công Nghệ Thông Tin mới nhất, được cập nhật liên tục và miễn phí 100%. </h2> </div> </body> </html>

Và khi bạn xem ở trình duyệt web phổ biến chẳng hạn như chrome sẽ trông như thế này:

Hình ảnh: một đoạn mã HTML được xem bằng trình duyệt chrome

Cấu trúc trang HTML

Mỗi trang HTML được cấu trúc bởi các một bộ các tag bao gồm một tag mở và một tag đóng ví dụ như

<h2> <span style=”color:#323EBE;”>Gbay</span> <span style=”color:#61E786;”>DEV</span> website chuyên cung cấp các kiến thức Công Nghệ Thông Tin mới nhất, được cập nhật liên tục và miễn phí 100%. </h2>

Xem thêm:: Giới thiệu về Bảng chữ cái Tiếng Trung | Trường LTL Việt Nam

Trong các tag sẽ có các attribute (thuộc tính) và các giá trị của thuộc tính sẽ nằm trong ngoặc kép, ví dụ như trên tag

<span style=”color:#323EBE;”>Gbay</span>

thì có thuộc tính style=color:#323EBE;

Thẻ <span style=color:#323EBE;>Gbay</span> còn được gọi là một đoạn mã HTML

Một trang web HTML sẽ bắt đầu bằng thẻ <!DOCTYPEhtml> cấu trúc tiêu chuẩn như sau

Trong tag <head></head> ở trên là khai báo những gì mà văn bản sử dụng chẳng hạn như <title></title> và kéo những tập tin CSS hoặc JS.

Giữa cặp thẻ <body>Nội dung mà bạn sẽ nhìn thấy khi xem bằng trình duyệt</body> đây sẽ là toàn bộ nội dung bạn nhìn thấy khi mở tập tin HTML bằng trình duyệt web, kết thúc của thẻ body </body> là thẻ đóng của </html>

Các tag thông dụng nhất của HTML

Một văn bản HTML có rất nhiều các tags khác nhau nhưng chúng được chia thành hai loại tag chính là Block-LevelInline Tags

Block-Level Tags

Block-Level Tags sẽ sử dụng toàn bộ không gian của phần tử cha, toàn bộ vùng chiều cao bằng chiều cao của chính phần tử nên những tags này sẽ tạo thành các khối, Block-Level Tags chỉ có thể xuất hiện giữa thẻ mở <body> và thẻ đóng </body>, Div và Headings là các ví dụ điển hình cho nhóm này.

Dưới đây là bảng chứa bộ danh sách đầy đủ các block-level trong HTML (mặc dù block-level không được định nghĩa về mặt kỹ thuật trong HTML5)

Tên tagTác dụngTên tagTác dụng<address>Khối chứa thông tin liên lạc.<article>Khối chứa nội dung bài viết.<aside>Khối chứa nội dung bên trái hoặc phải.<blockquote>Khối chứa nội dung quocte<details>Tiện ích tiết lộ.<dialog>Hộp thoại.<dd>Mô tả một thuật ngữ trong danh sách mô tả.<div>Dùng để phân chia thành các khối tài liệu.<dl>Danh sách mô tả.<dt>Thuật ngữ danh sách mô tả.<fieldset>Nhãn tập hợp trường.<figcaption>Chú thích hình ảnh.<figure>Nhóm nội dung phương tiện với chú thích (xem <figcaption>).<h2>, <h2>, <h3>, <h4>, <h5>,<h6>Các thẻ tiêu đề 1-6.<form>Form dùng cho việc gửi dữ liệu lên server<header>Khối bao bọc tiêu đề trang, bao gồm logo và menu.<footer>Khối footer thường được để làm chân trang tài liệu HTML.<hgroup>Thông tin tiêu đề nhóm.<hr>Tạo vạch kẻ ngang chạy hết vùng chứa (vạch chia).<li>Tạo các mục liệt kê như trong microsoft word.<main>Trung tâm nội dung của tài liệu HTML<nav>Chứa các liên kết điều hướng (hay các menu).<ol>Danh sách được yêu cầu.<p>Thẻ này chứa một đoạn văn bản.<pre>Văn bản được định dạng sẵn.<section>Khối này sẽ chứa 1 phần nội dung của vùng chứa.<table>Tạo ra một bảng tài liệu<ul>ul sẽ bao bọc lấy các thẻ li ở phía bên trong để tạo danh sách.

Inline Tags

Xem thêm:: Chữ Ghép Lớp 1 ❤ Bảng 29 Chữ Cái Ghép Vần Cho Bé

Inline elements là nhóm chỉ sử dụng một phần không gian của phần tử cha và không bắt đầu bằng dòng mới của website, chúng thường được dùng để định dạng nội dung bên trong của Block level elements

Ví dụ ở đoạn code dưới đây

<h2> HTML là gì? Toàn bộ chi tiết về HTML được giải thích từ <span style=”color:#323EBE;”>Gbay</span> <span style=”color:#61E786;”>DEV</span> </h2>

trong khối H2 có các phân tử Inline Tag <span></span> có tác dụng định dạng màu sắc cho chữ Gbay và chữ DEV mà không làm phá vỡ đoạn văn bản.

Kết quả hiển thị

Hình ảnh: kết quả hiển thị văn bản khi dùng các thẻ inline tag

Bạn cũng có thể đổi các phần tử Inline thành Block bằng CSS display từ inline sang block

Dưới đây là danh sách các phần tử Inline:

<a><abbr><acronym><audio><b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><i><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>

Ưu điểm và nhược điểm của HTML

Giống như mọi thứ khác, HTML cũng có ưu và nhược điểm của riêng nó

Ưu điểm:

  • HTML là ngôn ngữ được sử dụng rộng rãi và có cộng động hỗ trợ cực lớn.
  • Mọi trình duyệt web phổ biến hiện nay đều hỗ trợ ngôn ngữ HTML
  • Tài liệu học HTML rất nhiều như sao trên trời, đặc biệt bạn có thể tìm thấy ở website gbaydev với tài liệu chất như nước cất.
  • HTML là ngôn ngữ mã nguồn mở và hoàn toàn miễn phí
  • Markup gọn gàng, đồng nhất và cực kỳ đẹp.
  • Dễ dàng tích hợp với ngôn ngữ backend khác như PHP, Nodejs, Python, Java,

Nhược điểm:

  • HTML chỉ có thể tạo ra các trang tĩnh, còn nếu website động như lưu thông tin người dùng, trả lời câu hỏi thì phải sử dụng tới các ngôn ngữ khác như PHP, Nodejs, Python để xử lý.
  • Bạn sẽ cần viết rất nhiều dòng Code để tạo ra một trang web đơn giản.
  • Nó không thể thực thi một số logic nhất định, vì vậy khi tạo các trang khác nhau như trang chủ, trang liên hệ, trang danh mục bài viết những trang này đều có chung Header và Footer nhưng bạn sẽ phải viết lại hoặc sao chép và dán lại vào những trang khác nhau.
  • Một số trình duyệt trước kia gần như không update kịp các tính năng mới của HTML.

Mối liện hệ giữa HTML, CSS, và JavaScript liên quan với nhau như thế nào?

Xem thêm:: Kí Tự Đặc Biệt Chữ Nhỏ Trên Đầu ❤ 1001 Mẫu Nhỏ Xíu – SCR.VN

HTML là một ngôn ngữ mạnh mẽ song nó vẫn còn thiếu sót rất nhiều thứ để trở lên hoàn hảo vì vậy CSS (Cascading Style Sheet), và JS (Javascript) là 2 thành phần không thể thiếu của một website.

Để mình lấy ví dụ một ngôi nhà cho dễ hiểu:

Giả sử bạn đang xây dựng một ngôi nhà thì ngôn ngữ siêu văn bản HTML sẽ tạo ra một ngôi nhà thô cho bạn.

CSS sẽ đóng vai trò cho phong cách của ngôi nhà như là sơn, màu sắc, tranh ảnh cho ngôi nhà của bạn.

Còn Javascript thì đóng vai trò xác định tính năng động và yếu tố trên website của bạn, nếu trong căn nhà thì khi bạn bật công tắc bóng đèn, tắt bóng đèn, mở tivi

HTML có phải ngôn ngữ lập trình không?

HTML không phải là ngôn ngữ lập trình vì HTML là ngôn đánh dấu siêu văn bản nó không có những quy tắc riêng để người lập trình viên có thể viết các chương trình hay các thuật toán để máy tính có thể hiểu được.

Đuôi html là gì?

Đuôi html hay còn gọi là phần mở rộng html thường có dấu chấm (.html) đó là phần mở rộng của tập tin đánh dấu siêu văn bản HTML (Hypertext Markup Language) để trình duyệt có thể hiểu và hiển thị nội dung.

Hình ảnh: về một số tập tin có đuôi html

Lời kết

Trên đây là bài viết ngắn của gbaydev về HTML là gì? tất cả những thứ liên quan tới ngôn ngữ đánh dấu siêu văn bản HTML(Hypertext Markup Language). Hi vọng với kiến thức trên sẽ giúp các bạn hiểu hơn về những website sử dụng hàng ngày như Facebook, Google, Youtube. Nếu có gì chưa hiểu hãy tham gia vào Group hoặc Fanpage của mình để được giải đáp nhé!

Thank you!!

Cảm ơn bạn đã đọc hết bài viết chia sẻ tâm huyết của trungcapluatvithanh.edu.vn Xin cảm ơn!

Hà Phương là cô gái đam mê chia sẻ kinh nghiệm kiến thức cho mọi người trên các nền tảng khác nhau. Đã học và tốt nghiệp tại tại Học ngành Luật kinh tế - Khoa Luật Học tại Học Viện Thanh Thiếu Niên Việt Nam.

Related Posts

7+ nguyên tắc bố trí máy móc, thiết bị trong phân xưởng

7+ nguyên tắc bố trí máy móc, thiết bị trong phân xưởng

Nội dung bài viếtHTML là gì?Lịch sử phát triển của HTMLHTML hoạt động và xử lý như thế nào?Cấu trúc trang HTMLCác tag thông dụng nhất của…

Soạn bài Luyện tập thao tác lập luận phân tích (trang 43)

Soạn bài Luyện tập thao tác lập luận phân tích (trang 43)

Chào mừng bạn đến với trungcapluatvithanh.edu.vn trong bài viết về ngữ văn 11 luyện tập thao tác lập luận ptich chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.

Chữ người tử tù (Nguyễn Tuân) – Ngữ văn lớp 11 – VietJack.com

Chữ người tử tù (Nguyễn Tuân) – Ngữ văn lớp 11 – VietJack.com

Chào mừng bạn đến với trungcapluatvithanh.edu.vn trong bài viết về ngữ văn 11 chữ người tử tù chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.

Soạn bài Chữa lỗi về chủ ngữ và vị ngữ (tiếp theo) – VietJack.com

Soạn bài Chữa lỗi về chủ ngữ và vị ngữ (tiếp theo) – VietJack.com

Chào mừng bạn đến với trungcapluatvithanh.edu.vn trong bài viết về văn 6 chữa lỗi về chủ ngữ và vị ngữ chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.

Soạn bài Liên kết trong văn bản ngắn nhất – Haylamdo

Soạn bài Liên kết trong văn bản ngắn nhất – Haylamdo

Chào mừng bạn đến với trungcapluatvithanh.edu.vn trong bài viết về soạn ngữ văn lớp 7 liên kết trong văn bản chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.

Soạn văn bài: Từ đồng nghĩa | văn 7 tập 1 – Tech12h

Soạn văn bài: Từ đồng nghĩa | văn 7 tập 1 – Tech12h

Chào mừng bạn đến với trungcapluatvithanh.edu.vn trong bài viết về ngữ văn 7 từ đồng nghĩa chúng tôi sẽ chia sẻ kinh nghiệm chuyên sâu của mình cung cấp kiến thức chuyên sâu dành cho bạn.