Introdução à Web e HTML
•Transferir como PPT, PDF•
1 gostou•1,144 visualizações
O documento fornece uma introdução sobre a Internet, HTML e interfaces gráficas. Explica como a Internet é composta por tecnologia de rede aberta, hipertexto e interface gráfica. Ensina os conceitos básicos de HTML e como ele permite a criação de páginas web de forma simples. Discute como as interfaces gráficas tornaram a programação acessível para não especialistas.
Recomendados
Mais conteúdo relacionado
Semelhante a Introdução à Web e HTML
Semelhante a Introdução à Web e HTML (20)
Mais de Renato Melo
Mais de Renato Melo (20)
Último
Último (8)
Introdução à Web e HTML
- 1. INTRODUÇÃO À WEB E HTML RENATO MELO – 2014
- 2. Internet, como é composta? 1. Tecnologia de rede aberta 2. Hipertexto 3. Interface gráfica
- 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. INTERFACE GRÁFICA A parte legal da história...
- 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. Os opostos se atraem O desenvolvimento das interfaces gráficas permitiu a criação de programas WYSIWYG What You See Is What You Get
- 9. #estagiário #bolsa auxílio #650 reais #SEO #links patrocinados #web analytics #redes sociais #facebook, twitter, youtube, google+, linkedin
- 10. #wordpress #geolocalização #foursquare #desenvolviment o de aplicativos #webdesigner #php e asp #diagramação
- 11. NO FINAL DAS CONTAS...
- 12. E o que eu preciso saber?
- 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. Por isso... É bom saber o que é e como funciona cada coisa.
- 15. Especialista Conheça a área, mas especialize-se!
- 16. REGRA 02 A Web muda todo dia. Atualize-se Atualize-se Atualize-se Atualize-se
- 17. HTML Html é um arquivo que pode ser interpretado por navegadores.
- 18. HTML E pode ser editado desde o bloco de notas até programas WYSIWYG, como o Dreamweaver
- 19. Bloco de notas Somente a linha de código contendo sua programação
- 20. Dreamweaver Edição do html na linha de código ou no design.
- 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. TÁ BOM!!!!
- 25. VAMOS CRIAR UM E-MAIL MARKETING EM HTML: Arquivo: http://www.renatomelo.com .br/esamc/html.zip
- 27. EDITE O ARQUIVO PELO BLOCO DE NOTAS DESCOMPACTE TUDO NA MESMA PASTA ABRA O HTML NO NAVEGADOR
- 28. SALVE O ARQUIVO NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
- 29. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML
- 30. HÁ APENAS DOIS ARQUIVOS! O HTML E A IMAGEM DO EXTRA.
- 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. O ABRE E FECHA DE CADA CÓDIGO TOME CUIDADO PARA NÃO APAGAR ELEMENTOS. <COMANDO> ABRE UM COMANDO </COMANDO> FECHA UM COMANDO.
- 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. <title>Extra</title> </head> INTERPRETANDO O CÓDIGO TITLE = TÍTULO LOGO, VAMOS TROCAR EXTRA PELA PALAVRA DA SUA ESCOLHA.
- 35. <body style="margin: 0px; padding: 0px;“> INTERPRETANDO O CÓDIGO INFORMAÇÕES DE MARGEM E DISTÂNCIA. NÃO VAMOS MEXER AQUI.
- 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. <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. <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. <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. <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. VAMOS SUBSTITUIR A IMAGEM DO CACHORRINHO DO EXTRA?
- 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. <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. <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”