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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.
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.