Introdução a HTML/CSS<br />Marcos Roberto Ferreira<br />marcos.wp@gmail.com<br />@marcoooos<br />
BRAVA ECM<br />Empresa especialista na distribuição e prestação de serviços em soluções de GED/CM, Workflow/BPM, Qualidade...
Programação<br />O que é HTML<br />Como escrever HTML<br />Principais tags<br />Tags importantes<br />Algumas tags conheci...
O que é HTML?<br />4<br />
HyperTextMarkup Language<br />5<br />
Linguagem de Marcação<br />“Quem aqui nunca utilizou linguagem de marcação, não é?”<br />6<br />
E Hypertexto?<br />7<br />
Nelson não gostava de texto...<br />8<br />
Ele queria algo não sequêncial<br />9<br />
E com imagens!<br />10<br />
HyperTexto<br />11<br />
HyperTexto<br />Tem um texto aqui!!!!<br />12<br />
HyperTexto<br />Tem um texto aqui!!!!<br />Tem um link aqui!!!!<br />13<br />
Como escrever HTML?<br />14<br />
15<br />
tagse atributos<br />16<br />
atributo<br />tag<br /><a href=“algo.html”><br />	Isto é um link<br /></a><br />17<br />
18<br />
Pricipaistags<br />19<br />
Tudo começa com a tag <html><br />20<br />
Assim como nós HTML possui um <head> e um <body><br /><head><br /></head><br /><body><br /></body><br />21<br />
<head> e <body><br />22<br />
E não ter um deles também faz falta!<br />23<br />
Outras tags importantes<br />24<br />
<title><br /></title><br />25<br />
<title><br />26<br />
Headings<br /><h1><br /><h2><br /></h1><br /></h2><br /><h3><br /></h3><br />27<br />
<h1>, <h2>, <h3><br />28<br />
Parágrafo<br /><p><br /></p><br /><p><br /></p><br />29<br />
<p><br />30<br />
Links<br /><a><br /></a><br />31<br />
<a><br />32<br />
Imagens<br /><img><br /></img><br />33<br />
<img><br />34<br />
Tabelas<br /><table><br /></table><br />35<br />
Tabelas<br /><table><br /><tr><br /></tr><br /></table><br />36<br />
Tabelas<br /><table><br /><tr><br /></tr><br /><td><br /></td><br /></table><br />37<br />
<table><br />38<br />
Forms<br /><form><br /></form><br />39<br />
Forms<br /><form><br /><input type=“text”/><br /></form><br />40<br />
Forms<br /><form><br /><input type=“text”/><br /><input type=“radio” name=“campo” value=“1”><br /><input type=“radio” name...
Forms<br /><form><br /><input type=“text”/><br /><select><br /><option><br /></option><br /></select><br /></form><br />42...
<form><br />43<br />
<form><br /><input id="nome" name="nome" type="text" /><br /><input name="casado" id="casado" type="checkbox"><br /><input...
Outras tags conhecidas<br /><div/> define uma divisão ou seção<br /><br/>  pula uma linha<br /><button/> cria um botão<br ...
CSS<br />Cascade Style Sheet<br />46<br />
47<br />
Declaração de um estilo<br />48<br />
Declaração CSS – Arquivo externo<br />49<br />
Declaração CSS – Declaração interna<br />50<br />
Declaração CSS – Em linha<br />51<br />
Exemplo com CSS<br />52<br />
Exemplo com CSS<br />53<br />
Referências<br />http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid<br />http://www.w3schools....
QUESTÕES?<br />bravaecm@totvs.com.br <br />
Upcoming SlideShare
Loading in …5
×

Developer day 2010 - html-css

559 views
487 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
559
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Developer day 2010 - html-css

  1. 1. Introdução a HTML/CSS<br />Marcos Roberto Ferreira<br />marcos.wp@gmail.com<br />@marcoooos<br />
  2. 2. BRAVA ECM<br />Empresa especialista na distribuição e prestação de serviços em soluções de GED/CM, Workflow/BPM, Qualidade e Portais, que conta com a credibilidade de ser uma empresa com o selo TOTVS Business Partner.<br />10 anos de atuação no mercado<br />+ de 1.000 projetos entregues<br />+ de 1.000.000 horas <br />aplicadas em projetos<br />Equipe certificada e<br />altamente qualificada para atendimento em toda a América Latina<br />
  3. 3. Programação<br />O que é HTML<br />Como escrever HTML<br />Principais tags<br />Tags importantes<br />Algumas tags conhecidas<br />CSS<br />3<br />
  4. 4. O que é HTML?<br />4<br />
  5. 5. HyperTextMarkup Language<br />5<br />
  6. 6. Linguagem de Marcação<br />“Quem aqui nunca utilizou linguagem de marcação, não é?”<br />6<br />
  7. 7. E Hypertexto?<br />7<br />
  8. 8. Nelson não gostava de texto...<br />8<br />
  9. 9. Ele queria algo não sequêncial<br />9<br />
  10. 10. E com imagens!<br />10<br />
  11. 11. HyperTexto<br />11<br />
  12. 12. HyperTexto<br />Tem um texto aqui!!!!<br />12<br />
  13. 13. HyperTexto<br />Tem um texto aqui!!!!<br />Tem um link aqui!!!!<br />13<br />
  14. 14. Como escrever HTML?<br />14<br />
  15. 15. 15<br />
  16. 16. tagse atributos<br />16<br />
  17. 17. atributo<br />tag<br /><a href=“algo.html”><br /> Isto é um link<br /></a><br />17<br />
  18. 18. 18<br />
  19. 19. Pricipaistags<br />19<br />
  20. 20. Tudo começa com a tag <html><br />20<br />
  21. 21. Assim como nós HTML possui um <head> e um <body><br /><head><br /></head><br /><body><br /></body><br />21<br />
  22. 22. <head> e <body><br />22<br />
  23. 23. E não ter um deles também faz falta!<br />23<br />
  24. 24. Outras tags importantes<br />24<br />
  25. 25. <title><br /></title><br />25<br />
  26. 26. <title><br />26<br />
  27. 27. Headings<br /><h1><br /><h2><br /></h1><br /></h2><br /><h3><br /></h3><br />27<br />
  28. 28. <h1>, <h2>, <h3><br />28<br />
  29. 29. Parágrafo<br /><p><br /></p><br /><p><br /></p><br />29<br />
  30. 30. <p><br />30<br />
  31. 31. Links<br /><a><br /></a><br />31<br />
  32. 32. <a><br />32<br />
  33. 33. Imagens<br /><img><br /></img><br />33<br />
  34. 34. <img><br />34<br />
  35. 35. Tabelas<br /><table><br /></table><br />35<br />
  36. 36. Tabelas<br /><table><br /><tr><br /></tr><br /></table><br />36<br />
  37. 37. Tabelas<br /><table><br /><tr><br /></tr><br /><td><br /></td><br /></table><br />37<br />
  38. 38. <table><br />38<br />
  39. 39. Forms<br /><form><br /></form><br />39<br />
  40. 40. Forms<br /><form><br /><input type=“text”/><br /></form><br />40<br />
  41. 41. Forms<br /><form><br /><input type=“text”/><br /><input type=“radio” name=“campo” value=“1”><br /><input type=“radio” name=“campo” value=“2”><br /></form><br />41<br />
  42. 42. Forms<br /><form><br /><input type=“text”/><br /><select><br /><option><br /></option><br /></select><br /></form><br />42<br />
  43. 43. <form><br />43<br />
  44. 44. <form><br /><input id="nome" name="nome" type="text" /><br /><input name="casado" id="casado" type="checkbox"><br /><input name="sexo" id="sexoM" value="M" type="radio"><br /><input name="sexo" id="sexoF" value=“F" type="radio"><br /><select><br /> <option>Ensino médio</option><br /> <option>Ensino superior</option><br /> <option>Pós-graduado</option><br /></select><br />44<br />
  45. 45. Outras tags conhecidas<br /><div/> define uma divisão ou seção<br /><br/> pula uma linha<br /><button/> cria um botão<br /><textarea/>cria uma área de texto<br />45<br />
  46. 46. CSS<br />Cascade Style Sheet<br />46<br />
  47. 47. 47<br />
  48. 48. Declaração de um estilo<br />48<br />
  49. 49. Declaração CSS – Arquivo externo<br />49<br />
  50. 50. Declaração CSS – Declaração interna<br />50<br />
  51. 51. Declaração CSS – Em linha<br />51<br />
  52. 52. Exemplo com CSS<br />52<br />
  53. 53. Exemplo com CSS<br />53<br />
  54. 54. Referências<br />http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-to-avoid<br />http://www.w3schools.com/html/default.asp<br />http://www.w3schools.com/css/default.asp<br />http://piadasdaleloca.blogspot.com/2009/09/entendendo-html-em-outras-palavras.html<br />http://pt.wikipedia.org/wiki/HTML<br />http://pt.wikipedia.org/wiki/Hipertexto<br />54<br />
  55. 55. QUESTÕES?<br />bravaecm@totvs.com.br <br />

×