Ir directamente al contenido de esta página

codexexempla.org

Código de ejemplo


<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Lorem ipsum</title>
      <meta name="copyright" content="Lorem ipsum" />
      <meta name="Description" content="Lorem ipsum" />
      <meta name="developer" content="Lorem ipsum" />
      <meta name="Keywords" content="Lorem ipsum" />
      <meta name="version" content="1.00" />
      <meta name="language" content="es" />
      <meta name="revisit-after" content="2 days" />
      <meta name="rating" content="General" />
      <meta name="author" content="Lorem ipsum" />
      <meta name="robot" content="index, follow" />
      <script language="JavaScript" type="text/javascript" src="js/script.js"></script><script language="JavaScript" type="text/javascript" src="js/buscador.js"></script>
      <script language="JavaScript" type="text/javascript" src="js/video.js"></script>
      <!--  RSS valido <script language="JavaScript" src="js/rss.js"></script>-->
      <style type="text/css">
      <!--
      .buscador {
      background-image: url(images/portada/barra/fondo_buscador.gif);
      background-repeat: repeat;
      }
      #id_1, #id_2, #id_3, #id_4, #abajoizda, #abajodcha {
      background-color: #FFFFFF;
      background-image: url(img/portada/puntitos.gif);
      background-repeat:  repeat-y;
      background-position: right;
      }
      #cabecera form {
      height: 20px;
      margin: 0px;
      padding: 0px;
      }
      -->
  </style><link href="estilos/estilos_portada.css" rel="stylesheet" type="text/css" />
      <link href="estilos/capas_portada.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
      <!--  RSS valido <script language="javascript">
      PintaElemento('http://www.url.com/rss/¬http://www.www.url.com/rss/¬http://www.url.com/rss/¬http://www.url.com/rss/');
      </script>-->
      <div id="cabecera">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> <td width="270" rowspan="3" align="left" valign="top" class="tdBordeBlanco"><img src="images/portada/barra/logo.gif" alt="Lorem ipsum" width="270" height="81" border="0" usemap="#Map" /></td>
  <td height="59" colspan="2" rowspan="2" align="left" valign="top" class="tdBordeBlanco"><img src="images/portada/barra/imagen.jpg" alt="" width="265" height="59" /></td>
  <td colspan="2" class="textabla1" height="20" valign="middle">&nbsp;<a href="url.htm" class="blanco">Sobre nosotros</a> | <a href="registro/" class="blanco">Registro</a> | <a href="plano/" class="blanco">Mapa del sitio</a> </td>
  </tr>
  <tr> <td height="39" colspan="2" align="left" valign="middle" class="buscador"><form name="frmBusqueda" id="frmBusqueda" action=" " onsubmit="return false;">
  <span class="txtGrissmallCap">&nbsp;Buscar</span>&nbsp;
  <input id="txtBuscar" name="txtBuscar" type="text" size="20" maxlength="125">
  <a href="javascript:buscar();"><img src="images/portada/barra/icono.gif" alt="Buscar" width="18" height="17" border="0" align="middle" /></a>
  </form></td>
  </tr>
  <tr>
  <td width="133" height="20" align="center" valign="middle" class="CabSec1"><a href="seccion_1/default.htm" class="blanco">Sección 1</a></td> <td width="133" height="20" align="center" valign="middle" class="CabSec2"><a href="seccion_2/default.htm" class="blanco">Sección 2</a></td>
  <td width="146" height="20" align="center" valign="middle" class="CabSec3"><a href="seccion_3/default.htm" class="blanco">Sección 3</a></td>
  <td width="97" height="20" align="center" valign="middle" class="CabSec4"><a href="seccion_4/default.htm" class="blanco">Sección 4</a><a href="#" class="blanco"></a></td>
  </tr>
  </table>
  </div>
  <div id="fecha">
  <script type="text/javascript">
      var d=new Date()
      var monthname=new Array("enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre")
      document.write(d.getDate() + " de ")
      document.write(monthname[d.getMonth()] + " de ")
      document.write(d.getFullYear())
  </script></div>
      <div id="principal">
  <div id="principalfoto"><a href="url/default.htm"><img src="img/portada/imagen.jpg"  title="Lorem ipsum" alt="Lorem ipsum" width="212" height="243" class="imgp" /></a></div>
  <div id="principaldcha">
  <h1 class="cajatitulo"><a href="url/default.htm" class="titulos">Lorem ipsum</a></h1>
  <div class="entradilla">Lorem ipsum</div>
  <p class="t3">Lorem ipsum</p> </div>
  <div class="cierre"></div>
  </div>
  <div id="columna_a">
  <div id="modulo_hor1">
  
  <div id="id_1">
  <div class="cajaantetitulo"><a class="leermas" 
      href="url/default.htm">Lorem ipsum</a></div>
  <h2 class="cajatitulo1"><a class="titulos" 
      href="url/default.htm">Lorem ipsum</a></h2>
  <a 
      href="url/default.htm"><img 
      src="img/portada/img.jpg" alt="Lorem ipsum" width="70" height="70" class="img1" title="Lorem ipsum" /></a> 
  <div class="cajatexto1">Lorem ipsum</div> </div><div id=id_3>
      <div class="cajaantetitulo"><a class="leermas" 
      href="pagina.htm">Lorem ipsum</a></div>
      <h2 class="cajatitulo1"><a class="titulos" 
      href="pagina.htm">Lorem ipsum</a></h2>
      <a href="seccion/default.htm"><img 
      src="img/portada/imagen.jpg"alt="Lorem ipsum" width="70" height="70" class="img1" title="Lorem ipsum" /></a> 
  <div class="cajatexto1">Lorem ipsum</div>
  </div> </div>
 
  <div class="cierre"> </div>
  <div id="modulo_hor2">
  <div id="id_3">
  <h2 class="cajaseccion"><span class="icono"><img src="img/portada/icono.gif" alt=" " width="12" height="12"/></span><a href="pagina.htm" class="titulos">Lorem ipsum</a></h2>
  <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a></h3> Lorem ipsum
  </div>
  <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a></h3>
      Lorem ipsum
  </div>
  </div>
  <div id="id_4">
  <h2 class="cajaseccion"><span class="icono"><img src="img/portada/icono.gif" alt=" " width="12" height="12"/></span><a href="url/default.htm" class="titulos">Lorem ipsum</a></h2> <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a> </h3>
  <p>Lorem ipsum</p>
  </div>
  <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a> </h3> <p>Lorem ipsum</p>
  </div>
  </div>
  </div>
  <div class="cierre"></div>
  <!-- Inicio del bloque de tres fotos -->
  <div id="tresfotos"> <img src="img/portada/borde_h.gif" alt=" " class="bordeh" /> <div class="interior">
  <div class="fila"><a href="url/default.htm"><img 
      class="img2" alt="Lorem ipsum" title="Lorem ipsum" height="92"
      src="img/portada/imagen.jpg" width="126" 
      border="0" /></a> 
  <div class="cajatitulo3"><a class="titulos"
      href="url/default.htm">Lorem ipsum</a></div>
  </div>
  <div class="bordev"><img src="img/portada/borde_v.gif" width="1" height="135" /></div>
  <div class="fila"><a 
      href="url/default.htm"><img 
      src="img/portada/imagen.jpg" width="126" height="92" border="0" class="img2" 
      alt="Lorem ipsum" title="Lorem ipsum" /></a> 
  <div class="cajatitulo3">
  <a class="titulos" 
      href="url/default.htm">Lorem ipsum</a></div></div>
  <div class="bordev"><img src="img/portada/borde_v.gif" alt=" "width="1" height="135" /></div> <div class="fila"><a 
      href="url/default.htm"><img 
      src="img/portada/imagen.jpg" width="126" height="92" border="0" class="img2" 
      alt="Lorem ipsum" title="Lorem ipsum" /></a>
      <div class="cajatitulo3"><a class="titulos" 
      href="url/default.htm">Lorem ipsum</a></div></div>
  <div class="bordevcierre"><img src="img/portada/borde_v.gif" alt=" " width="1" height="135" /></div>
  <div class="cierre"></div>
  </div>
  <img src="img/portada/borde_h.gif" alt=" " width="435" height="1" class="bordehcierre" /></div>
  <!-- fin del bloque de tres fotos -->
  <div id="modulo_hor3">
  <div id="abajoizda"> <div class="cajatexto2">
  <h3 class="cajatitulo2"> <a href="url/default.htm" class="titulos">Lorem ipsum</a></h3>
  <p>Lorem ipsum</p>
  </div>
  <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a></h3>
  <p>Lorem ipsum </p> <p>&nbsp;</p>
  </div>
  </div>
  <div id="abajodcha">
  <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a></h3>
  <p>
  </div> <div class="cajatexto2">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos">Lorem ipsum</a></h3>
  <p>Lorem ipsum</p>
  <p>&nbsp;</p>
  </div>
  </div>
  </div>
  <div class="cierre"></div> <div id="copy"><span class="clase_1">Lorem ipsum</span> © Lorem ipsum&nbsp;<script type="text/javascript">document.write(fecha());</script>.&nbsp;Lorem ipsum. <a href="mailto:correo@dominio.extension" class="correo"><strong>correo@dominio.extension</strong></a></div>
      </div>
      <div id="columna_b">
  <div id="columna_b1">
  <div class="menua">
  <div class="icono2"><a class="blanco" href="pagina.htm"><img src="img/portada/flechablanca.gif" class="noborde" alt=" "/></a></div> <a class="blanco" href="pagina.htm">LOREM IPSUM</a> </div>
  <div class="menua">
  <div class="icono2"><a class="blanco" href="#"><img src="img/portada/flechablanca.gif" alt=" " class="noborde" /></a></div>
  <a class="blanco" href="pagina.htm">LOREM IPSUM</a></div>
  <div class="menua">
  <div class="icono2"><a class="blanco" href="#"><img src="img/portada/flechablanca.gif" alt=" " class="noborde" /></a></div>
  <a class="blanco" href="pagina.htm">LOREM IPSUM</a></div> <div class="menua">
  <div class="icono2"><a class="blanco" href="#"><img src="img/portada/flechablanca.gif" alt=" " class="noborde" /></a></div>
  <a class="blanco" href="pagina.htm">LOREM IPSUM</a></div>
  <div class="menub"><a class="blanco" href="url/default.htm">LOREM IPSUM</a></div>
  <div class="menuc">Lorem ipsum</div>
  <div class="menub"><a class="blanco" href="url/default.htm">LOREM IPSUM</a></div> <div class="menuc">Lorem ipsum</div>
  <div class="menub"><a class="blanco" href="url/">LOREM IPSUM</a></div>
  <div class="menuc">Lorem ipsum </div>
  </div>
  <!--fin capa1 columna 2 -->
  <div id="columna_b2"> <div class="menud"><img  class="icono3" src="img/portada/icono.gif" alt=" "/><a class="blanco" href="url/default.htm"> Lorem ipsum</a></div>
  <div class="menud"><img  class="icono3" src="img/portada/icono.gif" alt=" "/><a class="blanco" href="url/default.htm"> Lorem ipsum</a></div>
  <div class="menud"><img  class="icono3" src="img/portada/icono.gif" alt=" "/><a class="blanco" href="url/default.htm"> Lorem ipsum</a></div>
  <div class="menud"><img  class="icono3" src="img/portada/icono.gif" alt=" "/><a class="blanco" href="url/default.htm"> Lorem ipsum</a></div> </div>
  <!--fin capa2 columna -->
  <div id="columna_b3">
  <h2 class="cajaseccion2"><span class="icono4"><img src="img/portada/icono.gif" alt=" "/></span> <a href="url/default.asp" class="titulos">Lorem ipsum</a></h2>
  <div class="cajatexto3" style="width:99%;">
  <h3 class="cajatitulo2"><a href="url/default.asp" class="titulos"><img src="img/portada/imagen.gif" class="noborde" alt=" Lorem ipsum" title=" Lorem ipsum" /></a></h3>
      Lorem ipsum </div> </div>
  <div id="columna_b4">
  <h2 class="cajaseccion2"><span class="icono4"><img src="img/portada/icono.gif" alt=" "/></span> <a href="url/default.htm" class="titulos"> Lorem ipsum</a></h2>
  <div class="cajatexto3">
  <h3 class="cajatitulo2"><a href="url/default.htm" class="titulos"> Lorem ipsum</a></h3>
      Lorem ipsum </div> <div class="cajatexto3">
  <h3 class="cajatitulo2"><A 
      class=titulos href="javascript:funcion();"> Lorem ipsum </a></h3>
  </div>
  </div>
  <!--fin capa 3 columna 2 -->
  <!--comienzo capa videos -->
  <div id="columna_bvideo">
  <div class="cajatexto2"><h3 class="cajatitulo2"><a href="http://url" class="titulos"> Lorem ipsum<br /> Lorem ipsum</a></h3><div id="video"><img src="img/portada/imagen.jpg" alt="Lorem ipsum" usemap="#Map2" title="Lorem ipsum" />
      <map name="Map2" id="Map2">
  <area shape="rect" coords="62,69,121,108" href="#cajatexto2" alt="Lorem ipsum" title="Lorem ipsum" onclick="funcion()"/>
  </map></div>
      Lorem ipsum</div>
  </div>
  </div>
  <!-- inicio capa RSS -->
  <div id="columna_c"> <div> <a href="http://url" target="_blank"><img src="img/portada/logo_1.gif" alt="Lorem ipsum" title="Lorem ipsum"class="noborde" /></a> <div style="margin-top:3px;margin-bottom:5px;"> <a href="http://url" target="_blank"><img src="img/portada/logo_2.gif" class="noborde" alt="Lorem ipsum" title="Lorem ipsum" /></a></div></div>
  <div class="filaizda"><img src="img/portada/borde_h_p.gif" style="margin-bottom:8px;" /><a href="url/default.htm"><img src="img/portada/imagen.jpg" alt="Lorem ipsum"  width="126" height="92" border="0" class="img2" title="Lorem ipsum" /></a>
  <div class="cajatitulo3"><a class="titulos" href="url/default.htm">Lorem ipsum</a></div>
  </div>
  <div class="filaizda"><img src="img/portada/borde_h_p.gif" style="margin-bottom:8px;" /><a href="url/default.htm"><img src="img/portada/imagen.jpg" alt="Lorem ipsum" width="126" height="92" border="0" class="img2" title="Lorem ipsum" /></a>
  <div class="cajatitulo3"><a class="titulos" 
      href="url/default.htm">Lorem ipsum</a></div> </div>
  <div class="filaizda"><img src="img/portada/borde_h_p.gif" style="margin-bottom:8px;" /><a href="url/default.htm"><img src="img/portada/imagen.jpg" alt="Lorem ipsum" title="Lorem ipsum" width="126" height="92" border="0" class="img2" /></a>
  <div class="cajatitulo3"><a class="titulos"
      href="url/default.htm">Lorem ipsum
  </a></div>
  <img src="img/portada/borde_h_p.gif" style="margin-bottom:8px; margin-top:0px;" /></div>
  
  <div class="cajatextorss">
  <span class="cajatitulo5A">Lorem ipsum</span><br /><br />
  <span class="titulos"><strong>Lorem ipsum</strong></span><br /> <p><a class="titulos" href="http://url" target="_blank" title="Lorem ipsum">Lorem ipsum</a></p>
  <br />
  <span class="titulos"><strong>Lorem ipsum</strong></span><br />
  <p><a class="titulos" href="http://url" target="_blank" title="Lorem ipsum">Lorem ipsum</a></p>
  <br />
  <span class="titulos"><strong>Lorem ipsum</strong></span><br />
  <p><a class="titulos" href="http://url" target="_blank"  title="Lorem ipsum">Lorem ipsum</a></p> </div> <div id="id_6">
  <div class="img3">
  <p>Lorem ipsum</p>
  </div>
  <p><a href="url" target="_blank"><img src="img/portada/icono_1.gif" alt="Lorem ipsum" border="0"  class="img3" title=" Lorem ipsum" /></a><a href="http://url" target="_blank"><img src="img/portada/icono_2.gif"  alt="Lorem ipsum" border="0" class="img3" title="Lorem ipsum" /></a><a href="http://url" target="_blank"><img src="img/portada/icono_3.gif" alt="Lorem ipsum" width="68" height="30" border="0" class="img3" /></a><a href="http://url" target="_blank"><img src="img/portada/icono_4.gif" alt="Lorem ipsum" width="68" height="30" border="0" class="img3" /></a><a href="http://url" target="_blank" style="display:"><img src="img/portada/icono_5.gif" alt="Lorem ipsum" border="0" class="img3" title="Lorem ipsum" /></a></p>
  </div>
  </div><map name="Map" id="Map">
  <area shape="rect" alt="Lorem ipsum" coords="8,2,261,35" href="http://url" />
  <area shape="rect" coords="7,42,266,76" alt="Lorem ipsum" href="pagina.htm" />
  </map>
  </body>
  </html>

Los problemas

Sólo voy a enumerar los problemas que aparecen con un análisis somero, principalmente los que tienen repercusiones en cuestiones de accesibilidad.

En cuando al código XHTML:

En cuando a los estilos:

En realidad, la CSS debería ser analizada aparte, pero podemos hacernos una idea de antemano puesto que un código poco semántico suele dar como resultado hojas de estilo sobrecargadas, en un intento de sus creadores por suplir las carencias del documento al que se aplican.

Por último, en cuanto al empleo de JavaScript:

Volver a la introducción al curso

(cc) CodexExempla.org, 2007–2023 Mapa del sitio | XHTML | CSS | AA