HTML E WEB - COMO FUNCIONA E TUTORIAL

823 views
669 views

Published on

Aula de introdução ao html e web, traz uma aula prática de e-mail marketing. Nela, você irá produzir passo a passo o seu próprio código para enviar por e-mail. Este código é o mesmo utilizado por grandes empresas na hora de enviar seu e-mail.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
823
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML E WEB - COMO FUNCIONA E TUTORIAL

  1. 1. INTRODUÇÃO À WEB E HTML RENATO MELO – 2014
  2. 2. Internet, como é composta? 1. Tecnologia de rede aberta 2. Hipertexto 3. Interface gráfica
  3. 3. HTML Não é grego, nem coisa de nerd. É que nem inglês. Não precisa saber, mas quem sabe sempre tem um diferencial.
  4. 4. INTERFACE GRÁFICA A parte legal da história...
  5. 5. 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
  6. 6. Os opostos se atraem O desenvolvimento das interfaces gráficas permitiu a criação de programas WYSIWYG What You See Is What You Get
  7. 7. CONTRATANDO UM ESTAGIÁRIO
  8. 8. #estagiário #bolsa auxílio #650 reais
  9. 9. #estagiário #bolsa auxílio #650 reais #SEO #links patrocinados #web analytics #redes sociais #facebook, twitter, youtube, google+, linkedin
  10. 10. #wordpress #geolocalização #foursquare #desenvolviment o de aplicativos #webdesigner #php e asp #diagramação
  11. 11. NO FINAL DAS CONTAS...
  12. 12. E o que eu preciso saber?
  13. 13. 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á.
  14. 14. Por isso... É bom saber o que é e como funciona cada coisa.
  15. 15. Especialista Conheça a área, mas especialize-se!
  16. 16. REGRA 02 A Web muda todo dia. Atualize-se Atualize-se Atualize-se Atualize-se
  17. 17. HTML Html é um arquivo que pode ser interpretado por navegadores.
  18. 18. HTML E pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
  19. 19. Bloco de notas Somente a linha de código contendo sua programação
  20. 20. Dreamweaver Edição do html na linha de código ou no design.
  21. 21. E COMO FUNCIONA UM CÓDIGO?
  22. 22. <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>
  23. 23. TÁ BOM!!!!
  24. 24. AGORA VAMOS DEIXÁ-LO FÁCIL!
  25. 25. VAMOS CRIAR UM E-MAIL MARKETING EM HTML: Arquivo: http://www.renatomelo.com .br/esamc/html.zip
  26. 26. VAMOS MUDAR TUDO!
  27. 27. EDITE O ARQUIVO PELO BLOCO DE NOTAS DESCOMPACTE TUDO NA MESMA PASTA ABRA O HTML NO NAVEGADOR
  28. 28. SALVE O ARQUIVO NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
  29. 29. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML
  30. 30. HÁ APENAS DOIS ARQUIVOS! O HTML E A IMAGEM DO EXTRA.
  31. 31. 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>
  32. 32. O ABRE E FECHA DE CADA CÓDIGO TOME CUIDADO PARA NÃO APAGAR ELEMENTOS. <COMANDO> ABRE UM COMANDO </COMANDO> FECHA UM COMANDO.
  33. 33. <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.
  34. 34. <title>Extra</title> </head> INTERPRETANDO O CÓDIGO TITLE = TÍTULO LOGO, VAMOS TROCAR EXTRA PELA PALAVRA DA SUA ESCOLHA.
  35. 35. <body style="margin: 0px; padding: 0px;“> INTERPRETANDO O CÓDIGO INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.
  36. 36. <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.
  37. 37. <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> INTERPRETANDO O CÓDIGO CASO O SERVIDOR DE E-MAIL BLOQUEIE A EXIBIÇÃO DA MENSAGEM, A CRIAÇÃO DESTE LINK RESOLVE O PROBLEMA.
  38. 38. <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> INTERPRETANDO O CÓDIGO O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO ONDE TEM TEXTO.
  39. 39. <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> 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.
  40. 40. <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> INTERPRETANDO O CÓDIGO COMO ESTAMOS TRABALHANDO DIRETO DO COMPUTADOR, VAMOS TROCAR O LINK. ALTERE O CONTEÚDO ENTRE “” PARA OUTRO SITE QUALQUER.
  41. 41. VAMOS SUBSTITUIR A IMAGEM DO CACHORRINHO DO EXTRA?
  42. 42. 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
  43. 43. <a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/web- aula2/extra.jpg" border="0"></a> </div> </body> </html> INTERPRETANDO O CÓDIGO ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM DO CACHORRINHO, VOCÊ VAI PARA O SITE DO EXTRA. ALTERE O LINK PARA UM SITE QUALQUER.
  44. 44. <a href="http://www.extra.com.br"><img src="http://renatomelomkt.com.br/esamc/web- aula2/extra.jpg" border="0"></a> </div> </body> </html> INTERPRETANDO O CÓDIGO ESTE É O ENDEREÇO DE ONDE A IMAGEM ESTÁ HOSPEDADA. COMO ESTAMOS TRABALHANDO NO COMPUTADOR, COLOQUE O NOME DO SEU ARQUIVO ASSIM “ARQUIVO.JPG”
  45. 45. FACEBOOK.COM/ RENATOMELOMKT

×