Load HTML from another HTML [duplicate]

Question

Load HTML from another HTML [duplicate]

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

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

Below is 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><scriptsrc="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 want to not use everything in 1 page directly, but rather call the 2 files inside an HTML to compose my HTML page, I know this is possible in JSP, but I do not want to use JSP ... < p>

EDIT: Not working through includes

Here is 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><scriptsrc="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 html5 css css3

asked by anonymous 31.01.2018 / 06:30

3 answers

3

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

It would look like this:

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

31.01.2018 / 10:32

1

You can also use require with this brief PHP code

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

31.01.2018 / 11:32

Monitoring with the R Style each line differently

score 1 · Accepted Answer

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

Your page that will receive these includes must be .PHP , however the files that you will call include can be simple HTMLs. (if you want you can use include with other extensions, you can not only include links like " link " be that you use a " URL inclusion packers ")

See the 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 are going to call in includes does not require <!DOCTYPE html> co_de <html> or <head> You can start straight from <body> co_de <nav> or <header> for example.

Include PHP Manual: link