Guía 03: HTML - Etiquetas semáticas, multimedia y formularios

Guía 03: HTML - Etiquetas semáticas, multimedia y formularios#

Actividades previas#

Diseño#

  1. Decida el contexto de uso para un formulario, una imagen, un video y un mapa en su CV, considerando la guía de diseño del contenido de un CV.

  2. Escoja las secciones en su documento index.html en las que colocará el formulario, la imagen, el video y el mapa.

Ambiente de desarrollo#

  1. Acceda a su proyecto curriculum en Codespaces o en su máquina local.

  2. Revise la documentación para crear o cambiar de rama en Codespaces.

  3. Haga clic en el ícono de Live Preview en la barra de estado de VSCode para iniciar el servidor local.

Actividades en clases#

Etiquetas de semántica contenedoras#

  1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para generar una recomendación del uso de etiquetas de semántica contenedoras HTML.

    Consejo

    En el contexto de un sitio web con un curriculum vitae, genera las etiquetas HTML5 semánticas contenedoras adecuadas con tres testimonios de personas para la que usted ha trabajado. Cada testimonio debe contener una frase, un párrafo con el nombre de la persona, su cargo y una breve descripción de su experiencia laboral con usted. Incluya la referencia en el menu de navegación.

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la documentación sobre las etiquetas semánticas en HTML5 Semantic Elements.

Etiquetas de semántica de texto#

  1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para obtener las recomendaciones de etiquetas semántica de texto HTML, para:

    1. Un párrafo, con un enlace a un sitio web.

    2. Una lista ordenada de elementos.

    3. Una lista no ordenada de elementos.

    4. Una tabla sin bordes, con al menos tres filas y tres columnas. La primera fila y la primera columna debe contener los encabezados de la tabla.

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la información sobre las etiquetas semánticas de texto en Etiquetas semánticas de texto.

Etiquetas multimedia#

  1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para obtener una recomendación de las etiquetas HTML, para los siguientes elementos multimedia:

    1. Un mapa de Google Maps.

    2. Una imagen con el placeholder de Picsum o Placehold.

    3. Un video de YouTube (incluya la URL).

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la documentación de Cómo crear un mapa con Leaflet, ¿Qué es y para qué sirve un Placeholder de imagen? y ¿Cómo insertar vídeos de YouTube en nuestra web (HTML)? mediante etiquetas HTML.

Etiquetas de formularios#

  1. Utilice un cliente de IAG, en el contexto de su currículum vitae, para obtener una recomendación de etiquetas HTML, para incluir un formulario que contenga, al menos, un elemento para ingresar un texto en una línea, un elemento con una lista desplegable, un conjunto de opciones de selección única, un vector de valores de selección múltiple, un elemento para un área de texto y un botón para enviar el formulario. No utilice la etiqueta <br>.

  2. Compruebe la vista previa del resultado en el navegador.

  3. Revise la documentación con los atributos de la etiqueta form.

Versionamiento#

  1. Versione local y remotamente la(s) rama(s) de desarrollo en el repositorio curriculum.

  2. Revise la documentación para levantar una solicitud de cambios en Codespaces.

  3. Compruebe el resultado en el navegador.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Contenido