하나의 HTML 파일을 다른 HTML 파일에 포함시키는 방법

HTML include를 사용하면 사이트 관리를 크게 단순화 할 수 있습니다.

다른 웹 사이트로 이동하여 페이지간에 이동하면 해당 페이지 각각이 여러면에서 다를 수 있지만 다른 페이지에서도 매우 유사하다는 것을 빨리 알 수 있습니다. 거의 모든 웹 사이트에는 사이트의 모든 페이지에서 반복되는 디자인 요소가 포함됩니다. 모든 페이지에서 찾을 수있는 사이트 요소의 예로는 로고가있는 머리글 영역, 탐색 영역 및 바닥 글 영역이 있습니다.

사이트의 요소를 반복하면 사용자 환경에서 일관성을 유지할 수 있습니다. 방문자는 모든 페이지에서 내비게이션을 찾을 필요가 없습니다. 일단 찾으면 방문하는 사이트의 다른 페이지에 어디에 있는지 알 수 있기 때문입니다.

웹 디자인을보다 효율적으로 만드는 방법 포함

웹 사이트를 관리하는 임무를 맡고있는 누군가는 이러한 반복되는 영역에 도전장을 내고 있습니다. 그 지역의 어떤 것에 변화를 주어야한다면 어떨까요? 예를 들어, 사이트의 모든 페이지에있는 바닥 글에 1 년이 포함 된 저작권 정책이 포함되어있는 경우 해당 연도가 변경되고 날짜를 편집해야하는 경우 어떻게됩니까? 해당 섹션은 모든 페이지에 있으므로 변경 사항을 적용하기 위해 사이트의 모든 단일 페이지를 개별적으로 편집해야합니까?

포함 된 컨텐츠로 인해이 반복되는 컨텐츠에 대한 사이트의 모든 페이지를 편집해야 할 필요가 없습니다. 대신 하나의 파일을 편집하면 전체 사이트와 모든 페이지가 업데이트됩니다!

이 기능을 사이트에 추가하고 여러 HTML 파일을 여러 가지 방법으로 포함시킬 수있는 몇 가지 방법을 살펴 보겠습니다.

콘텐츠 관리 시스템에서 반복되는 콘텐츠

사이트에서 CMS를 사용하는 경우 특정 템플릿을 사용하거나 테마가 해당 소프트웨어의 일부입니다. 이러한 템플릿을 처음부터 사용자 지정 사용자 지정을해도이 사이트는 여전히이 프레임 워크를 페이지에 사용합니다.

따라서 이러한 CMS 템플릿에는 모든 페이지에서 반복되는 사이트 영역이 포함됩니다. CMS의 백엔드에 로그인하고 필요한 템플릿을 편집하기 만하면됩니다. 템플릿을 사용하는 사이트의 모든 페이지가 업데이트됩니다.

사이트에 대한 콘텐츠 관리 시스템이 없더라도 포함 된 파일을 계속 이용할 수 있습니다. HTML 에는 사이트의 이러한 템플릿 영역을보다 쉽게 ​​관리 할 수있는 기능이 포함 되어 있습니다.

HTML 포함은 무엇입니까?

include는 전체 HTML 문서가 아닌 HTML 섹션입니다. 대신 프로그래밍을 통해 전체 웹 페이지에 삽입 할 수있는 다른 페이지의 일부입니다. 대부분의 포함 파일은 웹 사이트의 여러 페이지에서 반복되는 앞서 언급 한 항목입니다. 예 :

이러한 반복 된 영역을 페이지에 포함 시키면 장점이 있습니다. 유감스럽게도 파일을 삽입하는 과정은 HTML만으로는 발생할 수없는 일이므로 포함 파일을 웹 페이지에 추가하는 프로그램이나 스크립트가 필요합니다.

서버 측 Includes 사용

Server Side Includes (SSI라고도 함)는 웹 개발자가 HTML 페이지를 다른 페이지에 "포함"할 수 있도록 개발되었습니다.

기본적으로 한 문서에서 발견 된 스 니펫은 페이지가 서버에서 실행되어 웹 브라우저로 전송 될 때 다른 문서에 포함됩니다.

SSI는 대부분의 웹 서버에 포함되어 있지만 작동 시키려면 활성화해야 할 수도 있습니다. 서버가 SSI를 지원하는지 여부를 모르는 경우 호스팅 제공 업체에 문의하십시오.

다음은 SSI를 사용하여 모든 웹 페이지에 HTML 스 니펫을 포함하는 방법의 예입니다.

  1. 사이트의 공통 요소에 대한 HTML을 별도의 파일로 저장하십시오. 예를 들어 탐색 섹션이 navigation.html 또는 navigation.ssi 로 저장 될 수 있습니다 .
  2. 다음 SSI 코드 를 사용하여 HTML 문서의 코드를 각 페이지에 포함 시키십시오 ( 따옴표 사이에 파일의 경로와 파일 이름을 대체하십시오 ). {기음}
  1. 파일을 포함시키려는 모든 페이지에이 코드를 추가하십시오.

PHP 포함 사용하기

PHP는 서버 수준의 스크립팅 언어입니다. 여러 가지 일을 할 수 있지만 일반적으로 SSI로 다룬 것과 같은 방식으로 HTML 문서를 페이지에 포함시키는 것이 일반적입니다.

SSI와 마찬가지로 PHP는 서버 수준의 기술입니다. 웹 사이트에 PHP 기능이 있는지 확실하지 않은 경우 호스팅 제공 업체에 문의하십시오.

다음은 PHP가 활성화 된 웹 페이지에 HTML 스 니펫을 포함시키는 데 사용할 수있는 간단한 PHP 스크립트입니다.

  1. 탐색과 같은 사이트의 공통 요소에 대한 HTML을 별도의 파일로 저장하십시오. 예를 들어 탐색 섹션이 navigation.html 또는 navigation.ssi 로 저장 될 수 있습니다 .
  2. 다음 PHP 코드를 사용하여 각 페이지에 해당 HTML을 포함 시키십시오 ( 따옴표 사이에 파일의 경로와 파일 이름 대체 ). navigation.php ");?>
  3. 파일을 포함시키려는 모든 페이지에 동일한 코드를 추가하십시오.

JavaScript 포함

자바 스크립트는 사이트의 페이지 내에 HTML을 포함시키는 또 다른 방법입니다. 이것은 서버 레벨 프로그래밍을 필요로하지 않는 장점이 있지만 좀 더 복잡합니다. 자바 스크립트를 허용하는 브라우저에서는 분명히 작동합니다. 사용자가 자바 스크립트를 사용하지 않기로 결정하지 않는 한 대부분 가능합니다.

자바 스크립트를 사용하여 HTML 스 니펫을 포함하는 방법은 다음과 같습니다.

  1. 사이트의 공통 요소에 대한 HTML을 JavaScript 파일에 저장하십시오. 이 파일에 쓰여진 HTML은 document.write 함수로 화면에 출력되어야합니다.
  2. 해당 파일을 웹 사이트에 업로드하십시오.