E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital, sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….
Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.
Abaixo tem um modelo de HTML crú:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>
</body>
</html>
Agora eu vou colocar as DIVs:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>
<div>TOPO</div>
<div”>LATERAL</div>
<div>CONTEUDO</div>
<div>RODAPE</div>
</body>
</html>
Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “<style type=”text/css”>”:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
<style type=”text/css”>
*{margin:0; padding:0;}
#container{width:998px; margin:0 auto; text-align:center;}
#header{float:left; width:996px; height:40px; border:1px solid black;}
#nav{float:left; width:98px; height:100px; border:1px solid blue;}
#content{float:left; width:896px; height:100px; border:1px solid red;}
#footer{clear:both; height:40px; border:1px solid black;}
</style>
</head>
<body>
<div id=”container”>
<div id=”header”>TOPO</div>
<div id=”nav”>LATERAL</div>
<div id=”content”>CONTEUDO</div>
<div id=”footer”>RODAPE</div>
</div>
</body>
</html>
