Ejercicios Básicos I: Ejercicio 1

EJERCICIOS BÁSICOS I
Ejercicio 1. A partir del código HTML proporcionado añadir las reglas CSS necesarias para que la página resultante
tenga el mismo aspecto que la de la imagen siguiente (colores usados: red, blue, orange, olive, purple, fuchsia y
Green.):
El código HTML se proporciona a continuación:
<!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">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a
scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis.
<span class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis
metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi.
Suspendisse <span class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio at
dui. In in elit sed metus pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col"class="especial">Título columna 1</th>
<th scope="col"class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row"class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur
blandit, eros sed gravida aliquet, risus justo porta lorem, ut mollis lectus tortor in orci.
Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula
vulputate</span>, venenatis in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan,
diam nisi feugiat ante, eu congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum
aliquet, tincidunt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut
ullamcorper nisi quis mi.</p>
</div>
</body>
</html>
Ejercicio 2: 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:
Los bordes que debes definir son:
➢ Encabezado nivel 1: borde inferior 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).
➢ Lista con los datos del libro: borde superior e inferior con una anchura de 4px, punteado y de color rojo (#F00).
➢ Lista con el contenido del libro: borde completo con una anchura de 2px, con guiones y de color verde (#0F0).
Nota: Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que necesites.
<!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 referirse 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>
Ejercicio 3: 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:
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, sólido 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.
Nota: Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que necesites.
<!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 referirse 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>
http://desarrolloweb.dlsi.ua.es/libros/html-css/ejercicio-modelo-caja-2

Ejercicios Básicos I: Ejercicio 1

Cargado por

Copyright:

Formatos disponibles

Ejercicios Básicos I: Ejercicio 1

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 Básicos I: Ejercicio 1

Cargado por

Copyright:

Formatos disponibles

EJERCICIOS BÁSICOS I

El código HTML se proporciona a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<h2>Datos del libro</h2>

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

<h2>Contenido del libro</h2>

Los bordes que debes definir son:

<h2>Datos del libro</h2>

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

<h2>Contenido del libro</h2>

También podría gustarte