3

gostaria de pedir ajuda em carregar dentro do meu arquivo HTML principal arquivos externos de 2 outras páginas em HTML

Abaixo segue o 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>

E depois o 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>

Eu queria não usar tudo em 1 página de forma direta, mas sim chamar os 2 arquivos dentro de um HTML para compor a minha página HTML, sei que isso é possível em JSP, mas não quero usar JSP...

EDIT: Não esta funcionando por meio de includes

Aqui o código:

<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> 

2

3 Respostas 3

4

Com HMTL5 você pode usar a tag <object></object>

Ficaria assim:

<object type="text/html" data="include.html"></object>
1
  • o nav e footer foram adicionados em frames...
    – John Jones
    Commented 2/02/2018 às 9:27
1

Como vc colocou PHP nas tags da pergunta vou dar uma resposta com essa opção.

A sua página que vai receber esses includes precisa ser um .PHP, porém os arquivos que vc vai chamar pelo include podem ser HTMLs simples. (se vc quiser pode usar o include com outras extensões, só não é possível fazer include de links tipo "https://pt.stackoverflow.com/" a não ser que vc use um "empacotadores de inclusão de URL")

Veja o Exemplo:

<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>

Os arquivos .HTML que vc vai chamar nos includes não precisam de <!DOCTYPE html> <html> <head> ou <body> vc pode começar direto pela <nav> <header> <section> ou <div> por exemplo.

Manual PHP do Include: http://php.net/manual/pt_BR/function.include.php

3
  • então, eu estava tentando executar desta forma, mas não obtive sucesso, devido a isso achei melhor pedir ajuda, fui tentar novamente e ainda não consigo
    – John Jones
    Commented 2/02/2018 às 9:23
  • Cara para o include funcionar o seu arquivo onde eles vão estar precisa ser um .PHP, e de preferencia não deve ter o <!DOCTYPE html> no topo! Para testar vc tem que usar um servidor local tipo Wamp, Xamp ou Vertrigo. O Browser não interpreta arquivo PHP sozinho então seu .PHP tem que estar em um local server desses que citei por exemplo, ou no FTP do seu host.
    – hugocsl
    Commented 2/02/2018 às 14:49
  • Realmente, testei no netbeans e funcionou vlw
    – John Jones
    Commented 2/02/2018 às 22:44
1

Você pode também pode usar o require com esse breve código PHP

<?php
require('seuarquivo.html');
?>
3
  • WP só uma observação quando ao Require. No include caso aconteça algum erro ao incluir o arquivo o resto do script é executado. Já no require se ouver algum erro ele para de executar o script.
    – hugocsl
    Commented 31/01/2018 às 10:56
  • Isso mesmo, ele para de executar o script!
    – WPfan
    Commented 31/01/2018 às 16:08
  • Sim, estava tentando desta forma, até agora nada :/
    – John Jones
    Commented 2/02/2018 às 9:47

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .