Finalizando a página
Aula 16
Pensamento
Computacional
Série: 1ª EM
Finalizando a página
Aula 16
2
O que vamos aprender?
Criar o cabeçalho da página.
Destacar o cabeçalho.
Acompanhe o vídeo da aula.
3
Cabeçalho
O cabeçalho da página é o local onde estarão o nome e outras informações importantes do site. Então, nosso
objetivo será adicionar esse elemento na página da Barbearia Alura. Para isso, em nosso HTML vamos criar outra
divisão que ficará antes do código da primeira imagem e dentro da tag <body>. Inserimos uma nova tag <header>,
que significa “cabeçalho” em inglês. Essa divisão vai ter um conteúdo: o nome Barbearia Alura.
A tag <header> informa ao navegador que o conteúdo indicado – Barbearia Alura – é o primeiro
conteúdo a ser apresentado na página.
Muita atenção para não confundir o header com head. Header é o cabeçalho da página e
fica dentro do conteúdo, e o head é a tag padrão do HTML que serve para passarmos a
informação para o navegador.
4
Cabeçalho
Salvando e recarregando a página, teremos o nome como o primeiro elemento a ser lido pelo usuário. Se
pensarmos em outro site, por exemplo, de um jornal, o primeiro elemento a ser lido é o que está no canto
superior esquerdo da página, que geralmente é a manchete da reportagem.
5
Cabeçalho
Sempre que temos um conteúdo principal a ser exibido na página, como o título principal, usamos a tag <h1>.
Então, precisaremos reorganizar as tags.
● O título principal “Barbearia Alura”,
ficará dentro da tag <header>.
● O conteúdo “Sobre a Barbearia Alura”
passa a ter a tag <h2>.
● O conteúdo sobre os “Benefícios” passa
a ter a tag <h3>.
6
Cabeçalho
Havíamos colocado configurações específicas para cada uma das tags <h1>,<h2> e <h3>. Porém, agora
mudamos todas elas de lugar. Assim, o CSS ficará desconexo. Essa é a maior dificuldade quando criamos estilos
usando tags. Por isso, é recomendável usarmos a classe.
Em nosso CSS, as tags <h1> e a <h2> possuíam
alinhamento ao centro. No HTML, podemos
transformá-los em uma classe, chamando-a
titulo-centralizado.
7
Cabeçalho
Por fim, criaremos um espaçamento interno de 20 pixels no título principal para a esquerda.
Criaremos a classe titulo-principal no HTML e referenciaremos no CSS como padding-left: 20px
(espaçamento interno à esquerda).
8
Finalização
A página Barbearia Alura já tem agora todo o conteúdo que planejamos! Esse conteúdo está bem marcado com as
tags do HTML, além de estar perfeitamente estilizado com o CSS.
9
Desafio
Agora é sua vez!
Já sabemos posicionar e editar o cabeçalho.
Experimente agora centralizar o texto sobre a
Barbearia Alura.
Depois, retorne ao modelo do projeto principal.
10
