php Question posted in
Official manual can be found here.

Insert external php file into html

Insert header and footer with PHP includes in HTML

I am creating a website locally and I would like to insert header and footer in a separate page since they are always the same, but when I insert the php include tag inside the html page where I have to insert it, it doesn’t read it to me. On the other hand, if I insert it in another page it reads it to me. Can you guys help me out?
I don’t know if I was very clear in my explanation.

Edit #1

I want to create a site for cinema management. I created the page where I can display the descriptions of the various movies that are produced at the cinema. On each page the header and footer are the same, only the body changes, so I wanted to create the header page separately and embed it in the page mentioned before. How can this be done? I tried using include from php, but it doesn’t work. I also tried inserting the link

<link href="nome del percorso" rel="import">

The page about the description of the various films opens when you click on the "buy now" button.

The file header.html is:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="import" href="../header/header.html">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>

  <body id="homepage">
    <!--<include src="../index.php"></include>-->
      <header class="header">
        <nav class="navigation-open">
          <div class="global container grid-x">
            <div class="logowrapper grid-x">
              <div class="logo-container">
                <a href="index.html">
                  <img class="logo" src="../img/logo.png" alt="logo">
                </a>
              </div>
            </div>
            <div class="dashboard-nav cell grid-x">
              <nav class="choicewrapper">
                <ul class="wrapper">
                  <li class="page-cinema">
                    <a href="#" class="gradient-fill-hover">
                      <span>A</span>
                      <span>l</span>
                      <span>&nbsp</span>
                      <span>C</span>
                      <span>i</span>
                      <span>n</span>
                      <span>e</span>
                      <span>m</span>
                      <span>a</span>
                    </a>
                  </li>
                  <li class="page-card">
                    <a href="#" class="gradient-fill-hover">
                      <span>C</span>
                      <span>a</span>
                      <span>r</span>
                      <span>d</span>
                      <span>&nbsp</span>
                      <span>e</span>
                      <span>&nbsp</span>
                      <span>P</span>
                      <span>r</span>
                      <span>o</span>
                      <span>m</span>
                      <span>o</span>
                    </a>
                  </li>
                  <li class="page-pass">
                    <a href="#" class="gradient-fill-hover">
                      <span>P</span>
                      <span>a</span>
                      <span>s</span>
                      <span>s</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <nav class="loginwrapper grid-x cell align-right">
              <div class="form-search-s grid-x">
                <form class="form-search" onsubmit="event.preventDefault();" role="search">
                  <label for="search">Search for stuff</label>
                  <input class="input-search" type="search" id="search" placeholder="Search..." autofocus required />
                  <button type="submit" class="btn-search" onclick="index.html">Go</button>
                </form>
              </div>
              <div class="profile-login">
                <a href="../login/login.html" title="Accedi / Registrati">
                  <i class="fas fa-user"></i>
                  <span>Login</span>
                  <i class="fas fa-caret-down"></i>
                </a>
                <div class="container-login open grid-x">
                  <div class="dropdown-content grid-x cell">
                    <div class="container-dashboard cell d-flex auto">
                      <ul>
                        <li class="list-login">
                          <a href="#" class="login">
                            <i class="fas fa-user"></i>
                            <span>Login</span>
                          </a>
                        </li>
                        <li class="list-login">
                          <a href="#" class="registration">
                            <i class="fas fa-square-poll-horizontal"></i>
                            <span>Registrati</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </nav>
        </header>
    </body>
  </html>

The file prova.html is:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="import" href="../header/header.html">
  <!--<link rel="import" href="../header/header.html" />-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
  <body>

    <!--<include src="prova2.html"></include> INCLUSIONE CODICE ESTERNO -->
  </body>
</html>

Edit #2

My code index.php is:

<?php include './header/header.php'; ?>

My code header.html is:

<html>
<head> 
</head>
<body>
<include src="../index.php"></include>
my code...
</body>

My code prova.html is:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
</head>
  <body>
    <include src="../header/header.html"></include>
  </body>
</html>
Tags:

2

Answers


  1. 0

    The command to insert one html file into another is "iframe". The php extensions and code you tried to use were confusing the issue. See edit to your prova.html file where it is substituted in the line where you had "include". I added some inline css to make sure your header fully displays. In my test I had both header.html and prova.html in the same directory, so I don’t use file paths. Play around with the width and height to fit it with the rest of the information that will display on the prova page:

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
</head>
  <body>
<!--     <include src="../header/header.html"></include> -->
<iframe  marginwidth="0" marginheight="0" frameborder="0" style="width:325px;height:550px;"  src="header.html"></iframe>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    HTML does not offer a <include> tag. That does not exist, so that code you have written for it does nothing.

    What you need is to have your files all based off PHP (so, they need to have the .php file extension, not .html) [Why? Because you’re telling PHP to try to include a header.php file, which doesn’t exist; your header file is a .html file.] and then you need a web server for development. You can use XAMPP, for example.

    Once you have the server running you need to navigate to localhost or 127.0.0.1 as your localhost web address, this will be your web directory. PHP can not execute unless it’s run on a server, but a test server like this works fine.

    If index.php is the file you want to have something included into, you can simply write your include_once (preferable over include) statement where you want PHP to render it. For example if you want to include a navbar file into your main page:

    index.php

    <body>
<?php include_once('.../path_to_navbar.php');
</body>

    header.php

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <!-- you do not need a link statement here for header.php -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>

<!-- TRUNCATED FOR ANSWERING PURPOSES -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search