1. Grundaufbau einer HTML Datei
  2. Das Grundgerüst einer HTML Datei
  3. Hintergrund und Grafiken
  4. Die erste Webseite
  5. Tabellen
  6. Hyperlinks [Anker und Verweise]

Einleitung HTML

HTML (Hyper Text Markup Language) ist eine Seitenbeschreibungssprache für Internetseiten.

DieserKurs soll Sie mit den Grundelementen vertraut machen und das Erstellen einfacher Seiten ermöglichen.

Zum Schreiben des Quelltextes reicht ein einfacher Texteditor (z.B. Notepad), es werden aber auch unzählige HTML-Editoren im Internet als Freeware angeboten, die das Eintippen der Befehle erleichtern.

Außer einem Editor wird zusätzlich ein Browser benötigt (z.B. Mozilla Firefox), der die mit dem Editor geschriebenen Dateien korrekt interpretiert bzw. darstellt.

Wichtig: Die erstellen Dateien müssen die Dateiendung *.html aufweisen, wobei der Stern für einen beliebigen Dateinamen steht. Außerdem sollte man die erstellen HTML-Dateien immer mit mehreren Browsern testen, da die Browser die Befehle häufig verschieden interpretieren.

Grundaufbau einer HTML Datei

HTML besteht aus so genannten "Tags" (= Befehle): Beispiel: <h1> Anfang </h1>

Es beginnt mit einem einleitenden Tag (bestehend aus dem "Kleinerzeichen",
dem HTML-Befehl (h1) und dem Größerzeichen).

Alles, was nun folgt (in diesem Beispiel das Wort "Anfang"),
wird als Überschrift erster Ordnung (h1 = heading 1 = Überschrift 1) ausgegeben,
das abschließende Tag </h1> stellt den Abschluss der Formatierung dar,
der Schrägstrich vor h1 weist auf diesen Abschluss hin.

Soll auf der Seite nur Text ausgegeben werden,
wird dieser Text einfach zwischen <body> und </body> geschrieben.

Fast alle HTML-Befehle bestehen aus einleitendem und abschließendem Tag
ausnahmen gibt es natürlich überall). Die Groß/Kleinschreibung
ist bei HTML-Befehlen vernachlässigbar. (<H1> = <h1>)

Das Grundgerüst einer HTML Datei

  • <html> Der Browser erfährt, dass es sich um eine HTML-Datei handelt.
  • <head> Dateikopf, hier werden allgemeine Informationen ausgegeben
  • <title> Titel, der oberhalb der Menüzeile im Browser steht
  • </title> Ende des Titels
  • </head> Ende des Dateikopfs
  • <body>
    Hier beginnt der eigentliche und für den Anfänger wichtigste
    Teil des HTML-Dokuments.
    Alles was nach diesem Tag eingetragen wird, erscheint entsprechend der Formatierungen - auf dem Bildschirm.
    Natürlich können in diesem Bereich weitere Tags verwendet werden (z. B. das schon erwähnte <h1>), die Tags können also verschachtelt werden.
    Achtung: Nicht den Abschluss der einzelnen Tags vergessen!
  • </body> Ende des Textkörpers
  • </html> Ende des HTML-Dokuments 

Hintergrund und Grafiken

Selbstverständlich können auch Grafiken bzw. Bilder in eine
Webseite eingebunden werden.
Als Formate sind *.gif (für Grafiken) bzw. *.jpg oder *.png
für Fotos geeignet, da diese Formate einen nur geringen Speicherplatzbedarf haben.

Beispiel:
<img src="/www.hier-mein-domainname.de/bild1.gif">

Mit img (= image) src (= source =Quelle) wird die Grafikdatei mit
Namen und Pfad eingebunden.

Achtung: In diesem Beispiel befindet sich die Grafik im selben Verzeichnis wie das HTML-Dokument, ansonsten muss der Pfad (z. B. Bilder/bild1.gif) angegeben werden.

Man sollte beim Erstellen von Webseiten immer darauf achten, keine absoluten Pfade zu verwenden wie z. B. "C:Programme\Coffee\Cup\Softwareworkingbilder\", da solche Pfade auf dem Server natürlich nicht funktionieren können.

ACHTUNG: Die Windows-Pfadangaben mit "" funktionieren nicht - es muss statt dessen der Slash "/" verwendet werden.

Einige Zusatzattribute bei Grafiken:

  • <img src="/bild1.gif" width = "250" height = "450" align="right">

Mit "width" und "height" wird die Größe der Grafiken in Pixel (= Bildpunkte) angegeben bzw. erzwungen. Diese Grafik würde also bei einer Auflösung von 600 x 800 rund die Hälfte des Bildschirms einnehmen.

Mit "align" kann die Ausrichtung der Grafik bestimmt werden, Grundeinstellung ist "left", trotzdem kann die Zusatzangabe align = left sinnvoll sein, da nur dann ein Textfluss um die Grafik erfolgt.

Auch im Bodytag können neben anderen Zusatzattributen Grafiken als Hintergrund eingebunden werden.

Die erste Webseite

Folgend soll das Entstehen einer ersten, einfachen Webpage dokumentiert werden.

Die Seite soll eine Überschrift erhalten, das Tag für Überschriften wurde oben bereits vorgestellt.

Nach dem einleitenden Bodytag wird also die Überschrift folgendermaßen eingefügt:

<h1>Meine erste Webpage</h1>
Der Text würde in diesem Fall groß (h1 = größte Überschrift, h6 die kleinste) und linksbündig ausgegeben.
Um den Text zentriert auszugeben, können dem einleitenden Tag Attribute hinzugefügt werden.

<h1 align=center>Meine erste Webpage</h1>

Darstellung im Browser:

Meine erste Webpage 

Durch die Zusatzangabe "align" (= alignment = Ausrichtung) kann der Text zentriert (= center) oder auch rechtsbündig (= right) ausgegeben werden. Grundeinstellung ist die linksbündige Ausgabe.

Nun kann ein kurzer Text eingegeben werden, Absätze im Text können entweder durch das Tag <p> (=paragraph = Absatz) oder das Tag <br /> (= break) erzeugt werden.

Nach dem Einleitungsabsatz soll eine kurze Aufzählung erfolgen, um diese zu strukturieren, gibt es zwei Möglichkeiten:

1. <ol> (= ordered list): erzeugt eine Liste mit alphanumerischen Aufzählungen
2. <ul> (= unordered list): Aufzählung mit Bullets

Außerdem müssen die einzelnen Listenpunkt noch mit dem Tag <li> eingeleitet werden.

Alle mit Listen verbundenen Befehle verlangen auch ein abschließendes Tag.

Beispiel (für eine durch Bullets strukturierte Aufzählung:

<ul>
<li>1. Punkt</li>
<li>2. Punkt</li>
<li>3. Punkt</li>
</ul>

Darstellung im Browser:
 
·    1. Punkt
·    2. Punkt
·    3. Punkt
Durch <ul> wird die Aufzählung eingeleitet,
der zwischen <li> und </li> stehende Text wird im Dokument schließlich ausgegeben.
Mit </ul> wird die Aufzählung abgeschlossen. 

Zusatzelemente zur Schriftformatierung:

<b>Dieser Text ist fett</b> (b = bold =fett)
<i>Dieser Text ist kursiv</i> (i = italic = kursiv)
<u>Dieser Text ist unterstrichen</u> (u = underline = unterstrichen)

Darstellung im Browser:

Dieser Text ist fett
Dieser Text ist kursiv
Dieser Text ist unterstrichen

Neben diesen physischen Textauszeichnungen (das Tag <u> sollte mit Zurückhaltung verwendet werden, da normalerweise Links = Seitenverweise unterstrichen dargestellt werden) kann man auch Schriftgröße, Schriftfarbe und evtl. Schriftart bestimmen. Bei der Einstellung der Schriftart sollte man jedoch auf exotische Schriftarten weitgehend verzichten, da die Browser diese oft nicht darstellen können.

Beispiele:

<font size=6>Dieser Text ist sehr groß</font>
<font size=1>Dieser Text ist recht klein</font>
<font size=+1>Dieser Text ist ein wenig größer als normalerweise</font>
<font size=-2>Dieser Text ist deutlich kleiner als normalerweise</font>


Darstellung im Browser:

Dieser Text ist sehr groß

Dieser Text ist recht klein

Dieser Text ist ein wenig größer als normalerweise

Dieser Text ist deutlich kleiner als normalerweise

Der Befehl zur Schriftgröße wird mit <font> eingeleitet, durch das Attribut "size" wird die Größe der Schrift bestimmt.

Farben können in HTML durch vordefinierte Bezeichnungen (white, blue, green, etc.) oder hexadezimal angegeben werden.

Beispiele:

<font color = "#0000FF">Blauer Text</font>
<font color = "green">Grüner Text</font>
<font color = "#000000">Schwarzer Text</font>

Darstellung im Browser:

Blauer Text
Grüner Text
Schwarzer Text

Nach "font color" erfolgt die Zuweisung der Farbe (unter Anführungszeichen; es geht bei den meisten Browsern zwar auch ohne, aber man weiß ja nie ...).

Erklärung der Hexadezimalzahlen: Die Farbkomponenten Rot, Grün und Blau werden gemischt, Angaben von 0 bis F sind möglich (Hexadezimalzählweise: 0, 1, 2, ...8, 9, A, B, ...F), wobei 0 die geringste und F die höchste Farbintensität darstellen.

Bei Hexadezimalschreibweise sollte am Beginn das Zeichen "#" eingefügt werden, es funktioniert meist auch ohne, aber ... siehe oben.

Tabellen

Tabellen führen tabellarische Inhalte auf, z. B. Preislisten, Materiallisten etc.

Anmerkung: Einst (vor zehn Jahren) gehörten Tabellen zum Wichtigsten für die Gestaltung einer Website. Nur mit ihrer Hilfe konnten Grafiken exakt ausgerichtet oder Text spaltenweise wiedergegeben werden.

Beispiel:
<table border>
<tr>
<th>Mädchen</th>
<th>Jungen</th>
</tr>
<tr>
<td>Sonja</td>
<td>Elias</td>
</tr>
<tr>
<td>Anika</td>
<td>Samuel</td>
</tr>
</table>

Darstellung im Browser:
 

Eine Tabelle wird mit "table" begonnen, "tr" bedeutet table row und leitet die erste Reihe einer Tabelle ein. "th" bedeutet table head, dadurch wird die erste Reihe der Tabelle fett dargestellt, "th" kann auch durch "td" (= table data) ersetzt werden, wenn keine Tabellenüberschrift ausgegeben werden soll.

Mit </tr> wird die erste Reihe abgeschlossen, es folgt die zweite, wobei die Anzahl der "td"-Einträge die Zahl der Spalten bestimmt.

Das "table-tag" kann einige Zusatzattribute aufweisen; das wichigste ist "border". Wenn es nicht angegeben wird, fehlen die Zellenumrandungen, dadurch kann ein "Spaltentext" erzeugt werden.

Weitere Attribute:

  • align: bestimmt die Ausrichtung (z.B. align=center)
  • cellpadding: Abstand zwischen Text und Zellrand (z.B. cellpadding=5, alle Angaben in Pixel)
  • cellspacing: Abstand zwischen den Zellen, dickere Zellwände (z.B. cellspacing=3)
  • bgcolor: bestimmt die Hintergrundfarbe der Tabelle (siehe Farben im Bodytag), es kann auch einzelnen Zellen eine Farbe zugewiesen werden, dann steht das Attribut bgcolor im td-Tag.

Beispiel für ein "tabletag" mit Attributen:

<table border=5 cellpadding=4 cellspacing=3
bgcolor=#CCFFFF background="clouds.jpg" align=center>

Darstellung im Browser:

 

In den einzelnen Zellen kann auch die Breite und die Höhe definiert werden (siehe Breiten- und Höhendefinition bei Grafiken).

Es können statt des Textes auch Bilder eingefügt werden, dann wird im obigen Beispiel einer der Namen durch das img-Tag ersetzt. Dies findet sehr häufig Anwendung, da dadurch Bilder und Grafiken
auf einer Seite genau angeordnet werden können.

Hyperlinks [Anker und Verweise]

Das Grundprinzip des WWW (= World Wide Web) besteht darin, sich anhand von Links von einer Seite zur anderen zu bewegen (vgl. auch Browser: to browse = blättern, schmökern).

Hierbei muss zwischen internen, externen und Verweisen innerhalb einer Seite unterschieden werden.

a) interne Verweise

Beispiel:
<a href="/www.hier-mein-domainname.de/kurs.htm">Kurs</a>

Das "a" bedeutet anchor (= Anker), href steht für hyperreference (= Bezugnahme), kurs.htm ist eine Datei, die sich im selben Verzeichnis wie die Hauptdatei befinden muss (siehe Pfadangaben bei Grafiken), zwischen den Tags steht der im Browser angezeigte Text (beliebig), der, wenn er angeklickt wird, die neue Datei "kurs.htm" öffnet. (Es können auch Grafiken statt des Textes zwischen den Tags stehen.)

</a> beendet den Hypertextbereich.

b) externe Verweise

Beispiel:
<a href="/ http://www.pearl-online.net"> Pearl-Online Homepage </a>

Mit diesem Hyperlink würde auf die Hauptseite meiner Homepage verwiesen werden, anstatt einer Datei muss die gesamte Internetadresse des gewünschten Dokuments eingegeben werden.

c) Verweise innerhalb einer Seite

Beispiel:
<a name="teil3">3. Kapitel</a>
<a href="#teil3">3. Kapitel</a>

Zuerst muss man bei der entsprechenden Kapitelüberschrift eine Zielmarke definieren. Die Kapitelüberschrift "3. Kapitel" erhält den Namen teil3.

Auf diesen Namen wird schließlich innerhalb des am Beginn stehenden Inhaltsverzeichnisses hingewiesen.

Das Zeichen "#", das bei href vor der Zielmarke steht, ist ein Hinweis für den Browser, dass der Verweis auf der selben Seite zu suchen ist.

Der aktive Bereich, der angeklickt werden kann, ist wieder der Text, der zwischen den Tags steht.

Weitere Informationen über die Grundlagen von HTML und Web-Formularen finden sie unter http://www.teamone.de/selfhtml/