7.1 Primer documento html
Vamos a crear nuestro primer documento html (archivo html). Normalmente el archivo html principal de un proyecto web se llama index.html: te propongo que no nos alejemos de esta gloriosa tradición. Para ello, haz clic con el botón derecho del ratón en la carpeta web-storm-10:
Y escribimos el nombre del archivo:
WebStorm creará el archivo para ti y lo abrirá inmediatamente:
De hecho, esto es un documento html vacío. Todo lo que ves aquí es información de servicio.
Todos los datos reales estarán ubicados dentro de las etiquetas <body> y
</body>. Aprenderás más sobre qué son las etiquetas en la próxima lección.
Escribamos algún mensaje interesante y pomposo dentro de estas etiquetas. Por ejemplo, este:
¡El camino de mil millas comienza con un solo paso!
Puedes simplemente copiarlo y pegarlo en la línea 8 (dentro de las etiquetas <body>).
Acostúmbrate a copiar textos en general: así hay menos errores y erratas. Así es como se ve mi documento ahora:
Si mi versión del texto no es suficientemente sombría y pomposa para ti, elige la tuya — después de todo, es tu primer proyecto Web. Te propongo otros 3 opciones para elegir:
- "El lado oscuro me ofrece lo que la Luz no puede: verdadera libertad."
- "El lado oscuro es el camino hacia un poder que no conoce límites."
- "Elijo mi destino, y está en la oscuridad."
7.2 Ejecutar el primer proyecto
Ahora lancemos nuestro proyecto y veamos cómo el navegador muestra nuestro archivo html.
Para ejecutar el proyecto, debes hacer clic en el triángulo verde en el menú superior. A su izquierda está escrito el nombre del archivo que se ejecutará:
También puedes ejecutar tu archivo presionando Shift+F10.
Hagámoslo, y verás cómo el navegador muestra tu primer archivo html. Esto es lo que mostró el mío:
El texto en color naranja es el host en la url — el servidor web de nuestro proyecto, que fue iniciado por WebStorm.
El texto en color verde es la ruta en la url — el camino hacia index.html desde la raíz de nuestro proyecto.
En color azul — información de servicio para WebStorm.
El texto en color rojo resaltado, es el texto que el navegador mostró basado en nuestro documento html.
7.3 Trabajando en los errores
¿Y qué pasa si cometemos algún error? ¿Cómo reaccionarán el navegador y WebStorm a esto?
Borremos el primer símbolo en la línea 9 y veamos la reacción de WebStorm. Esto es lo que obtuve:
Qué vemos aquí:
- La palabra en la línea 9 dejó de ser una etiqueta, por lo que WebStorm ahora la escribe en color gris, no amarillo.
- En la línea 10 tienes la etiqueta de cierre
<html>, aunque la etiqueta<body>debería encontrarse antes de la etiqueta de cierre<html>. Por lo tanto, WebStorm ve aquí un error. - El número de errores en el documento se muestra en la esquina superior derecha – tenemos uno.
- El lugar del error también se refleja en la barra de desplazamiento — a la derecha abajo. Es muy práctico para documentos largos.
Ahora lancemos este archivo y veamos cómo reaccionará el navegador al error:
El navegador también considera que la etiqueta incompleta <body> es simplemente texto, por eso lo muestra como texto normal.
La ausencia de una etiqueta de cierre <body> tampoco confundió al navegador: hay problemas con las etiquetas aún peores.
En general, todo salió bastante decente.
GO TO FULL VERSION