Ejercicios
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 - 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:
Tim Berners-Lee → http://es.wikipedia.org/wiki/Tim_Berners-Lee
Web → http://es.wikipedia.org/wiki/World_Wide_Web
HTML → enlace intradocumental al epígrafe HTML
HTTP → enlace intradocumental al epígrafe HTTP
URL → enlace intradocumental al epígrafe URL
Fuente: HTML → http://es.wikipedia.org/wiki/HTML
Fuente: HTTP → http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol
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 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.1
9.3
8.2
7.2
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.8
5.8
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.4
5.3
4.7
4.4
4.1
3.9
5.1
5.1
4.6
4.3
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
em
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.
Traducir (The date input type is not supported in all browsers. Please be sure to test, and consider
using a polyfill.)
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:
