Voltar Lista de Tópicos

Editar | Versões | Fórum de Discussão

Prazos para Envio


Utilizando Divs HTML

Introdução

 

Normalmente os websites são divididos pelo menos em barra de menu superior, área central de conteúdo e rodapé. Também podemos encontrar painéis laterais com vários botões ou informações de atualização. Essas divisões nas páginas podem ser construídas utilizando tags <div> HTML. Nesta etapa vamos aprender como utilizá-las corretamente no nosso jogo de adivinhação.

Utilizando Divs HTML

 

Tags <div> são utilizadas para dividirmos a nossa página e áreas maiores ou grupos de elementos. Por exemplo, em uma página Web normalmente temos o menu principal, a área central e o rodapé. Cada área dessas pode ser colocada em uma <div> distinta para facilitar a sua estilização. Repare em algumas divs do site http://aprendafazendo.net

 

Repare que divs podem conter outras divs, como no caso da div que contém os comandos de navegação “Etapa Anterior” e “Próxima Etapa”. Essa div está contida dentro da div da área principal.

 

Dica! Você também pode entender as divs como contêineres para outros elementos ou caixas que contém outros elementos HTML. Veja abaixo.



 

Agora, vamos praticar as divs na tela do nosso jogo. Vamos definir três divs iniciais e dar uma cara nova para cada uma delas. Veja abaixo o esquema abaixo da localização das nossas divs e o resultado deste tutorial.

 

Após a estilização das divs teremos:

 

Definindo Divs

 

Div de Resultado

 

Utilize as tags <div class=”resultado”> …  </div> para criar a primeira divisão na página.

 

 

Observe que a div contém o elemento <h1> com o título “Resultado” e três elementos <p>, ou seja, os três parágrafos que contém o resultado.

Sobre Classes de Elementos

Repare no trecho class=”resultado”. Todo elemento HTML possui um campo especial “class”, onde, podemos definir classes para ele. No nosso caso, definimos que essa div possui a classe “resultado”. Desse modo, podemos utililzar o CSS para selecionar a div pela sua classe e aplicar regras de modificação da sua aparência. Veja como podemos utilizar esse recurso em um trecho do código CSS abaixo:

 

 

O trecho CSS acima é apenas para ilustrar como as classes são usadas. Voltaremos a esse código na próxima etapa em detalhes.

 

Div do Formulário de Envio do Chute

Adicione a segunda div com a classe “form”.

 

Repare que essa div é um contêiner para três elementos, o rótulo <label> e os dois inputs (caixa de texto e botão “Enviar”).

 

Div do Cabeçalho

O cabeçalho deve conter apenas dois elementos, o título da página <h1> e o parágrafo explicativo <p> na parte superior. Adicione mais duas divs de acordo com o código abaixo.

 

Dessa vez utilizamos duas divs, uma mais externa para o cabeçalho e uma segunda div armazenando os elementos <h1> e <p>. Na div mais externa, colocaremos uma imagem de fundo bem legal e utilizaremos a div mais interna (“header-text”)  para modificar o visual dos textos sobre a imagem de fundo. 

 

Agora que nosso HTML está montado, vamos utilizar o CSS para dar uma cara nova à nossa página. Siga adiante!

 

Resumo

 

Neste tópico aprendemos um pouco sobre as divs. Elas servem para criarmos subdivisões na nossa página e permitirem a modificação do posicionamento e do visual de grupos de elementos, ao invés, de um único elemento por vez. Definimos uma div com as tags html <div> </div>

 

Para diferenciarmos uma div das demais, utilizamos o recurso de classes, onde, definimos o identificador da classe (um texto qualquer entre “ ” como “resultado”, “form”, etc.). Com isso,  podemos selecionar essa div pela sua classe no nosso código CSS.


Comentários...

Não há comentários ainda... Seja o primeiro!