DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
APRESENTAÇAO E INTRODUÇÃO
andre.costa@pro.unifacs.br
ANDRÉ COSTA
•  Mestre em Modelagem Computacional e Tecnologia
Industrial
•  MBA em Gestão da Informação e Projetos de Busi...
A TURMA
E vocês? Qual o perfil da turma?
HORÁRIO
Com ou sem intervalo?
PLANO DE ENSINO
Apresentação do Plano de Ensino
PLANO DE ENSINO
Apresentação do Cronograma
TRABALHO
Apresentação do Trabalho Final
Desenvolver um Sistema em PHP
NOVA METODOLOGIA
Utilização de uma nova “plataforma”:
GAMIFICA
http://andrecosta.info/aulas
PRÊMIO
O “Melhor” escolhe!
Desenvolvimento Web
DESENVOLVIMENTO WEB
SERVIDOR WEB
Instalação do XAMPP
PHP + MySQL
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
INSTALAÇÃO DO XAMPP
ATIVIDADE
•  Fazer o curso de HTML da W3Schools
– www.w3schools.com/html
•  Fazer o seu currículo em HTML
– Utilizar títul...
DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
HTML – Introdução, Estrutura e Tags
andre.costa@pro.unifacs.br
HTML	
  -­‐	
  História	
  
HTML	
  -­‐	
  História	
  
•  HTML - HyperText Markup Language
–  Não é uma linguagem de programação
–  É uma linguagem d...
HTML	
  -­‐	
  História	
  
•  Lançado	
  o	
  HTML	
  3.2	
  em	
  1996	
  em	
  man.do	
  
pela	
  W3C	
  (World	
  Wide...
HTML	
  -­‐	
  História	
  
Tim Berners-Lee
HTML	
  -­‐	
  História	
  
HTML	
  Cross	
  Browser	
  
HTML	
  -­‐	
  História	
  
Exemplo	
  de	
  Incompa.bilidade	
  
HTML	
  -­‐	
  História	
  
HTML	
  -­‐	
  Estrutura	
  
HTML	
  -­‐	
  Estrutura	
  
<tag	
  atributo=“valor”>conteúdo</tag>	
  
ou	
  
<tag	
  atributo=“valor”	
  />	
  
	
  
CE...
HTML	
  -­‐	
  Estrutura	
  
HTML	
  -­‐	
  Estrutura	
  
HTML	
  -­‐	
  Tags	
  
HTML	
  -­‐	
  Tags	
  
•  <h1>Título	
  1</h1>	
  
•  <h2>Título	
  2</h2>	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
...
HTML	
  -­‐	
  Tags	
  
•  <p>Parágrafo	
  1</p>	
  
•  <p>Parágrafo	
  2</p>	
  
HTML	
  -­‐	
  Tags	
  
•  <p>Parágrafo	
  com	
  <b>Negrito</b>,	
  
<i>Itálico</i>	
  e	
  <u>sublinhado</u>.</p>	
  
HTML	
  -­‐	
  Tags	
  
•  <p>Parágrafo	
  com	
  <br	
  /><b>Negrito</b>,	
  <br	
  /><i>Itálico</i>	
  
e	
  <br	
  /><u...
HTML	
  -­‐	
  Tags	
  
•  texto	
  texto	
  <hr	
  />	
  texto	
  texto	
  
HTML	
  -­‐	
  Tags	
  
•  <center>texto	
  centralizado</center>	
  
HTML	
  -­‐	
  Tags	
  
•  <fieldset>	
  
	
  	
  	
  	
  	
  	
  <legend>Legenda</legend>	
  
	
  	
  	
  	
  	
  	
  text...
HTML	
  -­‐	
  Tags	
  
•  <ul>	
  
	
  	
  	
  	
  	
  	
  <li>Item	
  1</li>	
  
	
  	
  	
  	
  	
  	
  <li>Item	
  2</...
HTML	
  -­‐	
  Tags	
  
•  <ol>	
  
	
  	
  	
  	
  	
  	
  <li>Item	
  1</li>	
  
	
  	
  	
  	
  	
  	
  <li>Item	
  2</...
HTML	
  -­‐	
  Tags	
  
•  <img	
  	
  src=“figura_teste.gif”	
  />	
  
HTML	
  -­‐	
  Tags	
  
•  <a	
  href=“pagina.html”>Link	
  para	
  Página</a>	
  
HTML	
  -­‐	
  Tags	
  
Mão	
  na	
  massa!	
  	
  
	
  
Desenvolva	
  em	
  HTML	
  um	
  modelo	
  de	
  currículo,	
  
...
Próximos SlideShares
Carregando em…5
×

Aula 1 apresentação + html (tags)

1.046 visualizações

Publicada em

Aulas UNIFACS

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.046
No SlideShare
0
A partir de incorporações
0
Número de incorporações
755
Ações
Compartilhamentos
0
Downloads
49
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 1 apresentação + html (tags)

  1. 1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA APRESENTAÇAO E INTRODUÇÃO andre.costa@pro.unifacs.br
  2. 2. ANDRÉ COSTA •  Mestre em Modelagem Computacional e Tecnologia Industrial •  MBA em Gestão da Informação e Projetos de Business Intelligence •  Bacharel em Sistemas da Informação •  Cursos de Gestão de Projetos •  Coordenador da Equipe de Desenvolvimento do ITED/ SENAI-BA •  Professor Universitário (Todos os cursos de TI) www.andrecosta.info
  3. 3. A TURMA E vocês? Qual o perfil da turma?
  4. 4. HORÁRIO Com ou sem intervalo?
  5. 5. PLANO DE ENSINO Apresentação do Plano de Ensino
  6. 6. PLANO DE ENSINO Apresentação do Cronograma
  7. 7. TRABALHO Apresentação do Trabalho Final Desenvolver um Sistema em PHP
  8. 8. NOVA METODOLOGIA Utilização de uma nova “plataforma”: GAMIFICA http://andrecosta.info/aulas
  9. 9. PRÊMIO O “Melhor” escolhe!
  10. 10. Desenvolvimento Web
  11. 11. DESENVOLVIMENTO WEB
  12. 12. SERVIDOR WEB Instalação do XAMPP PHP + MySQL
  13. 13. INSTALAÇÃO DO XAMPP
  14. 14. INSTALAÇÃO DO XAMPP
  15. 15. INSTALAÇÃO DO XAMPP
  16. 16. INSTALAÇÃO DO XAMPP
  17. 17. INSTALAÇÃO DO XAMPP
  18. 18. INSTALAÇÃO DO XAMPP
  19. 19. INSTALAÇÃO DO XAMPP
  20. 20. INSTALAÇÃO DO XAMPP
  21. 21. INSTALAÇÃO DO XAMPP
  22. 22. INSTALAÇÃO DO XAMPP
  23. 23. INSTALAÇÃO DO XAMPP
  24. 24. ATIVIDADE •  Fazer o curso de HTML da W3Schools – www.w3schools.com/html •  Fazer o seu currículo em HTML – Utilizar título, lista, imagem, link e tentar utilizar tabela
  25. 25. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA HTML – Introdução, Estrutura e Tags andre.costa@pro.unifacs.br
  26. 26. HTML  -­‐  História  
  27. 27. HTML  -­‐  História   •  HTML - HyperText Markup Language –  Não é uma linguagem de programação –  É uma linguagem de marcação •  Criado pelo Físico Tim Berners-Lee em 1980 •  Tornou-se pública em 1991 •  Lançado o HTML 2.0 em 1994
  28. 28. HTML  -­‐  História   •  Lançado  o  HTML  3.2  em  1996  em  man.do   pela  W3C  (World  Wide  Web  Consor.um)   •  Lançado  o  HTML  4.0  em  1997  e  lançado  uma   errata  em  1999  com  o  HTML  4.01   •  Lançado  em  2008  o  HTML  5  
  29. 29. HTML  -­‐  História   Tim Berners-Lee
  30. 30. HTML  -­‐  História   HTML  Cross  Browser  
  31. 31. HTML  -­‐  História   Exemplo  de  Incompa.bilidade  
  32. 32. HTML  -­‐  História  
  33. 33. HTML  -­‐  Estrutura  
  34. 34. HTML  -­‐  Estrutura   <tag  atributo=“valor”>conteúdo</tag>   ou   <tag  atributo=“valor”  />     CERTO:   <tag_1><tag_2>texto</tag_2></tag_1>   ERRADO   <tag_1><tag_2>texto</tag_1></tag_2>  
  35. 35. HTML  -­‐  Estrutura  
  36. 36. HTML  -­‐  Estrutura  
  37. 37. HTML  -­‐  Tags  
  38. 38. HTML  -­‐  Tags   •  <h1>Título  1</h1>   •  <h2>Título  2</h2>                                  …   •  <h6>Título  6</h6>  
  39. 39. HTML  -­‐  Tags   •  <p>Parágrafo  1</p>   •  <p>Parágrafo  2</p>  
  40. 40. HTML  -­‐  Tags   •  <p>Parágrafo  com  <b>Negrito</b>,   <i>Itálico</i>  e  <u>sublinhado</u>.</p>  
  41. 41. HTML  -­‐  Tags   •  <p>Parágrafo  com  <br  /><b>Negrito</b>,  <br  /><i>Itálico</i>   e  <br  /><u>sublinhado</u>.</p>  
  42. 42. HTML  -­‐  Tags   •  texto  texto  <hr  />  texto  texto  
  43. 43. HTML  -­‐  Tags   •  <center>texto  centralizado</center>  
  44. 44. HTML  -­‐  Tags   •  <fieldset>              <legend>Legenda</legend>              texto            </fieldset>  
  45. 45. HTML  -­‐  Tags   •  <ul>              <li>Item  1</li>              <li>Item  2</li>            </ul>  
  46. 46. HTML  -­‐  Tags   •  <ol>              <li>Item  1</li>              <li>Item  2</li>            </ol>  
  47. 47. HTML  -­‐  Tags   •  <img    src=“figura_teste.gif”  />  
  48. 48. HTML  -­‐  Tags   •  <a  href=“pagina.html”>Link  para  Página</a>  
  49. 49. HTML  -­‐  Tags   Mão  na  massa!       Desenvolva  em  HTML  um  modelo  de  currículo,   contendo:  Foto,  Dados  pessoais,  Obje.vo,   Escolaridade  e  Experiência.  

×