View
637
Download
2
Category
Preview:
Citation preview
COMEÇANDOCOM O HTML
RENATO MELO – 2017
HTMLNão é grego, nem coisa
de nerd.
É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
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 FUNCIONAUM 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>
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.
#NAPRATICA
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 PASTAABRA 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>
INTERPRETANDO O CÓDIGO
TITLE = TÍTULOLOGO, VAMOS TROCAR UOL PELA PALAVRA DA
SUA ESCOLHA.
<body style="margin: 0px; padding: 0px;“>
INTERPRETANDO O CÓDIGO
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“>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR,
VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA
OUTRO SITE QUALQUER.
VAMOS SUBSTITUIR A IMAGEM?
PASSO A PASSO
1 – PROCURE UMA IMAGEM NO GOOGLE2 – SALVE NA MESMA PASTA DO HTML3 – DEIXE A IMAGEM COM UM NOME FÁCIL E EM MINÚSCULO4 – 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>
INTERPRETANDO O CÓDIGO
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>
INTERPRETANDO O CÓDIGO
TROQUE O ENDEREÇO DA IMAGEM, DE UOL PARA O NOME
ESCOLHIDO, ASSIM: “ARQUIVO.JPG”
#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?Enviar para o e-mail: Enviar para o e-mail: renatomelo85@gmail.com até 22.02 às renatomelo85@gmail.com até 22.02 às 18h3018h30
FACEBOOK.COM/RENATOMELOMKT
Recommended