HTML: Introducción y entorno

Descubre los conceptos básicos y el entorno necesario para empezar a crear páginas web con HTML de forma sencilla y estructurada.

Aprende HTML GRATIS y certifícate

Introducción y entorno HTML

HTML (HyperText Markup Language) es el lenguaje fundamental para la creación de páginas web. Funciona como el esqueleto que da estructura a todo el contenido que vemos en internet. En este módulo, exploraremos los conceptos básicos de HTML y configuraremos nuestro entorno de trabajo para comenzar a desarrollar páginas web.

¿Qué es HTML?

HTML es un lenguaje de marcado que define la estructura y el contenido de las páginas web mediante etiquetas. Estas etiquetas indican al navegador cómo debe mostrar la información. A diferencia de los lenguajes de programación, HTML no tiene lógica condicional ni bucles; su función principal es organizar y presentar contenido.

Las características principales de HTML son:

  • Es la base estructural de cualquier página web
  • Utiliza un sistema de etiquetas para definir elementos
  • Es interpretado por los navegadores web
  • Trabaja en conjunto con CSS (para estilos) y JavaScript (para interactividad)

Evolución de HTML

HTML ha evolucionado significativamente desde su creación:

  • HTML 1.0: La versión inicial con funcionalidades básicas
  • HTML 4.01: Incorporó formularios y tablas más avanzados
  • XHTML: Versión más estricta basada en XML
  • HTML5: La versión actual, con soporte para multimedia, gráficos y mejor semántica

Actualmente trabajamos con HTML5, que introdujo nuevas etiquetas semánticas como <header>, <footer>, <section> y <article>, además de soporte nativo para audio y video.

Herramientas necesarias

Para comenzar a desarrollar en HTML, necesitamos un entorno de trabajo básico que consiste en:

1. Editor de código

Un buen editor de código facilita enormemente el desarrollo web. Algunas opciones populares son:

  • Visual Studio Code: Editor gratuito y potente con excelente soporte para HTML
  • Sublime Text: Ligero y rápido
  • Atom: Personalizable y con buena integración con Git
  • Brackets: Diseñado específicamente para desarrollo web

Visual Studio Code es altamente recomendado por sus extensiones útiles como:

  • Live Server (para previsualizar páginas)
  • HTML Snippets (para autocompletar código)
  • Prettier (para formatear código)

2. Navegadores web

Es importante probar nuestro código en diferentes navegadores para asegurar la compatibilidad. Los más utilizados son:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Safari

Las herramientas de desarrollo integradas en estos navegadores (DevTools) son fundamentales para depurar nuestro código HTML.

3. Sistema de control de versiones

Aunque no es estrictamente necesario para empezar, Git es una herramienta valiosa para el seguimiento de cambios en nuestros proyectos:

  • Permite mantener un historial de modificaciones
  • Facilita la colaboración con otros desarrolladores
  • Servicios como GitHub o GitLab ofrecen almacenamiento en la nube para nuestros proyectos

Estructura básica de un documento HTML

Todo documento HTML sigue una estructura estándar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML document.</p>
</body>
</html>

Analicemos cada parte:

  • <!DOCTYPE html>: Declara el tipo de documento como HTML5
  • <html>: El elemento raíz que contiene todo el documento
  • <head>: Contiene metadatos e información sobre el documento
  • <meta charset="UTF-8">: Define la codificación de caracteres
  • <meta name="viewport">: Optimiza la visualización en dispositivos móviles
  • <title>: Define el título que aparece en la pestaña del navegador
  • <body>: Contiene todo el contenido visible de la página

Creando tu primera página web

Vamos a crear un ejemplo sencillo paso a paso:

1. Crear un archivo HTML

Primero, crea un archivo con extensión .html. Puedes nombrarlo index.html, que es el nombre estándar para la página principal de un sitio web.

2. Escribir la estructura básica

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
</head>
<body>
    <header>
        <h1>John Doe</h1>
        <p>Web Developer</p>
    </header>
    
    <section>
        <h2>About Me</h2>
        <p>I am a passionate web developer learning HTML, CSS and JavaScript.</p>
    </section>
    
    <section>
        <h2>My Skills</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
        </ul>
    </section>
    
    <footer>
        <p>Contact me at: john@example.com</p>
    </footer>
</body>
</html>

3. Guardar y abrir en el navegador

Guarda el archivo y ábrelo con tu navegador preferido. Verás una página web simple pero funcional.

Buenas prácticas en HTML

Al trabajar con HTML, es importante seguir estas buenas prácticas:

  • Utiliza etiquetas semánticas que describan el significado del contenido
  • Mantén una indentación adecuada para mejorar la legibilidad del código
  • Usa nombres descriptivos para clases e IDs
  • Asegúrate de que tu código sea accesible para personas con discapacidades
  • Valida tu HTML con herramientas como el W3C Validator

Recursos adicionales

Para profundizar en tu aprendizaje de HTML, puedes consultar:

  • MDN Web Docs: Documentación completa y actualizada
  • W3Schools: Tutoriales interactivos y referencias
  • CodePen: Plataforma para experimentar con código HTML, CSS y JavaScript
  • FreeCodeCamp: Cursos gratuitos con ejercicios prácticos

Organización de archivos en un proyecto web

A medida que tus proyectos crezcan, es importante mantener una estructura organizada:

proyecto/
│
├── index.html          # Página principal
├── pages/              # Otras páginas
│   ├── about.html
│   └── contact.html
│
├── css/                # Archivos de estilos
│   └── styles.css
│
├── js/                 # Scripts de JavaScript
│   └── main.js
│
└── images/             # Imágenes
    ├── logo.png
    └── background.jpg

Esta estructura facilita la navegación y el mantenimiento del proyecto a largo plazo.

Validación y depuración

Cuando trabajamos con HTML, es común encontrar errores. Para identificarlos y corregirlos:

  • Utiliza las herramientas de desarrollo del navegador (F12 o Clic derecho > Inspeccionar)
  • Verifica la consola para mensajes de error
  • Usa el inspector de elementos para examinar la estructura de tu página
  • Valida tu código con el W3C Validator para asegurar que cumple con los estándares

Con estos conocimientos básicos, estás listo para comenzar tu viaje en el desarrollo web con HTML. En las próximas lecciones, profundizaremos en las diferentes etiquetas y sus aplicaciones para crear páginas web más complejas y funcionales.

Empezar curso de HTML

Lecciones de este módulo de HTML

Lecciones de programación del módulo Introducción y entorno del curso de HTML.

Introducción A La Web Y Cómo Funciona

Entorno Para Desarrollar Html

Introducción A Html

Ejercicios de programación en este módulo de HTML

Evalúa tus conocimientos en Introducción y entorno con ejercicios de programación Introducción y entorno de tipo Test, Puzzle, Código y Proyecto con VSCode.

Introducción a HTML

HTML5
Test