Tabla de Contenidos

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Usando etiquetas, puedes estructurar el contenido que ves en los sitios web. Desde párrafos hasta imágenes y formularios, HTML organiza cómo se presentan los elementos en el navegador.
En este tutorial, aprenderás la estructura básica de un documento HTML y cómo crear tu primera página web.

Estructura básica de un documento HTML

Un documento HTML tiene una estructura bien definida. Aquí están los elementos esenciales:
  • <!DOCTYPE html>: Indica que el documento sigue las reglas de HTML5.
  • <html>: El contenedor principal que envuelve todo el contenido de la página.
  • <head>: Contiene metadatos sobre la página, como el título y enlaces a archivos CSS.
  • <body>: Todo el contenido visible en el navegador se coloca dentro de esta etiqueta.

Ejemplo básico de un documento HTML:

html

[html]

<!DOCTYPE html>
<html>

<head>
<title>Mi Primera Página Web</title>
</head>

<body>
<h1>¡Hola Mundo!</h1>
<p>Este es mi primer intento de crear una página web usando HTML.</p>
</body>

</html>

[/html]

Explicación del código:

<!DOCTYPE html>: Le dice al navegador que este archivo está en formato HTML5.
<html>: La etiqueta raíz que contiene todo el código HTML.
<head>: Dentro del head, puedes agregar metadatos como el título (<title>), que se mostrará en la pestaña del navegador.
<body>: Aquí es donde irá el contenido visible de tu página, como los encabezados, párrafos, imágenes, etc.
<h1>: Un encabezado de nivel 1, el título principal de la página.
<p>: Un párrafo que describe el contenido de tu página.

Pasos para crear tu primera página HTML

Sigue estos sencillos pasos para crear tu primera página web:
  1. Abrir un editor de texto: Puedes usar cualquier editor como Notepad, Sublime Text, o VS Code.
  2. Escribir el código HTML: Copia el ejemplo de código anterior en un archivo nuevo.
  3. Guardar el archivo: Guarda el archivo con la extensión .html (por ejemplo, index.html).
  4. Abrir el archivo en un navegador: Haz doble clic en el archivo guardado o ábrelo desde un navegador (Chrome, Firefox, etc.).
Al hacer esto, verás el contenido de tu archivo HTML reflejado en la pantalla del navegador. El título aparecerá en la pestaña del navegador y el texto «¡Hola Mundo!» será visible en el cuerpo de la página.

¿Qué sigue?

Ahora que entiendes la estructura básica, en los próximos tutoriales aprenderemos a agregar más tipos de contenido a tu página, como imágenes, listas y enlaces. ¡Con HTML, las posibilidades son infinitas!

Desafío para el lector

  1. Cambia el texto dentro de las etiquetas <h1> y <p> para personalizar tu página web.
  2. Añade más párrafos o encabezados a tu página.
  3. Experimenta con cambiar el título de la página (<title>) y observa cómo se refleja en la pestaña del navegador.

Felicidades

Has aprendido la estructura básica de un documento HTML y cómo crear tu primera página web. Entender la estructura de HTML es esencial para construir proyectos más grandes. En el siguiente blog, profundizaremos en más etiquetas importantes y elementos como imágenes y enlaces.
¿Estás listo para llevar tu conocimiento de HTML al siguiente nivel? ¡Sigue nuestro curso paso a paso y conviértete en un experto en diseño web con HTML!