Cómo usar etiquetas de HTML en la maquetación de una página web.

Cómo usar etiquetas de HTML en la maquetación de una página web.

HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje base para poder crear y estructurar nuestro contenido en la web, nos ayudará a colocar textos, imágenes, botones, etc. Debido a que estamos empezando en el desarrollo Frontend, comprender cómo utilizar las etiquetas HTML es fundamental para maquetar una página web de manera efectiva. En este tutorial, aprenderás paso a paso cómo usar algunas de las etiquetas HTML más comunes para estructurar y darle forma a tu página web.

Requisitos:

• Conocimientos básicos de HTML.
• Editor de código.
• Navegador web para visualizar tu trabajo.

**Paso 1: Configuración Inicial
**
Crear un nuevo archivo HTML: Abre tu editor de código y crea un archivo con el nombre index.html.
Estructura básica de HTML: En Visual Studio Code escribe html:5 y darle a la tecla de Enter, y tendrás la estructura básica de un archivo HTML.

<metacharset="“UTF-8”">
<metaname="“viewport”"content="“width=device-width,"initial-scale="1.0”">
<title>Documenttitle>

Paso 2: Añadir encabezado y título
Utilizarás la etiqueta

<header>para contener la sección del encabezado de tu página y la etiqueta

# Para el título principal.

# Bienvenido a Mi Página Web

Paso 3: Crear la navegación

Utilizaremos las etiquetas

<nav>para la sección de navegación y para listas

    *   [Inicio](#inicio)
    *   [Sobre mí](#sobre-mi)
    *   [Contacto](#contacto)
    ```

    **Paso 4: Creación de las secciones de contenido**
    Utilizarás la etiqueta `

## Inicio

Esta es la sección de inicio de mi página web.

## Sobre mí

Aquí encontrarás información sobre mí.

Paso 5: Añadir un pie de Página
Utilizarás la etiqueta `

© 2024 Mi Página Web. Tutorial Platzi.

 ```

**Paso 6: Revisar y probar**
Guardarás los cambios realizados una vez completado los pasos anteriores, y abrirás en tu navegador web para ver como se visualiza la estructura básica de tu página web. Puedes abrir directamente el archivo enla carpeta donde lo guardaste o en Visual Studio Code puedes darle a “Open with Live Server” (Debes tener instalada la extensión Live Server).

<meta charset="“UTF-8”">
<meta name="“viewport”" content="“width=device-width," initial-scale="1.0”">
<title>Mi Página Web</title>

<header>

# Bienvenido a Mi Página Web

</header>

<nav>

*   [Inicio](#inicio)

*   [Sobre mí](#sobre-mi)

*   [Contacto](#contacto)

</nav>

<section id="“inicio”">

## Inicio

Esta es la sección de inicio de mi página web.

</section>

<section id="“sobre-mi”">

## Sobre mí

Aquí encontrarás información sobre mí.

</section>

<footer>

© 2024 Mi Página Web. Tutorial Platzi.

</footer>

¡Felicidades! Has creado una estructura básica de una página web utilizando etiquetas HTML. Ahora puedes seguir explorando y aprendiendo más sobre otras etiquetas HTML y cómo estilizar tu página web con CSS. Lapráctica constante te ayudará a mejorar tus habilidades en el desarrollo Frontend. ¡Nunca pares de Aprender!