✅ Como crear una pagina web completa en HTML - Parte 1

Summary

En este video, se enseña cómo crear una página web básica utilizando HTML. Comienza con la creación de la estructura de la página, incluyendo un encabezado con un menú de navegación, una sección principal con una imagen y un artículo. Además, se muestra cómo agregar múltiples párrafos dentro del artículo y cómo organizar los contenidos utilizando etiquetas adecuadas. Aunque aún no se han agregado estilos CSS, se mencionan planes para mejorar la apariencia visual en futuras lecciones, incluyendo la creación de un pie de página (footer) más adelante. Este tutorial está dirigido a principiantes que desean aprender HTML paso a paso.

Takeaways

• 😀 Se está creando una página web simple, utilizando los conocimientos adquiridos en HTML a lo largo del curso.
• 😀 La página comienza con un archivo HTML denominado 'index.html' y un título personalizable en el encabezado.
• 😀 Se usa una etiqueta <div> con la clase 'contenedor' para envolver todo el sitio y centrar el contenido.
• 😀 Se crea un menú de navegación utilizando una lista desordenada (<ul>) con enlaces (<a>) para las secciones: Inicio, Acerca de, Producto y Contacto.
• 😀 Los enlaces en el menú de navegación están configurados temporalmente con un '#' como marcador de lugar.
• 😀 El diseño básico de la página se crea primero sin CSS, solo con HTML, lo que hace que el menú de navegación sea simple y sin estilo.
• 😀 Se agrega una sección 'main' en la que se incluye una imagen, que inicialmente está demasiado grande, pero será estilizada más tarde con CSS.
• 😀 Se crea una sección de 'posteos' con artículos que contienen encabezados y párrafos para el contenido textual.
• 😀 Los artículos se agregan dentro de una etiqueta <article>, con un título (h2) y varios párrafos de texto.
• 😀 Si se quisiera agregar más artículos, simplemente se copiaría y pegaría la estructura de un artículo ya creado.
• 😀 El pie de página (footer) se deja pendiente para ser añadido en un futuro video debido a que el contenido ya se está volviendo largo.

Q & A

¿Cuál es el propósito de la etiqueta 'div' con clase 'contenedor' en el código?

La etiqueta 'div' con clase 'contenedor' se utiliza para abarcar todo el sitio web y centrar la página, asegurando que se vea bien y de manera ordenada en la vista del usuario.

¿Por qué se utiliza una lista desordenada en el menú de navegación?

Se utiliza una lista desordenada para estructurar el menú de navegación, ya que facilita la organización de los elementos y permite colocar enlaces sin viñetas, que se ocultarán más tarde con CSS.

¿Qué se debe hacer para agregar más artículos en la sección de publicaciones?

Para agregar más artículos en la sección de publicaciones, simplemente se debe copiar y pegar la etiqueta 'article' y su contenido. Esto creará un nuevo artículo con la misma estructura.

¿Cómo se maneja la imagen que se agrega a la página?

Se agrega una imagen dentro de un 'div' con la clase 'imagen'. Aunque inicialmente la imagen puede ser demasiado grande, se le dará estilo más adelante con CSS para ajustar su tamaño y disposición.

¿Qué tipo de contenido se encuentra dentro del artículo en el código?

Dentro del artículo se encuentra un encabezado de nivel 2 ('h2') con el título del artículo y varios párrafos ('p') con contenido de texto, en este caso un fragmento de texto simulado (Lorem Ipsum).

¿Por qué el enlace de los elementos del menú tiene un valor '#' en lugar de una URL?

El valor '#' se usa temporalmente en los enlaces del menú para que no redirijan a ninguna parte, ya que en este momento no se han especificado URLs de destino, solo se está construyendo la estructura básica del sitio.

¿Qué importancia tiene la etiqueta 'header' en el código?

La etiqueta 'header' es fundamental para agrupar y estructurar la sección superior del sitio, que incluye el menú de navegación, lo que permite una organización clara y una experiencia de usuario mejorada.

¿Cómo se planea mejorar el diseño visual de la página web?

El diseño visual se mejorará más adelante con CSS, donde se eliminarán las viñetas del menú, se alinearán los elementos como 'inicio', 'acerca de', 'producto' y 'contacto', y se ajustarán otros aspectos visuales como la imagen y los textos.

¿Por qué se menciona que el pie de página (footer) se dejará para otro video?

El pie de página no se cubre en este video porque el tutorial está enfocándose en la creación de la estructura básica de la página. El footer se agregará en un video futuro para no hacer el tutorial demasiado largo.

¿Cómo se estructura el 'main' en la página web?

El 'main' es la sección central de la página y contiene elementos importantes como la imagen principal y las publicaciones (artículos). Dentro de 'main', se crea un 'div' para la imagen y otra sección para los artículos del blog.