▲

in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Bei Verständnis­problemen: in den Informationsquellen finden sich Links auf einführende Literatur.

Zu viel Information?
Macht nix, da muss jeder mal durch, der seine Weblica-Seiten indivi­dualisieren will  ...
 

Notationskonventionen

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

Seite erstellt / geändert

e 06.01.13  /  update

Codeschnipsel 21: Die Struktur eines HTML-Dokuments


Auf dieser Seite werden die wesentlichen Elemente und die Struktur des HTML-Dokuments einer mit Weblica erstellten Webseite vorgestellt.

Wichtige Seitenelemente sowie individuelle Formatierungen sind farblich hervorgehoben und werden unten kommentiert.

Die Grundstruktur eines HTML-Dokuments


Quellen: W3C - die globale Struktur eines HTML-Dokuments (in Englisch) und der Quellcode dieser Seite (Anzeige mit "Ctrl u" in Firefox, Opera und Chrome, "Ctrl Alt u" in Safari)

Die Grundstruktur einer von Weblica generierten Webseite besteht aus vier Elementen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1)
<html xmlns="http://www.w3.org/1999/xhtml" lang="de_CH"> 2)
<head>
    Header 3)
</head>
<body>
    Body 4)
</body>
</html>

Anmerkungen:
1) generiert: Spezifikation des HTML-Dokumenttyps
2) generiert: XML-Deklaration
3) Header des HTML-Dokuments, Inhalt siehe Komponenten des Seiten-Headers
4) Body (Rumpf) des HTML-Dokuments, Inhalt siehe Komponenten des Seiten-Bodys

Man sieht sehr schön, dass ein HTML-Dokument (gemäss W3C-Standard) im Wesentlichen aus zwei Teilen besteht: dem Head und dem Body.
Was im Head und was im Body stehen darf, ist im Standard genau geregelt. Deren Elemente werden in den beiden folgenden Abschnitten genauer betrachtet.


zurück   |   nach oben

Die Komponenten des Seiten-Headers

Die Elemente des Seitenkopfs:

<head> 1)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 2)
<title>Browser-Titel</title> 3)
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 4)
<link href="../../lcenter.css" rel="stylesheet" type="text/css" media="all" /> 5)
<link href="../../print.css" rel="stylesheet" type="text/css" media="print" /> 6)
<meta http-equiv="content-language" content="de_CH" /> 7)
<meta name="description" content="Seitenbeschreibung" /> 8)
<meta name="keywords" content="Schlüsselwörter" /> 9)
<style type="text/css"> 10)
/*<![CDATA[*/ 11)
      CSS-Code aus den Seiteneigenschaften 12)
      #centerContent .textParagraph, .pagecontentsParagraph
         { font-size: 90%  }
      .....
    /*]]>*/
</style>
<script src="_js/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> 13)
<meta name="author" content="Seitenautor" /> 14)
</head> 15)

Anmerkungen:
1) generiert: head-Tag, kennzeichnet Beginn des Seitenkopfes
2) generiertes Metaelement für Zeichensatz
3) Browser-Titel, wird im Browser-Kopf angezeigt
    Übernahme aus den Seiten-Eigenschaften
4) generiert: Verweis auf's Icon
5) generiert: Verweis auf das Stylesheet (CSS)
6) generiert: Verweis auf das print-Stylesheet (CSS)
7) generiertes Metaelement für die Sprache
8) generiertes Metaelement für die Seitenbeschreibung
    Übernahme aus den Seiten-Eigenschaften
9) generiertes Metaelement für die Schlüsselwörter
    Übernahme aus den Seiten-Eigenschaften
10) leitet Stil-Definition ein,
     wird aus den Seiten-Eigenschaften, Rubrik "HTML/CSS" übernommen
11) generiert: definiert Beginn von normalem Textabschnitt
12) CSS-Code, wie in den Seiten-Eigenschaften definiert (eingegeben)
     individuelle Formatierungen von Seiten-Elementen
13) generiert: Verweis auf jQuery-Javascript-Datei
14) manuell eingefügtes Meta-Element: Autor der Seite
     wird aus den Seiten-Eigenschaften, Rubrik "HTML/CSS" übernommen
15) generiert: Kennzeichnung Ende des Seitenkopfes

Zusammenfassung: Der Head enthält
  • den Browser-Titel (Pflichtelement), 
  • Links (Verweise) zu anderen Dokumenten, 
  • Meta-Daten (Meta-Elemente), 
  • Stilvorgaben (Formatierungen / CSS, optional) für die aktuelle Seite, die das CSS ergänzen oder modifizieren, und 
  • (optional) Javascript oder Verweise auf Javascript-Dateien.


zurück   |   nach oben

Die Komponenten des Seiten-Bodys

Die Elemente des Seiten-Bodys:

<body> 1)
<p id="zzNachoben"><a href="#top">top</a></p> 2)
<script type="text/javascript"> 3)
//<![CDATA[
    Javascript für die Infoboxen rechts oben 4)
//]]>
</script>
<a name="top" id="top"></a> 5)
<div id="siteContainer"> 6)
    <div id="header"> 7)
    </div>
    <div id="mainNavigation"> 8)
    </div>
    <div id="mainContent"> 9)
        ......
        <div id="leftContent" class="sideColumn"> 10)
        </div>
        <div id="centerContent"> 11)
            <h1 class="pageTitle">Codeschnipsel 21: Die Struktur ....</h1> 12)
            <div id="pa3938" class="textParagraph paragraphBase "> 13)
                .... 14)
            </div>
            <div id="pa3939" class="pagecontentsParagraph ... backgroundGreyShadow"> 15)
                ....
            </div>
            .....
            <h2 id="ha3941" class="title">Die Grundstruktur eines HTML-Dokuments</h2> 16)
            <div id="pa3941" class="textParagraph paragraphBase "> 17)
                ....
            </div>
        </div>
        <div id="footer"> 18)
            ....
        </div>
    </div>
</div>
</body> 19)

Anmerkungen:
1) generiert: body-Tag, kennzeichnet Beginn des Seiten-Bodys
2) Individualisierung: schwebender top-Button links vom Seitenrand,
    in den Seiten-Eigenschaften der Startseite eingefügter HTML-Code
3) leitet Javascript-Abschnitt ein
    wird aus den Seiten-Eigenschaften übernommen
4) Individualisierung: Javascript zur Steuerung des top-Buttons
    wie in den Seiten-Eigenschaften eingegeben
5) generiert: Sprungziel für nach oben / top
6) generiert: Bereich (division) für die gesamte Seite
7) generiert: Unterbereich der Seite: Seitenkopf
8) generiert: Unterbereich der Seite: Hauptnavigation im Kopf
9) generiert: Seitenrumpf: Bereich unterhalb Hauptnavigation
10) generiert: linke Seitenspalte
11) generiert: mittlere Seitenspalte
12) Seiten-Titel, Übernahme aus den Seiten-Eigenschaften
13) Textabsatz mit einer eindeutigen id und Zuweisung zweier CSS-Klassen
14) Absatz-Inhalt, wie im Weblica-Editor eingegeben
15) Absatz Inhaltsverzeichnis (Absatzliste) mit Klassenzuweisung,
     die zugewiesene Klasse ist im globalen CSS definiert
16) Absatz-Überschrift der Ebene h2,
      wird aus den Absatzeigenschaften übernommen
17) Textabsatz wie im Weblica-Editor eingegeben
18) Seitenfuss, Inhalt gemäss Weblica-Feld $(footer)
19) generiert: Kennzeichnung Ende des Seiten-Bodys

Generell: Man erkennt in diesem Ausschnitt aus dem Body des Quellcodes bereits sehr gut, wie tief der Code geschachtelt ist.


zurück   |   nach oben

Kommentare zu wichtigen Seitenelementen und Individualisierungen


Head Nr. 3) Browser-Titel:
Der Browser-Titel wird aus den Seiten-Eigenschaften, Rubrik "Allgemein", Feld "Browser-Titel" übernommen. Dieses Feld ist mit dem Weblica-Standard-Feld $(browserTitle) vorbelegt.
$(browserTitle) enthält $(page.title), das ist der Seitentitel (die Seitenüberschrift). Mehr dazu in weitere Weblica-Standardfelder.
Das Feld "Browser-Titel" kann überschrieben werden.
Hier mehr zur Bedeutung von Browser-Titel bzw. Fenster-Titel.

Head Nr. 5) Stylesheet:
Das Stylesheet enthält alle Formatvorgaben in CSS-Code, die im Menü Projekt, Menüpunkt CSS eingegeben wurden.
Vorteil: alle hier erfassten Formatierungen sind projektweit gültig.

Head Nr. 8) und 9) Seitenbeschreibung und Schlüsselwörter:
Siehe auch Metadaten, die von Weblica generiert werden.
Zur Bedeutung dieser beiden Meta-Elemente siehe Description: Kurzbeschreibung des Seiteninhalts und Keywords: Schlüsselwörter / Suchbegriffe.

Head Nr. 12) CSS-Code aus den Seiteneigenschaften:
Der auf der Codeschnipsel-Hauptseite in den Seiten-Eigenschaften in der Rubrik "HTML/CSS" erfasste CSS-Code wird auf die vorliegende Seite vererbt und von Weblica automatisch in den Head eingefügt.
Siehe dazu auch Rubrik "HTML/CSS" in den Seiteneigenschaften.

Head Nr. 14) Meta-Element author:
Das author-Metaelement ist in einem Weblica-Feld enthalten, welches auf der Startseite in den Seiteneigenschaften, Rubrik "HTML/CSS" steht und auf alle Unterseiten vererbt wird.
Siehe auch Weitere, frei definierbare Metadaten und Weblica-Felder.

Body Nr. 2) Text-Paragraph:
Der HTML-Code für diesen Text-Paragraph ist im gleichen Weblica-Feld wie Head Nr. 14) enthalten.
Weblica generiert den Paragraph automatisch an der richtigen Stelle - zu Beginn des Bodys.
Inhalt dieses Paragraphs ist der schwebende top-Button links. Dem Paragraph ist die Id "zzNachoben" zugewiesen, welche den Button formatiert und im globalen CSS definiert ist.
Alles in allem eine sehr reizvolle Konstuktion, die die Mächtigkeit und die einfache Handhabbarkeit von Weblica anschaulich demonstriert.

Body Nr. 4) Javascript:
Das Javascript für die Steuerung der Anzeige der Infoboxen am rechten Seitenrand ist (gleich wie Head Nr. 12) in den Seiten-Eigenschaften der Codeschnipsel-Hauptseite enthalten und wird von Weblica automatisch auf die vorliegende Seite vererbt.

Body Nr. 12) Seitentitel:
Der Seitentitel wird von Weblica aus den Seiten-Eigenschaften, Rubrik "Allgemein" übernommen und als Überschrift h1 in den Body eingefügt.
Der Seitentitel (Überschrift h1) hat grosse Bedeutung, mehr dazu in Seiten- und Kapitelüberschriften.

Body Nr 15) Formatierung der Absatzliste dieser Seite:
Die Klasse backgroundGreyShadow ist im globalen CSS definiert. Sie wird dem Absatz mit dem Inhaltsverzeichnis in den Absatzeigenschaften, Rubrik "CSS/HTML" im Feld "Zusätzliche CSS-Klassen" zugewiesen.
Interessanter Nebenaspekt: die in dieser Klasse spezifizierte Hintergrundfarbe wird mittels eines Weblica-Feldes vorgegeben. Diese Technik stellt sicher, dass an allen Orten die gleiche Hintergrundfarbe angewandt wird und erlaubt, diese Farbe bei Bedarf an nur einem Ort zu ändern.
Inhalt dieses Felds: sechsstellige Hexadezimalnummer der Farbe, siehe Varianten der Spezifikation von Farben (hex, rbg und rgba).

Body Nr. 16) Absatz-Überschrift Ebene h2:
Die Absatzüberschrift (Kapitelüberschrift) wird aus den Absatzeigenschaften übernommen. In den Absatzeigenschaften kann spezifiziert werden, ob der Absatztitel angezeigt werden soll, oder nicht.
Empfehlung: die Absatzüberschrift sollte grundsätzlich angezeigt werden, sie dient der Gliederung des Textes und damit der Orientierung des Seitenbesuchers. Ausserdem wird sie von Suchmaschinen ausgewertet, siehe dazu Seiten- und Kapitelüberschriften.

Body Nr. 18) Footer / Seitenfuss:
Im Webseiten-Fuss wird der Inhalt des Weblica-Standardfeldes $(footer) angezeigt. Der gewünschte Inhalt des Seitenfusses wird in den Feld-Eigenschaften eingegeben.


zurück   |   nach oben

Beziehungen zwischen Weblica-Code-Schnittstellen und HTML-Dokumentstruktur

Zwischen den Code-Schnittstellen in Weblica und den Komponenten der HTML-Dokumentstruktur bestehen klar definierte Beziehungen:

CSS-Code (Menü Projekt, Menüpunkt CSS) wird von Weblica in den Stylesheets versorgt.

CSS-Code in den Seiteneigenschaften wandern in den Head des HTML-Dokuments.

HTML-Code z. B. für den Einbau eines Audio-Players in einem HTML-Absatz wird im Body des HTML-Dokuments (des Quellcodes) eingebaut.

Selbst geschriebener Javascript-Code in den Seiteneigenschaften oder in einem HTML-Absatz landet im Body des HTML-Dokuments.

Eine ausführlichere Darstellung der Beziehungen findet sich in Einbauorte für Codeschnipsel in Weblica.


zurück   |   nach oben

Links zu HTML 5 (Provisorium, wird ausgebaut)


HTML5 Introduction
HTML5 Migration


zurück   |   nach oben