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:
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:
<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> |
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> <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:
Befehl | Aufgabe |
---|---|
<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!
Übrigens: Dieser Text ist in Ihrer Standardschrift geschrieben.
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.
Normalerweise ist der Text immer linksbündig. Natürlich können Sie HTML-Elemente (Text, Bilder...) auch
zentriert oder rechtsbündig ausrichten.
ACHTUNG:
ACHTUNG - Browserfalle!!! Praxis:
Mit dem Wissen dieser beiden Seiten können Sie bereits eine einfache Seite erstellen:
Sie können in ihrem Browser alle Beispiele aus StarHTML markieren und in den Editor kopieren.
Um also beispielsweise eine Textstelle braun zu gestalten, genügt der Befehl:
Dabei bedeuten:
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)
Eine Tabelle der 216 Standardfarben finden Sie in der Datei farben.htm.
(a = anchor = Anker, href = hyper reference = Hyper(text)-Referenz)
Hinter dem Objekt, auf das geklickt werden soll, beenden Sie den Verweis mit
</a> .
Beispiel-Quelltext:
Möchten Sie das Verweisziel in einem neuen Fenster des Browsers anzeigen, tragen Sie im Verweis-Tag die Option
target="_blank" ein. Beispiel:
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!
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:
Liegt der Anker in der selben Datei, können Sie den Dateinamen auch weglassen.
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:
3 entspricht der Standard-Schriftgröße, 1 ist die kleinste, 7 die größte Schrift.
Möchten Sie dem Großteil des Text eines Dokuments dieselbe Farbe zuweisen, empfiehlt es sich, diese Standard-Farbe im
<body>-Tag mit der Option text= festzulegen. Die Schriftfarbe schwarz
brauchen Sie nicht extra anzugeben, dies ist die Standardfarbe.
Arial bzw. Helvetia, Courier und Time (New) Roman. Sollten Sie eine andere Schriftart nutzen, können Sie nach einem Komma
eine der verbreiteten als Ausweichschriftart angeben.
<font size=4 color=green face="Verdana,TimesNewRoman">
Das sieht so aus.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>.
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>).
<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:Befehl Ende 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
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.
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
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.
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)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.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:
Anstelle von * geben Sie das Ziel des Verweises an:
Verweisziel das müssen Sie einsetzen Beispiel 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
<a href="tips.htm">Tipps und Hinweise</a>
Das sieht im Browser so aus: Tipps und Hinweise
<a href="tips.htm" target="_blank">Tipps und Hinweise</a>
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>
(siehe Farben)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:
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.
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.
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:
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. |