Load HTML from another HTML

Asked

Viewed 3,242 times

3

I would ask for help in loading inside my main HTML file external files from 2 other HTML pages

Below follows the Nav

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Styling links</title>
        <meta name="author" content="Publio Elon">
        <meta name="description" content="Curso de HTML5 e CSS3">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/owl.theme.default.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/animate.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="js/owl.carousel.js"></script>
                <div class="content">
            <header></header>
            <nav>
            <ul class="nav justify-content-center" role="nagivation">

              </li>
              <li class="nav-item">
                <a class="nav-link active" href="#" id="home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="produtos.html" id="produtos">Produtos</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#" id="sobre">Loja</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="servico.html" id="sobre">Serviços</a>
              </li>
            </ul>
            </nav>

And then the footer

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/animate.css">
   <footer>
            <div class="jumbotron jumbotron-fluid">
              <div class="container">
              <img></img>
                <h1 class="display-4">Plug seu celular na moda</h1>
                <p>Atendimento das 10:00 as 10:10 de Segunda-feira à Sábado!<p>
                <table style="width:100%">
                <tr>
                <th>Informações</th>
                <th>Politicas</th>
                <th>Serviços</th>
                </tr>
                <tr>
                <td>Formas de Pagamento</td>
                <td>Prazo de Troca</td>
                <td>Troca de Películas</td>
                </tr>
                <tr>
                <td>Descontos</td>
                <td>Políticas de Troca</td>
                <td>Manutenção</td>
                </tr>
                <tr>
                <td>Sorteios</td>
                <td>Regulamento de Trocas</td>
                <td>Encomendas</td>
                </tr>
                <tr>
                <td>Fornecedores</td>
                <td>Reembolso</td>
                <td>Atendimento ao Cliente</td>
                </tr>
                </table>
                <i class="fa fa-facebook" aria-hidden="true">  Facebook</i>
                <i class="fa fa-envelope" aria-hidden="true" id="email">  [email protected]</i>
                <i class="fa fa-whatsapp" aria-hidden="true" id="whatsapp">  Whatsapp:(15)xxxx-xxxx</i>
                <i class="fa fa-phone-square" aria-hidden="true "id="fone">  Telefone:(15)xxxx-xxxx</i>      
              </div>
            </div>
            <div class="alert alert-dark" role="alert" id="copyright">
              This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
            </div>
            </footer>
        </div>  

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

I wanted to not use everything in 1 page directly, but rather call the 2 files within an HTML to compose my HTML page, I know this is possible in JSP, but I do not want to use JSP...

EDIT: Not working through includes

Here the code:

<html>
<head>
        <meta charset="utf-8">
        <title>Styling links</title>
        <meta name="author" content="Publio Elon">
        <meta name="description" content="Curso de HTML5 e CSS3">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/owl.theme.default.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/animate.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="js/owl.carousel.js"></script>
</head>
fsadasdas


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<div class="nav">
<?php include 'nav.html';?>
</div>

<div class="footer">
<?php include 'footer.html';?>
</div>

</body>
</html>

php html css html5 css3

  • This topic uses js, not necessarily addressing another way to solve the problem.

  • @Publioelon Consulte https://stackoverflow.com/questions/11887429/php-include-for-html

3 answers

4

With HMTL5 you can use the tag <object></object>

Would look like this: 

<object type="text/html" data="include.html"></object>

  • Nav and footer were added in frames...

1


How you put PHP in tags of the question I will give an answer with this option.

Your page that will receive these includes needs to be a .PHP, however the files you will call by include can be simple Htmls. (if you want you can use include with other extensions, it’s just not possible to include type links "/" unless you use a "URL inclusion packers")

See Example:

<html>
<body>

<?php include 'nav.html';?> <!-- seu menu -->
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.html';?> <!-- seu footer -->

</body>
</html>

The . HTML files you will call in includes do not need to <!DOCTYPE html> <html> <head> or <body> you can start by <nav> <header> <section> or <div> for example.

Include PHP manual: http://php.net/manual/en/function.include.php

  • so, I was trying to run this way, but I did not succeed, due to that I thought better to ask for help, I went to try again and still can not

  • Guy to include work your file where they will be need to be a . PHP, and preferably should not have the <!DOCTYPE html> at the top! To test you have to use a local server like Wamp, Xamp or Vertrigo. Browser does not interpret PHP file alone then yours. PHP has to be in a local server like the one I mentioned for example, or in your host’s FTP.

  • Actually, I tested it in netbeans and it worked vlw

1

You can also use require with this short PHP code

<?php
require('seuarquivo.html');
?>

  • WP just an observation when to Require. In the include if an error occurs while including the file the rest of the script is executed. No require if there is an error it stops running the script.

  • That’s right, it stops running the script!

  • Yeah, I was trying this way, so far nothing :/

Browser other questions tagged php html css html5 css3

You are not signed in. Login or sign up in order to post.