HTML - Webdesign - 2022
Transferir como PPT, PDF1 gostou154 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 explica a estrutura básica de um código HTML, com as seções <head> e <body>, e como elementos como <p> e <a> funcionam. Por fim, apresenta um exercício prático de edição de um email HTML das Americanas.
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