Das müssen Sie wissen

Die HTML-Sprache

HTML bedeutet Hyper Text Markup Language. Es ist eine sogenannte Auszeichnungssprache (Markup Language) für Hyper Text. Sie hat die Aufgabe, die Formatierung eines Dokuments zu beschreiben. Als Auszeichnungssprache enthält HTML daher Befehle zum Einfügen typischer Elemente eines Dokuments, wie Überschriften, Textabsätze, Tabellen oder Bilder.

HTML ist eine standardisierte Sprache. Der Standard wird vom W3-Consortium entwickelt und veröffentlicht.
Obwohl HTML standardisiert ist, ist das HTML-Verständnis der Browser sehr unterschiedlich. (Ja richtig: Der Browser ist das Programm, in dem Sie gerade diesen Text lesen. Er übersetzt die HTML-Befehle in Formatierungen.) Die beiden verbreiteten Browser Internet Explorer und Netscape Navigator (Communicator) streiten sich seit Jahren um die Gunst der Internet-Surfer. Beide Browser-Hersteller haben im Laufe der Zeit eigene Befehle erfunden, die der jeweils andere Browser natürlich bis heute nicht versteht. Einige Befehle, die eigentlich durch das W3-Consortium standardisiert wurden, werden von beiden Browsern unterschiedlich interpretiert.

HTML-Editoren

Bevor Sie beginnen: Es gibt auch Programme, die Ihnen die gesamte Arbeit mit HTML "ersparen" wollen. Dies sind sogenannte Web-, HTML- oder WYSIWYG-Editoren (What You See Is What You Get). Im Prinzip sind das Textverarbeitungsprogramme, die die Dokumente anschließend in HTML speichern.

Aber: All diese HTML-Editoren haben gemeinsame Nachteile:

  1. sie schreiben in die HTML-Datei, dass diese Internetseite mit diesem und keinem anderen Programm erstellt wurde
  2. sie benutzen überflüssige Befehle, was sehr viel Speicherplatz verschwendet
  3. Sie warnen nicht davor, browserspezifische Befehle zu verwenden.
Und wenn Sie doch mal einen einigermaßen guten HTML-Editor finden, kostet er ein Vermögen (Macromedia Dreamweaver 699DM). Der kostenlose Frontpage Express beherrscht natürlich Befehle, die nur der Internet Explorer versteht und Netscapes Browser nicht. Vor der Verwendung dieser inkompatiblen Befehle warnt er nicht einmal.

Wenn Ihre Homepage schnell zu laden, ansprechend gestaltet und Browser-kompatibel sein soll bleibt nur eins: Lernen Sie HTML!

HTML wird ständig weiter entwickelt. Inzwischen gibt es 4 Versionen:

Die Grundstruktur von HTML

HTML baut komplett auf sogenannten Tags auf (gesprochen: Täcks; engl. Marke). Jedes Tag beginnt mit einer eckigen Klammer < und enden mit dem Gegenstück >. Diese beiden Zeichen finden Sie unten links auf der Tastatur. Innerhalb dieser beiden Klammern steht jeweils ein HTML-Befehl. Dieser Befehl gilt, wenn es sich um eine Textformatierung handelt, bis zum HTML-Tag, der den Befehl rückgängig macht. Tags die etwas rückgängig machen, beinhalten nach der ersten Klammer immer den Slash / (gespr. Släsch = Schrägstrich).
<Befehl> Text  <Befehl-rückgängig>
Beispiel:<b> Text </b>

Um Elemente, die durch einen solchen Tag eingefügt wurden, näher zu definieren (Höhe und Breite festlegen, Text formatieren...) gibt es Optionen (auch Attribute genannt). Diese Optionen stehen zusätzlich innerhalb des Tags. Zwischen dem Tag-Name und der ersten Option, und zwischen den Optionen steht jeweils ein Leerzeichen.

<Befehl Option 2.Option>
Beispiel:<img scr="datei.gif" width=200>

Die Paare von Befehlen und deren Widerrufungen können Sie auch ineinander verschachteln:

<b><i> Text </i></b>
<b><i> Text </b></i>
<b><i> Text </i> Text </b>
Aber nicht:
<b><i> Text </b> Text </i>

So schreiben Sie HTML

HTML-Dateien schreibt man am besten in einfachen Text-Editoren (ASCII-Editoren) wie dem Windows-Editor, den Sie über [Start] ->Programme ->Zubehör ->Editor erreichen. Texte, die mit ASCII-Editoren erstellt wurden, enthalten keinerlei Formatierungen.

Nachdem Sie hier den HTML-Quellcode eingetippt haben, und die Datei abgespeichert haben, mit der Endung .htm oder .html, damit es von Browsern als HTML-Datei erkannt wird), wechseln Sie in ihren Browser und laden Sie die Datei (Pfad in Eingabezeile eintragen).
Vorsicht: Wie Sie sehen, gibt der Windows-Editor die Endung .txt vor. Sie müssen die Einstellung der Dateiart auf "Alle Dateien" ändern, um die HTML-Endung anzugeben!

Natürlich wird HTML innerhalb einer Seite (einer Datei) von oben nach unten und in der Zeile von links nach rechts geschrieben. Sie zählen also nacheinander auf, was die Seite enthalten soll.
Den Text können Sie einfach in die Datei schreiben. Bilder oder Tabellen fügen Sie mit HTML-Befehlen ein, genauso wie Textformatierungen.
Zeilenumbrüche, die Sie im Editor mit dem Druck auf die Eingabe-Taste einfügen, werden vom Browser ignoriert. Um in den Text, so wie er im Browser erscheint, einen Zeilenumbruch einzufügen, schreiben Sie an die Stelle in der Datei den Befehl <br>.
Übrigens: Manchmal gibt es in HTML zwei Möglichkeiten, um das Selbe zu erzeugen. Dann ist in StarHTML nur der einfachere Weg angegeben.

HTML lernen mit StarHTML

StarHTML erleichtert Ihnen das Schreiben von Internetseiten. Alle Inhaltsseiten sind so geordnet, dass Sie möglichst effektiv lernen. Am Ende jeder Seite finden Sie Verweise zur nächsten Seite (mit gekennzeichnet). Möchten Sie zum Inhaltsverzeichnis zurückkehren, genügt ein Klick auf StarHTML.
StarHTML enthält zahlreiche Praxistips, die durch eine entsprechende blaue Schrift erkennbar sind. Wichtige Hinweise sind braun gekennzeichnet.
Möchten Sie es schwarz auf weiß vor sich sehen, nutzen Sie bitte die Druckversion.
StarHTML wird fortgeführt: Weiterführende Informationen gibt es ständig aktuell im Online-Forum.


Grundgerüst

Jede HTML-Datei hat folgendes Grundgerüst:

<html>
 <head>
  <title>
   ...
  </title>
 </head>
 <body>
  ...
 </body>
</html>

Sie beginnt mit dem Tag <html>, der die HTML-Sprache kennzeichnet (wird ganz am Ende durch </html> beendet). Die Seite besteht aus zwei Teilen:

Sie sollten jeder HTML-Seite einen Titel geben. Den Titel geben Sie im Head-Teil der Seite zwischen <title> und </title> an. Der Titel erscheint in der Titelzeile des Browsers und Sie können ihn nicht formatieren.
Innerhalb des Körpers steht der eigentlich Inhalt der Seite.
Noch einmal im Überblick:

BefehlAufgabe
<html>Beginn einer HTML-Seite
<head>Beginn des Seitenkopfes
<title> / </title>Beginn des Titels / Ende des Titels
</head>Ende des Seitenkopfes
<body>Beginn des Seitenkörpers
</body>Ende des Seitenkörpers
</html>Ende einer HTML-Seite

Praxistipps:
Gerade der Titel enthält oft wichtige Informationen, denn Suchmaschinen werten diesen ganz besonders aus. Der Titel sollte weder zu lang, noch zu kurz sein: er sollte zwischen 5 und 10 Wörtern enthalten.

Legen Sie sich eine Seiten-Vorlage für Ihre Homepage an, damit Sie jedesmal, wenn Sie eine neue Seite hinzufügen, nicht nochmals den gesamten Grundaufbau Ihrer Seite neu eingeben müssen!


Textformatierung

Um Text in eine HTML-Seite einzufügen ist kein Befehl notwendig. Sie tippen den Text einfach in die Datei an die entsprechende Stelle ein (zwischen <body> und </body>). Dieser Text wird dann in der eingestellten Standard-Schriftart des jeweiligen Nutzers angezeigt. Meist ist das Times New Roman.

Übrigens: Dieser Text ist in Ihrer Standardschrift geschrieben.

Einfache Schriftformatierung


Möchten Sie, dass der Text bei jedem Nutzer in der selben Schriftart angezeigt wird, was wohl sehr wahrscheinlich ist, setzen Sie vor den zu formatierenden Text das Tag <font> (font = Schrift). Hinter font können folgende Optionen erscheinen (mindestens eine):

Beispiel:
<font size=4 color=green face="Verdana,TimesNewRoman"> Das sieht so aus.

Und: Mit </font> heben Sie die Wirkung des letzten font-Tags auf.

Praxistipp: Sollten Sie mit heller Schrift auf dunklem Grund schreiben, setzen Sie Arial als Schriftart ein. Bei Arial beträgt die im Internet übliche Schriftgröße 2, diese müssen Sie extra angeben.

Absätze einfügen und ausrichten


Im Browser wird am rechten Fensterrand automatisch eine neue Zeile begonnen, das nennt man automatischen Zeilenumbruch. Die Zeilenumbrüche in der HTML-Datei spielen dabei keine Rolle, sie werden vom Browser ignoriert.
Sie können einen Zeilenumbruch oder einen Absatz auf der Seite erzwingen. Um eine neue Zeile zu beginnen setzen Sie hinter die beendete Zeile den Befehl <br> (br = break = Umbruch). Um einen Absatz zu erzwingen setzen Sie <p> ein (p = paragraph). Wollen Sie mehr als eine Zeile überspringen, setzen Sie mehrere <br> ein (eins je Zeile).
Ebenso können Sie den automatischen Zeilenumbruch verhindern: Setzen Sie vor einen Bereich ihrer Seite, in dem kein Zeilenumbruch erfolgen soll, das Tag <nobr> . Hinter diesen Bereich folgt das Tag </nobr>.

Normalerweise ist der Text immer linksbündig. Natürlich können Sie HTML-Elemente (Text, Bilder...) auch zentriert oder rechtsbündig ausrichten.
Setzen Sie vor den zentrierten Bereich das Tag <div align=center> und vor rechtsbündig zu formatierenden Text <div align=right> (dahinter jeweils um den Befehl rückgängig zu machen: </div>).

ACHTUNG:
<p> beendet Textformatierungen! Um das zu verhindern, setzen sie <br><br> anstatt von <p> ein.

Verschiedene Formatierungen


Außerdem können Sie einzelne Buchstaben, Wörter, Sätze oder Absätze auf verschiedene Arten hervorheben:

BefehlEnde Beispiel
<b> (bold) </b> Fett StarHTML
<i> (italic) </i> Kursiv StarHTML
<u> (underline) </u> Unterstrichen StarHTML
<sub> (unter) </sub> Tiefgestellt StarHTML
<sup> (super) </sup> Hochgestellt StarHTML
<big> </big> Größer als angegeben StarHTML
<small> </small> Kleiner als angegeben StarHTML
<tt> (teletyper = Fernschreiber) </tt> Dicktengleich
(Schreibmaschine)
StarHTML

ACHTUNG - Browserfalle!!!
Das Tag <div> (bzw. </div>) beendet bei Netscape automatisch verschiedene Text-Formatierungen (z.B. Unterstreichungen und Schriftfarben), beim Internet Explorer allerdings nicht!
Es gibt noch viele weitere Differenzen der beiden wichtigsten Browser, Details dazu finden Sie unter
Browserprobleme.

Praxis: Mit dem Wissen dieser beiden Seiten können Sie bereits eine einfache Seite erstellen:

  1. Geben Sie in in Ihren Editor das Grundgerüst einer HTML-Seite ein.
  2. Tragen Sie einen Titel (z.B. Testseite) ein. Fügen Sie außerdem zwischen <body> und </body> noch einen kurzen Text ein. Dieser sollte nicht formatiert werden!
  3. Nach dem Abspeichern und Aufrufen der Seite im Browser wird links oben der Text in der eingestellten Standardschriftart angezeigt.
  4. Schließen Sie nun das neue Fenster und formatieren Sie den Text mit HTML-Befehlen. Wichtig sind erstmal eine andere Farbe (jetzt sollten Sie die Seite zu Farben lesen!), Größe und Schriftart. Setzen Sie auch das Tag <b> ein, um Textabschnitte fett darzustellen.

Sie können in ihrem Browser alle Beispiele aus StarHTML markieren und in den Editor kopieren.
Im Browser markieren und [STRG]+[C] drücken, in den Editor wechseln und [Strg]+[V] drücken.


Farben

Farben hinterlassen beim Besucher einen ersten visuellen Eindruck der Internetseite.
Farb-Angaben werden in vielen Zusammenhängen eingesetzt:
Zum Beispiel bei Schriftfarben, Verweisfarben und Hintergrundfarben.

Die 16 Grundfarben


Die 16 Grundfarben, die jeder VGA-kompatible Monitor darstellen kann, können Sie mit Namen angeben:

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

Um also beispielsweise eine Textstelle braun zu gestalten, genügt der Befehl:

<font color=maroon>Dieser Satz ist ein brauner Satz.</font>

Hexadezimalcodes für mehr Farben


Weitere Farben (16,7 Millionen) können Sie mit einem Hexadezimal-Code angeben:
Solch ein Code wird immer mit einem Gatter (Doppelkreuz) # eingeleitet. Danach folgen 6 Zeichen:
Die ersten zwei legen den Rot-Anteil fest, die mittleren den Grün-Anteil und die letzten beiden den Blau-Anteil.

Dabei bedeuten:
0 (entspricht dezimal 0)
1 (entspricht dezimal 1)
2 (entspricht dezimal 2)
3 (entspricht dezimal 3)
4 (entspricht dezimal 4)
5 (entspricht dezimal 5)
6 (entspricht dezimal 6)
7 (entspricht dezimal 7)
8 (entspricht dezimal 8)
9 (entspricht dezimal 9)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)

Eine hexadezimale Ziffer kann also 16 Zustände haben. Jeder Farbwert (Rot, Grün, Blau) wird durch 2 Ziffern angegeben. Das macht 16 x 16 (= 256) mögliche Zustände pro Farbwert, also 256 x 256 x 256 = 16.777.216 verschiedene Farbtöne. (siehe auch Webgrafik)

Die 216 Standardfarben


Es gibt außerdem 216 Standardfarben (auch Netscape-Farben genannt). Diese Farbpalette hat sich im Internet zu einem Standard entwickelt. Soweit möglich sollten Sie versuchen, in ihren HTML-Dateien nur diese Farben einzusetzen.

Eine Tabelle der 216 Standardfarben finden Sie in der Datei farben.htm.


Verweise und Anker

Verweise, auch Links (englisch für Verbindungen) oder Verknüpfungen genannt, machen das Faszinierende an Internetseiten aus: Sie verbinden die Seiten so, dass man mit einem Mausklick auf der anderen Seite der Erde landen kann.
Aber der wichtigste Aspekt eines Verweises ist es, innerhalb einer Homepage zu navigieren. Mit einem Klick auf einen Verweis auf der Startseite gelangt Ihr Besucher zu den Themenseiten und später mit einem Klick auf einen Rück-Verweis wieder zum Ausgangspunkt zurück.

Verweise einfügen


Textstellen und Bilder können als Verweise markiert werden. Dazu fügen Sie vor den Text/das Bild folgenden Befehl ein:

<a href="*">

(a = anchor = Anker, href = hyper reference = Hyper(text)-Referenz)
Anstelle von * geben Sie das Ziel des Verweises an:

Verweiszieldas müssen Sie einsetzenBeispiel
Andere Internet-Seite [Internet-Adresse mit "http://"]
Seite / Datei im selben
Verzeichnis des Servers
[Dateiname]
Seite / Datei im
Ober-Verzeichnis des Servers
../[Dateiname] ../tips.htm
Datei in einem Unterverzeichnis [Unterverzeichnis]/[Dateiname] computer/tips.htm
E-Mail an ... mailto:[E-Mail-Adresse] mailto:info@bsp.de

Hinter dem Objekt, auf das geklickt werden soll, beenden Sie den Verweis mit </a> .

Beispiel-Quelltext:
<a href="tips.htm">Tipps und Hinweise</a>
Das sieht im Browser so aus: Tipps und Hinweise

Möchten Sie das Verweisziel in einem neuen Fenster des Browsers anzeigen, tragen Sie im Verweis-Tag die Option target="_blank" ein. Beispiel:
<a href="tips.htm" target="_blank">Tipps und Hinweise</a>

ACHTUNG: Beachten Sie in Verweisen immer die Groß-/Kleinschreibung der Dateinamen! Übliche Betriebssysteme für Server unterscheiden zwischen Groß-/Kleinbuchstaben! Damit Sie nicht durcheinander kommen empfiehlt es sich, alle Dateinamen klein zu schreiben!

Übrigens: Möchten Sie Dateien zum Download anbieten? Setzen Sie einfach einen Verweis darauf!
Je nach Konfiguration des Browsers wird der Besucher nach einem Klick darauf gefragt, was der Browser mit der Datei tun soll, oder der Browser lädt die Datei direkt in das zugehörige Programm.

Verweise formatieren


Sie können Verweise natürlich auch formatieren. Bei Text-Verweise funktioniert das genauso, wie mit einfachem
Text. Aber: Text-Verweise sind standardmäßig bereits unterstrichen.
Und: Text-Verweise werden in der Verweisfarbe geschrieben, Verweis-Bilder werden mit der Verweisfarbe umrahmt. Die Verweis-Farbe können Sie mit folgenden Optionen im body-Tag festlegen:

zum Beispiel: <body link=navy vlink=purple>

Anker setzen


Standardmäßig wird beim Laden einer Seite immer der Seitenanfang angezeigt. Um mit einem Verweis zu einem ganz bestimmten Teil der selben oder einer anderen Seite zu springen, müssen Sie zuerst an dieser Stelle einen Anker setzen.
Vor ein Objekt, das Sie mit dem Anker markieren wollen, setzen Sie das Tag <a name="*">. Anstelle von * setzen Sie einen Namen/eine Bezeichnung für diesen Anker ein. Hinter die Stelle setzen Sie den Befehl </a>. Beispiel:

<a name="Infotext"> Textstelle </a>

Vorsicht: der Name darf keine Leerzeichen und keine Sonderzeichen wie z.B. deutsche Umlaute enthalten! Dafür aber den Unterstrich "_". Beachten Sie aber auf jeden Fall Groß-/Kleinschreibung!

Wenn Sie einen Verweis zu diesem Anker setzen möchten, geben Sie beim Verweis-Ziel hinter dem Dateinamen ein Doppelkreuz/Gatter "#" ein und dann den Namen des Ankers. Beispiel:

<a href="datei.htm#Infotext">Verweistext</a>

Liegt der Anker in der selben Datei, können Sie den Dateinamen auch weglassen.
Um sicherzustellen, dass Ihre Besucher immer an der richtigen Stelle landen, darf natürlich jeder Name nur einmal innerhalb einer Seite vorkommen.


Bilder einfügen und formatieren

Bilder auf Internet-Seiten sind immer GIF- oder JPEG-Dateien (Dateiendung .gif oder .jpg/.jpeg). Andere Formate werden von den meisten Browsern nicht verstanden.

Einfügen von Bildern


Bilder werden an der gewünschten Stelle mit <img src="*"> eingebunden (img = image = Bild, src = source = Quelle). Anstelle von * geben Sie die Bild-Datei an:

Quelle des Bildesdas müssen Sie einsetzenBeispiel
auf fremden Server [Adresse des Bildes mit "http://"]
im selben Verzeichnis
des Servers
[Dateiname]
Datei im Ober-
Verzeichnis des Servers
../[Dateiname] ../logo.gif
in einem Unterverzeichniss [Verzeichnis]/[Dateiname] bilder/logo.gif

Im Fließtext sieht das so aus:
Das Bild setzt auf der Zeile auf und fügt so einen Abstand zur oberen Zeile ein.

Formatieren eines Bildes


Hinter src="*" können noch Optionen erscheinen und auch beliebig miteinander kombiniert werden:

Nicht vergessen: Optionen sind weitere Befehle innerhalb des selben Tags!

alt="*" (alt = alternative) Wenn der Nutzer das automatische Laden der Bilder im Browser abgeschaltet hat, erscheint anstatt der Bilder nur ein Rahmen, der diesen Alternativtext * enthält.
width=*
height=*
Hinter width= (Breite) bzw. height= (Höhe) können sie eine bestimmte Größe des Bildes in Pixeln erzwingen. Normalerweise wird ein Bild in der Originalgröße angezeigt. So können sie aber ein quadratisches Bild zum langen Rechteck machen, vergrößern oder verkleinern.
Wenn Sie entweder nur Breit oder nur Höhe angeben, wir die andere Seite proportional angepasst.
Auch wenn Sie ein Bild in Originalgröße einbinden möchten, ist es empfehlenswert die Größenangaben zu verwenden, da der Browser dadurch in der Lage ist, die Seite schneller aufzubauen.
Beachten Sie, das ein vom Browser vergrößertes Bild sehr gerastert wirkt. Wenn Sie eine Bild-Datei immer verkleinert einbinden, sollten Sie sie gleich durch ein kleineres Abbild ersetzen, dass in Originalgröße angezeigt werden kann. Das spart Speicherplatz und Ladezeit.

hspace=*
vspace=*
(hspace = horizontal space = horizontaler Abstand, vspace = vertical space = vertikaler Abstand) Mit hspace=* bzw. vspace=* legen Sie den Abstand des Bildes zu seiner Umgebung in Pixeln fest. (hspace waagerecht; vspace senkrecht)
border=0 (border = Umrandung) Wenn Sie Bilder als Verweis markieren, erscheint ein farbiger Rahmen um das Bild. Dieser kann oft sehr störend wirken, dann sollten Sie im Bild-Tag die Option border=0 einfügen, damit wird dieser Rahmen unterdrückt.

zwei Beispiele:

<img src="logo.gif" alt="meine Wolke" width=200 height=100>
<a href="firma.htm"><img src="logo.gif" border=0></a>

Außerdem können Sie mit der Option align=[left/right] Bilder ausrichten (align = Ausrichtung, left = links, right = rechts ). Der Text fließt dann an der Seite um das Bild herum. Soll der Text zwar anfangs neben dem Bild entlangführen, dann aber unter dem Bild weitergehen, setzen Sie an das Ende des Textes neben dem Bild <br clear=all>. Beispiel:

<img src="baum.gif" align=left> Dieser Text steht neben dem Bild.
<br clear=all> Und dieser unter dem Bild.

Text zunächst neben dem Bild. Er beginnt an der rechten oberen Ecke, da das Bild nach links ausgerichtet ist. Ein Abstand von 20 Pixeln zur Umgebung bewirkt gute Lesbarkeit.
Und nun wird darunter weitergeschrieben.

Praxistips: Gewöhnen Sie ich an, jedes Bild mit einem Alternativ-Text auszurüsten und immer Höhe und Breite des Bildes anzugeben, auch wenn es in der Originalgröße angezeigt werden soll. (siehe Guter HTML-Stil)
Bilder brauchen wesentlich mehr Speicherplatz als die eigentliche Internet-Seite. Reduzieren Sie in Ihren Bild-Dateien gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und stopfen Sie nicht zu viele Bilder in eine einzige HTML-Datei.
Sollten Sie ein Bild einbinden wollen, das größer als 50 kB ist (und Sie es nicht weiter verkleinern können), erstellen Sie besser mit ihrem Bildbearbeitungsprogramm ein kleineres Abbild, binden Sie dieses ein und markieren Sie es als Verweis zum Original. (siehe auch Webgrafik)

Detaillierte Informationen über die Unterschiede zwischen GIF- und JPEG-Bildern finden Sie unter GIF/JPEG im Vergleich. Einige nützliche Bilder für ihre Homepage sind in StarHTML bereits enthalten.


Hintergrundfarben
und -bilder

Im <body>-Tag können Sie mit zwei Optionen den Hintergrund der gesamten Seite festlegen. Der Hintergrund einer Internet-Seite kann eine Farbe oder ein Bild sein.

bgcolor=Hinter bgcolor= (bgcolor = background color = Hintergrundfarbe) können Sie eine Hintergrundfarbe für die gesamte Seite festlegen. Wie Sie Farben definieren, steht unter Farben.
background="*"Hinter background= (background = Hintergrund) können Sie ein Bild als Hintergrundbild festlegen. Für * gilt das Selbe wie für Quellen von Bildern. Das Bild wird so oft aneinander gesetzt, bis die gesamte Seite gefüllt ist. Auch Hintergrundbilder müssen im GIF- oder im JPEG-Format vorliegen (Dateiendung .gif oder .jpg/.jpeg).

Praxis:

Nun können Sie eine ansprechende Seite erzeugen:

  1. Öffnen Sie Ihren Editor.
  2. Schreiben Sie erneut das Grundgerüst, einen Titel und ein bisschen Text in eine neue Datei.
  3. Fügen Sie am Ende einen Absatz (<p>) ein. Anschließend soll ein Verweis zu einer weiteren Datei namens bild.htm führen. Wählen Sie einen Verweistext.
  4. Natürlich müssen Sie die Datei bild.htm noch erstellen. Speichern Sie also die erste Datei unter dem Namen home.htm in einem neuen Verzeichnis und erzeugen Sie eine neue Datei mit einem Bild (Grundgerüst, Titel, Hintergrund und Beispielbild). Schreiben Sie im Editor direkt hinter dem img-Tag einen kurzen Text.
  5. Speichern Sie die Datei als bild.htm und wechseln Sie wieder in den Browser.
  6. Öffnen Sie ein neues Fenster ihres Browsers und laden Sie home.htm. Klicken Sie auf den entstandenen Verweis. Die Datei bild.htm wird geöffnet. Der Text beginnt an der rechten unteren Ecke vom Bild und wird unter dem Bild fortgesetzt.
  7. Wechseln Sie wieder in den Editor. Durch die Option align=left im Tag des Bildes richten Sie es fest linksbündig aus. Dadurch können Sie hinter dem Bild gleich weiterschreiben, der Text erscheint an der rechten Seite.


Trennlinien und Überschriften

Trennlinien


Um Seitenabschnitte übersichtlich mit einer waagerechten Trennlinie zu teilen, setzen Sie an die jeweilige Stelle <hr>. Das sieht dann so aus:


Innerhalb des Tags können noch folgende Optionen stehen:

noshade(noshade = unschattiert) Die Linie wird nicht schattiert angezeigt:

width=*(width = Breite) Mit * legen Sie die Länge der Linie fest. Sie wird in Pixeln oder Prozent des Fensters angegeben.
size=*(size = Größe) So wird die Höhe festgelegt. Die Höhe * muss in Pixeln angegeben werden. Ohne diese Option beträgt die Breite immer 2 Pixel.
align=[left/right](align = Ausrichtung) Normalerweise wird die Linie zentriert ausgerichtet. Mit left wird sie aber nach links und mit right nach rechts ausgerichtet.

Überschriften


Für Überschriften sind bereits feste Größen und Schriftarten vorgesehen. Es sind 6 verschiedene Überschriftsgrößen vorgesehen, die aber in jedem Browser etwas unterschiedlich sind.
Vor den Überschriftstext setzen Sie das Tag <h*> (h = heading = Überschrift). Für * setzen Sie eine Zahl von 1 bis 6 ein. Mit <h1> definieren Sie eine Überschrift 1. Ordung. Hinter die Überschrift setzen Sie </h*>, natürlich mit der selben Zahl. Vor und hinter diese Überschrift wird übrigrens automatisch ein Absatz eingefügt. Und so sehen die Überschriften aus:

Überschrift 1. Ordnung

Überschrift 2. Ordnung

Überschrift 3. Ordnung

Überschrift 4. Ordnung

Überschrift 5. Ordnung
Überschrift 6. Ordnung


Listen und Aufzählungen

Numerierte Listen und Aufzählungen können Sie ebenfalls mit HTML-Befehlen gestalten:

<ol>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>
numierierte Liste:
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag
<ol type=a>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>

<ol type=A>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>

alphabetische Liste:
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag

Groß-/Kleinschreibung hinter type= entscheidet!
<ol type=i>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>

<ol type=I>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ol>

römisch numerierte Liste:
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. Dritter Eintrag

Groß-/Kleinschreibung hinter type= entscheidet!
<ul>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>
Aufzählung mit Kreisen:
  • Erster Eintrag
  • Zweiter Eintrag
  • Dritter Eintrag
<ul type=circle>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>
Aufzählung mit hohlen Kreisen:
  • Erster Eintrag
  • Zweiter Eintrag
  • Dritter Eintrag
<ul type=square>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>
Aufzählung mit Quadraten:
  • Erster Eintrag
  • Zweiter Eintrag
  • Dritter Eintrag
ol = ordered list = geordnete Liste;
ul = unordered list = ungeordnete Liste = Aufzählung;
li = list item = Listeneintrag

Verschachteln von Listen und Aufzählungen ist ebenfalls möglich.
Verschachteln von numerierten Listen bewirkt allerdings keine Gesamtnumerierung 1, 1.1, 1.1.1 ...


StarHTML Druckversion

Martin Zwirner ©12/1999 EMail Online-Forum