Tu primera página HTML

1. Introducción

¡Bienvenido a Fundamentos de HTML! HTML es el lenguaje estándar que se usa para construir la estructura de cada sitio web en internet. En esta lección, crearás tu primera página web armando el esqueleto básico y esencial de un documento HTML.

2. Idea principal

Todas las páginas web necesitan una estructura base para funcionar correctamente. Piensa en esta estructura como los cimientos y la estructura de una casa: antes de decorar paredes o poner muebles, necesitas una base sólida y bien organizada.

3. Partes clave

<!DOCTYPE html>

Qué es: Una declaración especial que se coloca al inicio del archivo.
Por qué importa: Asegura que el navegador muestre tu página correctamente.
Explicación: Le dice al navegador: "¡Hola, estoy usando la versión moderna estándar de HTML!".

<html>

Qué es: El contenedor raíz.
Por qué importa: Funciona como el gran envoltorio de todo tu sitio.
Explicación: Todo el código que escribas irá dentro de este elemento.

<head>

Qué es: El centro de control de la información oculta.
Por qué importa: Guarda detalles importantes que necesita el navegador, no contenido visible para el usuario.
Explicación: Nada dentro de esta sección se muestra en la página final; aquí van cosas como el título de la pestaña del navegador.

<body>

Qué es: El área principal de visualización.
Por qué importa: Aquí viven tu texto, imágenes y botones interactivos.
Explicación: Todo lo que pongas dentro de esta etiqueta será contenido visible para tus visitantes.

4. Ejemplo

Se puede editar

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primera página web</title>
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Bienvenido a mi sitio nuevo.</p>
  </body>
</html>

5. Explicación del ejemplo

<!DOCTYPE html>: Define el estándar para que el navegador sepa que usamos HTML moderno.
<html>: Inicia el contenedor principal del documento HTML.
<head>: Abre la sección oculta reservada para información interna del navegador.
<title>: Define el texto que aparece en la pestaña superior del navegador como "Mi primera página web".
</head>: Cierra la sección oculta.
<body>: Abre la sección del contenido visible.
<h1> y <p>: Muestran un título grande en negrita y un párrafo normal en pantalla.
</body> y </html>: Indican el final del contenido visible y el final de toda la página.

6. Pruébalo tú

¡Ahora te toca escribir código! Cambia el texto dentro de <title> por tu nombre, y luego añade un segundo párrafo <p> justo debajo del primero dentro de <body>.

7. Editores online gratuitos para practicar

Puedes practicar HTML directamente en tu navegador con estas herramientas gratuitas:

8. Resumen

HTML es la base estructural de la web.
<head> contiene datos invisibles para el navegador, mientras que <body> contiene el contenido visible para el usuario.
Toda página válida necesita una declaración <!DOCTYPE html> y un contenedor raíz <html> para mantener todo organizado.