Gestaltungsvorschriften für Hypertextdokumente

Dokumenteninfo

Redakteur

Prof. Geribert E. Jakob

Abstrakt:
Dieses Dokument beschreibt die Regeln, Verfahren und technischen Details für die Erstellung von Hypertextdokumenten auf Basis vorgegebener Templates. Die Hypertextdokumente sind i.d.R. als Leistungsnachweise in den Kursen von Prof. Jakob zu erstellen.
letzte Bearbeitung: 28.03.2006

Inhaltsverzeichnis

Grundlegendes
Archiv, Templatetypen und -struktur, Verzeichnisse, Nomenklatur
Download, Entpacken, Bearbeiten, Packen, Hochladen
Das html-Template
CSS
Non-html-Inhalte und Nomenklatur
Relative Adressierung

I. Grundlegendes

Soweit Dokumentationen oder Projektvorhaben auf Basis von Hypertexten zu realisieren sind, ist das nachfolgend beschriebene Template zwingend zu benutzen und alle hier genannten Regeln einzuhalten.

Die zu erstellenden Dokumente dienen i.d.R. nicht nur als Leistungsnachweis im Rahmen veranstaltungsbegleitender Assigments der Kurse von Prof. Jakob, sondern auch als Quelle für Materialien, da die Ergebnisse auf dem Webserver jmedia.iuw.h-da.de publiziert werden.

Über das Design läßt sich sicher streiten. In vorliegenden Fall stehen folgende Aspekte im Vordergrund:

Realisierung des Prinzips: Form follows Function.
Da überwiegend Dossiers erstellt werden, ist die Form angemessen.
Trennung von Gestaltung und Inhalt durch Cascading Stylesheets.
Benutzer brauchen sich nicht um die Formatierung kümmern, sondern können sich auf die Erstellung der Inhalte konzentrieren. Die Gestaltung der gesamten Site kann über die zentralen Stylesheets mit wenigen Änderungen grundlegend und umfassend modifiziert werden.
Das Design ist auf allen "Major Platforms" getestet.
Es ist alles andere als selbstverständlich, dass eine Webseite in den Browsern Internet Explorer, Opera, Morzilla und Firefox auf Apple, Linux und Windows gleich angezeigt wird. Das Template erfüllt dieses Kriterium, sogar weitgehend dann, wenn in den Browsern andere Zoom- und Anzeigeeinstellungen verwendet werden, als die standardmäßigen.
Benutzer können, soweit erforderlich, über das Stylesheet ./css/style_userspecific-n.css, wobei n = 1, 2, ... (Gruppennummer), eigene Formatierungen für html-Tags anlegen.
Das Layout passt sich weitehend dynamisch der Bildschirmgröße an.
Die Nutzbreite von 700 px. ist die Grundlage für 1:1-Ausdrucke der Bildschirmanzeige auf Druckern. D.h., dass die Bildschirmdarstellung und die Druckdarstellung identisch sind.
Die Menüs zur Navigation sind ohne Scrollen stets im direkten Zugriff.
Erzeugte Ergebnisse auf Basis des Templates fügen sich nahtlos in die Site auf dem Webserver (jMedia) ein.
Durch den Verzicht auf Frames und Tabellen im Grundlayout und die Anwendung von Divisions ist die Site weitgehend barrierefrei.

Deshalb ist die Verwendung des Templates verpflichtend. Es wird für jeden Kurs über das Blackboard in der Sektion "Course Documents" als gepacktes Archiv und angepaßt an die jeweiligen Kursanforderungen als Download zur Verfügung gestellt.

II. Archiv, Templatetypen und -struktur, Verzeichnisse, Nomenklatur

Das Template besteht aus mehreren Dateien und einer (für den jeweiligen Kurs spezifischen und) definierten Verzeichnisstruktur. Vom Anwender werden alle Dateien benötigt, dürfen aber nur die Dateien "n-oo.html" und "style_userspecific-n.css" geändert werden! Die Verzeichnisstruktur darf nicht geändert werden (keine Verlagerung, keine neuen Unterverzeichnisse, keine Löschungen).

Das "n" im Dateinamen ist durch die Ziffer der Gruppennummer zu ersetzen. Gruppe 1 besitzt damit alle 1-mm.html, Gruppe 2 alle 2-mm.html etc.

n-00.html-Dateien, die nicht zur eigenen Gruppe gehören, können aus dem Template gelöscht werden. Damit wird nach dem Upload vermieden, dass versehentlich Ergebnisse anderer Gruppen auf dem Webserver überschrieben werden.

Die n-00.html-Dateien sind je nach Kurs leicht modifiziert. Es gibt zwei Arten: eine für Dokumentationen i.S.v. Dossiers und eine für Anwendungssysteme, die auch php-Skripte enthalten können. Soweit in einem Kurs beide Arten erforderlich sind wird eine n-00.html (für die Projektergebnisse) und eine n-ht.html ("how-to"-Dossier) zur Verfügung gestellt.

Zusätzliche html-Dateien entstehen durch Kopie und Umbenennung der n-00.html. Die Nomenklatur ist für die neuen Dateien: n-01.html, n-02.html etc. Soweit Untergliederungen für die n-ht.html erfoderlich sind folgt dies der Nomenklatur n-ht00.html, n-ht01.htlm etc.

Das Template enthält folgende Struktur und Dateien:

1) /webroot                    (leer, bis auf Unterverzeichnisse)
2) /webroot/IMG/               (zentrale Imagedateien)
3) /webroot/CSS/               (zentrale Cascading Stylesheets)
4) /webroot/mat                (leer, bis auf Unterverzeichnisse der Kurse)
5) /webroot/mat/kursname       (Quellverzeichnis für den aktuellen Kurs)
6) /webroot/mat/kursname/css/style_userspecific-*.css (individuelles CSS)
7) /webroot/mat/kursname/img   (enthält ALLE nicht-html-Dateien)

/webroot auf jeden Fall beibehalten! Speicherort: "Eigene Dateien" oder (Empfehlung:) "Desktop"
Dateien in /webroot/IMG/ werden gebraucht. Nicht löschen, nichts verändern, nichts zufügen!
Stylesheets in /webroot/CSS/ werden gebraucht. Nicht löschen, nichts verändern, nichts zufügen!
ohne Kommentar
Kursname ist für Medienproduktion im SS2006: ss06_mp, für Mediendatenbanken ss06_mdb, für Medieninformation 4 (StG Onlinejournalismus, Gruppe Journalistik) ss06_mi4j etc, also z.B.
/webroot/mat/ss06_mp
Dieses Verzeichnis enthält die Dateien index.htlm, indexe.html, 1-00.html, 2-00.html, etc. und ggf. 1-ht.html, 2-ht.html etc. Die indexdateien werden von Prof. Jakob gepflegt. Die 1-00.html-Datei gehört Gruppe 1, die 2-00.html der Gruppe 2 etc.
Das Stylesheet /webroot/mat/ss06_mp/css/style_userspecific-3.css ist z.B. für Gruppe 3 in Medienproduktion (SS2006). Es enthält bereits Formatierungen und kann gruppenspezifisch nach Bedarf ergänzt werden.
/webroot/mat/kursname/img enthält alle nicht-html-Dateien, z.B. *.gif, *.jpg, *.mpeg, *.png, *.mov, *.pdf, *.wma etc. Es ist unzulässig solche Dateien in einem anderen Verzeichnis zu speichern!

Für das /webroot/mat/kursname/img-Verzeichnis, genauer: die dort abgelegten Dateien, gilt folgende Nomenklatur:

Gruppennummer-Bindstrich-Restdateiname-Punkt.Extention.

Wenn z.B. die Gruppennummer "2" ist, die Datei ursprünglich "landschaft.jpg" hieß, und damit eine jpg-Fotodatei ist, ergibt sich für den Namen: "2-landschaft.jpg", der in einem Imagetag wie folgt referenziert wird: <img src="./img/2-landschaft.jpg" />. Damit wird vermieden, dass Objekte anderer Gruppen mit gleichem Urnamen sich beim Hochladen wechselseitig überschreiben. Dennoch muss dieses Problem auch innerhalb der Gruppe beachtet werden, auch wenn es so weniger gravierend ist.

III. Download, Entpacken, Bearbeiten, Packen, Hochladen

Download:
Laden Sie das Template vom Blackboard aus Ihrem Kurs in der Sektion "Course Documents"
Entpacken:
Entpacken Sie die Archivdatei vorzugsweise auf den Desktop. Es erscheint ein Unterverzeichnis "webroot". Definieren Sie das darin liegende Unterverzeichnis mat/kursname, z.B. "mat/ss06_mp" als (relatives) Root Ihrer Website im benutzten html-Editor.
Bearbeiten:
Löschen Sie alle n-00.html-Dateien, die nicht zu Ihrer Gruppe gehören. Legen Sie Kopien von n-00.html entsprechend den Nomenklaturregeln an (n-01.html etc.; n ist durch die Ziffer der Nummer Ihrer Gruppe zu ersetzten!), wenn es notwendig ist. Tun Sie das frühzeitig, solange noch keine von Ihnen erarbeiteten Inhalte in der Datei vorhanden sind. Passen Sie die URLs im unteren Menü bei den Optionen "zurück" und "vor" an. Passen Sie die Fenster- und Dateititel sowie die Überschrift an. Ergänzen oder korrigieren Sie die Redakteursliste. Fügen Sie ihre Inhalte ein. Soweit Sie "Bilder" i.w.S. einbinden, speichern Sie die unter Anwendung der Nomenklaturrichtlinie im ./img-Verzeichnis
Der SysAdmin jeder Gruppe ist für das Einsammeln und Zusammenstellen von Einzelergebnissen der Gruppenmitglieder zuständig.
Packen und Hochladen:
Mindestens einmal in der Woche (Freitag mittags) ist das erarbeitete Ergebnis aufs Blackboard Sektion "Communication-Group Pages-File Exchange-Gruppenname" hochzuladen. Die Verwendung der Drop-Box ist nicht gestattet. Dazu packen Sie das gesamte /webroot-Verzeichnis mit allen Unterverzeichnissen und allen neu hinzugekommenen Dateien in ein zip- oder rar-Archiv. Dieses Archiv wird mit der Nomenklatur: Gruppennummer-Coboldatum (n-yyyymmdd) hochgeladen. Beispiel: Gruppe 3 hat am 29.3.2006 ein Ergebnis hochgeladen. Dateiname: 3-20060329.zip und Linkname im BB: "3-20060329"

IV. Das html-Template

Hier am Beispiel der 1-00.html aus MP (SS2006)

Vorspann:
Das Dokument ist in transitional xhtml geschrieben - alle Tags müssen deshalb klein geschrieben werden und alle Tags ohne Endetag sind in der From <tag />, z.B.<br /> oder <img src="..." ... /> Dieser Bereich darf nicht verändert werden.

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >

Header:

Das Dokument ist in ISO 8859-1 (Westeuropäische Sprachen) kodiert. Umlaute und ß sind deshalb im html-Text erlaubt. Ansonsten müßten sie mit &... umschrieben werden, z.B. das Ü mit "&umlU;".

Die Stylesheet-Dateien liegen in einem zentralen Verzeichnis unterhalb der html-Dateien. style_userspecific-1.css in ./css/ ist im Zugriff der Redakteure.
Der Header-Bereich darf nicht verändert werden.

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen, print" href="../../CSS/style_basislayout.css">
<link rel="stylesheet" media="screen, print" href="../../CSS/style_layout.css">
<link rel="stylesheet" media="screen, print" href="../../CSS/style_menus.css">
<link rel="stylesheet" media="screen, print" href="../../CSS/style_tables.css">
<link rel="stylesheet" media="screen, print" href="../../CSS/style_images.css">
<link rel="stylesheet" media="screen, print" href="./css/style_userspecific-1.css">
<link rel="stylesheet" media="screen, print" href="../../CSS/style_.css">
<title>..::jMedia .:. Media Production SS 2006</title>
</head>

Logobereich im Body:
Dieser Bereich darf nicht verändert werden.

<body>
<div class="lo" title="© 2006 by Prof. Geribert E. Jakob">
<table class="m">
<tr>
<td class="lo"><h2 class="lo" id="sb">..:: Media Production .:. h_da:IuW-Leitsystem</h2></td>
</tr>
</table>

Kopfmenü:
Die Sprungstellen Seitenanfang (#s), Inhaltsverzeichnis (#i) und Quellenverzeichnis (#q) sind generisch. Auch wenn die Bereich im Text "geblankt" sind dürfen sie nicht gelöscht werden!
Dieser Bereich darf bis auf den Eintrag zu "./1-ht.html" nicht verändert werden.

<table class="mx">
<tr>
<td class="m1"><a href="../../index.php" title="zur Startseite von ..::jMedia">Home</a></td>
<td class="m1"><a href="./index.html" title="zur Startseite von Media Production"> | Kapitelanfang</a></td>
<td class="m1a"><a href="./1-ht.html" title="Das How-to"> | How-to</a></td>
<td class="m1b"><a href="../../jakob.php" class="gj"> | Prof. Geribert E. Jakob</a></td>
</tr>
</table> <table class="mx">
<tr>
<td class="m2"><a href="#s" title="zum Anfang dieser Seite">zum Seitenanfang</a></td>
<td class="m2"><a href="#i" title="zum Inhaltsverzeichnis"> | Inhaltsverzeichnis</a></td>
<td class="m2a"><a href="#q" title="zum Quellenverzeichnis"> | Quellenverzeichnis</a></td>
<td class="m2b"><a href="./indexe.html" title="switch to the English language version"> | English</a></td>
<td class="m2be"><a href="./indexe.html" title="switch to the English language version"></a></td>
</tr>
</table></div>
<div class="co">
<table class="m"><tr class="co"><td class="co">

Überschrift:
Darf nach Rücksprache geändert werden.
Die lokale Marke ' ... id="s" ' ist die Sprungstelle für die Menüoptionen "Springe zum Seitenanfang". Nicht löschen oder ändern!

<h1 id="s">Menschen und Büros</h1>

Anfang des Contentbereichs
ACHTUNG: Dieser Contentberecih ist für eine Projektarbeit vorbereitet.
Weiter unten findet sich eine Contenbereicherläuterung für Dossiers!

Inhaltsverzeichnis
Hier "ausgeblankt"/auskommentiert. Lokale Sprungstelle ist '... id="i" '. Sie wir im Menü mit '... href="#i" ' angesprungen

Hier kommt Ihr Content hin !
**********

<h3 id="x">Start</h3>
<p>Hier beginnt Ihr Bereich für die multimedial Ausarbeitung. Zusätzliche Steiten haben die Nomenklatur <br />1-nn.html.</p>

Dokumenteninfo:
Redakteurnamen, letzte Bearbeitung. Diese Daten müssen aktualisiert werden!
Diese Angaben sind nur auf der Gruppenstartseite notwendig!

<hr>
<h5>Dokumenteninfo</h5>
<ul>
<li>Redakteure</li>
<table><tr>
<td><ul>
<li class="au">Sabrina Hauser (Speaker)</li> 
<li class="au">Johanna Dobrick</li>
<li class="au">Eva Rausch v. T.</li>
</ul></td>
<td><ul>
<li class="au">Christian Engelman</li> 
<li class="au">Florian Berkner</li>
<li class="au">Stefan Antoni (Links)</li>
<li class="au">Mirian Bredow</li>
<li class="au">Franz Aschoff (SysAdmin)</li>
</ul></td>
</tr></table>
<li>Anlass: Prüfungsrelevante Ausarbeitung, Diplomstudiengang IuW, Pflichtfach</li>
<li>letzte Bearbeitung: 20.03.2006</li> 
</ul>

Quellenverzeichnis
Hier "ausgeblankt". Lokale Sprungstelle ist '... id="q" '. Sie wir im Menü mit '... href="#q" ' angesprungen

Ende des Contentbereichs

Technisch erforderlicher Nachspann
Leerzeilen nicht löschen!

Fußmenü:
Die URLs für zurück und vor müssen ggf. angepaßt werden! Ebenso die Bookmark-Spezifikation

<div class="fo">
<table class="mx">
<tr>
<td class="mx"><a href="#s" title="zum Anfang dieser Seite">zum Seitenanfang</a></td>
<td class="mx"><a href="./1-00.html" title="rückwärts blättern"> | zurück </a></td>
<td class="mx"><a href="./1-01.html" title="vorwärts blättern"> | vor </a></td>
<td class="mx">| <a href="javascript:window.external.AddFavorite('http://jmedia.iuw.h-da.de/mat/ss06_mp/1-00.html', '__jMedia - MP 1-00')" title="Seite merken ...">Bookmark</a></td>
</tr>
</table>

Textlogo:
Hochschule. Nicht ändern!

<table class="mx">
<tr>
<th class="fo"> ..:: h_da ..::.. Hochschule Darmstadt .:. School of Information & Media .:. Darmstadt University .:. jMedia.iuw.h-da.de</th>
</tr>
</table>
</div></body>
</html>

Contentbereich für Dossiers

Der Vorspann ist identisch zu den vorherigen Erläuterungen.
Der Quelltext zu diesem Dokument stellt selbst einen Fundus für die Gestaltung von unterschiedlichen Textarten dar. Reinschauen lohnt sich!

Dokumenteninfo:
Redakteurnamen, letzte Bearbeitung. Diese Daten müssen aktualisiert werden!
Diese Angaben sind auf allen Dossierseiten notwendig!

<h5>Dokumenteninfo</h5>
<ul>
<li>Redakteure</li>
<table><tr>
<td><ul>
<li class="au">N.N. (Kapitelnummer, Teilthema)</li> 
</ul></td>
<td><ul>
<li class="au">N.N. (Kapitelnummer, Teilthema)</li> 
</ul></td>
</tr></table>
<li>Anlass: Prüfungsrelevante Ausarbeitung, Diplomstudiengang IuW, Pflichtfach</li>
<li>letzte Bearbeitung: 20.03.2006</li> 
</ul>

Inhaltsverzeichnis:
Die <ol> stellt mit ihren Klassen u1 bis u3 ein differenziertes Nummerierungssystem zur Verfügung. Die einzelnen Einträge sind gleichzeitig Links auf lokale Sprungmarken (x, x2, etc.), die nach Bedarf zugefügt werden können. Die Sprungmarke "i" ist ein Default, der nicht gelöscht werden darf. Die <li>-Klasse "ol" ist notwendig, um die Schriftgöße zu erhalten. Ohne diese Klasse würde die Schrift kleiner erscheinen.

<h3 id="i">Inhaltsverzeichnis</h3>
<ol class="u1">
<li class="ol"><a href="#x">Einleitung</a></li>
<li class="ol"><a href="#x2">blabla zweites</a></li>
<li class="ol"><a href="#x3">blabla drittes</a></li>
<ol class="u2">
<li class="ol"><a href="#x31">blabla rittes erster aspekt</a></li>
<ol class="u3">
<li class="ol"><a href="#x311">blabla drittes erster unteraspekt von ersten aspekt</a></li>
<li class="ol"><a href="#x312">blabla drittes zweiter unteraspekt von ersten aspekt</a></li>
</ol>
<li class="ol"><a href="#x32">blabla rittes zweiter aspekt</a></li>
<li class="ol">etc.</li>
<ol class="u3">
<li class="ol">...</li>
<li class="ol">...</li>
</ol>
<li class="ol">...</li>
<li class="ol">...</li>
<li class="ol">...</li>
</ol>
<li class="ol">...</li>
<li class="ol">...</li>
<li class="ol">...</li>
<ol class="u2">
<li class="ol">...</li>
<li class="ol">...</li>
<li class="ol">...</li>
</ol>
<li class="ol">...</li>
<li class="ol">...</li>
</ol>

Der Textbereich:
Die lokalen Sprungmarken (x, ..., x32 usw.) können nach Bedarf eingerichtet werden. Jede Überschrift muß eine eindeutige Sprungmarke (xnn) haben, die über das Inhaltsverzeichnis angesprungen können werden muss.

Folgende Klassen müssen immer angegeben werden, wenn Tags in andere Tags eingebettet sind:

Anker (<a>) im Absatz (<p>): class="p"
Anker (<a>) im Listeneintrag (<li>): class="li"
Ausnahme: wenn im Inhaltsverzeichnis (und nur hier) der Listeneintrag (<li>) bereits die Klasse class="ol" besitzt
Absatz (<a>) im Listeneintrag (<li>): class="li"
Geordnete Listen bieten mit der Klasse class="u1" große Römische Ziffern, class="u2" Arabische Ziffern, class="u3" kleine Römische Ziffern, class="u4" kleine Buchstaben und class="u5" Großbuchstaben.
Das Bulletzeichen für ungeordnete Listen ist "Square". Alternativ kann mit der Klasse class="none" das Bulletzeichen unterdrückt werden.
Die Klasse class="qt" im Absatz (<p>) arbeitet genau so, wie <blockquote> mit Äquidistanzschrift (z.B. für Listings)
Die Tabellenformatierung (Vorgaben) ist minimal. Ggf. sind in ./css/style_usersprcific-1n.css eigene Formate zu ergänzen.

<h3 id="x">I. Einleitung</h3>
<p>...</p>
<h3 id="x2">II. ...</h3>
<p>...</p>
<h3 id="x3">III. ...</h3>
<p>...</p>
<h3 id="x31">III.1. ...</h3>
<p>...</p>
<h3 id="x311">III.1.i. ...</h3>
<p>...</p>
<h3 id="x312">III.1.ii. ...</h3>
<p>...</p>
<h3 id="x32">III.2. ...</h3>
<p>...</p>

Quellenverzeichnis
Für Zitierregeln siehe: Quellennachweise

<h3 id="q">Quellenverzeichnis</h3>
<ul>
<li>[Jako05] Jakob, Geribert: Titel, Auflage, Ort, Verlag (Jahr)</li>
<li>[...] ...</li>
</ul>

Der Nachspann ist identisch zu den vorherigen Erläuterungen

V. CSS

Das Design der Site wird vollständig über Cascading Stylesheets gesteuert und ermöglicht so die Trennung von Form und Inhalt. Die Stylesheets im Verzeichnis "../../CSS/*.css" werden zentral von Prof. Jakob gepflegt. Sie sind für die korrekte Anzeige auf lokalen Bearbeitungsrechnern notwendig, dürfen aber nicht geändert werden, da sie beim Zurückspielen auf den Webserver nicht mit kopiert werden (Änderungen durch Bearbeiter sind hier sinnlos!).

Dagegen können die Gruppen (mit der Nummer n, z.B. 2) eigene Formate über das Stylesheet "./css/style_userspecific-n.css" zufügen. Das ist insbesondere für die Formatierung von Tabellen notwendig! Benutzersprezifische Formatierungsdefinitionen sind nur hier erlaubt.

Wegen der Trennung von From und Inhalt sind html-Tags und Parameter im Quelltext der zu erstellenden html-Dateien nicht erlaubt, die Formatierungen durchführen.
Unzulässig sind demnach:

<center>, <font ...>, <u>, <b>, <... align="..." ...>, etc.

VI. Non-html-Inhalte und Nomenklatur

Non-html-Inhalte sind alle Dateien, die nicht *.html und nicht *.php sind, also:

Webfähige Grafiken, Bilder, Fotos: *.ico, *.bmp, *.jpg, *.png, *.gif, etc.
Web-enabled AV-Dateien: *.mov, *.wma, *.rm, etc.
sonstige web-enabled Dateien: *.pdf, etc.
sonstige Downloadangebote: *.zip, *.rar, *.doc, etc.
Cascading Stylesheets: *.css

Dateien der ersten vier Typen sind grundsätzlich im "./img"-Verzeichnis abzuspeichern!

Die Dateinamen folgen der Konvention: Gruppennummer-Bindstrich-Restdateiname-Punkt.Extention.
Wenn z.B. die Gruppennummer "2" ist, die Datei ursprünglich "landschaft.jpg" hieß, und damit eine jpg-Fotodatei ist, ergibt sich für den Namen: "2-landschaft.jpg", der in einem Imagetag wie folgt referenziert wird: <img src="./img/2-landschaft.jpg" height="höhe in px." width="breite in px." />. Damit wird vermieden, dass Objekte anderer Gruppen mit gleichem Urnamen sich beim Hochladen wechselseitig überschreiben. Dennoch muss dieses Problem auch innerhalb der Gruppe beachtet werden, auch wenn es so weniger gravierend ist.

Das img-Tag muss immer eine Höhen- und Breitenangabe für das zu zeigende Objekt haben, damit die Seiten von den Browsern schneller gerendert werden können, um eine schnellere Anzeige (auch bei noch nicht vollständig übertragenen Bildern) zu erzwingen. Das gleiche gilt sinngemäß auch für Audio- und Videodateien, wobei grundsätzlich Streamingformate zu präferieren sind.

VII. Relative Adressierung

Die Adressierung wird zur Spezifikation eines Links (Sprungstelle) verwendet und hat die Form einer URL (Uniform Resource Locator). Wir unterscheiden vier Adressierungarten:

Absolute (externe) Adressierung (Referenzierung einer anderen Domain): z.B. "http://www.domain.de/seite.html"
Absolute (interne) Adressierung (Referenzierung innerhalb der eigenen Domain): z.B. "http://localhost/verzeichnis/seite.html"
Relative Adressierung (nur innerhalb der eigenen Domain): z.B. "./verzeichnis/seite.html" oder "../../verzeichnis/format.css"
Lokale Adressierung (Sprungstelle innerhalb der gleichen Seite): z.B. "#Quelle". Eine URL der Art '... href="#name" ...' erlaubt einen Sprung zu einer Textstelle, an der sich ein lokale Marke der Art '... id="name" ...' befindet. Marken müssen in einem Dokument 'unique' sein!
Die lokale Adressierung kann mit allen vorhergehenden Arten gemischt werden.

Zulässig sind nur a) die absolute externe Adressierung, b) die relative Adressierung und die lokale Adressierung. Unzulässig ist die absolute interne Adressierung.

Unglücklicherweise setzen einige HTML-Editoren gültige relative Adressen in absolute um. Ebenso kann es passieren, dass (insbesondere beim Einfügen von nicht-html-Objekten, z.B. Bildern) der Editor statt einer zulässigen relativen Adresse eine absolute oder gar eine Adresse aus dem lokalen Dateisystem einfügt. Dateisystemadressen sind an '... file:// ...' oder '... file:\\ ...' erkennbar. Aus den genannten Gründen muß jeder Quelltext deshalb vor der Ablieferung auf solche Fehler geprüft und ggf. in Richtung der zulässigen Adressierungsarten korrigiert werden!

Erläuterung zur Syntax der relativen Adressierung:
ausgehend vom aktuellen Verzeichnis in dem sich das betrachtete html-Dokument befindet, das wiederum die relative Adresse enthält, gilt:

./ verbleibt im Quellverzeichnis, um dort auf eine andere Datei zu verweisen
../ springt in das Elternverzeichnis
../../ springt in das Elternverzeichnis des Elternverzeichnises
../dir/ springt in das Elternverzeichnis und dann in das Kindverzeichnis "dir". Das Zielverzeichnis "dir", das angenommen die gewünschte aufzurufende Datei enthält, befindet sich innerhalb der Verzeichnisstruktur damit auf der gleichen Ebene, wie das Quellverzeichnis, von dem wir ausgehen.
./dir/ springt in das Unterverzeichnis "dir" des Quellverzeichnisses.

Für die unter diesen Regeln zu erstellenden Dokumente gelten folgende Aussagen:

die Adresse 'src/href="../../CSS/cssdateiname"' verweist auf alle nicht vom Schreiber zu verändernden 'cascading Stylesheets' ("Finga wech davon!"). Vergleichbares gilt für die Umgebungsseiten, z.B. ../index.php, ../../index.php u.ä., die ausschießlich von Prof. Jakob gepflegt werden.
zu verlinkende andere (und damit zu erstellende) html-Seiten befinden sich im gleichen Verzeichnis und werden stets mit 'href="./n-mm.html"' referenziert; ggf. auch incl. lokaler Sprungmarke, z.B. 'href="./n-mm.html#x22"'.
alle einzubindenden nicht-html-Dateien (*.jpg, *.mov, *.pdf etc.) liegen immer im Kindverzeichnis "img" und werden stets mit src/href="./img/n-name.jpg/mov/pdf/etc." referenziert.
eigene Formatierungen können in der Datei "./css/styles_userspecific-n.css" zugefügt werden, die im Header jeder zu erstellenden html-Datei eingetragen ist. "n" ist durch die Ziffer der Gruppennummer zu ersetzten.

..::jMedia .:. Medieninformation: Standards