Thứ hai, 14/09/2020 | 00:00 GMT+7

Cách thêm HTML Thành phần cho trang web của bạn


Một phần của loạt bài: Cách xây dựng trang web bằng HTML

Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.

Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.

Hướng dẫn này sẽ hướng dẫn bạn các bước thêm phần tử <head> vào trang web , phần này tạo ra một phần để ta bao gồm thông tin có thể đọc được bằng máy về tài liệu web của ta . Thông tin này chủ yếu được sử dụng bởi các trình duyệt và công cụ tìm kiếm để diễn giải nội dung của trang. Nội dung được đặt bên trong phần tử <head> sẽ không hiển thị trên trang web.

Lưu ý : Phần tử HTML <head> là một phần tử ngữ nghĩa trong đó nó cho trình duyệt và nhà phát triển biết ý nghĩa hoặc mục đích của nội dung của nó. Các yếu tố ngữ nghĩa được sử dụng để hỗ trợ con người có thể đọc được trang HTML , cung cấp thêm thông tin cho trình duyệt để diễn giải nội dung, cải thiện khả năng truy cập trang web (trình đọc màn hình sử dụng thẻ ngữ nghĩa) và có thể hỗ trợ định vị SEO.

Thêm thẻ mở và đóng <head> bên trong thẻ <html> . Tiếp theo, thêm hai dòng mã HTML bổ sung bên trong <head> như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sammy’s First Website</title>
  </head>
</html> 

Lưu ý bạn đã lồng nhiều phần tử HTML vào bên trong nhau. Các phần tử <title><meta> được lồng bên trong phần tử <head> phần tử <head> được lồng bên trong phần tử <html> . Ta sẽ lồng các phần tử thường xuyên khi hướng dẫn tiếp tục.

Bây giờ ta hãy tạm dừng một chút để hiểu mục đích của đoạn mã ta vừa thêm vào. Dòng mã sau thẻ mở <head><meta charset="utf-8"> —chỉ định bộ ký tự của tài liệu thành UTF-8, một định dạng unicode hỗ trợ phần lớn ký tự từ nhiều ngôn ngữ viết.

Dòng mã tiếp theo đặt tiêu đề của trang HTML bằng cách sử dụng phần tử <title> . Nội dung bạn chèn vào phần tử này sẽ được hiển thị trên tab trình duyệt và là tiêu đề của trang web trong kết quả tìm kiếm, nhưng nó sẽ không hiển thị trên chính trang web đó. Đảm bảo thay thế “Trang web đầu tiên của Sammy” bằng tên của bạn hoặc tên của trang web bạn đang xây dựng.

Mặc dù các nhà phát triển thường thêm thông tin bổ sung trong phần <head> , giờ đây ta có đủ thông tin để tạo một trang web HTML cơ bản. Lưu file của bạn trước khi chuyển sang phần tiếp theo. Nếu bạn thử tải file trong trình duyệt của bạn , bạn sẽ nhận được một trang trống.

Đến đây bạn sẽ biết mục đích của các phần tử HTML <head> và cách thêm một phần tử vào file HTML.


Tags:

Các tin liên quan

Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách Căn giữa hoặc Căn chỉnh Văn bản và image trên Trang web của Bạn bằng HTML
2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách tạo và liên kết đến các trang web bổ sung bằng HTML
2020-09-14
Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML
2020-09-14
Cách thiết lập dự án trang web HTML của bạn
2020-09-14
Cách tạo kiểu cho HTML Thành phần
2020-09-14
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách sử dụng