Letzte Aktualisierung: München, den 26.11.2008
Computer
Zurück zur Startseite

Erstellung einer einfachen Homepage

Der Anfänger in der Webprogrammierung mag das Erstellen der Dokumente mit einem "Wysiwyg-Editor" wie beispielsweise den zu empfehlenden "Seamonkey Composer" (auf www.mozilla.org zu finden) bevorzugen. Dennoch ist die Lektüre der folgenden Ausführungen für jeden Anfänger hilfreich, weil sie auf kürzestem Raum ein Grundgefühl vermitteln können, wie ein "HTML-Dokument" funktioniert und das erstellen von Homepages erleichtern. Die weiteren Schritte, die auf dem Weg zur eigenen Homepage zu gehen sind, werden auf der Seite "Erstellen einer eigenen Homepage" erläutert.

Eine HTML-Datei ist zunächst einmal eine reine "ASCI-Datei", was bedeutet, dass außer Buchstaben und wenigen Sonderzeichen darin nichts enthalten sein kann, wie zum Beispiel Fettdruck oder Bilder und anderes.
Der Browser stellt uns aber sehr wohl Bilder, Schriftformate, etc. dar. Das liegt daran, dass diese Dinge mit "versteckten" Befehlen in der HTML-Datei enthalten sind. Diese Befehle heißen "Tags" bzw. "Tag" im Singular. Einen Tag erkennt man daran, dass er in <spitze klammern> eingefasst ist. Eine HTML-Datei ist also gewissermaßen eine Datei mit unsichtbaren Befehlen und sichtbarem Text dazwischen.

Die dringendste Empfehlung zum Erstellen und Editieren von HTML-Dateien ist der Bluefish-Editor. Dieser Editor bearbeitet zwar puren HTML-Code, stellt aber fast alle wichtigen Befehle als Buttoms bereit, die diese Befehle dann in den Text an der entsprechenden Stelle einfügen.
Die "HTML-Datei" wird dann sinnvollerweise mit einem Browser betrachtet, wobei man immer zwischen dem Editor und dem Browser wechselt, um die Veränderung zu kontrollieren..
Um die "HTML-Datei" zu erstellen und zu bearbeiten, kann grundsätzlich auch ein "Wysiwyg-Editor" wie der "Seamonkey Composer" oder andere Werkzeuge verwendet werden. Die Erfahrung zeigt aber, dass diese Wysiwyg-Editoren sehr viel Code erzeugen, den kein Normalsterblicher verseht, so dass diese nachher schwer verändert werden können. Aus diesem Grund rate ich eben zur Verwendung des Bluefish, der es am leichtesten macht, ohne sich alle Befehle zu merken, die Seiten zu editieren.

Die Befehlsmuster, mit denen Farbe, Formate, Bilder, Links und anderes in die Homepage gelangen, wollen wir uns im Folgenden der Reihe nach ansehen:

HTML-Code Beschreibung Erscheinungsbild
<html>
</html>

Beginnen wir damit, nur zu sagen: es handelt sich tatsächlich um eine HTML-Datei. Das hat zwar schon der Datei- Name angedeutet. Aber der Browser glaubt es noch nicht, bis er es lesen kann: <html>

Hier sehen wir auf der Website noch nichts. Aber wir sehen, dass fast jeder HTML-Tag einmal ohne Schrägstrich und danach mit Schrägstrich vor dem Befehl dargestellt ist. Der selbe Befehl mit Schrägstrich bedeutet das Ende des Bereiches, auf den sich der Befehl bezieht.

Der Dateiname der ersten oder evtl. einzigen Datei auf einer Domain sollte immer "index.htm" oder "index.html" heißen. Dann reicht die Eingabe des Domainnamens (z.B. www.ulrichsommer.net), um diese Datei aufzurufen.
 

 
<html>
  <head>
    <title>
Homepage
    </title>
  </head>
  <body>
 
 
 
  </body>

</html>

Jezt wird der Homepage ein <head>-Bereich hinzugefügt, der keine Inhalte erhält, die im Browserfenster angezeigt werden, sondern der z.B. den Text enthält, der mit dem <title>-Tag in der Titelleiste des Browsers gezeigt wird. Ferner sind in <meta>-Tags Informationen enthalten, die den Suchmaschinen zur Referenzierung dienen

Erst im <body>-Bereich kommen die Inhalte, die im Browserfenster gezeigt werden. Damit steht das Grundgerüst einer Homepage.

title
<html>
  <head>
    <title>Homepage
    </title>
  </head>
  <body>
 
    <font face="arial,sans-serif">
      <h1>&Uuml;berschrift</h1>
      <p>Fließtext</p>
    </font>
 
  </body>
</html>

Der <h1>-Tag definiert die Überschrift in größter Schriftgröße ("Header 1"). <h2> definiert Überschriften eine Nummer kleiner, <h3> noch kleiner, usw.

Der <p>-Tag definiert Fließtext in einem Absatz ("Paragraph").

Der Tag <font face="..."> definiert die Schriftart.

Die komische Zeichenfolge &Uuml; stellt im Browser ein Ü dar. Dies ist leider notwendig, weil die deutschen Zeichensätze nicht in aller Welt auf die selbe Weise dargestellt werden, sondern z.B. in einem englischen Zeichensatz völlig andere Symbole darstellen. Durch die Umschreibung werden sie in aller Welt gleich dargestellt. Neben einer Vielzahl von Sonderzeichen sind die wichtigsten deutschen Sonderzeichen und Umlaute leicht zu merken:

&Uuml; = Ü &uuml; = ü &auml; = ä
&ouml; = ö &szlig; = ß &quot; = "
&gt; = > &lt; = < &amp; = &

Überschrift

Fließtext

<html>
  <head>
    <title>Homepage
    </title>
  </head>
  <body
    bgcolor="#aaaaaa"
    text="#770077"
    link="#0000CC"
    vlink="#000066"
    alink="#000000">

 
      <h1>&Uuml;berschrift</h1>
      <p>Fließtext</p>
 
  </body>
</html>

Im <body>-Tag wird
durch den Subtag "background=" ein Hintergrundbild definiert.
Durch den Subtag"text=" wird die Textfarbe definiert.
Durch den Subtag "link="wird die Farbe für Links definiert.
Durch den Subtag "alink="wird die die Farbe für aktive Links definiert.
Durch den Subtag "vlink=" wird die Farbe für bereits besuchte Links und
durch den Subtag "bgcolor=" wird die Hintergrundfarbe für die gesamte Seite definiert.

Die Farben werden im hexadezimalen Zahlensystem definiert. Gezählt wird von 0-f (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f).
Dabei definieren die ersten beiden Stellen den Wert für Rot, die dritte und vierte Stelle definiert den Wert für Grün und die letzten beiden Stellen definieren den Wert für Blau. Hier einige Beispiele:

    #ff0000          #00ff00          #0000ff     
    #ffff00          #ff00ff          #00ffff     
    #000000          #888888          #ffffff     

Überschrift

Fließtext

<a href="http://www.ulrichsommer.net">
www.ulrichsommer.net
</a>

 
<a href="mailto:nobody@x-online.de">
nobody@x-online.de
</a>

Im folgenden lassen wir das restliche html-Grundgerüst weg, da die neu dargestellten Tags alle innerhalb des <body>- Tags eingefügt werden.

Der <a>- Tag erzeugt einen Link. "a" steht für Anchor (Anker). Der Subtag "href=" gibt an, dass der Anker ein Link ist, der auf eine andere Webadresse verweist. Die Adresse wird entweder als komplette "URL" mit "http://www." angegeben ("www." reicht nicht) oder als relativer Link, wenn die Datei auf der selben Domain liegt. Wenn sie im selben Verzeichnis liegt, wird nur der Dateiname benötigt. Das Argument eines Subtags, welches nach dem "="-Zeichen folgt, in diesem Fall die Adresse des Links, muss immer in Anführungszeichen gestellt werden.

Für einen Link auf eine Mailadresse muss lediglich das "mailto:" mit Doppelpunkt vor die Adresse eingefügt werden. Bei einem Klick auf diesen Link öffnet dann automatisch ein Mailfenster mit der betreffenden Adresse.

www.ulrichsommer.net
 
 
 
nobody@x-online.de
<img src="face.png"
width="100" height="100">
 

Der <img>-Tag fügt ein Bild ein. Natürlich ist es schwer, ein Bild in eine ASCII Datei direkt einzufügen. Deshalb wird eine externe Bilddatei eingebunden. Die Adresse des Bildes wird nach den selben Regeln, wie bei dem Link in den Subtag "src=" angegeben. Sie kann auch auf einer anderen Domain liegen. Die Subtags "width=" und "height=" geben die Größe des Bildes in Pixeln an. Damit wird der Platz für das Bild bereits im Browser reservieirt, wenn das Bild noch nicht geladen ist.

<table border="1" width="100%">
  <tr>
    <td>
Feld 1 in Zeile 1</td>
    <td>
Feld 2 in Zeile 1</td>
  </tr>
  <tr>
    <td>
Feld 1 in Zeile 2</td>
    <td>
Feld 2 in Zeile 2</td>
  </tr>
</table>

Der <table>- Tag erzeugt eine Tabelle. Der Subtag  border="1" legt die Breite des Randes um die Zellen fest. Ist er 0, ist die Tabelle nicht direkt als solche an den Linien erkennbar. Der Subtag  width="100%" besagt, dass die Tabelle 100% der zur Verfügung stehenden Breite, in diesem Fall die Breite des Tabellenfensters ausnützt. Wenn die Breite ohne "%" angegeben wird, ist sie in Pixeln angegeben.

Der <tr>-Tag definiert eine Zeile. Der <td>-Tag ein Feld innerhalb der Zeile. Der Subtag "width=" kann auch hier angewendet werden.

Feld 1 in Zeile 1 Feld 2 in Zeile 1
Feld 1 in Zeile 2 Feld 2 in Zeile 2

Mit diesen wenigen Befehlen können Sie bereits eine einfache Website erstellen. Mit diesem Anfangswissen sind Sie in der Lage die Website http://selfhtml.teamone.de/ zu nutzen, auf der alles beschrieben ist, was zum Thema "html" zu sagen ist. Diese Seite ist meine dringendste Empfehlung zum Thema HTML. Auf ihr finden Sie zu jedem Tag detailierte Informationen.

Viel Spaß

Privatsphäre; Die eigene Homepage;
HTML-Programmierung; Bildbearbeitung;
File Server Transfer Protokoll (FTP); Softwarelinks

Computer
zurück zur Startseite