Scribd
Cargar
29 vistas79 páginas

Ejercicios de HTML PARA PRACTICA

El documento presenta una serie de ejercicios prácticos de HTML que incluyen la creación y corrección de páginas web basadas en enunciados específicos. Los ejercicios abarcan desde la incorporación de encabezados y enlaces hasta la creación de formularios y tablas, enfatizando el uso correcto de etiquetas HTML. Cada ejercicio incluye un código base y requisitos específicos para guiar al estudiante en la práctica del lenguaje de marcado.

Cargado por

MarianaFernández
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
29 vistas79 páginas

Ejercicios de HTML PARA PRACTICA

El documento presenta una serie de ejercicios prácticos de HTML que incluyen la creación y corrección de páginas web basadas en enunciados específicos. Los ejercicios abarcan desde la incorporación de encabezados y enlaces hasta la creación de formularios y tablas, enfatizando el uso correcto de etiquetas HTML. Cada ejercicio incluye un código base y requisitos específicos para guiar al estudiante en la práctica del lenguaje de marcado.

Cargado por

MarianaFernández
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 79

Ejercicios de HTML

Ejercicios - Conceptos básicos 1


Enunciado
En el código base que se te proporciona debes realizar los siguientes cambios:
 Las siglas HTML deben aparecer como texto destacado en toda la
página.
 Tim Berners-Lee debe aparecer como texto enfatizado en toda la página.
 Debes añadir el siguiente contenido:
o Un encabezado de nivel 1 con el texto "HTML" antes de "HTML
son las siglas de..."
o Un encabezado de nivel 2 con el texto "Historia de HTML" antes
de "Los inicios del lenguaje HTML..."
o Un encabezado de nivel 2 con el texto "Versiones de HTML"
antes de dos nuevos párrafos que contienen el texto "Tim
Berners-Lee definió la primera versión de HTML en el año 1991" y
"En la actualidad, la última versión de HTML es HTML5".
El resultado final debe ser una página web que tenga el mismo aspecto que la
siguiente imagen:

Código base
<!DOCTYPE html>
<html>
<head>
<title>El título de la página</title>
</head>
<body>
<p><strong>HTML</strong> son las siglas de <em>HyperText Markup
Language</em>, que puede traducirse como lenguaje de marcas o marcado de
hipertexto.
</p>

<p>El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver
el código HTML de una página web, la opción exacta cambia de un navegador
a otro y también puede cambiar de una versión a otra de un mismo navegador,
pero suelen tener un nombre similar.
</p>

<p>HTML se compone de etiquetas que se escriben entre los símbolos menor


que y mayor que.</p>

<p>Los inicios del lenguaje HTML se remontan al año 1990, cuando Tim
Berners-Lee creó la primera página web.</p>

</body>
</html>

Ejercicios - Conceptos básicos 2


Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga
el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Tim Berners-Lee.
 El texto "Tim Berners-Lee" como encabezado de nivel 1.
 El texto "Biografía" como encabezado de nivel 2.
 Todas las siglas, como HTTP, W3C o MIT deben aparecer como texto
destacado.
 Los nombres de las instituciones o empresas, como Consorcio de la
World Wide Web o Universidad de Oxford, deben aparecer como texto
enfatizado.

Código base
Tim Berners-Lee
Sir Timothy "Tim" John Berners-Lee (Londres, Reino Unido, 8 de junio de 1955)
es un científico de la computación británico, conocido por ser el padre de la
Web. Estableció la primera comunicación entre un cliente y un servidor usando
el protocolo HTTP en noviembre de 1989. En octubre de 1994 fundó el
Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y
estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la
Web y que permiten el funcionamiento de Internet.
Biografía
Nació en el sudoeste de Londres en 1955. Sus padres eran matemáticos y
formaron parte del equipo que construyó el Manchester Mark I (una de las
primeras computadoras). Durante el tiempo que estuvo en la universidad,
construyó una computadora con una soldadora, circuitos TTL, un procesador
Motorola 68000 y un televisor viejo. Se graduó en física en 1976 en el Queen's
College de la Universidad de Oxford. Conoció a su primera esposa en este
periodo. En 1978, trabajó en D.G. Nash Limited (también en Poole) escribió un
sistema operativo.
Desarrollo de su carrera
Berners-Lee trabajó en el CERN desde junio hasta diciembre de 1980. Durante
ese tiempo, propuso un proyecto basado en el hipertexto para facilitar la forma
de compartir y la puesta al día de la información entre investigadores. En este
periodo también construyó un programa llamado Enquire que no llegó a ver la
luz.
Después de dejar el CERN, en 1980, se fue a trabajar a la empresa de John
Poole Image Computer Systems Ltd., pero regresó al CERN otra vez en 1984.
En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-
Lee vio la oportunidad de unir Internet y el hipertexto (HTTP y HTML), de lo que
surgiría la World Wide Web. Desarrolló su primera propuesta de la Web en
marzo de 1989, pero no tuvo mucho eco, por lo que en 1990 y con la ayuda de
Robert Cailliau, hicieron una revisión que fue aceptada por su gerente, Mike
Sendall. Usó ideas similares a las que había usado en el sistema Enquire para
crear la World Wide Web, para esto diseñó y construyó el primer navegador
(llamado WorldWideWeb y desarrollado con NextStep) y el primer servidor web
al que llamó httpd (HyperText Transfer Protocol daemon).
Fuente: Wikipedia

Ejercicios 3
Enunciado
Corrige los errores que presenta el código base que se te proporciona.
Código base
<html lang=es>
<head>
<title>World Wide Web</title>
</head>
<body>
<h1>World Wide Web</h1>
<p>
En informática, la <strong><em>World Wide Web</strong></em> (WWW) o
Red informática mundial comúnmente conocida como la web, es un sistema de
distribución de documentos de hipertexto o hipermedios interconectados y
accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web
compuestos de páginas web que pueden contener texto, imágenes, vídeos u
otros contenidos multimedia, y navega a través de esas páginas usando
hiperenlaces.
<h2>Historia</h2>
<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés
Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en
el CERN en Ginebra, Suiza, y publicado en 1992.
</p>
<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo
de estándares web (como los lenguajes de marcado con los que se crean las
páginas web), y en los últimos años ha abogado por su visión de una web
semántica.
</p>
<p>Fuente: <em>Wikipedia</p></em>
</html>

Ejercicios 4
Enunciado
Corrige los errores que presenta el código base que se te proporciona. También
pueden existir ciertas cosas que no están mal, pero que se pueden hacer
mejor.
Código base
<html>
<head>
<title>World Wide Web</title>
</head>
<body>
<h1>World Wide Web</h1>
<p>
En inform&aacute;tica, la <strong><em>World Wide Web</em></strong>
(WWW) o Red inform&aacute;tica mundial com&uacute;nmente conocida como
la web, es un sistema de distribuci&oacute;n de documentos de hipertexto o
hipermedios interconectados y accesibles v&iacute;a Internet. Con un
navegador web, un usuario visualiza sitios web compuestos de p&aacute;ginas
web que pueden contener texto, im&aacute;genes, v&iacute;deos u otros
contenidos multimedia, y navega a trav&eacute;s de esas p&aacute;ginas
usando hiperenlaces.
</p>
<h3>Historia</h3>
<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990 por el inglés
Tim Berners-Lee con la ayuda del belga Robert Cailliau mientras trabajaban en
el CERN en Ginebra, Suiza, y publicado en 1992.
</p>
<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo
de estándares web (como los lenguajes de marcado con los que se crean las
páginas web), y en los últimos años ha abogado por su visión de una web
semántica.
</p>
<p>
Una frase famosa de Tim Berners-Lee es:
</p>
<blockquote>
<p>
There is only one web.
</p>
</blockquote>
<p>Fuente: <em>Wikipedia</em></p>
</html>

Ejercicios 5
Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga
el mismo aspecto que la siguiente imagen:
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Curriculum Vitae de Bruce Wayne.
 El resto de la estructura de la página debes deducirlo a partir de la
imagen proporcionada.
Código base
Currículo Vitae de Bruce Wayne

Datos personales
Nombre completo: Bruce Wayne
Fecha de nacimiento: 1/5/1939
Lugar de nacimiento: Gotham City

Formación académica
1956-1961: Universidad del Espantapájaros
1952-1956: Instituto de Dos Caras
1944-1952: Escuela Primaria del Joker

Experiencia laboral
1975-1985: En el paro
1965-1975: Cazavillanos y demás chusma
1962-1965: Aprendiz de superhéroe
Ejercicios - Enlaces
Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga
el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:


 El título de la página debe ser Los tres pilares de la Web.
 Los enlaces que aparecen en la página deben tener los siguientes
destinos:
o Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee
o Web → http://es.wikipedia.org/wiki/World_Wide_Web
o HTML → enlace intradocumental al epígrafe HTML
o HTTP → enlace intradocumental al epígrafe HTTP
o URL → enlace intradocumental al epígrafe URL
o Fuente: HTML → http://es.wikipedia.org/wiki/HTML
o Fuente: HTTP →
http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
o Fuente: URL →
http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme
Consejo: para comprobar que los enlaces intradocumentales funcionan
correctamente, aumenta el tamaño o zoom de la página con "Control +"
Código base
Los tres pilares de la Web
Tim Berners-Lee es considerado el padre de la Web porque desarrolló los tres
elementos básicos para el funcionamiento de la Web:
HTML
HTTP
URL
HTML
HTML, siglas de HyperText Markup Language, hace referencia al lenguaje de
marcado para la elaboración de páginas web. Es un estándar que sirve de
referencia para la elaboración de páginas web en sus diferentes versiones,
define una estructura básica y un código (denominado código HTML) para la
definición de contenido de una página web, como texto, imágenes, entre otros.
Es un estándar a cargo de la W3C, organización dedicada a la estandarización
de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su
escritura e interpretación. Es el lenguaje con el que se definen las páginas web.
Fuente: HTML, Wikipedia
HTTP
Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de
hipertexto) es el protocolo usado en cada transacción de la World Wide Web.
HTTP fue desarrollado por el World Wide Web Consortium y la Internet
Engineering Task Force, colaboración que culminó en 1999 con la publicación
de una serie de RFC, el más importante de ellos es el RFC 2616 que especifica
la versión 1.1.
Fuente: HTTP, Wikipedia
URL
Un localizador de recursos uniforme o URL —siglas en inglés de Uniform
Resource Locator— es un identificador de recursos uniforme (URI) cuyos
recursos referidos pueden cambiar, esto es, la dirección puede apuntar a
recursos variables en el tiempo. Están formados por una secuencia de
caracteres, de acuerdo a un formato modélico y estándar, que designa recursos
en una red, como Internet.
Fuente: URL, Wikipedia
Ejercicios - Listas 1
Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga
el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:


 El título de la página debe ser Curriculum Vitae de Bruce Wayne.
 El resto de la estructura de la página debes deducirlo a partir de la
imagen proporcionada.

Código base
Curriculum Vitae de Bruce Wayne

Datos personales
Nombre completo: Bruce Wayne
Fecha de nacimiento: 1/5/1939
Lugar de nacimiento: Gotham City

Formación académica
1956-1961: Universidad del Espantapájaros
1952-1956: Instituto de Dos Caras
1944-1952: Escuela Primaria del Joker

Experiencia laboral
1975-1985: En el paro
1965-1975: Cazavillanos y demás chusma
1962-1965: Aprendiz de superhéroe
Ejercicios - Listas 2
Enunciado
Debes crear una página web que tenga el mismo aspecto que la siguiente
imagen:

Selecciona para cada lista el mejor tipo de lista.

Ejercicios - Formularios 1
Enunciado
Crea una página web que contenga un formulario con los siguientes campos de
información:
 El nombre, con un control de tipo texto.
 Los apellidos, con un control de tipo texto.
 El sexo, con dos opciones excluyentes hombre o mujer.
 El correo electrónico, con un control de tipo texto.
 Una casilla de verificación con el texto "Deseo recibir información sobre
novedades y ofertas".
 Una casilla de verificación con el texto "Declaro haber leido y aceptar las
condiciones generales del programa y la normativa sobre protección de
datos".
 Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Formulario de registro - Mi web.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "".
 La longitud máxima de entrada de datos de los controles para el nombre
y los apellidos debe ser 50 caracteres.
 La casilla de verificación con el texto "Deseo recibir información sobre
novedades y ofertas" debe estar activada por defecto.
Debes crear una página web que tenga el mismo aspecto que la siguiente
imagen:

Ejercicios - Formularios 2
Enunciado
En la actividad anterior se te proponía realizar el siguiente formulario:

Crea una página web que contenga un formulario con los siguientes campos de
información:
 El nombre, con un control de tipo texto.
 Los apellidos, con un control de tipo texto.
 El sexo, con dos opciones excluyentes hombre o mujer.
 El correo electrónico, con un control de tipo texto.
 Una casilla de verificación con el texto "Deseo recibir información sobre
novedades y ofertas".
 Una casilla de verificación con el texto "Declaro haber leido y aceptar las
condiciones generales del programa y la normativa sobre protección de
datos".
 Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Formulario de registro - Mi web.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "".
 La longitud máxima de entrada de datos de los controles para el nombre
y los apellidos debe ser 50 caracteres.
 La casilla de verificación con el texto "Deseo recibir información sobre
novedades y ofertas" debe estar activada por defecto.

Al formulario anterior le tienes que añadir los siguientes campos de


información:
 Población, una lista desplegable con las opciones Alicante, Madrid,
Sevilla y Valencia.
 Descripción, un área de texto multilínea.
Además, tienes que asociar la etiqueta de cada control a su control para
mejorar la usabilidad y la accesibilidad.
Debes crear una página web que tenga el mismo aspecto que la siguiente
imagen:
Ejercicios - Tablas 1
Enunciado
A partir del texto que se te proporciona, debes crear una página web que tenga
el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:


 El destino del enlace Índice de desempleo anual es la página web:
http://epp.eurostat.ec.europa.eu/tgm/table.do?
tab=table&init=1&language=en&pcode=tsdec450&plugin=1
Nota: en el código base que se te proporciona vas a encontrar una etiqueta
nueva, la etiqueta <style>. Esta etiqueta permite introducir instrucciones de
CSS (Cascading Style Sheets) en una página web. CSS se emplea para definir
la presentación visual de una página web y se explica en la segunda parte de
este curso. Las instrucciones que se han incluido tienen como objetivo que la
tabla y las celdas de la tabla se muestren con un borde. Esto también se podría
haber logrado con el atributo border de HTML, pero es mejor utilizar siempre
CSS para todo lo relacionado con la presentación de una página web.
Código base
<!DOCTYPE html>
<html>
<head>
<title>Desempleo</title>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

El desempleo en España

La siguiente tabla muestra la evolución del desempleo en España, comparado


con la media de los 27 países de la Unión Europea, Grecia, que compite con
España en ser el primero en esta vergonzosa competición y Estados Unidos y
Japón, dos de las primeras economías mundiales.

País
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013

UE (27 países)
8.9
8.7
9
9.1
9.3
9
8.2
7.2
7
9
9.6
9.6
10.4
10.8

España
11.9
10.6
11.5
11.5
11
9.2
8.5
8.2
11.3
17.9
19.9
21.4
24.8
26.1
Grecia
11.2
10.7
10.3
9.7
10.6
10
9
8.4
7.8
9.6
12.7
17.9
24.5
27.5

Estados Unidos
4
4.8
5.8
6
5.5
5.1
4.6
4.6
5.8
9.3
9.6
8.9
8.1
7.4

Japón
4.7
5
5.4
5.3
4.7
4.4
4.1
3.9
4
5.1
5.1
4.6
4.3
4

Fuente: Índice de desempleo anual, Eurostat

</body>
</html>

Ejercicios - Tablas 2
Enunciado
Debes crear una página web que tenga el mismo aspecto que la siguiente
imagen:
Nota: en el código base que se te proporciona vas a encontrar una etiqueta
nueva, la etiqueta <style>. Esta etiqueta permite introducir instrucciones de
CSS (Cascading Style Sheets) en una página web. CSS se emplea para definir
la presentación visual de una página web y se explica en la segunda parte de
este curso. Las instrucciones que se han incluido tienen como objetivo que la
tabla y las celdas de la tabla se muestren con un borde. Esto también se podría
haber logrado con el atributo border de HTML, pero es mejor utilizar siempre
CSS para todo lo relacionado con la presentación de una página web.
Código base
<!DOCTYPE html>
<html>
<head>
<title>Tabla compleja</title>
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
Categoría Etiquetas

Formulario
form
button
input
select
textarea

Tabla
table
tr
th
td
caption

Texto
b
em
i
strong
sub
sup
</body>
</html>

Ejercicios - Formularios (HTML5)


Enunciado
Crea una página web que contenga un formulario con los siguientes campos de
información:
 Nombre, con un control de tipo texto obligatorio y con autofoco.
 Correo electrónico, con un control de tipo email obligatorio.
 URL, con un control de tipo url que muestre la ayuda "Escribe la URL de
tu página web personal".
 Fecha, con un control de tipo date.
 Tiempo, con un control de tipo time.
 Fecha y hora, con un control de tipo datetime.
 Mes, con un control de tipo month.
 Semana, con un control de tipo week.
 Número, con un control de tipo number que limite la entrada a un valor
entre -10 y 10.
 Teléfono, con un control de tipo tel.
 Término de búsqueda, con un control de tipo search.
 Color favorito, con un control de tipo color.
 Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Formulario de prueba de HTML5.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "".
Nota: si al validar el código HTML de tu página web con el validador del W3C
se muestran mensajes de advertencia como The date input type is not
supported in all browsers. Please be sure to test, and consider using a
polyfill. no te preocupes, el validador te está avisando de que lleves cuidado al
usar una característica de HTML5 que no está admitida por todos los
navegadores actuales.
Nota: por lo anterior, cuando realices esta actividad y compruebes cómo se
visualiza tu página web en distintos navegadores es muy probable que
obtengas diferentes resultados.
Debes crear una página web que tenga el mismo aspecto que la siguiente
imagen:
EJERCICIOS DE CSS

Ejercicios - Cómo se usa 1


Enunciado
A partir de la página web que se te proporciona, debes emplear el
atributo style para crear una página web que tenga el mismo aspecto que la
siguiente imagen:
Tienes que tener en cuenta los siguientes requisitos:
 El texto principal:
o El color del texto es azul: #00F.
o El color de fondo del texto es verde claro: #CFC.
o El tipo de letra es la secuencia: Georgia, Cambria, serif.
o El tamaño del texto: 16px.
 El encabezado de nivel 1:
o El color del texto es rojo claro: #F00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
o El tamaño del texto: 32px.
 El encabezado de nivel 2:
o El color del texto es rojo claro: #A00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
o El tamaño del texto: 24px.
 El color de los campos de los datos del libro es verde oscuro: #060.
 El texto "Internet" y la "Web" cuando actúan como sustantivos:
o El tamaño del texto: 20px.
o Texto en negrita.
 El texto "Hypertext Markup Language", "Cascading Style Sheets" y los
acrónimos "HTML" y "CSS":
o El color del texto es blanco: #FFF.
o El color de fondo del texto es negro: #000.
o Texto en cursiva.
Consejo: puedes utilizar las etiquetas de HTML <em> y <strong>.
Consejo: puedes utilizar la etiqueta de HTML <span> para aplicar un estilo CSS
a cualquier parte del texto.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>

Ejercicios - Cómo se usa 2


Enunciado
A partir de la página web que se te proporciona, debes emplear la
etiqueta <style> para crear una página web que tenga el mismo aspecto que la
siguiente imagen:

Tienes que tener en cuenta los siguientes requisitos:


 El texto principal:
o El color del texto es azul: #00F.
o El color de fondo del texto es verde claro: #CFC.
o El tipo de letra es la secuencia: Georgia, Cambria, serif.
o El tamaño del texto: 16px.
 El encabezado de nivel 1:
o El color del texto es rojo claro: #F00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
o El tamaño del texto: 32px.
 El encabezado de nivel 2:
o El color del texto es rojo claro: #A00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
o El tamaño del texto: 24px.
 El color de los campos de los datos del libro es verde oscuro: #060.
 El texto "Internet" y la "Web" cuando actúan como sustantivos:
o El tamaño del texto: 20px.
o Texto en negrita.
 El texto "Hypertext Markup Language", "Cascading Style Sheets" y los
acrónimos "HTML" y "CSS":
o El color del texto es blanco: #FFF.
o El color de fondo del texto es negro: #000.
o Texto en cursiva.
Consejo: puedes utilizar las etiquetas de HTML como <span>, <em> y <strong>
para aplicar un estilo CSS a cualquier parte del texto.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>
Ejercicios - Cómo se usa 3
Enunciado
A partir de la página web que se te proporciona, debes emplear la
etiqueta <link> para crear una página web que tenga el mismo aspecto que la
siguiente imagen:

El fichero con las reglas CSS se debe llamar estilos.css.


Tienes que tener en cuenta los siguientes requisitos:
 El texto principal:
o El color del texto es azul: #00F.
o El color de fondo del texto es verde claro: #CFC.
o El tipo de letra es la secuencia: Georgia, Cambria, serif.
o El tamaño del texto: 16px.
 El encabezado de nivel 1:
o El color del texto es rojo claro: #F00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
o El tamaño del texto: 32px.
 El encabezado de nivel 2:
o El color del texto es rojo claro: #A00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
o El tamaño del texto: 24px.
 El color de los campos de los datos del libro es verde oscuro: #060.
 El texto "Internet" y la "Web" cuando actúan como sustantivos:
o El tamaño del texto: 20px.
o Texto en negrita.
 El texto "Hypertext Markup Language", "Cascading Style Sheets" y los
acrónimos "HTML" y "CSS":
o El color del texto es blanco: #FFF.
o El color de fondo del texto es negro: #000.
o Texto en cursiva.
Consejo: puedes utilizar las etiquetas de HTML como <span>, <em> y <strong>
para aplicar un estilo CSS a cualquier parte del texto.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>

/******************************/
/* Escribe aquí el código CSS */
/******************************/

Ejercicios - Selectores 1
Enunciado
A partir de la página web que se te proporciona, debes añadir los selectores a
las reglas CSS para aplicar los estilos deseados y crear una página web que
tenga el mismo aspecto que la siguiente imagen:
Cada regla CSS incluye un comentario en el que se explica los elementos a los
que debe aplicarse.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
/* Todos los elementos de la pagina */
{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}

/* Todos los parrafos de la pagina */


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

/* Todos los enlaces la pagina */


{
color: #C30;
}

/* Los elementos <em> contenidos en #primero */


{
color: #0000BB;
background-color: #FFFFCC;
}

/* Todos los elementos <em> con la clase "especial" en toda la pagina */


{
color: #FFFF00;
background: #000000;
}

/* Todos los elementos <span> contenidos en la clase "normal" */


{
font-weight: bold;
}
</style>
</head>

<body>
<div id="primero">
<p>
<a href="http://publicacionesaltaria.com/es/tienda/112-html-css-curso-
practico.html">HTML &amp; CSS: Curso práctico avanzado</a>
</p>

<p>
Aunque los inicios de <a
href="https://es.wikipedia.org/wiki/Internet">Internet</a> 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
<em>páginas complejas, con contenidos dinámicos que provienen de bases de
datos y que son visitadas por miles de usuarios al mismo tiempo</em>.
</p>
</div>

<div id="segundo" class="normal">


<p>
Todas las páginas están internamente construidas con la misma tecnología,
con el <em class="especial">Lenguaje de marcas de hipertexto</em>
(<span>Hypertext Markup Language</span>, <a
href="https://es.wikipedia.org/wiki/HTML">HTML</a>) y con las <em
class="especial">Hojas de estilo en cascada</em> (<span>Cascading Style
Sheets</span>, <a href="https://es.wikipedia.org/wiki/CSS">CSS</a>).
</p>

<p>
Este libro es <em>adecuado para cualquiera que tenga interés en aprender a
desarrollar sus propias páginas web</em>. 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>
</div>
</body>
</html>

Ejercicios - Selectores 2
Enunciado
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:

Puedes modificar el código HTML proporcionado para añadir los identificadores


y clases que necesites.
En la tabla se indican los nombres de los colores que debes emplear.
Debes intentar utilizar el mínimo número posible de reglas y selectores de CSS.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<table border="1">
<tr><td>teal</td><td>teal</td><td>teal</td></tr>
<tr><td>red</td><td>red</td><td>red</td></tr>
<tr><td>blue</td><td>blue</td><td>blue</td></tr>
<tr><td>orange</td><td>orange</td><td>orange</td></tr>
<tr><td>purple</td><td>purple</td><td>purple</td></tr>
<tr><td>olive</td><td>olive</td><td>olive</td></tr>
<tr><td>fuchsia</td><td>fuchsia</td><td>fuchsia</td></tr>
<tr><td>green</td><td>green</td><td>green</td></tr>
</table>
</body>
</html>

Ejercicios - Selectores 3
Enunciado
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 siguiente funcionamiento:
 En su estado normal, un enlace se muestra de color rojo y sin subrayado
(propiedad text-decoration).
 Cuando el usuario sitúa el cursor del ratón sobre un enlace, se invierten
los colores (el texto del enlace se muestra con color blanco sobre un
fondo rojo) y se muestra el subrayado.
 Cuando un enlace está activo, se muestra de color naranja y sin
subrayado.
 Cuando un enlace ha sido visitado, se muestra de color verde oscuro y
sin subrayado.
 Cuando un enlace tiene el foco del teclado, se muestra de color azul y
se muestra el subrayado.
Consejo: el orden de escritura de las reglas influye en el resultado final, ya que
un enlace puede estar en varios estados al mismo tiempo.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
</head>
<body>
<h1>Universidad de Alicante</h1>

<ul>
<li><a href="presentacion.html">Presentación</a></li>
<li><a href="estudios.html">Estudios</a></li>
<li><a href="alumnos.html">Alumnos</a></li>
<li><a href="deportes.html">Deportes</a></li>
<li><a href="servicios.html">Servicios</a></li>
</ul>
</body>
</html>
Importante: para que el estado de enlace visitado funcione, las páginas de
los enlaces deben existir para que se produzca el cambio de estado.

Ejercicios - Estilo lista 1


Enunciado
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:
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>Ejemplo de listas</title>
</head>
<body>
<p>Lista sin elemento gráfico:</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con círculos:</p>


<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con cuadrados:</p>


<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con números romanos:</p>


<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

<p>Lista con letras griegas:</p>


<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>

Ejercicios - Estilo lista 2


Enunciado
Crea una página web con un menú etiquetado con una lista que tenga el mismo
aspecto que la siguiente imagen:
En la imagen se muestra el efecto que se debe configurar cuando el cursor del
ratón se sitúe encima de un elemento del menú o cuando un elemento del
menú reciba el foco del teclado: se debe mostrar un borde sólido de color rojo.

Ejercicios - Modelo caja 1


Enunciado
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).
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 &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>

Ejercicios - Modelo caja 2


Enunciado
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, 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 &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>

Ejercicios - Maquetación diseño fijo


Enunciado
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:

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


 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 &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>

Ejercicios - Maquetación diseño elástico


Enunciado
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:
Las características del diseño de esta página son:
 Un diseño elástico centrado con un ancho de 60 em.
 El encabezado de nivel 1 centrado.
 El contenido principal de la página se organiza en dos columnas, una de
16 em de ancho y la otra el espacio restante de 44 em.
 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 &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>


<ul>
<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>
<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>

Ejercicios - Maquetación diseño líquido


Enunciado
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:

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


 Un diseño líquido centrado con un ancho del 80%.
 El encabezado de nivel 1 centrado.
 El contenido principal de la página se organiza en dos columnas, una de
25% de ancho y la otra el espacio restante de 75%.
 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 &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>
<h2>Datos del libro</h2>

<ul>
<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>
<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>
Ejercicios - Maquetación formulario 1
Enunciado
Crea una página web con un formulario que tenga el mismo aspecto que la
siguiente imagen:

En la imagen animada se muestra:


 El efecto que se debe configurar cuando el cursor del ratón se sitúe
encima de un control del formulario: se debe destacar con un fondo de
color rojo.
 El efecto que se debe configurar cuando un control del formulario reciba
el foco del teclado: se debe destacar con un fondo de color amarillo.
Además:
 Contenido de la página centrado.
 Título y subtítulo: tipo de letra Georgia, serif.
 Tipo de letra principal: Arial, Helvetica, sans-serif.
 Leyendas (legend) y etiquetas: negrita.
Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu
solución no se parezca a la solución que te proporcionamos.

Ejercicios - Maquetación formulario 2


Enunciado
Crea una página web con un formulario que tenga el mismo aspecto que la
siguiente imagen:

En la imagen animada se muestra:


 El efecto que se debe configurar cuando el cursor del ratón se sitúe
encima de una línea del formulario.
 El efecto que se debe configurar cuando un control del formulario reciba
el foco del teclado.
Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu
solución no se parezca a la solución que te proporcionamos.

Ejercicios - Selectores avanzados 1


Enunciado
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:
Debes utilizar los selectores avanzados para lograr que:
 La primera letra de un encabezado de nivel 2 se muestre con un tamaño
más grandes.
 El primer párrafo después de cada encabezado de nivel 2 tenga un
sangrado 2em en la primera línea.
 Al principio de un enlace se muestre la flecha "→".
 Después de una abreviatura se muestre el significado de la abreviatura.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li>Título: <a href="http://publicacionesaltaria.com/es/tienda/112-html-css-
curso-practico.html">HTML &amp; CSS: Curso práctico avanzado</a></li>
<li>Autor: <a href="http://sergiolujanmora.es/">Sergio Luján Mora</a></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 <a
href="https://es.wikipedia.org/wiki/Internet">Internet</a> se remontan a los
años sesenta, no ha sido hasta los años noventa cuando, gracias a la <a
href="https://es.wikipedia.org/wiki/World_Wide_Web">Web</a>, se ha
extendido su uso por todo el mundo. En pocos años, la <a
href="https://es.wikipedia.org/wiki/World_Wide_Web">Web</a> 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 <abbr title="Hypertext Markup
Language">HTML</abbr> y con las Hojas de estilo en cascada <abbr
title="Cascading Style Sheets">CSS</abbr>.
</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 <a
href="https://es.wikipedia.org/wiki/World_Wide_Web">Web</a>.
</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 <abbr title="Uniform
Resource Locator">URL</abbr> 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>
Ejercicios - Selectores avanzados 2
Enunciado
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 imagen anterior se muestra lo que debe ocurrir al situar el cursor del ratón
sobre una de las filas de datos de la tabla: el color de fondo de las celdas debe
cambiar a amarillo (#FFFF66).
Nota: busca en Internet las imágenes necesarias para representar los símbolos
de las diferentes monedas. Las imágenes las debes colocar como imágenes
decorativas desde CSS.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de selectores avanzados</title>
</head>
<body>
<table>
<tr>
<th>Cambio</th>
<th>Compra</th>
<th>Venta</th>
<th>Máximo</th>
<th>Mínimo</th>
</tr>
<tr>
<th class="euro">Euro/Dolar</th>
<td>1.25</td>
<td>1.25</td>
<td>1.25</td>
<td>1.24</td>
</tr>
<tr>
<th class="dolar">Dolar/Yen</th>
<td>119.01</td>
<td>119.05</td>
<td>119.82</td>
<td>119.82</td>
</tr>
<tr>
<th class="libra">Libra/Dolar</th>
<td>1.86</td>
<td>1.86</td>
<td>1.86</td>
<td>1.85</td>
</tr>
<tr>
<th class="yen">Yen/Euro</th>
<td>0.67</td>
<td>0.67</td>
<td>0.66</td>
<td>0.67</td>
</tr>
</table>
</body>
</html>

Ejercicios - Estilo texto 1


Enunciado
A partir de la página web que se te proporciona, debes crear una página web
que tenga el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:


 El tipo de letra de la página es Arial, con el tipo de respaldo Verdana.
 El encabezado de nivel 1 utiliza el tipo de letra Georgia, con un tamaño
de letra de 32 px y en versalitas.
 El encabezado de nivel 2 utiliza el tipo de letra Georgia, con un tamaño
de letra de 24 px, en cursiva y en versalitas.
 Los títulos de los elementos de las listas aparecen en negrita.
 El contenido de los elementos de las listas, aunque están etiquetados
como <strong>, no se visualizan en negrita.
Nota: no puedes modificar el código HTML de la página, sólo puedes añadir las
reglas CSS necesarias para lograr la presentación deseada.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<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>

Ejercicios - Estilo texto 2


Enunciado
A partir de la página web que se te proporciona, debes crear una página web
que tenga el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:


 El encabezado de nivel 1 debe aparecer centrado y en mayúsculas.
 El encabezado de nivel 2 debe aparecer en mayúsculas.
 El contenido etiquetado como <strong> debe aparecer subrayado.
Nota: no puedes modificar el código HTML de la página, sólo puedes añadir las
reglas CSS necesarias para lograr la presentación deseada.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<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>

Ejercicios - Estilo texto 3


Enunciado
A partir de la página web que se te proporciona, debes crear una página web
que tenga el mismo aspecto que la siguiente imagen:

Además, tienes que tener en cuenta los siguientes requisitos:


 El tipo de letra principal del texto debe ser Calibri. Como este tipo de
letra no está en todos los ordenadores, se debe definir como alternativa
los tipos de letra Arial, Helvetica y el tipo genérico sans-serif.
 El tipo de letra del encabezado de nivel 1 debe ser Cambria. El tipo
alternativo debe ser Times junto con el tipo genérico serif. El color del
texto debe ser #1F497D y el color del fondo #BFBFBF. El tamaño del
texto debe ser 24 px. El espaciado entre letras debe ser 0.5 em y el
espaciado entre palabras 1.5 em. Además, el encabezado de nivel 1
debe aparecer centrado y en mayúsculas.
 El tipo de letra del encabezado de nivel 2 es igual que el encabezado de
nivel 1. El color del texto debe ser #632423. El tamaño del texto debe
ser 18 px. El espaciado entre letras debe ser 0.5 em. Además, el
encabezado de nivel 2 debe aparecer en mayúsculas.
 El contenido de las listas debe aparecer en cursiva y en negrita. Sin
embargo, el contenido etiquetado como <strong> no debe aparecer en
negrita, pero debe aparecer en versalitas.
Nota: no puedes modificar el código HTML de la página, sólo puedes añadir las
reglas CSS necesarias para lograr la presentación deseada.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<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>

Ejercicios - Maquetación diseño adaptable 1


Enunciado
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:

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>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<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>

Ejercicios - Maquetación diseño adaptable 2


Enunciado
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:

Esta página posee un diseño adaptable con tres puntos de ruptura:


 Hasta 600 px: no se aplica un diseño a la página web.
 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.
Algunas pistas:
 Hasta 600 px: los datos del libro no se muestran en forma de lista, se
muestran todos juntos en una línea y separados por punto y coma.
 A partir de 600 px y hasta 1200 px: los apartados del contenido del libro
se muestran con un diseño a tres columnas.
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 &amp; CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<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>
<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>
Examen 1
1. Identifica el tipo de elemento, en línea o en bloque, que es cada uno:

Element En línea Bloque


o (inline) (block)

ul

h4

li

abbr

img

2. Describe dos usos o funciones que proporciona la declaración DOCTYPE en


una página web.
3. Dispones de dos páginas web, “inicio.html” y “contacto.html” y quieres crear
un enlace en “inicio.html” dirigido a “contacto.html” con el texto "Datos de
contacto". Escribe el código HTML necesario para crear ese enlace.
4. En el directorio “sitioweb” tienes la página web “inicio.html”. Dentro de esa
página quieres añadir un párrafo con el texto “Mis vacaciones en la playa:” y a
continuación, dentro de ese mismo párrafo, quieres incluir una imagen llamada
“foto.jpg” que se encuentra en el directorio “cosas” que se encuentra dentro de
“sitioweb”. Escribe el código HTML del párrafo.
5. Dentro de una página web quieres incluir un fragmento de un discurso de
una persona famosa. ¿Cuál es la etiqueta más apropiada para hacerlo?
6. Escribe el código HTML5 de un cuadro de texto de un formulario que debe
ser rellenado con los apellidos del usuario antes de que el formulario pueda ser
enviado al servidor.
7. Nombra tres tipos nuevos de controles tipo <input> en HTML5.
8. ¿Qué etiqueta de HTML5 se emplea para marcar una fecha?
9. Escribe el código HTML5 mínimo necesario para enlazar una hoja de estilo
externa.
10. ¿Qué error presenta el siguiente fragmento de HTML5?
<article>
<header>Umbrella Corporation</header>
<p>Article content</p>
<sidebar>Footnotes</sidebar>
</article>
11. Un párrafo tiene un tamaño de letra definido como 1.25em. Expresado
como un porcentaje, ¿cuánto más grande será el tamaño de letra de este
párrafo comparado con el resto de párrafos?
12. Escribe la regla CSS (selector y propiedades) necesaria para que todos los
párrafos de una página web aparezcan en cursiva.
13. Escribe la regla CSS (selector y propiedades) necesaria para que todos los
enlaces de una página web aparezcan:
 Con el color rojo cuando el cursor del ratón se sitúe encima de ellos.
 Con el color verde cuando el foco del teclado se sitúe en ellos.
14. Escribe la regla CSS (selector y propiedades) necesaria para que todos los
elementos de una lista que tenga la clase “importante” y que se encuentre
dentro de un contenedor <div> con la clase “destacado” aparezcan con el color
rojo.
15. ¿Qué error presenta el siguiente fragmento de CSS?
h1 {
font-face: Georgia, Cambria, sans-serif;
font-size: 24px;
}

p{
font-face: Arial, Verdana, Calibri, serif;
font-size: 16px;
}

También podría gustarte