HTML Grundlagen

Was ist HTML?

HTML (Hypertext Markup Language) ist die Standardsprache zur Erstellung von Webseiten. HTML beschreibt die Struktur einer Webseite semantisch und bildet das Grundgerüst für den Inhalt.

HTML-Dokument Grundstruktur

Ein einfaches HTML-Dokument besteht aus folgenden Elementen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Willkommen zu HTML</h1>
    <p>Dies ist ein Absatz.</p>
  </body>
</html>

HTML mit Emmet schneller schreiben

Emmet ist ein Produktivitätstool für Webentwickler, das in vielen Code-Editoren (wie VS Code, Sublime Text, Atom) integriert ist und die HTML-Erstellung erheblich beschleunigt.

Emmet-Grundlagen

In VS Code können Sie einfach die Abkürzung eingeben und dann die Tab-Taste drücken:

Nach Drücken der Tab-Taste erzeugt dies automatisch eine komplette HTML5-Grundstruktur:

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

Weitere nützliche Emmet-Abkürzungen:

h1 erzeugt <h1></h1>
p erzeugt <p></p>
ul>li*3 erzeugt eine ungeordnete Liste mit 3 Elementen:

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

div.container>header+main+footer erzeugt eine verschachtelte Struktur:

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Emmet spart enorm viel Zeit bei der HTML-Erstellung und reduziert Tippfehler. Unter folgenden Ressource finden Sie eine wertvolle Übersicht über die Emmet-Syntax und Möglichkeiten.

Emmet Cheatsheet Cheatsheet für Emmet-Shortcuts

HTML-Elemente

HTML-Elemente bestehen aus einem öffnenden Tag, Inhalt und einem schliessenden Tag:

<tagname>Inhalt</tagname>

Einige Tags sind selbstschliessend (leere Elemente):

<br />
<!-- oder -->
<br />

Kommentare in HTML

Kommentare sind für Notizen im Code, die nicht angezeigt werden:

<!-- Dies ist ein Kommentar -->

Übung: Grundstruktur

Erstellen Sie die Grundstruktur für Ihren persönlichen Blog mit dem Namen “Mein Web-Tagebuch”
- Verwenden Sie Emmet für die Grundstruktur (! + Tab)
- Setzen Sie die Sprache auf Deutsch
Die Seite soll folgendes enthalten:
- Einen passenden Titel im <title>-Element (“Mein Web-Tagebuch” oder ein eigener kreativer Name)
- Eine Hauptüberschrift (<h1>) mit dem Namen Ihres Blogs
- Eine Unterüberschrift (<h2>) mit einem persönlichen Slogan oder Motto
- Einen einführenden Absatz, der kurz beschreibt, worum es in Ihrem Blog gehen wird
- Einen Absatz mit einer kurzen Vorstellung Ihrer Person
- Einen HTML-Kommentar mit Ihrem Namen und dem heutigen Datum
Speichern Sie die Datei als “index.html” - diese wird die Startseite Ihres Blogs sein

Bonus

Erstellen Sie eine Fusszeile, die das aktuelle Jahr, Ihren Namen und einen Copyright-Hinweis enthält. Verwenden Sie dafür das Entity-Zeichen für das Copyright-Symbol (©).

Lösung überprüfen

Öffnen Sie die Datei in einem Browser
Prüfen Sie, ob alle Elemente korrekt angezeigt werden
Prüfen Sie mit “Rechtsklick > Seitenquelltext anzeigen”, ob Ihr Kommentar sichtbar ist