Curso Desenvolvimento WEB com PHP - HTML

3.753 visualizações

Publicada em

Material utilizado durante o curso de Desenvolvimento WEB com PHP, realizado na UNIPAR campus Paranavaí em março de 2010.

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

Sem downloads
Visualizações
Visualizações totais
3.753
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
205
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Curso Desenvolvimento WEB com PHP - HTML

  1. 1. <html><br />Desenvolvimento WEB com PHP<br />
  2. 2. Quem sou eu?<br />WILLIAN MAGALHÃES<br /><ul><li>Bacharel em Sistemas de Informação</li></ul> (UNIPAR 2007)<br /><ul><li>Pós-graduado em Desenvolvimento de sistemas para WEB (UEM 2010)</li></li></ul><li>Cronograma<br /><ul><li>1 aula - Introdução, Padrões WEB e HTML
  3. 3. 1 aula - CSS e layouts
  4. 4. 8 aulas - PHP (projeto completo)
  5. 5. Sequência das aulas
  6. 6. Rendimento da turma</li></li></ul><li>Rápida Introdução<br />
  7. 7. Entendendo a WEB<br />Serverside<br />PHPMySQL<br />Apache<br />Clientside<br />HTMLCSS<br />JavaScript<br />
  8. 8. Pensamento interessante...<br />
  9. 9. Web Stadards<br />
  10. 10. Web Standards<br /><ul><li>Conjunto de tecnologias criadas pelo W3C
  11. 11. HTML, XHTML, CSS, entre outras
  12. 12. Padronização na exibição (browsers)
  13. 13. Maior facilidade na manutenção
  14. 14. Ranking sites de busca (bem escrito)
  15. 15. Otimização de páginas web (performance)</li></li></ul><li>Web Standards<br /><ul><li>Garantindo Acessibilidade e Portabilidade
  16. 16. Aplicações do tipo cross-browser
  17. 17. Estatísticas de browsers</li></ul>Fonte: www.w3schools.com<br />
  18. 18. HTML / XHTML<br />
  19. 19. Conceitos básicos<br />HTML (Linguagem de Marcação de Hiper Texto)<br /><ul><li>documento de texto contendo tags de marcação que informam ao browser como exibir a página</li></ul>XHTML (eXtensible Markup Language)<br /><ul><li>versão melhorada do HTML baseada na XML
  20. 20. sintaxe regular e previsível que facilita a leitura einterpretação por softwares (browsers)</li></li></ul><li>Características da XHTML<br /><ul><li>Tags devem ser escritas em letras minúsculas
  21. 21. Tags devem ser aninhadas
  22. 22. Uso de Tags de fechamento obrigatório
  23. 23. Elementos vazios devem ser fechados
  24. 24. Valores dos atributos devem estar entre “aspas”</li></li></ul><li>Estrutura do documento XHTML<br /><ul><li>Declaração que identifica um documento como XHTML
  25. 25. DOCTYPE
  26. 26. html
  27. 27. Um cabeçalho para o documento
  28. 28. head
  29. 29. Um corpo para o documento
  30. 30. body</li></li></ul><li>Identificação do documento<br /><ul><li>DOCTYPE (DocumentTypeDefinition – DTD)
  31. 31. Identifica a versão do XHTML, indicando como o navegador interpretará
  32. 32. Possui três versões</li></li></ul><li>Identificação do documento<br />XHTML 1.0 Transitional: constitui elementos HTML e atributos de apresentação (tanto CSS quanto elementos em desuso)<br />XHTML 1.0 Strict: separa a estrutura dos elementos da apresentação. Não permite atributos de apresentação nem elementos em desuso. Uso de folhas de estilo (CSS).<br />XHTML 1.0 Frameset: inclui os elementos HTML (Transitional), inclusive elementos que possibilitam o uso de frames.<br />
  33. 33. Olá HTML<br /> indentação/ .HTM .HTML .XHTML<br />
  34. 34. Formatação básica<br />Títulos<br />Parágrafos<br />Quebra de linha<br />Divisão de seções<br /><h1> Título </h1><br /><p> Parágrafo </p><br /><br /><br /><hr /><br />
  35. 35. Listas<br />Ordenadas<br /><ol><br /> <li> Introdução </li><br /> <li> Conceitos básicos </li><br /> <li> Conceitos avançados </li><br /></ol><br />
  36. 36. Listas<br />Não-ordenadas<br /><ul><br /> <li> Pentium 100MHz </li><br /> <li> 8MB de Ram </li><br /> <li> HD de 2GB </li><br /></ul><br />
  37. 37. Listas<br />Definição<br /><dl><br /> <dt> Pentium 100MHz </dt><br /> <dd> Processador fabricado pela empresa INTEL, componente responsável pelo processamento.<br /> </dd><br /></dl><br />
  38. 38. Imagens<br />Tag <img><br />Atributos<br /><imgsrc=“imagem.jpg” /><br /><imgsrc=“imagem.jpg” alt=“foto linda” /><br />
  39. 39. Hiperlinks<br />Entre páginas<br />Caminho absoluto / Caminho relativo<br />Atributo target<br /><a href=“pagina2.html”> Ir para página 2 </a><br /><a href=“http://www.site.com/pasta/pagina.html”> ...<br /><a href=“pasta/pagina.html”> ...<br /><a href=“pagina2.html” target=“_blank”> Página 2 </a><br />
  40. 40. Hiperlinks<br />Âncoras<br />E-mails<br /><a name=“topo”> Parte superior do documento </a><br /><a href=“#topo”> Ir a parte superior </a><br /><a href=“mailto:email@email.com”> E-Mail</a><br />
  41. 41. Tabelas<br />Estrutura básica<br /><table><br /><tr><br /><th> Janeiro </th><br /><th> Fevereiro </th><br /></tr><br /><tr><br /><td> 10% </td><br /><td> 20% </td><br /></tr><br /></table><br />
  42. 42. Tabelas<br />Mesclando células<br />...<br /><tr><br /><tdcolspan=“2”> Conteúdo </td><br /></tr><br />...<br /> <tr><br /> <tdrowpan=“2”> Conteúdo </td><br /> </tr><br />...<br />
  43. 43. Formulários<br />Estrutura básica<br /><formmethod=“GET” action=“valida.html”><br /> ...<br /><input type=“submit” /><br /></form><br />
  44. 44. Formulários<br />Campo de texto<br />Campo de senha<br />Caixa de seleção<br />Botões de opção<br /><input type=“text” /><br /><input type=“password” /><br /><input type=“checkbox” value=“valor” /><br /><input type=“radio” name=“sexo” value=“masc” /><br /><input type=“radio” name=“sexo” value=“fem” /><br />
  45. 45. Formulários<br />Listas ou menus<br />Campo de texto com várias linhas<br /><selectsize=“1”><br /><optionvalue=“azul”> Azul </option><br /><optionvalue=“verde”> Verde </option><br /></select><br /><textarearows=“5” cols=“50”> </textarea><br />
  46. 46. Formulários<br />Botão simples<br />Botão de reset<br />Botão enviar<br /><input type=“button” value=“pressione aqui” /><br /><input type=“reset” value=“limpar” /><br /><input type=“submit” value=“enviar” /><br />
  47. 47. Organizado os dados<br />Conjunto de campos<br />Rótulos<br />...<br /><fieldset><br /> <legend> Título </legend><br /></fieldset><br />...<br />...<br /><label for=“nomeCampo”> Rótulo </label><br />...<br />
  48. 48. Entendendo os frames<br />
  49. 49. Frames<br />Estrutura básica<br />Iframe<br /><framesetcols=“100px,*”><br /> <frame src=“pagina1.html noresize /><br /> <frame src=“pagina2.html name=“principal” /><br /></frameset><br /><iframesrc=“www.google.com" width=“200" height="300"><br /> <p> Seu Browser não suporta iframes </p><br /></iframe><br />
  50. 50. Bibliografia<br /><ul><li>Livro
  51. 51. Guia de consulta rápida HTML 4
  52. 52. Sites
  53. 53. www.apostilando.com
  54. 54. www.leandrovieira.com
  55. 55. www.maujor.com
  56. 56. www.w3schools.com</li></ul>alexandre.chokito@gmail.com will_magalhaes@yahoo.com.br<br />
  57. 57. JBRIGADO!<br /></html><br />

×