Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
Transferir como PPT, PDF1 gostou143 visualizações
O documento fornece instruções passo-a-passo sobre como criar um e-mail de marketing simples em HTML. Explica os principais elementos do código HTML como <head>, <body>, <div>, <p>, <a>, <img> e como interpretá-los. Também instrui o leitor a substituir o título, links e imagens do exemplo para customizá-lo.
Html - Iniciando a programação - Webdesign 2019-02 - Aula 2
- 1. COMEÇANDO O HTML WEBDESIGN 2019 – 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: www.rockcontent.com/blog/tudo-sobre- email-marketing Responder: 1) Qual vantagem do e-mail marketing perante às redes sociais? 2) Qual importância de ter uma ferramenta especializada para envio?
- 31. #PRÉVIA 01 E-MAIL MARKETING Enviar para: renatomelo85@gmail.com ou renato.melo@esamc.br Turma de Terça – até 27.08 às 18h30 Turma de Quarta – até 28.03 às 6h20