Websites erstellen mit HTML

© Kilian Lieret
Alle Rechte vorbehalten.
Bilder, Textpassagen u.Ä. dürfen nur mit Erlaubnis des Urhebers kopiert werden.
www.lieret.net

Websites erstellen mit HTML

Inhaltsverzeichnis

- Quelltext --> HTML
- Grundaufbau einer Seite
- Formatierungen
- Hyperlinks

Quelltext --> HTML

Um eine einfache HTML-Seite aufzubauen braucht man im Prinzip nur den Texteditor. Zuerst aber muss bei manchen Computern die Ordnereinstellung "Endungen anzeigen" aktiviert werden. Diese bewirkt, dass jede Datei ein mit einem Punkt abgegrenztes Kürzel hat, an dem erkennbar ist, mit welchen Programm die Datei ausgeführt wird. Bei einem Texteditor wäre das die Endung ".txt", bei einem Word-Dokument ".doc" oder bei einem HTML-Dokument die Endung ".html". Sollten diese Endungen nicht angezeigt werden muss man das ganze ändern:
Die Ordnereinstellungen findet man in den Ordnermenus (zum Anzeigen bei Microsoft Vista die Alt-Taste drücken): "Extras" / "Ordneroptionen"

Ist das Menu geöffnet muss man nur noch auf das Register "Ansicht" gehen und dort sicherstellen, dass die Option "Erweiterungen bei bekannten Dateitypen ausblenden" nicht aktiviert ist. Danach nur noch auf "Übernehmen" klicken und fertig.

Für die erste HTML-Datei nun einfach eine neue Textdatei erstellen, indem man einen Rechtsklick im Zielordner macht und bei dem ercheinenden Menu "Neu" / "Textdokument" auswählt.

Als Namen der Datei muss man jetzt den gewünschten Namen und statt der Endung ".txt" ".html" eingeben. Die anschließende Meldung ignorieren und auf "Ja" klicken, damit der Name geändert wird.
Jetzt hat man eine HTML Datei erstellt. Allerdings ist man selber der einzige, der sie betrachten kann, da man sie noch nicht im Internet veröffentlicht hat.
Beim Öffnen des Dokuments zeigt der Internetexplorer eine leere Seite an. Was fehlt ist ein bisschen Text.
Hierfür den Internetexplorer wieder schließen und zurück zum Ordner in dem die HTML-Datei gespeichert ist. Diese klickt man nun mit der rechten Maustaste an und geht auf "Öffnen mit" / "Editor". Der Texteditor öffnet sich und zeigt ein leeres Blatt. Dies ist der sogenannte "Quelltext". Alle Befehle, die hier eingetippt werden, werden "übersetzt" und als HTML-Dokument im Internetexplorer angezeigt.

Grundaufbau einer Seite

Im Quelltext befindet sich nicht nur Text, sondern auch Befehle, die zum Beispiel Farben ändern, Tabellen erstellen oder ähnliches. Ein Befehl wird immer in spitze Klammern (< / >) eingeschlossen.

Zusätzlich zu dem Befehlsnamen, stehen in diesem so genannten "Tag" häufig auch noch Zusatzinformationen. Diese werden ohne Komma einfach dahinter geschrieben.

Alle Zusatzinformationen werden folgendermaßen als Eigenschaften formuliert:

EIGENSCHAFT="WERT"

Damit sähe ein relativ komplexer Befehl zum Beispiel folgendermaßen aus:

Viele Befehle dienen dazu einen ganzen Bereich von Text beziehungsweise Befehlen zu formatieren. Bei derartigen Anweisungen und auch einigen anderen muss das ganze ein wenig abgewandelt werden:

<BEFEHLSNAME EIGENSCHAFT1="WERT" EIGENSCHAFT2="WERT"> Zu formatierender Bereich </BEFEHLSNAME>

Hier ist der Befehl zweigeteilt: Der erste Teil des Befehls sagt dem Computer, dass von jetzt an alles auf eine bestimmte Weise formatiert werden soll, der zweite, dass dieser Befehl ab dieser Stelle nicht mehr gelten soll. Der Bereich, der verändert wird steht also zwischen den beiden Teilen. Im Anfangsteil des Befehls werden alle Zusatzinformationen wie oben angegeben. Im zweiten steht nur noch einmal der Name des Befehls mit vorangestellten Schrägstrich.

Der Grundaufbau einer Seite sieht folgendermaßen aus:

<HTML>

<HEAD>
(KOPFINFORMATIONEN)
</HEAD>

<BODY>
(HAUPTTEIL)
</BODY>

</HTML>

Der erste Befehl, <HTML> bewirkt, dass der Computer überhaupt weiß, dass dies eine HTML Datei ist. Da ja der ganze Text HTML ist, steht deshalb der Anfangs- und Endbefehl an Anfang und Schluss. Die Groß- und Kleinschreibung der Befehle ist übrigens nicht festgelegt. Zwischen <HTML> und <html> besteht kein Unterschied. Häufig werden jedoch alle Befehle zur Unterscheidung von Normaltext groß geschrieben. Für den Computer macht das jedoch keinen Unterschied.
Die Übersetzung des englischen Wortes Head (=Kopf) sagt eigentlich schon alles über den <HEAD>Teil. Dieser Bereich ist der Kopf der Internetseite, in dem alle möglichen Informationen über die Seite angegeben werden. Solche Sachen wie Titel, Schlagwörter für Suchmaschienen, Autor und ähnliches werden hier hinein geschrieben.
Der andere Teil der Seite, der body (=Körper), ist die eigentliche Seite, die dann im Internet Explorer angezeigt wird. Hier steht der ganze Text, werden Bilder und Tabellen eingefügt usw.

Hier einmal eine kleine Seite als Beispiel und mit ein Paar neuen Befehlen:

<HTML>

<HEAD>
<TITLE> Mein Wunschtitel </TITLE>
</HEAD>

<BODY>
Mein Wunschtext
</BODY>

</HTML>

Diese Stelle nun einfach in den Texteditor eingeben, SPEICHERN und das HTML-Dokument öffnen. Der Text "Mein Wunschtext" wird unverändert angezeigt. Man kann also einfach Text in den Body schreiben und dieser wird ohne Probleme angezeigt.
"Mein Wunschtitel" dagegen erscheint im Titel der Seite (--> blauer Balken). Dies Bewirkt der in den HEAD geschriebene Title-Befehl: <TITLE> … </TITLE>.
Außerdem noch wichtig: HTML ignoriert Leerzeichen, die nach einem Leerzeichen kommen. Ein einfaches Leerzeichen wird also ganz normal angezeigt, zwei, drei, oder mehr werden aber dennoch nur als eines erscheinen. Das heißt: "Ab Stand" wird genauso angezeigt wie "Ab stand", oder "Ab stand". Um dennoch weitere Leerzeichen einzufügen muss man das Zeichen kodieren: Ein Leerzeichen entspräche hier " ". Ein weiteres Problem machen Sonderzeichen und Umlaute. Auch diese sollten kodiert werden, da sie sonst Browser mit anderen Zeichensätzen nur schwerlich wiedergeben können. Alle Kodierungen sind nach dem folgendem Schema aufgebaut:

& … ;

Am Anfang des Sonderzeichens steht immer das &. Es bewirkt, dass die nachfolgenden Buchstaben/Symbole als Sonderzeichen interpretiert werden. Danach kommt der Code des Zeichen und abschließend ein Strichpunkt.
Hier eine kleine Übersicht über die Wichtigsten Codes:

Zeichen(gruppe)	Kodierung	Beispiel	Kodierung
Umlaute	&[Vokal]uml;	Ä	Ä
Akzent Á	&[Normalzeichen]acute;	Á	Á
Akzent À	&[Normalzeichen]grave;	À	À
Akzent Â	&[Normalzeichen]circ;	Â	Â
Akzent Å	&[Normalzeichen]ring;	Å	Å
Akzent Ã	&[Normalzeichen]tilde;	Ã	Ã
Häkchen Ç	&[Normalzeichen]cedil;	Ç	Ç
Scharfes ß	&szlig;	ß	ß

Symbole:

Symbol

Kodierung

© &copy;
° &deg;
¼ / ½ / ¾ &frac[12/14/34];
µ &micro;
Ø &Oslash;
± plusmn;
® &reg;
§ &sect;

Zusätzlich müssen auch noch die Zeichen <, >, & und " kodiert werden, da sie normalerweise im HTML-Quelltext als Steuerzeichen interpretiert werden. So würde der Text "8<9>7" nicht richtig angezeigt werden, da die beiden spitzen Klammern als Befehl interpretiert würden. Da dieser keinen Sinn ergäbe würde einfach der ganze Befehl ausgelassen werden, so dass am Ende nur noch 8 7 angezeigt bewerden würde.

Zeichen	Kodierung
<	<
>	>
&	&amp;
"	&quot;

Auch noch ein Problem: HTML ignoriert auch sämtliche Absätze, die im Quelltext gemacht werden. Diese muss man durch Befehle ausdrücken:

= Absatz
 = Zeilenumbruch

Und weils sonst so praktisch wär, werden auch hier mehre dieser Befehle ignoriert, wenn kein Zeichen zwischen zwischen ihnen steht. Dieses kann jedoch auch ein Leerzeichen sein, wobei allerdings zu beachten ist, dass man das zweite Leerzeichen kodieren muss.

Formatierungen und erste Verbesserungen

Der bisherige Text sähe noch ziemlich langweilig aus. Das soll sich jetzt ändern:

Ein sehr vielseitiger Befehl zum gestalten Textes ist der -Befehl. Mit ihm lässt sich die Farbe, die Schriftart und die Schriftgröße bestimmen:

<FONT COLOR="Farbe" FACE="Schriftart" SIZE="Schriftgröße"> Zu formatierender Bereich </FONT>

Das COLOR Atribut bestimmt die Farbe des Textes. Als Farbbennenung gehen englische Bezeichnungen wie "black", "green", usw. Allerdings gibt es nur einige wenige Standartfarben. Um andere Farben darzustellen, muss die Farbe kodiert werden, also in einen hexadezimalen Zahlencode umgewandelt werden.
Im Hexadezimalen System gibt es neben den normalen arabischen Ziffern auch noch die Buchstaben A(=10), B(=11), C(=12), D(=13), E(=14), F(=15). Somit kann man mit einer Ziffer eine Zahl von 0 bis 15 ausrücken. Will man 16 schreiben, so braucht man eine weitere Ziffer: 10 (1*16 + 0), 2F im Hexadezimalen System entspricht der 47 (2*16 + 15). Beim Übergang zur zweiten Stelle muss man also statt mit 10 mit 16 multiplizieren. Damit der Computer erkennt, dass es sich im einen Farbcode handelt, muss man ihm ein # voranstellen. Danach folgen zwei Ziffern, die den Rotanteil der Farbe ausdrücken, danach zwei für grün und schließlich zwei für blau:

#FFFFFF
Diese Farbkombination würde zum Beispiel ein schwarz ergeben (alle Farben vollkommen gesättigt). Gottseidank gibt es ein nützliches Freeware-Werkzeug, mit dem man Farben ganz einfach in die Codes umwandeln kann. Einfach mal im Internet nach pkcolorpicker suchen.
Das FACE-Atribut bestimmt die Schriftart des Textes. Allerdins sollte man nur Standartschriftarten nehmen, die jeder Computer kennt. Man kann jedoch Alternativschriften mit Kommer anreihen, die genommen werden, sollte die andere Schrift auf einem Browser nicht vorhanden sein. z.Bsp.: FACE="Arial, Tahoma".
SIZE ändert, wer hätte es gedacht die Größe des Textes. Hierbei ist sind Zahlen von 1 - 7 erlaubt.

Schriftgröße 1
Schriftgröße 3
Schriftgröße 5
Schriftgröße 7

Befehle dürfen übrigens beliebig ineinander verschachtelt sein. Zum Beispiel so:

Lalala lalala

Hierbei wird im zweiten FONT Befehl übrigens nur die Größe des Textes geändert (von 7 auf 3), die vorher definierte Farbe (rot) bleibt jedoch erhalten.

Weitere Textmarken zur Strukturierung:

Befehl

Wirkung

Erläuterung

 ... Wirkung Fettdrucken des Textes
 ... Wirkung Kursivstellen des Textes
 ... Wirkung Unterstreichen des Textes
<STRIKE> ... </STRIKE> ~~Wirkung~~ Durchstreichen
<TT> ... </TT> Wirkung Gleicher Abstand zwischen den einzelnen Buchstaben
 ... _Wirkung Tiefgestellter Text / Text im Index
 ... ^Wirkung Hochstellung des Textes

Auch den Hintergrund kann man gestalten. Dies kann man zum Beispiel mit dem BGCOLOR-Atribut machen, dass die Hintergrundfarbe der Seite bestimt. Auch hier kann wie bei dem COLOR-Atribut die Farbe entweder durch einen gängigen englischen Begriff oder einen Farbcode beschrieben werden. Das ganze wird in den BODY-Tag geschrieben:

erzeugt zum Beispiel einen schwarzen Hintergrund.

Hyperlinks

Mithilfe von Hyperlinks oder kurz Links kann man eine Seite mit anderen verbinden, oder zu einer bestimmten Marke im aktuellen Dokument springen. Für letztere, die sogenannten Lokalen Links brauht man zuerst eine Sprungmarke, die im HTML-Dokument eingefügt wird. Zu dieser kann man dann mittels eines Links springen. Eine Marke wird folgendermaßen erzeugt:

<A NAME="name"> Text zu dem gesprungen werden soll </A>

Das allein hilft aber noch gar nichts, wenn man diese Marke nicht anspringen kann. Deshalb braucht man einen Link:

<A HREF="#name"> Link zu "Text zu dem gesprungen werden soll" </A>

Das Attribut HREF bestimmt das Ziel des Links. Im Falle eines lokalen Links muss man zuerst eine Raute (#) und dann den Namen der Sprungmarke eingeben. Zwischen den einzelnen Tags eingeschlossen ist die Beschriftung des Links, also das was dann letztendlich angezeigt wird. Um dieses Bereich zu formatieren müssen jedoch die Formatierungsmarken ebenfalls in diesen. Ansonsten haben sie keine Wirkung.
Nun mal ein kleines HTML-Beispiel:

<HTML>
<HEAD>
<TITLE>Beispiel</TITLE>
</HEAD>
<BODY>
<CENTER>Beispiel</CENTER>

Hier eine kleine Übersicht über die letzten 3 Kapitel:

<A HREF="#Kapitel 1">Kapitel 1</A> 
<A HREF="#Kapitel 2">Kapitel 2</A> 
<A HREF="#Kapitel 3">Kapitel 3</A>

<A NAME="Kapitel 1">Kapitel 1</A>
      
<A NAME="Kapitel 2">Kapitel 2</A>
      
<A NAME="Kapitel 3">Kapitel 3</A>

</BODY>
</HTML>

Neben dieses Lokalen Links gibt es die "normalen" Links. Diese verweisen auf ein anderes (HTML-)Dokument. Dieses wird dann beim Klicken auf den Link geöffnet. Der Link wird im Prinzip genauso gemacht wie der Verweis auf eine Sprungmarke:

Für die Angabe des Pfades muss man den Ort, an dem die Zieldatei (also die Datei die geöffnet werden soll) angeben. Ist die Datei im gleichen Ordner wie das aktuelle Dokument, so muss kann man das weglassen und muss lediglich den Namen der Datei angeben (Achtung: mit Dateikürzel).

Die Datei befindet sich in einem Unterordner. Unterordner werden folgendermaßen beschrieben: Unterordner/ evtl. weitere Unterordner / Datei (mit Kürzel)
Die Datei befindet sich in einem Überordner: ../ evtl. Unterordner / Datei (mit Kürzel). Muss man mehrere Ordnerstrukturen zurück, so kann man mehrere ../ aneinanderreihen: z.Bsp.: ../../../ evtl. Unterordner / Datei (mit Kürzel)

Wenn man eine Seite im Internet öffnen will, so muss man als Pfad die ganze Adresse eingeben, also mit http://www....

Ein funktionierender Link wäre so zum Beispiel:

<A HREF="../../Dokumente/HTML Tutorial/seite1.html"> Zur Seite 1 des HTML Tutorials </A>

Oder auch dieser hier:

<A HREF="http://www.lieret.net"> Zu meiner Homepage </A>

Diese Links öffnen die Seite im gleichen Fenster wie die aktuelle Seite, ersetzen diese also. Ist dies nicht erwünscht und soll ein neues Fenster geöffnet werden, so muss man das ganze noch ein wenig ergänzen:

Mit diesem Link wird ein neues Fenster erstellt und das Alte bleibt erhalten.