Ejercicios básicos.
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>
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 “Cantante favorito”.
• El texto "Cantante favorito" como encabezado de nivel 1.
• El texto "Biografía" como encabezado de nivel 2.
• Todas las siglas, su nombre deben aparecer como texto destacado.
• Los nombres de sus éxitos, deben aparecer como texto enfatizado.
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>
Enunciado
Crear una página web con la siguiente estructura…… el tema es libre.
el mismo aspecto que la siguiente imagen:
5
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:
Enunciado
Diseñar la tabla periódica de los elementos.
