Começando com HTML

COMEÇANDO
COM O HTML
RENATO MELO – 2017

HTML
Não é grego, nem coisa
de nerd.
É que nem inglês.
Não precisa saber, mas quem
sabe sempre tem um diferencial.

HTML
Html é um arquivo que pode ser
interpretado por navegadores.

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

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

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

<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>

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.

VAMOS CRIAR
UM E-MAIL
MARKETING EM
HTML:
Arquivo:
http://www.renatomelo.com
.br/esamc/uol.zip

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.

<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ÍTULO
LOGO, 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.

mensagem <a href="www.esamc.br"> acesse este
link</a> </p>
O <P> É DE PARÁGRAFO, POR
ISSO INCLUI TUDO ONDE TEM
TEXTO.

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.

link</a> </p>
COMO ESTAMOS TRABALHANDO
DIRETO DO COMPUTADOR, VAMOS
TROCAR O LINK. ALTERE O CONTEÚDO
ENTRE “” PARA OUTRO SITE QUALQUER.

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”

#PRÉVIA 01
E-MAIL MARKETING
Ler: http://bit.ly/aula02webLer: http://bit.ly/aula02web
Responder:Responder:
1) Qual dos 5 motivos você julga mais1) Qual dos 5 motivos você julga mais
importante na estratégia de e-mail marketing?importante na estratégia de e-mail marketing?
2) Qual importância do e-mail marketing no2) Qual importância do e-mail marketing no
marketing digital?marketing digital?
Enviar para o e-mail:Enviar para o e-mail:
renatomelo85@gmail.com até 22.02 às 18h30renatomelo85@gmail.com até 22.02 às 18h30

Começando com HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Destaque

Destaque (20)

Semelhante a Começando com HTML

Semelhante a Começando com HTML (20)

Mais de Renato Melo

Mais de Renato Melo (20)

Começando com HTML