Gostaria de saber se há alguma maneira pelo próprio HMTL 5 de, criando arquivos separados de Header e Footer, poder apenas importar esses códigos para as demais páginas para não precisar ficar copiando e colando em todas as páginas do meu sistema.
6
respostas
respostas
Importar Header e Footer
Bom dia.
Use:
<iframe src="link.html" width="100%" height="300"></iframe>Bons estudos!
<!DOCTYPE html>
<html lang="pt" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/reset.css">
<link rel="stylesheet" href="CSS/header.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="IMAGENS/logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Bom dia Tiago
Já tentei utilizar a tag iframe porem na minha página o Header fica parecendo uma janela. Vou inserir aqui o código do meu Header que gostaria de importar para as páginas.
Complementando minha última mensagem, quando eu clico em um dos links, a página não é redirecionada por completo para a outra página, e sim apenas o quadrado do header é que muda de página.
Como faço para corrigir isto?
Bom dia!
Entendi seu problema. No Iframe, coloque:
style="border:none;"Bons estudos!
Thiago, realmente o style="border:none;" retirou a bordar, porém ainda tenho o problema de que, quando clico em um dos links, o redirecionamento não é feito para a página toda mas sim apenas a parte do iframe. Este problema teria solução?
Bom dia.
Eu faria no seguinte formato:
iframe para header
iframe para conteudo
iframe para footerCriaria funções js, e os links chamariam a função que trocaria o src do iframe de conteúdo. Ex:
function trocarConteudo(destino){
$("#conteudo").src = destino
}Acho que algo neste sentido vai resolver seu caso.