Aprende como utilizar el plugin Emmet y como escribir código HTML y CSS mas rápido y sencillo con este grandioso plugin.
Cuando ya se tiene algo de experiencia dentro del diseño web las cosas comienzan a parecer tediosas, el repetir una y otra vez lo mismo para llegar a una simple estructura html puede ser aburrido y desesperante en ocasiones, es por eso que como buenos profesionales y amantes del buen front-end debemos reducir el tiempo que tardamos durante el desarrollo de un proyecto, esto incluye reducir el tiempo que usamos a la hora de escribir código.
Así que por eso hoy te comparto una herramienta que te permitirá hacer cosas geniales como escribir código HTML y CSS mas rápido de lo que lo has hecho antes. No se trata de un secreto ni mucho menos, es de hecho una herramienta súper famosa y utilizada por todo el mundo, pero si estas leyendo este post seguramente no la conozcas.
Se trata de Emmet, anteriormente conocido como Zed Coding, no es nada mas que un simple pero fantástico plugin para nuestros editores de código que nos permitirá escribir código html y css mediante abreviaturas y con solo presionar una tecla se convertirán en nuestro código, listo para editar.
Si no lo entiendes aun, aquí que te pongo este ejemplo de nuestra estructura básica de HTML.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
Para poder agregar la anterior estructura gracias a emmet lo único que tendríamos que hacer es escribir html:5 presionar la tecla TAB y automáticamente tendrás la estructura básica de un documento html5 tal como te la mostré en el fragmento de código anterior..
Y prácticamente es la base de todo lo que se puede hacer, puedes hacer muchas estructuras desde lo mas básico hasta lo mas avanzado, puedes desde agregar un link hasta agregar un div con varios elementos dentro, todo con un simple atajo de 1 sola linea.
Emmet funciona tanto para HTML como para CSS y lo mejor de todo es que es un plugin disponible para la mayoría de los editores de código por lo cual es 100% recomendado que lo tengas si eres un diseñador web.
Videotutorial como escribir código HTML y CSS mas rápido
Aquí mismo te dejo los links a su pagina en donde en puedes descargar el plugin y ver la documentación para obtener todas las abreviaturas posibles.
Sitio web de Emmet: http://emmet.io/
Documentación de Emmet: http://docs.emmet.io/
Link de Cheat Sheet: http://docs.emmet.io/cheat-sheet/
Tutorial como instalar Emmet en Sublime Text: https://www.falconmasters.com/tutoriales/como-instalar-emmet-zen-coding-sublime-text/
Excelente. :D
Exelente !! :) me volves loco con tus tutoriales :D
Hey amigo, pero que pasa si estoy trabajando con php y necesito un index.php? también me sirve este plugin?
Se puede, pero tienes que cambiar la sintaxis del documento a HTML, abajo a la derecha
hola! esta genial pero cuando uso el tabulador no me crea el código y me dice que está instalado, cómo puedo solucionarlo?
Quizá el problema es que estás probando el plugin en un documento en blanco y aun no lo has guardado. Tienes que guardar primero el documento como .html para que emmet identifique en que lenguaje esta trabajando.
Por cierto, muchas gracias a Falcon Master por este tutorial y todos los demás! Estoy empezando y me están siendo de mucha ayuda. Gracias!
para Sublime Text 3 ==> html:5 => tabulador
A mi como atajo de teclado me asigno Ctrl+E. Hay alguna manera de cambiarlo a TAB? Gracias man! Muy bueno el tutorial.
Como haces para escribir clases en dos contenedores diferentes al mismo tiempo?
facil: div.clase1+div.clase2
Buenas amigo que teclas presionas para agregar un comentario html. O seleccionas una línea y toda se coloque en comentario html. O css?
Ctrl+ç (esa tecla que está a la izquierda de enter, en mi caso, tanto para comentarios html como css, presionas una para comentar y otra vez para regresar) en teclado español (sublime text 3), para comentar desde cero dice la documentación de sublime text que es Ctrl+/ pero en mi caso con el pluging de emmet es colocando la letra c minúscula y luego presionando -tab-.
una duda, si para el teclado español algunos atajos sin diferentes ¿donde puedo consultar los atajos de emmet para teclado español? para tenerlos todos, porque la verdad es que los que usan la tecla shift funcionan, pero los demas no todos funcionan igual, y yo tengo windows casi recien instalado, no tengo ninguna modificacion ‘rara’ en el sistema
Hola! Muy buen tutorial, muchas gracias!!! Alguien sabe si funciona bien con Brackets? Saludos! :)
Acabo de ver que efectivamente está el plugin para Brackets en la página! :P Gracias de todos modos!
Excelente… toooodoooo videos tutos tooodoooo
Hola amigos, será egoísta por mi parte no comparto mis testimonios con ustedes, que trabajó para mí, así que creo firmemente que va a trabajar para usted, por favor no ignorar o pasar sin leer esto y hacer clic en el sitio Web más abajo. Su va a ayudar simplemente haga clic en el siguiente enlace y visita la página web. Sé que nunca se arrepentirá de ver el sitio web. Sitio web: http://churchofmagicindia.simplesite.com/
MI NOMBRE ES McCarthy De LAS VEGAS
POR FAVOR ENCONTRAR TIEMPO PARA LEER ESTO ATENTAMENTE.
Como todos sabemos INDIA ES EL NÚMERO UNO EN EL MUNDO EN TÉRMINOS DE
MAGIC Así que no ignore
ESTA….
Tenga cuidado aquí, nadie puede ayudarte de África o incluso sugerir COMO USTED
PUEDE CONSEGUIR SU EX O AMOR DE NUEVO, TODOS LOS TESTIMONIOS DE MÁS DE lanzador de hechizos
AFRICA AQUÍ debe ser ignorado, porque todos ellos son SCAM QUIERO DECIR verdadera estafa
Y DESDE ÁFRICA QUE ERA UNA VÍCTIMA y yo nos arrancó de miles de
DÓLARES porque estaba tan ansioso por MI ESPOSA TERA DE NUEVO TRAS ELLA ME DEJÓ
PARA MÁS 2YEARS CON MI HIJO 3YEARS VIEJO JERRY, HE SOLICITADO 7 DIFERENTE
HECHIZO CASTER AQUÍ DE AFRICA que he encontrado en este blog y todo fue en vano TODOS ELLOS PIDEN
LO MISMO ENVIAR SU NOMBRE SU EX DIRECCIÓN NOMBRE Y NÚMERO DE TELÉFONO DE IMAGEN ETC
QUE HICE UNA Y OTRA VEZ Y todos ellos eran de África, ESTABA
Tan confundida Y yo siempre estaba enfermo porque de este problema y yo estaba tan
Desesperada por tener TERA de nuevo a mí, yo la amo tanto y podría morir por ella.
Hasta que un amigo me habló de la IGLESIA INDIA DE LA MAGIA DEL EMBRUJO MAYOR
TEMPLO, (church_ofmagic@outlook.com) TEMPLO DE BLANCO Y NEGRO (BIEN Y
MAL) en la India, y me decidí a enviar un correo electrónico al templo. LA SECRETARIA
Me dijo que TODO MI PROBLEMA SON MÁS DESDE HE DECIDIDO EN CONTACTO CON LA INDIA
AYUDA, SE ME DIJO QUE EXPLICAR QUÉ PASÓ ENTRE YO Y MI ESPOSA EX
TERA y lo hice, le dije a él todo lo que SUCEDIÓ DESDE EL PRINCIPIO. Y EL
Me dijo: MI HIJO LO QUE SOLO me explicó AHORA ES UN PROBLEMA DE POCO
MANEJAR COMPARAR CON PROBLEMAS GRAVES LOS DOCTORES DE LA IGLESIA INDIA DE MAGIC ha manejado, ya que hay más de 3000 médicos, profesores Y hechiceros TRABAJAN EN LA IGLESIA DE MAGIA, estaba tan
Conmocionado y le dije a mi YO QUÉ PROBLEMA podría ser más grave que esto.
ÉL ME DIJO QUE necesitaba hacer LO ANTES POSIBLE, estaba teniendo lugar a dudas debido a la experiencia del pasado, sino que
Decidimos probar DESDE LA IGLESIA DE LA MAGIA ESTÁ SITUADO EN LA INDIA (ASIA) Y NO ÁFRICA
(NIGERIA Y SUDÁFRICA) podrían ser REAL Y DIFERENTE. Así que le di ELLOS
50% DE MI CONFIANZA. ESTA FUE COMO UNA MAGIA Y sueño hecho realidad para mí, después de dos
DÍAS CUANDO EL HECHIZO HA fundido, TERA sonó mi teléfono a las 9: PM I
No pude dormir esa noche porque me encanta TERA Y quiero que vuelva. POR
7: am de la mañana siguiente, ella me dio OTRA LLAMADA PERDIDA decidí no
CALL BACK COMO ESTABA TODAVÍA EN CHOQUE, alrededor de las 10: SOY EL QUE MAÑANA Llamó
Y yo elegimos ELLA DIJO ¿Podemos ver hoy después del trabajo me dijo que sí SO Terminó
La llamada inmediatamente me bajé TRABAJO Llamó MÍ Y ME DIJO se reunirán
Ella, yo todavía estaba en DESCARGA: He aquí cuando llegué allí VI TERA llorando con
LÁGRIMAS EN TODO SUS OJOS, Y ella me dijo mi esposo, lo siento
INMEDIATAMENTE abracé y la besé QUE HE PERDIDO TODO ESTE AÑOS.
TODO GRACIAS A LA IGLESIA INDIA DE MAGIA. SI USTED ES UN HOMBRE O UNA LECTURA DE LA MUJER
ESTO Y usted está pasando por problemas similares como la mía O PROBLEMA totalmente diferente, no dejéis de
CONTACTAR CON ESTE GRAN TEMPLO. ÉL ES REALMENTE EN EFECTO A lanzador de hechizos VERDADERO.
ALGUNOS SERVICIOS PRESTADOS EN LA IGLESIA INDIA DE MAGIA
(1) Si usted quiere que su ex atrás.
(2) Para curar el VIH / AID o enfermedad relacionada
(3) ¿Quieres ser promovido en su oficina.
(4) ¿Quieres mujeres / hombres para correr tras de ti.
(5) Si usted quiere un hijo.
(6) ¿Es usted un contratista y quieres ganar un contrato
(7) ¿Quieres atar su marido / esposa sea
tuya para siempre.
(8) Si necesita ayuda espiritualmente.
(9) ¿Cómo te han estafado y que desea recuperar perdió dinero.
(10) Parada de Divorcio
(11) Invocación de Ritual Dinero
(12) Para verificar si su amante en línea es real
(13) Para verificar si su préstamo en línea es real
(14) Para que sea muy brillante
(15) Si usted está buscando un buen trabajo
(16) Si usted es viejo y quiere parecer joven
(17) Si quieres ser libre de amenazas de hechizo atender en África
Y muchos más..
Email … church_ofmagic@outlook.com
Sitio web: http://churchofmagicindia.simplesite.com/
Seguí los pasos de la instlalación de Emmet pero cuando escribo html:5 y presiono la tecla TAB no pasa nada!!!
en la esquina inferior derecha dice «Plain Text» da click sobre ese texto y busca html despues de que lo selecciones, ahora si intentas
Gracias! lo intentare
Quizá el problema es que estás probando el plugin en un documento en blanco y aun no lo has guardado. Tienes que guardar primero el documento como .html para que emmet identifique en que lenguaje esta trabajando.
ctrl + e
a mi me funciono asi
Pues ya lo hice, cambie de Plain Text a html, y tamoco funcinó
Si el archivo no esta guardado como html emmet no funciona con TAB,
Curación del VIH-SIDA, mi nombre es Benjamin Tracy me dirijo sobre este
proyecto de resolución. Aluebor que alguna vez podría conseguir mi VIH-SIDA
curado con su hechizo de curación, he intentado casi todo, pero yo me
cansaría encontrar ninguna solución en mi enfermedad, a pesar de todo esto
que me pasa, siempre me dedico mucho a comprar unos medicamentos
contra el VIH del hospital y tomando algunos varios medicamentos, pero no
aliviar, hasta que un día me estaba navegando en el Internet cuando vengo al
otro lado de un gran puesto de! Michelle! que verdaderamente dice que le ha
sido diagnosticar con el VIH y se curó aquella misma semana a través de la
ayuda de estos grandes poderosa médico hechizo de curación, en algún
momento realmente me pregunto por qué la gente lo llamaba DR Aluebor yo
nunca sabía que todo era debido a la gran y perfecto trabajo que él ha estado
haciendo eso está causando todo esto. así que rápidamente en contacto con
él, y me pregunto algunas pocas preguntas y me dijo algo que nunca olvidaré
que cualquier persona que contactó con él siempre es conseguir su curación en
sólo 6 horas después de hacer todo lo que te pida hacer, así que estaba
sorprendido todo el tiempo que he oído que a partir de él, así que hice todas
las cosas sólo para ver que en el mismo día que dijo que yo quedaré sana, toda
la fuerza que me ha dejado antes de lanzas de nuevo y me hace muy fuerte y
saludable, este enfermedad casi mata a mi vida todo por mí, así que me fui al
hospital para dar la prueba final de la enfermedad y el médico dijo que soy VIH
negativo, estoy muy sorprendido y feliz por la curación DR Aluebor dio a mí
desde la parte antigua de áfrica, se le puede enviar por correo electrónico
ahora para su propia curación también, y prometo que trabajar rápido
inmediatamente como mi propia situación was.you puede enviar por correo
electrónico aquí en:
Alueborhomeofsolution@gmail.com
Alueborhomeofsolution@gmail.com
¿Qué Tema estas usando en Brackets?
¡Genial tutorial!
¿Cómo haces cuando tienes creado código y lo metes dentro de otra etiqueta?
En otros tutoriales he visto que lo seleccionas pero no se qué comando utilizas que se coloca dentro de un DIV directamente.
Muchas gracias.
En sublime text, selecciono el código que quiero encerrar y presiono Ctrl + Shift + G
A mi no me funciona, tengo que activarlo de alguna manera? por ejemplo para ocmentar se usa ctrl+7 y yo tuve que habilitarlo por comando porque no me funcionaba, pero con codigo de ctrl+shift+g no me sale
Tengo un problema, hay muy pocas abreviaciones que me funcionan, y además cuando intento hacer como por ej esto: nav>ul>li. Solo me crea la ultima abreviación que hice, como en este caso el «li». Me podrían ayudar, por favor?
prueba con ul>li*5>strong+em y presionas TAB
Hola necesito ayuda soy nuevo programando en ATOM como hago para que me aparezca la ventana emergente de seleccion de imagen con el atributo src=»»
Ayuda porfavor
Hola mi nombre es Margarita george que te quiero dar un testimonio sobre mi virus de VIH que fue curado por un lanzador de gran encanto. Desde el pasado 6 años que tengo siendo un paciente de VIH. Nunca pensé que había alguien que me pudiera ayudar hasta que me encuentro con un amigo que me dijo que era un lanzador de gran encanto que puede curar mi VIRUS. Le pregunté si tenía su correo electrónico, ella me dio su correo electrónico, yo le que hablaba me enviará por correo electrónico y él realiza los rituales necesarios y me dijo que después de dos semanas debo ir para una prueba. Que, cuando el doctor me dijo que soy ahora un VIH negativo no podía creerlo fui a ver otro doctor el resultado seguía siendo el mismo, estaba tan contento por lo que le enviará por correo electrónico y le dio las gracias. Por favor si usted tiene un problema similar por favor visitarlo / en contacto con él en drahubaspelltemple@gmail.com es una persona muy agradable y cura diversas enfermedades y virus también puede ayudarle recuperar su verdadero amor. en contacto con él hoy en drahubaspelltemple@gmail.com o +2349058832053 y tener en cuenta todos sus problemas resueltos.
Hola Carlos, instale el control package pero cuando digito ctrl+shif+p y escribo emmet no me instala. Agradezco si me puedes colaborar
muchas gracias por este aporte.
como saco con emmet la sintaxis de script?
Buenas carlos soy nuevo en programacion e instale ATOM como lo sugeriste en unos de tus video con el plugin emmet, pero me funciona con ctrl+E abra una manera de cofigurar para que funcione con (tab). mi sistema operativo es windows 10.
Dios me los bendiga con un buen doctor Alabi para curar mi VIH con su hechizo de curación, no tengo mucho que decir pero con toda mi vida voy a por siempre estar agradecidos a él y Dios Todopoderoso por el uso de Dr. Alabi para llegar a mí cuando pensaba que todo había terminado, hoy estoy feliz con mis dos hijos y mi marido después de que el médico ha confirmado mi estado de VIH negativo, i nunca en mi vida cree que el VIH podía ser curada por el Dr. Alabi hechizo de curación. así que quiero utilizar este medio para llegar a otras personas que tienen esta enfermedad al testificar el poder del Dr. Alabi que la esperanza no se pierde, sin embargo, tratar de comunicarse con él por cualquier medio de cualquier tipo de enfermedad con su correo electrónico ( dralabispelltemple@gmail.com ) o ( dralabispelltemple@ hotmail. com ) o ( dralabispelltemple@yahoo. com ) o whatapp él en 2348146226679 o llame a su línea móvil 2348105074556..
les recomiendo e-mail marketing para promocionar productos y servicios lo pueden bajar en emailmasivo.com
Hola carlos, excelente pagina, quería preguntarte como haces para encerrar una etiqueta en otra solo seleccionandola es algún tipo de plugin? muchas gracias
Hola Ronald lo que tienes que hacer es esto:
Abre el menú Atom y abre Keymap.
En el archivo que se te abre pega al final esto: ‘atom-text-editor:not([mini])’: ‘tab’: ‘emmet:expand-abbreviation-with-tab’.
Guarda el archivo.
Reinicia Atom.
Voalà! La tecla TAB vuelve a funcionar con Emmet.
Hola Compañeros buenas tardes, soy nuevo en esto… quería saber si es posible obtener el código html de un video tutorial
Hola falcón desde que encontré tu web no eh parado de realizar cada tutorial que hay aqui, sos excelente en todo tus explicaciones. Ahora estoy haciendo el formulario elegantes material desing. Saludos desde Argentina
La empresa 4youweb.com.ar.
Nuevamente muchas gracias Carlos, siempre veia en mis clases de programación que mi profe escribia abreviado y yo pensaba wooow que groosoo!! pero no me animé jamás a preguntarle como era jajaja, muchisimas gracias