Guía 03

Guía 03

DAWM / Proyecto01

Objetivo general

Usar etiquetas HTML en contenido interactivo y multimedia mediante el desarrollo de un currículum vitae digital para la presentación de información profesional de manera organizada y accesible en línea.

Actividades previas

Diseño y Contenido

Actividades en clases

  1. Clone localmente tu repositorio curriculum.

Etiquetas multimedia

  1. Consulte con ChatGPT o Gemini con alguna recomendación para el uso de etiquetas multimedia (una imagen y un video) y un mapa a incluir en alguna de las secciones de su página HTML. Considere el siguiente prompt:

    Como desarrollador de aplicaciones web, genera la etiqueta multimedia para incrustar una imagen en un documento HTML. Utiliza un placeholder de https://placehold.co/ como URL. Genera la etiqueta multimedia para incrustar un video local o un video de Youtube en un documento HTML. Genera la etiqueta para incrustar un mapa con Leaflet - https://leafletjs.com/ y un mapa de Google en un documento HTML.

  2. Agregue las etiquetas sugeridas en el paso anterior dentro las secciones (<section>) adecuadas en el archivo index.html.

    Obligatorio: Utilice al menos un (1) elemento multimedia y al menos un (1) mapa. No utilice la etiqueta <br>.

  3. (STOP 1) Compruebe el resultado en el navegador.
  4. Versione local y remotamente el repositorio curriculum.

Etiquetas de formularios

  1. Diseñe un formulario (<form>), con campos de entrada (<input>, <select> y <textarea>), con etiquetas (<label>) y con botones (<button>) de acuerdo con las indicaciones de Gemini.

  2. Agregue las etiquetas sugeridas en el paso anterior dentro una sección (<section>) del archivo index.html.

    Obligatorio: Utilice al menos un (1) formulario, con un (1) input, un (1) select y un (1) radiobutton. No utilice la etiqueta <br>.

  3. (STOP 2) Compruebe el resultado en el navegador.
  4. Versione local y remotamente el repositorio curriculum.

Etiquetas de semántica de texto

  1. Edite las secciones pertinentes del documento index.html, con:

    • Las etiquetas de semántica de texto <p>, <ul>, <ol>, <table> y <a>, de acuerdo con la sugerencia de Gemini.

      Obligatorio: Utilice las etiquetas de semántica de texto al menos una vez en las secciones del documento HTML.

  2. (STOP 3) Compruebe el resultado en el navegador.
  3. Versione local y remotamente el repositorio curriculum.

Documentación

Fundamental

Términos

etiquetas contenedores, multimedia, imagenes, videos, formulario

Referencias