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:
**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 WebPaso 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ónde 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).
<metacharset="“UTF-8”"><metaname="“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><sectionid="“inicio”">## Inicio
Esta es la sección de inicio de mi página web.
</section><sectionid="“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!
