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.

Emmet 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. Se utiliza Visual Studio Code 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.

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

Elija “Archivo -> Guardar como” para guardar su archivo, dándole una extensión “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:

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.

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:

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 conserve solo su #header+#mainsite+footercódigo básico de antes.

Reemplace #headeren su código con lo siguiente:

En Emmet puedes bajar un nivel usando el >personaje y puedes subir de 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:

Lo anterior se traduciría en: “Agregue un Div (grupo) con el ID #encabezado. Dentro de él, 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”.

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, por simplicidad, usaremos solo esos tres elementos por ahora.

Este es el código que vamos a agregar:

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 la publicación cuando se expanda el código.

El $siguiente a “Título de la publicación” es una variable numérica que funciona junto con el “5” que puede ver fuera del paréntesis. El *5después del paréntesis le dice a Emmet que repita el contenido del paréntesis cinco veces. El $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í:

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:

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”.

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.

Guarde los cambios en el archivo presionando Ctrl+ So 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.

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.

Relacionado:

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario