USO DE EMMET EN HTML Sintaxis Resultado
USO DE EMMET EN HTML
Sintaxis
p>
a>
div>p>
H1+H2
option>*5
Resultado
<p><p>
<a><a>
<div>
<p></p>
</div>
<H1></H1>
<H2></H2>
div#menu
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<div>
<header>
<h1></h1>
<p></p>
</header>
</div>
<div id=”menu”></div>
div.menu
<div class=”menu”></div>
div.menu.nara
nja
td[colspan=3]
<div class=”menu naranja”></div>
option[value=$
]*5
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<h1>Titulo de la pagina</h1>
div>(header>h
1+p>)
h1{Titulo de la
pagina}
<td colspan=3></td>
a:link
<a href="http://"></a>
a:mail
<a href="mailto:"></a>
link:css
<link rel="stylesheet" href="style.css">
Descripción
Agrega la etiqueta párrafo
Agrega la etiqueta Enlace
Un párrafo dentro de un
contenedor
Título y subtitulo independientes.
Se ocupa agregando el símbolo +
después de cada etiqueta.
Multiplica las etiquetas
dependiendo de la cantidad que
se ponga. Para ello utilice el
símbolo *
Utilize signos de agrupación para
utilizar etiquetas dentro de otras.
Utilice el comodin # y el nombre
de id para asignarlo a una
etiqueta HTML
Utilice el punto y el nombre de la
clase para asignarlo a una
etiqueta HTML.
Puede agregar más de una clases
a una etiqueta HTML
Utilice los corchetes para agregar
atributos a una etiqueta HTML
Utilice el $ para asignar un auto
numeración dependiendo del
valor asignado.
Utilice las llaves para agregar
texto entre la etiqueta de
apertura y la etiqueta de cierre
Podemos agregar un enlace a un
sitio Web.
Un enlace a una dirección de
correo electrónico.
Útil para vincular una hoja de
estilos a la página Web.
meta:utf
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8" />
meta:vp
<meta name="viewport"
content="width=device-width, userscalable=no, initial-scale=1.0, maximumscale=1.0, minimum-scale=1.0" />
<form action=""
method="post"></form>
form:post
input:text
<input type="text" name="" id="">
input:password <input type="password" name="" id=""
/>
input:checkbox <input type="checkbox" name="" id=""
/>
html:5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
Más sintaxis, visita:
http://docs.emmet.io/cheat-sheet/
Importante etiqueta para la
codificación de caracteres de una
página Web.
Importante etiqueta para habilitar
la escala en dispositivos móviles.
Etiqueta muy util para el manejo
de formularios dentro de una
Web
Cuadro de texto en un formulario
Web
Cuadro de texto utilizado para
contraseñas
Elemento de opciones con
cheques.
Estructura básica de una Web en
HTML5
APLICACIÓN DEL EMMET EN LOS EDITORES DE TEXTOS
EN SUBLIME TEXT
Escriba la sintaxis de la etiqueta HTML que desea agregar y luego presione la tecla TAB
Resultado:
En DREAMWEAVER
En la vista Código (Obviamente) escriba la sintaxis y luego presione la secuencia de teclas CTRL + E
Resultado:
En NOTEPAD++
Te sugiero que modifiques a la tecla TAB para que puedas utilizar EMMET de manera más fácil, así
como se hace en Sublime Text.
Para ello has lo siguiente:
Clic en el Menú Configuración > Gestor de atajos de
teclado.
Clic en la ficha Plugin commands.
Clic en Expand abbreviation > Clic en el
botón Modify.
También puedes dar doble clic sobre
esta misma opción.
Desactivar la opción CTRL y ALT. Seleccionar la
opción Tab y por ultimo haga clic en Ok.
Listo. Ahora ya puedes utilizar el EMMET en NOTEPAD++
Resultado:
© Copyright 2024