como fazer e-mail marketing em html

INTRODUÇÃOÀ WEB E HTML

RENATO MELO – 2014

Internet, como é composta?

1. Tecnologia de rede aberta

2. Hipertexto

3. Interface gráfica

HTMLNão é grego, nem coisa

de nerd.

É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.

INTERFACE GRÁFICAA parte legal da história...

Mas antes, vem a

teoria...Antigamente: Interface com computadores era negócio para gênios da informática

Hoje: O desenvolvimento de interfaces gráficas permite o

uso por não especialistas

Os opostos

se atraemO desenvolvimento das interfaces

gráficas permitiu a criação de programas WYSIWYG

What You See Is What You

Get

CONTRATANDOUM ESTAGIÁRIO

#estagiário

#bolsa

auxílio

#650 reais

#estagiário

#bolsa

auxílio

#650 reais

#SEO

#links patrocinados

#web analytics

#redes sociais

#facebook, twitter,

youtube, google+, linkedin

#wordpress

#geolocalização

#foursquare

#desenvolvimento de

aplicativos

#webdesigner

#php e asp

#diagramação

NO FINAL DAS CONTAS...

E o que eu

preciso saber?

REGRA 01

O seu cliente ou o seu patrão querem o

lucro...

Não importa o quanto você saiba, não importe

como ele virá.

Por isso...É bom saber o que é e como

funciona cada coisa.

Especialista

Conheça a área, mas

especialize-se!

REGRA 02

A Web muda todo dia.Atualize-se

Atualize-seAtualize-se

Atualize-se

HTMLHtml é um arquivo que pode ser interpretado por navegadores.

HTMLE pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver

Bloco de notasSomente a linha de código contendo sua programação

DreamweaverEdição do html na linha de código ou no design.

E COMO FUNCIONA

UM CÓDIGO?

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Extra</title></head>

<body style="margin: 0px; padding: 0px;"><div style="font-size: 10px; font-family: verdana; padding:10px 0

10px 0;" align="center"> <p>Caso não esteja conseguindo visualizar esta mensagem <a

href="http://renatomelomkt.com.br/esamc/web-aula2/extra.html">acesse este link</a> </p>

<a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/web-aula2/extra.jpg"

border="0"></a></div>

</body></html>

TÁ BOM QUE EU VOU FAZER ISSO!!!!

VAMOS DEIXÁ-LO

FÁCIL!

VAMOS CRIAR UM E-MAIL MARKETING EM HTML:

Arquivo:http://

www.renatomelo.com.br/esamc/uol.zip

VAMOS MUDAR TUDO!

EDITE O ARQUIVO PELO BLOCO DE NOTAS

DESCOMPACTE TUDO NA MESMA PASTA

ABRA O HTML NO NAVEGADOR

SALVE O ARQUIVO NO BLOCO DE NOTAS

QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?

PRESSIONE A TECLA F5 NO NAVEGADOR

SELECIONE PARA ABRIR TODOS OS ARQUIVOS

PARA APARECER O HTML

HÁ APENAS DOIS ARQUIVOS! O HTML E A

IMAGEM DO EXTRA.

O CÓDIGO TEM 2 PARTES

<HEAD> TUDO AQUILO QUE NÃO É EXIBIDO

NO NAVEGADOR, COM EXCESSÃO DO TÍTULO.

</HEAD>

<BODY> TUDO AQUILO QUE É EXIBIDO NO

NAVEGADOR.</BODY>

O ABRE E FECHA DE CADA CÓDIGO

TOME CUIDADO PARA NÃO APAGAR

ELEMENTOS. <COMANDO> ABRE

UM COMANDO

</COMANDO> FECHA UM COMANDO.

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

INTERPRETANDO O CÓDIGO

INFORMAÇÕES INICIAIS DO CÓDIGO, NÃO VAMOS MEXER

EM NADA.

<title>Uol</title></head>


TITLE = TÍTULOLOGO, VAMOS TROCAR UOL PELA PALAVRA DA

SUA ESCOLHA.

<body style="margin: 0px; padding: 0px;“>


INFORMAÇÕES DE MARGEM E DISTÂNCIA.

NÃO VAMOS MEXER AQUI.

<div style="font-size: 10px; font-family: verdana; padding:10px 0 10px 0;"

align="center“>


INFORMAÇÕES DE FONTE, DISTÂNCIA E

ALINHAMENTO. NÃO VAMOS MEXER AQUI.

<p>Caso não esteja conseguindo visualizar esta mensagem <a

href="www.esamc.br">acesse este link</a> </p>


CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO

DESTE LINK RESOLVE O PROBLEMA.

<p>Caso não esteja conseguindo visualizar esta mensagem <a

href="www.esamc.br"> acesse este link</a> </p>


O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO

ONDE TEM TEXTO.

<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">

acesse este link</a> </p>


O <A> É PARA INCLUSÃO DE LINKS. NO CASO, AS PALAVRAS

ACESSE ESTE LINK VÃO SER MARCADAS PARA RECEBER O

ENDEREÇO DO SITE.

<p>Caso não esteja conseguindo visualizar esta mensagem <a href="www.esamc.br">

acesse este link</a> </p>


COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR,

VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA

OUTRO SITE QUALQUER.

VAMOS SUBSTITUIR A IMAGEM DO TIOZINHO

DA UOL?

PASSO A PASSO

1 – PROCURE UMA IMAGEM NO GOOGLE

2 – SALVE NA MESMA PASTA DO HTML

3 – DEIXE A IMAGEM COM UM NOME FÁCIL E EM MINÚSCULO

4 – VERIFIQUE SE A IMAGEM ESTÁ EM PNG OU JPG

<a href=" http://www.esamc.br "><img src=" uol.jpg " border="0"></a>

</div></body></html>


ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO

TIOZINHO, VOCÊ VAI PARA O SITE DA ESAMC. ALTERE O LINK PARA

UM SITE QUALQUER.

<a href="http://www.extra.com.br"><img src= "uol.jpg" border="0"></a>

</div></body></html>


TROQUE O ENDEREÇO DA IMAGEM, DE UOL PARA O NOME

ESCOLHIDO, ASSIM: “ARQUIVO.JPG”

GRUPObit.ly/gruporenato

#PRÉVIA 01E-MAIL MARKETING

Ler: http://bit.ly/aula02webLer: http://bit.ly/aula02webResponder:Responder:1) Qual dos 5 motivos você julga mais 1) Qual dos 5 motivos você julga mais importante na estratégia de e-mail importante na estratégia de e-mail marketing?marketing?2) Qual importância do e-mail marketing 2) Qual importância do e-mail marketing no marketing digital?no marketing digital?

#PRÉVIA 01E-MAIL MARKETING

Enviar para o e-mail: Enviar para o e-mail: [email protected]@gmail.com

1- Até 28.08 às 18h30 – 100% VALOR1- Até 28.08 às 18h30 – 100% VALOR2- Até 04.09 às 18h30 – 50% VALOR2- Até 04.09 às 18h30 – 50% VALOR

3- APÓS ÀS 18H30 DO DIA 04.09 = 0% 3- APÓS ÀS 18H30 DO DIA 04.09 = 0% VALORVALOR

FACEBOOK.COM/RENATOMELOMKT

como fazer e-mail marketing em html

Design