Webdesign 02- HTML
Transferir como PPT, PDF0 gostou143 visualizações
O documento fornece instruções passo-a-passo sobre como criar um e-mail de marketing em HTML. Explica que o HTML pode ser editado no Bloco de Notas ou em programas como o Dreamweaver e descreve as partes principais de um código HTML - a tag <head> e a tag <body>.
Webdesign 02- HTML
- 1. COMEÇANDO O HTML WEBDESIGN 2018-02 – RENATO MELO
- 2. HTML Não é grego, nem coisa de nerd. É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
- 3. HTML Html é um arquivo que pode ser interpretado por navegadores.
- 4. HTML E pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
- 5. Bloco de notas Somente a linha de código contendo sua programação
- 6. Dreamweaver Edição do html na linha de código ou no design.
- 7. E COMO FUNCIONA UM CÓDIGO?
- 8. <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>
- 9. 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>
- 10. O ABRE E FECHA DE CADA CÓDIGO TOME CUIDADO PARA NÃO APAGAR ELEMENTOS. <COMANDO> ABRE UM COMANDO </COMANDO> FECHA UM COMANDO.
- 11. #NAPRATICA
- 12. VAMOS CRIAR UM E-MAIL MARKETING EM HTML: Arquivo: http://www.renatomelo.com .br/esamc/uol.zip
- 14. EDITE O ARQUIVO PELO BLOCO DE NOTAS DESCOMPACTE TUDO NA MESMA PASTA ABRA O HTML NO NAVEGADOR
- 15. SALVE O ARQUIVO NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
- 16. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML
- 17. HÁ APENAS DOIS ARQUIVOS! O HTML E A IMAGEM DO EXTRA.
- 18. <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.
- 19. <title>Uol</title> </head> INTERPRETANDO O CÓDIGO TITLE = TÍTULO LOGO, VAMOS TROCAR UOL PELA PALAVRA DA SUA ESCOLHA.
- 20. <body style="margin: 0px; padding: 0px;“> INTERPRETANDO O CÓDIGO INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.
- 21. <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.
- 22. <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.
- 23. <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.
- 24. <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.
- 25. <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.
- 27. 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
- 28. <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.
- 29. <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”
- 30. #PRÉVIA 01 E-MAIL MARKETING Ler: bit.ly/aula2webdesignLer: bit.ly/aula2webdesign 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?
- 31. #PRÉVIA 01 E-MAIL MARKETING Enviar para:Enviar para: renatomelo85@gmail.com ourenatomelo85@gmail.com ou renato.melo@esamc.brrenato.melo@esamc.br Turma de Segunda – até 27.08 às 18h30Turma de Segunda – até 27.08 às 18h30 Turma de Terça – até 28.08 às 18h30Turma de Terça – até 28.08 às 18h30 Turma de Quarta – até 22.08 às 6h20Turma de Quarta – até 22.08 às 6h20