Ejercicios prácticos de HTML5

Código HTML5

Utilizando HTML5 crea los documentos que se detallan a continuación, cada uno en un fichero diferente. No olvides validar dichos documentos en el W3C Validator para corregir los errores de sintaxis que puedan existir. Céntrate en el contenido y olvídate completamente del diseño (colores, márgenes, tamaños, bordes, etc.).

 

1.- Currículum Vitae

Información a incluir:

  • Imagen de cabecera que contenga el texto "Currículum Vitae" (puedes buscarla en Google Images).
  • 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.
  • 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.
  • 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.

Además, debe cumplir los siguientes requisitos:

  • Según el programa que utilices, establece el charset (Codificación de caracteres) a ISO-8859-1 o a UTF-8 dentro del <head> del documento.
  • Las imágenes que utilices deben estar descargadas en tu ordenador, no debes enlazarlas directamente desde Internet.
  • Los títulos de cada apartado de datos deben mostrarse con la etiqueta de cabecera 2 (<h2>) e incluir un ancla.
  • Debajo de la imagen de cabecera incluir un índice que mediante enlaces nos lleve directamente al ancla de cada apartado. 
  • Al final de cada apartado incluir un enlace con el texto Ir a inicio que nos lleve a la imagen de cabecera de nuevo.

 

2.- Horario instalaciones deportivas

Crea la siguiente tabla de actividades con las siguientes características:

  • Según el programa que utilices, establece el charset (Codificación de caracteres) a ISO-8859-1 o a UTF-8 dentro del <head> del documento.
  • Muestra el borde de las celdas pero no las colorees.
  • Incluye también las celdas vacías aunque en la imagen no aparezcan.
  • Para la primera fila utiliza la etiqueta th en las celdas.
  • Incluye el título "Horario de actividades" a la tabla utilizando la etiqueta caption.
  • El símbolo que aparece junto a los minutos no hay que incluirlo.

Horario

 

3.- Formulario de inscripción

Crea el contenido del siguiente formulario de alta en un servicio web con las siguientes características:

  • Según el programa que utilices, establece el charset (Codificación de caracteres) a ISO-8859-1 o a UTF-8 dentro del <head> del documento.
  • Una imagen con el logo. La imagen que utilices deben estar descargada en tu ordenador, no debe enlazarla directamente desde Internet.
  • Español será un desplegable con los idiomas Español e Inglés.
  • Día será un desplegable que contenga los números del 1 al 31.
  • Mes será un desplegable que contenga los meses de enero a diciembre.
  • Año será un desplegable que contenga este año y los tres anteriores.
  • El icono al final de Contraseña no hay que incluirlo.
  • El desplegable de Número de móvil sólo debe incluir la opción "+34E".
  • El texto del checkbox posee varios enlaces que hay que redirigir a http://www.ticarte.com.
  • ¡Disfruta de Tuenti! es un botón para enviar el formulario.

Formulario web

 

4.- Portal de noticias avanzado

General

  • Según el programa que utilices, establece el charset (Codificación de caracteres) a ISO-8859-1 o a UTF-8 dentro del <head> del documento.
  • Incluye tu propias imágenes e iconos que estarán descargadas en tu ordenador.

Estructura de capas

  • Dentro de "contenedor" incluye las capas "cabecera", "menu", "contenido" y "pie". 
  • La capa "contenido" incluirá las capas "columnaizquierda" y "columnaderecha".
  • La capa "columnaderecha" se dividirá en "recomendados" y "escribenos".
  • La capa "pie" se dividirá en cinco capas "lista".

Capa "cabecera"

Capa "menu"

  • El menú incluirá las opciones que se muestran en la imagen.
  • El menú se diseñará mediante una lista.
  • Los elementos del menú serán enlaces a "http://www.ticarte.com".

Capa "columnaizquierda"

  • Los iconos de "Síguenos" serán imágenes individuales, y cada una será un enlace a la red social correspondiente.

Capa "columnaderecha"

  • En el formulario "Mensaje" será un <textarea>. "Enviar" será un <input type="submit">.

Capa "pie"

  • Todas las capas "lista" utilizarán la misma clase.
  • "Subir" será un enlace (no una imagen ni un botón) que mediante un ancla subirá al inicio de la página.

Portal noticias CSS

Portal avanzado sin CSS

Archivos adjuntos: 

Licencia Creative Commons

Este artículo publicado en TicArte pertenece a Rafa Morales y está protegido bajo una Licencia Creative Commons.

Tags: 
Ir arriba