Scribd
Cargar
65 vistas

Codigo HTML APRENDICES

Este documento presenta varios ejercicios para crear páginas web utilizando diferentes elementos como listas, tablas, enlaces, formularios y controles de HTML5. Incluye código base y requisitos para cada ejercicio, así como imágenes que muestran el aspecto esperado de las páginas web resultantes.

Cargado por

Liliana Patricia Osorio Alvarez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
65 vistas

Codigo HTML APRENDICES

Este documento presenta varios ejercicios para crear páginas web utilizando diferentes elementos como listas, tablas, enlaces, formularios y controles de HTML5. Incluye código base y requisitos para cada ejercicio, así como imágenes que muestran el aspecto esperado de las páginas web resultantes.

Cargado por

Liliana Patricia Osorio Alvarez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

Ejercicios - Listas 1

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 - Listas 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 Curriculum Vitae de Bruce Wayne.
 El resto de la estructura de la página debes deducirlo a partir de la imagen
proporcionada.

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 - 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=tsd
ec450&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>

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>
</body>
</html>

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

También podría gustarte