Um site consiste em três peças principais que são cabeçalho, corpo e rodapé. Essas peças são criadas pela combinação de muitos outros elementos, como cabeçalho, parágrafo, imagens e muito mais. Mais especificamente, o cabeçalho é a parte mais importante de qualquer página da web, pois contém todas as informações relacionadas à página da web, incluindo o título, a descrição e o logotipo.

Neste manual, discutiremos o “" marcação. Então vamos começar!

Tag HTML

HTML fornece o “”Tag, que é usado para definir o título e o cabeçalho do conteúdo relacionado em uma página da web. Você também pode adicionar um título, parágrafo, logotipo, imagem e links no cabeçalho.

Sintaxe

A sintaxe da etiqueta do cabeçalho é:

Elementos html

Os elementos que você deseja incluir no cabeçalho devem ser adicionados entre as tags de abertura e fechamento do cabeçalho.

Vamos para o exemplo para onde aprenderemos a criar um cabeçalho.

Exemplo: como criar um cabeçalho?

No arquivo html, primeiro, usaremos o “”Tag para criar um cabeçalho. Depois disso, adicione um título “

”E quatro links usando o“”Tag dentro da“" marcação. No "Href", adicionar "#”E defina o link da página que você deseja adicionar. Em seguida, atribua os nomes dos links como “Lar","Sobre","Contate-nos", e "política de Privacidade”. Esses nomes de link aparecerão no cabeçalho da página da web.

Html

Linuxhint

Lar
Sobre
Contate-nos
política de Privacidade

Na imagem abaixo fornecida, você pode ver que o cabeçalho é criado:

Você também pode estilizar o cabeçalho usando CSS. Aqui está o método para fazer isso.

No CSS, usaremos “cabeçalho”Para acessar o cabeçalho criado em HTML. Aqui, use o “alinhamento de texto”Valor da propriedade como“Centro”Para alinhar o cabeçalho e os links no centro da página. Também definiremos a cor de fundo do cabeçalho como “RGB (80, 80, 79)”E defina a cor do cabeçalho como“RGB (206, 158, 34)”. Vamos ajustar o tamanho da fonte para “30px”. Depois disso, defina o preenchimento como “30px”.

CSS

cabeçalho
Alinhamento de texto: centro;
Antecedentes: RGB (80, 80, 79);
Cor: RGB (206, 158, 34);
tamanho da fonte: 30px;
preenchimento: 30px;

A imagem a seguir mostra que o cabeçalho é estilizado com sucesso:

Agora, vamos estilizar os links.

Links de estilo

Para fazer isso, primeiro, use “a”Para acessar os links. Aqui, definiremos o valor do “decoração de texto"Propriedade como"nenhum”Para limpar a decoração padrão dos links. Depois disso, defina a margem-esquerda como “40px”, Margem-direita como“30px”, E margem como“50px”. No final, definiremos a cor dos links como “RGB (206, 158, 34)”:

a
Decoração de texto: Nenhum;
margem-esquerda: 40px;
Margem-direita: 30px;
Margin-top: 50px;
Cor: RGB (206, 158, 34)

Aqui está o resultado que demonstra que o cabeçalho é estilizado com sucesso:

Cabeçalho com logotipo

Você também pode adicionar um logotipo ao cabeçalho da página da web. Para isso, você deve adicionar uma imagem de logotipo no arquivo HTML e defini -lo no cabeçalho usando CSS.

Exemplo

Aqui, criaremos uma div dentro da etiqueta do cabeçalho e nomearemos a classe div como “imagem”. A parte restante do cabeçalho é a mesma do exemplo anterior:

..

No CSS, usaremos “.imagem”Para acessar a div e adicionar uma imagem de logotipo usando o“fundo" propriedade. No "url ()", Vamos adicionar o caminho da imagem como"URL (logotipo.png)”. Aqui, vamos usar “sem repetir”Para evitar a repetição da imagem. No final, definiremos a largura do logotipo como “250px"E a altura como"100px”:

.imagem
Antecedentes: URL (logotipo.png) sem repetição;
Largura: 250px;
Altura: 100px;

Usando o código acima, a seguinte saída é obtida e pode-se observar que o logotipo é adicionado no canto superior esquerdo do cabeçalho:

Cabeçalho com imagem

Também é possível criar um cabeçalho com a imagem de fundo. Vamos criar.

Exemplo

Primeiro, adicionaremos a imagem no arquivo html, o mesmo que o exemplo anterior e depois adicionará o caminho da imagem no url () como “imagem.jpg”E use um“sem repetir”Valor para evitar a repetição da imagem. Depois disso, use a propriedade de posição de fundo para definir a posição da imagem como “Centro”E a propriedade de tamanho de fundo como“cobrir”Para definir a imagem em todo o cabeçalho. Por fim, defina a altura da imagem como “250px”:

.imagem
Antecedentes: URL (imagem.jpg) sem repetição;
Posição de fundo: centro;
Size de fundo: capa;
Altura: 250px;

Aqui está o resultado que demonstra que a imagem é adicionada no cabeçalho:

É isso! Nós explicamos a etiqueta de cabeçalho em detalhes.

Conclusão

Em HTML, o “”A tag é usada para criar o cabeçalho da página da web. Na parte do cabeçalho da página da web, o cabeçalho, parágrafo curto, logotipo, imagem de fundo e barra de navegação pode ser adicionado. Neste manual, discutimos a tag e fornecemos um exemplo criando e estilizando o cabeçalho da página da web.