HTML - Lektion 1

Eine Website erstellen - die HTML-Dokumentstruktur

Beispieldokument

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de" >
    <head>
      <title>Titel der Seite</title>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
     Hallo Welt!
    </body>
  </html>

Übungen

Erstelle auf deinem Arbeitsrechner in einem Texteditor eine html-Datei mit Dokumenttyp-Deklaration, Head und Body. Speichere sie unter einem passenden Namen ab und öffne sie dann in einem Browser ( → Betrachte die Datei lokal).
Verändere den Inhalt deiner Datei (füge z.B. ein Wort hinzu) und betrachte deine Änderungen. Notiere detailliert die notwendigen Arbeitsschritte, um die Ausgabe einer HTML-Datei zu verändern.

Textauszeichnung mit HTML

In einem html-Dokument wird also jeglicher Inhalt (content) mit einer "Bedeutung" versehen (man sagt, alle Inhalte werden semantisch ausgezeichnet). Eine Überschrift wird also nicht nur inhaltlich aufgeschrieben, sondern ihr wird auch ihre "Bedeutung" für das Dokument zugewiesen, z.B. wird sie semantisch als Überschrift erster Ordnung (Hauptüberschrift) ausgezeichnet. Kurz gesagt:

Mit HTML wird die inhaltliche Struktur festgelegt – nicht das Aussehen/Layout.
Die Auszeichnung des Inhalts erfolgt in HTML durch Anfangs- und Endmarkierungen (Tags):
<mstart>auszuzeichnender Text</mende>
Start-Tag, Inhalt und Ende-Tag bilden ein HTML-Element
Elemente können verschachtelt werden, dürfen sich dabei aber nicht überschneiden.

Die wichtigsten Strukturelemente für Texte sind:

Überschriften (in verschiedener Ebene)
Absätze
Auflistungen ("Spiegelstriche")
Aufzählungen ("Nummern")

Übung

Lies dir das Tutorial von SelfHTML durch und mache die Aufgaben des hier verlinkten Kapitels.