Ejercicios Practicos html5

Ejercicios HTML prácticos
1- Básico
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>
2-Básico No 2
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ática, la <strong><em>World Wide Web</em></strong>
(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.
</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>
3-Básico No 3
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

4-Enlaces
Enunciado
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
Fuente: URL, Wikipedia

5- Listas
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.

6-Formularios 1 (HTML5)
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.
 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.
imagen:
7-Formularios 2 (html5)
Enunciado
En la actividad anterior se te proponía realizar el siguiente formulario:
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".
 El título de la página debe ser Formulario de registro - Mi web.
 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.
imagen:
8-Formularios 3 (HTML5)
Enunciado
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.
 El título de la página debe ser Formulario de prueba de HTML5.

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.
imagen:
9-Tablas No 1
Enunciado
 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&lan
guage=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>
10- Tablas No 2
Enunciado
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
i
strong sub sup
</body>
</html>

Ejercicios Practicos html5

Cargado por

Copyright:

Formatos disponibles

Ejercicios Practicos html5

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

Ejercicios Practicos html5

Cargado por

Copyright:

Formatos disponibles

Ejercicios HTML prácticos

<h1>World Wide Web</h1>

<h1>World Wide Web</h1>

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

 El título de la página debe ser Curriculum Vitae de Bruce Wayne.

Curriculum Vitae de Bruce Wayne

Nombre completo: Bruce Wayne

Fecha de nacimiento: 1/5/1939

Lugar de nacimiento: Gotham City

1956-1961: Universidad del Espantapájaros

1952-1956: Instituto de Dos Caras

1944-1952: Escuela Primaria del Joker

1965-1975: Cazavillanos y demás chusma

1962-1965: Aprendiz de superhéroe

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 tres pilares de la Web

Tim Berners-Lee es considerado el padre de la Web porque

Fuente: HTML, Wikipedia

Hypertext Transfer Protocol o HTTP (en español protocolo de

Fuente: HTTP, Wikipedia

Un localizador de recursos uniforme o URL —siglas en inglés de Uniform Resource

Fuente: URL, Wikipedia

Selecciona para cada lista el mejor tipo de lista.

 El nombre, con un control de tipo texto.

 El título de la página debe ser Formulario de registro - Mi web.

 Nombre, con un control de tipo texto obligatorio y con autofoco.

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

 El título de la página debe ser Formulario de prueba de HTML5.

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

 El destino del enlace Índice de desempleo anual es la página web:

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

Nota: en el código base que se te proporciona vas a encontrar una etiqueta

table, tr, th, td

{ border: 1px solid

También podría gustarte