Mejorar Codigo

angelmex · #1 (**permalink**) 17/10/2011, 09:34

Estoy comenzando en el diseño web, despues de un tiempo intentando tengo el siguiente codigo pero queria ver si me pueden ayudar a corregir errores y/o mejorarlo ya que aunque es funcional no lo realice basado en estandares web ni con completo conocimiento.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<style type="text/css">
<!--
body {
     margin-left: 0px;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     background-color: #FFF;
     background-image: url(fondo.jpg);
     background-repeat: repeat;
}

#estructura
{
     width:800px;
     margin-left:auto;
     margin-right:auto;
}

.alineacion{
    float:left;
}

#botones
{
     width:800px;
     float:left;
}

#contenedor
{
     width:800px;
    float:left;
}

#lateral
{
     width:124px;
    float:left;
}

#contenido
{
     width:676px;
    float:left;
}

body,td,th {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 14px;
     color: #000;
}
-->
</style>
</head>

<body>
<div id="estructura">
  <div><img src="encabezado.jpg" width="800" height="150" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="530,58,560,90" href="http://www.facebook.com" target="_blank" alt="Facebook" />
      <area shape="rect" coords="568,44,597,75" href="http://www.twitter.com" target="_blank" alt="Twitter" />
    </map>
  </div>
 
  <div id="botones">
<a href="m1.html" target="contenido"><img src="m1.jpg" width="160" height="40" border="0" /></a><a href="m2.html" target="contenido"><img src="m2.jpg" width="160" height="40" border="0" /></a><a href="m3.html" target="contenido"><img src="m3.jpg" width="160" height="40" border="0" /></a><a href="m4.html" target="contenido"><img src="m4.jpg" width="160" height="40" border="0" /></a><a href="m5.html" target="contenido"><img src="m5.jpg" width="160" height="40" border="0" /></a>
  </div>
 
<div id="contenedor">
  <div id="lateral">
  <a href="c1.html" target="contenido"><img src="l1.jpg" width="124" height="28" border="0" /></a>
  <a href="c2.html" target="contenido"><img src="l2.jpg" width="124" height="28" border="0" /></a>
  <a href="c3.html" target="contenido"><img src="l3.jpg" width="124" height="28" border="0" /></a>
  <a href="c4.html" target="contenido"><img src="l4.jpg" width="124" height="28" border="0" /></a>
  <a href="c5.html" target="contenido"><img src="l5.jpg" width="124" height="28" border="0" /></a>
  </div>
 
  <div id="contenido"><iframe width="674" height="266" frameborder="0" scrolling="auto" name="contenido" src="m1.html"></iframe></div>
</div>
 
  <div><img src="piedepagina.jpg" width="800" height="85" alt="" /></div>
</div>
</body>
</html>

maycolalvarez · #2 (**permalink**) 17/10/2011, 09:37

la mejor forma es utilizar los Validadores de la W3C y estudiar directamente los estándares y buenas practicas