- ¿Por qué es importante usar un editor de código?
- Visual Studio Code
- Crear tu primer archivo HTML
- Agregar estilos con CSS
- Otros editores recomendados
Si hasta ahora solo has trabajado con editores en línea para maquetar sitios web, es momento de usar un editor de código en tu computadora. Esto te permitirá guardar tu trabajo y verlo en cualquier navegador sin depender de internet.
¿Por qué es importante usar un editor de código?
A diferencia de otros lenguajes de programación, HTML y CSS se pueden escribir en cualquier editor de texto, incluso en el Bloc de notas. Así se hacían las páginas web en los años 90 y 2000. Sin embargo, los editores modernos facilitan el trabajo gracias a herramientas como:
- Colorean el código para leer mejor.
- Completan etiquetas y estilos mientras escribes.
- Avisan si hay errores.
- Muestran los cambios al instante.
Visual Studio Code
Instalación paso a paso
- Visita el sitio oficial de VS Code.
- Descarga la versión adecuada para tu sistema operativo (Windows, macOS o Linux).
- Instala el programa siguiendo las instrucciones.
- Abre VS Code y estarás listo para trabajar.
Crear tu primer archivo HTML
Ahora que tienes VS Code instalado, sigamos estos pasos para crear nuestra primera página web.
- Abre VS Code y presiona Ctrl + N para crear un archivo nuevo.
- Presiona Ctrl + S y guárdalo con la extensión
.html, por ejemplo:index.html.
- Copia y pega el siguiente código en el archivo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
Agregar estilos con CSS
Para mejorar nuestra página, vamos a crear un archivo CSS que le dará estilo.
- Presiona Ctrl + N y guárdalo como
style.css.
- Copia y pega lo siguiente en
style.css:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
h1 {
color: #007bff;
}
- En el archivo
index.html, dentro de<head>, agrega esta línea:
<link rel="stylesheet" href="style.css">
Para ver el resultado, abre la carpeta donde guardaste el archivo y haz doble clic en index.html. Se abrirá en tu navegador con los estilos aplicados.
Otros editores recomendados
Si quieres probar otras opciones, aquí tienes algunos editores gratuitos:
| Editor | Características |
|---|---|
| Sublime Text | Ligero y rápido, pero algunas funciones requieren la versión paga. |
| Brackets | Diseñado para HTML, CSS y JavaScript con vista previa en vivo integrada. |
Resumen
- Visual Studio Code es un editor gratuito y potente, ideal para trabajar con HTML y CSS.
Si quieres descubrir más formas en las que VS Code puede ayudarte a escribir mejor código y evitar errores, te invitamos a visitar nuestro blog.
👉 Allí encontrarás un artículo sobre extensiones súper útiles para quienes están comenzando con HTML y CSS.
