Cómo crear una página web con Sublime Text y emmet.io

como crear una pagina web con sublime text

Cómo crear una página web con Sublime Text y emmet.io

Hola alumnos de Espai y seguidores del blog,

Muchos de vosotros me habéis preguntado sobre cómo hacer abreviaturas en Sublime Text para generar un código de una forma ágil y rápida. Para eso necesitamos una herramienta de sublime llamada Emmet basada en la sintaxis del CSS, ésta interpreta el código añadido y lo sustituye por  html o  CSS si se da el caso.

Cómo crear una página web con Sublime Text

Vamos a ver unos ejemplos de abreviaturas en html y su resultado.

! -> Nos genera el Doctype de html5

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Document</title>

</head>

<body>

</body>

</html>

 

+ -> Nos genera un hermano

Código:

h1+p

Resultado:

<h1></h1>

<p></p>

 

> -> Nos genera un hijo

Código:

h1>a

Resultado:

<h1><a href=»»></a></h1>

 

^ -> Desciende un nivel

Código:

h1>a^p

Explicación: generamos el nivel “h1” e introducimos un nivel “a” volvemos al nivel del “h1” (descendemos) y añadimos una “p”

Resultado:

<h1><a href=»»></a></h1>

<p></p>

 

*n -> Nos genera una cantidad de un elemento n veces

Código:

div*3

Resultado:

<div></div>

<div></div>

<div></div>

 

() -> agrupaciones

Código:

(h1>a)+ul>li*3

Resultado:

<h1><a href=»»></a></h1>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

 

# -> genera el atributo id en una etiqueta

Código:

div#wrapper

Resultado:

<div id=»wrapper»></div>

 

. -> genera el atributo class en una etiqueta

Código:

div.menu

Resultado:

<div class=»menu»></div>

 

[x] -> genera el atributo x en una etiqueta más los atributos propios del elemento

Código:

img[title]

Resultado:

<img src=»» alt=»» title=»»>

 

$ -> numerar atributos de un elemento múltiples veces

Código:

ul>li.menu$*5

Resultado:

<ul>

<li class=»menu1″></li>

<li class=»menu2″></li>

<li class=»menu3″></li>

<li class=»menu4″></li>

<li class=»menu5″></li>

</ul>

Si queremos que empiece por 001

Código:

ul>li.menu$$$*5

Resultado:

<ul>

<li class=»menu001″></li>

<li class=»menu002″></li>

<li class=»menu003″></li>

<li class=»menu004″></li>

<li class=»menu005″></li>

</ul>

Explicación: tantos $ como caracteres queremos al empezar.

 

@ -> modifica el orden de la herramienta $

Código:

ul>li.menu$@-*5

Resultado:

<ul>

<li class=»menu5″></li>

<li class=»menu4″></li>

<li class=»menu3″></li>

<li class=»menu2″></li>

<li class=»menu1″></li>

</ul>

 

{} -> generar texto

Código:

a{inicio}

Resultado:

<a href=»»>inicio</a>

Otro ejemplo de a con un span en su interior

Código:

a>{inicio}+span{pagina}

Resultado:

<a href=»»>inicio<span>pagina</span></a>

 

loremn -> generar texto simulado lorem ipsum de n palabras

Código:

Lorem5

Resultado:

Lorem ipsum dolor sit amet.

 

Entendidos estos conceptos podemos generar prácticamente toda una página en una sola línea, probad este código en Sublime en un archivo html.

header[role=»banner»]>h1>a>lorem3^^nav[role=»navigation»]>ul>li.menu$*5>a>{menu $}^^^^^main[role=»main»]>h2>lorem9^p*3>lorem15^^footer[role=»contentinfo»]>p{&copy; Espai SL}

Para más información podéis consultar la página de emmet.io

Espero que este post os haya sido de ayuda.

Saludos desde el área web de Espai.

1 Comentario

  • alfredo
    14/11/2019

    como puedo insertar imagenes a una página

Escribe un comentario