2

Estou fazendo um portfólio simples que não vai precisar de nenhum Framework como angular ou react, o que eu gostaria e fazer algo para que eu pudesse criar os arquivos html separados e um principal apenas trocando o conteúdo da pagina com JavaScript. Algo assim, meu index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>titulo principal que vai estar em todas as paginas</h1>
  <div>
    div onde quero ficar alterando meus arquivos
  </div>
</body>
</html>

Um outro arquivo qualquer:

<div>subtitulo da pagina</div>

Outro arquivo html

<div>outro subtitulo</div>

Quero fazer com que esses arquivos sejam colocados dentro do meu html principal, não me preocupo de importar todos os css e javascript diretamente no meu arquivo principal já que vai ser algo muito leve, mas gostaria muito de fazer esse sistema de troca de arquivos.

3
  • Você quer fazer uma one page application isso normalmente se faz com Ajax. Seria melhor você estudar o Ajax do que ficar pedindo opnião, voce pode dar uma olhada: W3Schools ou MDN MDN é mais recomendado porque é mais atualizado, já o W3Schools é mais prático, vai direto ao assunto, porém um pouco desatualizado.
    – Marcelo
    21/02/2018 às 13:21
  • Não tinha nem ideia de por onde começar, vou estudar Ajax e ver se consigo fazer. Obrigado. 21/02/2018 às 13:41
  • Acho que isso pode ajuda-lo: pt.stackoverflow.com/a/276631/99718 21/02/2018 às 16:08

2 Respostas 2

1

A resposta que o Hugo citou acima, é a forma mais semântica de fazer isso.

Só para conhecimento, uma breve explicação: Por exemplo, no C# usamos o <!--#include file=".caminho_do_arquivo" --> para incluir diferentes partes de arquivos em nossa aplicação.

Qual a vantagem dessa utilização?

Suponhamos que temos uma aplicação com diversas páginas diferentes, normalmente o que irá mudar nessas páginas será apenas o conteúdo, componentes como menu e rodapé dificilmente serão alterados. Ao invés de criarmos esses componentes em todas as páginas, podemos criar arquivos separados para cada um deles, e no final fazer a chamada desses arquivos em seu documento.

Exemplo:

Temos os arquivos index.aspx, maisVisitados.aspx e sobreNos.aspx, então criamos os arquivos que serão reutilizados nessas páginas menu.asp e rodape.asp e fazemos a chamada deles em cada um desses arquivos: <div> <!--#include file="menu.asp" --> </div> //aqui vai o menu e <div> <!--#include file="rodape.asp" --> </div> //aqui vai o rodapé.

No final, a página index.aspx por exemplo, se parecerá com isso:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <div> <!--#include file="menu.asp" --> </div> 
  <main> 
    conteúdo principal do site
  </main>
  <div> <!--#include file="rodape.asp" --> </div>
</body>
</html>

Concluindo

No fundo, para obtermos a página final (index.aspx), temos que juntar vários outros arquivos para chegar no resultado final, basta pensar na estrutura de sua página como se fosse peças de lego.

0

Você pode fazer isso com PHP usando <?php include 'seuarquivo.html';?>

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 lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>titulo principal que vai estar em todas as paginas</h1>
  <div>
    <?php include 'item1.html';?> <!-- seu conteúdo externo -->
  </div>
  <div>
    <?php include 'item2.html';?> <!-- seu conteúdo externo -->
  </div>
</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. Então dentro do seu item1.html só precisaria disso por exemplo:

<div>
  <h2>titulo do item1</h2>
  <p>Conteúdo do item1 por exemplo</p>
</div>

OBS: Para testar os arquivos .PHP vc precisa rodar um servidor local tipo Wamp ou Xamp, pois o browser não consegue interpretar o PHP sozinho, tem que estar no Local Server ou em algum FTP

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

1
  • Olá Downvoter, eu ficaria feliz se vc puder contribuir comentando o que está errado e onde eu poderia melhorar.
    – hugocsl
    21/02/2018 às 14:59

Você deve fazer log-in para responder a esta pergunta.

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