HTML/Tutorials/Einstieg/Kapitel3

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine Grundkenntnisse nötig!

Die Preistabelle

So, das nächste, was Herr Meier sich notiert hatte, war die Preisliste. Wir bitten hier um große Nachsicht, denn wir gehören nicht zu den Menschen, die sich maßgeschneiderte Möbel kaufen können und wählen folglich einfach Phantasiepreise für diese Beispieltabelle – denn genau darum geht es: Wir erstellen eine Tabelle für die Preise.

Das englische Wort für "Tabelle" ist table und so heißt dann auch die HTML-Tabelle:

<table></table>

Wenn man das nur so notiert, wird der Browser erstmal nichts anzeigen, denn es gibt ja auch nichts anzuzeigen. Wenn man etwas in die Tabelle eintragen möchte, dann braucht man wiederum Elemente innerhalb von anderen Elementen: Die Elemente werden also wieder ineinander „verschachtelt“. Ganz außen ist natürlich das table-Element, das die ganze Tabelle umfasst:

Aufbau einer HTML-Tabelle

Darin gibt es das Element tr, das jeweils für eine Zeile der Tabelle (englisch table row – daher tr) steht. Da es mehrere Zeilen in der Tabelle gibt, gibt es folglich auch mehrere tr-Elemente.

Im ersten tr-Element ist das th-Element enthalten, das für die Kopfzeile steht. Das sind sozusagen die Überschriften für die Tabellenspalten (table header), damit man beim Betrachten auch weiß, was denn da eigentlich in der jeweiligen Spalte überhaupt drin steht.

In den folgenden tr-Elementen ist dann endlich das enthalten, weswegen wir die Tabelle überhaupt erstellen: Die Daten im td-Element (table data)!

Jetzt ist ein kleines Beispiel angebracht:

für eine Tabelle
<table>
  <tr>
    <th>Produkt</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>Schrank</td>
    <td>70 €</td>
  </tr>
  <tr>
    <td>Bett</td>
    <td>100 €</td>
  </tr>
</table>

Im Browser könnte diese Tabelle etwa so dargestellt werden:

Produkt Preis
Schrank 70 €
Bett 100 €

Nun, das ist eine recht einfache Tabelle. Natürlich kann man Tabellen mit riesigen Ausmaßen erstellen, wenn man möchte. Wir aber wollen es jetzt nicht zu kompliziert machen, deswegen bleiben wir lieber bei einer kleinen, übersichtlichen Tabelle. Viele weitere Details zur Arbeit mit Tabellen in HTML erhalten Sie übrigens unter HTML/Tabellen.

eine zweite Seite

Wenn Sie jetzt mit Ihrem Texteditor eine neue Seite für die Schreinerei Meier schreiben wollen, müssen Sie natürlich wieder von vorne anfangen, also:

  • Dokumenttyp (<!doctype html>)
  • html-Element
  • Kopf (head)
  • Zeichenkodierung (<meta charset="utf-8">)
  • Titel (title)
  • Körper (body)
  • Überschrift (hier: h1)
  • und dann endlich die Tabelle!

Hier also das ganze Dokument, dem wir den Namen preise.html geben:

für die Preistabelle der Schreinerei Meier ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schreinerei Meier, Preistabelle</title>
  </head>
  <body>
    <h1>Unsere nur zu Beispielzwecken erdachten Phantasie-Preise</h1>
    <table>
      <tr>
        <th>Produkt</th>
        <th>Preis</th>
      </tr>
      <tr>
        <td>Tisch</td>
        <td>50 €</td>
      </tr>
      <tr>
        <td>Schrank</td>
        <td>70 €</td>
      </tr>
      <tr>
        <td>Bett</td>
        <td>100 €</td>
      </tr>
    </table>
  </body>
</html>

Vielleicht ist Ihnen schon aufgefallen, dass wir inzwischen den Titel der Seite geändert haben. Das ist, wenn man mehrere Seiten anbietet, sehr sinnvoll, denn dann weiß der Nutzer mit einem Blick auf die Titelzeile des Browsers, wo er ist.

Ja, nun haben wir schon zwei Seiten. Doch bevor wir uns daran machen, eine dritte Seite zusammenzubasteln, nehmen wir eine kleine Auszeit und besprechen ein paar ganz grundsätzliche Dinge.

Organisatorisches

An dieser Stelle sollten Sie sich doch noch um einige organisatorische Dinge kümmern, sonst versinkt unser Schreinermeister im Chaos. Es ist empfehlenswert, für die Dateien, die Sie im Rahmen dieses kleinen Lehrgangs erstellen, ein neues Verzeichnis (auch Ordner genannt) anzulegen. Denn schon jetzt haben Sie zwei HTML-Dateien (die Startseite mit dem Willkommenstext und die Preistabelle) – und es kommen nachher noch Bilder hinzu, die Herr Meier seinen Kunden gern zeigen möchte. Diese Dateien gehören ja thematisch alle zusammen und sollten nicht wild auf der Festplatte verstreut sein.

Nun haben Websites allerdings die Eigenschaft, in kürzester Zeit recht umfangreich zu werden (vor allem dann, wenn der Autor viel Spaß daran hat und aufgrund des damit einhergehenden kreativen Schubs in kurzer Zeit sehr viel Inhalt produziert), und somit würde es recht schnell unübersichtlich werden, wenn alle Dateien direkt in diesem einen Verzeichnis liegen würden.

Deshalb empfehlen wir Ihnen, sich rechtzeitig vor dem eigentlichen Publizieren und spätestens während der Entstehung der ersten paar Seiten zu überlegen, wie Sie sich am praktischsten organisieren. Man kann das z. B. so tun:

  • Hauptverzeichnis mit der eigentlichen Homepage (als Dateinamen empfehlen wir Ihnen den für diesen Zweck gängigen Namen index.html, auch wenn Ihnen dieser im Augenblick noch komisch vorkommen mag)
    • Unterverzeichnis mit den weiteren HTML-Dateien (z. B. die Preistabelle preise.html und die Seite bilder.html, die wir gleich anlegen wollen)
    • Unterverzeichnis mit den Grafiken

Insgesamt kann der Dateibaum noch ein Stück verzweigter werden – nichtsdestoweniger ist es nicht empfehlenswert, viele Unterverzeichnisse ineinander zu verschachteln. Für Herrn Meier reicht das, was wir hier vorgeschlagen haben, allemal. Weil das hier ein Lehrgang ist und wir als Lehrende Vorschläge machen dürfen, raten wir Ihnen, die Verzeichnisse wie folgt zu benennen:

  • home
    • html
    • img

Im home-Verzeichnis legen Sie also die eingangs erstellte Datei index.html (siehe HTML/Tutorials/Einstieg/Kapitel2#Die ganze Kunst) ab. Ebenfalls kommt da das Verzeichnis html rein, in dem wir die Seite preise.html (HTML/Tutorials/Einstieg/Kapitel4) und alle folgenden HTML-Dateien ablegen. Und zu guter Letzt kommt in das home-Verzeichnis noch das img-Verzeichnis für die Grafiken, das aber vorerst leer bleibt.

Wir haben das mit den bisher erstellten Dateien einmal mit einer Abbildung veranschaulicht:

HTML-Tutorial - Ordnerstruktur.png

Grundsätzlich können Sie die Verzeichnisse selbstverständlich benennen, wie es Ihnen in den Sinn kommt; solange Sie mit uns zusammen lernen, ist es allerdings sinnvoll, wenn Verzeichnisse und Dateien gleich benannt werden, damit es keine Missverständnisse gibt.

Ein paar Worte zu Datei- und Verzeichnisnamen

Webseiten „ins Internet“ zu stellen heißt im Grunde nur, den ganzen Verzeichnisbaum mit den HTML-, Bild- und anderen Dateien auf einen anderen Computer („Webserver“ oder einfach „Server“ genannt) zu kopieren.

Daher ist es empfehlenswert, „unproblematische“ Datei- und Verzeichnisnamen zu verwenden, die mit allen Betriebssystemen, Dateisystemen und Browsern funktionieren, damit man nicht später unnötige Arbeit hat.

Allgemein empfehlen wir, wie auch schon bei den anderen Datei- und Verzeichnisnamen, nicht Groß- und Kleinschreibung zu mischen, sondern durchgehend Kleinbuchstaben zu verwenden.

Wir geben zu: In diesem Kurs, den Sie gerade lesen, haben wir uns selbst nicht daran gehalten, wie Sie des Öfteren feststellen werden, wenn Sie die Adresszeile im Browser betrachten. Das liegt daran, dass wir die HTML-Seiten über eine Wiki-Software erzeugen lassen, die die Dateinamen ebenso festlegt. Es ist ja nicht so, dass Dateinamen mit Groß- und Kleinbuchstaben oder Sonderzeichen generell nicht funktionieren würden. Nur kann es in manchen Fällen zu speziellen Problemen führen, die wir Ihnen gerne ersparen möchten!

Beschränken Sie sich bei Datei- und Verzeichnisnamen also am besten auf Kleinbuchstaben (a-z), Ziffern und den Unterstrich (_). Vermeiden Sie möglichst Leerzeichen und Sonderzeichen wie deutsche Umlaute und ß. Ausführliche Informationen zu diesem Thema erhalten Sie unter Konventionen für Dateinamen.



So, nun haben wir uns echt viel Mühe damit gegeben, zwei HTML-Seiten für die Schreinerei Meier zu erstellen, und eine dritte folgt in Kürze. Was brauchen wir also als nächstes? Na klar, ein Menü, aus dem man eine Seite auswählen kann! Bitte umblättern!