¿Qué es HTML 5?
HTML5 (HyperText Markup Language, versión 5) es el lenguaje básico de la WWW (World Wide Web) y su funcionamiento es dar estructura a una página web y a su contenido.
Básicamente con HTML le indicas al navegador de que trata tu contenido a traves de etiquetas HTML, puedes indicar si es una imagen, un título, una lista, una tabla, etc.
¿Cómo crear un documento HTML?
Es tan fácil como crear un archivo de texto ‘nombre.txt’ y renombrarlo como ‘nombre.html’, sin embargo en esta guía ocuparemos VSCode para ir aprendiendo a la par como funciona.
Descarga e Instala 👇(Disponible para MacOS, Windows y Linux)
https://code.visualstudio.com/
Una vez que lo hayamos descargado hay que abrirlo y realizar los siguiente:
Guardamos el archivo como “index.html” (Puedes ponerle cualquier otro nombre) en el escritorio o en la carpeta que prefieras.
¿Qué es una etiqueta HTML?
Las etiquetas HTML son la sintaxis que escribiremos en un archivo con la extensión ‘.html’ y sirven para indicarle al navegador que es lo que queremos mostrar al abrir nuestro archivo en el navegador.
Una etiqueta HTML sigue la siguiente estructura:
<etiqueta de inicio atributo>contenido</etiqueta de cierre>Sin embargo hay algunas variaciones las cuales veremos más adelante.
Una etiqueta HTML puede contener Atributos:
- Los atributos describen información adicional sobre la etiqueta
- Cada atributo se debe especificar en la etiqueta de inicio.
- Un atributo se puede escribir como nombre=”valor” y en algunos casos solo el nombre, por ejemplo:
<html lang="es">contenido</html>Donde lang es el nombre y “es” es el valor.
Comenzando nuestra primera página web
Para indicarle al navegador que nuestro archivo contiene código HTML hay que hacer uso de la etiqueta !Doctype y la etiqueta html.
Siguiendo la estructura anterior de las etiquetas escribiremos 👇.
La etiqueta <!DOCTYPE html> le indica al navegador que escribiremos código html.
La etiqueta <html lang=”es”></html> indica que crearemos una estructura HTML dentro de ella y el contenido será en español.
Ahora vamos a definir una estructura base para una página web:
Para nuestra estructura necesitamos un Encabezado, un Cuerpo y un Pie de Página dentro de la etiqueta <html></html> que ya creamos, HTML tiene unas etiquetas perfectas para ello:
- Encabezado:
<head></head>- Cuerpo:
<body></body>- Pie de Página
<footer></footer>Por lo tanto tendríamos algo así:
<!DOCTYPE html>
<html lang="es"> <head></head> <body></body> <footer></footer></html>
La etiqueta <head></head> puede contener el título de nuestra página, metadata sobre el nombre del autor, la descripción de la página y más, sin embargo, esta etiqueta tiene la función únicamente de ser informativa, es decir, a pesar de ya tener información, no hemos puesto ninguna etiqueta que muestre algo en pantalla.
Para definir la información anterior podemos agregar la etiqueta <meta> dentro de <head></head> para agregar información.
- Título
<title>Mi Página Web</title>- Metadata
Como meta solo contiene atributos no es necesario indicar una etiqueta de cierre.
<meta charset="UTF-8"><meta name="description" content="Sígueme en Twitter: @YJDev_"><meta name="author" content="YJDev">
Por lo tanto nos quedaría algo así:
<head>
<meta charset="UTF-8"> <meta name="description" content="Sígueme en Twitter: @YJDev_"> <meta name="author" content="YJDev"> <title>Mi Primera Web</title></head>
Agregando Contenido al Cuerpo de la Página
Dentro de la etiqueta <body></body> es donde agregaremos todo el contenido que queremos mostrar en nuestra página.
En este caso agregaremos un Titulo, un Párrafo y un Link.
- Titulo
HTML nos ofrece distintos tipos de tamaños para el titulo (H1, H2,H3, H4, H5 Y H6) donde entre menor sea el número, mayor será el tamaño de la letra.
<h1>Hello World!</h1>- Párrafo
Para el párrafo hay una etiqueta <p></p> la cual indica que agregaremos un contenido de tipo párrafo.
<p>Sígueme en Twitter: @YJDev</p>- Link
En este caso, para agregar un link hay que ocupar la etiqueta anchor <a href=””>contenido</a>. Esta etiqueta agregará un link al contenido el cual nos redireccionara a la dirección que este dentro del atributo href.
<a href="https://twitter.com/YJDev_">Link a mi cuenta de twitter</a>Finalizando con el Pie de Página
El pie de página al igual que el <body> muestran elementos en el contenido de la página web, sin embargo, al ser el pie de página lo ideal es solo tener información extra al contenido importante, por ejemplo, podemos tener el texto de copyright, links a otras partes de la página, políticas de privacidad, etc.
En este caso agregaremos de ejemplo un mensaje de Copyright , dentro de la etiqueta <footer> podemos ocupar los mismos elementos que ocupamos en el body.
<p>Copyright 2021 YJDev</p>Y listo! Ahora es momento de visualizar todo lo que escribimos 🎉👏
Para hacer esta basta con Guardar y abrir el archivo index.html (o el nombre que le hayas puesto) y dar “click derecho” , seleccionar “abrir con” para indicar con cual navegador queremos abrir el archivo, en mi caso seleccionaré Google Chrome.
Lo lograste! no te preocupes por no recordar cada una de las etiquetas HTML, con la práctica te las aprenderás. 👏🚀
Para pofundizar te recomiendo esta página web, podrás encontrar más etiquetas HTML y más atributos que podrás utilizar para darle una mejor estructura a tu página.
Link: https://www.w3schools.com/html/html_intro.asp
¿Quieres ser un Front End Developer?
Te recomiendo leer este post 👇
