So erstellen Sie einfach HTML-Dateien mit Emmet

Ist es möglich, den gesamten HTML-Code einer Site in Minuten, wenn nicht Sekunden zu erstellen? Es ist möglich, wenn Sie Emmet verwenden! Dieser neue Ansatz ermöglicht die schnelle Entwicklung von Code in HTML, XML und anderen strukturierten Codeformaten.

Emmet ist ein Plugin für viele gängige Texteditoren. Mit Emmet erstellen Sie das Skelett Ihrer Seite in einer rationalen, aber sehr komprimierten Syntax und lassen es dann zu vollständigem, richtigem HTML-Code erweitern. Das Ergebnis fühlt sich an wie Magie: Eine Textzeile wird auf Hunderte von Syntaxzeilen erweitert, und Sie haben eine statische Seite oder sogar die Struktur einer vollständigen Site in wenigen Minuten fertig.

Hier erfahren Sie, wie Sie mit Emmet eine vollständig statische Webseite erstellen können. Visual Studio-Code wird für dieses Tutorial verwendet, da es mit integrierter Unterstützung für Emmet geliefert wird. Sie können Emmet in anderen Editoren wie Sublime Text und Atom verwenden, müssen dies jedoch durch eine Erweiterung unterstützen.

Erstellen Sie die Datei Ihrer Website

Öffnen Sie zunächst Visual Studio Code.

Wählen Sie „Datei -> Neue Datei“, um ein neues, leeres Dokument zu erstellen.

Wählen Sie „Datei -> Speichern unter“, um Ihre Datei zu speichern und ihr die Erweiterung „html“ zu geben.

Grundstruktur

Die Elemente jeder Webseite sind in Gruppen und Untergruppen organisiert. Beim Codieren mit Emmet müssen Sie immer im Hinterkopf behalten, dass jede Gruppe Elemente enthält, die selbst Gruppen mit noch mehr Elementen sein können.

Notiz: Obwohl wir die Grundlagen erklären, wäre es besser, wenn Sie mit den Grundlagen der HTML-Syntax vertraut sind, bevor Sie fortfahren.

Auf einer sehr einfachen, obersten Ebene enthalten die meisten Websites drei solcher Gruppen/Abschnitte: eine Kopfzeile, einen Hauptteil für den Kerninhalt und eine Fußzeile. Um diese mit Emmet zu erstellen, geben Sie Folgendes ein:

#header+#mainsite+#footer

Das „#“ vor jedem Wort bedeutet, dass jede Gruppe ein div mit einer ID ist. Drücken Sie die Eingabetaste am Ende der Zeile, um Emmet in Aktion zu sehen und diese kleine Phrase in drei Zeilen strukturierten HTML-Codes zu verwandeln.

Header-Struktur

Der Header einer typischen Site enthält das Logo und ein oder zwei Menüs. Um diese zu Ihrer Seite hinzuzufügen, können Sie den erweiterten HTML-Code aus dem vorherigen Schritt beibehalten und direkt in die Header-Div eingeben. Sie können dann etwas eingeben wie:

#logo+#menu_top+#menu_main

Drücken Sie die Eingabetaste, um dies ebenfalls zu erweitern, und Sie haben drei weitere Divs für das Logo Ihrer Site und zwei Menüs in Ihrem Header.

Gruppierung in Emmet

Mit Emmet gruppieren Sie Elemente, indem Sie sie in Klammern setzen. Auf diese Weise können Sie komplexe Strukturen für Ihre Seiten erstellen. Also alles bis jetzt rückgängig machen und nur dein Basic behalten #header+#mainsite+footer Code von vorher.

Ersetze das #header in deinem Code mit folgendem:

(#header>.logo+.menu.top+.menu.main^)

In Emmet kannst du ein Level fallen lassen, indem du die > Charakter und kann ein Level aufsteigen, indem man die ^ Charakter. Auf diese Weise können Sie in ein Element einsteigen, dort andere hinzufügen und dann wieder nach oben gehen.

Das Ergebnis sollte wie folgt aussehen:

(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer

Das obige würde bedeuten: „Füge eine Div (Gruppe) mit der ID #header hinzu. Fügen Sie darin drei Divs mit den Klassen „.logo“, „.menu.top“ und „.menu.main“ hinzu. Kehren Sie eine Ebene nach oben außerhalb der Gruppe zurück und fügen Sie daneben zwei weitere Divs mit den IDs „#mainsite“ und „#footer“ hinzu.

Beitragsstruktur

Ein einfacher Beitrag auf einer typischen Website enthält normalerweise die folgenden Elemente:

• Titel
• Bild
• Auszug (als Textabsatz)

Es sollte auch einen Link bieten, der es dem Besucher ermöglicht, den eigentlichen Beitrag zu lesen und möglicherweise Links zu seinen Kategorien, Tags usw. Der Einfachheit halber verwenden wir jedoch vorerst nur diese drei Elemente.

Dies ist der Code, den wir hinzufügen werden:

(.post>h3{Post Title $}+img+p{Post Excerpt})*5

Dies weist Emmet an, „eine Div mit der Klasse .post zu erstellen. Platzieren Sie darin einen Titel der H3-Überschrift, ein Bild und einen Absatz für den Auszug.

Mit „{TEXT}“ hinter einem Element definieren Sie dessen Inhalt. Mit „{Post Title}“ sagt Emmet also, dass der Inhalt jedes H3-Titels der Platzhaltertext „Post Title“ ist. Sie können „Post Title“ in Ihren Namen oder eine beliebige Textzeichenfolge ändern, und er wird als Inhalt Ihrer Post-Titel verwendet, wenn der Code erweitert wird.

Die $ neben „Post Title“ ist eine numerische Variable, die in Verbindung mit der „5“ funktioniert, die außerhalb der Klammern zu sehen ist. Die *5 nach den Klammern weist Emmet an, den Inhalt der Klammern fünfmal zu wiederholen. Die $ wird durch die Iterationsnummer jedes Beitrags ersetzt. Ersetzen Sie diese Zahl durch die Anzahl der Beiträge, die Sie auf Ihrer Seite haben möchten.

Fügen Sie dies dem eigentlichen Code hinzu. Es sollte so aussehen:

(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)

Fußzeilenstruktur

Für den Footer fügen wir zwei Gruppen hinzu – zwei Divs mit den Klassen „.design“ und „.copyright“.

Der Code lautet wie folgt:

(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))

Dadurch wird ein div mit der Klasse „.design“ erstellt. Darin befindet sich ein Link mit der Klasse „.designerslink“. Daneben wird ein zweites div mit der Klasse „.copyright“ hinzugefügt. In diesem div befindet sich ein Absatz mit Klartext mit dem Inhalt „Copyright 2020 My Name“.

Das Ergebnis wird dieses sein:

(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))

Drücken Sie jetzt einfach die Eingabetaste und Ihre Site ist fertig!

Mit einem Tastendruck wird alles, was wir bisher gesehen haben, und dieser ultra-kondensierte Haufen von Zeichen, in Dutzende von Zeilen richtiger HTML-Syntax für eine ganze Seite umgewandelt!

Speichern Sie die Änderungen an der Datei, indem Sie drücken Strg + S oder besuchen Sie „Datei -> Speichern“. Starten Sie Ihren Browser, um Ihre Arbeit anzuzeigen. Suchen Sie dann entweder über „Datei -> Öffnen“ oder einen externen Dateimanager Ihre HTML-Datei und öffnen Sie sie manuell im Browser.

Einpacken

Sie haben die Grundlagen der Verwendung von Emmet zum Erstellen Ihrer HTML-Datei kennengelernt. Natürlich können Sie jederzeit zu Ihrem Code zurückkehren, um ihn zu optimieren oder um weitere Dinge zu erweitern.

Wussten Sie schon von Emmet? Verwenden Sie andere Verknüpfungen, die beim Erstellen von Websites helfen? Sagen Sie es uns im Kommentarbereich unten.