- Konu sahibi
- #1
HTML e-posta imzası oluşturmak için ad, görev, iletişim bilgileri ve bağlantıları küçük bir tablo içinde düzenleyip stilleri doğrudan HTML etiketlerine ekleyin. Aşağıdaki örnek, logo gerektirmeden çalışan, kopyalanıp imza alanına uyarlanabilecek en küçük tam örnektir.
Bu parçayı bir HTML dosyasının gövdesine yerleştirip tarayıcıda açtığınızda iki sütunlu bir imza görünür. Geliştirici konsoluna HTML yapıştırmak bunu çalıştırmanın doğru yolu değildir. E-posta istemcisinde bağlantıların üzerine tıklanabiliyor, telefon bağlantısı mobil cihazda arama başlatabiliyor ve e-posta adresi yeni ileti penceresine yönlendiriyorsa bağlantıların ilk kontrolü yapılmış olur. Görünüm ve istemci uyumluluğu için deneme mesajı ayrıca gereklidir.
Görsel yüklenmezse ALT metni görülebilecek şekilde anlamlı yazılmalıdır. Dekoratif görselde boş
HTML olarak eklemek daha uygundur; alıcı metni seçebilir, bağlantıları kullanabilir ve imza farklı ekranlarda daha esnek davranır. Tüm imzayı tek bir görsele dönüştürmek erişilebilirliği ve bağlantı kullanımını azaltır.
Hayır. Yalnızca gerçekten kullanılan profilleri ekleyin. Her ikon ayrı bir bağlantı olmalı ve görsel yüklenmediğinde hedefi anlaşılabilecek ALT metnine sahip olmalıdır.
E-posta uygulamalarının HTML ve CSS desteği farklı olabilir. Önce harici CSS, gereksiz görseller ve karmaşık yerleşimleri kaldırın; ardından sade tablo yapısını farklı istemcilerde yeniden test edin.
Çalışan HTML imza örneği
Kod:
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,sans-serif;font-size:14px;line-height:1.4;color:#222;">
<tr>
<td style="padding:0 16px 0 0;border-right:2px solid #2563eb;vertical-align:top;">
<strong style="font-size:17px;color:#111;">Ayşe Yılmaz</strong><br>
<span style="color:#555;">Web Geliştirici</span>
</td>
<td style="padding:0 0 0 16px;vertical-align:top;">
<a href="mailto:[email protected]" style="color:#2563eb;text-decoration:none;">[email protected]</a><br>
<a href="tel:+905551112233" style="color:#2563eb;text-decoration:none;">+90 555 111 22 33</a><br>
<a href="https://example.com" style="color:#2563eb;text-decoration:none;">example.com</a>
</td>
</tr>
</table>Bu parçayı bir HTML dosyasının gövdesine yerleştirip tarayıcıda açtığınızda iki sütunlu bir imza görünür. Geliştirici konsoluna HTML yapıştırmak bunu çalıştırmanın doğru yolu değildir. E-posta istemcisinde bağlantıların üzerine tıklanabiliyor, telefon bağlantısı mobil cihazda arama başlatabiliyor ve e-posta adresi yeni ileti penceresine yönlendiriyorsa bağlantıların ilk kontrolü yapılmış olur. Görünüm ve istemci uyumluluğu için deneme mesajı ayrıca gereklidir.
İmza nasıl hazırlanır ve eklenir?
- Örnekteki ad, görev, e-posta, telefon ve web sitesi değerlerini kendi bilgilerinizle değiştirin. E-posta için
mailto:, telefon içintel:önekini koruyun. - İmzayı doğrudan oluşturan e-posta hizmetinin veya masaüstü uygulamasının imza düzenleyicisini açın.
- Uygulama açıkça HTML kaynak düzenleme alanı sunuyorsa kodu oraya ekleyin; normal metin alanına yapıştırılan kod etiket olarak görünebilir. Yalnızca görsel düzenleyici sunuluyorsa kodu tarayıcıda açıp oluşan imzayı seçerek kopyalayın ve imza alanına yapıştırın.
- İmzayı yeni iletilerde ve yanıt/iletmelerde ayrı ayrı kullanmak isteyip istemediğinizi seçin. Yanıt zincirlerinde imzanın tekrar tekrar eklenmesi okunabilirliği azaltabilir.
- Kendinize yeni bir deneme e-postası gönderin. Masaüstü ve mobil görünümde metinlerin taşmadığını, bağlantıların doğru hedefe gittiğini ve imzanın gereksiz boşluk üretmediğini kontrol edin.
İhtiyaca göre hangi yapıyı seçmeli?
| İhtiyaç | Önerilen yapı | Dikkat edilecek nokta |
|---|---|---|
| Sade kişisel imza | Metin ve bağlantılardan oluşan tek tablo | Sade yapı ve kolay bakım; istemcide test gerekir |
| Logo kullanımı | Bağlantı içine alınmış IMG etiketi | HTTPS üzerinden erişilebilen görsel ve anlamlı ALT metni kullanın |
| Sosyal medya bağlantıları | Ayrı A bağlantıları | Her ikonun hedefi açık olmalı; yalnızca ikon görseline güvenmeyin |
| Kampanya veya duyuru | İmza dışında ayrı HTML e-posta | İmzayı reklam alanına dönüştürmek yerine kısa tutun |
Logo eklemek isterseniz
Logoyu imzaya eklemek içinimg etiketini bağlantı içine yerleştirin. Görselin adresi alıcının erişebileceği tam bir HTTPS adresi olmalı; yerel bilgisayar yolu veya C:\logo.png gibi yollar alıcıda çalışmaz.
Kod:
<a href="https://example.com" style="text-decoration:none;">
<img src="https://example.com/logo.png" width="96" height="96" alt="Example şirketi" style="display:block;border:0;">
</a>Görsel yüklenmezse ALT metni görülebilecek şekilde anlamlı yazılmalıdır. Dekoratif görselde boş
alt="" kullanılabilir; fakat görsel bir bağlantının tek içeriğiyse bağlantının erişilebilir adı kaybolmamalıdır. Örnekte şirket adını açıklayan alt metni koruyun veya bağlantıya ayrıca anlaşılır metin ekleyin. İletişim bilgilerini görsele gömmeyin.Sık yapılan hatalar ve teşhis
- Bağlantı tıklanmıyorsa
hrefdeğerinin tırnak içinde olduğunu vehttps://,mailto:veyatel:önekinin bulunduğunu kontrol edin. - Logo görünmüyorsa görsel adresini tarayıcıda kontrol edin. Adres açıldığı hâlde e-postada görünmüyorsa alıcının haricî görselleri engellemesi de olasıdır; imza görselsizken de anlaşılır kalmalıdır.
- İmza yana taşıyorsa sabit genişlikli büyük kutular, uzun kelimeler veya yüksek çözünürlüklü görseller kullanmayın. İçeriği kısa tutup mobil cihazda yeniden test edin.
- Biçim bozuluyorsa harici CSS dosyasına, JavaScript'e veya karmaşık HTML bileşenlerine bağlı kalmayın. Temel stilleri doğrudan ilgili etiketlerde tutun.
Sık sorulan sorular
HTML imzayı doğrudan kod olarak mı, görsel olarak mı eklemeliyim?
HTML olarak eklemek daha uygundur; alıcı metni seçebilir, bağlantıları kullanabilir ve imza farklı ekranlarda daha esnek davranır. Tüm imzayı tek bir görsele dönüştürmek erişilebilirliği ve bağlantı kullanımını azaltır.
İmzaya sosyal medya ikonları eklemek zorunlu mu?
Hayır. Yalnızca gerçekten kullanılan profilleri ekleyin. Her ikon ayrı bir bağlantı olmalı ve görsel yüklenmediğinde hedefi anlaşılabilecek ALT metnine sahip olmalıdır.
İmza neden karşı tarafa farklı görünüyor?
E-posta uygulamalarının HTML ve CSS desteği farklı olabilir. Önce harici CSS, gereksiz görseller ve karmaşık yerleşimleri kaldırın; ardından sade tablo yapısını farklı istemcilerde yeniden test edin.
