Ejercicios del tema 3 de Lenguaje de Marcas y Sistemas

de Gestión de la Información
Alumno: ………………………………………………………………….. Curso: 1º ASIR

Relación de ejercicios de HTML

1- Manejo de enlaces. Realiza una página web idéntica a la mostrada
en la imagen donde:
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
2- Manejo de listas. Realiza la siguiente página utilizando listas
(ordenadas, desordenadas y definición).

3- Realiza la siguiente tabla en HTML

Para que se vean las líneas, pon

en head lo siguiente:
<style>
table, tr, th, td {
border: 1px solid black;
}
</style>
4- Crea el siguiente formulario de la imagen

5- Currículum Vitae
Información a incluir:
• En el bloque header se incluirá una imagen de cabecera que contenga el texto "Currículum
Vitae" (puedes buscarla en Google Images).
• En el bloque nav tendrás una lista de enlaces en horizontal que permita ir a cada section
que definirás dentro con anclas.
• Cada uno de los apartados estará incluido en un bloque section que se identificará con un
id para los anclas. Las secciones que contiene son:
• Datos personales (nombre, apellidos, dirección, teléfono, correo electrónico): Utiliza
una lista de definición para mostrar los datos. Incluye una fotografía personal de tipo
carnet que quede a la izquierda del texto.
• Formación académica (estudios y cursos realizados): Utiliza una lista no ordenada
para mostrar los datos.
• Experiencia laboral (de cada trabajo incluir el período en el que se ha estado, el
nombre de la empresa y las funciones realizadas): Utiliza una lista ordenada para
mostrar los datos desde el más actual al más antiguo. Te puedes inventar el contenido
si no tienes experiencia.
• Otros datos de interés (disponibilidad de incorporación, vehículo propio, enlace a su
blog personal, etc.): Utiliza párrafos para mostrar los datos.
• Intenta que el contenido sea extenso para que se note el efecto de los anclas al
desplazarte sobre la página web. Puedes usar el texto Lorem ipsum…. como relleno
• El footer tendrá un conjunto de enlaces uno debajo de otro con:
 • Icono de Blogger que será el enlace a tu blog
• Icono de las redes sociales con enlace a Instagram, Twitter y Facebook (si no tienes,
usa el enlace a la web de inicio) (Usa iconos de FontAwesome)
• Icono de un sobre y que sea un enlace con la opción de escribirte un email
• Enlace de volver al principio del curriculum con ancla

Tienes toda libertad para poner más cosas que hemos visto en la unidad y se valorarán
positivamente. Eso sí, todo en HTML5, NADA de CSS.

6- Incluir medios multimedia en HTML5

Realiza el diseño de la siguiente imagen donde aparecen imágenes, audio, vídeo y una lista de
reproducción. Puedes usar para su elaboración los códigos vistos en clase.
Pautas a tener en cuenta en el diseño:
• En la estructura ten en cuenta que hay un header, main, sections (imágenes, audio, vídeo)
• Las imágenes tienen su caption y que cada una es de un formato diferente (png, jpeg, gif)
• En los audios, el primero de ellos tendrá autoplay y loop
• Los vídeos son de Youtube. Utiliza 3 con diferente extensión.

NOTA: No tienes que enviar nada a la tarea de Moodle, crea estos HTML en una
carpeta de actividadesHTML en tu rama y ya lo corregiré yo desde GITHUB.