LS2 Daw

FACULTAD DE CIENCIAS INFORMÁTICAS
DESARROLLO DE APLICACIONES WEB
SEMESTRE 2022 S1
LABORATORIO S2
TEMA: CSS
PROFESOR: PhD(c) Luis Fernando Aguas Bucheli
PORTOVIEJO, 2022
1. TEMA: HTML
2. OBJETIVOS:
 Adquirir los conceptos básicos relacionados con CSS

 Reconocer las características de CSS
3. OBJETIVOS DE DESARROLLO SOSTENIBLE:
Indicador 4.7: De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos
teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas
mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los
derechos humanos, la igualdad de género, la promoción de una cultura de paz y no violencia,
la ciudadanía mundial y la valoración de la diversidad cultural y la contribución de la cultura al
desarrollo sostenible
4. INTRODUCCION:
CSS viene de las iniciales de "Cascading Style Sheets", que traducimos por "Hojas de estilo en
cascada". Es el segundo lenguaje más esencial para crear páginas web. El primero sería HTML,
con el que se define el contenido de la página. El segundo CSS, con el que se define la parte de
la presentación, es decir, cómo deben mostrarse los elementos de la página, su posición,
forma, espaciados, colores y en resumen, toda la parte estética.
CSS no tiene ningún sentido sin HTML, igual que a día de hoy HTML sin CSS también resultaría
imposible, ya que la web ha evolucionado de tal forma que su aspecto es fundamental y el CSS
es la única vía para conseguir personalizarlo.
Partes principales del CSS
Para desarrollar con CSS tenemos que trabajar con una serie de elementos, mediante los
cuales se declaran los estilos, básicamente éstos son los más importantes:
 Selectores, mediante los cuales podemos especificar qué elementos de la página nos
estamos refiriendo
1
Ciencias Informáticas
 Atributos de estilo para definir qué cosas queremos estilizar sobre los selectores
indicados
 Una serie de valores, que indican qué estilo se debe aplicar a cada atributo sobre cada
selector. Los valores se expresan con unidades CSS, que sirven para cuantificar los
valores (píxeles, puntos...)
5. DESARROLLO:
Ejercicio 1:
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para
aplicar los estilos deseados.
Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe
aplicarse.
<!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=iso-8859-1"/>
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */

{ color: #555; }
/* Todos los párrafos contenidos en #primero */

{ color: #336699; }
/* Todos los enlaces la pagina */

{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */

{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
{ font-weight: bold; }
</style>
1
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit
nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis
molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec

porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est
velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae
pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient

montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus.
Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id
iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>.
Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
</html>
NOTEPAD++
NAVEGADOR
1
Solución

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
/* Todos los elementos de la pagina */
* { font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */

p { color: #555; }
/* Todos los prrafos contenidos en #primero */

#primero p { color: #336699; }
/* Todos los enlaces la pagina */

a { color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

#primero em { background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */

em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */

.normal span { font-weight: bold; }
1
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit
nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis
molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec
porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est
velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae
pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient
montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus.
Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id
iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>.
Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
</html>
NOTEPAD++
NAVEGADOR
1
Actividad:
 Haga el ejercicio en Notepad++ y adjunte el resultado
Ejercicio 2:
A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página
resultante tenga el mismo aspecto que el de la siguiente imagen:
SOLUCIÓN

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
/* No borrar la siguiente regla CSS porque es necesaria para ver los bordes de la tabla */
table, tr, th, td {border:1px solid #000; border-collapse:collapse; padding:5px;}
h1#titulo { color: teal; }
strong { color: red; }

span.destacado { color: orange; }
h2#subtitulo { color: blue; }
span.especial { color: purple; }
a { color: red; }
a em { color: blue; }
div#adicional p { color: olive; }

1
div#adicional span#especial { color: fuchsia; }
div#adicional a { color: green; }
caption { color: blue; }

td { color: green; }
td strong { color: orange; }
th { color: red; }
th.especial { color: orange; }
</style>
</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>
1
<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>
NOTEPAD++
NAVEGADOR
1
Actividad:
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:
Captura de pantalla del ejercicio
Las características del diseño de esta página son:

1
 Un diseño fijo centrado con un ancho de 960 px.
 El encabezado de nivel 1 centrado.
 El contenido principal de la página se organiza en dos columnas, una de 260 px de ancho y
la otra el espacio restante de 700 px.
 La lista que explica el contenido del libro se muestra como un texto a tres columnas del
mismo ancho.
 Puedes modificar el código HTML proporcionado para añadir los identificadores y clases
que necesites. También puedes añadir etiquetas <div> para definir elementos
contenedores en la página.
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>
1
<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:
1
</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:
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS: Curso práctico avanzado</title>
<style>
1
body {
width: 960px;
margin: 0 auto;
h1 {
text-align: center;
#datos, #principal {
float: left;
padding: 0;
margin: 0;
#datos {
width: 260px;
#principal {
width: 700px;
#contenido {
list-style-type: none;
padding: 0;
}
1
#contenido li {
float: left;
width: 33%;
</style>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<div id="datos">
<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>
</div>
<div id="principal">
<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
1
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;
1
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>
</div>
</body>
</html>
Actividad:
Ejercicio 4
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 en la que se
muestra la página web visualizada en tres dispositivos con diferentes resoluciones de pantalla:
1
Esta página posee un diseño adaptable con tres puntos de ruptura:
 Hasta 600 px: un diseño a una columna.

 A partir de 600 px y hasta 1200 px: un diseño a dos columnas.
 A partir de 1200 px: un diseño a tres columnas.
 Fíjate bien en las capturas de pantalla e intenta lograr el mismo resultado.
Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que
necesites. También puedes añadir etiquetas <div> para definir elementos contenedores en la
página.
Código Base
<!DOCTYPE html>
<html>
<head>
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
1
<body>
<h1>Curriculum Vitae de Bruce Wayne</h1>
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del

Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>
</body>
</html>
1
Solución
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-

scale=1.0" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>
#formacion li, #experiencia li {
color: #00F;
#formacion li strong, #experiencia li strong {
color: #000;
@media (min-width: 1201px) {
#datos {
float: left;
width: 30%;
#curriculo {
float: left;
width: 70%;
}
1
#formacion {
float: left;
width: 50%;
#experiencia {
float: left;
width: 50%;
@media (min-width: 601px) and (max-width: 1200px) {
body {
font-family: Arial,sans-serif;
#datos {
float: left;
width: 30%;
#curriculo {
float: left;
width: 70%;
}
1
#datos ul {
padding: 0;
#datos li + li {
margin-top: 10px;
#datos li strong {
display: block;
@media (max-width: 600px) {
body {
font-family: Arial,sans-serif;
h1 {
font-size: 1.5em;
h2 {
font-size: 1.2em;
1
border-bottom: 1px solid #000;
ul {
padding: 0;
li + li {
margin-top: 10px;
li strong {
display: block;
</style>
</head>
<body>
<h1>Curriculum Vitae de Bruce Wayne</h1>
<div id="datos">
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>

1
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
</div>
<div id="curriculo">
<div id="formacion">
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del

Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
</div>
<div id="experiencia">
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>
</div>
</div>
</body>
</html>
1
Actividad:
6. BIBLIOGRAFIA:
 Joyanes, L. and Zahonero, I., 2008. Estructura De Datos En Java. 1st ed. España:
MacGraw Hill, pp.62-67.
 Fager, J., Pantoja, W., Villacrés, M., Páez, L., Ochoa, D., & Cuadros, E.
(2014). Estructuras de datos (1st ed., pp. 14). Comunidad Latinoamericana de Objetos
de Aprendizaje (LACLO): Iniciativa Latinoamericana de Libros de Texto abiertos (LATIn).
 Big O notation. (2020). Retrieved 10 November 2020, from
https://en.wikipedia.org/wiki/Big_O_notation
 Definición de algoritmo — Definicion.de. (2020). Retrieved 3 November 2020, from
https://definicion.de/algoritmo/
 Recursion in Java - Javatpoint. (2020). Retrieved 9 November 2020, from
https://www.javatpoint.com/recursion-in-java
 Tipos de Datos Primitivos en Java. (2020). Retrieved 27 October 2020, from
http://www.manualweb.net/java/tipos-datos-primitivos-java/
 Diferencia entre tipos primitivos y tipos de referencia en Java. (2020). Retrieved 27
November 2020, from https://es.scribd.com/document/352376157/Diferencia-Entre-
Tipos-Primitivos-y-Tipos-de-Referencia-en-Java
 Marco de colecciones de Java. (2020). Retrieved 10 November 2020, from
https://www.instintoprogramador.com.mx/2019/12/marco-de-colecciones-de-
java.html
 Understanding Big-O Notation With JavaScript, Retrieved 10 November 2020, from
https://dev.to/b0nbon1/understanding-big-o-notation-with-javascript-25mc
 Understanding Big O Space Complexity, Retrieved 10 November 2020, from
https://medium.com/datadriveninvestor/understanding-big-o-space-complexity-
6826478e5a9f
1

LS2 Daw

Cargado por

Información del documento

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

LS2 Daw

Cargado por

Copyright:

Formatos disponibles

FACULTAD DE CIENCIAS INFORMÁTICAS

DESARROLLO DE APLICACIONES WEB

PROFESOR: PhD(c) Luis Fernando Aguas Bucheli

 Adquirir los conceptos básicos relacionados con CSS

3. OBJETIVOS DE DESARROLLO SOSTENIBLE:

Partes principales del CSS

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

/* Todos los parrafos de la pagina */

/* Todos los párrafos contenidos en #primero */

/* Todos los enlaces la pagina */

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la pagina */

/* Elementos "span" contenidos en .normal */

<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec

<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient

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

/* Todos los parrafos de la pagina */

/* Todos los prrafos contenidos en #primero */

/* Todos los enlaces la pagina */

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la pagina */

/* Elementos "span" contenidos en .normal */

 Haga el ejercicio en Notepad++ y adjunte el resultado

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

h1#titulo { color: teal; }

strong { color: red; }

h2#subtitulo { color: blue; }

span.especial { color: purple; }

div#adicional p { color: olive; }

div#adicional span#especial { color: fuchsia; }

caption { color: blue; }

 Haga el ejercicio en Notepad++ y adjunte el resultado

Captura de pantalla del ejercicio

Las características del diseño de esta página son:

<meta charset="utf-8" />

<title>HTML &amp; CSS: Curso práctico avanzado</title>

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<li>Título: HTML &amp; 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>

Aunque los inicios de Internet se remontan a los años sesenta,

Todas las páginas están internamente construidas con la misma

Este libro es adecuado para cualquiera que tenga interés en

<h2>Contenido del libro</h2>

El contenido de este libro se estructura en tres apartados bien

<li>En la primera parte del libro se trabajan conceptos

<li>En la segunda parte se trabaja HTML. Partiendo de la

<li>En la tercera y última parte se explica CSS, el lenguaje que

<meta charset="utf-8" />

<title>HTML &amp; CSS: Curso práctico avanzado</title>

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<li>Título: HTML &amp; 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>

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

Aunque los inicios de Internet se remontan a los años sesenta,

Todas las páginas están internamente construidas con la misma

Este libro es adecuado para cualquiera que tenga interés en

<h2>Contenido del libro</h2>

<title>HTML & CSS: Curso práctico avanzado</title>

<h1>HTML & CSS: Curso práctico avanzado</h1>

<li>Título: HTML & CSS: Curso práctico avanzado</li>

<title>HTML & CSS: Curso práctico avanzado</title>

<h1>HTML & CSS: Curso práctico avanzado</h1>

<li>Título: HTML & CSS: Curso práctico avanzado</li>