Guía 02

DAWM / Proyecto01

Objetivo general

Justificar el uso de etiquetas HTML en la estructura general y de etiquetas semánticas 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

• Decida el contenido de su CV, puede considerar la recomendación de ChatGPT o la recomendación de Bard.
• Diseñe 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.

Github

• Cree un repositorio en GitHub con el nombre curriculum.

Actividades en clases

1. Clone localmente tu repositorio curriculum.

Estructura general y semántica

1. Cree el documento HTML index.html dentro del directorio de tu proyecto.

2. Utilice VSCode para editar el documento index.html, con:

   • La estructura general sugerida por Bard.

     Obligatorio: Use de la etiqueta <title> y las etiquetas <meta> (para keywords, description y author), de acuerdo con la sugerencia de Gemini.

   • La estructura semántica sugerida por Bard.

     Obligatorio: Utilice 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>).

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

Despliegue en GitHub

1. Despliegue el sitio del repositorio curriculum de acuerdo con la referencia de Bard.
2. (STOP 2) Compruebe el resultado en el navegador.

Documentación

• Descripción del estándar de HTML:
  • Completa en el HTML Living Standard de la W3C,
  • Resumida en Mozilla Developer Network, y
  • Específica con las etiquetas más utilizadas en Cheat sheet.
• Soporte dinámico para el uso de etiquetas de hipertexto:
  • En el navegador actual, en HTML5 Test.
  • Para diversas versiones de navegadores, en Can I Use.
  • Anidamiento de etiquetas, en Can I Include.

Fundamental

• ¿Cómo funciona la web? en Mozilla Developer Network - MDN

• SEO (Search Engine Optimization) en X

Semantic HTML elements play a crucial role in improving website SEO and its accessibility.

Replacing non-semantic elements makes code more readable and maintainable.

HTML Semantic Elements:
→ Carry inherent meanings;
→ Make web content more Structured;
→ More Meaningful.… pic.twitter.com/O18NI5L8XD

— Deepanshu Sharma (@deepanshusharmx) September 30, 2023

Términos

HTML, hipertexto, VSCode, etiquetas, W3C, estándar, estructura general, estructura semántica, meta, title, link, etiquetas de semántica de texto.

Referencias

• HTML Standard. (2023). Retrieved 15 May 2023, from https://html.spec.whatwg.org/multipage/
• HTML: Lenguaje de etiquetas de hipertexto MDN. (2021). Retrieved 18 May 2022, from https://developer.mozilla.org/es/docs/Web/HTML
• HTML5. Ejemplo de estructura global para página web con HTML5. (2022). Retrieved 18 May 2022, from http://www.edu4java.com/es/web/html5-estructura-global.html
• Conceptos básicos de HTML - Aprende sobre desarrollo web MDN. (2020). Retrieved 18 May 2022, from https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
• Todos los ELEMENTOS SEMÁNTICOS de HTML. (2022). Retrieved 18 May 2022, from https://www.kikopalomares.com/blog/todos-los-elementos-semanticos-de-html
• HTML, E. (2022). Etiquetas HTML - Acerca de HTML. Retrieved 18 May 2022, from https://acercadehtml.com/etiquetas-html.html