Html

Front-end
#1

Estou precisando de fazer um HTML, que toda mudança de página tem um cabeçalho e um rodapé.

Alguém pode me ajudar ?

#2

Cara, em geral vejo isso com backend, mas pesquisando aqui vi que o js. você consegue fazer uma gambiarra para tal.

http://api.jquery.com/load/

#3

Mas as tags < header > e < footer >, não fazem isto ?

#4

Pelo o que entendi, você não quer ficar copiando códigos repetitivos, como os cabeçalhos, certo? Se for este o problema, a solução estaria por esse caminho.
Neste problema header e o footer que são trechos que já aparecem com frequência, para elimina-lo podemos usar alguma linguagem que irá incluir diretamente algo em sua página, No caso, , . Só para definir elas são tags semânticas, que tem sua importância,
Além da organização, as mesmas ajudam o Google a entender o que é cada coisa em sua página.

https://www.w3schools.com/html/html5_semantic_elements.asp

#5

Você quer manter o mesmo cabeçalho e rodapé para toda página html do seu sistema?

#6

Sim @Lucas_Camara .

#7

Já tinha lido este site @jonathan.sky e não funcionou

#8

A solução do @jonathan.sky usando o load do jquery, pode te ajudar, mas é necessário rodar o html num servidor web para funcionar.

#9

O problema que não posso rodar jquery, por causa da frame. Teria que ser somente por css / html.

#10

Uai, com iFrame você consegue fazer o que está querendo. Não é a melhor forma, mas se não estiver rodando num web server, atende.

#11

Olá Guilherme,

geralmente esse tipo de coisa, é resolvido com uma linguagem server side, mas aqui abaixo tem um link interessante sobre o seu caso. Espero que ajude.

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

#12

Achava que o < header > e < footer > resolvia esta parte.

#13

Não Guilherme. O elemento <head> (cabeça), é que serve para carregamento de scripts externos ao seu code, tanto que no link que eu te passei o cara, meio que faz um gambiarra (chamei de gambiarra, porque não é digamos assim “oficial”, mas o cara que escreveu esse artigo é foda demais :slight_smile: pra dizer gambiarra) para poder carregar esses arquivo em “memória” e depois ele faz um js, para injetar o que tem nesse cara, dentro do seu corpo do html. Os elementos <footer> e <header>, assim como a maioria das tags HTML, tem apenas efeito de marcação, ou seja, ele apenas determina uma região do seu HTML, ele não tem “comportamento”, por assim dizer. Deu-se o nome de footer, por uma questão semântica, assim como elemento <main>, <sidebar> e assim por diante, não que o sidebar necessariamente vai ser um menu, mas por uma questão de semântica não faz sentido colocar, por exemplo, o conteúdo central da sua página dentro do <sidebar>

Dá uma lida depois:

2 curtidas
#14

Se só pode usar HTML estático, então uma das saídas é usar o elemento embed ou object:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
   <body>
      <div>
         <object type="text/html" data="cabecalho.html" style="height:100px;"></object>
      </div>

      <div>...conteudo da pagina... </div>

      <div>	
         <object type="text/html" data="rodape.html" style="height:100px;"></object>
      </div>
   </body>
</html>

Ou import com HTML5, que é mais sob controle: https://www.html5rocks.com/en/tutorials/webcomponents/imports