E-Book Startseite Karteikarten-Programm
0

Allgemeines

Nun ist es endlich soweit: Sie haben den HTML-Kurs nun fast absolviert. Der letzte Teil dieses Kurses sind die Beispielseiten. Hier im HTML-Kurs haben wir 2 HTML Beispielwebseiten erstellt. Wir wollen diese Webseiten für Sie Schritt für Schritt erklären. Wir machen nur aus diesem Grund eine Schritt für Schritt Anleitung, um Ihnen das Programmieren etwas näher zu bringen und, dass Sie dafür ein Gefühl bekommen, wie man Webseiten im Gesamten programmiert. Wir haben die 2. Beispiel-Seite komplett in Tabellen eingetragen. Webseiten in Tabellen sollte man eigentlich nicht mehr machen, da die Methode veraltet ist. Wenn Sie jedoch kein CSS lernen möchten, ist dies aber eigentlich die sinnvollste Möglichkeit. Bei der 1. Beispielseite haben wir alle Elemente untereinander angeordnet. Da wir eine feste Breite haben wollten (sonst würde z. B. der Text über das Kopfbild herausragen) mussten die Zeilenumbrüche manuell eingefügt werden, wodurch der Text ein wenig abgehackt aussieht. Dies sollten vor allem die CSS-Programmierer nie machen. Wir haben als Kopfbild unseren Banner verwendet und im 2. Beispiel einen animierten Banner. Diese beide Dateien können Sie zum Testen in unserem Download-/ZIP-Paket herunterladen: Hier klicken zum Downloaden... Diese 2 Dateien können Sie dann entpacken, in das Root-Verzeichnis laden und den Ordner Bilder erstellen oder ändern Sie einfach die Verzeichnisangabe der Bild-Dateien. Bei beiden Beispielseiten haben wir folgende Unterseiten: Startseite (index.html), Firmengeschichte (geschichte.html), Über uns (ueber.html), Dienstleistungen (leistungen.html), Produkte (produkte.html), Kontakt (kontakt.html) und Impressum (impressum.html). Wir erklären Ihnen lediglich den Aufbau und machen mit Ihnen die Schritt für Schritt Erklärung nur bei der Startseite. Die anderen Unterseiten können Sie dann für sich alleine machen. Dazu können Sie den alten Inhalt übernehmen und nur die Texte ändern.


Beispielseite 1

Als erstes bauen wir das Grundgerüst der Webseite:

<!DOCTYPE HTML>
<html> 
  <head>
  </head>
 
  <body>
  </body>
</html>

Es geht weiter mit den Head-Angaben: Titel "HTML Beispielwebseite", Formatierung "text/html; charset=utf-8", Autor (verwenden Sie hier einfach Ihren Namen), Beschreibung "Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das HTML programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite.", Keywords "HTML, Beispielwebseite, Homepage-Webhilfe, Programmierung" und evtl. Favicon-Link. Natürlich dürfen Sie auch weitere Dinge ausprobieren. Hier nun der vollständige Head-Bereich.

<title>HTML Beispielwebseite</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Max Mustermann" />
<meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das HTML programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
<meta name="keywords" content="HTML, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
<link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />

Nun haben wir schon das Grundgerüst und den Head-Bereich. Wir wollen nun mit dem Body-Bereich anfangen. Als ersten Schritt wollen wir nun das Kopfbild bzw. den Banner (im Download-Paket: Banner.jpg) einfügen. In dem Beispiel haben wir eine feste Breite und Höhe festgelegt, ein Alternativ-Text vergeben und einen Namen vergeben (wenn Sie experimentieren wollen, können Sie mit einem Link wieder nach oben springen). Des Weiteren haben wir vor das Bild einen HTML-Kommentar hinterlassen, dass hier das Bild und der Titel kommen.

<!-- Bild und Titel -->
<img src="/Bilder/Banner.jpg" height="200" width="800" alt="Kopf der Webseite: Banner" name="bild" />

Unter das Bild wollen wir nun noch eine Überschrift in der Ebene h1 erstellen. Weil wir die Überschrift mittig haben wollen, dies aber ohne CSS nicht automatisch möglich ist, mussten wir vor die Überschrift ganz viele Leerzeichen (&nbsp;) platzieren, um die Überschrift in die Mitte zu bekommen. Möglicherweise ist bei manchen Browsern die Überschrift nicht perfekt in der Mitte.

<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML Beispielwebseite</h1>

Unsere Navigationsleiste machen wir als Tabelle. Die Tabelle hat nur eine Zeile und 14 Spalten (dazu gleich mehr). Vor die Tabelle fügen wir wieder einen Kommentar ein, dass dies die Navigationsleiste ist. Der Grund warum man so viel Spalten benötigt, ist der, dass wir zwischen zwei Links und am Anfang immer eine Spalte eingefügt haben, sodass zwischen den Links genug Abstand ist bzw., dass die Tabelle in der Mitte ist. Dazu benötigen wir wieder viele Leerzeichen (&nbsp;).

<!-- Navigationsleiste -->
<table>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td><a href="index.html">Startseite</a></td>
    <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
    <td><a href="geschichte.html">Firmengeschichte</a></td>
    <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
    <td><a href="ueber.html">Über uns</a></td>
    <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
    <td><a href="leistungen.html">Dienstleistungen</a></td>
    <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
    <td><a href="produkte.html">Produkte</a></td>
    <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
    <td><a href="kontakt.html">Kontakt</a></td>
    <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
    <td><a href="impressum.html">Impressum</a></td>
  </tr>
</table>

Als letztes gibt es nun nur noch das Inhalt-Feld. Dazu haben wir als erstes einen Kommentar hinterlassen. Als Text-Formatierung haben wir die font-Tags benutzt und als Schriftgröße die Größe 4 festgelegt. Als Inhalt haben wir einen Beispiel-Text geschrieben. Wir haben, wie schon beschrieben, manuelle Zeilenumbrüche verwendet, da der Text sonst über die Tabelle und über das Bild herausragen würde. Bitte bedenken Sie, dass man manuelle Zeilenumbrüche bei Texten nicht verwenden sollte. Deshalb können wir Ihnen CSS nur dringend empfehlen.

<!-- Inhalt -->
<p><font size="4">...</font></p>

Nun ist die Beispiel-Seite komplett fertig. Hier haben wir nochmals den kompletten Quellcode. Wir empfehlen Ihnen an diesem Code weiter zu experimentieren und eigene solche Seiten zu erstellen.

<!DOCTYPE HTML>
<html>
 
<head>
  <title>HTML Beispielwebseite</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Max Mustermann" />
  <meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das HTML programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
  <meta name="keywords" content="HTML, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
  <link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
 
<body>
  <!-- Bild und Titel -->
  <img src="/Bilder/Banner.jpg" height="200" width="800" alt="Kopf der Webseite: Banner" name="bild" />
  <h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML Beispielwebseite</h1>
  <!-- Navigationsleiste -->
  <table>
    <tr>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td><a href="index.html">Startseite</a></td>
      <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
      <td><a href="geschichte.html">Firmengeschichte</a></td>
      <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
      <td><a href="ueber.html">Über uns</a></td>
      <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
      <td><a href="leistungen.html">Dienstleistungen</a></td>
      <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
      <td><a href="produkte.html">Produkte</a></td>
      <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
      <td><a href="kontakt.html">Kontakt</a></td>
      <td>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</td>
      <td><a href="impressum.html">Impressum</a></td>
    </tr>
  </table>
  <!-- Inhalt -->
  <p><font size="4">...</font></p>
</body>
 
</html>
Anzeigebeispiel
Anzeigebeispiel



Beispielseite 2

Wie bei der 1. Beispielseite, bauen wir als erstes das Grundgerüst.

<!DOCTYPE HTML>
<html>
  <head>
  </head>
 
  <body>
  </body>
</html>

Die Head-Angaben sind ebenfalls gleich wie bei der 1. Beispielseite.

<title>HTML Beispielwebseite</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Max Mustermann" />
<meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das HTML programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
<meta name="keywords" content="HTML, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
<link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />

Diese Seite besteht aus insgesamt 3 Tabellen. Die 1. Tabelle ist für das Kopfbild. Hier wird nun das animierte Bild verwendet, die Breite (800px), die Höhe (200px) und der Alternativ-Text werden ebenfalls noch festgelegt. Dies sieht dann so aus:

<table>
  <tr>
    <td><img src="/Bilder/WebBsp1-Kopf.gif" height="200" width="800" alt="Kopfbild"/></td>
  </tr>
</table>

Die 2. Tabelle ist für die Navigationsleiste und den Inhalt. Das Attribut valign mit dem Wert top in dem 2. td-Tag ist dafür gedacht, dass der Text am oberen Rand ausgerichtet wird, und nicht in der Mitte. Die Breite der Navigationsleiste ist 200px. Die Breite des Inhalts-Teil ist 600px. Bei dem Text im Inhalts-Teil gibt es Vorschriften, wie der Text aussehen soll: Schriftart "Times", Schriftgröße "4", Schriftfarbe "#FF0000" (das entspricht der Farbe Rot). Hier müssen die Zeilenumbrüche nicht gemacht werden, da Sie durch die Breite der Zelle automatisch durchgeführt werden. Übrigens es eignet sich, den Text nicht in eine Linie zu schreiben, sondern den Text immer nur so lang laufen lassen, wie der Monitor breit ist und dann in der nächsten Zeile weitermachen. Auch wenn es dann eigentlich zu viele Leerzeichen gibt, wird immer nur ein Leerzeichen angezeigt. Wenn Sie wirklich mehrere Leerzeichen wollen, müssen Sie das Sonderzeichen &nbsp; verwenden. Genauer sehen können Sie dies in dem Quelltext von der fertigen Webseite mit Text oder auf diesem Bild. Aber nun wieder zurück zur 2. Tabelle: Die Navigationsleiste ist in mehreren Listen eingeteilt. Jeder Navigations-Punkt hat eine eigene Liste. Da dann zwischen den Listen Platz entsteht.

<table>
  <tr>
    <td width="200px" valign="top">
      <ul>
        <li><a href="index.html">Startseite</a></li>
      </ul>
      <ul>
        <li><a href="geschichte.html">Firmengeschichte</a></li>
      </ul>
      <ul>
        <li><a href="ueber.html">Über uns</a></li>
      </ul>
      <ul>
        <li><a href="leistungen.html">Dienstleistungen</a></li>
      </ul>
      <ul>
        <li><a href="produkte.html">Produkte</a></li>
      </ul>
      <ul>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
      <ul>
        <li><a href="impressum.html">Impressum</a></li>
      </ul>
    </td>
    <td width="600px" valign="top">...</td>
  </tr>
</table>

Als letztes gibt es noch die 3. Tabelle. Die 3. Tabelle ist die Fußzeile der Seite. Wir haben eine Fußzeile mit Hintergrundfarbe (#E1E1E1), einer Breite von 800px und einer Höhe von 20px.

<table>
  <tr>
    <td bgcolor="#E1E1E1" width="800px" height="20px"><img src="/Bilder/Banner.jpg" width="80" height="20" border="0" />
      &nbsp;&nbsp;&nbsp;<font color="#000FF">Diese Webseite wurde gestalltet und ermöglicht von "Homepage-Webhilfe"!</font>
    </td>
  </tr>
</table>

Nun ist die Beispielseite komplett fertig. Hier haben wir nochmals den kompletten Quellcode. Wir empfehlen Ihnen an diesem Code weiter zu experimentieren und eigene solche Seiten zu erstellen.

<!DOCTYPE HTML>
<html>
 
<head>
  <title>HTML Beispielwebseite</title>
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Max Mustermann" />
  <meta name="description" content="Dies ist eine Beispielwebseite von 'Homepage-Webhilfe'. Diese Beispielwebseite soll das HTML programmieren leichter machen. Ein Schritt für Schritt-Erklärung gibt es ebenfalls auf dieser Webseite" />
  <meta name="keywords" content="HTML, Beispielwebseite, Homepage-Webhilfe, Programmierung" />
 
  <link href="/Bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
 
<body>
  <table>
    <tr>
      <td><img src="/Bilder/WebBsp1-Kopf.gif" height="200" width="800" alt="Kopfbild"/></td>
    </tr>
  </table>
  <table>
    <tr>
      <td width="200px" valign="top">
        <ul>
          <li><a href="index.html">Startseite</a></li>
        </ul>
        <ul>
          <li><a href="geschichte.html">Firmengeschichte</a></li>
        </ul>
        <ul>
          <li><a href="ueber.html">Über uns</a></li>
        </ul>
        <ul>
          <li><a href="leistungen.html">Dienstleistungen</a></li>
        </ul>
        <ul>
          <li><a href="produkte.html">Produkte</a></li>
        </ul>
        <ul>
          <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
        <ul>
          <li><a href="impressum.html">Impressum</a></li>
        </ul>
      </td>
      <td width="600px" valign="top">...</td>
    </tr>
  </table>
  <table>
    <tr>
      <td bgcolor="#E1E1E1" width="800px" height="20px"><img src="/Bilder/Banner.jpg" width="80px" height="20px" border="0" />
        &nbsp;&nbsp;&nbsp;<font color="#000FF">Diese Webseite wurde gestalltet und ermöglicht von "Homepage-Webhilfe"!</font>
      </td>
    </tr>
  </table>
</body>
 
</html>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de