Como iniciar um recorte em Tableless
by CHR Designer on mai.30, 2009, under Sem芒ntica
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>
1 Comment for this entry
1 Trackback or Pingback for this entry
-
Iniciando o recorte no HTML 5 - Marcelo Abib Cardoso
setembro 30th, 2009 on 12:24[...] um tempo atr谩s meu amigo C茅sao colocou no blog dele como iniciar um recorte em tabless usando o (X) Html Strict, para ajudar as pessoas que tem essa dificuldade. Pegando carona nesta id茅ia vou colocar como [...]
julho 6th, 2009 on 23:27
You know so many interesting infomation. You might be very wise. I like such people. Don’t top writing.