Drücke "Enter", um den Text zu überspringen.

Tag: 10. September 2018

Simples HTML 5 mit Emmet erstellen

Heute möchte ich euch einfach einmal vorstellen wie schnell man mit EMMET standardisierte Templates erstellen kann. Und das BESTE dabei ist, dass EMMET standardmäßig im Visual Studio Code mitinstalliert ist. Zumindest in der aktuellen Version ( Sept 2018 )

html:5

ergibt, meistens via Tabulator Taste, :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <body>

    </body>
</html>

Weitere Elemente können angehängt werden, beispielsweise wird hier eine html 5 Basisstruktur erzeugt, danach ein Element, hier ist es Title, mit dem Wert My Title erzeugt:

html:5>title{My Title}

Das Resultat sieht dann wie folgt aus:

Emmet HTML5

Eigentlich recht fein. Natürlich kann man EMMET unglaublich erweitern und mit einer Zeile damit sich sehr viel erleichtern. Nachzulesen gibt es das unter anderem auf einem sogenannten Emmet Cheat Sheet.

#EMMET #HTML5 #VisualStudioCode #Coding #100DaysOfCode

Schreibe einen Kommentar...