Editores y herramientas HTML
En el capítulo anterior, aprendimos que HTML es un lenguaje de marcado utilizado para crear páginas web. Al crear páginas web, necesitarás las siguientes herramientas y programas:
- un editor de texto o HTML para escribir y editar código fuente,
- un navegador para verificar los resultados,
- un validador: un programa especial que verifica la validez o corrección sintáctica del código fuente.
Hablemos de ellos en detalle.
Editores HTML
Existen varios editores profesionales que los desarrolladores web utilizan para programar. Sin embargo, no todos los editores pueden satisfacer todas tus necesidades. Por lo tanto, un buen editor HTML debe tener la siguiente funcionalidad:
- resaltado de sintaxis: mostrar texto, especialmente código fuente, en diferentes colores y fuentes,
- soporte para vista de pestañas: mantener varias páginas web abiertas en pestañas al mismo tiempo,
- verificación de errores en un documento HTML,
- plegado de código: ocultar fragmentos grandes de código para mostrar solo un resumen o la primera línea.
Los editores HTML más populares son los que se enumeran a continuación:
Como estás comenzando, puedes usar el Bloc de notas (Windows) o TextEdit (macOS) para escribir tu primer archivo. Sin embargo, dado que estos editores básicos carecen de resaltado de sintaxis, recomendamos comenzar con un editor gratuito que lo soporte, como Visual Studio Code o Notepad++. Echemos un vistazo a cómo crear tu primer archivo.
Paso 1. Abre el Bloc de notas en tu computadora
Presiona la tecla Windows, escribe Notepad y presiona Enter.
Paso 2. Escribe tu código
Escribe o copia algo de código HTML.
Ejemplo de código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>Resultado
Paso 3. Guarda el documento HTML
Ve a Archivo en el menú del Bloc de notas y elige Guardar como. Asigna un nombre a tu documento utilizando la extensión de archivo .htm o .html. (Recomendamos usar la extensión .html). Asegúrate de configurar la codificación en UTF-8 y establecer el menú desplegable Guardar como tipo en Todos los archivos para evitar que Windows agregue una extensión .txt. Guarda el archivo en una carpeta dedicada que deberías crear de antemano para almacenar todos tus documentos HTML.
Paso 4. Verifica el archivo HTML en un navegador
Abre tu archivo HTML en un navegador (haz clic derecho en el archivo y elige Abrir con).
Navegador
Necesitarás un navegador para verificar archivos HTML. Para empezar, cualquier navegador, como Google Chrome, Opera o Firefox, será suficiente, pero más adelante necesitarás todos. El caso es que cada navegador tiene su propio motor de renderizado y deberás verificar tu código en cada uno de ellos. Los navegadores modernos también incluyen herramientas de desarrollo integradas (presiona F12), siendo Chrome DevTools el más utilizado para inspeccionar y depurar HTML. Para pruebas entre navegadores, puedes usar servicios en línea o máquinas virtuales una vez que tu proyecto crezca.
Validador
Una parte esencial del proceso de desarrollo de páginas web es verificar la validez del código HTML. Se pueden utilizar validadores, programas o servicios especiales para comprobar la validez o corrección sintáctica de un fragmento de código o documento.
El servicio en línea más común es validator.w3.org. Ingresa la URL de una página web y el servicio verificará el código en busca de errores, o devolverá un mensaje confirmando que tu documento es válido.
Para verificar la validez de archivos locales, puedes usar validadores en línea o linters integrados en editores modernos como Visual Studio Code. Algunos editores también proporcionan verificación de sintaxis en tiempo real mientras escribes.
Práctica
¿Cuáles de los siguientes son editores HTML recomendados según el contenido proporcionado en la URL especificada?