Diseño de layout HTML

Los sitios web a menudo muestran contenido en múltiples columnas (como revistas y periódicos).

Diseño de página web utilizando Elementos <div>

Notas:<div> Element es comúnmente utilizado como herramienta de diseño, ya que permite ubicarlo fácilmente a través de CSS.

Este ejemplo utiliza cuatro elementos <div> para crear un diseño de columna múltiple:

Ejemplo

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
Londres<br>
París<br>
Tokio<br>
</div>
<div id="section">
<h1>Londres</h1>
<p>
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido,
con una área metropolitana de más de 13 millones de habitantes.
</p>
<p>
Ubicada en el río Támesis, Londres ha sido un asentamiento importante durante dos milenios,
Su historia se remonta a su fundación por los romanos, quienes la llamaron Londinium.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

Prueba tu mismo

CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
</style>

Diseño de sitio web con HTML5

Los elementos semánticos nuevos de HTML5 definen diferentes partes de una página web:

Elementos semánticos HTML5

header Definir un encabezado de documento o sección
nav Definir un contenedor para enlaces de navegación
section Definir una sección en un documento
article Definir un artículo autónomo e incluido
aside Definir contenido adicional (por ejemplo, una barra lateral)
footer Definir el pie de página de un documento o sección
details Definir detalles adicionales
summary Definir el título del elemento details

Este ejemplo utiliza <header>, <nav>, <section> y <footer> para crear un diseño de columna múltiple:

Ejemplo

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
Londres<br>
París<br>
Tokio<br>
</nav>
<section>
<h1>Londres</h1>
<p>
Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido,
con una área metropolitana de más de 13 millones de habitantes.
</p>
<p>
Ubicada en el río Támesis, Londres ha sido un asentamiento importante durante dos milenios,
Su historia se remonta a su fundación por los romanos, quienes la llamaron Londinium.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

Prueba tu mismo

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

Diseño de HTML con tablas

Notas:El elemento <table> no fue diseñado como herramienta de diseño.

El elemento <table> se utiliza para mostrar datos tabulados.

El elemento <table> puede lograr un efecto de diseño, ya que se puede configurar el estilo del elemento de tabla a través de CSS:

Ejemplo

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Nota" style="height:32px;width:32px">
  </th>
  <td>
    El elemento de tabla no fue diseñado para ser una herramienta de diseño.
  </td>
</tr>
</table>
</body>

Prueba tu mismo

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>