Membuat Email Dengan code HTML (tampilan html, gambar dsb)

Membuat Email Dengan code HTML (tampilan html, gambar dsb)

Sebenarnya kita bisa membuat email dalam bentuk seperti template dengan kode HTML melalui ‘email client’. Dengan kode html yang ditanam tersebut kita dapat membuat email tidak standar lagi, menjadi lebih bergaya dan berwarna sesuai kreatifitas anda.

Template Email HTML ini, bisa kita fungsikan untuk apapun, termasuk untuk tujuan marketing dengan menawarkan produk atau profil perusahaan anda.

Apa Saja yang Diperlukan ?

Tentunya ada sudah mempunyai akun email.

Contoh kasus disini menggunakan akun Gmail dengan ‘Email Clien’ adalah Thunderbird. Maka pelajari dan terapkan Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0. Sebab Thunderbird yang nanti kita gunakan sebagai fasilitas untuk mengirim email.

Persiapkan “code editor” yang biasa anda gunakan, notepad juga bisa digunakan. Untuk membuat atau mengedit kode Template ‘HTML Email’.

Gambaran Umum Struktur HTML yang Digunakan

Struktur HTML yang digunakan untuk Email ini menggunakan elemen table, dan CSS ditempatkan secara internal. Seperti berikut:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title> … </title>

<style type=”text/css” media=”screen”>

</style>

</head>

 

<body>

 

<table>

<tr>

<td>

……..

</td>

</tr>

</table>

 

</body>

</html>

Tahapan Membuat Template HTML Email

Template Email disini hanya menggembangkan tiga bagian elemen yaitu ‘header’, ‘article’ dan ‘footer’. Dan Template Email ini sekedar mengambarkan isi update postingan Tutorialisme

Sebelumnya, lihat demo Pengembangan Template Email HTML, yang akan diterapkan.

1. Kode Halaman Template

Pada halaman template ini menggunkan lebar 560 px, anda bisa juga membuat dengan ukuran berbeda, biasanya standar lebarnya 600px.

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td align=”center”>

 

<table width=”560px” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”page”>

<tr>

<td>

…….. Kode Elemen Header

…….. Kode Elemen Article

…….. Kode Elemen Footer

</td>

</tr>

</table>

 

</td>

</tr>

</table>

2. Kode Elemen Header

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”header”>

<tr>

<td>

<h1><a href=”http://tutorialisme.students.uii.ac.id”>

<img src=”http://lh3.ggpht.com/_dfnTVAxeWMI/S0pJGIKkYGI/AAAAAAAADBU/DiNkLAYtQao/header.gif”

width=”560″ height=”77″ alt=”logo id tutorial”></a></h1>

</td>

</tr>

</table>

3. Kode Elemen Article

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”article”>

<tr>

<td>

 

<h2>Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0</h2>

<p><small>kang Rohman | January 7th, 2010</small></p>

<p><img src=”mail.jpg”

width=”219″ height=”148″ alt=”Main Content Inline Small” align=”left” hspace=”10″>

Sebelumnya pada artikel Sekilas tentang Email telah disinggung bahwa

untuk mengelola email bisa langsung melalui Webmail dimana

anda membuat email atau dapat pula diteruskan/download memakai

Software Email Client. Namun, sebelum anda meneruskan email ke software email client,

terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan.

Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) /

IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol).

<a href=”http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/#more-138″>Selanjutnya</a></p>

 

<h2>Cara Membuat Email di gmail (Google Mail)</h2>

<p><small>kang Rohman | January 6th, 2010</small></p>

<p><img src=”gmail.jpg”

width=”166″ height=”145″ alt=”Main Content Inline Small” align=”left” hspace=”10″>

Jika sebelumnya telah dibahas tentang bagaimana cara membuat email di yahoo,

maka pada artikel iniTutorialisme akan mencoba membahas tentang Cara membuat Email di Gmail

(Google Mail).</p>

<p>Ada beberapa alasan kenapa Tutorialisme menyarankan anda untuk mempunyai email

(akun) di gmail : <a href=”http://tutorialisme.students.uii.ac.id/review-mengenai-email-apa-itu-email/#more-76″>

Selanjutnya</a></p>

</td>

</tr>

</table>

3. Kode Elemen Footer

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”footer”>

<tr>

<td height=”40″ class=”footer” align=”center”>

<p><small>2009 <a href=”http://tutorialisme.students.uii.ac.id”>

tutorialisme.students.uii.ac.id</a>

| Design: Tutorialisme</small></p>

</td>

</tr>

</table>

3. Kode CSS

<style media=”screen”>

body {margin: 0; padding: 0; color: #333333; background-color: #ddd;}

a {color: #ce0316;}

p {margin: 0; padding: 5px 0; line-height:20px; font-family: Arial; font-size: 12px;}

h2 {margin:10px 0 0; padding: 0 0 10px; font-family:

Georgia; font-size: 20px; font-weight:normal;border-bottom:1px solid #999;}

.page {background-color: #fff; padding:10px;}

.article {border-bottom:1px solid #999; margin:5px 0 10px; padding: 0 0 10px;}

.footer {background-color: #eee;}

</style>

Maka,

keseluruhan kode HTML ‘Template Email’ tersebut menjadi:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>Demo Email HTML</title>

<style type=”text/css” media=”screen”>

body {margin: 0; padding: 0; color: #333333; background-color: #ddd;}

a {color: #ce0316;}

p {margin: 0; padding: 5px 0; line-height:20px;

font-family: Arial; font-size: 12px;}

h2 {margin:10px 0 0; padding: 0 0 10px; font-family:

Georgia; font-size: 20px; font-weight:normal;border-bottom:1px solid #999;}

.page {background-color: #fff; padding:10px;}

.article {border-bottom:1px solid #999; margin:5px 0 10px; padding: 0 0 10px;}

.footer {background-color: #eee;}

</style>

 

</head>

<body>

 

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td align=”center”>

 

<table width=”560px” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td>

 

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td>

<h1><a href=”http://tutorialisme.students.uii.ac.id/”>

<img src=”/header.gif”

width=”560″ height=”77″ alt=”logo tutorialisme”></a></h1>

</td>

</tr>

</table>

 

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td>

<h2>Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0</h2>

<p><small></small></p>

<p><img src=”/mail.jpg” width=”219″ height=”148″ alt=”Main Content Inline Small” align=”left” hspace=”10″> Sebelumnya pada artikel Sekilas tentang Email telah disinggung bahwa untuk mengelola email bisa langsung melalui Webmail dimana anda membuat email atau dapat pula diteruskan/download memakai Software Email Client. Namun, sebelum anda meneruskan email ke software email client, terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan. Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) / IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol). <a href=”http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/#more-138″>Selanjutnya</a></p>

 

<h2>Cara Membuat Email di gmail (Google Mail)</h2>

<p><img src=”/gmail.jpg” width=”166″ height=”145″

alt=”Main Content Inline Small” align=”left” hspace=”10″>

Jika sebelumnya telah dibahas tentang bagaimana cara membuat email di yahoo,

maka pada artikel ini Tutorial akan mencoba membahas tentang Cara membuat Email di Gmail

Google Mail).</p>

<p>Ada beberapa alasan kenapa Tutorial menyarankan anda untuk

mempunyai email (akun) di gmail :

<a href=”http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/“>

Selanjutnya</a></p>

</td>

</tr>

</table>

 

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”footer”>

<tr>

<td height=”40″ align=”center”>

<p><small>2009 <a href=”http://tutorialisme.students.uii.ac.id“>tutorialisme.students.uii.ac.id</a> | Design: Tutorialisme</small></p>

</td>

</tr>

</table>

 

</td>

</tr>

</table>

 

</td>

</tr>

</table>

 

</body>

</html>

Catatan: Untuk format HTML dengan menggunakan table, setiap image <img> di simpan di dalam kode HTML, seperti contoh diatas. Setiap image tersebut perlu anda upload, bisa ditempat hosting image gratisan, dan ambil url lengkapnya.

Apabila anda kesulitan membuat template email ini sendiri, anda dapat menggunakan kode template diatas dan anda sesuaikan dengan kebutuhan anda. Tapi anda juga dapat mencari penyedia jasa free template email lainnya apabila template diatas belum sesuai keinginan anda, seperti di 30 Free HTML Email Templates. Ada 30 pilihan disana, kemudian anda download dan modifikasi file ‘template-basic.html’ dengan ‘code editor’.

Tahapan Mengirim “Template Email HTML” dengan Thunderbird

Mengapa menggunakan “email client” seperti Thunderbird untuk menggirim template email ? Sebab Gmail danYahoo tidak menyediakan fasilitas untuk menyisipkan kode HTML.

Buka program Thunderbird anda yang telah di instal,

Klik ‘Write’, pada bagian atas, :

masukan alamat email yang akan anda kirim

tulis subject dari email anda tersebut

klik bagian halaman tersebut, maka tool insert diatas akan aktif

klik Insert dan pilih HTML, maka akan muncul layar baru

masukan kode HTML template email yang telah anda buat

klik insert,

Apabila anda telah yakin, langsung klik ‘Send’, dibagian atas.

Penutup

Demikian keseluruhan tahapan Membuat Template Email HTML. Anda dapat melakukan uji coba sendiri, mungkin dengan menggunakan kode

About The Author

Saya adalah Bloger asal Malang yang menyukai kegiatan yang berhubungan dengan perkembangan IT, Design dan juga Pendidikan. Berupaya untuk selalu menebarkan kebermanfaatan bagi sesama.

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *