Cómo crear fácilmente archivos HTML con Emmet

¿Es posible crear todo el código HTML de un sitio en minutos, si no en segundos? ¡Es posible si estás usando Emmet! Este nuevo enfoque permite el desarrollo rápido de código en HTML, XML y otros formatos de código estructurado.

Hormiga es un complemento para muchos editores de texto populares. Con Emmet, crea el esqueleto de su página en una sintaxis racional pero muy comprimida y luego lo expande a un código HTML completo y adecuado. El resultado parece mágico: una línea de texto se expande a cientos de líneas de sintaxis y usted tiene una página estática, o incluso la estructura de un sitio completo, lista en minutos.

Aquí aprenderá cómo puede utilizar Emmet para crear una página web estática completa. Código de Visual Studio se utiliza para este tutorial ya que viene con soporte integrado para Emmet. Puede usar Emmet en otros editores, como Sublime Text y Atom, pero tendrá que agregar soporte a través de una extensión.

Crea el archivo de tu sitio

Para comenzar, abra Visual Studio Code.

Sitios en minutos con Emmet Run Vscode

Elija “Archivo -> Nuevo archivo” para crear un nuevo documento en blanco.

Sitios en minutos con Emmet crean un nuevo archivo

Elija “Archivo -> Guardar como” para guardar su archivo, dándole una extensión “html”.

Sitios en minutos con Emmet Guardar como HTML

Estructura basica

Los elementos de cada página web están organizados en grupos y subgrupos. Al programar con Emmet, siempre tendrá que tener en cuenta cómo cada grupo contiene elementos que pueden ser grupos de más elementos.

Nota: aunque explicaremos los conceptos básicos, sería mejor si estuviera familiarizado con los conceptos básicos de la sintaxis HTML antes de continuar.

En un nivel superior muy básico, la mayoría de los sitios contienen tres grupos / secciones de este tipo: un encabezado, una parte principal para el contenido principal y un pie de página. Para crear aquellos con Emmet, escriba:

Sitios en minutos con encabezado Emmet Pie de página principal

El “#” delante de cada palabra significa que cada grupo es un div con una ID. Presione Enter al final de la línea para ver a Emmet en acción, convirtiendo esta pequeña frase en tres líneas de HTML estructurado.

Sitios en minutos con encabezado Emmet Pie de página principal expandido

Estructura de encabezado

El encabezado de un sitio típico contiene su logotipo y uno o dos menús. Para agregarlos a su página, puede mantener el HTML expandido del paso anterior y escribir directamente en el encabezado Div. Luego puede escribir algo como:

Sitios en minutos con Emmet agregan logotipo y menús

Presione Entrar para expandir esto también, y tendrá tres Divs más para el logotipo de su sitio y dos menús dentro de su Encabezado.

Agrupación en Emmet

Con Emmet, agrupa elementos colocándolos entre paréntesis. Esto le permite crear estructuras complejas para sus páginas. Así que deshaga todo hasta ahora y mantenga solo su #header+#mainsite+footer código de antes.

Sitios en minutos con Emmet Deshacer y experimentar

Reemplace la #header en su código con lo siguiente:

En Emmet puedes bajar un nivel usando el > personaje y puede subir un nivel usando el ^ personaje. Esto le permite ingresar a un elemento, agregar otros allí y luego volver a subir.

El resultado debería verse como el siguiente:

Sitios en minutos con contenido Emmet Header Plus

Lo anterior se traduciría en: “Agregue un Div (grupo) con el ID #encabezado. En su interior, agregue tres Divs con las clases “.logo”, “.menu.top” y “.menu.main”. Regrese un nivel hacia arriba, fuera del grupo, y agregue dos Divs más junto a él con los ID “#mainsite” y “#footer”.

Sitios en minutos con encabezado Emmet como HTML

Estructura de la publicación

Una publicación básica en un sitio típico generalmente contiene los siguientes elementos:

  • Título
  • Imagen
  • Extracto (como párrafo de texto)

También debería ofrecer un enlace que permita al visitante leer la publicación real y tal vez enlaces a sus categorías, etiquetas, etc. Sin embargo, para simplificar, usaremos solo esos tres elementos por ahora.

Este es el código que vamos a agregar:

Sitios en minutos con Emmet Post Emmet Syntax

Esto le dice a Emmet que “cree un Div con la clase .post. En su interior, coloque un título de encabezado H3, una imagen y un párrafo para el extracto.

Con “TEXT” adjunto después de un elemento, define su contenido. Entonces, con “Título de la publicación”, le está diciendo a Emmet que el contenido de cada título H3 será el texto de marcador de posición “Título de la publicación”. Puede cambiar “Título de la publicación” a su nombre o cualquier cadena de texto que desee, y se utilizará como contenido de los títulos de sus publicaciones cuando se expanda el código.

los $ junto a “Título de la publicación” hay una variable numérica que funciona junto con el “5” que puede ver fuera de los paréntesis. los *5 después del paréntesis le dice a Emmet que repita el contenido del paréntesis cinco veces. los $ se reemplaza con el número de iteración de cada publicación. Reemplace este número con el número de publicaciones que desea en su página.

Agregue esto al código real. Debería verse así:

Sitios en minutos con publicaciones de Emmet en sintaxis principal

Estructura del pie de página

Para el pie de página, estamos agregando dos grupos: dos Divs con las clases “.design” y “.copyright”.

El código es el siguiente:

Sitios en minutos con sintaxis de pie de página Emmet

Esto creará un div con la clase “.design”. En su interior hay un enlace con la clase “.designerslink”. Junto a él hay un segundo div con la clase “.copyright”. Dentro de este div hay un párrafo de texto sin formato con el contenido “Copyright 2020 My Name”.

Sitios en minutos con pie de página Emmet incluido

El resultado será este:

Ahora, simplemente presione Enter y su sitio estará listo.

Con solo presionar una tecla, todo lo que vimos hasta ahora, y este grupo ultracondensado de caracteres, se convertirá en docenas de líneas de sintaxis HTML adecuada para una página completa.

Sitios en minutos con Emmet Todo el código expandido

Guarde los cambios en el archivo presionando Ctrl + S o visitando “Archivo -> Guardar”. Para ver su trabajo, encienda su navegador. Luego, usando “Archivo -> Abrir” o un administrador de archivos externo, localice su archivo HTML y ábralo manualmente en el navegador.

Sitios en minutos con el sitio de Emmet en el navegador

Terminando

Ha aprendido los conceptos básicos del uso de Emmet para crear su archivo HTML. Por supuesto, puede volver a su código en cualquier momento para modificarlo o expandirlo con más cosas.

¿Ya conocías a Emmet? ¿Está utilizando otros atajos que le ayuden a crear sitios? Cuéntanos en la sección de comentarios a continuación.

¿Es útil este artículo?

¡Compártelo en redes!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *