Intermedio: actualizar su editor de texto

Ha recorrido un largo camino. Tomémonos un segundo para apreciar que abrió un editor de texto simple y creó un sitio web increíble escribiendo código HTML. ¡Así se hace!

Hablando de editores de texto simples, mantener todo el texto con una buena sangría en HTML puede resultar molesto. También puede resultar complicado distinguir el código HTML de nuestro contenido escrito.

Una ventana de un editor de texto mostrando código HTML con "La web de Victorhck". La página contiene un encabezado, la etiqueta de una imagen con la fuente "espacio.jpg" y un texto alternativo (como este) "Fotografía del espacio con estrellas y polvo de estrellas," y secciones sobre aficiones y temas de enseñanza que utiliza varios elementos del código HTML.

No es terrible, pero podemos hacerlo mejor. Descarguemos un editor diseñado para escribir código.

Descargar Visual Studio Code

Visite el siguiente enlace https://code.visualstudio.com/. Este editor de código es de Microsoft pero funciona no solo en Windows, también en Mac y Linux. Puede realizar muchas tareas, pero lo usaremos de manera sencilla para este libro.

No deje que la captura de pantalla de la página de inicio le asuste. No necesitamos todas esas funciones avanzadas para lo que estamos haciendo.

Una vez que descargue e instale VS Code, inícielo. Es posible que vea algunas pantallas instructivas, pero luego se le presentará una pantalla como esta:

Captura de pantalla de la pantalla de bienvenida de Visual Studio Code. La barra lateral incluye opciones como "Explorar," "Buscar," "Control de fuente," "Ejecutar," y "Extensiones." La pantalla principal muestra opciones para "Abrir carpeta..." con tutoriales para comenzar con VS Code y aprender los fundamentos

Abrir su proyecto

En la pantalla de bienvenida de VS Code, haga clic en Abrir carpeta, y seleccione la carpeta que contiene su proyecto web. Verá los archivos de su sitio web en la barra lateral. Cuando abra el archivo index.html, verá el código en una vista agradable con los números de líneas y lo que se llama resaltado de sintaxis, las partes del código coloreadas para que sea más sencillo distinguir una partes de otras.

Captura de pantalla de Visual Studio Code con código HTML para "La web de Victorhck." La barra lateral izquierda muestra los archivos del proyecto. El editor principal muestra el mismo código que antes, pero coloreado para hacer más sencillo distinguir las diferentes partes del código.

VS Code también ayuda a hacer más fácil la tarea de escribir código. Entiende el código HTML y muchos otros lenguajes de programación. Cuando comienza a escribir, le ofrecerá sugerencias para completar el texto, que puede aceptar haciendo clic o pulsando enter. También colocará el código tabulado de manera automática para hacer una sangría correcta del texto, así no tiene que introducir las tabulaciones o los espacios a mano cada vez que sea necesario.

VS Code abre sus archivos en pestañas. Esto es muy conveniente para cuando más adelante su sitio web tenga múltiples páginas.

Explore cuando esté preparado

Hay muchas cosas interesantes que VS Code puede hacer, pero lo que hemos cubierto aquí es suficiente para empezar. Piense en ello como un Bloc de notas más elegante. Al fin y al cabo, sigue siendo sólo texto en un archivo. Comenzamos nuestro viaje con Notepad o TextEdit para demostrar que se puede crear un sitio web con herramientas simples que ya tiene instaladas en su computadora, sin necesidad de magia ni software costoso.

Dicho esto, el uso de un editor de código hace que el proceso de escritura HTML sea más agradable y manejable. Y cuando esté listo, podrá explorar todas las funciones que ofrece VS Code. También puede probar otros editores de código para ver si le gustan.

Por ahora, ¡volvamos a la tarea de crear nuestro sitio web!

A continuación

Ahora que hemos subido de nivel nuestro editor de texto, aprendamos cómo agregar estilo a nuestro sitio web.