Ejercicios - Modelo Caja 2 - HTML & CSS - Curso Práctico Avanzado

HTML & CSS:
Curso práctico avanzado

Comprar Índice Acrónimos Vídeos Ejercicios Contenido extra El autor Contacto
Ejercicios - Modelo caja 2
Enunciado Comprar el libro

A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr
una página web que tenga el mismo aspecto que la siguiente imagen:
HTML & CSS: Curso práctico

avanzado en el sitio web de
Publicaciones Altaria
Los bordes que debes definir son:
Encabezado nivel 1: borde completo con una anchura de 2px, sólido y de color azul (#00F).
Encabezado nivel 2: borde completo con una anchura de 2px, sólido y de color gris (#AAA).
Listas: borde completo con una anchura de 2px, solido y de color verde (#0F0).
En la siguiente imagen se indican las dimensiones que deben tener ciertas partes de la página:
A: relleno izquierdo y derecho de 10px.

B: relleno de 10 px.
C: margen superior e inferior de 30px.
D: relleno de 5 px.
E: margen superior e inferior de 15px.
F: margen entre los elementos de la lista de 15 px.
Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que necesites.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<h2>Datos del libro</h2>
<ul>
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripción del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años
noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos
años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas
imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas
complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas
por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el
Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de
estilo en cascada (Cascading Style Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus
propias páginas web. No son necesarios conocimientos previos para aprender con este
libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la
Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>
<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios
para poder desarrollar páginas web; se explican conceptos de estructura física y
estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye
la estructura física en las URL o direcciones que se emplean a la hora de crear los
enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general
que se emplea para refererirse a los estándares que define su funcionamiento como HTML y
CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página
web, se explican las etiquetas de HTML que se utilizan para definir el texto, los
enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir
el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo
definir la presentación del texto, de las tablas y de los formularios; cómo realizar
transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
Solución
Ocultar solución
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
<style>
body {
padding-left: 10px;
padding-right: 10px;
}
h1 {
border: 2px solid #00F;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
}
h2 {
border: 2px solid #AAA;
padding: 5px;
margin-top: 15px;
margin-bottom: 15px;
}
ul {
border: 2px solid #0F0;
}
li {
margin-bottom: 0;
}
li + li {
margin-top: 15px;
}
</style>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<h2>Datos del libro</h2>
<ul id="datos">
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripción del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años
noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos
años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas
imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a páginas
complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas
por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el
Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las Hojas de
estilo en cascada (Cascading Style Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus
propias páginas web. No son necesarios conocimientos previos para aprender con este
libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la
Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>
<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios
para poder desarrollar páginas web; se explican conceptos de estructura física y
estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye
la estructura física en las URL o direcciones que se emplean a la hora de crear los
enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general
que se emplea para refererirse a los estándares que define su funcionamiento como HTML y
CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página
web, se explican las etiquetas de HTML que se utilizan para definir el texto, los
enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir
el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo
definir la presentación del texto, de las tablas y de los formularios; cómo realizar
transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
© 2015 Sergio Luján Mora

Ejercicios - Modelo Caja 2 - HTML & CSS - Curso Práctico Avanzado

Cargado por

Copyright:

Formatos disponibles

Ejercicios - Modelo Caja 2 - HTML & CSS - Curso Práctico Avanzado

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejercicios - Modelo Caja 2 - HTML & CSS - Curso Práctico Avanzado

Cargado por

Copyright:

Formatos disponibles

HTML & CSS:

Curso práctico avanzado

Ejercicios - Modelo caja 2

Enunciado Comprar el libro

HTML & CSS: Curso práctico

A: relleno izquierdo y derecho de 10px.

<h2>Datos del libro</h2>

<h2>Descripción del libro</h2>

<h2>Contenido del libro</h2>

<h2>Datos del libro</h2>

<h2>Descripción del libro</h2>

<h2>Contenido del libro</h2>

© 2015 Sergio Luján Mora

También podría gustarte