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>Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.
Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.
Você pode usar esse conhecimento para:
✔ Resolver seus próprios problemas sem depender de ninguém ✔ Ganhar dinheiro com manutenção e suporte técnico ✔ Ou até entrar de vez no mercado de TI
Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.
👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe:
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação e apaixonado por tecnologias e games do tempo da vovó!
0 Comentários