Mục đích sử dụng html là gì?

HTML (Ngôn ngữ đánh dấu siêu văn bản) và CSS (Cascading Style Sheets) là hai trong số những công nghệ cốt lõi để xây dựng các trang Web. HTML cung cấp cấu trúc của trang, CSS bố cục (hình ảnh và âm thanh), cho nhiều loại thiết bị. Cùng với đồ họa và tập lệnh, HTML và CSS là cơ sở để xây dựng các trang Web và Ứng dụng Web. Tìm hiểu thêm bên dưới về

HTML là gì?

HTML là ngôn ngữ để mô tả cấu trúc của các trang Web. HTML cung cấp cho tác giả phương tiện để

  • Xuất bản tài liệu trực tuyến với tiêu đề, văn bản, bảng, danh sách, ảnh, v.v.
  • Truy xuất thông tin trực tuyến qua các liên kết siêu văn bản, chỉ bằng một nút bấm
  • Thiết kế các biểu mẫu để thực hiện giao dịch với các dịch vụ từ xa, để sử dụng trong việc tìm kiếm thông tin, đặt chỗ, đặt hàng sản phẩm, v.v.
  • Bao gồm bảng tính, video clip, clip âm thanh và các ứng dụng khác trực tiếp trong tài liệu của họ

Với HTML, tác giả mô tả cấu trúc của các trang bằng cách sử dụng đánh dấu. Các thành phần của nhãn ngôn ngữ các phần nội dung như “đoạn văn”, “danh sách”, “bảng”, v.v.

XHTML là gì?

XHTML là một biến thể của HTML sử dụng cú pháp của XML, Ngôn ngữ đánh dấu mở rộng. XHTML có tất cả các phần tử giống nhau (đối với đoạn văn, v.v. ) dưới dạng biến thể HTML, nhưng cú pháp hơi khác một chút. Vì XHTML là một ứng dụng XML nên bạn có thể sử dụng các công cụ XML khác với nó (chẳng hạn như XSLT, một ngôn ngữ để chuyển đổi nội dung XML)

CSS là gì?

CSS là ngôn ngữ để mô tả cách trình bày của các trang Web, bao gồm màu sắc, bố cục và phông chữ. Nó cho phép một người thích ứng bản trình bày với các loại thiết bị khác nhau, chẳng hạn như màn hình lớn, màn hình nhỏ hoặc máy in. CSS độc lập với HTML và có thể được sử dụng với bất kỳ ngôn ngữ đánh dấu dựa trên XML nào. Việc tách HTML khỏi CSS giúp dễ dàng duy trì các trang web, chia sẻ biểu định kiểu giữa các trang và điều chỉnh các trang cho phù hợp với các môi trường khác nhau. Điều này được gọi là sự phân tách cấu trúc (hoặc. nội dung) từ bản trình bày

WebFont là gì?

WebFonts là một công nghệ cho phép mọi người sử dụng phông chữ theo yêu cầu trên Web mà không cần cài đặt trong hệ điều hành. W3C có kinh nghiệm về các phông chữ có thể tải xuống thông qua HTML, CSS2 và SVG. Cho đến gần đây, các phông chữ có thể tải xuống vẫn chưa phổ biến trên Web do thiếu định dạng phông chữ có thể tương tác. Nỗ lực của WebFonts có kế hoạch giải quyết vấn đề đó thông qua việc tạo định dạng phông chữ mở, được ngành hỗ trợ cho Web (được gọi là "WOFF")

ví dụ

Ví dụ rất đơn giản sau đây về một phần của tài liệu HTML minh họa cách tạo liên kết trong một đoạn văn. Khi được hiển thị trên màn hình (hoặc bằng bộ tổng hợp giọng nói), văn bản liên kết sẽ là “báo cáo cuối cùng”; . //www. thí dụ. com/báo cáo”

For more information see the final report.

Thuộc tính class trên thẻ bắt đầu của đoạn (“

”) có thể được sử dụng, trong số những thứ khác, để thêm phong cách. Chẳng hạn, để in nghiêng văn bản của tất cả các đoạn văn bằng một lớp “moreinfo”, người ta có thể viết, bằng CSS

Bạn có thể đã nghe thuật ngữ HTML trước đây, nhưng HTML thực sự có nghĩa là gì? . Ngôn ngữ đánh dấu khác với ngôn ngữ lập trình. Trong khi các ngôn ngữ lập trình giúp chúng tôi sửa đổi dữ liệu, chúng tôi sử dụng các ngôn ngữ đánh dấu để xác định cách các phần tử được hiển thị trên trang web

HTML có cấu trúc đơn giản, dựa trên văn bản, dễ dàng cho người mới bắt đầu tìm hiểu và hiểu. Đây là một ví dụ


 
  Page Title
 
 
  

Heading

Content

Vậy HTML dùng để làm gì? . Đọc để tìm hiểu thêm về cách HTML hoạt động, cách HTML5 cải thiện chức năng của nó và các nghề nghiệp khác nhau sử dụng nó

HTML hoạt động như thế nào?

HTML thường được lưu trữ trong các tệp sử dụng. htm hoặc. phần mở rộng html. Một trang web có thể bao gồm hàng trăm hoặc thậm chí hàng nghìn tệp HTML này được lưu trong các thư mục khác nhau

Khi bạn truy cập một trang web, máy chủ của nó sẽ gửi các tệp HTML của nó tới trình duyệt của bạn. Sau đó, trình duyệt của bạn sẽ đọc HTML trong các tệp và hiển thị nó. Một số ứng dụng web không sử dụng HTML tĩnh mà tạo nó để phản hồi lại các hành động cụ thể trên máy chủ của chúng

Chúng tôi cũng có thể thêm các loại nội dung khác, chẳng hạn như tệp CSS và JavaScript, hình ảnh và video để thêm nhiều tính năng hơn cho trang web. CSS cho phép chúng tôi thêm các yếu tố phong cách (như màu sắc) vào trang web. JavaScript cho phép tương tác. Cùng với nhau, ba ngôn ngữ này tạo thành nền tảng phát triển web

Các thẻ và phần tử HTML là gì?

Hãy nghĩ về các phần tử HTML như các khối xây dựng của một trang web. Các phần tử được xác định bằng thẻ mở và thẻ đóng của chúng và có thể được lồng trong các phần tử khác. Các nhà phát triển web sử dụng các yếu tố để cấu trúc một trang web thành các phần, tiêu đề và các khối nội dung khác. Đây là một ví dụ

Heading

The main content

  • List item one
  • List item two

Trong ví dụ HTML ở trên, phần tử đầu tiên chúng ta thấy là

, phần tử này bao quanh các phần tử khác. Div là một trong những phần tử HTML phổ biến nhất và là một cách đơn giản để tách một trang thành các phần. Ví dụ: nếu bạn muốn tạo hai cột trên một trang web, bạn có thể sử dụng các phần tử div để xác định chúng

Được lồng bên trong div, chúng ta thấy một phần tử

. Các phần tử H1 xác định tiêu đề chính của trang web. Văn bản trong tiêu đề thường sẽ lớn hơn và đậm hơn, tùy thuộc vào kiểu được áp dụng cho trang

Thẻ

tạo thành phần đoạn văn. Thường sẽ có một lề sau phần tử, một lần nữa, tùy thuộc vào kiểu

Cuối cùng, chúng ta thấy một vài tập hợp các phần tử lồng nhau. Thẻ


 
  Page Title
 
 
  

Heading

Content

0 tạo một danh sách không có thứ tự, danh sách này không có tác dụng gì cho đến khi bạn lồng ít nhất một bộ phần tử danh sách (

 
  Page Title
 
 
  

Heading

Content

1) vào trong đó. Một trình duyệt sẽ hiển thị các phần tử này giống như thế này

  • Liệt kê mục một
  • Liệt kê mục hai

Các phần tử HTML được liệt kê ở trên là một số phần tử phổ biến nhất, nhưng chúng ta có thể sử dụng các phần tử khác để thêm hình ảnh, bảng và các phần tử khác vào trang web

HTML5 là gì?

HTML5 là phiên bản mới nhất của HTML. Bản cập nhật đã cải thiện chức năng của ngôn ngữ, cho phép sử dụng các tính năng trước đây yêu cầu phần mềm bổ sung như plugin trình duyệt. Nó cũng đã thêm khả năng tạo ứng dụng bằng HTML hoạt động ngoại tuyến. Dưới đây là một số thẻ mà HTML5 đã thêm vào ngôn ngữ

  • 
     
      Page Title
     
     
      

    Heading

    Content

    2. Thẻ video cho phép nhà phát triển nhúng và truyền phát video từ trình duyệt mà không cần plugin như Flash hoặc Silverlight
  • 
     
      Page Title
     
     
      

    Heading

    Content

    3. Thẻ âm thanh tương tự như thẻ video ở chỗ bạn có thể sử dụng thẻ này để nhúng và truyền các tệp âm thanh từ trình duyệt web
  • 
     
      Page Title
     
     
      

    Heading

    Content

    4. Thẻ canvas xác định một phần trong HTML được sử dụng để vẽ đồ họa bằng JavaScript. Nó thậm chí có thể xử lý đồ họa và hoạt hình 3D bằng WebGL
  • Heading

    The main content

    • List item one
    • List item two
    0. HTML5 cũng đã thêm các thẻ mới để xác định các phần cụ thể của trang web, như thẻ điều hướng, xác định các thành phần điều hướng

Các tính năng được liệt kê ở trên chỉ là một số trong số rất nhiều tính năng do HTML5 mang lại. Đó là một trong những thay đổi lớn nhất trong định nghĩa của ngôn ngữ và mở đường cho các trang web động hiện đại ngày nay.

HTML được sử dụng để làm gì?

Bây giờ chúng ta đã hiểu các thẻ và phần tử HTML cũng như các bản cập nhật do HTML5 mang lại, chúng ta hãy xem xét kỹ hơn những gì ngôn ngữ này có thể làm

Cấu trúc các trang web

Với các thẻ và phần tử, chúng ta có thể xác định tiêu đề, đoạn văn và các nội dung khác của trang web. Các trình duyệt đi kèm với biểu định kiểu tích hợp giúp phân biệt các yếu tố này một cách trực quan. Nội dung được bao quanh bởi các thẻ

sẽ có phông chữ lớn, in đậm và có dòng riêng. Xung quanh văn bản với các thẻ

Heading

The main content

  • List item one
  • List item two
2 sẽ làm cho nó đậm và nhỏ hơn một chút so với các phần tử

, v.v. Không có các thẻ này, văn bản trên trang web sẽ trông giống nhau

Điều hướng internet

Điều hướng trên internet sẽ khó hơn nhiều nếu không có HTML. Hãy tưởng tượng bạn phải nhập thủ công URL của mọi trang web bạn muốn truy cập. Đây sẽ là thực tế của chúng tôi nếu không có thẻ neo. Thẻ neo HTML cho phép chúng ta liên kết các trang với nhau bằng cách sử dụng thuộc tính href. Đây là một ví dụ

Heading

The main content

  • List item one
  • List item two
4

Như bạn có thể đoán, đoạn mã trên tạo một siêu liên kết tới Google. Bạn cũng có thể sử dụng siêu liên kết để liên kết đến một phần cụ thể của trang web

Nhúng hình ảnh và video

HTML cũng cho phép bạn không chỉ nhúng hình ảnh vào trang web mà còn điều chỉnh chiều rộng, chiều cao, vị trí và thậm chí cả cách chúng được hiển thị

Trước đây, các nhà phát triển sẽ sử dụng Flash để nhúng video vào trang web. Tuy nhiên, với việc bổ sung thẻ


 
  Page Title
 
 
  

Heading

Content

2 của HTML5, điều đó không còn cần thiết nữa

Cùng với việc nhúng video, bạn có thể sử dụng các thuộc tính HTML khác để điều chỉnh các điều khiển video, dấu thời gian, hình thu nhỏ, tự động phát, v.v.

Cải thiện lưu trữ dữ liệu phía máy khách và khả năng ngoại tuyến

HTML5 cũng cải thiện khả năng ngoại tuyến của ngôn ngữ. Trang web sử dụng cookie để lưu trữ dữ liệu về người dùng có thể được truy xuất sau này khi họ truy cập lại trang web. Cookie hoạt động tốt đối với dữ liệu nhỏ như mã thông báo xác thực và tên người dùng, nhưng việc bổ sung localStorage và IndexDB của HTML5 đã cho phép các trình duyệt lưu trữ dữ liệu phức tạp hơn

Ngoài ra, các tệp kê khai bộ đệm và bộ đệm ứng dụng mà bạn có thể tham khảo từ HTML cho phép người dùng duyệt một trang web khi ngoại tuyến bằng cách giữ lại dữ liệu trên máy của người dùng. Điều này cho phép ứng dụng web của bạn tiếp tục hoạt động ngay cả khi kết nối của người dùng bị rớt

Sự phát triển trò chơi

Mặc dù bạn không thể tạo trò chơi điện tử hoàn toàn bằng HTML, nhưng phần tử


 
  Page Title
 
 
  

Heading

Content

4 giúp bạn có thể tạo trò chơi điện tử trong trình duyệt của mình bằng CSS và JavaScript. Trước đây, bạn chỉ có thể làm điều này với Flash hoặc Silverlight. Nhưng với HTML hiện đại, bạn có thể tạo cả trò chơi 2D và 3D chạy trong trình duyệt của mình

Tương tác với API gốc

Một tính năng khác của HTML là nó có thể tương tác với hệ điều hành của bạn, không chỉ với trình duyệt web của bạn. Các tính năng này cho phép kéo tệp vào một trang web để tải chúng lên, xem toàn màn hình video, v.v.

Nghề nghiệp nào sử dụng HTML?

Là ngôn ngữ của Internet, mọi nhà phát triển web tham vọng cần biết HTML. Các kỹ sư front-end sử dụng HTML (cùng với các ngôn ngữ khác như CSS và JavaScript) để thiết kế cấu trúc và bố cục của các trang web và ứng dụng. Tương tự, các nhà phát triển di động sử dụng các ngôn ngữ này với các khung như Ionic và React Native để xây dựng các ứng dụng di động

Kỹ sư back-end cũng cần thành thạo HTML. Mặc dù các ngôn ngữ khác trong ngăn xếp công nghệ của họ có thể tạo HTML cho họ, nhưng họ vẫn cần hiểu cấu trúc HTML để giữ cho mọi thứ hoạt động trơn tru

Chúng tôi cũng sử dụng HTML bên ngoài Internet, như trong mạng nội bộ và các ứng dụng nội bộ. Vì vậy, ngay cả khi bạn viết mã cho mục đích ngoại tuyến, bạn vẫn nên học HTML. Nó thậm chí có thể có lợi cho các nhóm phi kỹ thuật, vì một số nhà tiếp thị sử dụng nó cho blog và email

Tìm hiểu thêm về HTML

Bạn có thể tìm hiểu thêm về HTML và nhiều công dụng của nó trong khóa học Tìm hiểu HTML của chúng tôi. Trong khóa học này, bạn sẽ học mọi thứ bạn cần biết về cú pháp cơ bản của HTML khi tạo trang web đầu tiên của mình

Nếu bạn quan tâm đến sự nghiệp phát triển web, hãy xem Lộ trình nghề nghiệp Kỹ sư Front-End của chúng tôi. Chúng tôi sẽ hướng dẫn bạn cách xây dựng các ứng dụng web bằng các ngôn ngữ như HTML, CSS và JavaScript, giúp bạn phát triển danh mục đầu tư và chuẩn bị cho các cuộc phỏng vấn trong tương lai