Guía 02: HTML - Estructura global y estructura semántica

Guía 02: HTML - Estructura global y estructura semántica#

Actividades previas#

Diseño#

  1. Decide el contenido de su CV. Puedes considerar la recomendación de diseño para diseñar el contenido de un CV.

  2. Elije la estructura del contenido de su CV, p.e.: el orden de las secciones, título de cada sección, uso de listas numeradas o listas no numeradas de elementos, etc.

Ambiente de desarrollo#

  1. Cree un repositorio en GitHub con el nombre curriculum.

    1. Agregue un archivo README.md con el título de su curriculum y una breve descripción del objetivo de su proyecto.

    2. Seleccione la opción No .gitignore.

  2. Acceda al código de su proyecto curriculum:

    1. En el repositorio de GitHub: Haga clic en el botón Code, escoja la pestaña Codespaces y haga clic en el botón Create codespace on main, o

    2. Clone su proyecto en su máquina local.

  3. Revise la explicación en What is Github Codespaces, o consulte con su cliente de IAG, acerca de la definición y uso de GitHub Codespaces.

Extensión: Live Preview en VSCode#

  1. Acceda a la opción Extensión en la barra lateral izquierda (o presione Ctrl+Shift+X).

  2. Busque e instale la extensión Live Preview en el Marketplace de VSCode.

Actividades en clases#

HTML#

  1. Cree el documento HTML index.html en el directorio raíz de tu proyecto.

  2. Revise los Conceptos básicos de HTML en MDN Web Docs, o consulte con su cliente de IAG, acerca de la definición de HTML.

Servidor local y público#

  1. Habilite la opción Show Preview

    1. En View > Command Palette, busque y seleccione Live Preview: Show Preview (Internal Browser), o

    2. Haga clic en el icono de Show Preview junto al nombre del documento.

  2. Haga clic en la opción Convertir en Público y revise la URL en una nueva pestaña del navegador.

  3. Revise el sitio ¿Qué es un servidor WEB? en MDN Web Docs, o consulte con su cliente de IAG, acerca de la definición y uso de un servidor local y público.

Etiquetas HTML#

Estructura General#

  1. Utilice la guía para crear una página HTML con la estructura general para agregar la estructura general de su página.

    Nota: El sitio debe contener, como mínimo, la etiqueta <title> y las etiquetas <meta> (para keywords, description y author).

  2. Revise los cambios en el navegador con la extensión Live Preview de VSCode.

  3. Revise el sitio Estructura de un documento HTML en Manz.dev, o consulte con su cliente de IAG, acerca de la definición y uso de una estructura general HTML válida.

Estructura Semántica#

  1. Utilice la guía para crear una página HTML con la estructura semántica estructura semántica a su página.

    Nota: El sitio debe contener, como mínimo, 1 etiqueta <header>, 1 etiqueta <main>, 5 etiquetas <section>, 1 etiqueta <nav> y 1 etiqueta <footer>. El documento HTML debe contener un título (<h1>) con su nombre. Cada sección debe contener un subtítulo (<h2>).

  2. Revise los cambios en el navegador con la extensión Live Preview de VSCode.

  3. Revise el sitio Etiquetas semánticas de sección en Manz.dev, o consulte con su cliente de IAG, acerca de la definición y uso de una estructura semántica adecuada.

Versionamiento#

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

  2. Genere la(s) solicitud(es) de cambios (pull request) para la rama principal y apruebe los cambios.

Despliegue con GitHub Pages#

  1. Siga las instrucciones de la guía publicar la rama main con GitHub Pages para desplegar el sitio del repositorio curriculum con GitHub Pages.

  2. Compruebe el resultado en el navegador.

Conclusiones#

Actividades autónomas#

Recursos extras#

En redes:

Contenido