HTML - Webdesign - 2022
Transferir como PPT, PDF0 gostou85 visualizações
O documento fornece uma introdução sobre HTML, explicando que ele pode ser editado em editores de texto ou programas como Dreamweaver. Ele também apresenta os elementos básicos de um código HTML, como <head>, <body>, <title> e como eles funcionam. Por fim, há um exercício prático guiado para editar um email marketing em HTML.
HTML - Webdesign - 2022
- 1. COMEÇANDO O HTML WEBDESIGN 2022 – 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 VER COMO FUNCIONA UM E-MAIL MARKETING DAS AMERICANAS EM HTML:
- 14. LOCALIZE O ZIP NO SEU COMPUTADOR 1
- 15. 2 CLIQUE EM EXTRAIR E MANTENHA A MARCAÇÃO ABAIXO NOS “..”
- 16. 3 CLIQUE PRIMEIRO EM “ÁREA DE TRABALHO” AO LADO. DEPOIS, COMPLEMENTE COM O NOME DE UMA PASTA: AULA 1
- 18. 5 ABRA O BLOCO DE NOTAS E SELECIONE: ARQUIVO ABRIR
- 19. 6 CLIQUE EM TODOS OS ARQUIVOS E SELECIONE O INDEX.HTML
- 20. SALVE O ARQUIVO NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
- 21. <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.
- 22. <title>Americanas</title> </head> INTERPRETANDO O CÓDIGO TITLE = TÍTULO LOGO, VAMOS TROCAR UOL PELA PALAVRA DA SUA ESCOLHA.
- 23. <body style="margin: 0px; padding: 0px;“> INTERPRETANDO O CÓDIGO INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.
- 24. <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.
- 25. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://www.americanas.com.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.
- 26. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://www.americanas.com.br">acesse este link</a></p> INTERPRETANDO O CÓDIGO O <P> É DE PARÁGRAFO, POR ISSO INCLUI TUDO ONDE TEM TEXTO.
- 27. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://www.americanas.com.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.
- 28. <p>Caso não esteja conseguindo visualizar esta mensagem <a href="http://www.americanas.com.br">acesse este link</a></p> INTERPRETANDO O CÓDIGO TROQUE O LINK DAS AMERICANAS POR OUTRO SITE
- 29. INTERPRETANDO O CÓDIGO O LINK FICA NO TEXTO “ACESSE ESTE LINK” E, ASSIM QUE VOCÊ PASSA O MOUSE, ELE APARECE LOGO ABAIXO
- 31. 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
- 32. INTERPRETANDO O CÓDIGO TROQUE O ENDEREÇO DA IMAGEM PARA O NOME ESCOLHIDO, ASSIM: “ARQUIVO.JPG” <a href="http://www.americanas.com.br"><img src="imagem.jpg" border="0"></a></div>
- 33. <a href="http://www.americanas.com.br"><img src="imagem.jpg" border="0"></a></div> INTERPRETANDO O CÓDIGO ESTE LINK SIGNIFICA QUE, AO CLICAR NA IMAGEM, VOCÊ VAI PARA O SITE DA AMERICANAS. ALTERE O LINK PARA UM SITE QUALQUER.
- 34. </body> </html> INTERPRETANDO O CÓDIGO AI FECHAMOS O CÓDIGO FINALIZANDO O BODY E O HTML.
- 35. COMEÇANDO O HTML WEBDESIGN 2022 – RENATO MELO