885 :WEBPUBLISH: Erklärtes Beispiel

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Die Testseite</title>
  </head>

  <body>
    <h1>Das ist die Testseite</h1>
    <p>Und hier ist ganz normaler Text,<br>
    <b>fetter Text</b> und <u>unterstrichener Text</u></p>
    <p align= "center">Ich steh in der Mitte</p>
    <hr>
    <p>Achtung, jetzt kommt ein <a href="http://MezData.de" target="_blank">Link</a></p>
    <p><img height="300" width="200" src="graph/waldweg.jpg" align="left" hspace="20" alt="Ersatztext Bild"></p>
    <!-- Hier steht ein Kommentar: Zwecks Übersicht ist wird Tabelle später dargestellt -->
    <p>Nun versuche nach dem &quot;:&quot; viel Platz zu lassen:                            Stopp!</p>
    <p>Aber so gehts:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stopp!</p>
    <h3>Hier eine Punktliste:</h3>
    <ul>
      <li>erster Eintrag</li>
      <li>zweiter Eintrag</li>
    </ul>
    <h3>Eine nummerierte Liste:</h3>
    <ol>
      <li>erster Eintrag</li>
      <li>zweiter Eintrag</li>
    </ol>
    <h3>Eine Tabelle</h3>
    <table border="4" cellpadding="10" cellspacing="30" width="400">
      <tr>
        <th>Datum</th>
        <th>Einkauf</th>
        <th>Verkauf</th>
      </tr>
      <tr>
        <td>12.3.2001</td>
        <td>200 DM</td>
        <td>300 DM</td>
      </tr>
      <tr>
        <td>13.5.2001</td>
        <td>300 DM</td>
        <td>50 DM</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <address>&copy; Oliver Mezger 14.11.2004 E-mail:
    <a href="mailto:info@media.de?subject=Testseite">info@media.de</a></address>
  </body>
</html>

Link zu der Testseite

Gut zu sehen ist die geschachtelte Struktur, ein HTML-Dokument beginnt mit einem <html> Tag und endet mit einem </html> Tag.

Head-Abschnitt

<title>Die Testseite</title> Hier steht zwingend der Titel des Dokuments:

Weiter können Informationen über das Dokument, den Autor, usw. als Meta-Tags abgelegt werden.

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

Ebenso die Verweise zu den Cascading Style Sheets: <link href="webpub.css" rel="styleSheet" type="text/css">

Body-Abschnitt

Enthält den sichtbaren Teil des Dokuments.

Attribute in Tags

Im Body-Tag konnte früher ein Attribut für die Hintergrundfarbe gesetzt werden: <body bgcolor="#FFFF00">

Tags können durch Attribute erweitert, verfeinert werden.

Hinweis zu Farben:

Farben können auch durch Hexadezimalzahlen definiert werden, damit sind feinere Abstufungen möglich:

Schema ist "#rrggbb" mit rr Rotwert, gg Grünwert, bb Blauwert. Beispiele:

Farbname	Hex-Darstellung	Farbe
white	#FFFFFF
black	#000000
red	#FF0000
green	#00FF00
blue	#0000FF
yellow	#FFFF00
?	#FFCC00

Überschriften Tags <h1>...<h6>

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden. <h1>Das ist die Testseite</h1>

Abschnitts-Tag <p> (Paragraph)

<p>Und hier ist ganz normaler Text,<br> ein Zeilenumbruch kann mit dem <br> erzwungen werden
<b>fetter Text</b> und <u>unterstrichener Text</u></p>

<p align= "center">Ich steh in der Mitte</p> Weil das Align-Attribut auf "center" gesetzt wurde, steht der umschlossene Text in der Mitte.

Horizontale Linien Tag <hr>

Mit diesem Tag kann eine Linie zum optischen Trennen von Abschnitten eingefügt werden.

Links (Verweise)

Objekte, die einen Link darstellen, werden mit dem Anchor-Tag umschlossen:
<a href="http://www.mezmedia.de" target="_blank">Link</a>
hier wird auf die MezData-Seite verwiesen, durch das Setzen des Target-Attributs auf "_blank" soll der Browser die Seite in einem neuen Fenster darstellen.

Bilder und Graphiken

Bilder werden mit dem Image-Tag eingefügt:
<img height="300" width="200" src="graph/waldweg.jpg" align="left" hspace="20" alt="Ersatztext Bild">
die Angabe der Height- und With-Attribute ist optional, sie erleichtern dem Browser das Rendern der Seite, da er schon vor dem Empfang des Bildes seine Größe kennt. Mit dem align="left" wird dem Browser mitgeteilt, daß das Bild links stehen soll und folgende Objekte rechts neben dem Bild dargestellt werden. hspace="20" erzeugt einen 20 Pixel breiten Raum links und rechts neben dem Bild. Das alt="Ersatztext Bild" zeigt einen Ersatztext an solange das Bild geladen wird, oder wenn das Bild nicht angezeigt wird (toter Link oder für Blinde).

Punkteliste <ul> (ul = unordered list = unsortierte Liste)

<ul>
<li>erster Eintrag</li> (li = list item = Listeneintrag)
<li>zweiter Eintrag</li>
</ul>

Ziffernliste <ol> (ol = ordered list = numerierte Liste)

<ol>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
</ol>

Tabellen <table>

Tabellen werden auch zur Gestaltung von Web-Seiten verwendet, sie direkt in HTML zu erstellen kann recht mühsam sein, obgleich ihr Aufbau simpel ist:

<table border="4" cellpadding="10" cellspacing="30" width="400">

border bestimmt die Dicke des Außenrahmens
cellpadding bestimmt den Randabstand zwischen Zellenrand und Zelleninhalt
cellspacing bestimmt die Dicke der Gitternetzlinien innerhalb der Tabelle
width bestimmt die Breite der Tabelle, Angabe kann auch in % erfolgen

<tr> leitet eine Table-Row, eine Tabellenzeile ein. Tabellenzeilen bestehen entweder aus
<th> Table-Header, _Tabellenüberschriften oder aus
<td> Table-Data, Tabellendaten. Mit Tabellen kann ein Dokumenten-Layout vorgegeben werden.

Adresse und E-Mail-Link

<address>© Oliver Mezger 14.11.2004 E-mail: <a href="mailto:info@media.de?subject=Testseite">info@media.de</a></address>

Durch die Angabe von ?subject=Testseite im E-Mail-Link wird der "Betreff" der E-Mail vorgegeben.

Auf die Besprechung weiterer Tags wird an dieser Stelle verzichtet, unter Hinweis auf einen ausgezeichneten HTML-Kurs im Web: SELFHTML: http://de.selfhtml.org/