quarta-feira, 27 de abril de 2011

Programando em HTML - A tag DIV




Programando em HTML

A tag DIV

Finalidade:  Altera o estilo de partes específicas da página e posiciona objetos (blocos de textos, imagens, tabelas, etc.)
Utilizamos a tag DIV entre as tags <body>.......</body>, isto é, no corpo da página HTML, de acordo com a nossa finalidade.
Ex1. – Inserindo uma imagem .GIF na DIV
<div id = “nome”><img src=”nomedaimagem.gif”></div>

Podemos implementar a DIV usando estilos:

Ex2. – Implementando a tag DIV

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

Onde:

style = estilo da tag
width = largura da tag em pixels
height = altura da tag em pixels
background-color = cor de plano de fundo da tag (para especificar uma imagem como plano de fundo, utilizamos o comando background-image:[url da imagem];
border = espessura da borda em pixels; esse estilo é acompanhado por Double [nome da cor], que define a cor da borda


EXERCÍCIO PRÁTICO: Para termos uma idéia do que podemos fazer com a tag DIV, faça o seguinte:

1º) – Abra o bloco de notas (Iniciar/Programas/Acessórios/Bloco de Notas);
2º) – Copie e cole o texto abaixo:

<div STYLE="float : left; width :50%; height:500px; background-color :#DFDFDF">Há poucas réguas que você pode seguir para fazer páginas estruturando com a Tag <div> um pouco mais simples. Estas réguas aplicam-se quando você está tentando colocar horizontalmente 2 ou mais divisões junto a se na mesma página. (como mostrado abaixo)</div>  

3º) – Salve o arquivo como Exemplo1.html (você têm de digitar o nome do arquivo + extensão, pois o bloco de notas assume a extensão .txt como padrão)
4º) – Abra o arquivo no seu navegador e veja o resultado.
Como você pôde ver, o texto ficou delimitado na coluna à esquerda da página, dividido em partes em cada linha do parágrafo.

Copyright®27-Abr-11 por SM@rtiN. http://blogdosmartin.blogspot.com

Nenhum comentário:

Postar um comentário

Se você gostou deste artigo poste um comentário!

Observações:
1º) Somente usuários com conta no Google poderão publicar seus comentários aqui no Blog do SM@rtiN.
2º) Todos os comentários serão avaliados pelo administrador do blog para posterior publicação.
3º) Os textos com conteúdo impróprio, ofensas e palavrões serão automaticamente excluídos. Se houver reincidência, o acesso do usuário ao blog será bloqueado.

Obrigado!