sábado, 19 de enero de 2019

Hoy veremos como escribir nuestro código de forma rápida utilizando las abreviaturas que nos permite utilizar el plugin emmet.
Si eres de las personas que trabajan utilizando HTML o CSS sabrás que crear estructuras como un titulo o un cuerpo es monótono pues las estructuras son casi siempre parecidas, entonces para evitar estar reescribiendo lo mismo emmet viene a nuestra ayuda, no alargarmos mas este tutorial  empezamos.

Escribir de forma rápida con las abreviaturas de emmet



Primero debes tener instalado el plugin emmet, si aun no lo tienes instalado te recomiendo que revises cualquiera de los siguientes links, te prometo que son cortos y directo al grano

1.- Como instalar emmet (zend coding)
2.- Como instalar plugin en sublime text


NOTA IMPORTANTE:
Antes de empezar quiero aclarar que los nuevo no pueden usar emmet porque cometen un error y es que para que funciones primero debes guardar tu archivo con su respectiva extensión por ejemplo prueba.html luego de eso puedes utilizarla.

html5
Para escribir una estructura de html solo basta con escribir html5 y luego presionas la tecla tab otra variante es escribiendo html:5 + tab puedes hacer tus pruebas.






 article>h2+p  
Ahora vamos suponer que necesitamos utilizar la etiqueta <article> y dentro necesitamos insertar la etiqueta <h2> y <p> para realizar esta acción usaremos article>h2+p   luego seleccionamos tab

El símbolo >, quiere decir dentro de esta etiqueta y el símbolo + es una separación.




nav>a*6
Ahora supongamos que necesitamos crear un menú de navegación, si recuerdan el menú de navegación tiene varias referencia ya sea para llamar imagenes u elementos entonces haremos lo siguiente:





Ahora supongamos que vamos a trabajar con un archivo css y necesitamos usar las abreviaturas, para ello recuerda guardar tu primero tu extensión como css por ejemplo prueba.css






Recuerda que luego escribir tu abreviatura, debes presionar la tecla TAB, para que te salga el resultado.
Y si deseas saber más sobre Emmet, te invito a que ingreses a la página oficial de Emmet, también revisar el cheat-sheet, para que aprendas más abreviaturas de esta genial herramienta.





0 comentarios:

Publicar un comentario

Con la tecnología de Blogger.

Anuncio

Popular Posts

Siguenos en Twiter