Pentru crearea unui newsletter personalizat, se începe cu inserarea acestui cod intr-o nouă pagină numită index.html.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>
Titlu_newletter
</title>
</head>
<body>
[continut html]
</body>
</html>
Întotdeauna se adaugă declarația tipului de document <!DOCTYPE html> altfel încât browser-ul să știe în ce este scris.
Elementul <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes” > este folosit pentru scalarea corectă a paginii HTML pe orice device – desktop și mobil.
Pentru definirea caracterelor în HTML, se scrie în cod <charset=UTF-8 > . Tagul <meta http-equiv=”X-UA-Compatible” content=”IE=edge” > este opțional. Redă compatibitatea paginii HTML cu versiunea de Internet Explorer folosită.
Printre cele mai utilizate editoare sunt :
♦ Visual
♦ Sublime
♦ Crimson
Alte editoare se pot descărca de aici – editoare, online editor.
Într-un document se respectă indentarea și nu se scriu comentarii. Se evită folosirea tagurilor HTML : paragraf, span, header, div. Toate tag-urile HTML se închid, cu excepția tag-urilor meta.
Stilul CSS (Cascading Style Sheets) descrie modul cum ar trebui elemente HTML să fie afișate în pagină. Formatul este prezentat mai jos. Se lasă spațiu între proprietățile CSS și se pune ; după fiecare proprietate în parte.
Sunt 3 tipuri CSS cunoscute. Numai ultimele două pot fi afișate într-un document HTML creat pentru newslettere.
♦ stil extern
♦ stil intern (internal) – se scrie în <head></head> folosind tag-ul <style></style> după tag-urile meta
...
<style>
selector/.class/#id
{
proprietate: valoare;
}
</style>
...
♦ stil în interiorul unui element HTML (inline)
...
<p style="proprietate: valoare;">
[continut paragraf]
</p>
...
Structura unui newsletter este făcută sub formă de tabele. Se inlocuiește [continut html] cu următorul cod prezentat mai jos.
...
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px; width: 600px;" width="600">
<tr>
<td align="center" style="padding: 0px;">
[newsletter basic]
</td>
</tr>
</table>
...
Width poate să aibă dimensiuni :
♦ 600px
♦ 800px
♦ 1000px
Un [newsletter basic] este de forma :
...
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px; width: 600px;" width="600">
<tbody>
<tr>
<td align="center" border="0" style="padding: 0px;" valign="top">
Pentru a vedea online acest mesaj personalizat, <a href="##NEWSMAN:view_online##">apasati aici</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px; width: 600px;" width="600">
<tbody>
<tr>
<td align="center" border="0" style="padding: 0px;" valign="top">
<img border="0" src="url_imagine_user" style="display: block;"/>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px; width: 600px;" width="600">
<tbody>
<tr>
<td align="center" border="0" style="padding: 0px;" valign="top">
Pentru dezabonare, <a href ="##NEWSMAN:list_unsubscribe##">apasati aici</a>.
</td>
</tr>
</tbody>
</table>
...
Tag-urile Newsman sunt porțiuni de TEXT pe care le puteți insera în mesajele trimise, pentru a fi înlocuite cu valori calculate de sistem. Tag-urile Newsman sunt încadrate între ##. Acest tip de tag-uri specifice conțin prefixul NEWSMAN. Accesați acest articol pentru a afla mai multe.
Pe lângă padding, textului i se atribuie proprietățile CSS :
♦ color
♦ font-family
♦ font-size
♦ line-height
♦ font-weight
♦ text-align
♦ vertical-align
Aceste proprietăți se scriu întotdeauna în celula tabelului – <td> și sunt valabile și pentru tag-ul <a></a> (link).
Redimensionarea imaginilor se poate face fie folosind un program de editare software, ca exemplu Adobe Photoshp, fie online – program redimensionare imagine online.
Un exemplu complet este arătat aici :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>
Titlu_newletter
</title>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px; width: 600px;" width="600">
<tr>
<td align="center" style="padding: 0px;">
<table style="width: 100%; padding: 0px;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="padding-top: 10px; padding-bottom: 20px; font-family: Arial, sans-serif; font-size: 12px; line-height: 16px; color: #000000;" align="center">
Pentru a vedea online acest mesaj personalizat
<a href="##NEWSMAN:view_online##" style="color: #000000; text-decoration: underline; font-family: Arial, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal;">
click aici
</a>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="width: 100%; padding: 0px;">
<tbody>
<tr>
<td height="6" align="center" border="0" style="height: 6px; line-height: 6px; padding: 0px;">
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding: 0px; width: 600px;" width="600">
<tbody>
<tr>
<td align="center" border="0" style="padding: 0px;" valign="top">
<img border="0" src="http://cdn-s1.newsman.dazoot.ro/images/templates/sv/test/1.jpg" style="display: block;" />
</td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="width: 100%; padding: 0px;">
<tbody>
<tr>
<td height="6" align="center" border="0" style="height: 6px; line-height: 6px; padding: 0px;">
</td>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #ffffff; width: 100%; padding: 0px;">
<tbody>
<tr>
<td align="center" valign="middle" width="600" style="width: 600px; background-color: #ffffff; padding-top: 10px; padding-bottom: 10px; font-size: 12px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #000000; text-decoration: none;">
Pentru dezabonare click <a href="##NEWSMAN:list_unsubscribe##" style="text-decoration: underline; font-weight: bold; color: #000000;">aici</a>.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Pentru a vedea codul-sursă se apasă Ctrl+U simultan. Pentru a căuta în newsletter, se apasă Ctrl+F simultan. Pentru a-l salva ca bookmark în browser, se apasă Ctrl+D simultan. Pentru a închide tabul, se apasă Ctrl+W în același timp. Pentru refresh se apasă Ctrl+F5 simultan.
Pentru două coloane este afișat acest exemplu. Pentru template responsive, fiecare coloană este incadrată separat într-un tabel.
Pentru ca un newsletter să fie responsive, se poate folosi @media query. Gmail App nu citește @media query.