Cómo crear una página web sencilla usando solo un editor de texto

Aprende a construir tu primera página web desde cero usando únicamente un editor de texto básico y código HTML.

  1. Qué necesitas para empezar. Solo necesitas dos cosas: un editor de texto básico (como Bloc de notas en Windows o TextEdit en Mac) y un navegador web (Chrome, Firefox, Safari). El editor de texto te servirá para escribir el código, y el navegador para ver cómo se ve tu página. No necesitas conexión a internet para crear y probar tu página en tu propia computadora.
  2. Crear tu primer archivo HTML. Abre tu editor de texto y escribe esta estructura básica: <!DOCTYPE html> seguido de <html>, luego <head> con <title>Mi primera página</title> y </head>, después <body> con <h1>¡Hola mundo!</h1> y <p>Esta es mi primera página web.</p>, y finalmente cierra con </body> y </html>. Guarda el archivo con el nombre 'mipagina.html' asegurándote de que termine en .html, no en .txt.
  3. Abrir tu página en el navegador. Una vez guardado tu archivo, busca donde lo guardaste en tu computadora. Haz clic derecho sobre el archivo 'mipagina.html' y selecciona 'Abrir con' seguido del nombre de tu navegador preferido. Tu página aparecerá en el navegador mostrando el título y el texto que escribiste. ¡Felicidades, acabas de crear tu primera página web!
  4. Agregar más contenido a tu página. Regresa a tu editor de texto para añadir más elementos. Puedes agregar más párrafos con <p>, hacer listas con <ul> y <li>, insertar enlaces con <a href='dirección'>texto del enlace</a>, o añadir imágenes con <img src='nombre-imagen.jpg'>. Cada vez que hagas un cambio, guarda el archivo y refresca la página en tu navegador para ver los cambios.
  5. Darle estilo básico a tu página. Para que tu página se vea más bonita, puedes agregar estilos básicos dentro de la sección <head>. Añade <style> y dentro puedes escribir reglas como 'body { font-family: Arial; }' para cambiar la letra, o 'h1 { color: blue; }' para cambiar el color del título. No olvides cerrar con </style>. Experimenta con diferentes colores y tamaños hasta que te guste cómo se ve.
  6. Revisar y corregir errores. Si tu página no se ve como esperas, revisa que todas las etiquetas estén bien escritas y cerradas correctamente. Cada etiqueta que abres con < debe cerrarse con </, por ejemplo <p> se cierra con </p>. Si ves texto extraño en lugar de tu página, verifica que guardaste el archivo con la extensión .html y que lo abriste con el navegador, no con el editor de texto.