Durante el presente ejercicio, vamos a implementar la estructura y estilo de la página web de un

foro, como la de la siguiente imagen.

Para ello, en primer lugar, debemos definir la composición de la página, teniendo en cuenta el modelo

de ‘cajas’ que necesitamos. En nuestro caso, podría ser el siguiente:

Tras seleccionar la estructura de cajas a implementar, debemos implementar dicha estructura en el

fichero index.html.

Teniendo en cuenta las divisiones de la imagen anterior, implementaremos la estructura de cajas

utilizando la siguiente estructura html (respetando la anidación de las etiquetas):

• html
o head
o body
▪ div #page
• header
o h1 (título de la página)
• nav
• main
o section
▪ arcicle
▪ article
• aside
• footer (derechos reservados …)
Dentro de la barra de navegación, deberemos implementar una lista no numerada, en la que cada

elemento se corresponderá con una de las opciones del menú, quedando la siguiente estructura

• nav
o ul
▪ li con enlace ‘principal’
▪ li con enlace ‘Eventos’
▪ li con enlace ‘Productos’
▪ li con enlace ‘Contactos’
Así mismo, dentro de cada artículo, crearemos una estructura como la siguiente:

• article
o header
▪ h1 (título del mensaje)
▪ h2 (subtitulo del mensaje)
▪ small (publicado el)
o main
▪ texto del mensaje
▪ figure (solo en el primer mensaje)
• Img
• Figcaption (Está es la imagen del primer …)
o footer (comentarios …)
Al finalizar la estructura del html, quedará como el siguiente esquema:
 • html
o head
o body
▪ div id=page
• header
o h1 (título de la página)
• Nav
o ul
▪ li con enlace ‘principal’
▪ li con enlace ‘Eventos’
▪ li con enlace ‘Productos’
▪ li con enlace ‘Contactos’
• main
o section
▪ Arcicle
• header
o h1 (título del mensaje)
o h2 (subtitulo del mensaje)
o small (publicado el)
• main
o texto del mensaje
o figure (solo en el primer mensaje)
▪ Img
▪ Figcaption (Está es la imagen
del primer …)
• footer (comentarios …)
▪ Article
• header
o h1 (título del mensaje)
o h2 (subtitulo del mensaje)
o small (publicado el)
• main
o texto del mensaje
• footer (comentarios …)
• aside
• footer (derechos reservados …)

Una vez implementado, si lo abrimos en el navegador, deberá visualizarse como la siguiente imagen:
A continuación, crearemos la hoja de estilos ‘estilos.css’, y añadiremos la referencia a la misma en el

html. Completa la hoja de estilos, para que aplique las siguientes reglas:

Debemos tener en cuenta que algunos navegadores pueden no soportar HTML5, y tomará las

etiquetas article, section, aside… como divs. Para asegurarnos de que el navegador ubica

correctamente estos elementos aunque no soporte HTML5, debemos definir una regla que les aplique

el estilo display: block;

article, section, aside, nav, header, footer, figure, figcaption, main {

display: block;
}
Dado que cada navegador implementa unos estilos por defecto diferente s para cada componente,

para asegurar que nuestra web se visualiza igual en los distintos navegadores, aplicaremos una regla

general que elimine tanto el margen externo (margin), como el interno (padding), en todos los

componentes html.

*{
margin: ...;
padding: ...;
}
Refresca la página para ver el resultado. Debería haber eliminado todos los espacios entre los

párrafos, y quedar similar a la siguiente imagen:

Crea una regla de estilo para cada título, que cumpla las siguientes características:

• h1: negrita, 2em, arial, sans-serif.

• h2: negrita, 1.5em, arial, sans-serif.
• h3: negrita, 1em, arial, sans-serif.
Aplica una alineación centrada al body:

body{
Text-align: ...;
}
Aplica el siguiente estilo al div con identificador page, que engloba todo el contenido de la página:

• Ancho de 960px.
• Margen externo de 15 px arriba y abajo, y automático a izquierda y derecha.
• Alineación a la izquierda.
El estilo debe quedar definido de manera similar al siguiente fragmento de código:

#page{
width: ...;
margin: ...;
text-align: ...;
}
Aplica un estilo al header de la página (solo al header de la página, no al header de los artículos), que

cumpla las siguientes características:

• Color de fondo: #CCFFFF.

• Borde: de 1px, sólido, y de color #8C8C8C.
• Margen interno de 20 px.
El estilo debe quedar definido de manera similar al siguiente fragmento de código:

#page > header{

background-color: ...;
border: ...;
padding: ...;
}

Al indicar #page > header, el estilo solo se aplicará a los elementos header que se encuentren justo

en el siguiente nivel de anidación, tras un elemento con id=page.

Si refrescamos la página, se debería visualizar una página web similar a la siguiente imagen:

A continuación, daremos estilo a la barra de navegación (nav), aplicando los siguientes estilos:

• Color de fondo #FFFFCC

• Borde de 1px solido de color #8C8C8C, que aplique a la izquierda, derecha y abajo (arriba no
debe haber borde)
• Margen interno: arriba y abajo 5px. Izquierda y derecha 15px. De esta forma, las opciones
del menú quedarán separadas del borde del elemento.
Deberá quedar una definición similar a la siguiente:

nav{
background-color: ...;
padding: ...;
border-top: ...;
border-right: ...;
border-bottom: ...;
border-left: ...;
}
El siguiente estilo lo aplicaremos a las distintas opciones de la barra de navegación (los elementos

del menú). Para ello, debemos aplicar los siguientes estilos a los elementos de la lista no orde nada

del menu:

• Mostrar los elementos de la lista uno al lado de otro, convirtiéndolos en elementos ‘inline’
• Eliminar las viñetas de la lista.
• Aplicar un margen interno de 5 píxels.
• Aplicar un estilo de texto, de 14px, en negrita, con tipo de letra verdana, sans-serif.
• Aplicar un estilo de cursor default.
El estilo debería quedar con una estructura similar a la siguiente:

nav ul li {
display: ...;
list-style-type: ...;
padding: ...;
font-family: ...;
font-size: ...;
font-weight: ...;
cursor: ...;
}
Aplicar un estilo a los enlaces de la lista, para eliminar el subrayado, y aplicar el cursor default. Debe

quedar similar al siguiente:

nav ul li a{
text-decoration: ...;
cursor: ...;
}

Aplicar un estilo a los enlaces de la lista, para que el color de los enlaces cambie a gris (grey) cuando

el ratón se coloca sobre el enlace. Debe quedar similar al siguiente:

nav ul li a:hover{
color: ...;
}

Si refrescamos la página, con los cambios aplicados hasta el momento, debería verse similar a la
siguiente imagen.
Recordemos que el elemento con identificador page ocupa 960px, gracias a los estilos que hemos

definido. Dado que queremos incluir tanto el contenido, como la barra lateral, entre ambos elementos

deben ocupar como máximo estos 960px.

En primer lugar, vamos a definir el estilo del bloque de contenido (main), aplicando los siguientes

estilos:

• Flotación a la izquierda.
• Ancho de 660px.
• Margen externo de 20px.
• Color de fondo #FFFFCC
Deberá quedar similar a la siguiente definición:

#page > main{

float: ...;
width: ...;
margin: ...;
background-color: ...;
}
Al aplicar este estilo, el bloque main que está justo dentro del div con identificador page (porque los

artículos también tienen un elemento main, pero no queremos que se aplique el estilo a los mismos),

el elemento flotará a la izquierda de la página web, con una anchura total de 700px (660px de ancho

+ 2opx de margen externo a la izquierda + 20px de margen externo a la derecha) . Con ello, nos

quedarán 260px a la derecha del main, para poder incluir la barra lateral, fotando a la derecha.

Para ello, incluiremos un estilo para la etiqueta aside, con las siguientes características:
 • Flotación a la derecha.
• Color de fondo #FFFFCC
• Ancho de 220px.
• Margen externo de 20px arriba y abajo, y sin margen a la izquierda y la derecha.
• Margen interno de 20px.
Debe definirse con una estructura similar a la siguiente:

aside{
float: ...;
width: ...;
margin: ...;
padding: ...;
background-color: ...;
}
Al aplicar el estilo, la barra lateral tendrá un ancho total de 260px, dado que el ancho es de 220px, y

hemos configurado un margen interno de 20px a la izquierda y la derecha.

Al haber utilizado la etiqueta float, el bloque main flotará a la izquierda, y el bloque aside flotará a la

derecha. Al disponer de suficiente espacio dentro del elemento #page , ambos bloques se mostrarán

uno al lado del otro.

Si refrescamos la página, debe quedar similar a la siguiente imagen:

Como vemos, el elemento footer está flotando a la derecha. Esto es debido a que el elemento anterior

está flotando a la derecha, y no hemos restaurado el flujo normal del documento. Para corregirlo,

debemos definir un estilo para footer, que incluya la propiedad clear.

Añadiremos el estilo para footer, con las siguientes características:

 • Añadir la propiedad clear, para resetear el flujo normal del documento.
• Borde superior de 2px solido con color #999999.
• Margen interno de 20px.
• Alineación al centro.
El estilo debe quedar similar al siguiente bloque:

#page > footer{

clear: both;
border-top: ...;
padding: ...;
text-align: ...;
}
Se ha definido como #page > footer, porque solo debe aplicarse al footer que se encuentra dentro

del elemento con id page, y no al footer de los artículos.

Si refrescamos la página, debe visualizarse como la siguiente imagen:

Hasta el momento hemos definido los estilos de la estructura de la página. A continuación, vamos a

añadir los estilos correspondientes a los artículos publicados.

Para ello, vamos a definir un estilo para cada artículo, con las siguientes características:

• Color de fondo: #FFFF99.

• Borde: 1px solido de color #8C8C8C.
• Margen externo inferior de 15px.
• Margen interno de 20px.
Quedará similar a:

article{
background-color: ...;
Border: ...;
margin-bottom: ...;
padding: ...;
}
Añadiremos un nuevo estilo para el header de cada artículo, que añada un borde inferior de 1px

sólido, de color #999999. Quedará similar a:

article > header{

border-bottom: ...;
}
Dentro del header, hemos incluido una etiqueta small, para el texto “Publicado …". Debemos definir

un estilo para la etiqueta, para que el texto tenga el color #999999. Quedará similar a:

article > header > small{

color: ...;
}
Añadiremos un nuevo estilo para el footer de cada artículo, para alinear el texto del footer a la

derecha. Quedará similar a:

article > footer{

text-align: ...;
}
Si refrescamos la página, debe visualizarse similar a la siguiente imagen.
Para finalizar, vamos a crear un estilo para el elemento figure y el elemento figcaption del primer

artículo, que contiene la imagen y el pie de imagen.

El elemento figure debe cumplir las siguientes características:

• Borde de 1px doble de color #999999.

• Margen interno de 5px
• Texto de tamaño 0.6em, en cursiva, con las fuentes verdana y sans-serif.
Debe quedar un estilo con una estructura similar a la siguiente:

article figure{
border: ...;
padding: ...;
font-family: ...;
font-size: ...;
font-style: ...;
}
El elemento figcaption definirá el texto de tamaño 0.6em, en cursiva, con las fuentes verdana y sans-

serif, quedando con una estructura similar a la siguiente:

article figure figcaption{

font-family: ...;
font-size: ...;
font-style: ...;
}
Al refrescar la página, debe quedar similar a la siguiente imagen: