MezData-Logo

Prinzipieller Aufbau von HTML-Dokumenten

HTML-Quellen waren reiner ASCII Text

HTML-Dokumente waren reine ASCII-Text-Dateien 7Bit. Sie können mit jedem einfachen Text-Editor bearbeitet werden.

In reinem 7Bit ASCII Text sind keine Umlaute, keine Sonderzeichen vereinbart, daher kam es zu einer plattformabhängigen Codierung dieser Zeichen (ein 'ü' hat unter Windows einen anderen Code als unter Mac OS oder Unix).
Um Dokumente plattformübergreifend darstellen zu können, wurden für nicht ASCII Zeichen in HTML sogenannte Entities (Konstanten) vereinbart :

Bsp.: "für" heißt auf HTML "für" das 'ü' wurde durch 'ü' ersetzt.

Außerdem wurden für bestimmte Schlüsselzeichen '<','>','&' in HTML Entities definiert.

Liste einiger Entities:

ä &auml; Ä &Auml; ß &szlig; & &amp; Erzwungenes Leerzeichen &nbsp;
ö &ouml; Ö &Ouml; < &lt; " &quot;
ü &uuml; Ü &Uuml; > &gt; © &copy;

Heute wird die UTF-8 Codierung eingesetzt, hierbei können z.B. die Entities für die Umlaute entfallen. Mehr zur Codierung...

HTML-Dokumente sind Container für Informationsobjekte

Als "Markup Language" ist HTML eine Auszeichnungssprache für Informationsobjekte. Informationsobjekte sind z.B. Überschriften, Absätze, Tabellen, Bilder, Links, Videos, Sound usw. Entweder befinden sich diese Objekte direkt in der HTML-Datei, oder sie werden nachgeladen und in das Dokument eingebunden.

Tags als Verpackungsmaterial

In einem HTML-Dokument wird die Information inhaltlich strukturiert.
Um eine Zeichenfolge "Winter ist vorbei" als Überschrift kenntlich zu machen, wird diese in sogenannte Tags eingeschlossen -verpackt.
Die Tags werden nach der Klasse benannt, der in ihnen steht.

Es gibt zwei Typen von Tags:

<...> einleitende Tags (Anfang der Verpackung)

</...> abschließende Tags (Ende der Verpackung)

Beispiele für Informationsobjekte:

Überschrift1 (Headline1): größte Überschrift von 1..6. sprich: "ha eins täg"

<h1> Winter ist vorbei </h1>

Textabsatz (Paragraph) sprich: "pe täg"

<p> Die Temperaturen steigen wieder </p>

Kommentare im Quelltext -nicht jedes Tag braucht einen Abschluß:

<!-- wichtige Anmerkung, nur im Quelltext, nicht im Browser sichtbar! -->

Früher spielte es keine Rolle, ob die Tags in Form von Klein- oder Großbuchstaben notiert werden. Somit waren z.B. <h1> und <H1> äquivalent. Heute soll alles klein geschrieben werden.

Das Skelett von HTML, die Umverpackung

Damit aus den einzelnen Informationsobjekten ein richtiges HTML-Dokument wird, bedarf es noch etwas Umverpackung:

<!DOCTYPE html>
<html lang="de">  
 
<head>  
 
<title> Titel des Dokuments </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>  
 
<body>  
 
<h1> &Uuml;berschrift (Headline) </h1>
 
<p> Textabsatz (Paragraph) </p>
</body>  
</html>  

<!DOCTYPE html> Sagt dem Browser, dass der Code HTML5 ist.

<html> und </html> Umklammern den HTML-Teil.

Im Head-Abschnitt befindet sich die Aufschrift (der Titel, zu sehen im Titel des Browserfensters) der Packung.
Optional außerdem eine Beschreibung des Inhalts, die Zutatenliste (Stichwörter) usw. siehe Meta-Tags..

<meta charset="UTF-8"> Gibt die verwendete Zeichenkodierung an.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> Gibt die Einstellung bzgl. des Browsersichtfensters vor.

Der Body-Abschnitt umschließt den im Browser sichtbaren Inhalt des Dokuments.

Wichtig: title darf nie fehlen! Ab HTML5 sind html, head und body optional.

Praxis: Selber machen!

Aufgabe: Erstelle eine sehr einfache Web-Site!
  1. Erstelle einen Projektordner "my-fist-html"
  2. Einen Texteditor öffnen, z.B. Notepad (Windows), BBEdit (Mac), KEdit (Linux)
  3. Quelltext (siehe unten) kopieren und einfügen.
  4. Speichern unter "index.html" im Projektordner.
  5. Mit Browser betrachten..
    Tip: Rechte Maustaste -> Quelltext anschauen, und gleich editieren, speichern, im Browser aktualisieren
  6. Erweitern, verändern, testen...

Testen mit validator.w3.org

Zur Beispielseite..

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praxis: Erstelle ein Dokument</title>
  </head>
  <body>
    <h1>Der schnelle Weg zum Erfolg</h1>
    <p>Ruhig und klar vorgehen</p>
    <p>Save often, Save early</p>
    <p>Sichere oft und möglichst früh, denn Rechner stürzen ab...</p>
  </body>
</html>
Wichtig: Formatierung des Textes zur besseren Lesbarkeit zwei Leerzeichen innerhalb eines Blockes einrücken!
<table>
  <tr>
    <td>Bla Bla</td>
  </tr>
</table>

Die Blockstruktur soll erkennbar sein!