Después de hablar largo y tendido sobre HTML, examinamos los componentes que conforman el editor de código fuente Brackets.io, como las extensiones que nos permiten aumentar las herramientas de trabajo presentes por defecto y las utilidades que ayudan a personalizar nuestra área de trabajo y optimizar nuestro trabajo.
Antes de empezar, realicemos una introducción de este lenguaje: HTML significa HyperText Markup Language (Lenguaje de Marcas de Hipertexto), y es un lenguaje de marcas que se utiliza para crear páginas web.
Breve Resumen de HTML
HTML es un lenguaje de marcas y no un lenguaje de programación, lo que significa que gracias a sus elementos e instrucciones es posible definir la apariencia estética y estructural de las páginas web.
Los elementos HTML están formados por etiquetas, que tienen la función de marcar el texto y definir la estructura del documento.
Las etiquetas HTML se componen de un nombre y un atributo, que especifican la función del elemento. Por ejemplo, la etiqueta <p> se utiliza para definir un párrafo, mientras que la etiqueta <img> se utiliza para insertar una imagen.
Los elementos HTML pueden utilizarse para definir el diseño de una página web, insertar imágenes, vídeos y otros contenidos multimedia, y crear enlaces entre diferentes páginas web.
¿Cómo Puedo Crear una Página HTML?
Entonces, primero instalamos Brackets.io, a continuación abrimos el programa. Entonces, creamos un nuevo archivo, luego vamos a “Archivo > Nuevo” y seleccionamos el tipo de archivo a través del panel de selección de la parte inferior derecha. A continuación, elegimos el formato HTML.
Llegados a este punto hemos creado una nueva página de tipo HTML, veamos qué elementos debe contener para que se construya respetando todas las reglas correctas.
Todas las páginas HTML están formadas por una estructura muy precisa que permite que el archivo sea leído correctamente por el navegador y los motores de búsqueda que deberán indexar el contenido correctamente dentro de los resultados de búsqueda.
Una vez creado el primer archivo, veamos cómo se forma la estructura del código.
La arquitectura de las páginas web HTML se divide en contenedores:
La primera está indicada por la etiqueta:
<html> </html>que será el contenedor principal de todo el código.
Dentro de ella encontramos una división en 2 macro áreas, la primera se llama
<header></header>y tendrá en su interior archivos relacionados con el estilo y llamadas a librerías externas, siendo las más populares jQuery o Bootstrap.
Mientras que dentro de la segunda zona de macros llamada
<body></body>contendrá todos los elementos estructurales que conforman la estructura real de la página, es decir, las etiquetas que caracterizan los elementos individuales de HTML.
Por lo tanto, podemos resumir la estructura de la página HTML de esta manera:
<html>
<head>
</head>
<body>
</body>
</html>Además de esta estructura básica, es posible, y en algunos casos incluso necesario, añadir más líneas de código para que las páginas web se ejecuten correctamente, de modo que cada página individual puede necesitar varias líneas antes de estar lista para construirse realmente con los elementos que formarán el cuerpo:
<body></body>Sin embargo, este procedimiento de escritura se puede agilizar enormemente, y gracias a Brackets podemos automatizarlo, es decir, crear la arquitectura HTML con un solo clic.
¿Cómo Crear un Archivo HTML con Brackets?
El procedimiento es muy sencillo, primero debemos buscar una extensión que nos permita realizar esta operación, luego nos dirigimos dentro del panel de extensiones. (El gestor de extensiones se encuentra en el panel derecho)
Una vez abierto, buscamos en la barra de búsqueda la extensión llamada “HTML Skeleton“.
Lógicamente, se procede a la instalación.
En este momento, notarás que habrá aparecido un nuevo icono en la barra lateral derecha, es decir, el icono que permite acceder a las funciones de la extensión HTML Skeleton.
Haz clic y accede a la ventana dedicada.
En este panel, observamos que hay varios elementos seleccionables, todos los cuales nos permiten insertar líneas de código HTML preestablecido en el documento web, de modo que podemos aprovechar la extensión “HTML Skeleton” de Brackets para reducir nuestro tiempo de escritura.
Por ejemplo, hagamos clic en el primer elemento (“Basic HTML Skeleton“), el que nos permitirá insertar la estructura principal de la página, exactamente idéntica a la escrita anteriormente, y con algunos detalles adicionales.
El resultado que obtenemos es el siguiente:
Gracias a esta función, podemos insertar toda la estructura de los archivos HTML con un simple clic.
También dentro de la ventana dedicada a la extensión “HTML Skeleton”, podemos encontrar otras opciones que nos permiten crear automáticamente cadenas de código útiles para compilar archivos HTML.
HTML Skeleton no es la única extensión que mejora la escritura de código dentro de Brackets, otras extensiones útiles que mejoran el trabajo de los desarrolladores y diseñadores web son las siguientes y están todas disponibles dentro del repositorio dedicado.
- Emmet.
- HTML Wrapper.
- Brackets Icons.
- Autoprefixer.
- JS CSS Minifier.
- CSSLint.
- CanIUse.
Por lo tanto, podemos cerrar la lección afirmando que Brackets simplifica y optimiza el trabajo de los desarrolladores proporcionando herramientas para automatizar los procesos y mejorar la jornada laboral.
¿Y tú, conocías este editor? ¿Cuál es tu editor favorito? Te leemos en los comentarios.
