html-Lehrgang dritter Tag Teil 2

E-Mail Funktionen

Die Mail-Funktionen unter html sind eher bescheiden, was einen ganz einfachen Grund hat. html ist nunmal nur eine Auszeichnungs- und keine Programmiersprache und wird zudem clientseitig ausgeführt. Für eine professionelle Website benötigt man daher eine Programmiersprache, die auf dem Server ausgefürt wird. Und da sind wir bei meinem Lieblingsthema: PHP. Ihr braucht jetzt nicht zu erschrecken, den PHP ist recht einfach zu lernen, und es ist am Anfang auch nicht nötig, sich gleich mit OOP (objektorientierte Programmierung) auseinanderzusetzen (obwohl dies auch nicht so schwierig ist, wie es klingt). Schaut doch auch in diesem Lehrgang einmal rein, denn ich bin überzeugt, dass auch ihr genauso viel Gefallen am PHP finden werdet wie ich.

Doch zurück zu html. So definieren wir einen Verweis auf eine E-Mail-Adresse:

html Lehrgang mailto

Nach Aufrufen dieser Seite sehen wir folgendes:

html Lehrgang mailto

Bei Klick auf den Verweis öffnet sich unser E-Mail-Programm.

html Lehrgang mailto

Der Anwender kann diesen Verweis nur dann ausführen, wenn

  • sein Browser Erstellen und Absenden von E-Mail unterstützt
  • oder ein E-Mail Programm automatisch gestartet werden kann.
html Lehrgang mailto

Die Parameter werden an die URI angehängt. Eingeleitet wird dies mit einem Fragezeichen. Folgende Parameter sind möglich:

  • "cc": Kopienempfänger, sichtbar
  • "bcc": Kopienempfänger, unsichtbar
  • "subject": Betreff
  • "body": der Nachrichtentext

Bei Anhängen mehrerer Paramter werden diese durch ein "&"getrennt.

html Lehrgang mailto

Wenn wir nun den untersten Verweis aufrufen, sehen wir, dass sämtliche Felder des E-Mail-Programms ausgefüllt sind.

html Lehrgang mailto

Ob wir in der Lage sind, ein einfaches Script mit Formular und E-Mail-Funktion zu erstellen? Probieren wir es!

html Lehrgang mailto

Wir haben "form" mit der Methode GET eingestellt. Dadurch werden die Variablen, wie wir es brauchen, über die URL weitergeleitet. Des Weiteren heißen die Formularfelder so, wie die Variablen mit GET gesendet werden müssen:

  • name="cc" für eine Kopie
  • name="subject" für den Betreff
  • name="body" für die Nachricht, die im Body der E-Mail erscheinen soll.

Nun testen wir einmal unser kleines Script:

html Lehrgang mailto

Das Formular erscheint. Nachdem wir die Felder ausgefüllt und auf den "Absenden"-Button geklickt haben, erscheint das E-Mail-Programm:

Wir sehen, dass alle Felder nun ausgefüllt sind. Das Programm funktioniert also.

html Lehrgang mailto

Dies ist sicher kein umwerfendes Kontaktformular, aber es funktioniert und kann fürs erste reichen.

Schriftenarten und -größen

Das Thema Schriftarten und -größe ist meines Erachtens eigentlich kein hmtl-, sondern ein css-Thema. Schriftformatierung gehört eben zum Design. Da aber html auch hierfür einiges zur Verfügung stellt, möchte ich daher kurz darauf eingehen in der Hoffnung, dass ihr nach Besuch des css-Lehrgangs alles wieder vergessen werdet, was ich hier vorstelle.

Schriftarten werden mit "font face" geändert.

html Lehrgang Schriftarten

Wir sehen nun die verschiedenen Schriftarten im Browserfenster::

html Lehrgang Schiftarten im Browser

Die Schriftgrößen werden mit "font size" angegeben.

html Lehrgang Schiftgröße im Browser html Lehrgang Schiftgröße im Browser

Entweder kann man die Schriftgröße mit absoluten Werten oder mit "+" oder "-" vergrößern oder verkleinern. Etwas eigenartig sollte euch das Verhalten ab Zeile 28 vorkommen, haben wir doch in Zeile 27 die Schriftgröße "1". Der Grund ist, dass die Schriftgröße nicht aufgrund der vorher eingestellten Schriftgröße eingestellt wird, sondern nach der "Normalschrift". Ist die Größe der Normalschrift 3, dann ist +1 = 4, -1 = 2.

Die Schriftfarbe ändern wir mit "font color".

html Lehrgang Schiftfarben

Das Ergebnis im Browserfenster:

html Lehrgang Schiftfarben im Browser

Die hier vorgestellten Attribute wurden vom W3C mittlerweile als deprecated eingestuft und sollen aus dem html-Standard entfernt werden. Daher, wie ich bereits geschrieben habe, am besten wieder vergessen und die css-Eigenschaften nutzen.

Eine Website veröffentlichen

So allmählich nähern wir uns dem Ende unseres html-Lehrgangs. Es ist noch die Frage offen, wie wir nun die erstellte Seite ins World Wide Web bekommen.

Zunächst brauchen wir einen Webhoster, der uns Speicherplatz zur Verfügung stellt. Nehmt euch zur Auswahl etwas Zeit und vergleicht verschiedene Anbieter. Folgende Dinge solltet ihr beachten:

  • Wenn ihr bezüglich der Kosten auf Nummer sicher gehen wollt, so solltet ihr darauf achten, dass der Traffic "flat" ist.
  • Achtet darauf, dass der Webhoster eine hohe Verfügbarkeit der Seite garantiert.

Mit "webhosting vergleich" oder "webspace vergleich" als Suchbegriffe solltet ihr bei Google fündig werden.

Nachdem wir den richtigen Anwender gefunden und wir uns bei ihm registriert haben, kann es nun losgehen. Sämtliche Dateien unseres Webprojekts müssen nun hochgeladen werden. Bei kleineren Projekten mit wenigen Dateien können wir dies direkt mit den Funktionen der Webhoster machen, bei größeren Projekten empfiehlt sich jedoch ein FTP-Programm wie z.B. FileZilla.

Nach Hochladen aller Dateien sollten wir jetzt noch prüfen, ob alles unseren Vorstellungen entsprechend funktioniert. Eventuell sind jetzt noch kleine Nachbesserungen erforderlich.

Wie geht es weiter?

Ihr habt nun eine ganze Menge in diesem html-Lehrgang gelernt, aber dies ist bisher erst der halbe Weg. Zu einer professionellen Website fehlt jetzt noch der kreative Teil, das Design. Dieses wird mit css gemacht. Daher empfehle ich, auch diesen Lehrgang zu absolvieren und würde mich freuen, wenn wir uns dort wiedersehen.

Im Anschluss an den css-Lehrgang werden wir gemeinsam eine Website mit html und css erstellen. Also bin dann

euer Martin Habel




« zurück