EniDev

Guías sobre temas de bases de datos y programación

---

Project maintained by Hosted on GitHub Pages — Theme by mattgraham

CONTENIDO

• Instalación

Fragmentos de Emmet

• Etiquetas link
• PCS - (Parent-Child-Sibling)
• Formularios

Instalación

Visual Studio Code

VS Code viene integrado con emmet por lo que no es necesario hacer nada. Para la acción de activar el código autocompletado debemos escribir la abreviatura correspondiente seguido de la tecla TAB.

SublimeText

Abrimos package control (Crtl+Shift+p) luego escribimos install y seleccionamos la opción Install Package.

Escribir el nombre del paquete, en este caso tiene el nombre de Emmet:

---

Fragementos link

Para favicon

Generar una etiqueta link para favicon: link:favicon

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Para css

Generar una etiqueta link para vincular hoja de estilos: link:css

<link rel="stylesheet" href="style.css">

Generar una etiqueta para vincular hoja de estilos para impresión: link:print

<link rel="stylesheet" href="print.css" media="print">

Fragementos PCS

Para elementos hijos : Child >

Generar una etiqueta <nav> con hijos y nietos en su interior: nav>ul>li

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Para elementos hermanos : Sibling +

Generar una 3 etiquetas diferentes en relación de hermanas entre si : div+p+blockquote

<div></div>
<p></p>
<blockquote></blockquote>

Subir un nivel ^

Generar etiquetas anidadas y subir un nivel : main>article^footer

<main>
  <article></article>
</main>
<footer></footer>

Generar una lista desordenada <ul> con 3 etiquetas <li> en su interior:

• ul>li*3

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Generar una lista desordenada <ul> con 5 etiquetas <li> y a cada una de las etiquetas se le añade un contenido con el texto item- y terminando con un número que aumenta de forma ascendente por cada elemento de la lista:

• ul>li*5{item-$}

<ul>
  <li>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
  <li>item-4</li>
  <li>item-5</li>
</ul>

formularios

Generar un formulario ya sea con el método get o post:

form:get

form:post

<form action="" method="get"></form>
<form action="" method="post"></form>

Generar entradas de diferentes tipos:

tipo texto

inp

input:t

input:text

<input type="text" name="" id="">

tipo contraseña

input:p

input:password

<input type="password" name="" id="">

tipo números

input:number

<input type="number" name="" id="">

tipo de rango

• input:range

<input type="range" name="" id="">

email

• input:email

<input type="email" name="" id="">

de teléfono

• input:tel

<input type="tel" name="" id="">

Generar un control de selección única con opciones:

select>opt{HTML}+opt{CSS}+opt{JS}

<select name="" id="">
  <option value="">HTML</option>
  <option value="">CSS</option>
  <option value="">JS</option>
</select>

Generar los 6 niveles de cabeceras de las etiquetas <h> añadiendole el atributo title con valor de ejemplo y un contenido en cada una de las etiquetas generadas agregandole al final de cada marcador de posición ($) la numeración ascendente.

• h$[title=Cabecera$]{Esto es un H$}*6

<h1 title="Cabecera1">Esto es un H1</h1>
<h2 title="Cabecera2">Esto es un H2</h2>
<h3 title="Cabecera3">Esto es un H3</h3>
<h4 title="Cabecera4">Esto es un H4</h4>
<h5 title="Cabecera5">Esto es un H5</h5>
<h6 title="Cabecera6">Esto es un H6</h6>

de imagen

• input:i

  input:image

<input type="image" src="" alt="">

de botón

• input:b

  input:buttom

  input:submit

url

• input:url

<input type="url" name="" id="">

oculto

• input:h

  input:hidden

<input type="hidden" name="">

de búsqueda

• input:search

<input type="search" name="" id="">

de archivos

• input:f

  input:file

<input type="file" name="" id="">

un control de colores (color picker)

• input:color

<input type="color" name="" id="">

de fecha y hora

• input:datetime

<input type="datetime" name="" id="">

de fecha

• input:date

<input type="date" name="" id="">

de fecha y hora local

• input:datetime-local

<input type="datetime-local" name="" id="">

de mes

• input:month

<input type="month" name="" id="">

de semana

• input:week

<input type="week" name="" id="">

de hora

• input:time

<input type="time" name="" id="">

Otros ejemplos

Para generar una etiqueta <p> con un contenido de texto en su interior debemos usar las llaves {} y luego con el símbolo u operador + podemos generar otras etiquetas a partir del mismo texto:

p>{Click }+a{aquí}+{ para continuar}

<p>Click <a href="">aquí</a> para continuar</p>

Esto no es una guía completa de emmet, solo algunos ejemplos practicos que comprenden los métodos de uso. Para ver una guía más en detalle de todo lo que ofrece emmet puedes ir a su documentación oficial.