29

May


Maquetación básica para Web

Autor: David

En el último post de esta serie de consejos básicos para los que se inician en el desarrollo web, comentamos que toda web html debe tener un estructura básica que incluya las etiquetas <html>, <head> y <body>

Hoy vamos a realizar una estructura completa por medio de tablas, para una web típica que tendrá encabezado, menú lateral, contenido y pie de página.

 

 

Debo decir que la maquetación con tablas a día de hoy no está recomendada, sino que se recomienda el uso de capas, pero creo que para alguien que se inicia es mucho más fácil de entender el uso de las tablas y el resultado será igualmente válido.

Para definir una tabla con html debemos usar la etiqueta <table></table>, dentro incorporaremos filas <tr></tr> y columnas o celdas <td></td>. Podemos incorporar atributos a la tabla para espaciado de celdas cellspacing y margen cellpadding, incluyendo el valor del espaciado y margen en píxeles. También podemos incorporar un borde, border="1" y un color de fondo hexadecimal, bgcolor="#000000".

Para las celdas podemos incorporar un atributo de alineamiento del texto vertical valign="top", valign="middle", valign="bottom" o si queremos alineamiento horizontal align="left", align="right", align="center".

Podemos anidar todas las tablas que queramos, para ello sólo debemos incorporar la nueva tabla anidada dentro de una celda <td></td>

Utilizaremos para el ejemplo una tabla principal con un ancho fijo width="860" y una altura que ocupará el 100% de la ventana, height="100%".

Hemos limitado la cabecera y el pie con una altura fija (height) mientras que la sección central no está limitada por lo que ocupará el espacio restante.

El lateral está limitado a una anchura de 200, y la sección de contenido ocupará el ancho restante. Muy importante esta tabla que está anidada tenga la anchura y altura total de la celda donde está situada, width y height 100%.

Ni que decir tiene que esto ya lo hace frontpage y dreamweaver por nosotros, pero creo interesante tener una base de html.

HTML:
  3. <title>Título de la página</title>
  4. </head>
  5. <body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
  7. <table border="1" width="860" height="100%" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
  8.     <tr>
  9.         <td bgcolor="#cccccc" align="center" height="100">
  10.             CABECERA
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.         <td>
  15.             <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
  16.                 <tr>
  17.                     <td bgcolor="#808080" align="center" width="200">
  18.                         LATERAL
  19.                     </td>
  20.                     <td bgcolor="#f3f3f3" align="center">
  21.                         CONTENIDO
  22.                     </td>
  23.                 </tr>
  24.             </table>
  25.         </td>
  26.     </tr>
  27.     <tr>
  28.         <td bgcolor="#cccccc" align="center" height="50">
  29.             PIE DE PÁGINA
  30.         </td>
  31.     </tr>
  32. </table>
  33. </center>
  34. </body>
  35. </html>

 

Salu2

Básicos


0 Comments Send your comment ↓

If comments are open, but there are no comments


Leave a Reply