Gestaltungsempfehlungen für Webprojekte
Intro
Übersicht
 Konzept
Seitenaufbau
Seitengestaltung
Navigation 		Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns 		Glossar
Ressourcen
Druckversion

HTML

Layout Markup vs. logisches MarkUp
Um den Text angemessen darzustellen sollte man ihn logisch formatieren.

Und außerdem: <BR> ist nicht <P> :<Br>
(Linebreak) Bricht den Text in die nächste Zeile um.<P>

(Paragraph) öffnet einen Absatz und somit eine Leerzeile.

Es gibt verschiedene Möglichkeiten Text mit HTML zu editieren. Viele Befehle die den gleichen Layouteffekt haben, sind mit der Überlegung zu semantischer Auszeichnung geschaffen worden. Das ändert nichts an seinem Aussehen - macht ihn aber für SGML-Browser und zukünftige, intelligentere viel besser zugänglich, nutz- und strukturierbar.

Bei Entwicklung der SGML Konventionen wurden die gängigen Möglichkeiten berücksichtigt Text zu formatieren. Dies ist wichtig um sich mit einem SGML-Browser den Text etwa nach "Zitaten", "Überschriften" oder "Zusammenfassung" darstellen zu lassen. Dazu muß der Text logisch formatiert werden. Leider sind jedoch die Befehle die Layout MarkUp unterstützen inzwischen viel weiter verbreitet und die faszinierenden Möglichkeiten den Server mit Scripten nach inhaltlichen Strukturen darstellen zu können bleiben ungenutzt.

logisches MarkUp layout MarkUp
ADDRESS -
kursiv, springt in die nächste Zeile, nochmal nächste Zeile
- Adresse
CITE - kursiv - Citation (Zitat)
CODE - (gleiche Abstände) Fixed Font - typed code (Quellcode)
DFN - (kein Effekt bei Netscape) - Definition
EM - kursiv - Emphasis (Hervorheben)
KBD - (gleiche Abstände) Fixed Font - (keyboard) Tastatur
SAMP - Fixed Font - Beispiel
STRONG - Fett - Strong Emphasis Hervorheben
VAR - kursiv - Variable

TT - (gleiche Abstände) - Typewriter Fixed Font
B - fett - Bold (Fett)
I - kursiv - Italic (kursiv)
U - unterstreichen - Underline (unterstreichen)
BIG - gestreckter Text - Gross
SMALL - gestauchter Text - Klein
SUB - tiefer gestellt - Subscript
SUP - höher gestellt - Supscript
PRE - originale A b s t ä n d e - Preformatted (Vorformatiert)
BLOCKQUOTE -
Leerzeile, Eingerückt, originale A b s t ä n d e, Leerzeile
- Zitat im Block
S - Durchgestrichen - Durchgestrichen

Sauberes HTML
Die fertige Seite von einem HTML-Checker überprüfen lassen, ein Bestandteil der meisten Editoren.

Netscapes Navigator verzeiht viel. Intelligente Browser sind auf schlampiges editieren eingestellt ausgenommen Table Fehler. So öffnet Netscape Navigator auch Seiten denen das eigentlich essentielle <HTML> am Kopf des Dokuments fehlt.
Das verleitet natürlich zum unsauberen editieren, gerade wenn man durch learning-by-doing lernt und den Source Code anderer Dateien studiert. Editoren wie BBedit 3.5 haben einen HTML Checker und Listen Mängel auf. Ein kleines Problem dabei ist das Netscape Navigator eigene Tags entwickelt hat, und da am weitesten verbreitet, sozusagen Trendsetter ist. Tables sind vom Netscape Einfall inzwischen zur Norm erklärt geworden. Manche Editoren passen sich dem erst später an. Navigator beherrscht etwa Font Style (Microsoft Explorer) sowie U Unterstreichen und S Durchstreichen nicht.

Man sollte es sich zur Regel machen die eigenen Seiten auch regelmäßig mit anderen Browern und auf anderen Systemen zu vergleichen

Einige Beispiele für essentielle HTML Tags
Bestimmte <STRONG> Tags </STRONG> müssen geschlossen werden. Andere wie Paragraph oder BR nicht. 
						
<HTML>
   <HEAD>
	<TITLE>
	 Hier der Titel
	</TITLE>
   </HEAD>
	<BODY>
	 Und hier der Text
	</BODY>
</HTML>

Ein Dokument mit einem Bild
Die WIDTH und HEIGHT beachten! Da das Bild in dem Verzeichnis Images liegt, siehe Ordnerhierachien, muß man vor den eigendlichen Bildnamen: bild.gif noch den - relativen - Pfad setzten. Komplett schreibt sich der dann: images/bild.gif
Muß ich aus einem Verzeichnis herraus, und nicht wie in diesem Fall von der gleichen Hierarchie hinunter, schreibe ich erst: ../images/bild.gif

Relativer Pfad bedeutet von dem Dokument aus gesehen auf dem das Bild verzeichnet ist. Der absolute Pfad wäre die WWW Adresse des Bilder nämlich z.B. http://www.HdK-Berlin.de/styleguide/images/bild.gif 

						
<HTML>
   <HEAD>
	<TITLE>
	 Hier der Titel
	</TITLE>
   </HEAD>
	<BODY>
	 Und hier der Text, mit einem Bild
	 <IMG SRC="images/bild.gif" ALT="Text zum Bild" WIDTH="15" HEIGHT="15">
	</BODY>
</HTML>

Ein Dokument mit einem Verweis
Beachten das IRGENDETWAS der Verweis sein muß. Ob Wort oder Bild ist egal.
Auch ein Bild kann ausgewählt werden. Dann ist zu beachten das keine Leerstelle hinter dem letzten Tag des Bildes stehen darf, da sonst diese Leerstelle zwischen ...bild.gif> </A> vom Browser als Bindestrich dargestellt wird. <A HREF="... ist eines der Tags die unbedingt geschlossen werden müssen, da sonst der ganze Rest der Seite - unbeabsichtigt - in den Verweis einbezogen wird. Also: </A> 
						
<HTML>
   <HEAD>
	<TITLE>
	 Hier der Titel
	</TITLE>
   </HEAD>
	<BODY>
	 Und hier der Text, mit einem Verweis zur
	 <A HREF="http://www.HdK-Berlin.de">HdK Berlin</A>
	</BODY>
</HTML>

Verweise zu ausführlichen Dokumentationen über HTML Befehle findet man unter Ressourcen.

Intro
Übersicht
 Konzept
Seitenaufbau
Seitengestaltung
Navigation 		Gif oder Jpeg?
Schnelles Laden
HTML
PlugIns 		Glossar
Ressourcen
Druckversion

Kommentare oder Vorschläge ?
http://www.digital.hdk-berlin.de/~mhohl/styleguide/html.html
© Hochschule der Künste Berlin
Michael Hohl
26-Juni-96 		Gestaltungsempfehlungen für Webseiten