Was ist "Emmet"
Die Website von "Emmet" sagt über sich:
Emmet - das Wesentliche Toolkit für Web-Entwickler!
Emmet ist ein Plugin für viele gängige Texteditoren, den HTML & CSS-Workflow erheblich verbessert.
Für EinsteigerInnen ist es wertvoll, dass damit die Möglichkeit besteht, eine Struktur eines Layouts in einfachen Stichworten (Shortcodes) zu schreiben und mit Klick den gewünschten Html-Code serviert zu bekommen. Dies erfordert ein übersichtliches Planen des Html-Layouts.
Beispiel 1
Diese einfach zu lernede "Abkürzungs"-Zeile:
html>(head>title)+body
erzeugt mit (Ctrl+Alt+Enter) folgenden Html-Code:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Beispiel 2
Diese "Abkürzungs"-Zeile innerhalb des body-Elements platziert:
div.container>(header+nav.top+article+footer)
erzeugt mit (Ctrl+Alt+Enter) folgenden Html-Code:
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<header></header>
<nav class="top"></nav>
<article></article>
<footer></footer>
</div>
</body>
</html>
Emmet wird für viele Editoren angeboten, auch wenn die Kurtzbefehle etwas varieren, wird die Erweiterung immer mit dem gleichen Vorgehen benutzt. Beispielsweise kann die Erweiterung Emmet mit Editoren wie: SublimeText, Notepad++, TextMate oder Atom verwendet werden. Auch in Entwicklungsumgebungen wie: Eclipse/Aptana , NetBeans oder in Dreamweaver sind Plugins bereitgestellt.