Inhaltsverzeichnis

Erstellen einer HTML-Seite
- Gerüst einer HTML-Seite
- Tabellen und Listen
  - Tabelle
  - Listen
Formatierungshilfen
- Sonderzeichen
- Lokale Textauszeichnung
Weiterführendes

Erstellen einer HTML-Seite

Eine HTML-Seite kann man auf zwei Ebenen betrachten: der inhaltlichen und der formalen. Im Folgenden soll der formale Aufbau einer Seite im Vordergrund stehen - für den Inhalt ist dann jeder selbst verantwortlich. Dabei sollten jedoch die Grundregeln der Präsentation (klare Gliederung, gute Lesbarkeit, keine Effekte um der Effekte willen) beachtet werden.

Bevor eine HTML-Seite veröffentlicht wird, sollte sowohl der präsentierte Text als auch das HTML-Gerüst auf Fehler kontrolliert werden - auf der Textebene läuft das am Besten durch mehrmaliges durchlesen (lassen), auf der formalen Ebene kann man sich im Internet bereitgestellter Hilfsprogramme bedienen, den sogenannten „Validatoren“, z.B.

Validierungsservice des W3-Consortiums (auf englisch)

WDG-Validierungsservice - bietet die Möglichkeit der Validierung ganzer Home-Sites.

Ziel der Unterrichtseinheit soll es sein, die Grundlagen der Webseitenerstellung mit HTML (nach Standard 4.01) zu vermitteln. Darauf kann dann jeder nach Lust und Laune aufbauen - auf weiterführende Informationen im Internet und in Buchform wird am Ende hingewiesen. Das Erstellen von Webseiten gehört genaugenommen in den Bereich des Web-Designs und nicht unbedingt zur Informatik. Als Vorübung zum Codieren und zeichengenauem Schreiben (wie es dann ja auch beim Programmieren benötigt wird) sehe ich die HTML Einheit in der Schulinformatik aber dennoch als berechtigt an.

HTML-Dokumente dienen zur statischen Informationsübermittlung im Internet.

Website: gesamter Webauftritt, also viele einzelne HTML-Dokumente
Webpage: einzelnes HTML-Dokument im Internet
Homepage: zentrales HTML-Dokument eines Webauftritts

HTML-Dokumente können (und werden) zunächst lokal in eurem Verzeichnis gespeichert (Dateiendung .html oder auch .htm) und dort durch Doppelklick im Browser angezeigt. Wenndas HTML-Dokument mit dem Windows-Editor erstellt wird, muss man beim Speichern darauf achten, die Dateiendung anzugeben (sonst erhaltet ihr eine .txt-Datei, die der Browser nur als Quelltext anzeigt).

Gerüst einer HTML-Seite

Jede HTML-Seite sollte am Anfang den Dokumententyp bekannt geben. Damit lauten die ersten Zeilen für eine normale Seite wie folgt:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Mit diesen Zeilen wird den Parsern (also den Programmen, die den HTML-Code in lesbare Seiten umsetzen) gesagt, um was für einen Dokumenttyp es sich handelt. Danach wird mit

<html>

die HTML-Seite geöffnet. Damit man die schließenden Tags nicht vergisst, ist es sinnvoll, gleich den Schluss-Tag

</html>

zu schreiben und den Rest der Seite zwischen den beiden Tags zu platzieren.

Zwischen dem Start und dem Schluss-Tag gliedert sich die Seite in zwei Bereiche: dem Kopf und dem Körper:

<head> </head> <body> </body>

<head>

Im Kopf werden alle Informationen über das Dokument gesammelt: Meta-Tags, verwendete Styles, Scripte, und der Titel. Bei den Meta-Tags sollte auf jeden Fall der verwendete Zeichensatz angegeben werden,

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

und auch die Angabe eines Titels macht sich gut (der erscheint in der Kopfzeile des Browsers):

<title> </title>

Wichtig ist dabei, dass deutsche Sonderzeichen nicht überall auf der Welt auf den Rechnern installiert sind, daher sollten die Codes verwendet werden (ein HTML-Editor wandelt die Sonderzeichen in der Regel automatisch um):

&auml; = ä, &ouml; = ö, &uuml; = ü usw., &szlig; = ß

<body>

Im Körper der Seite erscheint schließlich das, was der Welt mitgeteilt werden soll. Die Tags für Überschriften

<h1> </h1> . . .  <h6> </h6>

sollten dabei als Gliederungshilfen und nicht als Layout-Vorgaben verstanden werden. Daher dürfen diese Tags bei korrektem HTML auch nicht ineinander und nicht mit vielen der anderen Tags verschachtelt werden.

Der normale Text sollte zwischen Absatz-Tags stehen:

<p>   </p>

Zur Illustration können Bilder eingebunden werden. Hier sollte immer die Größe (in Pixeln) angegeben werden, damit der Browser gleich beim Laden des Textes den Platz für die Bilder reservieren kann. Und die Angabe des Alternativtextes für den Fall, dass das Bild nicht angezeigt werden kann, ist Pflicht!

<img src="pfad/dateiname.jpg" alt="das wird ein bild" width=100 height=50>

Und zum Verknüpfen der Inhalte benötigt man dann den Hypertext, die Links:

<a href="pfad/dateiname.jpg">Hier steht der Text der angeclickt wird</a>

Weitere Strukturierungshilfen

<br>

Erzwungener Zeilenumbruch (break row)

<hr>

Horizontale Linie in Fensterbreite (horizontal row)

Beide Tags haben die Besonderheit, dass es kein schließendes Tag gibt (es wird ja auch kein Text eingefasst).

Zusammenfassung

Das Gerüst einer HTML-Seite sieht zusammengefasst also so aus:

  <!DOCTYPE HTML PUBLIC                                   Angabe der verwendeten HTML-Variante
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
 
  <html>                                                  Ab hier: HTML-Befehle
    <head>                                                Der Kopf enthält Zusatzinformationen zur Seite, nicht formatiert.
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  Meta-Daten sind Daten über die Webseite,
                                                                                hier: verwendeter Zeichensatz
      <title> </title>                                    Fensterüberschrift (Tab-Titel)
    </head>                                               Hier wird der Kopf beendet.
 
    <body>                                                Alles was folgt, ist der eigentliche Inhalt der Webseite, der im Browser-Fenster 
                                                          sichtbar wird. Nur im Körper (body) wird formatiert.
    </body>                                               Hier wird der Körper beendet.
  </html>                                                 Ab hier folgt keine HTML-Befehle mehr.

Und hier kann man sich die Beispielseite ansehen.

Tabellen und Listen

Was jetzt noch fehlt, sind Hilfsmittel zur Strukturierung - Tabellen und Listen.

Tabelle

Eine Tabelle besteht in HTML aus Reihen, die wiederum in Felder unterteilt sind. Damit ergibt sich z.B. für eine Tabelle mit 4 Spalten und 3 Zeilen folgender Code:

<table>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td>
  </tr>
</table>

Jeweils zwischen <td> und </td> steht dann der Inhalt des Tabellenfeldes. Soll die Tabelle sichtbare Linien bekommen, wird man die Breite des Tabellenrandes auf mindestens 1 setzen:

<table border=1>

Listen

Eine andere Möglichkeit der Strukturierung bilden Listen. Davon gibt es drei Typen: „Definitions-„Listen <dl>, geordnete Listen <ol> und ungeordnete Listen <ul>. „Geordnete Liste“ bedeutet jedoch nicht, dass der Browser selbst die Liste ordnet - der Quelltext muss schon in der richtigen Reihenfolge geschrieben werden! Und so werden die Elemente der Listen in HTML geschrieben:

<dl>
  <dt> hier steht die Definition </dt>
  <dd> und hier der Inhalt</dd>
</dl>

<ol>
  <li> hier steht der 1. Eintrag</li>
  <li> und hier der 2. </li>
</ol>

<ul>
  <li> hier steht der 1. Eintrag</li>
  <li> und hier der 2. </li>
</ul>

Formatierungshilfen

Hier wird beschrieben, wie die strukturellen Tags einer Webseite durch Sonderzeichen und Tags ergänzt werden können, die der Formatierung des Seiteninhalts dienen.

Sonderzeichen

festes Leerzeichen:		„non breaking space“
Anführungszeichen:	"	„quotation mark“
&-Zeichen:	&	„ampersand“
§-Zeichen:	§	„section“
< „kleiner“:	<	„lower than“
> „größer“:	>	„greater than“
Copyright:	©	©
Ä, ä:	Ä, ä	„A-Umlaut“ usw.
Ö, ö:	Ö, ö
Ü, Ü:	Ü, ü
ß:	ß	„Ligatur¹⁾ sz“

Lokale Textauszeichnung

Bei der Formatierung des Seiteninhalts gibt es mehrer prinzipielle Möglichkeiten, die auch gemischt eingebaut werden können. Zum einen kann der Text mit HTML-Elementen formatiert werden, zum anderen mit Stylesheet-Elementen (CSS). Nach Möglichkeit sollten zur Formatierung mit Styles gearbeitet werden, manchmal ist jedoch das jeweilige HTML-Tag bequemer, daher wird hier beides aufgenommen.

Formatieren mit Attributen

Diese Art des Formatierens ist schnell, ist aber eigentlich schon veraltet. Aber zunächst erfüllt sie ihren Zweck.

Attribute können innerhalb von Tags ergänzt werden, z.B. im body-Tag:

<body vlink="ff000" alink="ff0000" link="#ff000" bgcolor="#ffffff" text="#000000">

Die Attribute vlink (visited link - schon besuchte Seite), alink (activated link - ein Link, über dem man sich gerade mit der Maus befindet) und link (normale Link-Farbe einer nicht aktivierten, noch nicht besuchten Seite) geben die Farbe der Schrift bei Links auf der Webseite an, bgcolor bestimmt die Farbe des Hintergrundes und text die Farbe des Textes.

Die Link-Attribute sollte man nur einmal verwenden, bgcolor und text lassen sich auch in anderen Tags als Attribute einfügen.

Grundsätzliches zu Styles

Styles beziehen sich immer auf Text, der zwischen zwei Tags steht, z.B. zwischen <td> und </td> oder zwischen <p> und </p>. Will man also z.B. in einem Absatz alles in Fettschrift ausgeben, so würde der Text zwischen

<p style="font-weight: bold;"> und </p>

eingeschlossen werden. Denselben Effekt würde man auch durch

<p> <b> und </b></p>

erreichen. Soll ein Text mit mehreren Formatierungs-Auszeichnungen versehen werden, so werden die einzelnen Elemente in der style-Angabe jeweils durch ein Semikolon abgetrennt und aneinandergereiht, die HTML-Tags werden ineinaner geschachtelt (dabei ist es wichtig, den zuletzt geöffneten Tag als ersten wieder zu schließen!). Die Style-Angabe für kursive Fettschrift wäre dann also

style="font-weight: bold; font-style: italic;"

Will man mehrere Absätze mit styles gleichartig formatieren, so kann man den ganzen Bereich zwischen

<div style="..."> und </div>

setzen, sollen nur wenige Wörter ausgezeichnet werden, verwendet man

<span style="..."> und </span>.

Auch hier nochmal der Hinweis: findet man Webseiten mit Formatierungen, die einen interessieren, kann man (meistens) mit der rechten Maustaste den Quelltext öffnen - und wenn das mit JavaScript unterbunden wurde, lässt sich ja immer noch die Webseite abspeichern und der Quelltext im Editor betrachten :)

Textauszeichnungen

Formatierung	HTML	CSS (style=“ … “)
Fett	<b> Text </b>, besser: <strong> Text </strong>	font-weight: bold;
Kursiv	<i> Text </i>, besser: <em> Text </em>	font-style: italic;
Unterstrichen	<u> Text </u>	text-decoration: underline;
Hochstellen	<sup> Text </sup>	vertical-align: super;
Tiefstellen	<sub> Text </sub>	vertical-align: sub;
Zentriert:	<center> Text </center>	text-align: center;
Schriftgröße (absolut)	~~<font size=3> Text </font>~~	font-size: 12pt;
Schriftart	~~<font face=„Arial“> Text </font>~~	font-family: arial;
Schriftfarbe	~~<font color=„red“> Text </font>~~	color: red;

Anmerkung: Zahlen sind immer als Beispiel gedacht - einfach mal experimentieren! Die font-Elemente sollten nicht mehr verwendet werden - da besser mit styles arbeiten.

In der nächsten Tabelle sind Formatierungselemente aufgenommen, die auch als HTML-Element als Attribut in einem Tag stehen müssen, wie sonst auch die Style-Elemente, z.B. die Breite eines Tabellenfeldes:

<td width=100> </td>

Dabei ist zu beachten, dass diese Attribute nicht für alle Tags Gültigkeit haben! Also einfach ausprobieren.

Formatierung	HTML	CSS (style=„ … “)
Breite	width=100	width: 100px;
Höhe	height=50	height: 50px;
Ausrichtung	align=„right“	text-align: right;
Hintergrundfarbe	bgcolor=„blue“	background: blue;
Hintergrundbild	background=„dateiname.jpg“	background-image: url(dateiname.jpg);

In der Regel bietet es sich an, Hintergrundfarbe bzw. Hintergrundbild und die Textfarbe (dann mit text=„…“ anstelle von font color) für die ganze Datei am Anfang im body-Tag zu definieren:

<body bgcolor="blue" background="dateiname.jpg" text="yellow">

Als Style sähe das so aus:

<body style="background: blue; background-image: url(dateiname.jpg); color:yellow;">

Frei wählbare Farbtöne

Wer mit anderen als den Standardfarben²⁾ gestalten will, muss die Farben hexadezimal codieren.

Hexadezimale Codierung

Allen Farben auf Webseiten liegt ein hexadezimaler Farbcode zu Grunde. Im hexadezimalen System (16er-System) gibt es 16 Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a (=10), b (=11), c (=12), d (=13), e (=14), f (=15). Wie in jedem Stellenwertsystem steht die letzte Ziffer für 16⁰, die vorletzte für 16¹.

Beispiel: 9a_[hex] = ()_[dez] = 154_[dez]

Die Bildschirmfarben werden aus den drei Grundfarben Rot, Grün und Blau gemischt. Jede Farbe kann dabei in 256 Abstufungen, von 00 („ausgeschaltet“) bis ff (maximal „angeschaltet“), verwendet werden.

Die Farbe Rot hat dann also den Code #ff0000, die Farbe Grün den Code #00ff00 und die Farbe Blau den Code #0000ff. Schwarz erreicht man durch #000000 und Weiß durch #ffffff. Grau bildet sich immer dann, wenn die Farbanteile für Rot, Grün und Blau gleich sind.

Kleine RGB-Farbtabelle

Farbe	Farbanteil Rot	Farbanteil Grün	Farbanteil Blau	Beispiel Hintergrund	Beispiel Text
Rot	ff	00	00	Hintergrund	Beispieltext
Grün	00	ff	00	Hintergrund	Beispieltext
Blau	00	00	ff	Hintergrund	Beispieltext
Weiß	ff	ff	ff	Hintergrund	Beispieltext
Schwarz	00	00	00	Hintergrund	Beispieltext
Grau	ac	ac	ac	Hintergrund	Beispieltext
Gelb	ff	ff	00	Hintergrund	Beispieltext
Magenta (Pink)	ff	00	ff	Hintergrund	Beispieltext
Cyan (Türkis)	00	ff	ff	Hintergrund	Beispieltext

Eine Trainingsseite für Farbtöne

Weiterführendes

Self-HTML - die Originalseiten von Stefan Münz

HTML-Editor Phase 5 - die Freeware-Alternative zu manch anderem Editor

Weiterführende Hinweise zur Verwendung von CSS

Und schließlich noch ein Tipp: Wenn einem eine im WWW gefundenen Seite gefällt, kann man sich ja immer den Quelltext ansehen, und Ideen für die eigene Seite entwickeln.

HTML, Hexadezimalcode

¹⁾

Eine Ligatur ist ein Buchstabe, der aus ursprünglich zwei einzelnen Buchstaben zusammengeführt wurde.

²⁾

black, gray, silver, white, navy, blue, olive, green, lime, maroon, red, teal, aqua, purple, fuchsia, yellow