html-Lehrgang dritter Tag

Was wir am dritten Tag noch behandeln müssen:

  • Kommentare
  • Sprungmarken
  • Frames und iframes
  • Formulare
  • E-Mail-Funktion
  • Schriften
  • Eine Website veröffentlichen

Also wieder volles Programm, und deshalb wollen wir gleich loslegen.

Kommentare

Wenn wir größere Projekte erstellen, kann es durchaus hilfreich sein, den Quelltext zu kommentieren. So können wir dann uns schneller im Code zurechtfinden.

Kommentare im html werden mit <!-- eingeleitet und enden mit -->. Alles, was sich dazwischen befindet, ist Kommentar und wird vom Browser ignoriert, was wir gleich einmal testen wollen:

html Lehrgang Kommentare

Und das erscheint auf dem Bildschirm:

html Lehrgang Kommentare im Browser

Obwohl html-Tags im Kommentarbereich stehen, werden diese nicht verarbeitet. Wenn wir die Kommentarzeichen nun entfernen, können wir folgendes im Browserfenster sehen:

html Lehrgang Kommentare 2

Damit haben die Kommentarzeichen eine weitere interessante Anwendungsmöglichkeit. Wir können auf diese Weise html-Code "auskommentieren", wie der Programmierer sagt. Recht nützlich, wenn wir bestimmte Passagen nur für eine gewisse Zeit ausblenden wollen oder etwas testen möchten. So brauchen wir den Code nicht entfernen, irgendwo zwischenzuspeichern und diesen später wieder reinzupfriemeln, sondern einfach <!-- jetzt bin ich wech --> und fertig.

Ich benutze die Möglichkeit des Kommentierens recht häufig für alle möglichen Zwecke.

Sprungmarken

Sicher sind Sie beim Surfen im Web schonmal auf Seiten gestoßen, die die Möglichkeit boten, bei Klick auf "Top" oder einem ähnlichen Zeichen innnerhalb einer Seite zu "springen". Mit solchen Sprungmarken wollen wir uns nun befassen.

html Lehrgang Anker

Der Anker erhält das Attribut "name" und eine eindeutige Bezeichnung. Der Verweis erfolgt dann mit

<a href="#ankername">Gehe zu Kapitel oder so...</a>

So präsentiert sich der Kopf unserer erstellten Seite:

html Lehrgang Anker

Die Wirkungsweise sollten Sie selbst ausgiebig testen, da ich schlecht die Funktionsweise im Bildern darstellen kann.

Bei sehr langen Seiten ist dies sicher eine interessante Navigation.

Frames und iframes

Das Thema Frames ist ein so umfangreiches Thema und für Erstellung von Websites nicht unbedingt erforderlich, so dass ich diesen Bereich in einen Exkurs getan habe. Frames sind sicher eine interessante Gestaltungsmöglichkeit, aber es geht auch ohne. Wer noch nicht genug hat, kann sich diesen Exkurs "Frames" jetzt aufrufen. Viel Spaß

iframes

iframes sind in html-Dateien eingebettete Bereiche, die vor allem zum Anzeigen fremder Quellen wie externe html-Dokumente dienen. Schauen wir uns dies an einem Beispiel an:

html Lehrgang iframes

In diesem Beispiel haben wir eine Seite des html-Lehrgangs eingebettet. Innerhalb des Iframes haben wir außerdem einen Verweis für diejenigen Anwender angelegt, deren Browser keine iframes anzeigen kann.

Mit "src=" legen wir fest, was im iframe angezeigt werden soll. Dies kann z.B. auch ein Video sein.

html Lehrgang iframes

Sie sehen nun den Lehrgang in einem Fenster innerhalb des html-Dokuments.

Beim Einbetten fremder Seiten sollten Sie unbedingt die Urheberrechte beachten! Sonst steht u.U. bald Ärger ins Haus!

Wir wollen nun dem iframe noch ein paar Attribute hinzufügen.

html Lehrgang iframes
  • Das Attribut "name" benötigen wir, um Verweise zum iframe definieren zu können.
  • Mit "align" richten wir dem iframe aus. align="left" lässt nachfolgende Inhalt rechts um den Frame fließen, align="right" links herum.
  • "frameborder" bestimmt die Sichtbarkeit des Rahmens: frameborder="1" sichtbarer Rahmen, frameborder="0" unsichtbarer Rahmen. frameborder="1" ist die Voreinstellung.
  • "scrolling" steuert die Bildlaufleisten: scrolling="yes" Bildlaufleisten sichtbar, scrolling="no" Bildlaufleisten unterdrückt, scrolling="auto" Bildlaufleisten werden angezeigt, wenn notwendig (Voreinstellung).
html Lehrgang iframes

Wir haben jetzt links noch eine Steuerung, mit der wir verschiedene Seiten in den iframe laden können.

Formulare

Jetzt wird es interaktiv, denn nun geben wir dem Besucher unserer Website die Möglickeit, mit uns in Verbindung zu treten. Ohne ein Formular wären viele Web-Anwednungen wie Online-Shops, Umfragen, Kontakt usw. gar nicht oder nur sehr umständlich möglich. Denken wir doch nur daran, dass wir bei einer Online-Bestellung alle Daten via E-Mail übergeben müssten und dazu alle Daten dort erst einzugeben hätten. Dem Empfänger der E-Mail, also dem Onlineshop-Betreiber, würde sich mit einem weiteren Problem herumschlagen müssen, da ihm die empfangenen Daten nicht in strukturierter Form vorliegen würden und er diese erst aufarbeiten müsste. Wir sehen also, dass Formulare im Internet nicht wegzudenken sind.

Was ein Formular ist wissen Sie spätestens seit dem Zeitpunkt, als Sie Ihre erste Steuererklärung ausfüllen mussten. Glücklicherweise müssen wir und nicht gleich mit solch komplizierten Formularen auseinandersetzen. Wir beginnen erstmal mit einem einfachen Kontaktformular, wie es häufig bei Anfragen verwendet wird. Doch schauen wir uns zunächst solch ein Formular und den Quelltext an, den ich nachfolgend erläutern werde:

html Lehrgang Formular im Browser

Und der dazugehörige Quelltext:

html Lehrgang Formular

Bis einschließlich Zeile 12 gibt es nichts Neues. In Zeile 13 wird nun ein Formular aufgerufen. Alles, was zwischen diesem Starttag und dem dazugehörigen Endtag in Zeile 26 steht, gehört zum Formular.

Doch zurück zu Zeile 13. Mit "action" wird festgelegt, was geschehen soll, wenn das Formular vom Anwender abgeschickt wurde. Meist wird ein serverseitiges Script zur Weiterverarbeitung der Eingabedaten aufgerufen, in diesem Fall ein PHP-Programm.

"method" bestimmt die Art der Weitergabe der Formulardaten. Man unterscheidet die Methoden POST und GET. Schauen wir uns zunächst die Methode GET etwas genauer an. Dazu stellen wir unser Script in Zeile 13 um:

html Lehrgang GET-Methode

Wir rufen jetzt nach Abschicken des Formulars dieselbe Seite wieder auf und übergeben die Daten mit GET.

html Lehrgang GET-Methode

Nachdem wir ein paar Daten in das Formluar eingegeben und dieses abgeschickt haben, sehen wir folgende URL:

html Lehrgang GET-Methode

Unsere eingegeben Daten erscheinen nun in der URL nach folgendem Aufbau:

  • Ein Fragezeichen leitet die GET-Daten ein
  • Danach folgt der Name des Input-Feldes
  • Dann ein Gleichheitszeichen
  • Die eingegebenen Daten
  • Wird mehr als ein Parameter übergeben, folgt ein "&".

Bei der Methode GET gilt des Folgendes zu beachten:

  • Die Anzahl der zu übergebenden Daten ist begrenzt auf je nach Browser ca. 2000. Das klingt zwar recht viel, aber wenn wir dem Anwender eine Textarea zur Verfügung stellen, in dem er umfangreichen Text eingeben kann, könnten wir mit dieser Methode schnell an Grenzen stoßen.
  • Die Daten, die mit GET übergeben werden, sind im Browser öffentlich sichtbar. Dies kann für sensible Daten zu unsicher sein, wie folgendes Beispiel zeigt:
html Lehrgang GET-Methode

Wir haben ein zusätzliches Formularfeld "Passwort" hinzugefügt. Wenn wir dort etwas eingeben, so sehen wir, dass wir nichts sehen, denn die Daten werden blank angezeigt. Senden wir nun die Daten, so passiert folgendes:

html Lehrgang GET-Methode

Nun ist der Inhalt des Passwort-Feldes in der URL sichtbar. Also Vorsicht bei Übergabe solcher Daten!

Interessant kann die GET-Übergabe z.B. zu Testzwecken sein, um zu Überprüfen, ob die richtigen Daten übergeben werden. Danach kann man auf POST umstellen.

Bei POST werden die die Daten in einer speziellen Anfrage versendet und können dann von einem serverseitigen Script aufgerufen werden.

Theoretisch wäre die GET-Methode überflüssig. Trotzdem kann ich auch damit gut arbeiten, indem ich per POST auszuwertende Daten wie z.B. die Daten einer Bestellung in einem Onlineshop verschicke und mit GET Daten der Ablaufsteuerung wie z.B. die Seitenzahl.

Nun aber zurück zu unserem Ausgangsscript, das wir nachfolgend noch einmal sehen:

html Lehrgang Formular

Das Formular habe ich, um eine schön strukturierte Anzeige zu bekommen, in eine Tabelle mit 2 Spalten gepackt. Links sieht der Anwender Bezeichnungen zu den Formularfeldern, und rechts kann er seine Eingaben machen.

Die Eingaben erfolgen in Feldern, die mit "input"-Anweisungen definiert wurden. Dazu kommt noch eine "textarea", also ein größeres Eingabefeld für Nachrichten usw.

Zu den Formluarfeldern kommen wir gleich nochmal zu sprechen, da es davon eine ganze Reihe gibt.

Das Formular wird dann mit einem Button zum Absenden des Formulars abgeschlossen. Fehlt der Button, haben wir ein Problem, da wir dann keine Daten senden könnten.

Die Eingabefelder

Das einzeilige Eingabefeld

Mit diesem Feld haben wir ja schon Bekanntschaft gemacht. Kommen wir nun zu den einzelnen Attributen.

"name" weist diesem Feld eine eindeutige Bezeichnung zu. Benötigt wird name z.B. in Verbindung mit PHP, um auf die Eingabedaten zurückgreifen zu können. Auch für JavaScripts ist dieses Feld wichtig.

"size" gibt die Anzeigelänge des Feldes an, "maxlength" die maximale zulässige Länge der Eingabe. Wenn maxlength größer ist als size, wird der Text bei Eingabe gescrollt.

html Lehrgang einzeilige Eingabefelder

Wenn wir nun in das Feld längeren Text eingeben, sehen wir, dass er links aus dem Feld verschwindet. Nach 20 Zeichen ist allerdings endgültig Schluss:

html Lehrgang einzeilige Eingabefelder

Mit "value" können wir das Eingabefeld mit Daten vorbelegen.

html Lehrgang einzeilige Eingabefelder

Nun erscheint der Name bereits bei Aufruf der Seite:

html Lehrgang einzeilige Eingabefelder

"type=password" haben Sie ja bereits kennen gelernt.

Und nun geben Sie einmal folgendes in den Quelltext ein:

html Lehrgang einzeilige Eingabefelder

Und nun versuchen Sie, aus dem Schulze einen Meier zu machen:

html Lehrgang einzeilige Eingabefelder

Sie sehen, dass das Feld mit "readonly" blockiert ist. Eingaben sind nun nicht mehr möglich.

Checkboxen

Checkboxen sind Formualrelemente, die der Anwender anklicken kann. Aber schauen wir uns dies am besten an einem Beispiel an:

html Lehrgang Checkboxen

Wie wir im unteren Bild sehen, kann der Anwender nun seine Auswahl(en) treffen.

html Lehrgang Checkboxen

Es besteht die Möglichkeit, die Auswahl vorzuselektieren, d.h. dass bei Aufruf der Seite schon ein Häkchen gesetzt ist:

html Lehrgang Checkboxen

Jetzt haben wir in diesem Beispiel "Audi" vorselektiert.

html Lehrgang Checkboxen

Der "value"-Wert ist ein interner Bezeichnerwert für jede Checkbox. Nach Absenden des Formulars werden diese Werte übertragen.

Radio-Buttons

Eine ähnliche Funktion haben Radio-Buttons. Im Unterschied zu den Checkboxen kann jedoch immer nur ein Button angeklickt werden, wenn sie zur gleichen Gruppe gehören, also den gleichen Wert in "name" haben.

html Lehrgang Radio-Buttons

Sobald wir einen zweiten Button anklicken, wird der Knopf im vorher ausgewählten Button wieder entfernt:

html Lehrgang Radio-Buttons

Auch bei Radio-Button ist eine Vorselektierung mit "checked" möglich. Probiert es doch einmal selbst aus.

Auswahllisten

Aus einer Auswahlliste kann der Benutzer eine Auswahl aus festen Einträgen treffen.

html Lehrgang Auswahllisten

In dieser Dropdown-Liste kann der Anwender nun seine Auswahl treffen.

html Lehrgang Auswahllisten

Der Wert "size" gibt an, wie viele Werte der Liste sichtbar sein sollen. In diesem Beispiel kann der Benutzer nur eine Auswahl treffen. Für eine Mehrfachauswahl fügen wir "multiple" hinzu:

html Lehrgang Auswahllisten mit Mehrfachauswahl

Nun kann der Anwender mehrere Listeneinträge auswählen, wenn er beim Anklicken die [STRG]-Taste gedrückt hält.

html Lehrgang Auswahllisten mit Mehrfachauswahl

Da die Mehrfachauswahl nicht ohne Weiteres für den Anwender erkennbar ist, sollten Sie ihn durch einen entsprechenden Vermerk darauf hinweisen.

Mit <option selected>Porsche</option> können wir auch nun eine Auswahl vorselektieren. Testet es bitte einmal aus.

Beim Absenden des Formulars wird der Text des ausgewählten Listeneintrags übertragen. Mit dem Attribut "value" können wir jedoch einen anderen Wert, z.B. eine Bestellnummer, festlegen:

<option value="0815">Tomate rot</option>

Auswahllisten können wir aber auch anders darstellen:

html Lehrgang Auswahllisten

Nach Entfernen von "size" erhalten wir eine "echte" Auswalliste, die sich bei Anklicken öffnet.

html Lehrgang Auswahllisten

Mehrzeilige Eingabefelder

Eine Textarea haben wir ja schon zu Beginn kennengelernt. Deshalb nur kurz noch einige Anmerkungen.

Der Aufbau einer Textarea sieht folgendermaßen aus:

<textarea name="info" cols="50" rows="10"></textarea>

"rows" gibt die Anzahl der Reihen an, "cols" die Anzahl der Spalten. Damit wird jedoch nur die Größe des Anzeigebreichs festgelegt, nicht die Länge des einzugebenden Textes, der theoretisch unbegrenzt sein kann, da die Browser bei längeren Texten einen Scrollbalken zur Vefügung stellen.

Wenn wir Text vorbelegen wollen, so geben wir diesen zwischen den Start-und Endtag ein: <textarea>Dieser Text steht nun in der Textarea</textarea>

Das Attribut type="hidden"

Input-Felder mit diesem vorbelegten Wert werden nicht im Browser angezeigt. Sie sind "hidden" = versteckt. Interessant ist dies, wenn wir Werte beim Absenden an das serverseitige Programm übergeben wollen.

html Lehrgang das Attribut hidden

Der im "hidden-Feld" unter "value" festgelegte Wert wird nicht angezeigt, ja sogar das Input-Feld selbst ist nicht sichtbar.

html Lehrgang das Attribut hidden

Wieder haben wir eine ganze Menge gelernt:

  • Wir können Kommentare in unserem Quelltext einfügen.
  • Wie können Sprungmarken in unseren Seiten setzen.
  • Wir haben vieles über Frames und iframes gelernt und
  • Wir können Formulare erstellen.

Hier geht es nun zum zum html-Lehrgang Tag 3 Teil 2.


« zurück