Nadine: E-Mail Signatur mit HTML erstellen

Beitrag lesen

Hallo zusammen,

ich bin blutiger Anfänger im Bereich HTML, eigentlich Grafikdesignerin. Nun hat ein Kunde mich gefragt, ob ich ihm eine E-Mail Signatur in HTML erstellen könnte. Anforderungen waren: anklickbare Logos, E-Mail Adresse und Telefonnummer. Ich bin folgendermaßen vorgegangen:

  • Bilder der Logos und Icons per FTP auf einen Webserver hochgeladen
  • In Dreamweaver dann folgende Signatur erstellt (s. u.)
  • Zu Testzwecken die HTML-Datei in mein eigenes Mailprogramm (Apple Mail) eingebunden und verschickt.

Bei mir wurde alles richtig angezeigt, die Logos, Telefonnummern etc. waren anklickbar. Beim Kunden kam die Signatur allerdings zerschossen an. Alle enthaltenen Bilder wurden nicht angezeigt, obwohl ja auf einem Webserver (hier liegt auch die Website des Kunden) abgelegt.

Was mache ich falsch? Hab das Gefühl, ich sehe den Wald vor lauter Bäumen nicht😉 Hier der Code, den ich geschrieben habe.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PL-Signatur</title>
<style type="text/css">
body {
}
</style>
<link href="signatur.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Signatur</title>
</head>
<body>
	<div>
	  <font face="Verdana" size="2px"><b>Dr. Erika Mustermann</b></font>
	</div>
	<div>
	  <font face="Verdana" size="2px">Example Development Expert</font>
	</div>
	<div>
<font face="Verdana"><br></font></div><div><a href="https://example.org" target="_blank"><img src="https://example.org/emailsignatur/example_300x87.png" alt="example logo"></a>
	</div>
	<br>
	<br>
	<div>
	  <font face="Verdana" size="2px"><b>EXAMPLE SOLUTIONS S.A.</b></font>
</div>
	<div>
	  <font face="Verdana" size="2px">Demogasse 815 | 12345 Dingenskirchen | Germany</font>
	</div>
	<br>
	<div>
	  <a href="tel: 4915412123123" target="_blank"><img src="https://example.org/emailsignatur/telefon_15px.png" alt="telefonnummer" style="padding-right: 5px"><font face="Verdana" size="2px">+49 15412 123 123</font></a>
	</div>
	<div>
		<a href="mailto:em@example.org" target="_blank"><img src="https://example.org/emailsignatur/brief_17px.png" alt="e-mail" style="padding-right: 5px"><font face="Verdana" size="2px">em@example.org</font></a>
	</div>
	<div>
		<a href="https://outlook.office365.com/owa/calendar/EXAMPLINGS@example.onmicrosoft.com/bookings/" target="_blank"><img src="https://example.org/emailsignatur/kalendar_16px.png" alt="microsoft bookings" style="padding-right: 5px"><font face="Verdana" size="2px">Make an online appointment</font></a>
	</div>
	<br>
	<br>
<div>
		<a href="https://example.org" target="_blank"><img src="https://example.org/emailsignatur/example_40px.png" alt="logo" style="float:left; padding:10px"></a>
</div>
	<div>
		<a href=" https://www.linkedin.com/..." target="_blank"><img src="https://example.org/emailsignatur/linkedin_40px.png" alt="logo" style="float:left; padding:10px"></a>
	</div>
<div>
  <a href="https://raps.example.org" target="_blank"><img src="https://example.org/emailsignatur/raps_40px.png" alt="logo" style="float:left; padding:10px"></a>
	</div>
</body>

Bin für jeden Tipp dankbar.