• Skriptum
• HTML
• HTML-Diverses
• E-Mail

Ausführung im Browser bei der/dem BenutzerIn

Klickt der/die BenutzerIn auf den Link der E-Mail:

• startet der Computer die Standard-E-Mail-Software (E-Mail-Client: z.B. Outlook, Outlook-Express, Thunderbird),
• erstellt eine neue E-Mail und
• fügt die von der Autorin oder dem Autor im HTML-Code angegebene Empfängeradresse (bzw. andere Daten) gleich ein.

Wenn der/die BenutzerIn jedoch nur Webmail verwendet (häufig bei Gratis-E-Mail-Adressen wie hotmail vom Microsoft, gmail von google, yahoo oder gmx) und daher keinen E-Mail-Client installiert hat, funktioniert dies nicht. Eine Ausnahme ist, wenn der Browser Chrome von google verwendet wird und die/der BenutzerIn eine gmail-Adresse hat. Dann öffnet Chrome die Webmailseite von google und erstellt eine neue E-Mail.

E-Mail im Webeditor einfügen

Expression Web:
Die Textstelle oder Grafik, die als Hyperlink auf die E-Mail verwendet werden soll, eingeben und markieren. Dann im Menü" Einfügen" den Befehl Link…" auswählen. Es folgt das Dialogfenster "Link einfügen", in dem man links in der Spalte "Link zu:" ganz unten das Symbol "E-Mail-Adresse" anklickt. Danach kann man im Textfeld "Adresse" die Empfänger-E-Mail-Adresse eingeben.

BlueGriffon

Dreamweaver 8:
Die Textstelle oder Grafik, die als Hyperlink auf die E-Mail verwendet werden soll, eingeben und markieren. Dann im Menü" Einfügen" den Befehl "E-Mail-Verknüpfung" auswählen. Es folgt ein Dialogfenster, in dem man die Empfänger-E-Mail-Adresse eingibt.

Aufbau im HTML-Code

HTML: <a href="mailto:beispiel@example.org">Textstelle</a>

mailto:

Sagt dem Browser, dass es sich bei diesem Hyperlink um einen E-Mail-Verweis handelt und (wenn möglich) den E-Mail-Client starten soll.

beispiel@example.org

Empfänger-E-Mail-Adresse, kommt an die Position "An".

Die Eingabe aller weiteren Vorgaben ist nur im Quellcode möglich, da weder Expression Web, noch Dreamweaver oder Blue Griffon entsprechende Möglichkeiten anbieten:

E-Mail mit weiteren Vorgaben

Es können weitere E-Mail-Adressen vorgegeben werden, die sowohl in "An", als auch in "CC" oder "BCC" vom E-Mail-Client automatisch eingefügt werden. Ebenso ist es möglich ein Betreff vorzugeben als auch schon Textteile für die Nachricht selbst.

Genau Informationen, wie E-Mail-Verweise in HTML funktionieren und welche Ergänzungsmöglichkeiten es gibt:
wiki selfhtml: E-Mail-Verweise

Liste der Ergänzungsmöglichkeiten (Parameter):

cc

Carbon Copy (sichtbarer Kopienempfänger), es kann eine E-Mail-Adresse angegeben werden, aber auch mehrere, wenn man sie mit einem ";" (Strichpunkt) trennt.
z.B. cc=anderer@firma.com;auch_wer@tipp.info

bcc

Blind Carbon Copy (nicht sichtbarer Kopienempfänger), es kann eine E-Mail-Adresse angegeben werden, aber auch mehrere, wenn man sie mit einem ";" (Strichpunkt) trennt.
z.B. bcc=ich@meins.at;noch_wer@weis-bescheid.or.at

subject

Betreff.
Es können im Betreff Zeichen vorkommen, die in einer URL (Web-Adresse) nicht vorkommen dürfen, z.B. ein Leerzeichen.
z.B. subject=Abrechnung für Feber (Anmerkung: noch nicht maskiert.)

body

Nachrichtentext.
Auch hier werden wie bei subject unerlaubte Zeichen maskiert.
z.B. body=mfg Martin (Anmerkung: noch nicht maskiert.)

Aufbau …

… der Textstelle (<a href="Textstelle">) , die als Wert zwischen den Anführungszeichen dem Attribut href zugewiesen wird, wenn Ergänzungen angefügt sind:

• Nach den Wert mailto:beispiel@example.org wird ein Fragezeichen angehängt:
  mailto:beispiel@example.org?
• Danach kommt ein "Query String", der aus einen benannten (vorgegebenen) Parameter, einem Ist-Gleich-Zeichen und einem Wert besteht:
  • Parameter, bestimmt, welche Information angegeben wird, z.B. cc für Kopie (Carbon Copy):
    mailto:beispiel@example.org?cc
  • Dem Parameter folgt ein = (Ist-Gleich-Zeichen):
    mailto:beispiel@example.org?cc=
  • und danach der gewünschte Wert ohne Anführungszeichen.
    mailto:beispiel@example.org?cc=ich@meins.at
    (Es gibt einige Zeichen, die hier nicht vorkommen dürfen. Sie müssen daher anders kodiert werden.)
• Sollen mehr als ein Parameter verwendet werden, so wird jeder weitere "Query String" mit einem & (Kaufmännisches Und, auf engl. ampersand) angehängt:
  mailto:beispiel@example.org?cc=ich@meins.at&…
  (Es gibt einige Zeichen, die hier nicht vorkommen dürfen. Sie müssen daher anders kodiert werden.)

?

Gibt an, dass nun Parameter kommen, die man für die weiteren Vorgaben nutzen kann.
Zuerst kommt die Parameterbezeichnung, dann ein = (ist gleich Zeichen) und dann der Wert, den der Parameter bekommt (ohne Anführungszeichen).

&

eigenlich steht in einer URL "&", aber in HTML muss dieses Zeichen maskiert werden. "&" ist ein erlaubtes Zeichen in einer URL, aber nicht in HTML, daher muss es vor HTML versteckt (maskiert) werden und nicht vor der URL - also HTML-Maskierung.
Zwischen einzelnen Parameterzuweisungen muss dieses Zeichen stehen um sie nacheinander verwenden zu können.

Beispiel (noch ohne Kodierung und Maskierung): <a href="mailto:beispiel@example.org?bcc=ich@meins.at&subject=Bestellung">

URL-Kodierung

Da "Query Strings" in der URL mitgesendet werden, mit der der Browser die nächste Seite oder den nächsten Dienst anfordert, dürfen hier keine nicht erlaubten Zeichen vorkommen. Diese müssen mit dem sogenannten URL-Encoding (auch URL-Kodierung oder Prozentkodierung genannt) umschrieben werden.

Das selbe gilt auch für Zeichen, die in der URL eine bestimmt Bedeutung haben. Da z.B. ein Fragezeichen in einer URL einen "Query String" einleitet, muss ein Fragezeichen, das als Satzzeichen in einer Textstelle für ein Betreff steht, umschrieben werden.

Umschrieben werden diese Zeichen mit der Prozentkodierung. Dafür wird der Zahlencode des Zeichens verwendet, und zwar in der Form:
%-Zeichen gefolgt vom Zahlencode in Hexadezimaler Schreibweise,
z.B. %20 für ein Leerzeichen.

So wird aus dem "Query String"
subject=Abrechnung für Feber
die Zeichenkette
subject=Abrechnung%20f%FCr%20Feber

Anmerkung: Für URLs gilt ein anderer Standard als für HTML, daher ist hier die Maskierung anders als in HTML mit "&" und ";".

Nicht erlaubte Zeichen und die entsprechende Zeichenkette für die Kodierung:

Zeichen	Zeichenkette für Maskierung
[neue Zeile]	%0A
[Wagenrücklauf]	%0D
[Leerzeichen]	%20
ä	%E4
Ä	%C4
ö	%F6
Ö	%D6
ü	%FC
Ü	%DC
ß	%DF

Zeichen mit bestimmter Bedeutung, die innerhalb von Textstellen umschrieben werden müssen, und die entsprechende Zeichenkette für die Kodierung:

Zeichen	Zeichenkette für Maskierung
!	%21
?	%3F
,	%2C
;	%3B
:	%3A
/	%2F
'	%27
"	%22
=	%3D
+	%2B
-	nicht nötig
*	%2A
%	%25
%	%25
&	%26
#	%23
$	%24
@	%40
(	%28
)	%29
[	%5B
]	%5D
{	%7B
}	%7D
\	%5C
|	%7C

   

Das Ersetzten kann man händisch machen oder es gibt im WWW passende Werkzeuge wie z.B. den "URL Encoder" https://url-encoder.de/

Weitere Zeichen maskieren (SELFHTML)

Ferner müsst ihr alle Zeichen maskieren, die nicht in der ASCII-Zeichentabelle vorkommen. Zur Ermittlung weiterer Zeichen könnt ihr beispielsweise in der Codetabelle der ISO-8859-1-Kodierung die dezimale Nummer des gewünschten Zeichens ermitteln, von dieser Dezimalzahl dann mit dem  Dezimal/Hexadezimal-Umrechner (oder Rechner von Windows, Ansicht Programmierer bzw. Erweitert) den Hexadezimalwert ermitteln, und noch ein Prozentzeichen davor setzen.

HTML-Maskierung

Wenn die Zeichenfolge mit den Prozentzeichen für eine URL maskiert ist, wird sie in HTML-Quellcode eingesetzt. Hier sind nun andere Zeichen nicht erlaubt, z.B. das & Kaufmännische Und (Ampersand), " Anführungszeichen oben (Gänsefüßchen) sowie < und > Kleiner- und Größer-Zeichen (Spitze Klammern). Diese kann man auch mit der Prozentkodierung umschreiben oder man ersetzt sie im HTML-Code mit den entsprechenden Entities mit &amp; " < und >

Beispiel:

Es soll eine E-Mail an donald.duck@disney.com, mit einer Kopie an asterix@uderzo.fr und obelix@uderzo.fr, sowie an einem nicht sichtbaren Empfänger spion_spion@mad.de geschickt werden. Es soll das Betreff "Fanpost!" sowie dem Text:
Wie geht's?
Alles Gute für dein/euer nächstes Heft.
liebe Grüße
Martin

Die Zeichenfolge müsste so aussehen:

mailto:donald.duck@disney.com?cc=asterix@uderzo.fr;obelix@uderzo.fr&bcc=spion_spion@mad.de&subject=Fanpost!&body=Wie geht's?
Alles Gute für dein/euer nächstes Heft.
liebe Grüße
Martin

Maskiert sieht dies so aus. Diese Zeichenfolge muss man dann in den HTML-Quellcode in der Code-Ansicht in Dreamweaver einfügen:

<a href="mailto:donald.duck@disney.com?cc=asterix@uderzo.fr;obelix@uderzo.fr&amp;bcc=spion_spion@mad.de&amp;subject=Fanpost%21&amp;body=Wie%20geht's%3F%0A%0DAlles%20Gute%20f%FCr%20dein%2Feuer%20n%E4chstes%20Heft.%0A%0Dliebe%20Gr%FC%DFe%0A%0DMartin">

Tipp: Wenn man eine längere Textstelle für die E-Mail verwendet, sollte man diese (mit Zeilenumbrüchen und Umlaute) in einem Texteditor vorschreiben. Dann kann man Schritt für Schritt die Umlaute, Leerzeichen und Zeilenumbrüche durch die entsprechenden Zeichen (wie in SELFHTML beschrieben) ersetzen. Kommt ein Prozentzeichen im Text vor, so muss dieses als erstes ersetzt werden, sonst wird später bei alle Maskierungen das Maskierungs-Prozentzeichen ebenfalls ersetzt.
Am Schluss muss noch das & für weitere Parameter mit &amp; ersetzt werden.

Verschlüsseln

"Verschlüsseln" der E-Mail-Adresse auf Websites, damit sie nicht so leicht in SPAM-Listen gelangen: Email Address Encoder 2.2 von der TU Berlin: http://hoax-info.tubit.tu-berlin.de/software/emailencoder.shtml
Anmerkung: Hat auch ein Service zu Hoaxes per E-Mail (Falschmeldungen, Kettenbriefe, etc.): www.hoax-info.de

Die aktuellste Infos die ich habe besagen, dass diese einfachen Methoden keine Wirkung mehr haben.

Aktuellere Möglichkeiten (mit javascript)

Sind sicher wirkungsvoller, aber das Problem ist, dass wenn die/der BenutzerIn javascript deaktiviert hat, diese Möglichkeiten nicht funktionieren und gar eine E-Mail-Adresse angezeigt wird.

Website von HIVELOGIC mit Assistenten zum Erstellen:
http://hivelogic.com/enkoder/index.php

Es gibt ein "Basic Form", in dem man folgende Werte eingeben kann:

• E-Mail-Adresse (Email address)
• die Textstelle für den Hyperlink (Link text)
• nicht sinnvoll: einen Text für den "Tooltip", wenn mit der Maus auf die Textstelle gezeigt wird (Link title text)
• Betreff (Email subject) - falls man möchte.

Mit der Schaltfläche Submit kann man die Eingaben absenden und bekommt einen Text als Antwort (The Result).

Es gibt aber auch ein "Advanced Form", mit dem man auch andere Paramter wie cc, bcc und body eingeben kann. Hier wie zuvor beschrieben einen E-Mail-Hyperlink erstellen, also den HTML-Tag "a" einfügen, im HTML-Code mit den Parameter ergänzen, für die URL kodieren und für HTML kodieren. Danach den gesamten HTML-Tag <a href="…">Textstelle</a> (inklusive Textstelle und Endtag) markieren und ins Eingabefeld vom "Advanced Form" kopieren.

Mit der Schaltfläche Submit kann man die Eingaben absenden und bekommt einen Text als Antwort (The Result).

In beiden Fällen muss der Antworttext in den HTML-Code kopiert werden. Also zuerst den gesamten Antworttext (Bildlaufleister beachten) von "<script type=" bis "</script>" kopieren. Dann in Dreamweaver in der Entwurfsansicht den Text vor und nach der E-Mail-Verknüpfung eintippen.
z.B.: …eine Bestellung per E-Mail absenden…
Die Textstelle für die E-Mail wird später vom Antworttext eingefügt, also muss man diese nun löschen und danach die Einfügemarke nach dem Leerzeichen, also unmittelbar vor dem Wort danach platzieren.
z.B. …eine |absenden…

Nun muss man in die Codeansicht wechseln und an dieser Stelle den Antworttext einfügen.

In der Entwurfsansicht von Dreamweaver sieht man nichts von der E-Mail-Verknüpfung, aber in der Vorschau in einem Browser kann man den Erfolg überprüfen.