quinta-feira, 28 de junho de 2012

Montando uma web page com a DIV



Programação Web

Montando uma web page com a DIV


            A principal função da tag <DIV> é posicionar um elemento (imagem, tabela, bloco de texto) na página do seu site ou blog. Neste tutorial veremos como utilizá-la para montar uma estrutura (esqueleto) de uma web page.
            Basicamente, uma página HTML é composta de um cabeçalho <header>, um corpo <body>, uma barra lateral <sidebar> e um rodapé <footer>.






Criando o arquivo de código pronto

            
O que chamo de arquivo de código pronto nada mais é do que um arquivo HTML, criado a partir de um editor de texto simples (o Bloco de Notas do Windows, por exemplo) com os comandos básicos HTML.
            Abra o Bloco de Notas e copie e cole o código abaixo:

<html>
<head>
<title>Layout de um site utilizando a DIV – Modelo 1</title>
<style type=’text/css’>
</style>
</head>
<body>
</body>
</html>

            Salve o arquivo como ‘MODELO1.HTML’. É necessário digitar o nome + extensão, pois por padrão o Bloco de Notas assume a extensão .TXT.
            Feito isso, clique com o botão direito do mouse sobre o arquivo salvo e selecione Abrir com.../Bloco de Notas.



Definindo os estilos


           
 Primeiramente, vamos definir os elementos da nossa página web. Dê um ENTER após a tag <style type=’text/css’> e copie e cole o código CSS abaixo:

#tela{width:992px;height:1385px;}
#cabecalho{width:990px;height:200px;border:1px solid #000;background:#FAEBD7;}
#corpo{width:670px;height:980px;border:1px solid #000;background:#FFFFE0;float:left;}
#barra_lateral{width:280px;height:980px;border:1px solid #000;
padding:0 0 0 35px;background:#87CEEB;float:right;}
#rodape{width:990px;height:200px;border:1px solid #000;background:#556B2F;float:left;}
h1{font-family:Verdana;font-size:24px;}
h3{font-family:Verdana;}
p{text-align:center;}
p.rodape{color:#FFF;text-align:center;}

Salve as modificações teclando [CTRL]+[S].



Adicionando os elementos na página
             
           

 Agora vamos ativar a exibição dos elementos na nossa web page. Para isso, iremos fazer uso da tag <DIV>. Dê um ENTER após a tag <body> e copie e cole o código HTML abaixo:

<div id='tela'>
<div id='cabecalho'>
<h1><p>Cabeçalho</p></h1>
</div>
<div id='corpo'>
<h1><p>Corpo</p></h1>
</div>
<div id='barra_lateral'>
<h3><p>Barra Lateral</p></h3>
</div>
<div id='rodape'>
<h1><p class='rodape'>Rodapé</p></h1>
</div>
</div>

O código completo deverá ficar assim:

<html>
<head>
<title>Layout de um Blog utilizando a tag DIV - Modelo 1</title>
<style type='text/css'>
#tela{width:992px;height:1385px;}
#cabecalho{width:990px;height:200px;border:1px solid #000;background:#FAEBD7;}
#corpo{width:670px;height:980px;border:1px solid #000;background:#FFFFE0;float:left;}
#barra_lateral{width:280px;height:980px;border:1px solid #000;
padding:0 0 0 35px;background:#87CEEB;float:right;}
#rodape{width:990px;height:200px;border:1px solid #000;background:#556B2F;float:left;}
h1{font-family:Verdana;font-size:24px;}
h3{font-family:Verdana;}
p{text-align:center;}
p.rodape{color:#FFF;text-align:center;}
</style>
</head>
<body>
<div id='tela'>
<div id='cabecalho'>
<h1><p>Cabeçalho</p></h1>
</div>
<div id='corpo'>
<h1><p>Corpo</p></h1>
</div>
<div id='barra_lateral'>
<h3><p>Barra Lateral</p></h3>
</div>
<div id='rodape'>
<h1><p class='rodape'>Rodapé</p></h1>
</div>
</div>
</body>
</html>

Salve as modificações teclando [CTRL]+[S].
Feche o Bloco de Notas.
Finalizando, dê um clique-duplo sobre o arquivo, para abri-lo no navegador. A página exibida deverá aparecer como a imagem abaixo.



Por enquanto ficamos por aqui, galera.
Abraço a todos e até a próxima!

Related Posts Plugin for WordPress, Blogger...

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!