Tag DIV em HTML

Benedito Silva Júnior 17/11/2021

A tag DIV serve para alterar o estilo em partes específicas da página e posicionar objetos. Neste post veja a tag DIV em HTML.

É um recurso que podemos utilizar para organizar dados na página dentro de camadas, criar efeitos de animação e interatividade entre linguagens (HTML – Java Script, por exemplo).

Utilizamos a tag DIV entre as tags <body></body>, posicionando-as de acordo com a nossa finalidade. Para colocar um objeto (imagem, tabela, texto) dentro de uma tag DIV, basta abrir a tag <div> e colocar o que desejamos dentro dela:

<div id="nome"><img src="nomeimagem.gif"></div>

Podemos implementar essa tag usando estilos, que nos permite mudar a cor da camada, cor da borda, posição, tamanho etc. Veja:

<div id="nome" style="width:149px; height:26px;background-color:#0066ff;
border:4px double red">Uso da Tag Div</div>

Style é o estilo que estamos definindo para a tag;

Width é largura da tag em pixels;

Height é a altura da tag em pixels;

Background-color é cor da tag – poderia ser trocado por background-image: url da imagem seria colocado uma figura como plano de fundo;

Border é a espessura da borda em pixels; esse estilo é acompanhado por double nome da cor – para definir a cor da borda (a cor só irá aparecer se o código for precedido de Double).

A tag DIV deve sempre ser estilizada por um arquivo .css, mas para isso é preciso definirmos um id ou class para ele:

<div id="nome_do_id"></div>

Esse tipo de div deverá ser estilizado no css por meio do caracter “#”.

Estilizando um id:

#nome_do_id{ }

Esta div também pode ser definida como uma classe.

Div Class:

<div class="nome_da_div"></div>

Sendo representada em css pelo “.”(ponto). Estilizando uma class:

.nome_do_id{ }

Exemplos de div:

<div style='position:absolute;margin-left:10px;margin-top:10px;width:300px;
height:140px;z-index:1'></div>

<div style='position:absolute;margin-left:50px;margin-top:20px;width:300px;
height:140px;z-index:1'></div>

QUER TER ACESSO EXCLUSIVO A CURSOS DE PROGRAMAÇÃO, CRIPTOMOEDAS, MARKETING, EMPREENDEDORISMO E MUITO MAIS?
Conheça a Danki Club e tenha acesso a uma infinidade de cursos na área de programação web, Android e IOS. Desenvolvimento de games, Blockchain e criptomoedas. Produtividade, marketing, empreendedorismo e muito mais!
CLIQUE NA IMAGEM ABAIXO E VEJA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

Tabelas em HTML

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits