Cách bao gồm một tệp HTML trong một tệp khác

Sử dụng HTML bao gồm rất đơn giản hóa việc quản lý trang web của bạn

Truy cập bất kỳ trang web nào và điều hướng từ trang này sang trang khác và bạn sẽ nhanh chóng nhận ra rằng, trong khi mỗi trang trong số đó có thể khác nhau theo nhiều cách, chúng cũng khá giống nhau ở những trang khác. Hầu như tất cả các trang web đều bao gồm các yếu tố của thiết kế được lặp lại trên mọi trang trên trang web. Một số ví dụ về các yếu tố trang web sẽ được tìm thấy trên mỗi trang sẽ là khu vực tiêu đề nơi biểu tượng nằm, điều hướng và khu vực chân trang.

Các yếu tố lặp lại trên một trang web cho phép tính nhất quán trong trải nghiệm người dùng. Một khách truy cập không cần phải định vị điều hướng trên mỗi trang vì một khi họ đã tìm thấy nó, họ biết nó sẽ ở đâu trên các trang khác của trang web họ truy cập.

Bao gồm làm cho thiết kế web hiệu quả hơn

Là một người được giao nhiệm vụ quản lý một trang web, các khu vực lặp lại này mang đến một thách thức. Điều gì sẽ xảy ra nếu bạn cần thay đổi điều gì đó trong khu vực đó? Ví dụ: nếu chân trang của bạn (nằm trên mỗi trang của trang web) bao gồm tuyên bố bản quyền với một năm, điều gì sẽ xảy ra khi năm đó thay đổi và bạn cần chỉnh sửa ngày? Vì phần đó nằm trên mọi trang, bây giờ bạn cần chỉnh sửa từng trang riêng lẻ trên trang web của mình để thực hiện thay đổi đó - hay bạn?

Nội dung được bao gồm có thể loại bỏ sự cần thiết phải chỉnh sửa mọi trang trên trang web của bạn cho nội dung lặp lại này. Thay vào đó, bạn chỉ cần chỉnh sửa một tệp và toàn bộ trang web của bạn và mọi trang trong đó đều nhận được bản cập nhật!

Hãy xem xét một vài cách bạn có thể thêm chức năng này vào trang web của mình và bao gồm một tệp HTML ở một số người khác.

Nội dung lặp lại trong Hệ thống quản lý nội dung

Nếu trang web của bạn sử dụng CMS thì có khả năng sử dụng các mẫu hoặc chủ đề nhất định là một phần của phần mềm đó. Ngay cả khi bạn tùy chỉnh xây dựng các mẫu này từ đầu, trang web vẫn tận dụng khung này cho các trang.

Như vậy, các mẫu CMS đó sẽ chứa các khu vực của trang web được lặp lại trên mỗi trang. Bạn chỉ cần đăng nhập vào phần cuối của CMS và chỉnh sửa các mẫu cần thiết. Tất cả các trang của trang web sử dụng mẫu đó sẽ được cập nhật.

Ngay cả khi bạn không có hệ thống quản lý nội dung cho trang web của mình, bạn vẫn có thể tận dụng các tệp được bao gồm. Trong HTML, có bao gồm có thể giúp làm cho quản lý các khu vực templated của trang web của bạn dễ dàng hơn.

HTML bao gồm những gì?

Bao gồm là một phần của HTML không phải là một tài liệu HTML đầy đủ của chính nó. Thay vào đó, nó là một phần của một trang khác có thể được chèn vào một trang web đầy đủ. Hầu hết các tệp bao gồm các mục được nói trên được lặp lại trên nhiều trang của một trang web. Ví dụ:

Có một lợi thế để có những khu vực lặp đi lặp lại bao gồm trên các trang. Thật không may, quá trình chèn một tập tin không phải là một cái gì đó có thể xảy ra với HTML một mình, vì vậy bạn cần phải có một số loại chương trình hoặc kịch bản sẽ thêm các tập tin của bạn bao gồm vào các trang web của bạn.

Sử dụng Server Side Bao gồm

Server Side Bao gồm, còn được gọi là SSI, lần đầu tiên được phát triển để cho phép các nhà phát triển Web "bao gồm" các tài liệu HTML bên trong các trang khác.

Về cơ bản, một đoạn mã được tìm thấy trong một tài liệu được đưa vào một tài liệu khác khi trang được chạy tại máy chủ và được gửi đến trình duyệt web.

SSI được bao gồm trên hầu hết các máy chủ web, nhưng bạn có thể phải kích hoạt nó để nó hoạt động. Nếu bạn không biết liệu máy chủ của mình có hỗ trợ SSI hay không, hãy liên hệ với nhà cung cấp dịch vụ lưu trữ của bạn.

Dưới đây là ví dụ về cách bạn có thể sử dụng SSI để bao gồm một đoạn mã HTML trong tất cả các trang web của bạn:

  1. Lưu HTML cho các phần tử phổ biến của trang web của bạn dưới dạng các tệp riêng biệt. Ví dụ: phần điều hướng của bạn có thể được lưu dưới dạng navigation.html hoặc navigation.ssi .
  2. Sử dụng mã SSI sau để bao gồm mã của tài liệu HTML đó trong mỗi trang ( thay thế đường dẫn tệp và tên tệp của bạn giữa các dấu ngoặc kép ). {C}
  1. Thêm mã này trên mọi trang mà bạn muốn bao gồm tệp.

Sử dụng PHP bao gồm

PHP là một ngôn ngữ kịch bản cấp máy chủ. Nó có thể thực hiện một số điều, nhưng một cách sử dụng phổ biến là bao gồm các tài liệu HTML bên trong các trang của bạn, giống như cách chúng ta vừa bảo hành với SSI.

Giống như SSI, PHP là một công nghệ cấp máy chủ. Nếu bạn không chắc chắn liệu mình có chức năng PHP trên trang web của mình hay không, hãy liên hệ với nhà cung cấp dịch vụ lưu trữ của bạn.

Đây là một kịch bản PHP đơn giản mà bạn có thể sử dụng để bao gồm một đoạn mã HTML trên bất kỳ trang Web hỗ trợ PHP nào:

  1. Lưu HTML cho các thành phần phổ biến trên trang web của bạn, chẳng hạn như điều hướng, để tách các tệp. Ví dụ: phần điều hướng của bạn có thể được lưu dưới dạng navigation.html hoặc navigation.ssi .
  2. Sử dụng mã PHP sau để bao gồm HTML đó trong mỗi trang ( thay thế đường dẫn và tên tệp của bạn giữa các dấu ngoặc kép ). navigation.php ");?>
  3. Thêm cùng mã này vào mỗi trang mà bạn muốn bao gồm tệp.

JavaScript bao gồm

JavaScript là một cách khác để bao gồm HTML trong các trang của trang web của bạn. Điều này có lợi thế là không yêu cầu lập trình cấp máy chủ, nhưng nó phức tạp hơn một chút - và nó rõ ràng là hoạt động cho một trình duyệt cho phép Javascript, hầu hết đều làm trừ khi người dùng quyết định tắt nó.

Dưới đây là cách bạn có thể bao gồm một đoạn mã HTML bằng JavaScript :

  1. Lưu HTML cho các thành phần phổ biến của trang web của bạn vào tệp JavaScript. Bất kỳ HTML nào được viết trong tệp này, phải được in ra màn hình bằng hàm document.write.
  2. Tải tệp đó lên trang web của bạn.
  3. Sử dụng phần tử