Your SlideShare is downloading. ×
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML&CSS 7 - Tips & Tricks

830

Published on

Slides for my in-house HTML & CSS trainning at SAPO. …

Slides for my in-house HTML & CSS trainning at SAPO.

Tips, tricks, do's and don'ts.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
830
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML TIPS TRICKS& CSS DONTS DOSDINIS CORREIA 2011 cbn
  • 2. O CSS É COMO O XADREZ FOTO DE KEVIN OMARA c HTTP://FLIC.KR/P/3TYZSI
  • 3. HTMLSEMÂNTICO
  • 4. <p  class="titulo">SAPO.pt</p><div  class="nav"> ...</div>
  • 5. <p  class="titulo">SAPO.pt</p><div  class="nav"> ...</div>
  • 6. <h1>SAPO.pt</h1><ul  class="nav"> ...</ul>
  • 7. <div  class="barra-­‐verde"> ...</div>
  • 8. <div  class="barra-­‐verde"> ...</div>
  • 9. <div  class="header"> ...</div>
  • 10. <p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>
  • 11. <p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>
  • 12. <p>Ó  mar  salgado,  quanto  do  teu  sal<br>São  lágrimas  de  Portugal!<br>Por  te  cruzarmos,  quantas  mães  choraram,<br>Quantos  filhos  em  vão  rezaram!<br>Quantas  noivas  ficaram  por  casar<br>Para  que  fosses  nosso,  ó  mar!</p>
  • 13. http://naked.dustindiaz.com
  • 14. PROGRESSIVEENHANCEMENT
  • 15. CONTEÚDO HTML APRESENTAÇÃO CSSCOMPORTAMENTOJavaScript
  • 16. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  • 17. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  • 18. CSSCONDITIONAL
  • 19. p  { margin:  10px; _margin:  20px;}
  • 20. p  { margin:  10px; _margin:  20px;}
  • 21. <link  type="text/css"  rel="stylesheet"  href="global.css"><!-­‐-­‐[if  IE  6]><link  type="text/css"  rel="stylesheet"  href="ie6.css"><![end  if]-­‐-­‐>
  • 22. http://bit.ly/conditional_css
  • 23. http://bit.ly/css_compat
  • 24. LIDAR COM BUGSDE CSSFOTO DE BRIAN SEARLE c HTTP://FLIC.KR/P/5KVVSL
  • 25. http://bit.ly/ie_bugs
  • 26. CSS RESET
  • 27. 1 2 3 User User Author agent
  • 28. http://bit.ly/reset_meyerweb
  • 29. http://bit.ly/reset_meyerweb
  • 30. COMENTÁRIOS
  • 31. “Comments as notes-to-future-self FTW @gruber — http://twitter.com/gruber/status/391293102
  • 32. /*  Header  */h1.logoul.nav  {  ...  }ul.nav  li  {  ..  }/*  Content  */.item  {  ...  }  
  • 33. http://bit.ly/css_edit
  • 34. http://bit.ly/css_edit
  • 35. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> </div></div>
  • 36. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> <!-­‐-­‐  Um  comentário  -­‐-­‐> </div></div>
  • 37. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> <!-­‐-­‐  /.search  -­‐-­‐> </div> <!-­‐-­‐  /.header  -­‐-­‐></div><!-­‐-­‐  /.container  -­‐-­‐>
  • 38. FERRAMENTAS
  • 39. http://bit.ly/firebug
  • 40. http://bit.ly/firebug
  • 41. http://bit.ly/notepad_plus
  • 42. E AINDA...
  • 43. http://bit.ly/css_cheat_sheet
  • 44. http://alistapart.com
  • 45. http://www.456bereastreet.com
  • 46. http://www.webdesignerwall.com
  • 47. http://css-tricks.com
  • 48. http://csszengarden.com
  • 49. http://csszengarden.com
  • 50. http://csszengarden.com
  • 51. OBRIGADOdiniscorreia@mac.com@diniscorreia

×