Was ist HTML?

HTML zählt zu den maschinenlesbaren Sprachen, die auch als Computersprachen (Syntax) bezeichnet werden... Zusätzlich kann der HTML-Code Angaben in Form von Metainformationen enthalten...

HTML hat sich aus der heute weitgehend verschwundenen Metasprache SGML entwickelt...

  • Dokumententyp-Deklaration: Angabe der verwendeten HTML-Version wie z. B.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE html>
  • Kennzeichnung von Kommentaren: Kommentare fügt man in HTML nach dem Muster:
    <!-- Kommentar -->
  • Attribute: Ergänzende Eigenschaften von Tags nach dem Muster:
    <tag attribut="wert">

Die erste HTML-Seite anlegen

Im ersten Schritt des HTML-Tutorials erstellen Sie eine erste einfache Seite, die Sie mithilfe Ihres Browser anzeigen lassen können. Dabei handelt es sich allerdings noch nicht um eine valide HTML-Page, die nach bestimmten Standards aufgebaut ist, sondern um eine reine Testseite. Öffnen Sie zunächst den Editor und speichern Sie die neue Datei unter dem Namen test. Wählen Sie dabei „Hypertext Markup Language file“ als Dateiformat aus, damit der Browser später auch weiß, dass es sich um eine HTML-Seite handelt. Nutzen Sie einen einfachen Editor, müssen Sie alternativ den Dateityp „Alle Dateien“ auswählen (Codierung: UTF-8) und die HTML-Kennzeichnung direkt im Feld „Dateiname“ vornehmen, indem Sie die Datei unter dem Namen test.html speichern.

Das HTML Grundgerüst

<!DOCTYPE html> Declaration für den Browser bei HTML-LS
<html> Einleitung es handelt sich um eine HTML-Page
<head> Das Head-Tag (Zentraldokument) wird eingeleitet
<meta charset="utf-8"> UTF Zeichensatz für Umlaute
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Leitet den wievport ein (später mehr)
<body> Der Sichtbare Bereich „Content“ wird geöffnet
<p>Das ist der sichtbare Bereich</p>
</body> Der Sichtbare Bereich „Content“ wird geschlossen
</html> Die HTML-Page wird geschlossen.
Bezeichner Erklärung
Doctype Es gibt von HTML verschiedene Versionen (HTML 1 bis HTML 4.01 und HTML-LS). Eine Zeit lang wurden Webseiten nicht nur in HTML, sondern auch in XHTML geschrieben. Die Dokumenttyp-Deklaration am Anfang eines jeden HTML-Dokumentes informiert über die Art des Dokumentes.
In HTML-LS können Sie die Dokumenttyp-Deklaration rigoros vereinfachen:[1] Angabe einer Dokumenttyp-Deklaration <!DOCTYPE HTML>
HTML-Element Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Stammbaum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht.
Head Das head-Element (deutsch: Kopf) ist in allen HTML-Standards ein Pflicht-Element und enthält Informationen über den im body notierten Text. Es wird Zentraldokument genannt.
UTF8 Wenn Sie für HTML-LS-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.
Des Weiteren muss das Dokument auch mit dieser Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein.
viewport Für mobile Geräte ist wichtig, dass die Webseite „responsiv“ ist.
Angabe, dass der Viewport eingestellt wird, aber dennoch skaliert werden darf.
title Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen.
Hier einige Beispiele:
  • Browser zeigen ihn in der Registerkarte (Tab) an,
  • Microsoft Windows blendet ihn in der Taskleiste als Tooltip ein,
  • Suchmaschinen verwenden ihn in der Regel als Bezeichnung für einen Treffer
  • Nutzern von Vorleseprogrammen wird der Titel beim Wechsel auf eine Seite als erstes vorgelesen.

Dem Titel kommt also eine besondere Bedeutung zu und er sollte daher aussagekräftig sein. Um die einzelnen Seiten eindeutig unterscheiden zu können, empfiehlt es sich außerdem, einen Titel nicht für zwei oder mehr HTML-Dokumente innerhalb eines Webauftrittes zu verwenden. Vergeben Sie besser für jede Seite einen einmaligen Namen.

Body = sichtbarer und strukturierter Aufbau Was Sie in das body-Element schreiben, wird im Hauptbereich des Browsers dargestellt, der für die eigentliche Webseite reserviert ist (Viewport). In diesen Bereich kommen alle auf der Webseite sichtbaren Informationen.
<body> Inhalt Ihrer Seite </body>

Semantik

Im Webdesign wird versucht, Seitenstrukturierung und Textstrukturierung nach semantischen Gesichtspunkten zu organisieren. HTML ermöglicht es typische Elemente eines textorientierten Dokuments wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.

Semantik bezieht sich auf die Bedeutungslehre, die untersucht, welche Bedeutung Zeichen wie Wörter, Phrasen oder Symbole haben. In der Webentwicklung sorgt semantisch korrektes HTML dafür, dass Inhalte eine klare und eindeutige Bedeutung erhalten.

Erste "Html-Seite" erstellen

Erste Html mit Notepad++

Im nächsten Video erkläre ich, wie mit NP++ eine Index.html erstellt wird.

Html-Seite mit NP++ erstellen

Werkzeug vorbereiten

Um mit NP++ etwas erleichtert arbeiten zu können, sollten ein paar Einstellungen vornehmen.

NP++ einrichten

Was ist HTML?

Kurze Erklärung zum Html-Standard

Die "whatwg" hat kurze Updatezeiten
HTML-Living Standard

Das HTML-Grundgerüst

Wir erstellen eine grundlegende Struktur, die für jede HTML-Seite gebraucht wird.
Die se Struktur wird sich im Laufe des Kurses erweitern

HTML-Grundgerüst